如果有对web前端感兴趣web前端程序员,可来我们的web前端技术学习群的哦:58422, 6069里面免费送web前端的视频教程噢!
论文件命名的重要性
在开发项目中,良好的命名规范和规整的格式可以让代码看起来更整洁,它同样也体现了开发者良好的职业素养。对于文件的命名和代码的组织并没有绝对的形式,但是无论是什么代码,它都要遵循一个原则:在同一个项目中代码的组织结构一定要清晰,文件的命名规则必须统一并且命名要有意义。
HTML命名规范以及格式规范
所有的标签名和属性都应该为小写,属性值最好使用双引号闭合
对于id和class的命名需要根据语义和DOM树的层级关系来定义合适的名称,名称中全部使用小写,id名称中的关键词使用下划线_连接,class中的关键词使用中划线-连接,从而最大限度的保证了命名的不重复。如果某个标签的class只是为了作为js调用的钩子,可以在名称中加入js-前缀
对于层级中的class类命名,可以使用连缀的形式,不过连缀最长不要超过三个。如下:
CSS命名规范以及格式规范
在CSS中设置类样式时,类名和,即使只有一行
在JS代码中,如果注释未占有多行,优先考虑使用//而不是/**/。注释应该单独占用一行,而不是写在和代码相同一行的右边
前端代码重构概念
代码重构指的是在不改变代码外部行为的情况下进行源代码修改。重构之前最主要考虑的问题是如何才能保证外部行为不改变
重构的过程
删除无用代码以精简代码
前端代码规范化:包括前面说的html、css和js的命名规范和格式规范,还有更改标准已不推荐的标签,比如等,该为由css控制的等;统一标签的命名,以便于模块化划分;在js中集中定义局部变量,并把部分全局变量转变为局部变量,缩小变量的作用域
整理基础类库:网站初期为了加快开发进度引入了多个框架,其中有些框架可能重复的功能较多,比如ExtJS和jQuery,这是重构的内容主要是统一UI插件的使用,统一基础方法的使用
前端代码模块化:主要是将前端的js和css代码进行功能划分,以便于后期维护和更新
提高页面加载性能:将部分不影响页面展示的js文件延迟到页面加载后加载(置于body中的内容后面);页面中的部分图片进行延迟加载;给静态文件设置缓存;通过CSS Sprite技术合并页面背景图片,减少http请求次数等
领取专属 10元无门槛券
私享最新 技术干货