品牌动态

当前位置:新萄京娱乐场手机版 > 品牌动态 > 新萄京娱乐场手机版简单总结一下最近vue项目重

新萄京娱乐场手机版简单总结一下最近vue项目重

来源:http://www.chrisproduction.com 作者:新萄京娱乐场手机版 时间:2019-10-05 16:46

pwa重构北京大巴线路图

2018/03/28 · JavaScript · PWA

原稿出处: Neal   

事先向来有在珍贵多少个东京客车线路图的 pwa,最根本的风味就是 “offline first”。可是由于代码都是透过原生的 js 去落到实处,在此之前作者都不是很喜欢去用框架,不想具有其余框架的偏疼。不过到末代随着代码量的扩展,代码的确变得混乱不堪,拓宽新作用也变得愈加困难。由此,花了周边八个礼拜的时候对于使用实行了贰遍完整的重构。网站访问地址:

前言

准备

预备干活先做好,在 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 音信。还也是有,大家还索要得到每一种站点的时刻表音讯,卫生间地方新闻,无障碍电梯音讯以及出入口音讯。这里是写了一些爬虫去官方网址爬取并做了部分数目管理,再一次就不一一赘述。

这段日子太忙了,博客好久未有更新了。明天忙里偷闲,轻易总结一下近日vue项目重构的有的手艺中央。

设计

数码希图好以往,便是行使的宏图了。首先,对组件进行贰遍拆分:

vue数据更新, 视图未更新

零件结构

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

新萄京娱乐场手机版 1

  • Label: 地图上的文本信息,包涵地铁站名,线路名称
  • Station: 大巴站点,包含普通站点和转化站点
  • Line: 地铁线路
  • Info卡德: 状态最复杂的多个零件,重要包涵时刻表新闻、卫生间地方音信、出入口消息、无障碍电梯音信

那是一个大致的机件划分,里面恐怕包括越来越多的别样成分,比方 InfoCard 就有 InfoCard => TimeSheet => TimesheetTable 这样的嵌套。

本条主题材料我们平时会超过,日常是vue数据赋值的时候,vue数据变化了,可是视图未有创新。那么些不算是项目重构的技术中央,也和大家大饱眼福一下vue2.0平常的消除方案吧!

零件通讯和景色管理

本土开荒的最大的难处应该就是这一块的剧情了。本来出于组件的层级并不算非常复杂,所以笔者并不筹算上 Redux 这种类型的全局状态管理库。首要组件之间的通讯正是父子通讯和兄弟组件通讯。父子组件通讯比较轻便,父组件的 state 即为子组件的 props,能够因而这么些达成老爹和儿子组件通讯。兄弟组件略为复杂性,兄弟组件通过分享父组件的情状来实行通信。借使那样的意况,小编点击站点,希望能够弹出新闻提示窗,那就是Station 组件和 InfoCard 组件之间的通讯,通过 Map 组件来展开分享。点击 Station 组件触发事件,通过回调更新 Map 组件状态的立异,同期也落到实处了 InfoCard组件的革新。相同的时候为了兑现,点击任何区域就可以关闭音讯提示窗,大家对 Map 组件实行监听,监听事件的冒泡来达成高效的关门,当然为了防止有些不要求的冒泡,还供给在局地事件管理中阻止事件冒泡。

新萄京娱乐场手机版 2

InfoCard 是极致复杂的叁个零件,因为里面含有了一点个 icon,以及气象新闻的切换,同有的时候候需求实现切换分化的站点的时候能够立异新闻提醒窗。供给当心音信提醒窗音信初次点击消息的开始化,以及切换分裂icon 时分别展现不相同的新闻,比方卫生间新闻只怕出入口音信,以及对于时刻表,切换区别的线路的时候更新对应的时刻表。那几个情形的转折,须求值得注意。其余值得一题的点就是,在切换差异站点的时候的情景,假若自身正在看某些站点的换衣室音信的时候,小编点击其余三个站点,那时候弹出的新闻提示窗应该是时刻表消息依旧卫生间音讯呢?我的取舍依旧卫生间音信,作者对于这一动静进行了保持,那样的客户体验从逻辑上来讲就像是更佳。具体落实的代码细节就不一一表达了,里面肯能饱含越来越多的细节,应接使用体验。

消除方案如下:

质量优化

如上这几个的支出得益于此前的护卫,所以重构进度也许一点也不慢的,稍微熟稔了下 react 的用法就成功了重构。可是,在上线之后选拔 lighthouse 做分析,performan 的得分是 0 分。首屏渲染以及可互相得分都以 0 分,首先来深入分析一下。因为整个应用都是由此 js 来渲染,而最为核心的就是不行 svg。整个看下来,有几点值得注意:

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

找到标题点,就能够想到一些实施方案了。第一个相比轻巧,压缩 json 数据,去除一些没有要求的音信。第三个,好的消除办法正是因此异步加载来落实组件加载,效果显然,尤其是对于 InfoCard 组件:

