为什么需要模块化开发?
随着代码复杂程度的提高, 项目也变得越来越难维护, JavaScript 模块化 也因此油然而生, 这应该是大家最熟悉的一种加载方式, 但是缺点也比较明显
所有的模块都处于全局作用域下, 容易造成命名冲突
依赖关系不明显, 比如 main.JS 中有使用 jQuery, 那么 jQuery 就一定要先加载,
但是从引入方式中我们无法直观的察觉依赖关系, 不利于维护
- <script src="jquery.js">
- </script>
- <script src="jquery_scroller.js">
- </script>
- <script src="bootstarp.js">
- </script>
- <script src="main.js">
- </script>
- CommonJs
一个文件就是一个模块, 其内部定义的变量, 方法都处于该模块内, 不会对外暴露.
主要语法:
使用 require 来加载模块
使用 exports 或者 module.exports 暴露模块中的内容
demo
新建 a.JS, 导出 name 和 sayHello
- // a.JS
- const name = 'Bob'
- function sayHello(name) {
- console.log(`Hello ${name}`)
- }
- module.exports.name = name
- module.exports.sayHello = sayHello
在 b.JS 中引入 a 并调用
- // b.JS
- const a = require('./a')
- const name = a.name
- console.log(name) // Bob
- a.sayHello(name) // Hello Bob
由于 CommonJs 是同步加载的模块的, 在服务端 (node), 文件都在硬盘上, 所以同步加载也无所谓, 但是在浏览器端, 同步加载就体验不好了. 所以 CommonJs 主要使用于 node 环境下.
AMD
AMD 全称为 Asynchromous Module Definition(异步模块定义), 实现了异步加载模块. require.JS 实现了 AMD 规范
主要语法:
- require([module], callback) // 导入
- define(id, [depends], callback) // 导出模块
新建 a.JS, 输入以下内容
- define(function() {
- let alertName = function(str) {
- alert('I am' + str)
- }
- let alertAge = function(num) {
- alert('I am' + num + 'years old')
- }
- return {
- alertName: alertName,
- alertAge: alertAge
- }
- })// 欢迎加入全栈开发交流群一起学习交流: 864305860
在 test.html 中调用 a 模块
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>
- Document
- </title>
- </head>
- <body>
- <script src="./require.js">
- </script>
- <script>
- require(['a'],
- function(alert) {
- alert.alertName('JohnZhu') alert.alertAge(21)
- })
- </script>
- </body>
- </HTML>
- CMD
CMD 规范 是阿里的玉伯提出, sea.JS 实现. 实现了按需加载
与 AMD 的区别:
对于依赖的模块 AMD 提前执行, 而 CMD 是延迟执行
CMD 推崇依赖就近, AMD 推崇依赖前置
- //AMD2.0 之前
- require(['./a', './b'], function(a, b) {
- a.doSomething();
- b.doSomething();
- })
- // AMD2.0 之后
- define(['./a', './b'], function(a, b) {
- a.doSomething();
- b.doSomething();
- })
- // CMD
- define(function(require, exports, module) {
- var a = require('./a');
- a.doSomething();
- var b = require('./b');
- b.doSomething();
- })
- ES6
ES6 模块化方案是最规范的方案, 未来也是主流, 对于我们来说也是经常使用与熟悉的. 不过现在的浏览器还不兼容, 使用需要 babel 转码
使用 export 导出模块
使用 import 导入模块
- import vue from 'vue'
- import axios from 'axios'
- import { mapState, mapMutations, mapActions } from 'vuex'
- export default {
- created() {
- console.log('Hello World')
- }
- }// 欢迎加入全栈开发交流群一起学习交流: 864305860
了解更多
来源: http://www.qdfuns.com/article/51117/265baeaec396e402aa9865d070379d83.html