Skip to content

Latest commit

 

History

History
62 lines (32 loc) · 2.86 KB

yuan-li.md

File metadata and controls

62 lines (32 loc) · 2.86 KB

背景

工作几年,经历了数次前端框架变更

从最早的jQuery,ExtJs,EasyUI

到风靡一时的Bootstrap

再到MVVM 【Avalon,AngularJS,Vue 】

到了现在的 react全家桶【redux,react-router】,

各路英雄层出不穷,秉持着各不相同的理念为前端js贡献着使其更加混乱的力量

react全家桶的出现,标志着前端像java一样进入工业化时代。

但是,真理这东西,从来都是有着局限和前提的。

react+redux 虽然形式优美,但是却强制把代码分割到多处。

就像卖烤鸡的时候,我们会把一整只鸡分成好多部分:鸡翅、鸡腿、鸡脯、鸡架,非常的专业

但是有的时候,我们卖的是很小的 雏鸡,毛蛋,或者干脆就是卖鸡蛋的,总不至于我们蛋黄和蛋清还要分开卖吧。

某些时候,完全照搬业界的模式,会有一种杀鸡焉用牛刀的感觉。

有一些项目,总共没有几个页面,组件也很简单,非要分门别类地把代码分散到好多文件里,是会招人厌烦的。

想当初,我们用jQuery,$('#app') 用起来很是舒服,简单直接,也没有什么效率问题

反倒是到了react全家桶这里,由于redux原理,导致的各种组件多余的刷新,他们为了解决因为设计产生的效率问题又发明了PureComponent

为何我们不能适当回退一下,换个思路,通过id的方式定点局部更新组件,不必通过redux层层通知,效率还会提高。

有些时候,简单就是美。

原理

起初想要直接在全局放一个变量来保存声明了id的组件实例,后来觉得这样不合适,有数据泄露的风险

所以,采用了事件池的模式(发布订阅),在组件实例化的时候注册实例,在组件销毁的时候删除实例。

做的过程中又发现,很多项目采用的是 按需加载,如果需要全局通用,有必要把事件池放在公共的某个变量上。

本组件最后是把事件池放在了 html根元素上,对事件池的变量名进行了简单的混淆,保证每次生成的变量名不同。

后来,又听了很多人的意见,某些项目上,可以通过把react.eval列入CommonsChunk列表的方式防止重复加载,而且,他们希望react.eval的事件池不要出现在全局变量上,因此,又提供了一个方法(ref.chunk),将react.eval生成的事件池从全局移动到闭包中。

但是我觉得,即使是像react-dom,也是在render的dom元素上直接附着了一个变量存储虚拟dom结构,变量名也是随机的,

所以采用了类似方式的react.eval也不会有什么问题,

react.eval的公共事件池变量挂在html根,每次刷新页面变量名都会不一样,并且兼容按需加载方式,即使react.eval被重复打包到各个js中也不会有问题。