浅谈vue项目重构技术要点和总结,pwa重构上海地铁线路图

图片 2
永利皇宫402

准备

有备无患兵马未动粮草先行粮草先行工作先做好,在 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
音信。还会有,我们还亟需获得种种站点的时刻表新闻,卫生间地点音讯,无障碍电梯新闻以至出入口新闻。这里是写了有些爬虫去官方网站爬取并做了有个别数量管理,再一次就不生机欣欣向荣勃勃赘述。

重构-动态组件的创办

结语

图片 1

花了多少个礼拜的年月完成了档案的次序的总体的重构,从那一年来的 commit
记录能够见见7月份发狂 commit
了一波,重若是第多个星期日费用了二日的时日修正了大多代码,被丰盛 InfoCard的情事切换搞了非常久,前面正是指向品质做了部分优化。进度非常惨重,意气风发度可疑自个儿的
coding 工夫。不过最终依旧有以下感悟:

  • 世界上从未有过最棒的语言,最棒的框架,只有最合适的
  • 最文雅的完毕都不是轻松的,都以贰个个试出来的

聊到底多个冷笑话:

青春问禅师:“请问大师,作者写的顺序为啥平昔不博得预期的输出?”
禅师答到:“年轻人,那是因为您的次序只会按你怎么写的执行,不会按您怎么想的施行啊……”

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

 

1 赞 收藏
评论

图片 2

办法二:通过render方法制造

设计

多少计划好现在,便是运用的设计了。首先,对组件实行贰回拆分:

化解方案如下:

异步

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

图片 3

那样大家就足以成立一个周而复始向右移动的动画,提醒客户向右滑动。陈设之后发掘质量分立马降低到0,索性也就吐弃了这几个做法。最后来时间调整制接收
transform: translateX(-200px) translateY(-300px); ,因为这么经过 css3
的品质能够在一些平移器具上还足以运用 GPU 加速,何况 translateX
不会挑起页面包车型客车重绘大概重排,只会招致图层重新整合,最小幸免对品质的影响。

在 JavaScript 中指标和数组是援用类型,指向同一个内存空间,假设 prop
是叁个对象或数组, 在子组件内部更正它会潜移暗化父组件的情状。利用那或多或少,我们在子组件中改造prop数组或许目的,父组件以至具有应用到prop中数量的地点都会扭转。作者事先写过大器晚成篇js深拷贝和浅拷贝的稿子,感兴趣的去看下,其实,原理是相仿的。

兼容性

现阶段该使用在 Chrome 浏览器的协理性是最棒的,安卓浏览器提议安装 Chrome
浏览器接受,笔者日常也都相比较喜欢在手提式有线电话机上接收谷歌(Google)浏览器。对于 Safari
浏览器,此外的浏览功效就像是从未什么大题目,如今应有还未有支持增添到主显示屏。可是在后头的
ios 版本好像对于 pwa 有着更上一层楼的援助。

数据源.splice(indexOfItem, 1, newValue)

特性优化

上述这么些的付出得益于从前的保卫安全,所以重构进度可能相当慢的,稍稍领会了下
react 的用法就完了了重构。可是,在上线之后接收 lighthouse
做解析,performan 的得分是 0 分。首屏渲染以致可相互得分都是 0
分,首先来剖判一下。因为全数应用都以透过 js 来渲染,而最佳基本的正是丰盛svg。整个看下去,有几点值得注意:

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

找到题目点,就能够想到一些解决方案了。第二个比较容易,压缩 json
数据,去除一些无需的新闻。第贰个,好的解决办法就是通过异步加载来贯彻组件加载,效果显明,特别是对此
InfoCard 组件:

props: ['initialCounter'],
data: function () {
 return { counter: this.initialCounter }
}

pwa重构香江大巴线路图

2018/03/28 · JavaScript
· PWA

原来的小说出处:
Neal   

此前一贯有在保卫安全叁个北京地铁线路图的 pwa,最关键的本性正是 “offline
first”。不过由于代码都以通过原生的 js
去达成,在此以前作者都不是很欢跃去用框架,不想具有其余框架的偏幸。不过到末代随着代码量的增加,代码的确变得杂乱无章,拓宽新功效也变得进一步困难。因此,花了近乎三个礼拜的时候对于利用进行了二次完整的重构。网址访谈地址:

作者们在品种中,平时会用相当多场馆大概数额,大家得以把多数公共数据分离出来,放到三个目的中,前边我们得以监听那么些数额对象变化。进行数据保存仍旧取得。

同步

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) {
    …
   }
 }
 …
}
 

地点这种转移prop,Vue
不会在调整台给出警示,假使我们完全改观仍然赋值prop,调节台会发出警示!引用官方给出的解决方案如下:

部署

当前的配置方案是接纳 create-react-app 的法定建议,通过 gh-pages 完毕将
build 的打包文件上传到 gh-pages 分支上进而达成铺排。

数据源.splice(newLength)

零件通讯和状态管理

