前端编码规范(3)JavaScript 开发规范

JavaScript规范
变量声明
总是使用 var 来声明变量。如不指定 var,变量将被隐式地声明为全局变量,这将对变量难以控制。如果没有声明,变量处于什么定义域就变得不清(可以是在 Document 或 Window 中,也可以很容易地进入本地定义域)。所以,请总是使用 var 来声明变量。

采用严格模式带来的好处是,当你手误输入错误的变量名时,它可以通过报错信息来帮助你定位错误出处。

变量名

变量名推荐使用驼峰法来命名(camelCase)
全局变量为大写 (UPPERCASE )
常量 (如 PI) 为大写 (UPPERCASE )
函数: 构造函数始终以大写字母开头,非构造函数以一个小写字母开头
变量名不要以 $ 作为开始标记,避免与很多 JavaScript 库冲突

全局命名空间污染与 IIFE

总是将代码包裹成一个 IIFE(Immediately-Invoked Function Expression),用以创建独立隔绝的定义域。这一举措可防止全局命名空间被污染。
IIFE 还可确保你的代码不会轻易被其它全局命名空间里的代码所修改(i.e. 第三方库,window 引用,被覆盖的未定义的关键字等等)。

不推荐

var x = 10,
y = 100;

// Declaring variables in the global scope is resulting in global scope pollution. All variables declared like this
// will be stored in the window object. This is very unclean and needs to be avoided.
console.log(window.x + ‘ ‘ + window.y);

推荐

// We declare a IIFE and pass parameters into the function that we will use from the global space
(function(log, w, undefined){
‘use strict';

var x = 10,
y = 100;

// Will output ‘true true'
log((w.x === undefined) + ‘ ‘ + (w.y === undefined));

}(window.console.log, window));

IIFE(立即执行的函数表达式)

无论何时,想要创建一个新的封闭的定义域,那就用 IIFE。它不仅避免了干扰,也使得内存在执行完后立即释放。
所有脚本文件建议都从 IIFE 开始。
立即执行的函数表达式的执行括号应该写在外包括号内。虽然写在内还是写在外都是有效的,但写在内使得整个表达式看起来更像一个整体,因此推荐这么做。

不推荐

(function(){})();

推荐

(function(){}());

so,用下列写法来格式化你的 IIFE 代码:

(function(){
‘use strict';

// Code goes here

}());

如果你想引用全局变量或者是外层 IIFE 的变量,可以通过下列方式传参:

