后盾人JS -- 模块化开发-EW帮帮网

开发模块管理引擎

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let module = (function(){
            const moduleList = {}
            function define(name,modules,action){
                modules.map((m,i)=>{
                   modules[i] = moduleList[m]
                })
                moduleList[name] = action.apply(null,modules)
            }
            return {define}
        })()
        module.define("hd",[],function(){
            return{
                first(arr){
                    return arr[0]
                },
                max(arr,key){
                    return arr.sort((a,b)=>b[key]-a[key])[0]
                }
            }
        })
        module.define("lesson",["hd"],function(hd){
            let data = [
                {name:"js",price:199},{name:"mysql",price:78}
            ]
            hd.max(data,"price")
        })
        module.define("a",[],function(a){
            return{
                site:"后盾人",
                url:"houdunren.com"
            }
        })
        module.define("b",["a"],function(a){
            a.site = "hdcms"
        })
        module.define("c",["a"],function(a){
            console.log(a)
        })
    </script>
</body>
</html>

模块的基本使用

模块基本使用.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>
</head>

<body>
    <script type="module">
        import { title, url, show } from "./hd.js"   //这个路径必须写
        console.log(url)
    </script>
</body>

</html>

hd.js

let title = "后盾人"
let url = "houdunren.com"
function show() {
    console.log("我了个豆")
}
export{title,url,show}   //把url开放

模块延迟解析与严格模式

使用模块的时候默认就是严格模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>后盾人</button>
    <script type="module">
        import {}from"./hd.js"
        console.log(this)
    </script>
    <script>
        console.log(this)
    </script>
</body>
</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>
</head>
<body>
    <script type="module">
        import * as api from "./hd.js"
        console.log(api.url)
        console.log(api.show())
    </script>
</body>
</html>

如果有的导入了但是没有使用也会被裁剪掉

别名使用

import {site as s}from "./hd.js"

这就是别名的使用（主要是简洁）

default默认导出

这是default默认导出，接收的时候使用默认导出的数据

export default function show() {
    console.log("我了个豆")
}

混合导入导出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="module">
        import * as api from "./hd.js"
        console.log(api.default.show())
        console.log(api.url)
    </script>
</body>
</html>

let title = "后盾人"
let url = "houdunren.com"
export default
{
    show
} 
function show() {
    console.log("我了个豆")
}
export{title,url}   //把url开放

最好使用具名导出，默认导出的时候最好按照原来的模块起名字

动态模块加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        import("./hd.js").then(module =>{
            console.log(module)
        })
    </script>
</body>
</html>

WEBPACK

WEBPACK是打包工具

把一堆js文件打包成文件夹15：

执行完这个init就产生了一个.json（配置文件）

这是安装：

点开配置文件添加一个命令：

"dev" : "webpack --mode development --watch"

index.js是入口文件

因为添加过命令了，所以可以直接

进行编译

编译好之后就可以引入了

后盾人JS -- 模块化开发