前端模块化

使用模块模块化的好处
1. 避免变量污染，命名冲突
2. 提高代码复用性
3. 提高维护性
4. 依赖关系的管理

基本思想

//使用立即执行函数
//闭包思想，内层作用域才能访问外层作用域
var module = (function() {
    let count = 5;
    let m1 = function() { count++ };
    let m2 = function() { count-- };
    let m3 = function() { console.log(count) }
    return{
        m1,
        m2,
        m3
    }
})()

前端模块化比较

commonjs基于nodejs的模块化方案，同步的加载在充满异步的浏览器中会产生很多问题

一个文件就是一个模块，拥有自己的作用域

//a.js
//被require的时候，只会执行一次这个函数，然后把结果存起来
var a = 100;
a+=100;
module.exports = {
    a
}

//b.js
var a = require('./a.js'); //{ a: 200 }

//c.js
var a = require('a.js'); //{ a: 200 }

基于amd规范的requireJs（依赖前置，你需要的模块之前写在之前），依赖模块谁下载好就执行，和书写顺序无关，最后在执行你的主要逻辑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端模块化</title>
    <!-- 引入requieJs -->
<script type="text/javascript" src="http://j1.58cdn.com.cn/ui7/post/pc/libs/require.min_v20150611214822.js"></script>
<script>
    //参数一：依赖的模块；
    //参数二：模块加载完毕后执行的回掉函数，参数是依赖模块的返回值
    require(["a.js"],(add)=>{ 
        add() //并不会阻碍浏览器渲染，所以页面显示123后弹出123
    })
</script>
</head>
<body>
    123
</body>

</html>

//a.js
//require定义模块

define(function() {
    var add = ()=>{
        alert("123")
    }
    return add
})

　　require.config()方法进行配置，相当于给你的路径制定一个简单的名字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端模块化</title>
    <!-- 引入requieJs 为了1防止阻碍浏览器渲染，指定异步加载 defer为了IE -->
<script type="text/javascript" src="http://j1.58cdn.com.cn/ui7/post/pc/libs/require.min_v20150611214822.js"></script>
<script>
    require.config({
        baseUrl: 'js', //指定require的路径的目录，不指定的话就是加载require的这个文件的目录
        paths: {   //相当于对你的路径更改一个简单的名字
            a: 'zimu/a',
            b: 'zimu/b',
            jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min' //也可以指定网络路径
        }
    })
    //引入模块a 从设置可以知道a==js/zimu/a
    require(['a'])
</script>
</head>
<body>
    123
</body>
</html>

//a.js

define(['b'],()=>{
　　//此处先引入一下b模块
console.log("a");
})

//b.js
define(()=>{
    console.log("b");
})

控制台最终结果

基于cmd规范的seaJs（就近依赖，你需要用的时候写在附近），依赖模块下载之后不执行，当你require的时候才执行，和你的书写顺序有关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端模块化</title>
    <!-- 引入requieJs 为了1防止阻碍浏览器渲染，指定异步加载 defer为了IE -->
<script type="text/javascript" src="https://cdn.bootcss.com/seajs/3.0.3/sea.js"></script>
<script>
    //引用的三种方式
    //方式1：seajs.use(一般只用在页面载入入口模块)
    seajs.use(["./a.js"])
    //方式2：require 同步往下加载    
    //方式3：require.async 异步往下加载，加载完成后，执行回调函数
</script>
</head>
<body>
    123
</body>
</html>

//a.js
//错误示例
define(function(require,exports,module) {
    var a = 100;
    console.log(a);
    require(["./b"]);
    module.exports = {
        a
    }
})
//同样需要先指定你所依赖的模块
//修订之后
//require定义模块
define(["./b"],function(require,exports,module) {
    var a = 100;
    console.log(a);
    require(["./b"]);
    module.exports = {
        a
    }
})

//b.js
define((require,exports,module)=>{
    console.log("b");
})

最终结果：

posted @ 2019-03-14 16:48 祖国的小花朵阅读(179) 评论(0) 编辑收藏举报

刷新页面返回顶部

祖国的小花朵

前端模块化

公告