javaScript模块化一

Posted 2020-08-15 Befacebook

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分割到多个文件的话，每个文件需要保证一样的结构，也就是说每个文件匿名函数里的私有对象都不能交叉访问，那如果我们非要使用，那怎么办呢？