首页

当前位置:永利皇宫463登录 > 首页 > 后生可畏期28个站点暂定,pwa重构东京地铁线路图

后生可畏期28个站点暂定,pwa重构东京地铁线路图

来源:http://www.makebuLuo.com 作者:永利皇宫463登录 时间:2019-11-08 23:18

同步

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号线新型线路图——近日18号线意气风发期的贰十六个站点为:

脚下18号线风流倜傥期二十几个站点为:多瑙河中路站、殷高路站、上海传播媒介高校站(与规划20号线换乘)、武大高校站、国权路站、马鞍山道站、江浦路站、江浦公园站、金昌路站、丹阳路站、昌邑路站(与在建14号线换乘)、惠农路站、杨高北路站、迎春路站(与布置24号线换乘)、龙阳路站(与磁浮线、2号线、7号线、16号线换乘)、芳芯路站、北中路站、莲溪路站、御桥站、沪南公路站、周浦站、繁荣路站、沈梅路站、下盐路站、鹤立南路站、航头站。

设计

数量准备好之后,正是使用的安排了。首先,对组件举行三回拆分:

图片 1

法国巴黎大巴18号线最新线路图出炉!据北京装修网作者问询,18号线大器晚成期工程共设26座站点,与15条线路达成换乘,近些日子本来就有22座周全开建,布署二零二零年通车。

组件结构

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

图片 2

  • Label: 地图上的文件新闻,包蕴客车站名,线路名称
  • Station: 大巴站点,包含普通站点和中转站点
  • Line: 大巴线路
  • InfoCard: 状态最复杂的一个零构件,首要包括时刻表音讯、卫生间地方新闻、出入口消息、无障碍电梯音讯

那是二个差不离的零器件划分,里面恐怕富含更多的别的成分,举个例子 InfoCard 就有 InfoCard => TimeSheet => TimesheetTable 那样的嵌套。

下盐路站位于浦东新区航头镇沪南公路与设计下盐路的交叉口,呈南北向安顿,西侧与航头定修段张开联合布局。沪南公路为主干道路,地下电缆、高压燃气管、雨废水等器重管线多,东侧还恐怕有古树需实行原地珍视。

香港装修网笔者搜查缉获,一条可与15条路线达成换乘、号称“换乘王”的轨交新线——18号线后生可畏期,前段时间累加26座车站中原来就有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号线工程始于宝山乡长西藏路站,终于浦东新区的航头镇。线路全长度大概36.8英里,设车站26座,全体为地下线,沿线经过尖山区、杨浦区、浦东新区等3个行政区的容身密集区。18号线陈设年初前26座车站全部开工,6座车站达成结构封顶,盾构推进8英里。

图片 3

部署

脚下的安顿方案是应用 create-react-app 的合法提出,通过 gh-pages 完成将 build 的打包文件上传到 gh-pages 分支上进而完结计划。

家住宝山的小同伴,告诉你们三个好音讯,法国巴黎大巴18号线又有新进展啦!

兼容性

现阶段该应用在 Chrome 浏览器的援救性是最棒的,安卓浏览器提出设置 Chrome 浏览器选拔,笔者日常也都比较喜欢在手提式无线电话机上利用谷歌(Google卡塔尔国浏览器。对于 Safari 浏览器,其余的浏览功效如同从未什么大标题,这段日子应有尚未支持增多到主显示屏。可是在后头的 ios 版本好像对于 pwa 有着更进一竿的支撑。

东京大巴18号线最新线路图出炉——近来大器晚成期工程的叁12个站点暂定,东京装修网开采,短短26站,竟然能够换乘2、3、6、7、8、 9、10、11、12、13、14、16、17、磁悬浮共14条路径,真是心口如一的“换乘王”!

异步

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);
  }
}

图片 4

如此大家就足以制造多少个循环向右移动的卡通,提醒客商向右滑动。安插之后察觉质量分立马降低到0,索性也就扬弃了那个做法。最终来时间调控制利用 transform: translateX(-200px) translateY(-300px); ,因为如此经过 css3 的属性能够在部分活动设备上还足以选择 GPU 加快,并且 translateX 不会引起页面包车型客车重绘或然重排,只会诱致图层重新整合,最小避免对质量的熏陶。

长台湾路站、殷高路站、上海工业余大学学站(与陈设17号线换乘)、北大高校站、国权路站、毕节道站、江浦路站、江浦公园站、四平路站、丹阳路站、昌邑路站(与在建14号线换乘)、惠农路站、杨高南路站、迎春路站、龙阳路站(与磁浮线、2号线、7号线、16号线换乘)、芳芯路站、北西路站、莲溪路站、御桥站、沪南公路站、周浦站、繁荣路站、沈梅路站、下盐路站、鹤立西路站、航头站。

质量优化

如上这几个的付出得益于早前的护卫,所以重构进程依旧不慢的,稍稍熟知了下 react 的用法就产生了重构。不过,在上线之后接收 lighthouse 做深入分析,performan 的得分是 0 分。首屏渲染以致可相互得分都以 0 分,首先来深入分析一下。因为任何应用都以透过 js 来渲染,而最为基本的就是十分svg。整个看下去,有几点值得注意:

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

