作者简介: 王鹤, 高级前端工程师, 隶属于腾讯 SNG 增值产品部主要负责 QQ 个性化业务的功能开发及技术优化目前专注于框架的研究, 致力于提升效能, 解放生产力
一框架的选型
没有什么框架是全能的, 都有其适用场景我们的最初的定位一定要围绕我们的业务来选择我们个性化业务是基于移动端的多页面应用我们综合考虑之后, 决定使用 vuejs+typescript+webpack2 来作为现在和将来的核心主框架, 未来的演变也基于此基础
1 为什么使用 vuejs
早些年, 前端的 MVVM 框架呈现爆发式的增长, 比如 angular,react,vuejs,avalon,meteor 对比过这些框架, 最终选择了 vuejs 作为我们业务的核心引擎原因如下:
1)angular 和 react 虽然火爆, 但是学习曲线还是太陡了, 需要理解很多东西, 上手不易 vuejs 上手非常容易, 语法简单我们试验过, 一个有前端基础但没有接触过 vuejs 的同学, 基本上一天就可以上手开发简单应用几天之内学会模块组件的概念基本就可以完成中等复杂的业务这是其它框架无法相比的
2)vuejs 的文档是非常友好的, 当然现在其它框架的文档建设也在加强这也告诉我们一个东西是否能普及开, 核心有两点, 一是本身足够好用, 二是足够方便理解 vuejs 做到了这点, 所以它火了
3)vuejs 体积小适合移动端业务, vuejs 在 gzip 压缩后的代码是 react 的一半而且移动端基本没啥兼容性问题 PC 的话兼容 IE9 + 如果是 PC 业务, 其实我们现在也只是兼容 IE9 + 把时间浪费在兼容性问题上完全是浪费生命所以现在的前端开发者, 感谢这个时代吧
4)vuejs 最新的版本中也逐步借鉴学习了一些其它框架的优秀的思想, 能学习和使用一种框架用到深处, 我想是足够满足我们的业务需求的
2 为什么使用 typescript
1)数据流结构规范化的重要性
在业务需求的中级阶段, 我们意识到数据流结构规范化的重要性 vuejs 因为本质是 MVVM 框架, 引入了数据流的概念但 JS 是弱类型语言, 数据流本身比较随意, 比如一个 Button 的属性, 基本属性有按钮文字 (text), 按钮状态(status), 按钮进度(process) 等三个基本数据属性但是团队中不同人可能有自己的想法, 关于一个 Button 的定义命名都有可能不一样长期看来, 注定无法维护这时候数据结构的规范 (接口, 强类型) 显得非常重要引入这些概念, 对基本组件的定义和规范在代码编写阶段自然就形成了约定(不遵守规范, 编译都通不过), 这比文档规范约束有效和方便得多
typescript 恰好就是为此类需求而诞生的, 而且充分考虑到兼容性对之前 JS 的代码完全兼容
2)使用 ES6/ES7 特性, 具有优秀的自编译能力
很多 ES6/ES7 项目的编译都是通过 babel 进行处理的, 不熟悉的朋友可能整配置都要搞半天, 而且 babel 还有 babel5 和 babel6 的区别, 两者也并不太兼容
typescript 具有自编译的能力, 不需要额外引入 babel 只依赖 tsconfig.json, 将此文件放到项目的根目录, 即可全局配置
typescript 不仅能满足 babel 的编译的功能, 而且比 babel 做得更好比如很重要的 async/await 语法, babel 在使用的时候会引入相当大的一个文件:
typescript 则非常干净利落, 就几十行代码:
3)typescript2.0 引入了 @types, 系统性地解决了绝大部分公共库的类型定义问题
WONDER 迟迟没有在生产项目中使用 typescript 的一个很大的原因就是类型定义实在是太麻烦了从 DefinitelyTyped 到 typings, 最后是 @types 微软自己也发现有这么个问题, 所以也在一直演进目前来看,@types 算是一个不错的方案充分利用 npm 进行管理和维护, 且绝大多数公共库都已经支持 @types, 比如 @types/jquery@types/node 等 vue 更先进一些, 直接本身 vue 模块即支持 typescript 的类型定义不需要额外的 @types/vue 也就是 `npm install vue` 即可在 typescript 中正常使用
3 为什么使用 webpack2
使用 webpack2 最核心的地方就是使用 tree-shaking 特性, tree-shaking 是大势所趋, 符合代码极简主义, 提高代码使用率对于代码的精简还是挺高的, 大概可以优化 30% 的代码体积
要使用 webpack2 的 tree-shaking, 前提条件就是使用 ES6 的 module, 这是核心根本所以意味着所有的代码要基于 ES6 的 module 来写建议从新项目入手, 代价较小
阶段性小结:
1 使用 vuejs, 从数据驱动的角度来处理逻辑, 操作 DOM, 可以完全抛弃 zepto/jQuery
2 由于使用数据驱动, 数据本身的结构由为重要, 再加上方便优雅地使用 ES6/ES7, 我们引入了 typescript 作为主要开发语言
3 利用 ES6 的 module 的重构代码, 通过 webpack2 的 tree-shaking 来达到简化代码体积, 提高代码利用率的目的
二项目实践
从本章节起开始结合线上项目来讲讲框架的使用和细节本次介绍的项目名叫个性化体验卡基本上借助此项目从头搭建了一套基础底层, 项目本身是多页面项目
1 项目结构
首先是项目结构, 基本上只需要一个公共库目录和项目本身目录即可
公共库目前搭基础, 包含 common 和 shim 两个即可, 这里特别指出的是 mqq 的库被重写后, 从原先的 1400 行, 减少到 200 行去除了相当多的无用代码, 极简风格
项目本身目录也很好理解:
common 项目的公共方法目录, 比如 helper 之类的
comp 项目的组件目录, 核心目录以后各个业务都是组件复用
CSSCSS 目录, 发布时会 inline 到 html 中
html 入口文件目录, 基本就是一个框架, 如下图所示:
由于 tree-shaking 的因素, 我们的首屏业务逻辑代码可以直接 inline 到页面当中, 复杂的次屏逻辑可以以动态组件的形式加载形成 ** 直出 + 主内嵌 JS + 异步动态 JS 组件 ** 的优雅的加载模式
细节提示:
这里有个开发细节和大家讲解一下, 我们在上图中, 我把 vuejs 并没有以模块的形式打入到 detail.entry.js 里, 因为一是额外增加了 js 的体积, 二是我们的项目是多页面的项目, 公共 vuejs 是可以也有必要进行缓存和复用的
这里采用外链离线包 + 强缓存的形式是比较合理的
2 配置文件
初学者在做配置的时候一般比较蒙逼, 所以有脚手架这么个东西来帮助初学者快速搭好环境, 但实际上每个人从事的项目不完全一样脚手架并不能完全满足需求所以了解一下配置的基本原理还是有相当必要的
本文是基于 vuejstypescriptwebpack2 的框架, 用 gulp 进行把几个东西串起来
因为文中的脚手架结合了一些项目本身的各种功能, 这里先讲几个核心需要注意的点
1)npm install 几个最重要的模块
gulpvuevue-class-componenttypescriptwebpack@types/nodets-loadertext-loader
这几个装了以后, 基本上项目用到的最核心模块都有了
2)配置 tsconfig.json
这个配置非常非常关键, 建议初学者直接 Copy, 每个配置都有用, 我也写了注解, 不要随意删减
3)webpack.config.js 配置
细节提示:
注意红框部分的地方, 一定不要配置错
externals 这样写的目的是不要把 vue 打包进来, 一定要注意大小写大小写不对就容易出错不理解的初学者直接 Copy
rules 就只配这一个就可以了, 其实就是对于模板 html 文件的处理由于我们的代码 (IDEWebStorm 自带的特性) 在编写的时候就转换成了 js, 所以 webpack 不需要加 ts-loader 但最理想的状态就是编译过程交给 webpack 或 gulp 进行, IDE 不自动编译 js 文件, 这样源代码比较纯粹
3vuejs 的组件写法
vuejs 其实是一个很灵活的框架, 可以有很多种写法 vue 的组件看官方文档也有很多写法但在 typescript 中, 写法和之前有很大变化 (但其实和 reactangularjs 很像了) 如果不这么写, 你会发现你的编辑器到处报错 So, 目前我们线上项目中的组件大概长这个样子:
这就是一个组件, 如何使用呢, 我们看入口文件的 JS
更多细节可以参考官方 DEMO:
https://github.com/vuejs/vue-class-component/tree/master/example
这种写法是很优雅和可维护的, 以及配合 typescript 的特性, 感觉非常的愉快!
4 编辑器的选择
我们项目组的同学基本就两种编辑器, 一种是 Webstorm, 一种是 vscode 其实 Webstorm 除了卡, 其它都比 vscode 好用
这两种编辑器, Webstorm 自带编译功能, 所见即所得配置好 tsconfig.json, 剩下都省心 vscode 略复杂, 需要建立一个 task, 然后在跑项目的时候执行 build 也可以达到类似的效果
5 环境搭建的坑
其实如果初学者前面不按照我说的一些细节来操作的话, 很容易在搭环境上一堆编译报错, 编辑器语法报错会影响初学者的学习热情所以 WONDER 这里会尽量在抽离一个相对普适的脚手架给各位使用, 尽请期待
其实初学者按照我上述的配置操作的话, 一般问题也不是太大有遇到任何编译报错或者语法报错, 欢迎和 WONDER 交流, 我也作下记录我的微信号是: wonderhwang
6 兼容性问题
项目实践过程中, 有些兼容性问题这里提出来避免大家再踩
1)首先关于 Promise 的兼容性实践证明如果你是基于手 Q 或微信的移动端业务, 可以不需要引入 Promise-PolyfillPC 端还是建议需要 Promise-PolyfillPC 对文件大小不敏感, 所以加下 polyfill 无所谓移动端没有必要, 主流都支持目前线上业务也没有收到什么反馈页面功能由兼容性异常的
2)有些写法尽量不要用, WONDER 已知的就是不要使用 ES6 的模板字符串
首先虽然我们配置了 tsconfig.json, 但是并不是所有的语法都转成了 ES5, 模板字符串就没有完全转义在 IOS8 的系统里面兼容性有问题, 模板会报错, 程序会出问题
3)不要使用 `Object.assign`, 这个也不会转义, 在 IOS8 系统也有兼容问题而且也不是很优雅 WONDER 找到一个优雅的写法, 就是使用 ES6 的三点解构符 `...`, 虽然这两者并不完全相同, 且三点解构符其实也并不是用在这里的只是结合我们的使用场景, 比较巧妙
我们使用最多的无非就是两个 object 对象参数的合并如果 `Object.assign` 有兼容性问题, 又不想写诸如 `_.extend` 那么就试试这种写法, 如下所示:
我们看看 typescript 如何翻译变成这里的, 对应的 JS 如下:
我们注意到 `__assign` 方法, 其实就是翻译了三点解构符果然如此:
7 数据接口
这个是项目实践过程中的细节了 interface 这里指的是数据接口, 也就是我们熟知的 DAO 层 JS 之前过于灵活, 现在有 typescript 辅助, 数据结构的定义会更加清晰和规范不符合规范会报错的
8TS 中的 DOM 操作
document.querySelector('.group-qp')).style.display = 'none';
这么写 TS 是会报错的:
原因是 document.querySelector 返回的是 Element 对象, Element 对象并没有 style 方法, 只有继承的 HTMLElement 对象才有 style 方法, 所以这里要写为:
(<HTMLElement>document.querySelector('.group-qp')).style.display = 'none';
9 采用事件来处理中等复杂程序的组件通信问题
中等复杂的组件通信建议直接使用 eventbus 的 $on 和 $emit, 复杂的就使用 vuex 这里组件虽然是用事件进行信息传递, 我们还是可以在模板中进行显示的声明, 符合 vue 模板显示声明一贯的做法如下图所示:
组件声明, v-event:xxx,xxx 表示事件名称, 后面是传递参数, 非常直观组件的具体监听是:
所有的事件触发和监听都挂载在 eventbus 上面, eventbus 名为事件总线, 其实本质就是一个 Vue 的实例而已
- import eventbus from 'lib/common/eventbus';
- /** * Created by wonderwang on 2017/7/11. */import Vue from 'vue';export default new Vue();
10 其它问题
1)标签不能用驼峰法, 比如在 vue 模板中 < rankDetail></rankDetail > 是不会被正确识别的, 应该写成 < rank-detail></rank-detail>
2)不能用关键字 dialog, 可能是 vue 本身的 BUG
来源: https://cloud.tencent.com/developer/article/1030681