彩世界平台-彩世界时时app-彩世界开奖app苹果下载

热门关键词: 彩世界平台,彩世界时时app,彩世界开奖app苹果下载

您的位置:彩世界平台 > 学会党委 > pwa重构上海大巴线路图

pwa重构上海大巴线路图

发布时间:2019-11-04 00:11编辑:学会党委浏览(192)

    pwa重构上海地铁线路图

    2018/03/28 · JavaScript · PWA

    彩世界时时app,原文出处: Neal   

    之前一直有在维护一个上海地铁线路图的 pwa,最主要的特性就是 “offline first”。但是由于代码都是通过原生的 js 去实现,之前我都不是很喜欢去用框架,不想具有任何框架的偏好。但是到后期随着代码量的增加,代码的确变得混乱不堪,拓展新功能也变得尤为困难。因此,花了将近两个礼拜的时候对于应用进行了一次完整的重构。网站访问地址:

    上海地铁18号线最新线路图出炉——目前一期工程的26个站点暂定,上海装修网发现,短短26站,竟然可以换乘2、3、6、7、8、 9、10、11、12、13、14、16、17、磁悬浮共14条线路,真是名副其实的“换乘王”彩世界平台,!

    准备

    准备工作先做好,在 vue 和 react 之间,我还是选择了后者。基于 create-react-app 来搭建环境,crp 为你准备了一个开箱即用的开发环境,因此你无需自己亲手配置 webpack,因此你也不需要成为一名 webpack 配置工程师了。

    另外一方面,我们还需要一些数据,包括站点信息,线路路径,文字说明等等。基于之前的应用,可以通过一小段的代码获取信息。就此如要我们获取我们以前的站点在 svg 图中的相关属性,普通的站点使用 circle 元素,为了获取其属性:

    const circles = document.querySelectorAll('circle'); let result = []; circles.forEach(circle => { let ele = { cx: circle.cx, cy: circle.cy, sroke: circle.stroke, id: circle.id }; result.push(ele); }) const str = JSON.stringify(result);

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    const circles = document.querySelectorAll('circle');
    let result = [];
    circles.forEach(circle => {
      let ele = {
        cx: circle.cx,
        cy: circle.cy,
        sroke: circle.stroke,
        id: circle.id
      };
      result.push(ele);
    })
    const str = JSON.stringify(result);
     

    通过这样的代码我们就可以获取 svg 普通站点信息,同理还可获取中转站信息,线路路径信息以及站点以及线路 label 信息。还有,我们还需要获取每个站点的时刻表信息,卫生间位置信息,无障碍电梯信息以及出入口信息。这里是写了一些爬虫去官网爬取并做了一些数据处理,再次就不一一赘述。

    家住宝山的小伙伴,告诉你们一个好消息,上海地铁18号线又有新进展啦!

    设计

    数据准备好之后,就是应用的设计了。首先,对组件进行一次拆分:

    上海装修网获悉,近日,随着最后一车混凝土的浇筑,轨道交通18号线下盐路站主体结构顺利实现封顶,这是继繁荣路站、迎春路站、周浦站、沈梅路站、江浦公园站后,18号线第6座实现主体结构封顶的车站。

    组件结构

    将整个地图理解成一个 Map 组件,再将其分为 4 个小组件:

    彩世界平台 1

    • Label: 地图上的文本信息,包括地铁站名,线路名称
    • Station: 地铁站点,包括普通站点和中转站点
    • Line: 地铁线路
    • InfoCard: 状态最复杂的一个组件,主要包含时刻表信息、卫生间位置信息、出入口信息、无障碍电梯信息

    这是一个大致的组件划分,里面可能包含更多的其它元素,比如 InfoCard 就有 InfoCard => TimeSheet => TimesheetTable 这样的嵌套。

    彩世界平台 2

    组件通信和状态管理

    本地开发的最大的难点应该就是这一块的内容了。本来由于组件的层级并不算特别复杂,所以我并不打算上 Redux 这种类型的全局状态管理库。主要组件之间的通信就是父子通信和兄弟组件通信。父子组件通信比较简单,父组件的 state 即为子组件的 props,可以通过这个实现父子组件通信。兄弟组件略为复杂,兄弟组件通过共享父组件的状态来进行通信。假如这样的情景,我点击站点,希望能够弹出信息提示窗,这就是 Station 组件和 InfoCard 组件之间的通信,通过 Map 组件来进行共享。点击 Station 组件触发事件,通过回调更新 Map 组件状态的更新,同时也实现了 InfoCard 组件的更新。同时为了实现,点击其它区域就可以关闭信息提示窗,我们对 Map 组件进行监听,监听事件的冒泡来实现高效的关闭,当然为了避免一些不必要的冒泡,还需要在一些事件处理中阻止事件冒泡。

    彩世界平台 3

    InfoCard 是最为复杂的一个组件,因为里面包含了好几个 icon,以及状态信息的切换,同时需要实现切换不同的站点的时候能够更新信息提示窗。需要注意信息提示窗信息初次点击信息的初始化,以及切换不同 icon 时分别显示不同的信息,比如卫生间信息或者出入口信息,以及对于时刻表,切换不同的线路的时候更新对应的时刻表。这些状态的转化,需要值得注意。另外值得一题的点就是,在切换不同站点的时候的状态,假如我正在看某个站点的卫生间信息的时候,我点击另外一个站点,这时候弹出的信息提示窗应该是时刻表信息还是卫生间信息呢?我的选择还是卫生间信息,我对于这一状态进行了保持,这样的用户体验从逻辑上来讲似乎更佳。具体实现的代码细节就不一一说明了,里面肯能包含更多的细节,欢迎使用体验。

    下盐路站位于浦东新区航头镇沪南公路与规划下盐路的交叉口,呈南北向布置,西侧与航头定修段进行统一布局。沪南公路为主干道路,地下电缆、高压燃气管、雨污水等重大管线多,东侧还有古树需进行原地保护。

    性能优化

    以上这些的开发得益于之前的维护,所以重构过程还是比较快的,稍微熟悉了下 react 的用法就完成了重构。但是,在上线之后使用 lighthouse 做分析,performan 的得分是 0 分。首屏渲染以及可交互得分都是 0 分,首先来分析一下。因为整个应用都是通过 js 来渲染,而最为核心的就是那个 svg。整个看下来,有几点值得注意:

    • 代码直接将 json 导入,导致 js 体积过大
    • 所有组件都在渲染的时候进行加载

    找到问题点,就可以想到一些解决方案了。第一个比较简单,压缩 json 数据,去除一些不需要的信息。第二个,好的解决办法就是通过异步加载来实现组件加载,效果明显,尤其是对于 InfoCard 组件:

    下盐路站施工用地范围内的东南角,距车站附属结构边线最近距离仅42米处,有一株距今114年的腊梅,被列为上海市二级保护古树名木,施工单位按照市绿化和市容管理局的相关要求,专门为它修建了隔离网,并优化场地布局,加工作业区尽量远离古树,同时,严格控制声、光、尘对古树及周边环境的影响,做到“绿色地铁,护绿先行”。

    本文由彩世界平台发布于学会党委,转载请注明出处:pwa重构上海大巴线路图

    关键词:

上一篇:前端的数据库:IndexedDB入门

下一篇:没有了