前端模块化 - 学习指南

1.前端模块化

js模块化提供几种规范

1.commonjs 规范 代表的就是  onde  适合后台开发 因为是同步的，服务器是运行比较快等待时间不长，common.js 不适合用于前端，前端客户端是浏览器，浏览器追求的是异步加载，浏览器不能等太长时间。

2.前端模块的规范是  amd  规范  代表的就是 requires，它是异步的，很多前端框架都是用的是  amd 规范  比如  jquery  angular

3.  第三个模块规范是  es6

2.模块化的操作

1.commonjs 的操作

所有的模块化都是两个方向，暴露模块接口和引入模块

module.exports={} 暴露本质是一个 exports 的对象

require（路径）引入一个模块

以上是后台的  在后台 node 可以直接运行，在客户端（浏览器）不能运行，需要对文件打包解析。

打包工具：webpack gulp

前端模块：不借用任何规范自己怎么写？

自定义前端模块

案例分析：

定义一个feixiang模块没有任何依赖，在定义一个huiting模块，这个模块要依赖feixiang模块，然后再定义主文件 index.js 它依赖hiuting模块

1.定义不依赖其它模块

(function(){
//    定义一个feixiang模块
    var name="hello 模块一"
    
    function getname(){
        console.log(name)
    }
//    暴露模块，需要后面的所有js文件都能访问这个模块，唯一的方法，将该模块注册在window下
    window.feixiang={//暴露模块名字是feixiang
        getname:getname//这是暴露的属性
    }
})(window)
/*
 * 为什么加自调用函数?
 * 因为自调用函数执行会形成一个私有作用域，私有作用域对内部变量进行保护
 * 
 */

 

2.定义依赖其它模块

(function(window,feixiang){
    var name="1807 第二个模块"
    function show(){
        console.log(name)
    }
    function yilai(){
//        这个方法来自于飞翔模块
//        怎么引入？
        feixiang.getname()
    }
    console.log(feixiang.getname())
    //暴露会婷模块接口,等于暴露了两个接口
    window.huiting={
        show:show,
        yilai:yilai
    }
    
})(window,feixiang)
//将飞翔模块注入会婷模块里

 

在主文件中引入这两个模块

(function(window,huiting){
    huiting.show()
    huiting.yilai()
})(window,huiting)

 

html文件

注意事项：

1.依赖关系千万不能出错

这种模块的缺点，会发送多次请求，但依赖关系不能放错顺序

3.前端模块化规范 amd

amd 是前端模块的一种规范，全程 async module definition 异步模块加载机制，是一个规范（标准），所有需要按照这个规范去定义模块和使用模块

1.require 提供了一个一个全局方法 叫 define() 用来定义模块

定义模块分两种：

　　1.不依赖其它模块

　　2.依赖其它模块

定义不依赖其它模块

//如果不依赖其它模块 参数就是一个函数
define(function(){
    var mod="我是mod1"
    
    function mod1(){
        return mod
    }
//    return 暴露接口
    return{
        mod1:mod1
    }
})

定义依赖其它模块

//定义mod2模块，依赖mod1模块
define(["mm1","jquery"],function(mjiaozi,$){
//    []数组就是这个需要依赖的模块
    function getmes(){//打印mod1里面数据
        console.log(mjiaozi.mod1())
        $("#div").css("background","red")
    }
    //暴露接口
    return{
        getmes:getmes
    }
})

如何使用这俩模块

在主文件分两部分，一部分是配置模块，一部分使用模块

 

//引入模块
//第一对模块进行配置
    requirejs.config({
//        baseurl:"require",//配置查找到根目录
//        配置模块名称,和路径.属性是模块名
        paths:{
            "mm1":"./module/mod1", //不能带后缀名，自己会默认后面有后缀名
            "mm2":"./module/mod2",
            "jquery":"./js/jquery-3.3.1"
        }
    })
//第二对模块进行配置
    require(["mm2"],function(mod2s){
        mod2s.getmes()
    })