(function($, w, d){
‘use strict';

$(function() {
w.alert(d.querySelectorAll(‘div').length);
});
}(jQuery, window, document));

严格模式

ECMAScript 5 严格模式可在整个脚本或独个方法内被激活。它对应不同的 javascript 语境会做更加严格的错误检查。严格模式也确保了 javascript 代码更加的健壮,运行的也更加快速。
严格模式会阻止使用在未来很可能被引入的预留关键字。
你应该在你的脚本中启用严格模式,最好是在独立的 IIFE 中应用它。避免在你的脚本第一行使用它而导致你的所有脚本都启动了严格模式,这有可能会引发一些第三方类库的问题。

不推荐

// Script starts here
‘use strict';
(function(){
// Your code starts here
}());

推荐

(function(){
‘use strict';
// Your code starts here
}());

变量声明

总是使用 var 来声明变量。如不指定 var,变量将被隐式地声明为全局变量,这将对变量难以控制。如果没有声明,变量处于什么定义域就变得不清(可以是在 Document 或 Window 中,也可以很容易地进入本地定义域)。所以,请总是使用 var 来声明变量。
采用严格模式带来的好处是,当你手误输入错误的变量名时,它可以通过报错信息来帮助你定位错误出处。

不推荐

x = 10;
y = 100;

推荐

var x = 10,
y = 100;

理解 JavaScript 的定义域和定义域提升

在 JavaScript 中变量和方法定义会自动提升到执行之前。JavaScript 只有 function 级的定义域,而无其他很多编程语言中的块定义域,所以使得你在某一 function 内的某语句和循环体中定义了一个变量,此变量可作用于整个 function 内,而不仅仅是在此语句或循环体中,因为它们的声明被 JavaScript 自动提升了。

我们通过例子来看清楚这到底是怎么一回事:

原 function

(function(log){
‘use strict';

var a = 10;

for(var i = 0; i < a; i++) {
var b = i * i;
log(b);
}

if(a === 10) {
var f = function() {
log(a);
};
f();
}

function x() {
log(‘Mr. X!');
}
x();

}(window.console.log));

被 JS 提升过后

(function(log){
‘use strict';
// All variables used in the closure will be hoisted to the top of the function
var a,
i,
b,
f;
// All functions in the closure will be hoisted to the top
function x() {
log(‘Mr. X!');
}

a = 10;

for(i = 0; i < a; i++) {
b = i * i;
log(b);
}

if(a === 10) {
// Function assignments will only result in hoisted variables but the function body will not be hoisted
// Only by using a real function declaration the whole function will be hoisted with its body
f = function() {
log(a);
};
f();
}

x();

}(window.console.log));

根据以上提升过程,你是否可理解以下代码?

有效代码

(function(log){
‘use strict';

var a = 10;

i = 5;

x();

for(var i; i < a; i++) {
log(b);
var b = i * i;
}

if(a === 10) {
f = function() {
log(a);
};
f();

var f;
}

function x() {
log(‘Mr. X!');
}

}(window.console.log));

正如你所看到的这段令人充满困惑与误解的代码导致了出人意料的结果。只有良好的声明习惯,也就是下一章节我们要提到的声明规则,才能尽可能的避免这类错误风险。

提升声明

为避免上一章节所述的变量和方法定义被自动提升造成误解,把风险降到最低,我们应该手动地显示地去声明变量与方法。也就是说,所有的变量以及方法,应当定义在 function 内的首行。
只用一个 var 关键字声明,多个变量用逗号隔开。

不推荐

(function(log){
‘use strict';

var a = 10;
var b = 10;

for(var i = 0; i < 10; i++) {
var c = a * b * i;
}

function f() {

}

var d = 100;
var x = function() {
return d * d;
};
log(x());

}(window.console.log));

推荐

(function(log){
‘use strict';

var a = 10,
b = 10,
i,
c,
d,
x;

function f() {

}

for(i = 0; i < 10; i++) {
c = a * b * i;
}

d = 100;
x = function() {
return d * d;
};
log(x());

}(window.console.log));

把赋值尽量写在变量申明中。

不推荐

var a,
b,
c;

a = 10;
b = 10;
c = 100;

推荐

var a = 10,
b = 10,
c = 100;

总是使用带类型判断的比较判断

总是使用 === 精确的比较操作符,避免在判断的过程中,由 JavaScript 的强制类型转换所造成的困扰。
如果你使用 === 操作符,那比较的双方必须是同一类型为前提的条件下才会有效。
如果你想了解更多关于强制类型转换的信息,你可以读一读 Dmitry Soshnikov 的这篇文章。
在只使用 == 的情况下,JavaScript 所带来的强制类型转换使得判断结果跟踪变得复杂,下面的例子可以看出这样的结果有多怪了:

(function(log){
‘use strict';

log(‘0' == 0); // true
log(” == false); // true
log(‘1' == true); // true
log(null == undefined); // true

var x = {
valueOf: function() {
return ‘X';
}
};

log(x == ‘X');

}(window.console.log));

明智地使用真假判断

当我们在一个 if 条件语句中使用变量或表达式时,会做真假判断。if(a == true) 是不同于 if(a) 的。后者的判断比较特殊,我们称其为真假判断。这种判断会通过特殊的操作将其转换为 true 或 false,下列表达式统统返回 false:false, 0, undefined, null, NaN, ”(空字符串).

这种真假判断在我们只求结果而不关心过程的情况下,非常的有帮助。

以下示例展示了真假判断是如何工作的:

(function(log){
‘use strict';

function logTruthyFalsy(expr) {
if(expr) {
log(‘truthy');
} else {
log(‘falsy');
}
}

logTruthyFalsy(true); // truthy
logTruthyFalsy(1); // truthy
logTruthyFalsy({}); // truthy
logTruthyFalsy([]); // truthy
logTruthyFalsy(‘0'); // truthy

logTruthyFalsy(false); // falsy
logTruthyFalsy(0); // falsy
logTruthyFalsy(undefined); // falsy
logTruthyFalsy(null); // falsy
logTruthyFalsy(NaN); // falsy
logTruthyFalsy(”); // falsy

}(window.console.log));

变量赋值时的逻辑操作

逻辑操作符 || 和 && 也可被用来返回布尔值。如果操作对象为非布尔对象,那每个表达式将会被自左向右地做真假判断。基于此操作,最终总有一个表达式被返回回来。这在变量赋值时,是可以用来简化你的代码的。

不推荐

if(!x) {
 if(!y) {
 x = 1;
 } else {
 x = y;
 }
}

推荐

x = x || y || 1;

这一小技巧经常用来给方法设定默认的参数。

(function(log){
 'use strict';

 function multiply(a, b) {
 a = a || 1;
 b = b || 1;

 log('Result ' + a * b);
 }

 multiply(); // Result 1
 multiply(10); // Result 10
 multiply(3, NaN); // Result 3
 multiply(9, 5); // Result 45

}(window.console.log));

分号

总是使用分号,因为隐式的代码嵌套会引发难以察觉的问题。当然我们更要从根本上来杜绝这些问题[1] 。以下几个示例展示了缺少分号的危害:

// 1.
MyClass.prototype.myMethod = function() {
 return 42;
} // No semicolon here.

(function() {
 // Some initialization code wrapped in a function to create a scope for locals.
})();

var x = {
 'i': 1,
 'j': 2
} // No semicolon here.

// 2. Trying to do one thing on Internet Explorer and another on Firefox.
// I know you'd never write code like this, but throw me a bone.
[ffVersion, ieVersion][isIE]();

var THINGS_TO_EAT = [apples, oysters, sprayOnCheese] // No semicolon here.

// 3. conditional execution a la bash
-1 == resultOfOperation() || die();

So what happens?

JavaScript 错误 —— 首先返回 42 的那个 function 被第二个 function 当中参数传入调用,接着数字 42 也被“调用”而导致出错。
八成你会得到 ‘no such property in undefined' 的错误提示,因为在真实环境中的调用是这个样子:x[ffVersion, ieVersion][isIE]().
die 总是被调用。因为数组减 1 的结果是 NaN,它不等于任何东西(无论 resultOfOperation 是否返回 NaN)。所以最终的结果是 die() 执行完所获得值将赋给 THINGS_TO_EAT.

Why?

JavaScript 中语句要以分号结束,否则它将会继续执行下去,不管换不换行。以上的每一个示例中,函数声明或对象或数组,都变成了在一句语句体内。要知道闭合圆括号并不代表语句结束,JavaScript 不会终结语句,除非它的下一个 token 是一个中缀符[2] 或者是圆括号操作符。

这真是让人大吃一惊,所以乖乖地给语句末加上分号吧。

澄清:分号与函数

分号需要用在表达式的结尾,而并非函数声明的结尾。区分它们最好的例子是:

var foo = function() {
 return true;
}; // semicolon here.

function foo() {
 return true;
} // no semicolon here.

嵌套函数

嵌套函数是非常有用的,比如用在持续创建和隐藏辅助函数的任务中。你可以非常自由随意地使用它们。

语句块内的函数声明

切勿在语句块内声明函数,在 ECMAScript 5 的严格模式下,这是不合法的。函数声明应该在定义域的顶层。但在语句块内可将函数申明转化为函数表达式赋值给变量。

不推荐

if (x) {
 function foo() {}
}

推荐

if (x) {
 var foo = function() {};
}

异常

基本上你无法避免出现异常,特别是在做大型开发时(使用应用开发框架等等)。

在没有自定义异常的情况下,从有返回值的函数中返回错误信息一定非常的棘手,更别提多不优雅了。不好的解决方案包括了传第一个引用类型来接纳错误信息,或总是返回一个对象列表,其中包含着可能的错误对象。以上方式基本上是比较简陋的异常处理方式。适时可做自定义异常处理。

在复杂的环境中,你可以考虑抛出对象而不仅仅是字符串(默认的抛出值)。

if(name === undefined) {
 throw {
 name: 'System Error',
 message: 'A name should always be specified!'
 }
}

标准特性

总是优先考虑使用标准特性。为了最大限度地保证扩展性与兼容性,总是首选标准的特性,而不是非标准的特性(例如:首选 string.charAt(3) 而不是 string[3];首选 DOM 的操作方法来获得元素引用,而不是某一应用特定的快捷方法)。

简易的原型继承

如果你想在 JavaScript 中继承你的对象,请遵循一个简易的模式来创建此继承。如果你预计你会遇上复杂对象的继承,那可以考虑采用一个继承库,比如 Proto.js by Axel Rauschmayer.

简易继承请用以下方式:

(function(log){
 'use strict';

 // Constructor function
 function Apple(name) {
 this.name = name;
 }
 // Defining a method of apple
 Apple.prototype.eat = function() {
 log('Eating ' + this.name);
 };

 // Constructor function
 function GrannySmithApple() {
 // Invoking parent constructor
 Apple.prototype.constructor.call(this, 'Granny Smith');
 }
 // Set parent prototype while creating a copy with Object.create
 GrannySmithApple.prototype = Object.create(Apple.prototype);
 // Set constructor to the sub type, otherwise points to Apple
 GrannySmithApple.prototype.constructor = GrannySmithApple;

 // Calling a super method
 GrannySmithApple.prototype.eat = function() {
 // Be sure to apply it onto our current object with call(this)
 Apple.prototype.eat.call(this);

 log('Poor Grany Smith');
 };

 // Instantiation
 var apple = new Apple('Test Apple');
 var grannyApple = new GrannySmithApple();

 log(apple.name); // Test Apple
 log(grannyApple.name); // Granny Smith

 // Instance checks
 log(apple instanceof Apple); // true
 log(apple instanceof GrannySmithApple); // false

 log(grannyApple instanceof Apple); // true
 log(grannyApple instanceof GrannySmithApple); // true

 // Calling method that calls super method
 grannyApple.eat(); // Eating Granny Smith\nPoor Grany Smith

}(window.console.log));

使用闭包

闭包的创建也许是 JS 最有用也是最易被忽略的能力了。关于闭包如何工作的合理解释。也可以搜索我们以前发布的文章

切勿在循环中创建函数

在简单的循环语句中加入函数是非常容易形成闭包而带来隐患的。下面的例子就是一个典型的陷阱:

不推荐

(function(log, w){
 'use strict';

 // numbers and i is defined in the current function closure
 var numbers = [1, 2, 3],
  i;

 for(i = 0; i < numbers.length; i++) {
 w.setTimeout(function() {
  // At the moment when this gets executed the i variable, coming from the outer function scope
  // is set to 3 and the current program is alerting the message 3 times
  // 'Index 3 with number undefined
  // If you understand closures in javascript you know how to deal with those cases
  // It's best to just avoid functions / new closures in loops as this prevents those issues

  w.alert('Index ' + i + ' with number ' + numbers[i]);
 }, 0);
 }

}(window.console.log, window));

接下来的改进虽然已经解决了上述例子中的问题或 bug,但还是违反了不在循环中创建函数或闭包的原则。

不推荐

(function(log, w){
 'use strict';

 // numbers and i is defined in the current function closure
 var numbers = [1, 2, 3],
  i;

 for(i = 0; i < numbers.length; i++) { // Creating a new closure scope with an IIFE solves the problem // The delayed function will use index and number which are // in their own closure scope (one closure per loop iteration). // --- // Still this is not recommended as we violate our rule to not // create functions within loops and we are creating two! (function(index, number){ w.setTimeout(function() { // Will output as expected 0 > 1, 1 > 2, 2 > 3
  w.alert('Index ' + index + ' with number ' + number);
  }, 0);
 }(i, numbers[i]));
 }

}(window.console.log, window));

接下来的改进已解决问题,而且也遵循了规范。可是,你会发现看上去似乎过于复杂繁冗了,应该会有更好的解决方案吧。

不完全推荐

(function(log, w){
 'use strict';

 // numbers and i is defined in the current function closure
 var numbers = [1, 2, 3],
  i;

 // Create a function outside of the loop that will accept arguments to create a
 // function closure scope. This function will return a function that executes in this
 // closure parent scope.
 function alertIndexWithNumber(index, number) {
 return function() {
  w.alert('Index ' + index + ' with number ' + number);
 };
 }

 // First parameter is a function call that returns a function.
 // ---
 // This solves our problem and we don't create a function inside our loop
 for(i = 0; i < numbers.length; i++) {
 w.setTimeout(alertIndexWithNumber(i, numbers[i]), 0);
 }

}(window.console.log, window));

将循环语句转换为函数执行的方式问题能得到立马解决,每一次循环都会对应地创建一次闭包。函数式的风格更加值得推荐,而且看上去也更加地自然和可预料。

推荐

(function(log, w){
 'use strict';

 // numbers and i is defined in the current function closure
 var numbers = [1, 2, 3],
  i;

 numbers.forEach(function(number, index) {
 w.setTimeout(function() {
  w.alert('Index ' + index + ' with number ' + number);
 }, 0);
 });

}(window.console.log, window));

eval 函数(魔鬼)

eval() 不但混淆语境还很危险,总会有比这更好、更清晰、更安全的另一种方案来写你的代码,因此尽量不要使用 evil 函数。

this 关键字

只在对象构造器、方法和在设定的闭包中使用 this 关键字。this 的语义在此有些误导。它时而指向全局对象(大多数时),时而指向调用者的定义域(在 eval 中),时而指向 DOM 树中的某一节点(当用事件处理绑定到 HTML 属性上时),时而指向一个新创建的对象(在构造器中),还时而指向其它的一些对象(如果函数被 call() apply() 执行和调用时)。

正因为它是如此容易地被搞错,请限制它的使用场景:

在构造函数中
在对象的方法中(包括由此创建出的闭包内)

首选函数式风格

函数式编程让你可以简化代码并缩减维护成本,因为它容易复用,又适当地解耦和更少的依赖。

接下来的例子中,在一组数字求和的同一问题上,比较了两种解决方案。第一个例子是经典的程序处理,而第二个例子则是采用了函数式编程和 ECMA Script 5.1 的数组方法。

例外:往往在重代码性能轻代码维护的情况之下,要选择最优性能的解决方案而非维护性高的方案(比如用简单的循环语句代替 forEach)。

不推荐

(function(log){
 'use strict';

 var arr = [10, 3, 7, 9, 100, 20],
  sum = 0,
  i;

 for(i = 0; i < arr.length; i++) {
 sum += arr[i];
 }

 log('The sum of array ' + arr + ' is: ' + sum)

}(window.console.log));

推荐

(function(log){
 'use strict';

 var arr = [10, 3, 7, 9, 100, 20];

 var sum = arr.reduce(function(prevValue, currentValue) {
 return prevValue + currentValue;
 }, 0);

 log('The sum of array ' + arr + ' is: ' + sum);

}(window.console.log));

另一个例子通过某一规则对一个数组进行过滤匹配来创建一个新的数组。

不推荐

(function(log){
 'use strict';

 var numbers = [11, 3, 7, 9, 100, 20, 14, 10],
  numbersGreaterTen = [],
  i;

 for(i = 0; i < numbers.length; i++) { if(numbers[i] > 10) {
  numbersGreaterTen.push(numbers[i]);
 }
 }

 log('From the list of numbers ' + numbers + ' only ' + numbersGreaterTen + ' are greater than ten');

}(window.console.log));

推荐

(function(log){
 'use strict';

 var numbers = [11, 3, 7, 9, 100, 20, 14, 10];

 var numbersGreaterTen = numbers.filter(function(element) {
 return element > 10;
 });

 log('From the list of numbers ' + numbers + ' only ' + numbersGreaterTen + ' are greater than ten');

}(window.console.log));

使用 ECMA Script 5

建议使用 ECMA Script 5 中新增的语法糖和函数。这将简化你的程序,并让你的代码更加灵活和可复用。

数组和对象的属性迭代

用 ECMA5 的迭代方法来迭代数组。使用 Array.forEach 或者如果你要在特殊场合下中断迭代,那就用 Array.every。

(function(log){
 'use strict';

 // Iterate over an array and break at a certain condition
 [1, 2, 3, 4, 5].every(function(element, index, arr) {
 log(element + ' at index ' + index + ' in array ' + arr);

 if(index !== 5) {
  return true;
 }
 });

 // Defining a simple javascript object
 var obj = {
 a: 'A',
 b: 'B',
 'c-d-e': 'CDE'
 };

 // Iterating over the object keys
 Object.keys(obj).forEach(function(element, index, arr) {
 log('Key ' + element + ' has value ' + obj[element]);
 });

}(window.console.log));

不要使用 switch

switch 在所有的编程语言中都是个非常错误的难以控制的语句,建议用 if else 来替换它。

数组和对象字面量

用数组和对象字面量来代替数组和对象构造器。数组构造器很容易让人在它的参数上犯错。

不推荐

// Length is 3.
var a1 = new Array(x1, x2, x3);

// Length is 2.
var a2 = new Array(x1, x2);

// If x1 is a number and it is a natural number the length will be x1.
// If x1 is a number but not a natural number this will throw an exception.
// Otherwise the array will have one element with x1 as its value.
var a3 = new Array(x1);

// Length is 0.
var a4 = new Array();

正因如此,如果将代码传参从两个变为一个,那数组很有可能发生意料不到的长度变化。为避免此类怪异状况,请总是采用更多可读的数组字面量。

推荐

var a = [x1, x2, x3];
var a2 = [x1, x2];
var a3 = [x1];
var a4 = [];

对象构造器不会有类似的问题,但是为了可读性和统一性,我们应该使用对象字面量。

不推荐

var o = new Object();

var o2 = new Object();
o2.a = 0;
o2.b = 1;
o2.c = 2;
o2['strange key'] = 3;

应该写成这样:

推荐

var o = {};

var o2 = {
 a: 0,
 b: 1,
 c: 2,
 'strange key': 3
};

修改内建对象的原型链

修改内建的诸如 Object.prototype 和 Array.prototype 是被严厉禁止的。修改其它的内建对象比如  Function.prototype,虽危害没那么大,但始终还是会导致在开发过程中难以 debug 的问题,应当也要避免。

自定义 toString() 方法

你可以通过自定义 toString() 来控制对象字符串化。这很好,但你必须保证你的方法总是成功并不会有其它副作用。如果你的方法达不到这样的标准,那将会引发严重的问题。如果 toString() 调用了一个方法,这个方法做了一个断言[3] ,当断言失败,它可能会输出它所在对象的名称,当然对象也需要调用  toString()。

圆括号

一般在语法和语义上真正需要时才谨慎地使用圆括号。不要用在一元操作符上,例如 delete, typeof 和  void,或在关键字之后,例如 return, throw, case, new 等。

字符串

统一使用单引号(‘),不使用双引号(“)。这在创建 HTML 字符串非常有好处:

var msg = 'This is some HTML <div class="makes-sense"></div>';

三元条件判断(if 的快捷方法)

用三元操作符分配或返回语句。在比较简单的情况下使用,避免在复杂的情况下使用。没人愿意用 10 行三元操作符把自己的脑子绕晕。

不推荐

if(x === 10) {
 return 'valid';
} else {
 return 'invalid';
}

推荐

return x === 10 ? 'valid' : 'invalid';

[1]:作者指的是采用严格规范的语句写法,从根本上杜绝由分号缺失而引起的代码歧义。

[2]:中缀符,指的是像 x + y 中的 +。

[3]:断言一般指程序员在测试测序时的假设,一般是一些布尔表达式,当返回是 true 时,断言为真,代码运行会继续进行;如果条件判断为 false,代码运行停止,你的应用被终止。

(0)

相关推荐

  • Node.js编码规范

    调用函数的时候,函数名与左括号之间没有空格. 函数名与参数序列之间,没有空格:所有其他语法元素与左括号之间,都有一个空格. 使用小驼峰式命名法作为所有变量和属性的命名规则. 缩进使用两空格,统一使用单引号. 关联数组,除非键名中有空格或是非法字符,否则一律不用引号. 不要将不同目的的语句,合并成一行. 不要省略句末的分号,哪怕一行只有一个语句. 不要使用自增(++)和自减(--)运算符,用+=和-=代替. 不要使用"相等"(==)运算符,只使用"严格相等"(===)

  • JavaScript之编码规范 推荐

    一.命名 1.应给变量和函数取一个含义确切的名称,不要随意命名. 2.非构造函数采用驼峰命名法,尽量采用动宾结构,以与变量名相区别,如getName或IsFull.构造函数(即自定义类型)名称首字母大写,以与非构造函数相区别,如Person. 3.变量采用驼峰命名法.由于JavaScript是一种弱类型语言,因此建议在变量名称前加前缀:整形(i),浮点数(f),布尔型(b),字符串(s),数组(a).但不强制这么做,可根据个人爱好选择,选择好后就不要混用加前缀和不加前缀这两种方式了. 二.布局

  • JavaScript 程序编码规范

    软件的长期价值直接源于其编码质量.在它的整个生命周期里,一个程序可能会被许多人阅读或修改.如果一个程序可以清晰的展现出它的结构和特征,那就能减少在以后对其进行修改时出错的可能性.编程规范可以帮助程序员们增加程序的健壮性. 所有的JavaScript代码都是暴露给公众的.所以我们更应该保证其质量.保持整洁很重要. JavaScript文件 JavaScript程序应独立保存在后缀名为.js的文件中. JavaScript代码不应该被包含在HTML文件中,除非这是段特定只属于此部分的代码.在HTML

  • 浅谈JavaScript编程语言的编码规范

    JavaScript 编程语言作为最流行的客户端脚本语言,早已被众多 Web 开发人员所熟悉.随着 Web2.0 时代的到来和 Ajax 技术的广泛应用,JavaScript 也逐渐吸引着更多的视线.工作中要求越多的是对 JavaScript 语言的深入学习,灵活运用,和对编码质量的保证. 对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编码规范也

  • 如何写好你的JavaScript【推荐】

    前言 在实际工作中,我们应该经常会看到一些功能上没有问题,但编码风格和规范却十分糟糕的代码,这往往会让人不敢再往下阅读,甚至会影响阅读者一天的心情.这些代码不仅不易阅读,而且难以维护,它们一般会出自刚入门的编程新手,也会出自工作了好几年的老程序员手下.因此本文的目的在于帮助那些没有养成良好的编码风格,缺乏相应编码规范意识的JavaScript学习者们改善他们的编码形象. 编码形象 以上我提出了编码形象的概念,我个人认为: 编码形象 = 编码风格 + 编码规范 一个良好的编码形象就等于一个穿着得体

  • 最全的Javascript编码规范(推荐)

    1.嵌入规则 Javascript程序应该尽量放在.js的文件中,需要调用的时候在页面中以<script src="filename.js">的形式包含进来.Javascript代码若不是该页面专用的,则应尽量避免在页面中直接编写Javascript代码. 2.对齐缩进与换行 a) 缩进 在同一系统中应采用同一种缩进标准,本文提倡缩进大小为4个空格.各编译器对Tab键所代替的空白大小定义不同.建议在设置开发环境时,将编辑器里的Tab快捷键重新设置成4个空格.多数编译器提供了

  • 超全面的JavaScript开发规范(推荐)

    这篇文章主要介绍的是关于JS的命名规范.注释规范以及框架开发的一些问题,首先来看看目录. 目录 1. 命名规范:介绍变量.函数.常量.构造函数.类的成员等等的命名规范 2. 注释规范:介绍单行注释.多行注释以及函数注释 3. 框架开发:介绍全局变量冲突.单全局变量以及命名空间 一.命名规范 驼峰式命名法介绍: 驼峰式命名法由小(大)写字母开始,后续每个单词首字母都大写. 按照第一个字母是否大写,分为: ① Pascal Case 大驼峰式命名法:首字母大写.eg:StudentInfo.User

  • 前端编码规范(3)JavaScript 开发规范

    JavaScript规范 变量声明 总是使用 var 来声明变量.如不指定 var,变量将被隐式地声明为全局变量,这将对变量难以控制.如果没有声明,变量处于什么定义域就变得不清(可以是在 Document 或 Window 中,也可以很容易地进入本地定义域).所以,请总是使用 var 来声明变量. 采用严格模式带来的好处是,当你手误输入错误的变量名时,它可以通过报错信息来帮助你定位错误出处. 变量名 变量名推荐使用驼峰法来命名(camelCase) 全局变量为大写 (UPPERCASE ) 常量

  • JavaScript开发规范要求(规范化代码)

    本人在开发工作中就曾与不按规范来开发的同事合作过,与他合作就不能用"愉快"来形容了.现在本人撰写此文的目的除了与大家分享一点点经验外,更多的是希望对未来的合作伙伴能够起到一定的借鉴作用.当然,如果我说的有不科学的地方还希望各路前辈多多指教.下面分条目列出各种规范要求,这些要求都是针对同事编码毛病提出来的,好些行业约定的其它规范可能不会再提及. 1.保证代码压缩后不出错 对于大型的JavaScript项目,一般会在产品发布时对项目包含的所有JavaScript文件进行压缩处理,比如可以利

  • JavaScript 开发规范要求(图文并茂)

    本人在开发工作中就曾与不按规范来开发的同事合作过,与他合作就不能用"愉快"来形容了.现在本人撰写此文的目的除了与大家分享一点点经验外,更多的是希望对未来的合作伙伴能够起到一定的借鉴作用.当然,如果我说的有不科学的地方还希望各路前辈多多指教.下面分条目列出各种规范要求,这些要求都是针对同事编码毛病提出来的,好些行业约定的其它规范可能不会再提及. 1.保证代码压缩后不出错 对于大型的JavaScript项目,一般会在产品发布时对项目包含的所有JavaScript文件进行压缩处理,比如可以利

  • Vue前端开发规范整理(推荐)

    基于Vue官方风格指南整理 一.强制 1. 组件名为多个单词 组件名应该始终是多个单词的,根组件 App 除外. 正例: export default { name: 'TodoItem', // ... } 反例: export default { name: 'Todo', // ... } 2. 组件数据 组件的 data 必须是一个函数. 当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方),它的值必须是返回一个对象的函数. 正例: // In a .vue fi

  • 关于Google发布的JavaScript代码规范你要知道哪些

    Google为了那些还不熟悉代码规范的人发布了一个JS代码规范.其中列出了编写简洁易懂的代码所应该做的最佳实践. 代码规范并不是一种编写正确JavaScript代码的规则,而是为了保持源代码编写模式一致的一种选择.对于JavaScript语言尤其如此,因为它灵活并且约束较少,允许开发者使用许多不同的编码样式. Google和Airbnb各自占据着当前最流行的编码规范的半壁江山.如果你会在编写JS代码上投入很长时间的话,我强烈推荐你通读一遍这两家公司的编码规范. 接下来要写的是我个人认为在Goog

  • Dojo Javascript 编程规范 规范自己的JavaScript书写

    前言 良好的JavaScript书写习惯的优点不言而喻,今天彬Go向大家推荐Dojo Javascript 编程规范,相当不错的 Javascript 编程风格规范,建议大家可以借鉴一下此规范编写 Javascript.感谢i.feelinglucky的翻译. 序 Any violation to this guide is allowed if it enhances readability. 所有的代码都要变成可供他人容易阅读的. 快读参考 核心 API 请使用下面的风格: 结构 规则 注释

  • 阿里云官方Redis开发规范总结

    目录 一.键值设计 1. key 名设计 2. value 设计 3.[推荐]:控制 key 的生命周期,redis 不是垃圾桶. 二.命令使用 1.[推荐] O(N)命令关注 N 的数量 2.[推荐]:禁用命令 3.[推荐]合理使用 select 4.[推荐]使用批量操作提高效率 5.[建议]Redis 事务功能较弱,不建议过多使用 6.[建议]Redis 集群版本在使用 Lua 上有特殊要求: 7.[建议]必要情况下使用 monitor 命令时,要注意不要长时间使用. 三.客户端使用 1.[

  • thinkPHP5.0框架开发规范简介

    本文实例讲述了thinkPHP5.0框架开发规范.分享给大家供大家参考,具体如下: 命名规范 ThinkPHP5遵循PSR-2命名规范和PSR-4自动加载规范,并且注意如下规范: 目录和文件 目录不强制规范,驼峰及小写+下划线模式均支持: 类库.函数文件统一以.php为后缀: 类的文件名均以命名空间定义,并且命名空间的路径和类库文件所在路径一致: 类名和类文件名保持一致,统一采用驼峰法命名(首字母大写): 函数和类.属性命名 类的命名采用驼峰法,并且首字母大写,例如 User.UserType,

  • mysql数据库开发规范【推荐】

    最近一段时间一边在线上抓取SQL来优化,一边在整理这个开发规范,尽量减少新的问题SQL进入生产库.今天也是对公司的开发做了一次培训,PPT就不放上来了,里面有十来个生产SQL的案例.因为规范大部分还是具有通用性,所以也借鉴了像去哪儿和赶集的规范,但实际在撰写本文的过程中,每一条规范的背后无不是在工作中有参照的反面例子的.如果时间可以的话,会抽出一部分或分析其原理,或用案例证明. 一. 命名规范 1.库名.表名.字段名必须使用小写字母,并采用下划线分割 (1)MySQL有配置参数lower_cas

随机推荐