npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@szmg-fe/community

v0.2.4

Published

community app config

Downloads

2

Readme

@szmg-fe/community

单纯通过script插入js的方式在小程序下并不适用,而且多端情况下window环境不一定存在,为了解决多端多业务快速接入community_data.js,并快速获得操作社区配置的能力,@szmg-fe/community提供api,能跨端实现社区对象的获取以及提供大量操作社区数据的方法。大部分api内部都有缓存策略,基于此,react应用中甚至可以不使用hook优化。

Usage

@szmg-fe/community诸多api能够work的前提,在于我们的环境中/内部的闭包持有community_data对象,使用api前需要在应用中完成对源数据的引入。

引入community_data

1.web可通过script直接引入,community对象保存在全局的window.allCommunityConfig中

注意,勿改写原始的allCommunityConfig结构,避免未知的错误发生🙅

<script src="https://shequ.scms.sztv.com.cn/sqt/community_data.js"></script>

2.通过npm包方式引入

注意,通过getCommunityDataByJs/getCommunityDataByJsInTaro 都是异步获取的方式,如果需要使用其他的api,需要在then内操作,或者使用await方式

以react应用举例

import getCommunityDataByJs from '@szmg-fe/community/getCommunityDataByJs'

// 在应用入口处调用
function App() {
    useEffect(() => {
        getCommunityDataByJs().then(res => {
            // 这里可以直接拿到res 获取community对象
        })
    }, [])
}

以小程序应用-Taro举例

import getCommunityDataByJsInTaro from '@szmg-fe/community/getCommunityDataByJsInTaro'

class App extends Component {
  componentDidMount() {
    getCommunityDataByJsInTaro().then(res => {
        // 这里可以直接拿到res 获取community对象
    }); 
  }

  componentDidShow() {
  }
  ...
}

Api

getAppCode

根据社区/街道id,获得对应的appCode

import getAppCode from '@szmg-fe/community/getAppCode';
const appCode = getAppCode(16248) === 505; // 福新社区id
const appCode = getAppCode(17050) === 605; // 圆岭街道id
const appCode = getAppCode(17193) === 607; // 前海湾花园id

getAreaData

返回社区内区级数据列表

import getAreaData from '@szmg-fe/community/getAreaData';
const areaData = getAreaData() === [
    { "code": "440303", "name": "罗湖区" },
    ...
    ..
    .
]; 

getAreaMap

返回社区内所有区级数据包含的以name&code作为key的散列对象

import getAreaMap from '@szmg-fe/community/getAreaMap';
const areaMap = getAreaMap() === {
    '440305': {
          name: '南山区',
          streetList: [
              {
                  "id": 17314, 
                  "name": "蛇口街道",
                  ...
              },
              ...
           ]
    },
    '南山区': {
         name: '南山区',
         streetList: [
              {
                  "id": 17314, 
                  "name": "蛇口街道",
                  ...
              },
              ...
           ]
    }
    ...
};

getCommunityDataByJs

返回社区数据对象,该方法用在web中

用的是异步获取的方式,推荐使用async/await

import getCommunityDataByJs from '@szmg-fe/community/getCommunityDataByJs';
const communityData = getCommunityDataByJs().then(res) === {
    "440303": {
        "name": "罗湖区",
        "streetlist": {
            "qingshuihe": {
                "id": 17301,
                "name": "清水河街道",
                "community": [{
                    "id": 16457,
                    "name": "清水河",
                    ...
                },
                ...
                ]
            },
            ...
        }
	},
    "440304": {
        "name": "福田区",
        "streetlist": {
            "lianhua": {
                "name": "莲花街道",
                "appcode": 505,
                "isTemplate": false,
                "community": [{
                    "id": 16248,
                    "name": "福新",
                    ...
                },
                ...
                ]
            ...
            }
        },
    };
    ...
};

getCommunityDataByJsInTaro

返回社区数据对象,该方法用在Taro小程序中

用的是taro request 异步获取的方式,推荐使用async/await

import getCommunityDataByJsInTaro from '@szmg-fe/community/getCommunityDataByJsInTaro';
const communityData = getCommunityDataByJsInTaro().then(res) === {
    "440303": {
        "name": "罗湖区",
        "streetlist": {
            "qingshuihe": {
                "id": 17301,
                "name": "清水河街道",
                "community": [{
                    "id": 16457,
                    "name": "清水河",
                    ...
                },
                ...
                ]
            },
            ...
        }
	},
    "440304": {
        "name": "福田区",
        "streetlist": {
            "lianhua": {
                "name": "莲花街道",
                "appcode": 505,
                "isTemplate": false,
                "community": [{
                    "id": 16248,
                    "name": "福新",
                    ...
                },
                ...
                ]
            ...
            }
        },
    };
    ...
};

