编码格式规范你注重过吗?稀烂的代码格式你敢给别人看?

如果有对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请求次数等

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180628A1YB8A00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券