我的前端规范——JavaScript篇
相关文章
简书原文:https://www.jianshu.com/p/5918c283cdc3
我的前端规范——开篇:http://www.cnblogs.com/shcrk/p/9271561.html
我的前端规范——HTML篇:http://www.cnblogs.com/shcrk/p/9271613.html
我的前端规范——CSS篇:http://www.cnblogs.com/shcrk/p/9271608.html
我的前端规范——JavaScript篇:http://www.cnblogs.com/shcrk/p/9271620.html
大纲
前言
1、命名规范
2、编码规则
前言
规范对于一个项目来说是很重要的,统一的规范对代码的一致性、项目的质量、工作的协调都有很大的帮助,而且有时候可以规避很多意料不到的错误。
当然,规范是死的,人是活的。我总结的前端规范是我认为对我来说比较适合的,我又认可的,所以我能比较好的接受和使用。但是,不同的团队,不同的项目需要遵守的规范也许就是不一样的。规范的作用是让项目的代码看起来更有统一性,让团队的协作更方便,因此,根据具体的情况制定统一的规范才是最合理的,而这里我给出的也只是我认为比较符合我风格和习惯的,至于具体的规范还是要依据具体的情况来总结制定。
单独写成一篇的话篇幅很大,因此我会将我的总结写成:开篇、css、html、js四篇,让有需要的读者能够更方便的查找到想要的知识。
1、命名规范
1.1、文件命名可读性强
文件夹、文件的命名与命名空间应能代表代码功能,可读性强。
1.2、函数命名
驼峰命名方式,函数名字应体现出该函数的作用
function funName() {}
1.3、常量
大写
var VARIABLENAME
1.4、变量
驼峰命名
变量名应体现出该变量的内容
通过加下划线体现其局部变量的含义,如 let _name;
var variableName
2、编码规则
2.1、排版缩进
采用统一的缩进方式排版代码。缩进必须是软tab(用空格字符)。(这里的tab的要求是4个空格)
2.2、关键词、条件括弧后面使用空格;运算操作符号两侧使用空格;语句分割符‘,’后面使用空格
var name[空格]=[空格]value;
if[空格](a,[空格]b) {
}
2.3、左大括号"{"可以居行尾,也可写在下行首(独自一行);右大括号"}"单独占一行,居行首
if (a && b) {
}
------------------------
if (a && b)
{
}
2.4、句末必须用分号结尾
var fn = function () {
};//这里没有分号的话,脚本解析器会报错!!!
(function () {
alert(1);
})();
2.5、单行过长应在适当位置予以换行,增强可读性
if 语句括号中的条件若过多过长,应予以折行;折行后,||、&& 等符号应与 “(” 后的第一个字母纵向对齐
if (condition1
&& condition2
|| condition3) {
}
2.6、if、while、for、do语句的执行体总是用"{"和"}"括起来,即使在其结构体内只有一条语句
if (s==100) {
alert('shit!');
}
2.7、语法意义相互独立的代码将用空行分隔
a++; b++; //!!!避免同一行书写两个表达式
if (a > b) {
value = a; //行间不用空行间隔
} var variableName = value; //与上一代码行使用空行间隔
我的前端规范——JavaScript篇的更多相关文章
- 我的前端规范——HTML篇
相关文章 简书原文:https://www.jianshu.com/p/a46ff0504982 我的前端规范——开篇:http://www.cnblogs.com/shcrk/p/9271561.h ...
- 我的前端规范——CSS篇
相关文章 简书原文:https://www.jianshu.com/p/e87bfd27ff59 我的前端规范——开篇:http://www.cnblogs.com/shcrk/p/9271561.h ...
- 前端之JavaScript篇
一. 简介 javascript是一门动态弱类型的解释性编程语言, 增强页面动画效果,实现页面与用户之间实时动态的交互. JavaScript有三部分组成: ECMAscript, DOM, BOM ...
- 前端试题本(Javascript篇)
JS1. 下面这个JS程序的输出是什么:JS2.下面的JS程序输出是什么:JS3.页面有一个按钮button id为 button1,通过原生的js如何禁用?JS4.页面有一个按钮button id为 ...
- web前端面试试题总结---javascript篇
JavaScript 介绍js的基本数据类型. Undefined.Null.Boolean.Number.String. ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的 ...
- 前端第三篇---前端基础之JavaScript
前端第三篇---前端基础之JavaScript 一.JavaScript概述 二.JavaScript的基础 三.词法分析 四.JavaScript的内置对象和方法 五.BOM对象 六.DOM对象 七 ...
- [转] Web前端优化之 Javascript篇
原文链接: http://lunax.info/archives/3099.html Web 前端优化最佳实践之 JavaScript 篇,这部分有 6 条规则,和 CSS 篇 重复的有几条.前端优化 ...
- 第三篇:web之前端之JavaScript基础
前端之JavaScript基础 前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript ...
- 前端性能优化(JavaScript篇)
正巧看到在送书,于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告:更多内容可以看我的博客 优化循环 如果现在有个一个data[]数组,需要对其进行遍历,应当怎么做?最简单的代码是 ...
随机推荐
- DOM和SAX是应用中操纵XML文档的差别
查看原文:http://www.ibloger.net/article/205.html DOM和SAX是应用中操纵XML文档的两种主要API.它们分别解释例如以下: DOM.即Do ...
- 【试水CAS-4.0.3】第07节_CASclient配置单点登录
完整版见https://jadyer.github.io/2015/07/26/sso-cas-client-login/ 本文源代码下载:http://download.csdn.net/detai ...
- vue.js最最最最简单实例
vue.js最最最最简单实例 一.总结 一句话总结: 1.vue.js实现实现数据的双向绑定用的是什么标记? 双大括号:比如{{message}} 2.vue数据循环输出的标记是什么? 用的是标签的v ...
- JavaScript--数据结构与算法之列表
3.1 列表的抽象数据类型定义 列表:一组有序的数据.每个列表中的数据称为元素.在JavaScript中列表的元素可以是任意的数据类型.列表中保存的元素没有事先的限定,实际使用时的元素数量受到程序内存 ...
- Docker+Solr
原文:Docker+Solr docker 内的solr并不是部署在tomcat里,而是自启动的.默认的home是/opt/solr/server/solr # docker search solr ...
- map按value查找相应元素
find_if算法用来在map中查找value符合条件的pair元素,返回指向该符合条件元素的迭代器,如果找到,那么返回最后一个元素的后一个元素end(); 1.首先要定义头文件 #include & ...
- NIO专栏学习
http://blog.csdn.net/column/details/12993.html
- [Phonegap+Sencha Touch] 移动开发76 让cordova app訪问远端站点也能调用cordova插件功能
原文链接:http://blog.csdn.net/lovelyelfpop/article/details/50735395 我相信.应该会有一些cordova开发人员想过实现以下这种app: 使用 ...
- phoenixframe自己主动化平台在Linux环境下运行用例的说明
phoenixframe自己主动化平台支持在Linux环境下使用phantomjs,Firefox.chrome运行測试用例.但有下面几个问题须要注意: 1.若无法启动phantomjs,Firefo ...
- mysql中配置ssl_key、ssl-cert、ssl-ca的路径及建立ssl连接(适用于5.7以下版本,5.7及以上请看本文末尾的备注)
1.创建 CA 私钥和 CA 证书 (1)下载并安装openssl,将bin目录配置到环境变量: (2)设置openssl.cfg路径(若不设置会报错,找不到openssl配置文件) \bin\ope ...