澳门太阳娱乐集团官网-太阳集团太阳娱乐登录

上海地铁18号线最新线路图 一期26个站点暂定
分类:网页制作

pwa重构新加坡大巴线路图

2018/03/28 · JavaScript · PWA

原稿出处: Neal   

事先平素有在维护贰个新加坡大巴线路图的 pwa,最重要的特征正是 “offline first”。可是出于代码都以经过原生的 js 去贯彻,此前自身都不是很欢腾去用框架,不想有所任何框架的偏疼。不过到前期随着代码量的增添,代码的确变得混乱不堪,扩充新功用也变得更为困难。由此,花了近乎三个礼拜的时候对于利用举行了壹回完整的重构。网址访问地址:

北京大巴18号线最新线路图出炉——最近一期工程的三十多个站点暂定,新加坡装修网发掘,短短26站,竟然能够换乘2、3、6、7、8、 9、10、11、12、13、14、16、17、磁悬浮共14条线路,真是名不虚立的“换乘王”!

新加坡地铁18号线新型线路图出炉!据东京装修网作者领悟,18号线一期工程共设26座站点,与15条路径完结换乘,方今已有22座周到开建,布署二零二零年通车。

准备

预备干活先做好,在 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号线又有新进展啦!

新加坡装修网小编获知,一条可与15条线路落成换乘、可以称作“换乘王”的轨交新线——18号线一期,近年来累计26座车站中已有22座全面开建。那条纵贯宝山、杨浦、浦东三区的市北边南北向轨交线,正在为兑现后年的通车目的而拼命。

设计

数据企图好以后,正是使用的铺排了。首先,对组件进行叁回拆分:

巴黎装修网获知,近日,随着最后一车水泥的浇筑,轨道交通18号线下盐路站主体布局顺遂贯彻封顶,这是继繁荣路站、迎春路站、周浦站、沈梅路站、江浦公园站后,18号线第6座达成中央结构封顶的车站。

图片 1

组件结构

将全部地图知道成多少个 Map 组件,再将其分成 4 个小组件:

图片 2

  • Label: 地图上的公文新闻,包蕴客车站名,线路名称
  • Station: 大巴站点,包含常见站点和转账站点
  • Line: 大巴线路
  • InfoCard: 状态最复杂的叁个组件,首要富含时刻表消息、卫生间地方新闻、出入口音讯、无障碍电梯音信

那是多少个大概的组件划分,里面只怕带有越来越多的任何成分,比如 InfoCard 就有 InfoCard => TimeSheet => TimesheetTable 那样的嵌套。

图片 3

时下18号线一期贰十几个站点为:密西西比河北路站、殷高路站、上财站(与安排20号线换乘)、浙大大学站、国权路站、宝鸡道站、江浦路站、江浦公园站、辽源路站、丹阳路站、昌邑路站(与在建14号线换乘)、惠农路站、杨高级中学路站、迎春路站(与设计24号线换乘)、龙阳路站(与磁浮线、2号线、7号线、16号线换乘)、芳芯路站、北中路站、莲溪路站、御桥站、沪南公路站、周浦站、繁荣路站、沈梅路站、下盐路站、鹤立西路站、航头站。

零件通讯和景况处理

本地开垦的最大的难点应该便是这一块的从头到尾的经过了。本来出于组件的层级并不算特别复杂,所以自身并不计划上 Redux 那种类型的大局状态管理库。主要组件之间的通讯正是父亲和儿子通讯和兄弟组件通讯。父亲和儿子组件通讯相比较轻巧,父组件的 state 即为子组件的 props,能够因此那些完结父亲和儿子组件通讯。兄弟组件略为复杂性,兄弟组件通过分享父组件的情事来拓宽通讯。假若那样的气象,作者点击站点,希望能够弹出消息提醒窗,那就是Station 组件和 Info卡德 组件之间的通讯,通过 Map 组件来张开分享。点击 Station 组件触发事件,通过回调更新 Map 组件状态的换代,同不正常候也促成了 InfoCard组件的换代。同一时常候为了兑现,点击任何区域就足以关闭消息提醒窗,我们对 Map 组件实行监听,监听事件的冒泡来完结飞快的闭馆,当然为了幸免有个别不须要的冒泡,还必要在某一件事件处理中梗阻事件冒泡。

图片 4