getCommunityInfoById

根据街道/社区id 返回街道/社区信息

import getCommunityInfoById from "@szmg-fe/community/getCommunityInfoById";
const communityMap = getCommunityInfoById(16457) === {
    "id": 16457, 
    "name": "清水河", 
    "ownStreet": {
        "appCode": 509, 
        "area": "罗湖区", 
        ...
        "areaInfo": {
            "name": "罗湖区", 
            "streetList": [
                {
                    "appcode": 509, 
                    "community": [
                        {
                            "id": 16457, 
                            "name": "清水河", 
                            ...
                        }, 
                        ...
                    ]
                },
            ]
        },
    },
    ...
}; // 清水河街道

getCommunityLink

根据街道/社区id 获取对应的地址url

import getCommunityLink from '@szmg-fe/community/getCommunityLink';
const url = getCommunityLink(17193) === 'https://www.sztv.com.cn/h5/yqzs_qianhai/'; // 前海湾街道id
const url = getCommunityLink(16248) === 'https://www.sztv.com.cn/h5/yqzs_index/v1?community=16248'; // 福新社区id
const url = getCommunityLink(17050) === 'https://www.sztv.com.cn/h5/yqzs_index/v4?community=17050'; // 圆岭街道id
const url = getCommunityLink(17551) === 'https://www.sztv.com.cn/h5/yqzs_index/v3?community=17551'; // 南湖街道id

getCommunityMap

返回所有社区的以id/name作为key的map

import getCommunityInMap from "@szmg-fe/community/getCommunityMap";
const communityInMap = getCommunityInMap() === {
    "福新": {
        ....
    },
    16248: {
        "id": 16248, 
        "name": "福新", 
        "ownStreet": {
            "appCode": 505, 
            "area": "福田区", 
            "name": "莲花街道"
            "areaInfo": {
                "name": "福田区", 
                "streetList": [
                    {
                        "appcode": 505, 
                        "community": [
                            {
                                "id": 16254, 
                                "link": "https://www.sztv.com.cn/h5/yqzs/?community=16254", 
                                "name": "福中", 
                                "ownStreet": [
                                    ...
                                ]
                            }, 
                            ...
                        ]
                    }
                    ...
                ]
            }
        }
    }
    ...
}

getCommunityRefineMap

获取社区精细化的map,支持按key/name获取map

import getCommunityRefineMap from "@szmg-fe/community/getCommunityRefineMap";
const map = getCommunityRefineMap('id') === {
    16248: {
        "id": 16248, 
        "name": "福新", 
        "ownStreet": {...}
    },
    16783: {
        ...
    }
}
const map = getCommunityRefineMap('name') === {
    "福新": {
         "id": 16248, 
        "name": "福新", 
        "ownStreet": {...}
    },
    "上沙": {
        ...
    }
}

getStreetMap

返回社区对象内的街道对象,以id/name/code为key的map'

import getStreetMap from '@szmg-fe/community/getStreetMap'
const streetMapKeyArr = getStreetMap() === {
    "海山街道": {
        ...
    },
    "haishan": {
        ...
    },
    16338: {
        "appCode": 506,
        "area": "盐田区",
        "community": [],
        "id": 16338,
        "link": "https://www.sztv.com.cn/h5/yqzs_hs_v2",
        "name": "海山街道",
        "areaInfo": {
            "name": "盐田区",
            "streetList": [
                {
                    "appcode": 506,
                    "community": [],
                    "name": "海山街道",
                    ...
                },
            ]
        },
    },
    ...
};

getStreetRefineMap

获取街道精细化的map,支持按id/code/name获取map

import getStreetRefineMap from "@szmg-fe/community/getStreetRefineMap";
const map = getStreetRefineMap('id') === {
    16338: {
        name: '海山街道',
        ...
    },
     17653: {
        name: '南湖街道',
        ...
    },
}; 
const map = getStreetRefineMap('name') === {
    "海山街道": {
        ...
    },
    "南湖街道": {
        ...
    }
}
const map = getStreetRefineMap('code') === {
    "haishan": {
        ...
    },
    "nanhu": {
        ...
    }
}

map2Array

将map 转化为数组

import map2Array from "@szmg-fe/community/map2Array";
import getStreetRefineMap from "@szmg-fe/community/getStreetRefineMap";

const map = getStreetRefineMap('id')
const list = map2Array(map) === [
      16338: {
        name: '海山街道',
        ...
    },
     17653: {
        name: '南湖街道',
        ...
    },
]