前端开发文档整理

基本准则

符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度。

总规范

1.忽略(Omit)协议:如 background: url(http://www.google.com/images/example); 应该写background: url(//www.google.com/images/example);以方便http与https协议切换,除非必须使用某个协议

2.书写时利用IDE实现层次分明的缩进。tab键用四个空格代替。

因为在不同系统的编辑工具对tab解析不一样,windows下的tab键是占四个空格的位置,而在linux下会变成占八个空格的位置(除非你自己设定了tab键所占的位置长度)。

3.标签属性使用小写

4.尾部不要留有空格,以防diff

5.使用 UTF-8 (no BOM),文档中也加入 <meta charset=”utf-8″>

6.文件命名统一使用小写”.js”,同时推荐”-”而不是”_”

7.TODO(contact) 以及TODO: action item,不要使用@@

HTML 细化规范

1.使用html5的规范<!DOCTYPE html>

2.<img>标签默认缺省格式:<img src="xxx.png" alt="缺省时文字" /> 避免出现src="" 问题

3.<a>标签缺省格式:<a href="###" title="链接名称">xxx</> 注:target="_blank" 根据需求决定

4.<a>标签预留链接占位符使用###,参见:a标签占位符问题

5.书写链接地址时, 必须避免重定向,例如:href=”http://itaolun.com/”, 即须在URL地址后面加上“/”

6.所有标签需要符合XHTML标准闭合

7.一律统一标签结尾斜杠的书写形式:<br /> <hr /> 注意之间空格

8.避免使用已过时标签,如:<b> <u> <i> 而用 <strong> <em>等代替

9.使用data-xxx来添加自定义数据,如:<input data-xxx="yyy"/>

10.避免使用style="xxx:xxx;"的内联样式表

特殊符号使用参考HTML 符号实体

11.必须为含有描述性表单元素(input, textarea)添加label, 如<p>姓名: <input type=”text” id=”name” name=”name” /></p>须写成:<p><label for=”name”>姓名: </label><input type=”text” id=”name” /></p>

CSS 细化规范

1. 每个样式属性后加 ";"

方便压缩工具"断句"。

2. Class命名,采用” - “[减号连接符] 对class中的字母分隔:

用"-"隔开比使用驼峰是更加清晰。
产品线-产品-模块-子模块,命名的时候也可以使用这种方式

ID: 小驼峰式命名法 如:

firstName topBoxList footerCopyright

3. 空格的使用,以下规则执行:

.hotel-content {

font-weight: bold;

}

选择器与 { 之前要有空格
属性名的 : 后要有空格
属性名的 : 前(禁止)加空格

一个原因是美观,其次IE 6存在一个bug, bug

4. (推荐)属性的书写顺序, 举个例子:

/* 定位 */

display: block;

position: absolute;

left: 0;

top: 0;

/* 盒模型 */

width: 50px;

height: 50px;

margin: 10px;

border: 1px solid black;

/ *其他* /

color: #efefef;

定位相关, 常见的有:display position left top float 等
盒模型相关, 常见的有:width height margin padding border 等
其他属性
按照这样的顺序书写可见提升浏览器渲染dom的性能

简单举个例子,网页中的图片,如果没有设置width和height,在图片载入之前,他所占的空间为0,但是当他加载完毕之后,那块为0的空间突然被撑开了,这样会导致,他下面的元素重新排列和渲染,造成重绘(repaint)和回流(reflow)。it热门行业 我们在写css的时候,把元素的定位放在前头,首先让浏览器知道该元素是在文本流内还是外,具体在页面的哪个部位,接着让浏览器知道他们的宽度和高度,border等这些占用空间的属性,其他的属性都是在这个固定的区域内渲染的,差不多就是这个意思吧~

推荐文章:Poll Results: How do you order your CSS properties?

http://www.mozilla.org/css/base/content.css

5. (推荐)当编写针对特定html结构的样式时,使用元素名 + 类名

/* 所有的nav都是针对ul编写的 */

ul.nav {

......

}

".a div"和".a div.b",为什么后者好?如果需求有所变化,在".a"下有多加了一个div,试问,开始的样式是不是会影响后来的div啊~

6. (不推荐)ie使用filter,( 禁止)使用expression

这里主要是效率问题,应该当格外注意,要少用烧CPU的东西~

7. CSS注释用“/* */”表示,单行注释时,被注释对象与前后注释符各保留一个空格,且单独占一行;多行注释时,开始注释符和结束注释符各占一行。例如:

// 注释CSS
table {

border-collapse: collapse;

}

JS细化规范

1.换行

每行代码应少于120个字符,多于这个数量时,可以考虑换行,“.”或“+”这类操作符应放在行尾,换行后的代码必须在换行前多一层缩进。
如果函数或方法中的参数较长,要进行适当的划分。
禁止在return关键字及要返回的表达式之间换行。例如:

function test() {

return 1;

}

2.代码行

禁止把多个短语句写在一行中,即一行只写一条语句。
if、for、do、while、switch、case、default、break、continue等语句自占一行。
if、for、do、while等所有的循环体和判断体的执行语句部分都需要用"{}"括起来,禁止省略花括号。例如:
if (i < 5) i += 1;

// 正确的

if (i < 5) {

i += 1

}

3.对齐

代码块的分界符{},“{”跟随在上一行,并且前边有一空格隔开,“}”应独占一行并且位于同一列,同时与引用它们的语句左对齐。
在函数体的开始、类的定义以及if、for、do、while、switch、case语句中的程序都要采用如上的缩进方式。

4.空格

关键字之后必须有空格,以突出关键字。
函数名、方法名与左括号“(”之间不能保留空格,例如:
// 错误的

function getInfo () {

// code

}

// 正确的

function getInfo() {

// code

}

在声明函数表达式时,function与左括号“(”之间不能保留空格,例如:
// 错误的

var user = function () {

// code

}

// 正确的

var user = function() {

// code

}

逗号后面加空格。
赋值操作符、比较操作符、算术操作符、逻辑操作符、位域操作符,如“=”、“+=” “>=”、“<=”、“+”、“*”、“%”、“&&”、“||”等二元操作符的前后应当加空格。
"!"、"~"、"++"、"--"、"&"(地址运算符)等单目操作符前后不加空格。
"."、"[]"前后不加空格。
5.空行

在每个类声明之后、每个函数定义结束之后都要加空行。
在一个函数体内,逻揖上密切相关的语句之间不加空行,其它地方应加空行分隔。

6.使用严格的条件判断符。用===代替==,用!==代替!=

7.避免额外的逗号。如:var arr = [1,2,3,]

8.语句必须都有分号结尾,除了for,function,if,switch,try,while。

9.左花括号置于行末,右花括号置于行首。

10.下面类型的对象不建议用new构造:new Number,new String,new Boolean,new Object(用{}代替),new Array(用[]代替)。

11.数组成员间的“,”后面需要保留一个空格。

12.禁止在js/json中使用javascript保留关键字词命名,在IE中容易造成错误。关键字(break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with),关键词(abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile)。

13.建议使用“+”作为换行连接符,而不是使用“\”。

14.提示信息禁止使用概括笼统的语言描述,应该简洁明了,看到信息立即能定位到错误,如提示用户信息报错用“该用户不存在”,而不是用“后台返回数据有误”、“网络超时”。

时间: 2024-10-08 16:47:24

前端开发文档整理的相关文章

前端开发文档链接

微信小程序开发文档 https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/api.html#API RN中文网 https://reactnative.cn/docs/tutorial/ RN英文网 https://facebook.github.io/react-native/docs/getting-started 商米开发者文档 https://docs.sunmi.com/ 原文地址:https://

【转】前端开发文档规范

规范目的: 使开发流程更加规范化. 通用规范: TAB键用两个空格代替(WINDOWS下TAB键占四个空格,LINUX下TAB键占八个空格). CSS样式属性或者JAVASCRIPT代码后加“;”方便压缩工具“断句”. 文件内容编码均统一为UTF-8. CSS.JAVASCRIPT中的非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示. 文件规范: 文件名用英文单词,多个单词用驼峰命名法. 一些浏览器会将含有这些词的作为广告拦截:ad.ads.adv.banner.spo

手机客户端接口开发文档模板整理

这是个人整理的手机开发文档模板,方便自己以后编写文档. 大体内容如下,详细在个人csdn中下载: 移动端转发短信上传温湿度信息 移动端负责后台接收温湿度传感器通过短信发来的温湿度和经纬度信息,移动端后台接收后上传web服务器,当然传感器也可通过wifi直接上传web服务器.返回小写true或者false. 请求URL: http://192.168.1.101:8080/RFID/addTransTemperature.action?phoneNumber=123&temperature=12.

onvif 开发文档【1】

一: onvif 介绍: Onvif是一套协议,或者简单说是一个标准,接触一个新的协议或者标准,第一步我想首先是要弄清这个协议是做什么?我也是带着这个疑问,开始了对onvif的研究和探索.下边的资料是我从百度上搜索到的,和我自己的学习步骤也是一样,先搜索点东西读一读,对onvif有一个表层的认识. 1:为什么会有onvif? ONVIF致力于通过全球性的开放接口标准来推进网络视频在安防市场的应用,这一接口标准将确保不同厂商生产的网络视频产品具有互通性.2008年11月,论坛正式发布了ONVIF第

onvif 开发文档【2】

二: onvif 开发环境的搭建 下边这张图来自于网上,对我们熟悉onvif开发描述的十分清晰,我就是顺着这个思路走下去的. 从上边的介绍中,我们基本知道onvif是个什么协议,其中十分关键一点是这种协议的展现形式是webservice.让我们通过下图对webservice的调用过程有一个初步的了解. 对基于webservice格式存在接口,我们第一步要首先寻找webserive对应的wsdl文件在那里?当然去onvif的官方网站去找了.要搭建开发平台的第一步就是从onvif的官方网站获取wsd

Admui 框架开发文档

基本概述 Admui 的追求的目标是做到开箱即用,无需了解框架内部机制,但是我们也深知一套框架不可能满足所有客户的所有需求,所以我们仍然为您准备了前端的开发文档,以满足部分客户的定制需求,我们会不断的完善这部分的文档,请及时关注. 依赖关系 Admui 依赖于两个主要框架(库).源码包中已经包含这两个框架(库),无需再手动下载: BootStrap 4.1.3 jQuery 3.3.1+ 包含内容 Admui 提供了自动构建和基础源码两种不同的版本. 自动构建 如果您购买源码时选择的前端源码是自

微信开发文档

1. 选择功能设置 填写JS安全域名 下载 .....txt.传到服务器上 2.下一步进入基本配置 AppID(应用ID)  wxc8d0f11aba2b1ec0 AppSecret(应用密钥) 0937eb071d48a6b944ccc3e67ad0b25e 3.修改服务器配置 配置令牌 token 开始开发---接入指南 页面最下方 代码示例 下载 wx_sample.php 去开发者中心 进入开发者文档 进入微信网页开发 进入微信JS-SDK开发文档 页面的最下方 示例代码 下载完成后 打

软件开发文档

软件开发文档 软件开发文档是软件开发使用和维护过程中的必备资料.它能提高软件开发的效率,保证软件的质量,而且在软件的使用过程中有指导,帮助,解惑的作用,尤其在维护工作中,文档是不可或缺的资料. 软件文档可以分为开发文档和产品文档两大类. 开发文档包括:<功能要求>.<投标方案>.<需求分析>.<技术分析>.<系统分析>.<数据库文档>.<功能函数文档>.<界面文档>.<编译手册>.< QA 文

iOS开发-开发文档安装

iOS开发肯定离不开开发文档,苹果有在线帮助文档,xCode其实可以下载模拟器文档和iOS8.1文档的,不过下载的速度实在不敢恭维,而且比较头疼的是不显示下载进度条的,苹果的开发文档都是放在)/应用程序/Xcode.app/Contents/Developer/Documentation/DocSets路径下,该路径下可以看到三个文件,xCode 6.1文档(com.apple.ADC_Reference_Library.DeveloperTools.6_0_1.docset),iOS8.1文档