200字范文 > 前端代码开发规范。web开发规范。web开发注意事项。前端开发如何写出更规范的代码

前端代码开发规范。web开发规范。web开发注意事项。前端开发如何写出更规范的代码

时间：2021-12-01 23:25:40

一、图片观看：

二、文字描述：

1，web开发基本原则：

1.结构html，样式css，行为js：三者要分离，尽量确保文档和模板只包含HTML结构，样式都放到样式表里，行为都放到脚本里;

2.缩进：统一缩进方式：整体tab /整体空格;

3.文件编码：在HTML中指定编码<meta charset =“utf-8”>，无需使用@charset（CSS字符集指定样式表的编码）;

4。 html元素一律使用小写字母;

5.外链资源：省略（图片及其它媒体资源）URL中的http / https协议，使URL成为相对地址，它协议（ftp等）的URL不省略;

6.统一注释：

html注释区分模块和区块内容;

CSS注释组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔;

JS注释区分单行和多行注释和文件注释在告诉不熟悉这段代码的读者这个文件中包含哪些东西应该提供文件的大体内容，它的作者，依赖关系和兼容性信息）。

_____________________________________________________________________________________

2，HTML部分：

1.通用约定：

1.1 。标签：单标签无需闭合，双标签必须闭合;尽量减少标签数和复杂度;

1.2.class和id：class应该功能或内容命名，不已表现形式命名;单词过时时，应注意书写格式; id作为选择器唯一表示符（钩子机制），同时避免创建无样式信息的类;

1.3属性编写顺序：ID>类>名称>数据- ×××>的src /为/类型/ HREF>标题/ ALT> aria-×××/作用;

1.4。尽量使用双引号定义元素属性;

1.5。元素嵌套：

<a>元素不要嵌套<a>元素，也不要嵌套<div>元素;

严格嵌套模式下：<a>元素不可以嵌套交互式元素，<a> / <button> / <select>等;

<素>不可嵌套块级元素，<div> / <h1>〜<h6> / <p> / <ul> /

1.6 ; <form>等; 1.6。布尔值属性：disabled，checked，selected等属性不用设置值。<input type =“text”disabled>;

2.标签语义化：没有CSS的HTML是一个语义系统而不是UI系统。此外语义化的HTML结构，有助于机器（搜索引擎）理解，另一方面多人协作时，能迅速了解开发者意图;

3.HEAD：

3.1。文档类型 - 标准模式声明：<！DOCTYPE html>能够确保在每个浏览器中拥有一致的表现;

3.2。语言属性：中文-lang =“zh-Hans”，简体中文 - LANG =”

3.3.IE兼容模式：<meta http-equiv =“X-UA-Compatible”content =“IE = edge，chrome = 1”>;

3.4.SEO优化：

<head>

<title> Style Guide </ title>

</ head>

3.5。支持移动端设备优化，设置可见区域的宽度和初始缩放比例。

3.6.iOS图标处理：

apple-touch-icon图片自动处理成圆角和高光等效果;

苹果触摸图标 - 预组合禁止系统自动添加效果，直接显示设计原图;

_______________________________________________________________________________________

3，CSS部分：

1.通用约定：

1.1。制定一致的注释规范：组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔;

1.2.class和id：使用语义通用的命名方式;避免选择器嵌套层级过多;避免选择器和类，ID叠加使用;使用连字符 - 作为ID，类名称界定符，不要驼峰命名法和下划线;

1.3。相关属性声明定义定位>盒模型盒模型>字体样式Typographic>视觉颜色

样式Visual>其它样式; 1.4.url（）引用使用：属性选择符，属性值使用双引号;

1.5。媒体查询（Media query）的位置：将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。1.6

。不要使用@import ，与<链路>相比，@进口要慢很多，不光增加额外的请求数，还会导致不可预料的问题。

替代办法：通过Sass或Less类似的CSS预处理器将多个CSS文件编译为一个文件;其他CSS文件合并工具;

链接的样式顺序：a：link - > a：visited - > a：hover - > a：活跃（LoVeHAte）

2。

2.1。组件组件：从组件的角度思考，将网站的模块都作为一个独立的组件

。2.2。组件命名命名组件：组件最少以两个单词命名，通过 - 分离，点赞按钮（.like-button） ;

2.3。元素Elements：Elements是Components中的元素;

2.4。元素命名Naming elements：Elements的类名应尽可能仅有一个单词;

2.5。多个单词On multiple words：对于倘若需要两个或以上单词表达的元素类名，不应使用中划线和下划线连接，应直接 - 连接，中划线比下划线更容易输出;

2.6。避免标签选择器避免标签选择器：任何时候尽可能使用classnames。标签选择器在使用上没有问题，但是其性能上稍弱，并且表意不

明确; 2.7.layout（布局）之间避免定位属性避免定位属性：组件应该在不同的上下文中都可以复用，所以应避免设置以下属性，定位（位置，顶部，左侧，右侧，底部），浮动（浮动，清除），边距（余量），尺寸（宽度，高度）*;

2.8.layout（布局）之固定尺寸固定尺寸：头像和标志这些元素应该设置固定尺寸（宽度，高度...）;

2.9.layout（布局）之在父元素中设置定位：若若需要为组件设置定位，应将在组件的上下文（父元素）中进行处理

。2.10.layout（布局）之间避免过分嵌套避免过度嵌套：当出现多个嵌套的时候容易失去控制，应保持不超过一个嵌套

。3.Less规范：

3.1。代码按以下顺序组织：@import >>变量声明>>样式声明;

3.2。@ import语句文件引用：@import语句引用的文需要写在一对引号内，.less后缀不得省略。引号使用'和'均可，但在同一项目内需统一

。3.3。less-mixin ）：mixin方法：一堆属性从一个规则集到另一个规则集。less

，sass这些css预处理语言中的混合，可以理解成自定义了一段代码，后面可以用@include调用，如设置一个（默认宽高比的混合）

。// scss

@mixin box-size（$ width：100px，$ height：100px）{

width：$ width;

height：$ height;

} / *类似带参数数量封装* /

.demo {

@include box-size;

}

.demo2 {

@include box-size（200px，300px）;

}

//编译之后

/ * css * /

.demo {

width：100px;

height：100px;

}

.demo2 {

width：200px;

height：300px;

}

3.4。避免嵌套层级过多：将嵌套深度限制在2级。对于超过3级的嵌套，给予重新评估;

3.5。字符串插入值：变量可以用类似ruby和php的方式嵌入到字符串中，像@ {name}这样的结构：@ base-url：“”; background-image：url（“@ {base-url} /images/bg.png”）;

4.性能优化：

4.1。慎重选择高消耗的样式（高消耗属性在绘制前需要浏览器进行大量计算）：阴影box-shadows，圆角border-radius，透明度transparenc，过渡转换，滤镜样式CSS filters 。

/zhenmingliu/archive//05/05/2484720.html滤波器在CSS用的效果。

4.2。避免过分重排（当发生重排的时候，浏览器需要重新计算布局位置与大小）：常见重排元素，宽度，高度，填充，边距，显示，边框宽度，位置，顶部，左，右，底部，字体大小，浮动，文本对齐，溢出y，字体-

正确使用Display的属性（Display属性会影响页面的渲染）：display：inline后不应该再使用width，height，margin，padding以及float; display：inline-block后不应该再使用float; display：block后不应该再使用vertical-alig n; display：table- *后不应该再使用margin或者float;

4.4。不滥用Float：Float在渲染时计算量比较大，尽量减少使用;

4.5。多利用硬件能力，如通过3D变形开启GPU加速：一般在Chrome中，3D或透视变换（perspective transform）CSS属性和对不透明进行CSS动画会创建新的图层，在硬件加速渲染通道的优化下，GPU完成3D变形等操作后，将图层进行复合操作（Compesite Layers），从而避免触发浏览器大面积重绘和重选。4.6。

提升CSS选择器性能：1，避免使用通用选择器; 2，避免使用标签或类选择器限制ID选择器; 3，避免使用标签限制类选择器; 4，避免使用多层标签选择器。使用类选择器替换，减少css查找; 5，避免使用子选择器; 6，使用继承;

___________________________________________________________________________________________

4，js部分：

1.通用约定：

1.1。注释原则：尽量提高代码本身的清晰性，可读性（如无必要，勿增注释）;

合理的注释，空行排版等，可以让代码更易阅读，更具美感（如有必，尽量详尽）;

1.2。函数/方法注释：1必须包含函数说明，有参数和返回值时必须使用注释标识; 2参数和返回值注释必须包含类型信息和说明; 3。当函数是内部函数，外部不可访问时，可以使用@inner标识;

1.3。文件注释：文件注释用于告知不熟悉这段代码的读者这个文件中包含哪些东西。应该提供文件的大体内容，它的作者，依赖关系和兼容性信息。\

1.4。命名之变量，函数及函数参数：骆驼式命名法（Camel-Case）;三种编程命名规范（匈牙利命名法（下划线），驼峰式命名法（大驼峰），帕斯卡命名法），var loadingModules = {};

1.5。命名之私有属性，变量和方法：以下划线_开头，var _privateMethod = {};

1.6。命名之常量：使用全部字母大写，单词间下划线分隔的命名方式，var HTML_ENTITY = {};

1.7。命名之类：使用使用Pascal命名法（大驼峰），函数stringFormat（source）{};

1.8。类的方法/属性：Camel命名法（小驼峰），TextNode.prototype.clone = function（）{ };

1.9。枚举变量：使用Pascal命名法，var TargetState = {READING：1，READED：2，};

1.10。枚举的属性：使用全部字母大写，单词间下划线分隔的命名方式，var TargetState = {READING：1，READED：2，};

1.11命名语法：

类名：使用名词，函数Engine（options）{};函数名：使用动宾宾语，函数getStyle（element）{};布尔类型变量：is或has开头，var hasMoreCommands = false; Promise对象：用动宾短语的进行时表达，var hasMoreCommands = false;

1.12。接口命名规范：可读性强，见名知意;尽量与jquery已有的冲突;尽量写全，少用缩写除非是jquery社区提前约定好的;

1.13.true和false布尔表达式：类型检测优先使用typeof。

对象类型检测使用instanceof。null

或undefined的检测使用==

null。false = nulll / undefined /“”/ 0; 真= “0”/ [] / {};

1.14。不要在Array中使用For循环：for-in循环只用于object / map / hash的遍历，对Array循环有时会出错。因为它并不是从0到length - 1进行遍历，而是所有出现在对象及其原型链的键值。1.15

。二元和三元操作符：操作符始终写在前一行，以免分号的隐式插入产生预想不到的问题。

var z = a？

moreComplicatedB：

moreComplicatedC;

1.16。三元操作符用于替代if条件判断语句.return val？foo（）：bar（）;

1.17。&&和|| ：二元布尔操作符是可短路的，只有在必要时才会计算到最后一项。2.

性能优化：

2.1。避免不必要的DOM操作：浏览器遍历DOM元素的代价是昂贵的。最简单优化DOM树查询的方案是，当一个元素出现多次时，将它保存在一个变量中，就避免多次查询DOM树了

。var myList =“”;

var myListHTML = document.getElementById（“myList”）。innerHTML;

for（var i = 0; i <100; i ++）{

myList + =“<span>”+ i +“</ span>”;

}

myListHTML = myList;

2.2。

var arr = new Array（1000），len，i;

对于（i = 0，len = arr.length; i <len; i ++）{};

2.3。异步加载第三方内容：当你无法保证嵌入第三方内容比如Youtube视频或者一个like / tweet按钮可以正常工作的时候，你需要考虑用异步加载这些代码，避免阻塞整个页面加载。

（函数（）{

VAR脚本，

脚本= document.getElementsByTagName（ '脚本'）[0];

功能负载（URL）{

脚本=使用document.createElement （'script'）;

script.async = true;

script.src = url;

scripts.parentNode.insertBefore（script，scripts）;

}

load（'// /js/plusone.js'）;

负载（ '// /widgets.js'）;

负载（ '// /widget.js'）;

}（））;

2.4。避免使用jQuery实现动画：禁止使用slideUp / Down（）fadeIn / fadeOut（）等方法;尽量不使用animate（）方法;

_______________________________________________________________________________

5，移动端部分优化：

1.click的300ms延迟响应：点击300ms延迟是由双击缩放（双击缩放）所导致的，由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并且不能立刻判断用户是确实要打开这个链接，还是想要进行因此，移动端浏览器就等待300毫秒，以判断用户是否再次点击了屏幕。随着响应式网页逐渐增加，用户使用双击缩小机会减少，这300ms的延迟就更不可接受了。解决移动端浏览器300毫秒点击延迟问题所开发的一个轻量级的库FastClick就是很好的选择.FastClick在检测到touchend事件的时候，会通过DOM自定义事件立即触发一个模拟点击事件，并把浏览器在300毫秒之后真正触发的单击事件阻止掉。

快点击的使用方法非常简单，在窗口加载事件之后，在<body>上调用FastClick.attach（）即可。window.addEventListener

（“load”，function（）{

FastClick.attach（document.body）;

}，false）;

2.快速回滚滚动：如果想要为某个元素拥有本地般的滚动效果，可以这样操作，

.element {

overflow：auto; / * auto | 滚动* /

-webkit-overflow-scrolling：touch;

}

除了iScroll之外，还有一个更加强大的滚动插件组队，探索（是免费且最现代的移动触摸滑块http://idangero.us/swiper/#.VfaVk52qqko ），支持3D和内置滚动条等。

3 。设备检测：

var WIN = window;