web中模块化开发理解

web中模块化开发理解

一、什么是模块化开发？

1.web开发中将项目的实现划分为许多模块，模块其实就是将功能相关的代码封装在一起，方便维护
，重用；模块之间通过API进行重组。

二、为什么要通过模块化的方式进行开发？

1.高内聚低耦合，有利于团队作战，当项目很复杂的时候，将项目划分为子模块分给不同的人开发

，最后再组合在一起，这样可以降低模块与模块之间的依赖关系体现低耦合，模块又有特定功能体

现高内聚。

2.可重用，方便维护，模块的特点就是有特定功能，当两个项目都需要某种功能的时候，我们定义

一个特定的模块来实现该功能，这样只需要在两个项目中都引入这个模块就能够实现该功能，不需

要书写重复性的代码；并且当需求变更该功能需要改变的时候，我们直接修改该模块，这样就能够

修改所有项目的功能，维护起来很方便。

3.模块化开发会引发大量的js被引入到页面，而这些模块之间还是有依赖关系，体现在引入的顺序

，其实就是模块管理的问题，

三、模块化开发的实现方式：

1.函数方式：将某种功能的代码逻辑封装到函数里面，然后再将这些函数抽取到一个独立的文件，

实现重用。但是这种方式会导致暴露的全局函数数据量太多，会污染全局。

2.命名空间方式：其实就是暴露一个全局对象，然后把实现功能的函数挂到该对象下面，最为对象

的方法。缺点是对于某些函数我们并不想为外界所调用，而自定义对象的方法对外都是公开的无法

保证该函数不被调用。

3.使用具有私有空间的对象来实现：这种方式解决了以上几种方式没解决的问题，但是不具备扩展

性。

var demo = (function() {

    function private() {

    }
    function public() {

    }
    return {
        public: public
    }
})();

4.使用自执行函数和window对象来实现：比如要制作一个demo模块

• 自执行函数传入window.demo||{}表示如果原来全局中存在demo模块，那么就将其进行扩展，如

没有则创建一个空对象作为demo来初始化

• 同样的传参数的方式也可以降低对第三方框架的依赖，比如该模块是在jquery的基础上面开发

的也就是说模块是调用jquery得api实现，如果有一个框架和jquery的api实现一样的功能此时我们

就可以将这个模块依赖的框架修改为另一个框架，通过改变全局对象的传入，而不影响模块的功能

(function(demo,$) {

    function private() {

    }
    demo.public:function () {
          $('.div').html('公有函数');
    }
    // 创建或者更新window的demo模块
    window.demo = demo;
})(window.demo || {}，jQuery);
// 比如在此处修改传入的jQuery对象为zepto