Web前端开发最佳实践(第1和2章)

以下内容大部分摘自《Web前端最佳实践》

---

 

第1章

1.1.Web前端需要具备的技能：

• HTML
• CSS
• JavaScript
• 跨平台、跨浏览器
• 前端框架
• 调试测试工具
• 沟通能力

1.2.浏览器市场占用率：

来自tongji.baidu.com/data/browser

 　　

 

 

---

 

 第2章

2.1前端代码组织结构

js

　　　　lib

　　　　cunstion.js(业务相关)　　

　　　　css

　　　　　　lib

　　　　　　images（放置用于样式中的背景图）

　　　　　　reset.css（统一元素默认样式的样式文件）

　　　　　　custom.css（业务相关）

　　　　resource（放置页面图片文件以及其他类型资源文件）

　　　　index.html

　　2.2前端代码重构

• 删除无用代码，精简代码
• 前端代码规范化
• 整理基础类库
• 前端代码模块化
• 提高页面加载性能

　　最佳实践：

• 重构前预估风险，如果没有足够的自动化测试，最好先完善自动化测试代码；
• 重构的目的是要提高代码的可维护性、可读性和性能；
• 先易后难，循序渐进；
• 重构过程中要持续测试，多浏览器测试。
• 如果需要提升性能，要事先检测出网站的正题性能并量化，找出瓶颈，要持续监控并做对比。

 　2.3合理使用前端框架

　　好的js框架经过了大量的功能测试、性能测试和浏览器兼容测试。

　　选择前端框架要考虑如下几个因素：

• 项目的需求

　　　　i.有ajax操作

　　　　ii.需要模板化

　　　　iii.数据格式是JSON还是XML

　　　　iv.项目需要支持的浏览器

　　　　v.移动设备还是pc端

　　　　vi.哪些UI模块：模态窗口、滑块控件、进度条、提示框、分割框、幻灯显示等等

• 项目的特点

　　　　i.开发团队的前端技术能力

　　　　iii.短期or长期：短期的话，要有限选择容易上手和快速开发的框架；长期的话，是需要长期维护的，要考虑框架本身的升级和扩展性。

• 框架的特点

　　　　i.框架是否满足需求

　　　　ii.框架性能是否达标

　　　　iii.框架是否持续中

　　　　iv.文档和例子是否充足

　　　　v.是否有技术支持

　　　　vi.版权和收费

　　　　vii.轻量级or重量级

　　2.4多浏览器测试

　　　　一定要多测试、早测试。不过IE已经渐趋标准了，不用费以前那么大精力。

• IE7、8、9的兼容
• HTML5的兼容

　　　　各浏览器对新标准的支持步调不一致，对于html5的新特性，必须明月浏览器的支持范围，考虑对于不支持的浏览器的平稳降级，为了把浏览器的兼容问题讲到最小，可以遵循以下几个原则：

　　　　i.编写高质量、标准的HTML

　　　　　　高质量和标准的html可以最大范围的在各浏览器上正常显示和保持一致性，这里可以使用一些标准验证工具，如W3C提供的HTML和CSS的标准验证工具，检查js代码规范的JSLint

　　　　ii.明确支持的浏览器范围

　　　　　　这里有四个标准，可供制定浏览器支持情况：

　　　　　　a.外观和交互符合设计要求

　　　　　　b.外观上有所差异，但不影响整体的效果

　　　　　　c.外观和设计不符合，但不影响页面的交互

　　　　　　d.完全不支持设计的功能

 　　　　　　浏览器要有所选择地测试，如果相同内核的选择一个即可，IE兼容问题可以使用IE Tester工具。

　　　　iii.尽量采用没用兼容问题的代码

　　　　iv.HTML 5新特性的平稳降级

　　　　　　包括新标签的兼容、CSS3的兼容，以及新增的API的兼容。

　　　　　　这里推荐一些工具：

　　　　　　　　html5shiv：让浏览器不支持的新标签可以正常显示

　　　　　　　　modernizr：封装了对HTML5新特性的判断

　　　　　　　　Can I See：了解新特性的浏览器兼容情况

　　2.5 Web前端开发环境及调试

　　　　IDE：idea、Aptana Studo和WebStorm

　　　　调试：IE Dev Toolbar，Chrome Developer Tools，Firefox Firebug，Safari Develop

　　2.6Web前端性能分析

　　　　工具：YSlow，PageSpeed及浏览器自带的工具。YSlow是Yahoo发布的一款基于FireFox的插件，选择了雅虎公司性能团队制定的34条提高Web性能军规中的23条做性能分析（https://developer.yahoo.com/performance/rules.html）。　　

　　2.7Web前端代码和资源压缩与合并　　

• 加快网络传输，可以采取CDN分发，缓存等方式，但也压缩代码和资源文件是最简单有效的手段之一：
• 服务端开启gzip压缩，主流Web服务器（IIS，Nginx，Apache，Lighttpd等）和主流浏览器都支持　　
• js代码压缩，相关工具有UnlifyJs，YUI Compressor，Closure Compiler等
• css代码压缩，相关工具有CSS Compressor，YUI Compressor等
• HTML压缩，相关工具有HTMLCompressor
• 图片资源压缩，相关工具有TinuP，JPEGmini，ImageOptim

　　2.8前端代码命名和格式规范

• 标签用小写
• 给所有关键元素定义id和class，id名称关键词用下划线_连接，class关键词用中划线-连接
• class用作js调用的钩子，可在名称前加上js前缀
• 给HTML代码添加必要的注释
• js局部变量命名采用首字母小写，其他单词首字母大写的方式
• js编写对象编程时，共有借口的命名为首字母大写，私有接口的命名为首字母小写
• jQuery使用时，jQuery类型变量添加“$”作为前缀

　   ......