web 前端开发最佳实践

2016-06-25

从职责上讲，前端的UI到后端的数据交互都属于前端开发范畴。

基本的计算机科学知识+HTML+CSS+Javascript+跨平台实践+前端框架+调试工具+Python/PHP/Node

W3C的语言规范、开发中使用的原则和解释引擎行为
格式规范同一
- 命名：HTML里的id、class 名， JavaScript里的函数和变量名
- 代码缩进
- 空格与空行的使用
- 代码的注释
高性能
- 网页的加载速度：后端处理请求时间、代码文件从服务器端传输时间、HTML与CSS组合展现的时间、JavaScript加载和运行时间。
- 页面的交互响应
高安全性

前端代码重构——提高前端代码的可维护性和性能：

删除无用代码：开发时可以注意精简代码和删除无用的代码
前端代码规范化： css 独立文件化、调整代码缩进层级、更改不推荐标签(如<center>、<b>等)、统一命名规则、js中集中定义局部变量、改全局变量为局部变量
整理基础类库、如UI插件的统一
前端代码模块化， css和js的模块化
提高页面加载性能，将不影响首页加载的js放到页面加载后加载、删除初始的隐藏区域，改为js动态加载、给静态文件设置缓存、使用css Sprite，合并压缩css和js代码后发布

Web 前端性能分析： YSlow、PageSpeed

代码和资源的合并与压缩：合并可以减少http请求，压缩可以减少请求的数据总量： gzip、js、css、图片，使用gulp等

添加必要的注释
HTML里 id使用下划线( _ )连接、class使用中划线( - )，如果class名称仅作为 js调用的钩子，可以在名称前添加js, 如”js-active”
css 名称取用html里的名称，如果多个选择器具有同样的样式声明，每个选择器应该独占一行

h1,
h2 {
	font-size: 12px;
}

禁用脚本时的自动跳转 <noscript><meta http-equiv="refresh" content="0"; url="/baidu.html?from=noscript"></noscript>

Blog