javascript模块化编写

蚊子前端博客
发布于 2014-01-17 07:00
我们希望别人的代码尽量少的影响到自己的代码,同时我们的代码也尽量少的影响到别人的代码。因此我们就需要对自己的js代码进行模块化,防止产生更多的全局变量

1. 开篇语

现在我们写代码不再是一个人包办所有的活儿,都是在多人合作的情况下完成的。我们只需要负责自己的这块就行了,而且我们也希望别人的代码尽量少的影响到自己的代码,同时我们的代码也尽量少的影响到别人的代码。因此我们就需要对自己的js代码进行模块化,防止产生更多的全局变量!

2. 对象形式写法

COPYJAVASCRIPT

var SSS = { top:0, left:0, init:function(){ var self = this; console.log("top:"+self.top); self.check(); }, check:function(){ var self = this; console.log("left:"+self.left); } };

  

3. 立即执行函数写法

COPYJAVASCRIPT

var Nan = (function(){ var top = 0; var left = 0; function getTop(){ return top; } return { getTop:getTop } })();

4. prototype写法

COPYJAVASCRIPT

function Hello(options){ this.config = { top:0, left:0 }; this.init(options); } Hello.prototype = { constructor:Hello, init:function(options){ this.config = $.extend(this.config, options || {}); var self = this, _config = self.config, _cache = self.cache; self._bindEnv(); }, _bindEnv:function(){ var self = this, _config = self.config, _cache = self.cache; console.log(self.config); } }

  

5. 总结

  1. this不存在Object对象中的,它只存在一个Function类型的函数中

  2. this指向使用new操作符实例化其所在函数的实例对象

  3. this还指向调用其所在函数的对象

引用:

阮一峰的《javascript模块化编程》:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html 《理解JavaScript中的this》:http://www.2cto.com/kf/201204/129617.html

标签:
阅读(291)

公众号:

qrcode

微信公众号:前端小茶馆

相关文章

公众号:

qrcode

微信公众号:前端小茶馆