浅谈前端开发规范

故事扮演 提交于 2020-04-07 19:56:36

结构 样式 行为分离 模板只包含html文件,模板的书写顺序
相应的命名规则

html:语义化
css:类名以功能或内容命名

样式复用 
最好少于三级 
在没有必要的情况下避免元素选择器叠加 Class、ID 使用  
属行的书写顺序
性能

js:避免重复查找dom

三元操作符电梯if条件语句
二元布尔操作符
样式写在一起
变量声明,保存在一个变量里,避免多次查找dom
jQuery链式写法

1、获取DOM对象后缓存到js变量中,避免重复查找DOM数
2、适配手机不同分辨率 最好用CSS3提供的media query(如果涉及到计算还是需要用到js)
3、jQuery中css()方法可以接受多个样式不需要每个样式都写一遍 $('body').css({'width':'1px','height':'1px'})
4、ajax提交都需要做失败处理
5、if..else中存在相同的代码,应该写在ifelse外
6、重复的代码封装成函数,方便复用
7、为了不污染全局作用域,建议将变量放在匿名函数中(注意某些情况需要在全局域中定义变量)
8、建议在定义变量时可一次性定义改域下所有要用到的变量,不用重复定义
9、$('.example').css('display','block')可以写成$('.example').show();$('.example').css('display','none')可以写成$('.example').hide();注意show()和hide()的使用方法。
10、使用链式写法,jQuery的一大特点,就是允许使用链式写法
$('div').find('h3').eq(2).html('Hello')采用链式写法时,jQuery自动缓存每一步的结果,因此比非链式写法要快。根据测试,链式写法比(不使用缓存的)非链式写法,大约快了25%。

本文转载于:猿2048→https://www.mk2048.com/blog/blog.php?id=hi0bkb0i0cb

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!