在 2017 年的最后一天,随着 1999 年 12 月 31 日出生的人过完生日,标志着所有的 90 后已经成年,"祖国未来的花朵" 已经再也不是指 90 后了 T.T 但是这跟我其实没啥关系,我是中 年 大 叔!
今年年初的时候,"临危受命" 接手了广告管理系统的前台工作,由此开始了 Vue.js 之旅。之后同样由于工作需要,开始维护 web 服务端,使用 scala 语言加 play framework 框架,深深体会到了
的强大和复杂。从年中开始新项目,为了和集团技术接轨,web 服务端改为使用 egg 框架,学习到了什么是企业级解决方案以及为什么需要�这么做,开始学会从非技术角度看待工程问题,提升自己的技术视野和�技术管理相关的技能。其中还学到了零零碎碎的知识,比如学会用 Docker;慢慢学习做�系统设计,写设计文档;学习视觉设计,交互体验以提升自己的设计能力等等,就不一一详细列举了。
- 当面向对象加上函数式
大概说一下使用的几个�主要技术点的认识和见解。
首先说说 vue -- 一个最近两年在快速发展的,由尤雨溪大神开发的 MVVM 框架。通过使用 单文件组件 方式,Vue 通过把模板 (template)、逻辑(script) 和样式 (style) 三种代码组织在一个 .vue 文件中,个人感觉是目前为止在众多前端组件化框架中属于非常易于理解的,功能完整且灵活的、接近标准的前端组件化�解决方案。
�易于理解
Vue 组件中的 template、script 和 style 三个部分分别对应的是传统前端开发中的 .html、.js 和 .CSS 文件,如果项目是使用 vue-cli 初始化或者是公司内部已经有定制的项目架手脚,那么一个前端开发只要�稍微有点 �ES6 的基础,在看过文档了解 Vue 的基础语法之后,就可以快速的上手开发。这是因为通过框架和工具层面的配合,把很多晦涩难懂或者在传统前端领域不存在概念给屏蔽了,使得我们并不需要做非常多的思想上的转变就能使用上 Vue。这和另外两大框架 React 和 Angular �非常不一样,我们不需要在写了多年 HTML 之后再去学 JSX 语法,也不需要子安说了多年要展示,逻辑,样式分离之后却又说要 CSS IN JS 和 JSX 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 方法,让用户有机会在不同的阶段增加自定义行为。
vue lifecycle
Vue 里没有
接口,但是由于 Vue 实现数据监听的原理和 React 不一样,Vue 在渲染时已经收集了所有数据的依赖关系,所以当数据变化时能精确控制哪些组件需要重新渲染,详细可以参考 这篇分析 ,非常通俗易懂。
- shouldComponentUpdate
�Vue 中除了有 prop 和 data 两种数据类型,还提供了 computed 和 watch 接口。 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 ,使用了 decorator 加 class 来申明组件,个人感觉非常有意思,会持续关注。下面说说为什么 Vue 很容易和 WebComponent 集成。
是不是和 Vue 的单文件组织形式非常相似?Vue 中的 scoped css 特性,也能完全实现 Shadow DOM 中样式的封装性。众所周知�,css �中的全局性一直是其一大痛点,为了解决这个问题,我们一开始从命名规范入手,出现了 BEM , SMACSS 和 OOCSS ,到后来通过编译工具实现 css in js, css module 都是为了解决此问题。
- <template id="element-details-template">
- <style>
- details {font-family: "Open Sans Light",Helvetica,Arial}
- .name {font-weight: bold; color: #217ac0; font-size: 120%}
- h4 { margin: 10px 0 -8px 0; }
- h4 span { background: #217ac0; padding: 2px 6px 2px 6px }
- h4 span { border: 1px solid #cee9f9; border-radius: 4px }
- h4 span { color: white }
- .attributes { margin-left: 22px; font-size: 90% }
- .attributes p { margin-left: 16px; font-style: italic }
- </style>
- <details>
- <summary>
- <span>
- <code class="name"><<slot name="element-name">NEED NAME</slot>></code>
- <i class="desc"><slot name="description">NEED DESCRIPTION</slot></i>
- </span>
- </summary>
- <div class="attributes">
- <h4><span>Attributes</span></h4>
- <slot name="attributes"><p>None</p></slot>
- </div>
- </details>
- <hr>
- </template>
- <script>
- customElements.define('element-details',
- class extends HTMLElement {
- constructor() {
- super();
- var template = document
- .getElementById('element-details-template')
- .content;
- const shadowRoot = this.attachShadow({mode: 'open'})
- .appendChild(template.cloneNode(true));
- }
- });
- </script>
作为临时人员,写了仅仅一段时间的 scala ,虽然都是非常�浅显的使用,但是已经�能深深感受到它的强大 -- 无数的语法和内置对象�和内置方法,强大的重载机制,使 scala 能轻松做到很多 java 非常�难实现甚至无法实现的效果。其中在异步并发编程中使用 Await 接口的语法更让我感觉语言之间都是�相通的,互相借鉴和相互学习的。
Have the best of both worlds. Construct elegant class hierarchies for maximum code reuse and extensibility, implement their behavior using higher-order functions. Or anything in-between.
使用 play 框架的时候,深深被 Twirl 模板语法恶心到了,不过话说回来,这种在 scala 代码中写 html 代码的形式是不是和 React 很像�?
来源: http://www.jianshu.com/p/3a870c9ecfd2