最新资讯当前位置:风暴娱乐 > 最新资讯 > >

JavaScript的Module模式编程深入分析

  

[Module,模式编程]JavaScript的Module模式编程深入分析

  

基础知识  

  

首先我们要大概了解一下Module模式(2007年由YUI的EricMiraglia在博客中提出),如果你已熟悉 Module 模式,可以跳过本部分,直接阅读"高级模式"。

  

  

匿名函数闭包  

  

匿名函数闭包是JavaScript最棒的特征,没有之一,是它让一切都成为了可能。现在我们来创建一个匿名函数然后立即执行。函数中所有的代码都是在一个闭包中执行的,闭包决定了在整个执行过程中这些代码的私有性和状态。

  

  

代码如下:

  
(function () {  
// ... all vars and functions are in this scope only  
// still maintains access to all globals  
}());  
  

  

注意在匿名函数外面的括号。这是由于在JavaScript中以function开头的语句通常被认为是函数声明。加上了外面的括号之后则创建的是函数表达式。

  

  

全局导入  

  

JavaScript有一个特征叫做隐藏的全局变量。当一个变量名被使用,编译器会向上级查询用var来声明这个变量的语句。如果没有找到的话这个变量就被认为是全局的。如果在赋值的时候这样使用,就会创建一个全局的作用域。这意味着在一个匿名的闭包中创建一个全局变量是十分容易的。不幸的是 ,这将会导致代码的难以管理,因为对于程序员来说,如果全局的变量不是在一个文件中声明会很不清晰。幸运的是 ,匿名函数给我我们另一个选择。我们可以将全局变量通过匿名函数的参数来导入到我们的代码中,这样更加的快速和整洁。

  

  

代码如下:

  
(function ($, YAHOO) {  
// now have access to globals jQuery (as $) and YAHOO in this code  
}(jQuery, YAHOO));  
  

  

Module导出  

  

有时你并不想要使用全局变量,但是你想要声明他们。我们可以很容易通过匿名函数的返回值来导出他们。关于Module模式的基本内容就这么多,这里有一个复杂一点的例子。

  

  

代码如下:

  
var MODULE = (function () {  
var my = {},  
privateVariable = 1;  

  

function privateMethod() {  
// ...

  
}  

  

my.moduleProperty = 1;  
my.moduleMethod = function () {  
// ...

  
};  

  

return my;  
}());  

  

  

这里我们声明了一个全局的module叫做MODULE,有两个公有属性:一个叫做MODULE.moduleMethod的方法和一个叫做MODULE.moduleProperty的变量。另外他通过匿名函数的闭包来维持私有的内部状态,当然我们也可使用前面提到的模式,轻松导入所需的全局变量  

  

高级模式  

  

之前提到的内容已经可以满足很多需求了,但我们可以更深入地研究这种模式来创造一些强力的可拓展的结构。让我们一点一点,继续通过这个叫做MODULE的module来学习。

  

  

拓展  

  

目前,module模式的一个局限性就是整个module必须是写在一个文件里面的。每个进行过大规模代码开发的人都知道将一个文件分离成多个文件的重要性。幸运的是我们有一个很好的方式来拓展modules。首先我们导入一个module,然后加属性,最后将它导出。这里的这个例子,就是用上面所说的方法来拓展MODULE。

  

  

代码如下:

  
var MODULE = (function (my) {  
my.anotherMethod = function () {  
// added method...

  
};  

  

return my;  
}(MODULE));  

  

  

虽然不必要,但是为了一致性 ,我们再次使用var关键字。然后代码执行,module会增加一个叫做MODULE.anotherMethod的公有方法。这个拓展文件同样也维持着它私有的内部状态和导入。

  

  

松拓展  

  

我们上面的那个例子需要我们先创建module,然后在对module进行拓展,这并不是必须的。异步加载脚本是提升 Javascript 应用性能的最佳方式之一。。通过松拓展,我们创建灵活的,可以以任意顺序加载的,分成多个文件的module。每个文件的结构大致如下  

  

代码如下:

  
var MODULE = (function (my) {  
// add capabilities...

  

  

return my;  
}(MODULE || {}));   (责任编辑:admin)

上一篇:JS中实现replaceAll的方法(实例代码)

下一篇:没有了

推荐内容

  • 共3页:
  • 上一页
  • 1
  • 2
  • 3
  • 下一页
  • 客户服务热线

    010-400-12345

    在线客服