InfoCard 是可是复杂的一个零件,因为内部包罗了相当多少个icon,以及气象新闻的切换,同不时候须要贯彻切换分歧的站点的时候能够更新消息提示窗。须求专一音信提醒窗消息初次点击新闻的开始化,以及切换不一致icon 时分别显示分裂的新闻,譬如卫生间音讯依然出入口音讯,以及对于时刻表,切换不相同的线路的时候更新对应的时刻表。这一个情状的倒车,要求值得注意。其余值得一题的点正是,在切换不相同站点的时候的景观,若是本身正在看有个别站点的卫生间消息的时候,笔者点击其余一个站点,那时候弹出的音信提示窗应该是时刻表音讯依旧卫生间音信吗?小编的挑三拣四依旧卫生间新闻,小编对此这一气象举行了维系,那样的客户体验从逻辑上来说就像更佳。具体达成的代码细节就不一一表明了,里面肯能富含更加多的内部原因,招待使用体验。

下盐路站位于浦东新区航头镇沪南公路与设计下盐路的交叉口,呈南北向布署,西侧与航头定修段展开联合布局。沪南公路为主题道路,地下电缆、高压燃气管、雨污水等入眼管线多,东侧还大概有古树需进行原地爱惜。

特性优化

上述这个的付出得益于以前的护卫,所以重构进程依旧非常快的,稍微熟习了下 react 的用法就完事了重构。然则,在上线之后采纳 lighthouse 做深入分析,performan 的得分是 0 分。首屏渲染以及可相互得分都以 0 分,首先来深入分析一下。因为任何应用都以透过 js 来渲染,而特别基本的就是非凡svg。整个看下去,有几点值得注意:

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

找到难题点,就足以想到一些解决方案了。第二个比较简单,压缩 json 数据,去除一些无需的信息。第4个,好的化解办法正是透过异步加载来促成组件加载,效果明摆着,尤其是对于 InfoCard 组件:

下盐路站施工用地限制内的东北角,距车站从属结构边线最中距离仅42米处,有一株于今114年的腊梅,被列为巴黎市二级维护古树名木,施工单位依据市绿化和市容管理局的相干须求,特地为它修筑了隔绝网,并优化场合布局,加专业业区尽量远远地离开古树,同一时间,严控声、光、尘对古树及周边蒙受的熏陶,做到“暗绛红大巴,保护绿化先行”。

同步

class InfoCard extends React.Component { constructor(props) {    super(props) { ...    }  }  ... }

1
2
3
4
5
6
7
8
9
class InfoCard extends React.Component {
  constructor(props) {
   super(props) {
    ...
   }
 }
 ...
}
 

依照,轨道交通18号线前段时间有8段盾构区间正在施工,累计推动约6.5英里,下盐路站的协会封顶为贯彻全年车站封顶6座、盾构推动8英里的既定指标,打下了稳定的底蕴。

异步

export default function asyncInfoCard (importComp) { class InfoCard extends React.Component {    constructor(props) { super(props); this.state = { component: null }; } asyncComponentDidMount() { const { default: component } = await importComp(); this.setState({ component: component })    }  } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
export default function asyncInfoCard (importComp) {
  class InfoCard extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
        component: null
      };
    }
    
    asyncComponentDidMount() {
      const { default: component } = await importComp();
      this.setState({
        component: component
      })
   }
 }
}
 

那样大家就达成了将共同组件改动成四个异步加载的零件,这样就不要求一下子加载全部的组件。那样大家就足以在 Map 中使用异步的办法来开展零部件的加载:

import asyncInfoCard from './InfoCard' const InfoCard = asyncInfoCard(() => import('./InfoCard')

1
2
3
import asyncInfoCard from './InfoCard'
const InfoCard = asyncInfoCard(() => import('./InfoCard')
 

通过上线之后的性质分析,lighthouse 质量评分一下子就升起到了 80 多分,注解那样的考订要么比较灵通的。别的三个值得一提的点就是首屏,因为历史原因,整张图 svg 瓜月素的地点都以定死的,及横坐标和纵坐标都已经是概念好的,而 svg 被定为在个中。在运动端加载时,展现的正是右边的空白区域,所以给客商一种程序未加载完结的错觉。此前的版本的做法就是透过 scroll 来兑现滚动条的轮转,将视图的要害移动到中等地方。此番的主见是经过 transform 来实现:

.svg { transform: translate(-100px, -300px) }

1
2
3
.svg {
transform: translate(-100px, -300px)
}

那样实现了整个 svg 图地方的偏移,使用 lighthouse 实行解析,品质分降到了 70 多分。继续思虑有未有另外的情势,后来自己想在最左上上角定义二个箭头动画。

img src="right_arrow.png" alt="right arrow" title="right arrow" class="right-arrow"/>

1
img src="right_arrow.png" alt="right arrow" title="right arrow" class="right-arrow"/>

.right-arrow { animation: moveright 3s linear infinite; } @keyframs moveright { 0% { transform: translateX(2rem); } 50% { transform: translateX(3rem); } 100% { transform: translateX(5rem); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.right-arrow {
  animation: moveright 3s linear infinite;
}
@keyframs moveright {
  0% {
    transform: translateX(2rem);
  }
  50% {
    transform: translateX(3rem);
  }
  100% {
    transform: translateX(5rem);
  }
}

图片 5

如此那般我们就足以创立二个生生不息向右移动的动画片,提醒客户向右滑动。安排之后开掘质量分立马降到 0,索性也就放弃了那几个做法。最终来时间调节制利用 transform: translateX(-200px) translateY(-300px); ,因为如此经过 css3 的习性能够在部分运动器械上还足以行使 GPU 加速,并且 translateX 不会挑起页面包车型大巴重绘或许重排,只会形成图层重组,最小幸免对品质的熏陶。

轨道交通18号线工程始于饶河县刚果西藏路站,终于浦东新区的航头镇。线路全长约36.8海里,设车站26座,全体为地下线,沿线经过集贤县、杨浦区、浦东新区等3个行政区的居住密集区。18号线计划年初前26座车站全部动工,6座车站完毕布局部封闭疗法顶,盾构推动8公里。

部署

时下的布局方案是使用 create-react-app 的法定提出,通过 gh-pages 完成将 build 的打包文件上传到 gh-pages 分支上进而达成计划。

香港大巴18号线新型线路图——最近18号线一期的29个站点为:

兼容性

近来该应用在 Chrome 浏览器的帮助性是最佳的,安卓浏览器提议设置 Chrome 浏览器选用,作者日常也都相比欣赏在三哥伦比亚大学上使用Google浏览器。对于 Safari 浏览器,其余的浏览功效就像从未什么样大难题,方今应有还没协理增多到主显示器。但是在后头的 ios 版本好像对于 pwa 有着更进一竿的支撑。

黄广西路站、殷高路站、上财站(与规划17号线换乘)、复旦站、国权路站、东营路站、江浦路站、江浦公园站、克拉玛依路站、丹阳路站、昌邑路站(与在建14号线换乘)、惠民路站、杨高级中学路站、迎春路站、龙阳路站(与磁浮线、2号线、7号线、16号线换乘)、芳芯路站、北中路站、莲溪路站、御桥站、沪南公路站、周浦站、繁荣路站、沈梅路站、下盐路站、鹤立西路站、航头站。

结语

图片 6

花了多少个礼拜的光阴成功了花色的总体的重构,从那一年来的 commit 记录能够看看1七月份发狂 commit 了一波,重如果首先个星期六耗费了二日的年月修改了众多代码,被丰盛 InfoCard的情景切换搞了相当久,前边正是指向质量做了一些优化。进程很难过,一度猜疑自身的 coding 本领。可是最后依旧有以下感悟:

  • 世界上从不最佳的言语,最佳的框架,唯有最合适的
  • 最高雅的贯彻都不是一下子就解决了的,都是四个个试出来的

最后二个冷笑话:

青少年问禅师:“请问大师,我写的前后相继为啥平素不拿走预期的出口?” 禅师答到:“年轻人,那是因为你的次序只会按您怎么写的奉行,不会按你怎么想的实践啊……”

源代码地址,欢迎 star 或者 pr。

 

1 赞 收藏 评论

图片 7

北京装修网开掘,短短26站,竟然能够换乘2、3、6、7、8、 9、10、11、12、13、14、16、17、磁悬浮共14条线路,真是名符其实的“换乘王”!

本文由澳门太阳娱乐集团官网发布于网页制作,转载请注明出处:上海地铁18号线最新线路图 一期26个站点暂定

上一篇:React 同构应用 PWA 晋级指南 下一篇:没有了
猜你喜欢
热门排行
精彩图文