前端项目开发中重点注意事项
后面会以此补充个人的理解:
1、 灵活运用对象思想;
2、 开发中经常会用的绑定事件例如
一种解绑事件
$(".prjnumLink").off("click").on("click",function(e){
priceClickRow = viewModel.gridObj.getFocusRow("get");
var prj_class_id = priceClickRow.prj_class_id;
var classTree = $.fn.zTree.getZTreeObj("classTree"), tree_node;
tree_node = classTree.getNodeByParam("prj_class_id", prj_class_id, null);
classTree.selectNode(tree_node, true, true);
$.fn.zTree.getZTreeObj("classTree").setting.callback.onClick(null,"classTree",tree_node);
});
另一种解绑事件 $('#multiAgencyDlg .nav').unbind();
绑定之后要注意需要解绑不?做好解决方式;
3、是否重设了默认的样式?应该设默认样式
某些属性如margin、padding等,不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。
4、float元素的注意事项
(1)float元素的父元素不能指定clear属性
MacIE下如果对float的元素的父元素使用clear属性,周围的float元素布局就会混乱。这是MacIE的著名的bug,倘若不知道就会走弯路。
(2)float元素务必指定width属性
很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何,一定要为其指定width属性。
(3)float元素不能指定margin和padding等属性
IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。
(4)float元素的宽度之和要小于100%
如果float元素的宽度之和正好是100%,某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。
5、图片有几点需要注意:
(1) 将背景图合成一张图片将颜色相近的图标放在一起
(2)页面中直接引用的图片尽量少的缩放,这非常影响页面的渲染速度
(3)尽量少的使用前端技术控制图像显示大小
(4)在知道图片宽高的情况下使用 中的宽高,减少页面reflow造成的速度损耗
(5)静态页面一定要小,建议存成png8格式
(6)我们在使用背景图做图标的时候通常会在页面加一个钩子——img标签,img标签中的src中一定要写上存在的图片链接,人人网通常使用的是一像素的图片代替。如果你忽略了这个地址,页面上会有一个404的请求,在ie6下直接显示一个叉。
(7)如果你的工程已经上线,站内对静态文件会有一个缓存机制。在开发过程中,经常会遇到修改图片的情况,如果你修改后的图片不更改文件名或是在样式中更改引用该图片的版本号,对于用户而言,他们仍然看不到修改后的图片。所以,一定要记得修改文件名。
(8)避免过小的背景图平铺。
(9)尽量将图片上的文字提取出来用代码实现,便于图片的复用和日后文案的修改;
6 CSS的中的注意事项:
(1)class命名建议以功能而不是外观命名,不建议使用大小,避免起容易冲突的名字,防止样式被覆盖。
(2)CSS后代选择器性能:.a{} > .b .a{},查找匹配耗费cpu,代码复杂,优先级高,修改不方便。
(3)编码时尽可能使用缩写,如padding:top right bottom left; border-width:1px 0; border-color:#CEE1EE;color:#F05;
(4)使用CSS display:none隐藏的元素不会被搜索网站检索,会影响到网站的SEO,可以使用text-indent:-9999em;来达到同样效果。
(5)减少overflow清除浮动的使用,避免使用无意义的空标签清除浮动,通常站内使用clearfix来清除浮动。
(6)border:none;替换border:0;的写法;
(7)使用css3的属性来代替阴影或是圆角的图片;(浏览器兼容是个问题)浏览器的兼容问题是页面开发的永衡话题。结构的合理和简洁在很大程度上可以减少兼容性的bug,但是ie的特立独行又不可避免有一些兼容性问题。
7、Prop 定义应该尽量详细。
在你提交的代码中,prop 的定义应该尽量详细,至少需要指定其类型。
正例:
props: {
status: String
}
// 更好的做法!
props: {
status: {
type: String,
required: true,
validator: function (value) {
return [
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !== -1
}
}
}