找到难题点,就能够想到一些实施方案了。第三个比较容易,压缩 json 数据,去除一些没有必要的音讯。第二个,好的消除办法就是因此异步加载来完毕组件加载,效果显著,越发是对于 InfoCard 组件:

巴黎装修网开掘,短短26站,竟然能够换乘2、3、6、7、8、 9、10、11、12、13、14、16、17、磁悬浮共14条路径,真是言而有信的“换乘王”!

结语

图片 5

花了七个礼拜的岁月达成了项目标全部的重构,从那个时候来的 commit 记录能够看看二月份发狂 commit 了一波,主假设率先个周天花费了两日的时光改革了成千上万代码,被足够 InfoCard的动静切换搞了相当久,前边就是指向质量做了部分优化。进程异常的惨恻,风华正茂度猜疑自个儿的 coding 技艺。可是最终依旧有以下感悟:

  • 世界上并未有最棒的语言,最佳的框架,独有最合适的
  • 最高雅的完结都不是一挥而就的,都是三个个试出来的

最终一个冷笑话:

青春问禅师:“请问大师,小编写的次序为何未有赢得预期的出口?” 禅师答到:“年轻人,那是因为您的前后相继只会按你怎么写的实行,不会按你怎么想的实施啊……”

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

 

1 赞 收藏 评论

图片 6

北京装修网获知,目前,随着最终大器晚成车水泥的浇筑,轨道交通18号线下盐路站主体结构顺遂贯彻封顶,那是继繁荣路站、迎春路站、周浦站、沈梅路站、江浦花园站后,18号线第6座完成重心结构封顶的车站。

组件通讯和情景管理

本土开垦的最大的难处应该便是这一块的原委了。本来出于组件的层级并不算特别复杂,所以自个儿并不策画上 Redux 这种类型的大局状态管理库。首要组件之间的通信就是父亲和儿子通讯和兄弟组件通讯。父亲和儿子组件通讯比较容易,父组件的 state 即为子组件的 props,可以因而这一个达成老爹和儿子组件通讯。兄弟组件略为复杂性,兄弟组件通过分享父组件的情况来打开通讯。要是那样的现象,作者点击站点,希望能够弹出新闻提示窗,这便是Station 组件和 InfoCard 组件之间的通讯,通过 Map 组件来进展分享。点击 Station 组件触发事件,通过回调更新 Map 组件状态的改正,同期也贯彻了 InfoCard组件的换代。同期为了兑现,点击任何区域就足以关闭新闻提醒窗,我们对 Map 组件举行监听,监听事件的冒泡来实现迅速的关闭,当然为了防止有个别不要求的冒泡,还索要在意气风发部分事件管理中梗阻事件冒泡。

图片 7

InfoCard 是Infiniti复杂的叁个组件,因为此中蕴含了好几个icon,以至气象音信的切换,同期须要落到实处切换差异的站点的时候能够改正新闻提醒窗。必要小心音信提示窗新闻初次点击新闻的最早化,以致切换分歧icon 时分别突显不相同的音信,举例卫生间消息照旧出入口音信,以至对此时刻表,切换不一致的线路的时候更新对应的时刻表。这个境况的转折,须要值得注意。此外值得一题的点就是,在切换分歧站点的时候的景况,要是本身正在看有些站点的盥洗室音讯的时候,笔者点击别的三个站点,这个时候弹出的音讯提示窗应该是时刻表消息可能卫生间消息吗?小编的筛选照旧卫生间消息,作者对于那生龙活虎情形举行了保持,那样的客户体验从逻辑上来说如同更佳。具体落成的代码细节就不黄金年代一表达了,里面肯能饱含越多的内部原因,款待使用体验。

基于,轨道交通18号线近日有8段盾构区间正在动工,累加促进约6.5英里,下盐路站的协会封顶为落实全年车站封顶6座、盾构推动8公里的既定目的,打下了稳定的根底。

pwa重构北京大巴线路图

2018/03/28 · JavaScript · PWA

初藳出处: Neal   

事先平昔有在珍视叁个上海地铁线路图的 pwa,最要紧的特点正是 “offline first”。然而出于代码都以通过原生的 js 去实现,以前笔者都不是很欢悦去用框架,不想有所任何框架的偏疼。不过到早先时期随着代码量的扩充,代码的确变得乱作一团,扩充新职能也变得越来越困难。由此,花了将近多少个礼拜的时候对于使用进行了三回完整的重构。网址访谈地址:

下盐路站施工用地约束内的西北角,距车站从属结构边线近日离开仅42米处,有风流倜傥株至今114年的腊梅,被列为香岛市二级珍视古树名木,施工单位根据市绿化和市容管理局的连锁需要,专门为它修造了隔绝网,并优化场面布局,加专门的事业业区尽量隔绝古树,同不经常候,严控声、光、尘对古树及周围意况的震慑,做到“玉石白地铁,保护绿化先行”。

本文由永利皇宫463登录发布于首页,转载请注明出处:后生可畏期28个站点暂定,pwa重构东京地铁线路图

关键词: