前端代码规范梳理

代码规范梳理(前端)

为协调协同开发,尽量保持代码整体的一致性以及可读性以及可维护性,根据经验对相关项目进行梳理
Html篇

  1. html文件必须申明:<!DOCTYPE html>
  2. 文档编码如无特殊要求,使用<meta charset="UTF-8">
  3. 根据相应要求,引入其他meta 比如:
<!-- 声明文档的兼容模式:指示IE以目前可用的最高模式显示内容-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
  1. 使用link引入外部css文件到页面的head中。
    注意:一般我们不适用@import来引入外部css文件。

  2. 使用script将js文件引入,并置于body底部,这时js文件会最后加载,html会最先加载,用户体验会更好。(注意:并不是所有的js文件都要放置于body的底部,如当我们需要使用js文件动态修改meta元素内容时,需要将js文件引入到head标签中。
    参考: https://blog.csdn.net/qizhiqq/article/details/52584620
    放在底部哪里?
    许多人认为只要放在底部了,无论是“body标签闭合之前”还是在“body标签闭合之后”都是一样的,其实还是有差别的,因为从HTML2.0起放在“body标签闭合之后”就是不合标准的。之所以但是浏览器却不会报错,是因为如果在“body标签闭合之后”后再出现script或任何元素的开始标签,都是parse error,浏览器会忽略之前的</body>,即视作仍旧在body内。
    所以实际效果和写在“body标签闭合之前”之前是没有区别的。
    所以,只要是让浏览器做了多余的事都是不好的,虽然差别细微,但是咱们还是按照标准来,放在“body标签闭合之前”。

  3. 语义化编写代码,即在浏览器兼容的前提下劲量使用语义化的标签(如果需要兼容ie参考:https://blog.csdn.net/m838115837/article/details/49535933)

  4. 一个标签的className不要过多,使用className进行辅助语义化模块划分,class,id命名使用小驼峰,中间练接'-' 表示层级;页面id不能重复,尽量避免使用id;

  5. 元素嵌套,以正确的嵌套规则嵌套,尽量避免内联元素嵌套块状元素;

  6. 结构上如果可以并列书写,就不要嵌套。
    如果可以写成<div></div><div></div>那么就不要写成<div><div></div></div>

  7. 元素没有值的属性必须使用自己的名称做为值(checked、disabled、readonly、selected等等

  8. 正确闭合标签且必须闭合。

  9. 相应注释,模块注释,说明等需要的注释写在相应的代码的上方

  10. 页面实现完成提交前记得代码格式化

css篇
通常,一个项目我们只引用一个CSS,但是对于较大的项目,我们需要把CSS文件进行分类。
我们按照CSS的性质和用途,将CSS文件分成“基础样式”、“模块(公共)样式”,并以此顺序引用(按需求决定是否添加版本号)。

<!--base:基础样式,用来浏览器默认样式reset,网站基类样式设置-->
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/common.css">
  1. 使用类选择器,放弃ID选择器
  2. 分类的命名方法:使用语义化命名,层级已'-'链接,禁止无脑层级嵌套;
  3. 可以简写的命名简写比如:btn(要让人看的懂哦☺)
<!--以个人信息模块为例,此模块中包含一个个人信息展示,以及相应新增按钮-->
.btn-submit{  //功能类命名
    
}
.btn-close {
    
}

.infoWrap {  //模块小驼峰命名
    xxxx:xxx;
}
.infoWrap-intro{  //以横杠的形式表示层级
    
}
.parent .child {  //不推荐,层级竟可能的少,不乱用.尽量写在第一层级上少量标签元素的也可以不去单独追加className,而使用嵌套
    
}

  1. 颜色代码书写:有些颜色代码是可以缩写的,我们就尽量缩写吧,提高用户体验为主 color:#ffffff --> color:#fff; color:#eebbcc -->color:#ebc;颜色代码小写
  2. css 书写顺序:
    • 位置属性(position, top, right, z-index, display, float等);
    • 大小(width, height, padding, margin);
    • 文字系列(font, line-height, letter-spacing, color- text-align等);
    • 背景(background, border等);
    • 其他(animation, transition等)

备注:以大模块做前缀,可以很好的避免样式污染,以及提高语义化

JavaScript 篇

  1. 避免全局命名空间污染;es6开发使用相应的const,let;
  2. 使用var 定义时,以闭包包裹
(function(window){
  'use strict';
  var x = 10,y = 100;
 
})(window);

  1. 尽量以对象形式分割模块
  2. js命名:
    • 命名:整体以小驼峰方式命名
    • 私有(保护)成员:必须以下划线_开头
    • 常量名:必须使用全部大写的下划线命名法,如IS_DEBUG_ENABLED
    • 布尔变量:boolean类型的应当使用is、has等起头,表示其类型,如:isClose,hasOpen
    • 方法名:'fn'前缀,如fnCheckIsUpdate,使用语义化简介的英文描述方法,函数名应当用动宾短语
    • 类名命名:类名应当用名词,如:const productList =[]; const customerInfo ={};let isNewCustomer =false;单独的变量一般统合到一个对象里,避免申明过多的变量
    • 代码注释:注释要尽量简单,清晰明了。着重注释的意思,对不太直观的部分进行注解:
  3. 代码书写:变量必须先申明后调用,代码整体风格,尽量的变量申明在文件的开头(个别变量可能编写函数时才用到1两次,可以写在调用函数上方处), 文件的尾部书写自运行函数;中间定义各种函数;
  4. 函数的申明:函数以函数申明的方式进行申明: function fnName(fnPrama){},尽量避免用函数表达式进行申明:var fnName = function(){}

UI 篇

  1. 设定web/app的基色,内部颜色保持尽量统一,功能颜色划分准确,颜色类尽量别超过5个;
  2. 出基元件的类型,样式,颜色等标注,包括但不局限:表单,搜索框,按钮,列表,字体颜色,通用字体大小等等
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,843评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,538评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,187评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,264评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,289评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,231评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,116评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,945评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,367评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,581评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,754评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,458评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,068评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,692评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,842评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,797评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,654评论 2 354

推荐阅读更多精彩内容

  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,474评论 1 19
  • 前端开发面试题 <a name='preface'>前言</a> 只看问题点这里 看全部问题和答案点这里 本文由我...
    自you是敏感词阅读 760评论 0 3
  • 持续的异常低温让人有点猝不及防,甚至连早上起床都需要勇气,好在每日阳光还算猛烈,期待着阳光的出现并在其下享受着沐浴...
    极度贫血阅读 267评论 0 0
  • 从学习C开始,走进程序的的世界。这个世界是由数据与逻辑组成的,程序是为了实现自动化处理数据。 之前C中的思想是...
    老图书馆二楼阅读 143评论 0 0
  • 这个世界本来就不公平,每个人随时都有可能处在不公平的境况之中,但是很多人仍然能够在不公平之中生活着,就是因为他们找...
    D038_礼恩_佛山阅读 409评论 0 1