发表于： 2017-05-04 17:27:15
1 1012
完成的事情：
帮别人进行评审。。web开发规范
计划的事情：
如何打tag，进行评审，css3
问题：
0. 约定
a)小驼峰法：变量一般用小驼峰法标识，除第一个单词之外，其他单词首字母大写。如： myStudentCount
b)大驼峰法：相比小驼峰法，大驼峰法把第一个单词的首字母也大写了，常用于类名，构造函数名，属性，如LoginCtrl
c)使用webstorm自带的格式化命令来增强代码辨识度
1. HTML
a)文档类型声明：统一为<!DOCTYPE html> ； 编码统一为 <meta charset=“UTF-8”>
b)标签属性必须为小写字母，标签必须关闭，属性值由双引号包含
c)语义化html，如标题根据重要性用h（一个页面内只能有一个h1），段落标记用p，列表用ul或ol或dl，强调用strong
d)结构与样式分离，不使用行内样式<style>，而是用class来定义新的样式，css外联到<head></head>之间
2. CSS
2.1 基本规则
a)编码规范： http://zoomzhao.github.io/code-guide/
b)class命名：http://www.tuicool.com/articles/yqUjea
c)没有边框时不要写成border: 0; 写成border: none;类似情况同理
d)不重复定义可以继承的值。如颜色、字体等
e)尽量使用后代选择器，而不是子元素选择器和相邻选择器，后者不利于修改和维护，用元素选择器的直接打死；选择符不要超过四级；不用id选择器，为js预留出来
f)CSS3属性：transform、transition、animation、box-shadow、border-radius…，如果需要加入浏览器前缀，则按照 -webkit- / -moz- / -ms- / -o- / std的顺序进行添加，标准属性写在最后。
g)链接的样式请严格按照如下顺序添加： a:link -> a:visited -> a:hover -> a:active
2.2 项目实战
a)项目中引用的bs样式，要充分利用起来，不要自己吭哧吭哧写一堆，闷头写，什么都不管，只要自己的那个页面勉强能用就行；
公共样式要提取出来，如通用的文字、宽度、颜色、margin、padding等，参考bs的命名风格，如btn-blue、bg-fff，争取用最少的代码来实现效果
b)页面太多，class不好命名的话，可以在每个html页面最外层的的div 加个当前页面名字的class 例如 login，子元素class就用父元素的名字后面加上-，如login-header，选择符不要超过四级
c)列嵌套产生的问题：滚动条，注意清除15px，-15px的影响，一般是-15px，检查row
d)元素点击事件遮挡问题，浮动产生的元素布局凌乱点不到，比较难查，出了问题检查列嵌套
e)响应式768以下不准多次写多个阈值的media，很乱，在767时统一改掉能到320的
/* 1200px≤屏幕可见视口宽度*/
@media only screen and (min-width: 1200px) {}
/* 992px≤屏幕可见视口宽度<1200px */
@media only screen and (min-width: 992px) and (max-width: 1199px) {}
/* 768px≤屏幕可见视口宽度<992px */
@media only screen and (min-width: 768px) and (max-width: 991px) {}
/* 768px<屏幕可见视口宽度*/
@media only screen and (max-width: 767px) {}
f) 非后台不用table，用列嵌套模拟
g) 非背景图片不要写成背景
h) 写样式的时候要考虑到有些数据是动态绑定的，不要把样式写死，如用户状态“学习中”，虽然UI图上文字是竖排的三个字，也是一个整体，不要拆分成三个字，写成<p>进<p><p>行<p><p>中<p>
2.3 图片
a) 命名全部用小写英文字母或加上数字的组合，其中不得包含汉字、空格、特殊字符；尽量用易懂的词汇便于其他团队成员理解
b) 保证视觉效果的前提下选择最小的图片格式与质量，减少加载时间
c) 色彩丰富且没有透明半透明部分的图片，切图使用jpg；色彩较丰富且有透明半透明部分的图片，切图使用png24；有透明且色彩单一边缘清晰的图片，切图使用png8
d) html中重要图片加上alt属性
e) 页面相对稳定情况下，使用css sprite技术，集中小的背景图或图片，减少HTTP请求次数
3. 前端UI自检规范
UI自检规范
4. Javascript
4.1 基本规则
a) 每行代码结束必须有分号
b) 命名语义化，避免使用无意义的命名，变量和函数命名用小驼峰法
c) 避免随意使用全局变量
4.2 项目实战
a) 对于接口异常应有相应提示
b) 重复调用代码进行封装
4.2 Angular
4.2.1 注意
a) $time 替代 setTimeout、 $interval 替代 setInterval、$window 替代 window、$document 替代document、$http 替代$.ajax
b) 使用promise（$q）而非回调
c) 尽可能使用$resource 而非$http。更高的抽象避免冗余
d) 避免使用全局变量或函数，通过依赖注入解决所有依赖，减少bug
e) 不污染$scope，仅添加与视图相关的函数和变量
f) 不使用$前缀来命名变量属性和方法，这是留给angularJS的
g) 检查是否有多余的方法注入
4.2.2 控制器
a) 不在控制器里操作DOM，违背了关注点分离原则。应该通过指令操作DOM
b) 控制器是js构造函数，所以应该用大驼峰法命名
c) 控制器不应该在全局中定义
d) 使用controller as语法，优点：绑定的属性不属于$scope原型链。非必须由$scope完成的操作移除了$scope，为angular2做好准备。更接近于普通js构造函数。
e) 尽可能的精简控制器，将通用函数抽象为独立服务
f) Controller中只写主要逻辑，具体的判断由util和service负责
g) 需要跨控制器通讯时，通过方法引用或者$emit,$broadcast,$on方法。发送和广播消息应该限定在最小作用域
4.2.3 指令
a) 小驼峰法命名
b) link function 中使用scope而不是$scope。
c) DOM操作只通过指令完成
d) 可复用的组件创建独立作用域
e) 处理不可信的数据时，使用$sce
4.2.4 过滤器
a) 小驼峰法命名
b) 尽可能使过滤器精简
c) 过滤器中只做一件事，更复杂的操作可以用pipe串联多个过滤器
4.2.5 服务
a) 小驼峰法命名
b) 业务逻辑封装到服务中，业务逻辑抽象为服务作为model
c) 使用$cacheFactory进行回话级别的缓存，缓存网络请求或复杂运算的结果
4.2.6 模板
a) 使用ng-bind或者ng-cloak而非简单的{{}}以防止页面渲染的闪烁
b) 避免模板中使用复杂表达式
5. 拓展阅读
a) 各种奇妙的hack：http://browserhacks.com
b) HTML5兼容性查询：http://mobilehtml5.org
收获：
命名规范
返回列表
评论