2017个人技术回顾

在2017年的最后一天,随着1999年12月31日出生的人过完生日,标志着所有的90后已经成年,“祖国未来的花朵”已经再也不是指90后了 T.T 但是这跟我其实没啥关系,我是中 年 大 叔

时间线

今年年初的时候,“临危受命”接手了广告管理系统的前台工作,由此开始了 Vue.js 之旅。之后同样由于工作需要,开始维护 web 服务端,使用 scala 语言加 play framework 框架,深深体会到了 当面向对象加上函数式 的强大和复杂。从年中开始新项目,为了和集团技术接轨,web 服务端改为使用 egg 框架,学习到了什么是企业级解决方案以及为什么需要�这么做,开始学会从非技术角度看待工程问题,提升自己的技术视野和�技术管理相关的技能。其中还学到了零零碎碎的知识,比如学会用 Docker;慢慢学习做�系统设计,写设计文档;学习视觉设计,交互体验以提升自己的设计能力等等,就不一一详细列举了。

技术盘点

大概说一下使用的几个�主要技术点的认识和见解。

Vue.js

首先说说 Vue -- 一个最近两年在快速发展的,由尤雨溪大神开发的 MVVM 框架。通过使用单文件组件方式,Vue 通过把模板(template)逻辑(script)样式(style)三种代码组织在一个 .vue 文件中,个人感觉是目前为止在众多前端组件化框架中属于非常易于理解的功能完整且灵活的接近标准的前端组件化�解决方案。

易于理解

Vue 组件中的 templatescriptstyle 三个部分分别对应的是传统前端开发中的 .HTML.js.css 文件,如果项目是使用 vue-cli 初始化或者是公司内部已经有定制的项目架手脚,那么一个前端开发只要�稍微有点 �ES6 的基础,在看过文档了解 Vue 的基础语法之后,就可以快速的上手开发。这是因为通过框架和工具层面的配合,把很多晦涩难懂或者在传统前端领域不存在概念给屏蔽了,使得我们并不需要做非常多的思想上的转变就能使用上 Vue。这和另外两大框架 ReactAngular �非常不一样,我们不需要在写了多年 HTML 之后再去学 JSX 语法,也不需要子安说了多年要展示,逻辑,样式分离之后却又说要 CSS IN JSJSX IN JS。更加不需要去学习 Angular 中的一大堆 API 和新概念。Ps:上述对其他框架的描述不是说明那些特性不好,而是�针对易于上手这一点的对比。

To get started with Vue, all you need is familiarity with HTML and ES5 JavaScript (i.e. plain JavaScript). With these basic skills, you can start building non-trivial applications within less than a day of reading the guide.

PPS:易于上手容易理解有时候反而成为了其他框架或者开发者嘲笑 Vue 的点ㄟ( ▔, ▔ )ㄏ。。

功能完整且灵活

V�ue 中包含了 8个 组件生命周期 hook 方法,让用户有机会在不同的阶段增加自定义行为。

2017个人技术回顾_第1张图片
vue lifecycle

(图片来自Vue官网)

Vue 里没有 shouldComponentUpdate 接口,但是由于 Vue 实现数据监听的原理和 React 不一样,Vue 在渲染时已经收集了所有数据的依赖关系,所以当数据变化时能精确控制哪些组件需要重新渲染,详细可以参考 这篇分析,非常通俗易懂。

�Vue 中除了有 propdata 两种数据类型,还提供了 computedwatch 接口。computed 提供了复合属性计算逻辑的封装能力,并且具有缓存特性 ,computed 中使用到的属性变化时 �computed 的值才会变化然后触发 diff,在某些场景下这能大大提升应用性能。

Vue 中支持自定义 directive,使我们有抽象对组件底层(DOM)的控制能力,实现更灵活的功能组合。同时还支持混合(mixins),插件(plugins) 和 过滤器(filters),吸收了非常多其他框架优秀的设计。

接近标准

It is also totally feasible to offer deeper integration between Vue with Web Component specs such as Custom Elements and Shadow DOM style encapsulation
-- Vue 官网

以上截自 Vue 和 Polymer 对比,Polymer 是以符合 Web Component 作为其主要特点的解决方案。最近了解到一个也是以 WebComponent 为主要特点的解决方案是 stencil.js,使用了 decoratorclass 来申明组件,个人感觉非常有意思,会持续关注。下面说说为什么 Vue 很容易和 WebComponent 集成。

  • 还记得上面提的 Vue 单文件组件中是使用