AMD 模块化开发 requirejs route等

闭包模块化

模块化的基本实现
- 闭包的自调用函数

// 闭包实例
var fn = function(){
    var a = 10;
    return {
        init(){
            a++;
            console.log(a);
        }
    }
}
var f1 = new fn();
var f2 = new fn();
f1.init();
f1.init();
f2.init();

// 闭包应用
var KTV=(function(){
    return {
        pay(){

        },
        total(){

        }
    }
})()

AMD模块化

概念
- AMD：async module define：异步模块定义
- AMD其实就是requireJS实现的模块化解决方案

requireJS

中文网
- http://www.requirejs.cn/docs/api.html#jsfiles
基本使用
- 文件夹目录
  - index.html
  - main.js
  - js
    - 02.js
    - 03.js
    - 04.js
    - lib
      - jquery-3.3.1.js
      - require.js

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script data-main='main' src='./js/lib/require.js'></script>
</head>
<body>
    <button id="user">点我</button>
    <button id="begin">初始化</button>
</body>
</html>

// main.js
require.config({
    // baseUrl 配置模块基础路径
    baseUrl: './js',
    // paths 常用来配置一些常用的文件，文件夹路径
    paths: {
        jquery: 'lib/jquery-3.3.1'
    }
})

require(['jquery', '03', '02', '04'], function($, three, two, four){
    $('body').append('<div>逻辑思维</div>');
    var btnUser = document.querySelector('#user');
    var btnBegin = document.querySelector("#begin");
    btnUser.onclick = function(){
        three();
        two();
    }
    btnBegin.onclick = function(){
        four.init();
        four.begin();
    }
})

// 02.js
define([], function(){
    return function(){
        console.log('我是老二');
    }
})

// 03.js
define(['02'], function(two) {
    return function(){
        console.log('我是老三');
        two();
    }
});

// 04.js
define([], function(){
    return {
        init(){
            console.log('老四，初始化');
        },
        begin(){
            console.log('老四，开工了')
        }
    }
})

若是组件函数没有返回值
- 形参中 a,,c
- 形参中 b=''

案例——模块依赖子模块

    //productAdd.js
    define([],function(){
        return {
            init(){
                console.log("添加商品");
            }
        }
    })
    //productEdit.js
    define([],function(){
        return {
            init(){
                console.log("编辑商品");
            }
        }
    })
    //product.js
    define(["productAdd","productEdit"],function(productAdd,productEdit){
        return {
            init(){
                console.log("商品列表");
            },
            add(){
                productAdd.init();
            },
            edit(){
                productEdit.init();
            }
        }
    })
    //首页：
    require(["product"],function(product){
        product.init();
        product.add();
        product.edit();
    })

检测第三方库是否支持AMD规范

搜索源码

if ( typeof define === "function" && define.amd ) {
    define([], function() {
        return jQuery;
    } );
}

常用的模块、文件夹路径的配置

一般用于配置第三方模块，比如jquery、bootstrap、zepto等等

require.config(
    paths:{
        jquery:"js/lib/jquery-1.11.min",
        zepto:"js/lib/zepto.min",
        bootstrap:"assets/bootstrap/js/bootstrap.min"
    }
)
define(["jquery","zepto"],function($,$$){

})
require(["jquery","bootstrap"],function($){

})

目录结构
- dist 编译存放目录
- src 业务存放目录
  - css
  - imgs
  - assets
    - bootstrap
  - js
    - lib
      - require.js
      - jquery.js
  - index.html
  - app.js

requirejs解决循环依赖

场景描述
- index.js 已经依赖了组件 add.js
- 但是 add.js 也需要依赖 index.js 时
- 发生循环依赖
- 此时，不要通过回调函数的形参获取返回值
解决方案
- 在组件 add.js 中，需要执行组件 index.js 时
- 以 require()的方式解决
- require('index')()

define(['jquery', 'service/salemanService', 'require', 'saleman/index'], function($, salemanService, require) {
    return function(){
        var addStr = `
            <form>
                <label>姓名：</label><input type='text' name='name'>
                <label>年龄：</label><input type='number' name='age'>
                <button type='submit'>提交</button>
            </form>
        `;
        var $add = $(addStr)
        $add.on('submit', function(e){
            e.preventDefault();
            // 数据获取
            var name = $(this).find('input[name=name]').val();
            var age = $(this).find('input[name=age]').val();
            // 调用数据页面的方法，将数据传入
            salemanService.addList(name, age);
            // 页面刷新
            // $(".aside .aside-item:eq(0)").trigger("click");
            // 循环调用，页面刷新
            require('saleman/index')();
        });
        $('#main .content').html($add);
    }
});

AMD插件

插件网址
- https://github.com/requirejs/requirejs/wiki/Plugins

路由

前端路由的意义

通过路由将各个功能从url上面就分辨出来了
- /user/list
- /user/3
- /user/edit/3
路由还可以进行前进、后退等导航操作

前端路由的实现方式

监听window对象的hashchange事件
- hash值：通过localtion.hash获取，获取的值以"#"开头
- 也可以通过localtion.hash来设置hash值，当然设置的新hash也应该以"#"开头
history对象：popState/pushState

ES6模块化

浏览器调试

<script type="module">
    //导入模块
</script>

基本用法

//cart.js
export default {
    name:"张三",
    age:18
}

//index.js
import cart from "cart.js"
cart.name
cart.age

导出模块

//cart.js
export const age = 18;
export function f1(){
    console.log("f1函数");
}
export default {
    init(){
        console.log("初始化");
    }
}
//index.js
import cart,{ age,f1 } from "cart.js"
cart.init();
age,
f1();

导入模块

//index.js
import cart as cartIndex from "cart.js"
import { age as AGE } from "product.js"

//使用变量：cartIndex
//使用变量：AGE