前端模块化 - 学习指南

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

 

你可能感兴趣的:(前端模块化 - 学习指南)