每个前端同学都可以拥有自己的框架,然后去

商务BD求职招聘交流微信群 https://baijiahao.baidu.com/s?id=1713591262929630808&wfr=spider&for=pc
不忘初心

从Strve.js正式发布到现在已经将近半年了,收到很多建议,也收到很多赞扬,谢谢大家!平时抽空的时候,我也在不断地完善这个框架,希望可以更加的健壮。

我提到很多次,大家也经常问我。为什么要开发这个框架?你的初衷是什么?其实,我的动机特别简单,完全受JSX语法的影响。刚接触JSX语法的时候,就被它那种魔法深深地吸引住了,可以在JS中写HTML。所以,我就想我自己可不可以也搞一个类似JSX语法的库或者框架呢!一方面可以锻炼自己的代码能力,另一方面体验开发框架的整个流程,也方便我以后更全面的学习其他框架(Vue.js、React.js等)。

我刚开始开发Strve.js时,借鉴了一个迷你JSX的库,但是做着做着就觉得做不下去了。感觉还是偏离了方向,我决定用简单的方式去实现我所想要的效果。

在JS中可以写HTML,除了借助Babel来转译JSX语法外,还有一种就是利用ES6语法中的模板字符串。利用模板字符串可以做到直接渲染到页面中,如果是改变数据的话,也能实现。但是问题是,它并不那么灵活,并且需要操作大量DOM节点。

减少操作真实Dom带来的性能代价,目前合理的方案是利用虚拟Dom,将HTML标签对象化,转化成一个JS对象。最后利用Diff算法进行新旧Dom对比,来更新差异。虽然这样也会操作真实Dom,但是比起之前的量级少了太多。

虚拟Dom的量级也得控制一定范围,不然计算量太大,页面也会卡顿。Vue2相比于Vue1引入了虚拟Dom,组件内利用虚拟Dom来进行更新数据,把虚拟Dom的量级控制在组件级别;而React.js则引入Fiber架构,借鉴了操作系统时间分片的概念,利用空闲时间计算Diff。所以,针对于Strve.js,如果引入虚拟Dom的话,虚拟Dom的量级必须在考虑范围之内。

Strve.js

3.x之前的版本都没有解决虚拟Dom量级的问题,都是全量的对比。另外,如果想操作Dom,必须要为其创建一个Dom对象,绑定到虚拟Dom上,这样才能调用DomAPI,之前的版本都是为每一个Dom节点都创建一个Dom对象,一些静态节点没有必要,还有它也不会进行Diff算法。

Strve.js

3.1.0是3.x正式版本中第一个版本,也是之前2.x版本之后的第一次重大升级。算是给自己在年第一个礼物吧!之前听过尤大的一次分享,他说:“做开源从90%到%这个过程中,是特别难的”。是的,这次我亲身体会到了。Strve.js我会继续维护下去,但是我不会逼自己去一定要做成什么样,保持一颗初心就够了。

Strve.js

3.1.0升级了什么

这次大方面一方面是修改了API,更简短也容易记,减轻了心智负担;另一方面是上面提到了Diff算法的优化。

以下是更新日志:

修改API:

旧API新APIStrvecreateApprenderhupdateViewsetDatawatchDOMChangewatchDomemitEventemitstrveVersionversiondeepCloneDataclone

调整createAppAPI;

useFkey标记改为useFirstKey;

添加标记key、name;

加入组件标签


转载请注明:http://www.aierlanlan.com/rzdk/413.html

  • 上一篇文章:
  •   
  • 下一篇文章: 没有了