一、传统JS
index.html代码:
<div>
测试commonJS,AMD,ES6
</div>
<script src="./classic.js"></script>
<script>
console.log(app.name);
var help = new Help("张三",18);
help.showInfo();
</script>
classic.js代码
在这里插入代码片
结果：
二、CommonJS
概念:CommonJS，因为js没有模块的功能所以CommonJS应运而生，它希望js可以在任何地方运行，不只是浏览器中,也包括nodejs服务器端的广泛使用
commonjs必须运行在nodejs环境
1、安装部署nodejs项目
1.1、官网安装nodejs
1.2、npm init 初始化一个nodejs项目
1.3、npm install express 安装server模块
1.4、新建app.js主入口文件
- app.js文件：
let express=require("express");
let app=new express();
app.engine('html',ejs.__express);
app.set('view engine','html');
app.listen(3000,()=>{//3000是端口号，可以自己设置
console.log("启动成功");
})
// 引入自定义commonjs模块 默认后缀名为js
var mod = require('./common.js');//这么写也可以 var mod = require('./common');
var key = mod.key;
console.log("mod",mod);
app.get("/",(req,res)=>{
// req 请求---向服务器请求资源
// res 响应--给前端发送数据
res.send("nodejs欢迎你")
})
app.get("/home",(req,res)=>{
// req 请求---向服务器请求资源
// res 响应--给前端发送数据
res.render('index.html');
})
- 新建common.js
// 普通变量
const key = "JWOEJFOWEJOFIWFPJPOEF";
var app = {
name:"张三",
say(){
alert('哈哈');
}
}
// 类
class Help {
constructor(name,age){
this.name = name;
this.age = age;
}
showInfo(){
console.log("名字是:" + this.name + " 年龄是:" + this.age);
}
}
module.exports = {key,app,Help};
-
运行nodejs项目
node app.js -
访问 http://localhost:3000/home
结果:
三、AMD
AMD（异步模块定义）是为浏览器环境设计的，因为 CommonJS 模块系统是同步加载的，当前浏览器环境还没有准备好同步加载模块的条件。
requirejs即为遵循AMD规范的模块化工具。
1、官网下载require.js
下载地址:https://requirejs.org/docs/release/2.3.6/minified/require.js
2、编写index.html
<div>
测试commonJS,AMD,ES6
<div id="cont">哈哈</div>
</div>
<script src="./require.js" defer async="true" data-main="js/main"></script>
3、新建js文件夹，在文件下新建main.js文件(主入口脚本)和index.js(模块脚本)
- main.js代码
require.config({
paths : {
"jquery" : ["http://libs.baidu.com/jquery/2.0.0/jquery.min","jquery"], // 如果网络文件不存在，则加载本地js文件夹下的jquery.js
"index" : "index"
}
})
require(["jquery","index"],function($,index){
console.log($("#cont").html());
console.log(index.key);
index.app.name;
index.app.say();
var help = new index.Help("张三",18);
help.showInfo();
})
- index.js代码
// 普通变量
define(function(){
const key = "JWOEJFOWEJOFIWFPJPOEF";
var app = {
name:"张三",
say(){
console.log('say func invoke');
}
}
// 类
class Help {
constructor(name,age){
this.name = name;
this.age = age;
}
showInfo(){
console.log("名字是:" + this.name + " 年龄是:" + this.age);
}
}
return {key,app,Help};
}
)
结果:
四、ES6
定义：ES6内置到js中，我们在浏览器端无需额外引入requirejs来进行模块化。
注:因为本地访问会存在加载js文件报跨域的问题，所以需要搭建一个服务器，nodejs或者phpstudy都可以，本文采用nodejs + http-server插件搭建一个简易的本地web服务
1、官网安装nodejs,node -v查看是否安装成功
2、npm install http-server -g
3、在项目根目录http-server启动服务
服务器搭建完毕，开始编写代码
- index.html代码
<div>
测试commonJS,AMD,ES6
<div id="cont">哈哈</div>
</div>
<script type="module" src="main.js"></script>
1. 指定名称导出/导入
- main.js代码
import {key,app,Help} from './index.js';
console.log(key);
app.say();
var help = new Help("张三",18);
help.showInfo();
- index.js代码
// 普通变量
const key = "JWOEJFOWEJOFIWFPJPOEF";
var app = {
name:"张三",
say(){
console.log("say invoke444");
}
}
// 类
class Help {
constructor(name,age){
this.name = name;
this.age = age;
}
showInfo(){
console.log("名字是:" + this.name + " 年龄是:" + this.age);
}
}
export {key,app,Help};
访问http://127.0.0.1:8080/
结果:
2. default导出/导入
- main.js代码
import app from './index.js';
app.say();
- index.js代码
var app = {
name:"张三",
say(){
console.log("say invoke444");
}
}
export default app;
访问http://127.0.0.1:8080/
结果:
完结