后盾人JS -- 模块化开发
开发模块管理引擎
<!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是入口文件
因为添加过命令了，所以可以直接
进行编译
编译好之后就可以引入了