开发者社区> oqjytlomoaxyw> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

代码规范

简介: 代码规范
+关注继续查看

一、统一要求


1.1.基本规范


所有类名、id名、方法名等涉及到名称的,统一使用驼峰命名,命名要具有业务意义,语义化,简洁明了

代码中不得出现警告

代码中不得出现数字(插件除外)

结构(html),表现(css),行为(js)代码需分离

1.2.基本原则


代码力求简洁,不要写大量重复的逻辑代码(公共方法需封装,公共样式提取到公共样式中)

代码要有可读性,函数和元素命名要具有业务意义,关键业务要有详细的注释

代码要有扩展性,要尽可能适应未来的业务变化,不得生搬硬套现有业务逻辑

代码要有通用性,一个方法只专注于该方法需要做的事情(对外暴露相应的参数),一个模块只专注于该模块范围内的事情(对外暴露相应的接口)

二、html规范


2.1.Charst字符集合


一般情况下统一使用UTF-8。尽量统一写成标准的 “UTF-8”,不要写成 “utf-8” 或 “utf8” 或 “UTF8”。根据 IETF对UTF-8的定义,其编码标准的写法是 “UTF-8”;

2.2.书写风格


Html代码大小写

HTML标签名、类名、标签属性和大部分属性值统一用小写

 推荐:<div class="demo"></div>


2.元素属性


属性值使用双引号语法

 例:<link rel="stylesheet" href="" >


3.特殊字符引用


不得使用‘>’和‘<’特殊字符,浏览器会将它们作为标签解析,若要正确显示,在 HTML 源代码中使用字符实体

推荐:<a href="#">more>></a>


4.代码嵌套


每个块级元素独占一行,内联元素可选

html中禁止行内元素里面嵌套块级元素、span标签搭配for属性使用、div加disabled属性等不规范用法,<a>里不可以嵌套交互式元素<a>、<button>、<select>等;<p>里不可以嵌套块级元素<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等,可参考WEB标准系列-HTML元素嵌套;

html结构用统一采用双引号,js 用单引号

5.引用规范


将所有页面公共样式(如common.css)、插件样式写入head内的底部;

将所有页面公共js、插件js放入body内底部;

*注意:引入的文件全需加注释,表示是什么样式,或者什么插件(备注版本号)


三、 CSS规范


3.1.代码格式化


样式选择器,属性名,属性值关键字全部使用小写字母书写,属性字符串允许使用大小写

每个属性声明末尾都要加分号;

css属性值需要用到引号时,统一使用双引号

尽量不要用固定的宽高,多使用padding 和 margin

尽量少用通用选择器*

不使用ID选择器

不使用无具体语义定义的标签选择器

尽量少用!Important

 


3.2.代码可读性


左括号与类名之间一个空格,冒号与属性值之间一个空格

逗号分隔的取值,逗号之后一个空格

推荐:box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;

3.不要为0指明单位


推荐:margin:0 10px;

不推荐:margin:0px 10px;

3.3.属性书写顺序


建议遵循以下顺序

布局定位属性:display / position / float / clear / visibility / overflow(建议 display 第一个写,毕竟关系到模式)

自身属性:width / height / margin / padding / border / background

文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word

其他属性(CSS3):content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient 等

2.如果是单个页面需要改公共css或者插件样式,请一定在单个页面的样式中改,坚决不能修改插件源码,js文件同理;


3.当属性存在兼容问题的,兼容多个浏览器时,将标准属性写在底部;


-moz-border-radius: 15px; /* Firefox */


-webkit-border-radius: 15px; /* Safari和Chrome */


-o-border-radius: 15px;


border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE    浏览器 *//标准属性


四、JS规范


4.1.文件命名


文件命名和html中的功能相对应

4.2. 语言规范


变量

尽量不要定义全局变量,否则很容易造成全局变量污染。

2.变量先定义再使用,尽量避免使用全局变量分号


语句结束总是使用分号

3.使用严格相等号


尽量使用===和!==

4.条件判断语句必须放入{}中


在if/else/for/do/while语句中,即使只有一行,也不得省略块{...}

if (condition) {


callFunc();


}


5.If嵌套不能超过2层


6.一个函数的长度必须限制在50行以内,不然看完有时候会懵逼,可以分割成多个函数,一个函数只做一件事(单一原则)


7.函数定义结束不允许添加分号


function funName() {}


如果是函数表达式,分号不能省略


var funName = function () {};



8.js文件调用的部分必须写在$(function(){/*调用的js*/})函数内,该页面需要用的函数,可封装写在该函数底部;


9.common.js文件里面的函数必须保证是项目中大多数地方都会用到,且通用,common.js中的函数名要唯一。


五、命名规范


5.1.文件命名规范


文件命名严格按照模块来命名,命名需语义化,一看就懂,html、css、js三者一一对应,例如projectManage.html,对应的projectManage.css,projectManage.js,即使一个页面需引入多个js,命名同理,例如引入项目修改的js,即命名:projectManageUpdate.js;

5.2.文件命名规范变量名、类名、ID名、name、函数等命名规范


代表同一个元素的变量名、类名、ID名、name最好保持一致,且采用驼峰命名;

函数命名:小驼峰式命名法、前缀应当为动词、可使用常见动词约定;例:addPerson

六、三方插件


尽量引入大公司插件而非个人编写的插件

插件文档需明确易读

对UI限制越少越好,最好没有

能兼容ie9

代码缩进

统一使用 2个空格做为一个缩进层级,一定要统一。


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

作者高分内容
更多
动画 711
相关文章
代码美感
满足设计规范的设计。 满足代码规范的代码。(规范就是需要统一)
460 0
关“.NET研究”于代码规范
  今天被培训了C#代码规范,为了统一风格。其中我比较有异议的两点如下: 类型实例的私有字段应采用骆驼命名法(camelCasing),不应该有任何前缀,在使用时前边加"this.”; 要用FCL类型而不是C#的基元类型,例如要使用Int32代替int。
667 0
C#项目代码规范
前言    小菜就是小菜,几个人搞出来的项目,让公司大牛稍微看了下,最后送出了惨不忍睹四个字。命名各种各样,五花八门,大写英文、小写英文、大写拼音、小写拼音、英文和拼音组合、字母和特殊字符(下划线等)组合。
626 0
烂代码
  反思一个项目。   进入公司3个多月之后,终于开始做一个整体项目,两个人合作,项目不难、但工作量特别大,其实最主要原因是对公司的产品不熟悉,做的是mysql的数据迁移,从公司一个产品迁移到另一个产品,迁移的是一个库,每个字段都需要修改。
728 0
c#小灶——注释和代码规范
c#小灶——注释和代码规范为什么要写注释?早上我写完了代码,我和我的朋友们都能看懂,到了晚上,我还能看懂,一周后,就只有上帝能看懂了…… 将来我们写的代码量是很大的,代码又不像我们自然语言这么好理解,可能过段时间我们就不认识自己的代码了,所以我们要养成写注释的好习惯。
522 0
前端代码基础规范
定义js部分命名规范、编码规范
0 0
前端代码开发规范总结
前端代码开发规范总结
0 0
通过工具来规范代码提交与发布日志
使用https://github.com/conventional-changelog/standard-version和vscode插件”Conventional Commits”工具规范开发人员提交git日志
0 0
autojs代码规范
autojs代码规范
0 0
文章
问答
作者高分内容
更多
动画 711
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载