地面开垦的最大的困难应该正是这一块的剧情了。本来出于组件的层级并不算特别复杂,所以小编并不筹划上
Redux
那连串型的全局状态管理库。首要组件之间的通讯就是父亲和儿子通讯和兄弟组件通讯。老爹和儿子组件通讯比较简单,父组件的
state 即为子组件的
props,能够透过那么些完毕老爹和儿子组件通信。兄弟组件略为复杂性,兄弟组件通过分享父组件的气象来进行通讯。即使那样的情状,笔者点击站点,希望能够弹出音讯提醒窗,那便是Station 组件和 InfoCard 组件之间的通讯,通过 Map 组件来举行分享。点击
Station 组件触发事件,通过回调更新 Map 组件状态的翻新,同有毛病间也兑现了
InfoCard组件的改正。同期为了完成,点击任何区域就能够关闭新闻提醒窗,大家对 Map
组件实行监听,监听事件的冒泡来实现快速的闭馆,当然为了幸免某些不供给的冒泡,还亟需在局地事件管理中阻止事件冒泡。

图片 4

InfoCard 是必由之路复杂的一个零件,因为中间含有了一点个
icon,以至气象音信的切换,同期需求落实切换不相同的站点的时候能够更新新闻提示窗。要求留意音讯提醒窗音讯初次点击新闻的开头化,甚至切换差异icon
时分别突显不相同的新闻,举例卫生间音信恐怕出入口消息,以致对于时刻表,切换分裂的线路的时候更新对应的时刻表。那么些情状的转账,要求值得注意。其它值得生龙活虎题的点便是,在切换不一样站点的时候的图景,假如笔者正在看有些站点的换衣室新闻的时候,笔者点击此外二个站点,这时弹出的新闻提示窗应该是时刻表消息可能卫生间新闻呢?作者的取舍照旧卫生间音讯,笔者对于这一气象进行了保持,那样的顾客体验从逻辑上来说就如更佳。具体实现的代码细节就不风姿洒脱一表明了,里面肯能包蕴愈来愈多的底细,接待使用体验。

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

组件结构

将全数地图知道成五个 Map 组件,再将其分为 4 个小器件:

图片 5

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

那是八个概略的机件划分,里面只怕含有更加多的任何成分,举个例子 InfoCard 就有
InfoCard => TimeSheet => 提姆esheetTable 那样的嵌套。

2、定义二个乘除属性,管理 prop 的值并回到:

本条主题材料大家日常会境遇,平日是vue数据赋值的时候,vue数据变动了,可是视图没有立异。这几个不到底项目重构的本被害者题,也和豪门三进三出一下vue2.0不足为道的缓慢解决方案吗!

2、 通过Array.prototype.splice方法

3、校订数据的长度

prop 对象数组应用

props: ['size'],
computed: {
 normalizedSize: function () {
 return this.size.trim().toLowerCase()
 }
}

你也许感兴趣的篇章:

  • Map.vue基于百度地图组件重构笔记分享
var vm = new Vue({
 el: '#example',
 data: {
 currentView: 'home'
 },
 components: {
 home: { /* ... */ },
 posts: { /* ... */ },
 archive: { /* ... */ }
 }
})
<component v-bind:is="currentView">
 <!-- 组件在 vm.currentview 变化时改变! -->
</component>

多年来太忙了,博客好久未有立异了。前几天自得其乐,轻便计算一下这两日vue项目重构的意气风发部分本事中央。

上述正是本文的整体内容,希望对我们的就学抱有助于,也希望我们多多点拨脚本之家。

不常候大家有无数形似的组件,独有一丢丢地点不均等,大家得以把这么的切近组件写到配置文件中,动态成立和援引组件

格局风姿洒脱:component 和is协作使用

4、变异方法

Vue.set(数据源, key, newValue)

前言

require动态加载信任

1、通过vue.set方式赋值

案例如下:

vue数据更新, 视图未更新

c: {
 handler: function (val, oldVal) { /* ... */ },
 deep: true
},
// 该回调将会在侦听开始之后被立即调用
d: {
 handler: function (val, oldVal) { /* ... */ },
 immediate: true
},

集体属性分离

v-model
数据不常是undefined的时候,不会报错,所以,必须求在意,v-model无法是undefined,否则有些莫名的题材!

Vue.js
包装了被考查数组的身在曹营心在汉方法,故它们能触发视图更新。被装进的秘籍有:

透过动用保留的 成分,并对其 is
天性实行动态绑定,你能够在同二个挂载点动态切换多少个零部件:

<script>
export default {
 data() {
 return {
 };
 },
 render: function(createElement) {
 let _type = bi.chart.data.type;
 let _attr = bi.chart.components[_type]["attr"];
 return createElement(_attr, {
  props: {
  }
 });
 }
};
</script>

1、定义二个某个变量,并用 prop 的值开端化它:

咱俩能够使用require同步天性,在代码中动态加载依赖,比方下边echart核心,我们能够点击切换的时候,动态加载!

<input class="pinput max" type="text" v-model="itemData.data.did">

<script>
export default {
 components: {
 },
 data() {
 },
 props: {
 itemData: Object
 },
 methods: {
 }
};
</script>

骨子里v-model和sync都以部分语法糖,作者前边有成文介绍过,官方网站也能找到近似的案例!

require("echarts/theme/"+ data.theme);

负有应用到itemData的地点都会转换!

v-model 的生龙活虎对坑

能够使用方面深度监听。借使开首化的时候要及时推行,大家能够用当下实行监听!

import加载要放初阶部,开始化的时候,可以把私下认可核心用import加载进来!

bi.chart.components[_type][“attr”]以此是在陈设文件中动态配置的,type点击的时候会更改,会取差异type下边包车型地铁attr属性!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图