前一段时间应Boss要求，给开发组同事做了一次关于前端技术的演讲，我整理了现在项目遇到的很多问题，和未来规划。我还特意去了一趟上海，求教朋友一些前端架构问题，他说我遇到的问题具有很广泛的普遍性，很多团队都有遇到，于是我抽空整理出来。

 

 

 

Mobile Web常见技术问题和规划

 

现状

一、目前前端技术

(1)JS功能库：jQuery和Zepto混用；

(2)页面之间传递数据方法：url传递数据；

(3)本地数据存储cookie；

 

二、现存在的问题

(1)页面js以及css文件过多过大；

(2)JS库和插件引用不规范不统一；

(3)HTML片段管理和渲染方法需要改进和优化；

(4)没有进行JS模块化，通用方法未提出公用；

(5)线上JS和CSS代码未做压缩处理；

(6)没有数据缓存和更新机制；

(7)静态文件images需要规划管理；

 

 

 

 

 

 

 

 

规划

一、统一JS使用规范和基本解决方案

(1)全局使用JS功能库Zepto

逐步将项目中每个页面的jQuery替换成Zepto，解决两者的兼容差异，和Zepto的功能缺失；

 

(2)全局引入移动点击事件处理方案Fastclick

解决click在移动设备上300ms延迟和点透bug；

 

(3)统一HTML渲染方法

从原有HTML字符串拼接逐步改为使用前端模板渲染引擎doT.js；

 

(4)数据缓存及更新机制

本地数据localStorage缓存一些ajax请求的数据，更新时间等机制写成公用的JS方法；

 

(5)JavaScript模块化

CMD or AMD，计划引入seajs模块加载器；

 

 

 

二、布局和CSS开发

(1) 公用样式文件的维护、CSS文件目录管理规范、单个页面CSS文件引入规范

• reset.css  (样式重置表)
• common.css  (公用样式表)
• page.css  (本页面样式) 

(2) 将JS动画效果逐步使用CSS3的动画进行取代

尽可能调用CSS3硬件加速

 

(3) 后期有待选型和研究的问题

• 布局逐步放弃float布局，还是改用flex-box？
• REM or 百分比布局选型？
• LESS (SASS)是否适合引入?

 

三、前端代码可维护性

(1)命名规范

• 语义化命名
• CSS命名建议使用中杠来命名：help-guest-regist
• JS建议驼峰命名法：helpGuestRegist （方法命名尽可能的语义化和完整）

(2)结构html、样式css、行为js分离

• 避免HTML中写CSS样式
• 避免HTML中写JS语句

(3)JavaScript全局变量

严格限制JS中全局变量的数量，避免定义过多全局变量；

 

注： 代码规范参考《编写可维护的JavaScript》

 

 

四、前端工作流改进

(1)多设备多浏览器自动同步刷新工具

http://www.browsersync.cn/

 

 

(2)前端代码上线前自动化处理

• JS和CSS代码的压缩；
• 给js/css/image文件版本号(文件指纹)：解决浏览器和微信强缓存问题；
• 将页面引入大量js和css文件合并成一个或多个文件（待解决）：减少http请求；

注：目前打算使用gulp工具实现发布前的文件处理的环节；

 

 

 

 

 

五、项目前端架构调整（长期规划）

SPA（Single-page application）

优点：

• 可以在页面切换间平滑过渡，增加Loading动画，类似native app；
• 可以在各个页面间传递数据，不依赖URL；
• 可以选择性的保留状态；
• 避免了公共JS的反复执行，如无需在各个页面打开时都判断是否登录过等等；
• 减少了请求体积，节省流量，加快页面响应速度；

缺点：

• 前期开发复杂度大大提升，工期过长，涉及方面过多，需要长期进行规划；

 

MVC：

计划采用Backbone.js

 

 

 

 

资料：

移动H5前端性能优化指南

http://isux.tencent.com/h5-performance.html