后盾人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是入口文件
因为添加过命令了，所以可以直接
进行编译
编译好之后就可以引入了