1、通过vue.set方式赋值

同步

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) {
    ...
   }
 }
 ...
}
 
Vue.set(数据源, key, newValue)

异步

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 不会孳生页面包车型大巴重绘恐怕重排,只会导致图层重组,最小制止对品质的震慑。

2、 通过Array.prototype.splice方法

部署

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

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

兼容性

脚下该利用在 Chrome 浏览器的支持性是最棒的,安卓浏览器建议设置 Chrome 浏览器选用,笔者平常也都相比喜欢在手提式有线电话机上选择Google浏览器。对于 Safari 浏览器,其余的浏览功效如同未有怎么大主题素材,近期应该还没帮忙增加到主显示屏。可是在之后的 ios 版本好像对于 pwa 有着更进一竿的支撑。

3、修改数据的长度

结语

新萄京娱乐场手机版 4

花了多个礼拜的大运完结了项指标一体化的重构,从这个时候来的 commit 记录能够观望10月份发狂 commit 了一波,主假使第2个周日花费了二日的小时修改了不胜枚举代码,被丰盛 InfoCard的意况切换搞了相当久,后边即是针对质量做了有些优化。进度很伤心,一度困惑本身的 coding 工夫。可是最后照旧有以下感悟:

  • 世界上从不最棒的言语,最棒的框架,唯有最合适的
  • 最高雅的贯彻都不是轻松的,都是贰个个试出来的

最后叁个冷笑话:

青春问禅师:“请问大师,作者写的程序为啥未有得到预期的输出?” 禅师答到:“年轻人,那是因为您的前后相继只会按你怎么写的施行,不会按您怎么想的奉行啊……”

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

 

1 赞 收藏 评论

新萄京娱乐场手机版 5

数据源.splice(newLength)

4、变异方法

Vue.js 包装了被观察数组的演进方法,故它们能触发视图更新。被打包的不二诀要有:

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

prop 对象数组应用

在 JavaScript 中指标和数组是引用类型,指向同七个内部存款和储蓄器空间,要是 prop 是四个对象或数组, 在子组件内部改造它会耳濡目染父组件的情状。利用那一点,大家在子组件中改换prop数组也许目的,父组件以及具备应用到prop中多少的地点都会变卦。笔者事先写过一篇js深拷贝和浅拷贝的稿子,感兴趣的去看下,其实,原理是一模二样的。

案举例下:

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

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

装有应用到itemData的地点都会变卦!

地方这种改变prop,Vue 不会在调控台给出警告,倘诺我们完全改造或然赋值prop,调节台会发出警示!援引官方给出的减轻方案如下:

1、定义三个片段变量,并用 prop 的值开头化它:

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

2、定义二个谋算属性,管理 prop 的值并重回:

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

v-model 的有个别坑

实际v-model和sync都是有的语法糖,作者事先有作品介绍过,官方网站也能找到类似的案例!

v-model 数据一时是undefined的时候,不会报错,所以,一定要潜心,v-model不能够是undefined,不然有些莫名的主题材料!

重构-动态组件的创始

有的时候大家有广大好像的零件,唯有一丝丝地方不雷同,大家得以把这么的临近组件写到配置文件中,动态创立和援引组件

办法一:component 和is协作使用

经过应用保留的 成分,并对其 is 性格实行动态绑定,你可以在同贰个挂载点动态切换多个零部件:

var vm = new Vue({
 el: '#example',
 data: {
 currentView: 'home'
 },
 components: {
 home: { /* ... */ },
 posts: { /* ... */ },
 archive: { /* ... */ }
 }
})
<component v-bind:is="currentView">
 <!-- 组件在 vm.currentview 变化时改变! -->
</component>

措施二:通过render方法创造

<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>

bi.chart.components[_type]["attr"]那几个是在计划文件中动态配置的,type点击的时候会变动,会取分歧type上边的attr属性!

公共性质抽离

咱俩在等级次序中,平时会用比比较多景况只怕数额,我们能够把众多公共数据抽离出来,放到三个目的中,前面大家能够监听那么些数额对象变化。进行数据保存仍旧获得。

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

能够接纳方面深度监听。假诺初叶化的时候要马上实践,大家能够用当下施行监听!

require动态加载信赖

笔者们能够动用require同步天性,在代码中动态加载信任,例如下边echart宗旨,大家能够点击切换的时候,动态加载!

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

import加载要放权尾部,初叶化的时候,可以把暗中认可核心用import加载进来!

如上正是本文的全部内容,希望对大家的就学抱有助于,也希望大家多多指教脚本之家。

你或者感兴趣的小说:

  • Map.vue基于百度地图组件重构笔记共享

本文由新萄京娱乐场手机版发布于品牌动态,转载请注明出处:新萄京娱乐场手机版简单总结一下最近vue项目重

关键词: