相关文章

  简书原文: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篇的更多相关文章

  1. 我的前端规范——HTML篇

    相关文章 简书原文:https://www.jianshu.com/p/a46ff0504982 我的前端规范——开篇:http://www.cnblogs.com/shcrk/p/9271561.h ...

  2. 我的前端规范——CSS篇

    相关文章 简书原文:https://www.jianshu.com/p/e87bfd27ff59 我的前端规范——开篇:http://www.cnblogs.com/shcrk/p/9271561.h ...

  3. 前端之JavaScript篇

    一. 简介 javascript是一门动态弱类型的解释性编程语言, 增强页面动画效果,实现页面与用户之间实时动态的交互.  JavaScript有三部分组成: ECMAscript, DOM, BOM ...

  4. 前端试题本(Javascript篇)

    JS1. 下面这个JS程序的输出是什么:JS2.下面的JS程序输出是什么:JS3.页面有一个按钮button id为 button1,通过原生的js如何禁用?JS4.页面有一个按钮button id为 ...

  5. web前端面试试题总结---javascript篇

    JavaScript 介绍js的基本数据类型. Undefined.Null.Boolean.Number.String. ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的 ...

  6. 前端第三篇---前端基础之JavaScript

    前端第三篇---前端基础之JavaScript 一.JavaScript概述 二.JavaScript的基础 三.词法分析 四.JavaScript的内置对象和方法 五.BOM对象 六.DOM对象 七 ...

  7. [转] Web前端优化之 Javascript篇

    原文链接: http://lunax.info/archives/3099.html Web 前端优化最佳实践之 JavaScript 篇,这部分有 6 条规则,和 CSS 篇 重复的有几条.前端优化 ...

  8. 第三篇:web之前端之JavaScript基础

    前端之JavaScript基础   前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript ...

  9. 前端性能优化(JavaScript篇)

    正巧看到在送书,于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告:更多内容可以看我的博客 优化循环 如果现在有个一个data[]数组,需要对其进行遍历,应当怎么做?最简单的代码是 ...

随机推荐

  1. logback 生成日志

    <?xml version="1.0" encoding="UTF-8"?> <configuration> <appender ...

  2. HUD——T 3836 Equivalent Sets

    http://acm.hdu.edu.cn/showproblem.php?pid=3836 Time Limit: 12000/4000 MS (Java/Others)    Memory Lim ...

  3. C# 的时间戳 在flash actionscript中使用

    眼下在做一个项目,要以字节的方式传时间戳到flash中, 错误的就不写了.仅仅写一个能够使用的例如以下: C# DateTime centuryBegin = new DateTime(1970, 1 ...

  4. 使用TCP协议的NAT穿透技术 (转载)

    其实很早我就已经实现了使用TCP协议穿透NAT了,但是苦于一直没有时间,所以没有写出来,现在终于放假有一点空闲,于是写出来共享之. 一直以来,说起NAT穿透,很多人都会被告知使用UDP打孔这个技术,基 ...

  5. XMPP开发之从零開始

    对于server的搭建和设置.我在这里就不再多说了.有好多前辈已经帮大家攻克了.能够參考下这篇博客 XMPPserver配置 我依照这个博客配置好了,server后,然后在网上參照代码写了一个小的de ...

  6. Qt程序调试之Q_ASSERT断言(它是一个宏,接受布尔值,当其中的布尔值为真时,便什么也不做)

    在使用Qt开发大型软件时,难免要调试程序,以确保程序内的运算结果符合我们的预期.在不符合预期结果时,就直接将程序断下,以便我们修改. 这就用到了Qt中的调试断言 - Q_ASSERT. 用一个小例子来 ...

  7. POJ 1737 Connected Graph (大数+递推)

    题目链接: http://poj.org/problem?id=1737 题意: 求 \(n\) 个点的无向简单(无重边无自环)连通图的个数.\((n<=50)\) 题解: 这题你甚至能OEIS ...

  8. POJ 3009 Curling 2.0 {深度优先搜索}

    原题 $On Planet MM-21, after their Olympic games this year, curling is getting popular. But the rules ...

  9. Python基础教程之第1章 基础知识

    #1.1 安装Python #1.1.1 Windows #1.1.2 Linux和UNIX #1.1.3 Macintosh #1.1.4 其它公布版 #1.1.5 时常关注.保持更新 #1.2 交 ...

  10. 微信消息体加解密及EncodingAESKey

    公众平台消息体签名及加解密方案概述 1.新增消息体签名验证,用于公众平台和公众账号验证消息体的正确性 2.针对推送给微信公众账号的普通消息和事件消息,以及推送给设备公众账号的设备消息进行加密 3.公众 ...