这期内容当中小编将会给大家带来有关JavaScript 模块化如何理解,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
前言:
1.概念
将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起;
块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信。
2.模块化的好处
避免命名冲突(减少命名空间污染);
更好的分离, 按需加载;
更高复用性;
更高可维护性。
3.引入多个script标签后出现的问题
请求过多(依赖的模块过多,请求就会过多);
依赖模糊(不知道模块的具体依赖关系,导致加载顺序出错);
难以维护(以上两个原因就会造成这个结果)。
//index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jQuery.js"></script> <script src="module.js"></script></head><body> <div>123</div></body><script> myModule.foo(); myModule.bar(); console.log(myModule.data) ; myModule.data = 'xxxx'; myModule.foo();</script></html>
//module.js IIFE(匿名函数自调用);(function(window,$){ let data = "www.baidu.com"; function foo() { console.log(`foo() ${data}`); //这里需要使用jQuery库 $('body').css('background', 'red') } function bar() { console.log(`bar() ${data}`); otherFun(); } function otherFun() { console.log(`otherFun()`); } window.myModule = { foo, bar };})(window, jQuery)
一、CommonJS
NODE 就是基于
commonJS
模块规范,每一个文件就是一个模块;有自己的作用域;在服务器端,模块的加载是同步的;在浏览器端,模块需提前编译打包处理
特点:
所有代码都运行在模块作用域,不会污染全局作用域;
模块可以多次加载,但是只会在第一次加载时运行一次,然后运行结果就被缓存了,以后再加载,就直接读取缓存结果。要想让模块再次运行,必须清除缓存。
模块加载的顺序,按照其在代码中出现的顺序。
语法:
暴露模块:
js module.exports = value
或者js exports.xxx = value
引入模块:
js require('xxx')
如果是第三方模块,xxx为模块名;如果是自定义模块,xxx为模块文件路径
CommonJS
规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实是加载该模块的module.exports属性。
require
命令用于加载模块文件。require命令的基本功能是,读入并执行一个JavaScript文件,然后返回该模块的exports对象。如果没有发现指定模块,会报错。
CommonJS
模块的加载机制是,输入的是被输出的值的拷贝。也就是说,一旦输出一个值,模块内部的变化就影响不到这个值
二、AMD
相比于CommonJS的同步加载模块,AMD更适合于浏览器端的非同步模块加载,因为AMD允许指定回调函数
目录结构
使用require.js
<!-- index.html --><script src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.js"></script>
//定义一个没有依赖的module1模块define('module1', () => { let count = 0; const add = () => ++ count; const reset = () => count = 0; const upperCase = string => string.toUpperCase() return { add, reset, upperCase }})
//定义一个有依赖的module2模块,依赖module1define('module2',['module1'], (module1) => { const showMsg = () => module1.upperCase('hello-amd'); return { showMsg }})
<!-- 在html文件中使用模块 --><body><script> require.config({ paths: { module1: './modules/module1', module2: './modules/module2' } }) require(['module1', 'module2'], (module1, module2) => { console.log(module1.add()) // 1 console.log(module1.reset()) //0 console.log(module2.showMsg()) //HELLO-AMD })</script></body>
三、CMD
CMD集CommonJS与AMD的优点于一身,cmd 规范专门用于浏览器端,模块的加载是异步的,模块使用时才会加载执行(实现了按需加载,而AMD是不支持按需加载的)
目录结构
使用sea.js
<script src="https://cdn.bootcdn.net/ajax/libs/seajs/3.0.3/sea.js"></script>
//定义模块module1define((require, exports, module) => { let string = 'I am a string'; const readString = () => 'module1 show() ' + string; //向外暴露 exports.readString = readString;})
//定义模块module2define((require, exports, module) => { exports.msg = "正是在下啊"})
//定义模块moduledefine((require, exports, module) => { //引入依赖模块(同步) var module1 = require('./module1'); console.log(module1.readString()) // module1 show() I am a string //引入依赖模块(异步) require.async('./module2', md2 => { console.log(`这是异步引入的:${md2.msg}`) //这是异步引入的:正是在下啊 })})
<!-- html文件使用module --><body><script> seajs.use('./modules/module')</script>
四、ES6模块化
ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS 和 AMD 模块,都只能在运行时确定这些东西。
两个关键字 import和export
import 导入
export 导出
//mian.jsexport default { showMsg() { console.log('hahahahahah') }}export const msg = "正是花好月圆时!"//index.jsimport module1 from "./module1"; //对应export defaultmodule1.showMsg()import { msg } from './module1'; //对应exportconsole.log(msg)
上述就是小编为大家分享的JavaScript 模块化如何理解了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注编程网行业资讯频道。