传统js, commonJs, AMD(requireJs), ES6对比

一、传统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/
结果:

完结