澳门新葡8455手机版-澳门新葡8455最新网站

您的位置:澳门新葡8455手机版 > 澳门新葡8455最新网站 > 之前我都不是很喜欢去用框架,vue数据更新

之前我都不是很喜欢去用框架,vue数据更新

2019-10-09 06:40

零件结构

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

图片 1

  • Label: 地图上的文本音信,满含大巴站名,线路名称
  • Station: 大巴站点,包涵平常站点和转化站点
  • Line: 大巴线路
  • InfoCard: 状态最复杂的一个组件,首要含不常刻表音讯、卫生间地点消息、出入口音讯、无障碍电梯消息

那是一个大意的组件划分,里面大概含有越来越多的别的成分,举个例子 InfoCard 就有 InfoCard => TimeSheet => TimesheetTable 那样的嵌套。

1、定义八个有的变量,并用 prop 的值开首化它:

特性优化

上述这几个的开采得益于在此以前的保卫安全,所以重构进度或然相当慢的,稍微熟稔了下 react 的用法就到位了重构。不过,在上线之后选择 lighthouse 做深入分析,performan 的得分是 0 分。首屏渲染以及可彼此得分都以 0 分,首先来深入分析一下。因为任何应用都以经过 js 来渲染,而非常基本的正是非常svg。整个看下去,有几点值得注意:

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

找到标题点,就足以想到一些缓和方案了。第一个相比较轻便,压缩 json 数据,去除一些无需的信息。第4个,好的化解办法正是经过异步加载来落到实处组件加载,效果鲜明,越发是对于 InfoCard 组件:

import加载要放开首部,开首化的时候,能够把暗中同意主旨用import加载进来!

同步

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

在 JavaScript 中指标和数组是引用类型,指向同二个内部存款和储蓄器空间,如果 prop 是多少个对象或数组, 在子组件内部更换它会耳熏目染父组件的气象 。利用那一点,大家在子组件中退换prop数组或许目的,父组件以及独具应用到prop中数量的地点都会调换。作者前边写过一篇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 消息。还只怕有,我们还须要取得每个站点的时刻表消息,卫生间地点讯息,无障碍电梯新闻以及出入口新闻。这里是写了部分爬虫去官方网站爬取并做了有些数量处理,再一次就不一一赘述。

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

pwa重构东京地铁线路图

2018/03/28 · JavaScript · PWA

原稿出处: Neal   

以前一贯有在保卫安全三个北京大巴线路图的 pwa,最要害的特征正是 “offline first”。不过出于代码都以因而原生的 js 去贯彻,在此之前自个儿都不是很爱怜去用框架,不想有所任何框架的偏疼。不过到早先时期随着代码量的充实,代码的确变得混乱不堪,拓宽新成效也变得更其困难。因而,花了周边八个礼拜的时候对于利用实行了一回完整的重构。网址访问地址:

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

零件通讯和状态管理

地点开拓的最大的困难应该正是这一块的开始和结果了。本来出于组件的层级并不算特别复杂,所以作者并不筹算上 Redux 那种类型的全局状态管理库。主要组件之间的通讯正是老爹和儿子通讯和兄弟组件通讯。老爹和儿子组件通讯比较轻易,父组件的 state 即为子组件的 props,能够经过这一个实现父亲和儿子组件通讯。兄弟组件略为复杂性,兄弟组件通过分享父组件的地方来开展通讯。假设那样的现象,笔者点击站点,希望能够弹出音讯提醒窗,那正是Station 组件和 InfoCard 组件之间的通讯,通过 Map 组件来进行分享。点击 Station 组件触发事件,通过回调更新 Map 组件状态的更新,同期也兑现了 InfoCard组件的翻新。同不时候为了落到实处,点击任何区域就能够关闭音讯提示窗,大家对 Map 组件实行监听,监听事件的冒泡来完结快捷的停业,当然为了制止有个别不需要的冒泡,还索要在有的事件处理中截留事件冒泡。

图片 2

InfoCard 是特别复杂的两个零部件,因为中间满含了少数个 icon,以及气象消息的切换,同有时候供给贯彻切换不相同的站点的时候能够更新新闻提醒窗。须要在乎音讯提醒窗音信初次点击信息的开端化,以及切换不一样icon 时分别展现分歧的新闻,举例卫生间音讯依旧出入口消息,以及对此时刻表,切换不相同的路径的时候更新对应的时刻表。那些意况的转账,供给值得注意。别的值得一题的点正是,在切换分裂站点的时候的情事,假设小编正在看有些站点的盥洗室音讯的时候,我点击另外二个站点,那时候弹出的消息提醒窗应该是时刻表新闻只怕卫生间消息吗?小编的抉择还是卫生间新闻,小编对此这一情景举办了保全,那样的顾客体验从逻辑上来讲就像是更佳。具体贯彻的代码细节就不一一表明了,里面肯能包蕴越来越多的内幕,款待使用体验。

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

