javaScript模块化一

Posted Befacebook

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javaScript模块化一相关的知识,希望对你有一定的参考价值。

1. Module模式的基本特性

  A) 模块化 可重用

   B) 封装了变量和function 和全局的namespace不接触 松耦合。

   C) 只暴露可用public的方法 其他私有方法全部隐藏

 

2. 匿名闭包

  匿名闭包是让一切成为可能的基础,而这也是javascript最好的特性,我们来创建一个最简单的闭包函数,函数内部的代码一直存在于闭包内,在整个运行周期内,该闭包都保证了内部的代码处于私有状态。

  (function(){

    //所有的变量和function 都在这里声明 并且作用域也只能在这个匿名闭包里 但是这里的依然可用访问全局的对象

  })();

3. 引用全局变量

  JavaScript 有一个特性叫隐式全局变量。不管变量有没有用过 JavaScript解释器反向遍历作用域链来查找整个变量的var声明。如果没有找到var。解释器则假定。该全局变量是全局变量。好在匿名函数里我们可以提供一个比较简单的替代方案 我们可以将全局变量当成一个参数传到匿名函数然后使用 相比隐式全局变量 它清晰又快。

  (function($,document){

    //这里我们就可以使用全局jQuery对象了。

  })(jQuery,document);

  但是有的时候我们也想声明全局变量 如何做呢? 我们可以通过匿名函数的返回值来返回这个全局对象。这也就是一个基本的Module模式

  

  上面的代码声明了一个全局变量blogModule,并且带有两个可访问的属性:blogModule.AddTopic和blogModule.Name;除此之外 其他代码都在匿名函数的闭包里保持着私有状态。同时根据上面传入的全局变量的例子 我们可以很方便的传入其他的全局变量。

  

4. 高级用法

  扩展 Module模式的一个限制就是所有的代码都要在一个文件 但是在一些大型的项目里。将一个功能分离成多个文件是很重要的。之前的那个例子我们能否把bolgModule自己传进去。 我们先将blogModule传进去 添加一个函数属性。 然后再返回就达到我们所说的目的。

  

  松耦合扩展

  尽管上面的代码可以执行 但是必须先声明blogModule 然后再执行上面的扩展代码。就是说步骤不能乱。 怎么解决这个问题呢。

  我们平常这样声明变量的: 

  var cnblog = cnblog || {};  //存在的时候直接用 不存在的时候直接赋值{}。

  var blogModule = (function(my){

    //添加一些功能

    return my;

  })(blogModule || {});

  这样子 每个单独分离的文件都能保证这个结构 那么我们就可以直接实现任意顺序的加载 所以这个时候var就是必须要声明的。

  紧耦合扩展

  虽然松耦合扩展很牛叉了,但是可能也会存在一些限制,比如你没办法重写你的一些属性或者函数,也不能在初始化的时候就是用Module的属性。紧耦合扩展限制了加载顺序,但是提供了我们重载的机会。

  

5. 克隆与继承

  

6. 跨文件共享私有对象

  过上面的例子,我们知道,如果一个module分割到多个文件的话,每个文件需要保证一样的结构,也就是说每个文件匿名函数里的私有对象都不能交叉访问,那如果我们非要使用,那怎么办呢?

  

以上是关于javaScript模块化一的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript模块化 --- CommonjsAMDCMDes6 modules

Javascript模块化编程

JavaScript模块化编程

JavaScript 模块化编程(笔记)

Javascript模块化编程:模块的写法

Javascript模块化编程