为什么JavaScript需要模块化开发？

为什么需要模块化开发？

随着代码复杂程度的提高, 项目也变得越来越难维护, 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}
})
复制代码

在 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();})// CMDdefine(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')}
}
复制代码

了解更多本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。对web开发技术感兴趣的同学，欢迎加入Q群：864305860，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。

转载于:https://juejin.im/post/5c2a138f518825741e7c3ed5

为什么JavaScript需要模块化开发？相关推荐

JavaScript模块化开发技术概述
2019独角兽企业重金招聘Python工程师标准>>> 什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应 ...
前端JAVASCRIPT模块化开发
什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等 ...
seajs的模块化开发--实践笔记
2017-04-02 SeaJS是一个遵循CMD规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.有效的解决复杂项目中命名冲突.依赖.性能等问题. SeaJS ...
前端面试题～有关模块化开发
1.说说你对前端模块化开发的认识. (1)异步模块定义(AMD)规范是 require. js推广的.对模块定义的规范. (2)通用模块定义(CMD)规范是 SeaJS推广的.对模块定义的规范. (3 ...
web前端模块化开发
定义与由来定义模块就是实现特定功能的相互独立的一组方法. 由来背景随着网站逐渐的开发,嵌入网页的js代码越来越庞大,而网页也越来越像桌面程序,需要一个团队去分工协作,进行管理和测试等等.为了更好 ...
JavaScript模块化开发整理
在网上已经有很多关于模块化开发的文章了,这里还是按照自己的理解来整理一下. 随着项目文件的越来越大和需求的越来越贴近现实(我发现现在客户不如:一个领导说我要审批你们报上来的资料,系统发布以后用的还不错 ...
五、Vue模块化开发学习笔记——JavaScript原始功能、匿名函数的解决方案、使用模块作为出口、CommonJS、ES6 export和import的使用
一.JavaScript原始功能 -在网页开发的早期,js制作作为一种脚本语言,做一些简单的表单验证或动画实现等,那个时候代码还是很少的. 那个时候的代码是怎么写的呢? 直接将代码写在<scri ...
JavaScript模块化开发（一）基础知识
2019独角兽企业重金招聘Python工程师标准>>> 随着前段JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理 ...
JavaScript 模块化开发入门
JS 为什么要模块化 JavaScript 语言最初设计的主要作用仅仅是用来验证表单输入的有效性,为Web页面添加一些动画效果等,并不包含太多的高级语言的特性,此时通常直接在HTML页面中编写简单的 ...

为什么JavaScript需要模块化开发？

为什么JavaScript需要模块化开发？相关推荐

最新文章

热门文章