结语

图片 3

花了多个礼拜的命宫完毕了花色的完全的重构,从那一年来的 commit 记录能够看出1月份发狂 commit 了一波,重假若首先个星期六花费了两日的时辰修改了重重代码,被丰裕 Info卡德的景色切换搞了相当久,前边就是本着品质做了有的优化。进程好惨烈,一度疑忌本身的 coding 技能。可是最后如故有以下感悟:

  • 世界上从不最佳的言语,最佳的框架,独有最合适的
  • 最高贵的贯彻都不是举手之劳的,都以三个个试出来的

末段四个冷笑话:

青少年问禅师:“请问大师,小编写的前后相继为啥没有到手预期的出口?” 禅师答到:“年轻人,那是因为您的次序只会按你怎么写的进行,不会按您怎么想的进行啊……”

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

 

1 赞 收藏 评论

图片 4

方法一:component 和is同盟使用

设计

数码策画好之后,正是利用的规划了。首先,对组件举办二回拆分:

v-model 数据有时是undefined的时候,不会报错,所以,一定要留意,v-model无法是undefined,不然有个别莫名的题目!

部署

方今的布置方案是行使 create-react-app 的官方提出,通过 gh-pages 实现将 build 的打包文件上传到 gh-pages 分支上进而完结陈设。

v-model 的部分坑

异步

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 不会挑起页面包车型地铁重绘只怕重排,只会招致图层重组,最小制止对品质的影响。

前言

兼容性

此时此刻该应用在 Chrome 浏览器的协助性是最佳的,安卓浏览器提出设置 Chrome 浏览器采取,小编平时也都比较喜欢在手提式有线电话机上选取Google浏览器。对于 Safari 浏览器,其余的浏览功能就像是并未有何样大难点,近年来应当还没援救增多到主显示屏。然则在随后的 ios 版本好像对于 pwa 有着更上一层楼的支撑。

如上正是本文的全体内容,希望对我们的求学抱有利于,也指望大家多多指教脚本之家。

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

Vue.js 包装了被考察数组的多变方法,故它们能触发视图更新。被包裹的不二等秘书技有:

能够选拔方面深度监听。假诺发轫化的时候要立时实行,大家得以用当下实践监听!

prop 对象数组应用

案比方下:

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

2、 通过Array.prototype.splice方法

bi.chart.components[_type]["attr"]那些是在安排文件中动态配置的,type点击的时候会变动,会取不一致type上边包车型地铁attr属性!

vue数据更新, 视图未更新

那几个难点大家平常会遇见,常常是vue数据赋值的时候,vue数据变化了,可是视图未有立异。那几个不算是项目重构的本事中央,也和大家享受一下vue2.0常见的消除方案吧!

4、变异方法

2、定义三个计算属性,管理 prop 的值并赶回:

我们在等级次序中,日常会用比相当多景色大概数额,大家能够把大多公共数据抽离出来,放到二个目的中,前边我们得以监听那么些数额对象变化。举办数据保存恐怕获得。

小编们能够选取require同步天性,在代码中动态加载信任,举例上边echart宗旨,大家能够点击切换的时候,动态加载!

重构-动态组件的创始

3、修改数据的尺寸

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

缓慢解决方案如下:

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

<script>
export default {
 components: {
 },
 data() {
 },
 props: {
 itemData: Object
 },
 methods: {
 }
};
</script>
require("echarts/theme/"+ data.theme);

实在v-model和sync都以部分语法糖,作者事先有成文介绍过,官方网站也能找到类似的案例!

1、通过vue.set格局赋值

数据源.splice(newLength)

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

地点这种更动prop,Vue 不会在调整台给出警告,假若大家一同改换如故赋值prop,调整台会发出警示!援引官方给出的消除方案如下:

不久前太忙了,博客好久未有更新了。明天忙里偷闲,简单计算一下最近vue项目重构的有的才干中心。

经过行使保留的 成分,并对其 is 个性举行动态绑定,你可以在同四个挂载点动态切换多少个零部件:

有的时候大家有好多好像的零部件,唯有一丝丝地点不等同,大家能够把如此的相近组件写到配置文件中,动态创设和援引组件

国有性质抽离

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

require动态加载正视

措施二:通过render方法创立

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

你可能感兴趣的小说:

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

本文由澳门新葡8455手机版发布于澳门新葡8455最新网站,转载请注明出处:之前我都不是很喜欢去用框架,vue数据更新

关键词: