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

一、图片观看：

二、文字描述：

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>
<meta charset =“utf-8”>
<meta http-equiv =“X-UA-Compatible”content =“IE = edge，chrome = 1”>
<meta name =“keywords”content =“your keywords”>
<meta name =“description”content =“your描述“>
<meta name =”author“content =”author，email address“>
<title> Style Guide </ title>
</ head>
3.5。支持移动端设备优化，设置可见区域的宽度和初始缩放比例。
<meta name =“viewport”content =“width = device-width，initial-scale = 1.0“>
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：“http://assets.fnord.com”; background-image：url（“@ {base-url} /images/bg.png”）;

4.性能优化：
4.1。慎重选择高消耗的样式（高消耗属性在绘制前需要浏览器进行大量计算）：阴影box-shadows，圆角border-radius，透明度transparenc，过渡转换，滤镜样式CSS filters 。
http://www.cnblogs.com/zhenmingliu/archive/2012/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（'// apis.google.com/js/plusone.js'）;
负载（ '// platform.twitter.com/widgets.js'）;
负载（ '// s.widgetsite.com/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;
var LOC = WIN [“location”];
var NA = WIN.navigator;
var UA = NA.userAgent.toLowerCase（）;
功能测试（needle）{
return needle.test（UA）;
}
WIN中的var IsTouch =“ontouchend”;
var IsAndroid = test（/ android | htc /）|| /linux/i.test(NA.platform +“”）;
var IsIPad =！IsAndroid && test（/ ipad /）;
var IsIPhone =！IsAndroid && test（/ ipod | iphone /）;
var IsIOS = IsIPad || IsIPhone;
var IsWinPhone = test（/ windows phone /）;
var IsWebapp = !! NA [“standalone”];
var IsXiaoMi = IsAndroid && test（/ mi \ s + /）;
var IsUC = test（/ ucbrowser /）;
var IsWeixin = test（/ micromessenger /）;
var IsBaiduBrowser = test（/ baidubrowser /）;
var IsChrome = !! WIN [“chrome”];

var IsPC =！IsAndroid &&！IsIOS &&！IsWinPhone;
var IsHTC = IsAndroid && test（/ htc \ s + /）;
var IsBaiduWallet = test（/ baiduwallet /）;
4.获取滚动条值：PC端滚动条的值是通过document.scrollTop和document.scrollLeft获得，但在iOS中并没有滚动条的概念，所以只能通过windows.scroll获取，同时也能兼容Android。
window.scrollY;
window.scrollX;
5.清除输入框内阴影：在iOS上，输入框默认有内部阴影，但无法使用box-shadow来清除，如果不需要阴影，可以这样操作;
输入，textarea {
border：0; / *方法1 * /
-webkit-appearance：none; / *方法2 * /
}
6.Meta相关：页面窗口自动调整到设备宽度，并禁止用户缩放页面;
<meta name =“viewport”content =“width = device-width，initial-scale = 1.0，minimum-scale = 1.0，maximum-scale = 1.0，user-scalable = no”/>
7.电话号码识别：iOS Safari （Android或其他浏览器不会）会自动识别看起来像电话号码的数字，将其处理为电话号码链接;
<！ - 关闭电话号码识别： - >
<meta name =“format-detection”content =“telephone = no”/>
<！ - 开启电话功能： - >
<a href =“tel：123456” > 123456 </a>
<！ - 开启短信功能： - >
<a href="sms:123456"> 123456 </a>
8.邮箱地址识别：在Android（iOS不会）上，浏览器会自动识别看起来像邮箱地址的字符串，不论有你没有加上邮箱链接，当你在这个字符串上长按，会弹出发邮件的提示。
< -关闭邮箱地址识别： - >
< meta name =“format-detection”content =“email = no”/>

9.指定iOS的safari顶端状态条的样式：<meta name =“apple-mobile-web-app-status-bar-style”content =“default / black / black-translucent”/>

本文档仅供初学者或首次开发提供参考。如代解释不清晰之处，请见谅。如果有更好的前端开发代码规范经验，欢迎指点一二。谢谢观看!!!

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

[翻译Joel On Software]Joel测试：12步写出更高质量代码/The Joel Test: 12 Steps to Better Code
Joel on Software The Joel Test: 12 Steps to Better Code Joel测试:12步写出更高质量代码 byJoel Spolsky Wednesday, ...
如何写出更好的代码（文末有福利）
女主宣言我们在过去的几期推送里已经给大家介绍了笔者根据多年研发经验总结出来的编码规范和 git 等实用工具的运用场景,今天咱们就来继续聊聊项目开发过程的诸多方法论.本文最先发布于 7rule,转载已 ...
【整洁之道】如何写出更整洁的代码(上)
如何写出更整洁的代码代码整洁之道不是银弹,不会立竿见影的带来收益. 没有任何犀利的武功招式,只有一些我个人异常推崇的代码整洁之道的内功心法.它不会直接有效的提高你写代码的能力与速度,但是对于程序员的 ...
程序员如何写出更好的代码
Martin Thompson是Java Champion称号获得者,同时也是一名高性能计算科学家.他说,为了写出更好的代码,程序员需要运用基本设计原则,阅读已有代码.在QCon London 201 ...
两大方案，只为写出更安全的代码！
[CSDN 编者按]安全漏洞的源头是开发,只有当开发人员写出了包含安全漏洞的代码,黑客才有机可乘.因此,如何保障开发写出更"安全"的代码,是安全防护工作中最重要的一环. 作者 | ...
如何写出更优雅的代码——编程范式简述
<如何写出更优雅的代码--编程范式简述>源站链接,阅读体检更佳! 什么是程序? 1976年,瑞士计算机科学家,Algol W,Modula,Oberon 和 Pascal 语言的设计师 N ...
写出更易懂的代码(一)
今天周日,外面天气不好,舍友出去跟MM约会了,我一个人独自在家,逛逛园子. 发现一篇好文<javascript 杂谈之哪种写法你更喜欢?>,其中有一个代码,是模仿jQuery写法的: 虽然 ...
jvm大局观之内存管理篇: 理解jvm安全点,写出更高效的代码
jvm大局观之内存管理篇: 理解jvm安全点,写出更高效的代码 - 知乎前言本篇是java内存区域管理系列教程之一 - 在得知GC Root的组成之后,如何在垃圾回收发生的时刻,找到GC Root ...
python优雅代码大全_10个Python技巧帮你写出更优雅的代码
阅读本文需要 2 分钟,公众号 somenzz ,欢迎学习 Python 的朋友订阅. 现在写代码的门槛非常低了,少儿都开始编程了,但从代码的风格一眼看出编码水平.是的,写代码是容易的,写出易读的代码 ...
使用这45个小技巧，帮助你写出更优雅的代码
前言不知道大家有没有经历过维护一个已经离职的人的代码的痛苦,一个方法写老长,还有很多的if else ,根本无法阅读,更不知道代码背后的含义,最重要的是没有人可以问,此时只能心里默默地问候这个留坑的 ...

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

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

最新文章

热门文章