前端模块化 - 学习指南

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()
    })