前端模块化开发

模块化开发

模块化开发使代码耦合度降低，模块化的意义在于最大化的设计重用，以最少的模块、零部件，更快速的满足更多的个性化需求。

如果不用模块化编写代码，那么会具有以下问题：

• 代码杂乱无章，没有条理性，不便于维护，不便于复用
• 很多代码重复、逻辑重复
• 全局变量污染
• 不方便保护私有数据(闭包)

现在我们使用的模块化规范主要有：

• CommonJs：主要是服务端nodejs使用的规范，
• AMD(async module define)：require.js
• CMD(common module define)：sea.js

模块化的优点：

• 避免了命名冲突
• 有利于代码的维护
• 有利于代码的复用

require.js实现模块化

基本用法

    //1、通过script标签导入requirejs源文件
    //2、编写模块文件，基本格式如下：
    //cart.js
    define([],function(){
        console.log('cart模块');
    })
    //product.js
    define([],function(){
        console.log('product模块');
    })
    //3、首页调用模块：
    require(["cart.js","product.js"],function(){
        //编写后面的逻辑代码
    })
    //等价于：
    require(["cart","product"],function(){
        
    })

入口文件

data-main

<script src="require.js" data-main="xx/xx/xx.js"></script>

配置

require.config({
    baseUrl: "/",
    paths:　{
        jquery: "./jquery",
        template: "./template",
        anmiate: "./animate"
    }
    shim: {
        animate: {
            deps: ["jquery"],
            exports: "animate"
        }
    }
})

定义模块的返回值（返回值相当于模块的入口）

    //cart.js：
    define([],function(){
        return {
            init(){
            },
            addProduct(){
            }
        }
    })
    require(["cart"],function(cart){
        cart.init();
        cart.addProduct();
    })

• 注意：一般在导入模块的时候，需要将有返回值的模块在[前面]导入，无返回值的模块在[后面]导入