前端模块化(requirejs)

前端模块化

什么是前端模块化

将代码依据不同功能，或者职责进行模块的划分，就称为前端模块化

模块化的好处

1. 结构更轻清晰
2. 有利于代码的维护
3. 有利于代码的复用

模块化的标准

1. CommonJS
   这个标准主要用在Nodejs中 用于服务器端 同步加载
2. AMD
   Async Module Definition 异步模块定义， 依赖前置， requirejs
3. CMD
   Common Module Definiton 通用模块定义， 依赖延迟 sea.js

requirejs

定义以及应用模块

//1. 定义模块
//具名模块
define("模块名称", ["依赖项"], function(){
    //模块内容
})
//匿名模块
define(["依赖项1", "依赖项2"], function(依赖项1的返回值, 依赖项2的返回值){
    //模块内容
    //如果模块需要返回内容给外界使用，那么需要通过return语句将指定的内容进行返回
    return {};
})

//如果没有依赖项，可以将数组参数省略掉如
define(function(){})

//2. 引用模块
require(["要引用的模块的路径(不带.js后缀)"], function(模块的返回值){
    //在引用的模块加载完成之后执行的操作
})

data-main

可以称为入口文件
当requirejs加载完成之后，会直接去请求这个文件，并且执行里面的内容

模块路径

1. 不做任何设置的默认情况下，模块的路经查找，是以当前的文件做基础

2. 如果使用data-main属性， 模块路径查找，是以data-main指定的文件所在的路径为基础的

3. 如果使用config方法配置了baseUrl,那么路径的查找将会以baseUrl配置的路径作为基础

config 方法

require.config({
    //配置基础路径用的 一般baseUrl都使用绝对路径
    baseUrl: "/",
    //paths可以用来给每个模块的路径设置一个别名，方便使用
    //具名模块的别名一定要和模块中定义的名字保持一致
    //在path中配置过的模块，找模块的时候，使用的是 baseUrl + path中的路径 来查找的
    paths:　{
        jquery: "./jquery",
        template: "./template",
        anmiate: "./animate"
    }
    //shim 可以用来帮不支持模块化的第三方模块使用到requirejs中来
    shim: {
        //属性名：要配置的模块别名
        //属性值： 对象（可以包含两个属性 exprots， deps）
        animate: {
            //deps用来配置第三方模块的依赖项
            deps: ["jquery"],
            //exports配置第三方模块的返回值
            //返回值的内容写的是一个字符串，对应的模块文件中的一个全局变量名
            exports: "animate"
        }
    }
})