使用js的注意事项
2014-02-26 14:47
260 查看
(1)一定要使用 var 来声明变量
虽说JavaScript中允许不用关键字var来声明变量,但这种声明方式会导致连函数内声明的变量都变成全局变量,从而潜伏了覆盖已有变量的危险。
console.log(window.notExist); // => undefined
function foo() {
notExist = 1;
var stillNotExist = 2;
}
foo();
console.log(window.notExist, window.stillNotExist); // => 1 undefined
(2)通过闭包来避免变量覆盖
闭包的常用写法就是:
(function(){
// inner code
})();
这样在闭包里定义的变量、函数等就不会和外面的发生冲突。
(3)通过限定对象来减少冲突
1)限定对象来减少冲突的目的是把原来多个的全局变量减少到仅向外提供一个,曲线达到 namespace 的目的。
比如:
var ns = {
'a': 1
};
ns.fn = function(b){
return this.a + b;
};
console.log(ns.a, ns.fn(3)); // => 1 4
返回闭包引用
2)另一种形式是返回一个闭包引用,这样既可以达到 namespace 的目的,也可以把部分数据作为私有数据而不暴露出去而不是像上面那个那样全部暴露:
var app = function(){
var o = 'o'; // variables;
// functions
function foo(v){
o = v;
}
function bar(){
return o;
}
// 向外提供可供调用的接口,常是函数
return {
set: foo,
get: bar
};
}();
app.o; // => undefined
app.get(); // => 'o'
app.set(1);
app.get(); // => 1
(4)利用对象来封装
采用 new 一个对象达到封装也是一种经常使用的手段,和上面的区别是,是否是需要创建多个实例。
function Popup(options) {
}
Popup.prototype = {
init: function() {
},
show: function() {
},
hide: function() {
},
remove: function() {
}
};
var p1 = new Popup(),
p2 = new Popup();
(5)模块化
更加理想的情况或许应该是像Python那样,一个文件即一个模块。nodejs根据CommonJS的规范实现了文件即模块的功能,
在浏览器端可使用 seajs 等模块加载器来实现,比如,在 seajs 中:
define(function(require, exports, module){
function say() {
console.log(3);
}
// 通过 exports 对象暴露出去,然后通过 module.say() 来调用
exports.say = say;
});
但考虑到目前我们的网站大多对 js 做了压缩合并并规定了几个放置位置,完全模块化的开发应该是将来的一个方向,但目前可能暂时用不上。
(6)命名
原则: 1. 尽量避免潜在冲突; 2. 精简短小, 见名知意;
虽然发布时大多把 JavaScript 压缩,但考虑到维护,变量命名还是得有可读性。
1)命名直观,不要使用单字母,尽量使用英文,实在不行,拼音也可以。
// bad
function q() {
// ...
}
// good
function query() {
// ...
}
2)常量应使用全大写
// bad
var red = '#F00';
// good
var RED = '#F00';
3)对于变量、函数和对象等使用驼峰式
// bad
var this_is_my_object = {};
// good
var thisIsMyObject = {};
4)对于构造函数(或叫类)使用首字母大写的PascalCase式
// bad
function user(options) {
this.name = options.name;
}
var bad = new user({
name: 'nope'
});
// good
function User(options) {
this.name = options.name;
}
var good = new User({
name: 'yup'
});
5)类内的私有(内部用)方法或成员使用单下划线 _ 开头
// bad
this.__firstName__ = 'Panda';
this.firstName = 'Panda';
// good
this._firstName = 'Panda';
并不推荐在变量、函数等前加如 pc_ 这样的前缀,减少相关冲突可以采用前面的减少全局变量的方法。
(7)总结:
1)总使用 var 来声明变量。
2)对于无需保存变量来后续调用的,放进闭包里执行;
3)如果需要后续使用,使用返回闭包引用或对象限定的方法;
4)对于需要多个实例的,采用new一个对象的方法来封装。
5)使用一致的命名方法。
虽说JavaScript中允许不用关键字var来声明变量,但这种声明方式会导致连函数内声明的变量都变成全局变量,从而潜伏了覆盖已有变量的危险。
console.log(window.notExist); // => undefined
function foo() {
notExist = 1;
var stillNotExist = 2;
}
foo();
console.log(window.notExist, window.stillNotExist); // => 1 undefined
(2)通过闭包来避免变量覆盖
闭包的常用写法就是:
(function(){
// inner code
})();
这样在闭包里定义的变量、函数等就不会和外面的发生冲突。
(3)通过限定对象来减少冲突
1)限定对象来减少冲突的目的是把原来多个的全局变量减少到仅向外提供一个,曲线达到 namespace 的目的。
比如:
var ns = {
'a': 1
};
ns.fn = function(b){
return this.a + b;
};
console.log(ns.a, ns.fn(3)); // => 1 4
返回闭包引用
2)另一种形式是返回一个闭包引用,这样既可以达到 namespace 的目的,也可以把部分数据作为私有数据而不暴露出去而不是像上面那个那样全部暴露:
var app = function(){
var o = 'o'; // variables;
// functions
function foo(v){
o = v;
}
function bar(){
return o;
}
// 向外提供可供调用的接口,常是函数
return {
set: foo,
get: bar
};
}();
app.o; // => undefined
app.get(); // => 'o'
app.set(1);
app.get(); // => 1
(4)利用对象来封装
采用 new 一个对象达到封装也是一种经常使用的手段,和上面的区别是,是否是需要创建多个实例。
function Popup(options) {
}
Popup.prototype = {
init: function() {
},
show: function() {
},
hide: function() {
},
remove: function() {
}
};
var p1 = new Popup(),
p2 = new Popup();
(5)模块化
更加理想的情况或许应该是像Python那样,一个文件即一个模块。nodejs根据CommonJS的规范实现了文件即模块的功能,
在浏览器端可使用 seajs 等模块加载器来实现,比如,在 seajs 中:
define(function(require, exports, module){
function say() {
console.log(3);
}
// 通过 exports 对象暴露出去,然后通过 module.say() 来调用
exports.say = say;
});
但考虑到目前我们的网站大多对 js 做了压缩合并并规定了几个放置位置,完全模块化的开发应该是将来的一个方向,但目前可能暂时用不上。
(6)命名
原则: 1. 尽量避免潜在冲突; 2. 精简短小, 见名知意;
虽然发布时大多把 JavaScript 压缩,但考虑到维护,变量命名还是得有可读性。
1)命名直观,不要使用单字母,尽量使用英文,实在不行,拼音也可以。
// bad
function q() {
// ...
}
// good
function query() {
// ...
}
2)常量应使用全大写
// bad
var red = '#F00';
// good
var RED = '#F00';
3)对于变量、函数和对象等使用驼峰式
// bad
var this_is_my_object = {};
// good
var thisIsMyObject = {};
4)对于构造函数(或叫类)使用首字母大写的PascalCase式
// bad
function user(options) {
this.name = options.name;
}
var bad = new user({
name: 'nope'
});
// good
function User(options) {
this.name = options.name;
}
var good = new User({
name: 'yup'
});
5)类内的私有(内部用)方法或成员使用单下划线 _ 开头
// bad
this.__firstName__ = 'Panda';
this.firstName = 'Panda';
// good
this._firstName = 'Panda';
并不推荐在变量、函数等前加如 pc_ 这样的前缀,减少相关冲突可以采用前面的减少全局变量的方法。
(7)总结:
1)总使用 var 来声明变量。
2)对于无需保存变量来后续调用的,放进闭包里执行;
3)如果需要后续使用,使用返回闭包引用或对象限定的方法;
4)对于需要多个实例的,采用new一个对象的方法来封装。
5)使用一致的命名方法。
相关文章推荐
- js高级——原型使用的注意事项
- 【工作日志】--vue.js下使用element的form表单的注意事项
- jsf中使用js获得输入项值的注意事项
- js闭包避免内存泄漏 减少内存使用 避免对象无法回收注意事项
- jquery.validate.js插件的remote用法以及使用注意事项
- 项目开发中的一些注意事项以及技巧总结 基于Repository模式设计项目架构—你可以参考的项目架构设计 Asp.Net Core中使用RSA加密 EF Core中的多对多映射如何实现? asp.net core下的如何给网站做安全设置 获取服务端https证书 Js异常捕获
- easy UI使用include<>包含页面时以及加载js文件所注意的事项。
- Angular JS ng-app使用的注意事项
- JS学习笔记2015-4-15(第二天)——属性操作的注意事项&中括号在JS中的使用
- 使用Angular.js开发的注意事项
- 使用layer.js注意事项
- 使用vue.js开发时一些注意事项
- arcgis api4.x for js使用注意事项
- Node.js中使用JSON的一个注意事项
- sea.js使用中的一个注意事项
- angularjs $broadcast 和 $on 的使用及其注意事项
- JS中语句使用的注意事项
- js对象中原型(prototype)的使用方法、替换以及注意事项
- Android JS 与本地代码交互---JSBridge使用注意事项
- JS中连等赋值操作使用注意事项(a=b=c)