js模块化

已于 2022-12-08 22:33:45 修改
阅读量637 收藏 1
点赞数
分类专栏： 前端学习 文章标签： javascript 前端 vue.js
于 2022-12-06 23:16:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16992475/article/details/128211396
版权

文章目录

第1章:模块化入门

1.1.理解什么是模块

  1. 将一个复杂的程序依据一定的规则拆分成单个文件，并最终组合在一起
  2. 这些拆分的文件就是模块，模块内部数据是私有的，只是向外部暴露一些方法与外部其它模块通信

1.2.为什么要模块化?

  1. 降低复杂度，提高解耦性
  2. 避免命名冲突
  3. 更好的分离,按需加载
  4. 更高复用性，高可维护性

1.3模块化概念带来的问题

  1. 请求过多
  2. 依赖模糊
  3. 难以维护

第2章:模块化规范

前言:一个大的项目必定会使用模块化技术，使用模块化就会使用相应的模块化规范，现在比较流行的模块化规范有以下2种: CommonJS、ES6e

2.1.CommonJS

2.1.1规范

  1. 官网: http://wiki.commonjs.org/wiki/Modules

  2. 每个文件都是一个模块。

  3. CommonJS模块化的代码既可在服务端（node）运行，也可在浏览器（browser浏览器）端运行。（es6模块化只能写浏览器端）

  4. 服务器端:模块化的代码可直接运行。

  5. 浏览器端:模块化的代码要经过 Browserify (http://browserify.org）编译（类比：es6的箭头函数不能直接被浏览器所识别，需要借助babel编译）。

2.1.2基本语法

1．暴露语法:

  1. 第一种方式: module.exports = value

  2. 第二种方式: exports.xxx = value

2. 引入语法：

  1. 引入第三方模块:require(xxx)，xx为模块名

  2. 引入自定义模块: require(xxx)，xxx为模块文件路径

3.备注:内置关系

在这里插入图片描述

验证：module.exports == exports

在这里插入图片描述

module.exports使用示例

module1.js使用module.exports语法，暴露出一个对象。app.js中引入该暴露的对象，并使用

module1.js

/* 
	module1使用module.exports = xxxx 去暴露，xxx就是暴露的内容
*/
//没有暴露data和msg(被保护了)
const data = 'atguigu'
const msg = 'hello'

module.exports = {
	showData (){
		console.log(data);
	},
	showMsg(){
		console.log(msg);
	}
}
app.js
// 暴露的本质是module.exports的内容
// 引入的内容是什么，取决于暴露的是什么
const m1 = require('./module1') //引入自定义模块
m1.showData()
m1.showMsg()

exports使用示例

module2.js使用exports语法，往暴露的对象中添加属性。app.js中引入该暴露的对象，并使用

module2.js
/* 
	module2使用exports.xxxxx = value 去暴露，value就是暴露的内容,xxxxx是他的名字
  （注意：module.exports和exports不能混用，若混用了，以module.exports
         其实，最终暴露的对象，只认module.exports，只不过刚开始exports的引用初始值就被赋值为module.exports了）
*/

exports.data  = 'atguigu2'
exports.msg = 'hello2'

exports.sum = function (a,b){
	console.log(a+b);
}

exports.sub = function (a,b){
	console.log(a-b);
}
app.js
const m2 = require('./module2') //引入自定义模块
const m22 = require('./module2') //引入自定义模块

console.log(m2==m22) // true

console.log(m2.data);
console.log(m2.msg);
m2.sum(1,2)
m2.sub(3,4)

第三方模块使用示例

第一步

npm init --yes，在当前文件夹中，初始化包管理配置（会生成package.json文件，安装包时，会将包安装在当前文件的node_modules文件夹中）
（当使用require引入第三方模块时，会先从当前文件夹中寻找node_modules文件夹，并从中找到对应的模块，如果没找到，则会到当前文件夹的父文件夹中寻找node_modules文件夹，并从中找到对应的模块）

第二步

npm install uniq，安装uniq包

第三步

引入，并使用

// app.js
const uniq = require('uniq') // 引入第三方模块模块(只需要写模块名)
const arr = [1,3,3,4,2,5]
console.log(uniq(arr));

2.1.3 commonJs在浏览器使用

问题引入

上述符合commonJs模块化规范的代码，使用node命令能够正常执行，但是浏览器并不能识别commonJs模块化的语言，需要使用browserify来编译之后，才能被浏览器使用，browserify官网：https://browserify.org/。

//<module1.js>
const data = 'atguigu'
const msg = 'hello'

module.exports = {
	showData (){
		console.log(data);
	},
	showMsg(){
		console.log(msg);
	}
}

// <app.js>
const m1 = require('./module1') // 引入自定义模块
const uniq = require('uniq')    // 引入第三方模块

m1.showData()
m1.showMsg()
const arr = [1,3,3,4,2,5]
console.log(uniq(arr));

// <index.html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
	</head>
	<body>
		<!-- 直接引入app.js，将不可用，因为app.js使用了CommonJs模块化语法，浏览器并不能识别 -->
		<script type="text/javascript" src="./app.js"></script>
	</body>
</html>
browserify使用

首先需要安装browserify

# 全局安装
npm i browserify -g

编译指定文件

browserify ./app.js -o ./build.js

在index.html中引入build.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
	</head>
	<body>
		<script type="text/javascript" src="./build.js"></script>
	</body>
</html>

2.2 ES6模块化规范

（ES6就是ES2015，es6推出新语法、模块化规范、Promise，es7提出async/await）

2.2.1 规范

  1. 每个文件都是一个模块。

  2. 要借助 Babel（能把ES6代码编译成ES5的代码，jsx语法转为js）和Browserify依次编译代码，才能在浏览器端运行。

  3. Babel中文网: https://www.babeljs.cn/

2.2.2 基本语法

1. 暴露模块:

  1. 分别暴露: export 暴露内容

  2. 统一暴露: export {暴露内容1，暴露内容2}

  3. 默认暴露: export defalut 暴露内容

2. 引入模块:

  1. 方法1: import {xxx,yyy} from ‘./module1’

  2. 方法2: import module3 from ‘./module3’

3.使用规则:

  1. 若使用分别暴露、统一暴露的方式暴露内容,那么就要用方法1引入。

  2. 若使用默认暴露的方式暴露内容，那么就要用方法2引入。

ES6暴露使用示例

问题引入
// <module1.js>
/* 
	module1中使用【分别暴露】
*/
export const data = 'atguigu'
export const msg = 'hello,0826'

export function showData(){
	console.log(data);
}
export function showMsg(){
	console.log(msg);
}

/*错误写法
const mistake = 'mistake '
export mistake
*/

// <app.js>
import {data,msg,showData,showMsg} from './module1'
console.log(data)
console.log(msg)
showData()
showMsg()

// <index.html>
/* 直接引入app.js，因为app.js中使用了es6的模块化语法，而不能识别报错 */
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
	</head>
	<body>
		<script type="text/javascript" src="./app.js"></script>
	</body>
</html>
babel使用
第一步：准备相关依赖包

准备相关依赖包（为编译代码做准备）

  • 全局安装: babel-cli、Browserify，执行命令如下:

    npm install babel-cli browserify -g
    • 局部安装：babel-preset-es2015（es2015就是es6）
      npm install babel-preset-es2015

  • 定义 .babelrc 文件（前面有.）

    {
	"presets":["es2015"]
}
第二步：编译代码
  • 进入目录，使用Babel将ES6编译为ES5代码:
    # 将当前文件夹中的src下的文件，通过babel 编译到 当前的build文件夹下
babel ./src -d ./build
  • 继续使用Browserify编译上一步的js
    （因为上一步将es6的模块化语法转为了commonJs模块化语法，浏览器依然无法识别其中的require关键字）:
    browserify ./build/app.js -o ./build/index.js
第三步：在页面中引入测试
<!-- index.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
	</head>
	<body>
		<script type="text/javascript" src="../build/build.js"></script>
	</body>
</html>

在这里插入图片描述

ES6模块化操作流程总结
1. 创建文件结构如下
			-3_ES6_modular
				-src
					-app.js
					-module1.js
					-index.html
				-.babelrc，内容如下：

					{
						"presets": ["es2015"]
					}

 2. 准备相关包
			npm install babel-cli browserify -g 
			npm install babel-preset-es2015

 3. babel编译为ES5，命令如下：babel ./src -d ./build
		browserify继续编译，命令如下：browserify ./build/app.js -o ./build/build.js
		备注：命令不要记！！我们学习的是模块化的暴露、引入语法，不是命令，以后也不敲命令。
		
 4. index.html页面中引入build/build.js

ES6多种暴露使用示例

分别暴露
// <module1.js>
/* 
	module1中使用【分别暴露】
*/

export const data = 'atguigu'
export const msg = 'hello,0826'

export function showData(){
	console.log(data);
}
export function showMsg(){
	console.log(msg);
}

// <module2.js>
/* 
	module2中使用【分别暴露】，但暴露了一个和module1重名的一个data
*/
export const data = '北七家镇宏福科技园'
统一暴露
/* 
	module3中使用【统一暴露】
*/

const school = '尚硅谷'
const person = {
	name:'老刘',
	age:19,
	sex:'女'
}
function getLaoliu(){
	console.log(person);
}

//统一暴露(精简版)---用的多
export {school,person,getLaoliu}

//统一暴露(完整版) （所以上面精简版这不是对象的简写形式）
// export {school as a,person as b,getLaoliu as c}
默认暴露
/* 
	module4中使用【默认暴露】-----只能暴露一次！！！！
	（右侧得为一个表达式，所谓的表达式就是，能获得值，比如左边使用var xxx = 右边，能接收到值）
*/
export default {
	name:"wc",
	age:5,
}
多种暴露
// <module5.js>
// 同时使用多种暴露方式
//使用【分别暴露】
export const teacher1 = {name:'强哥',age:15}
export const teacher2 = {name:'歌神',age:17}

//使用【统一暴露】
const stu1 = {name:'王宇',age:18}
const stu2 = {name:'宇航',age:19}
export {stu1,stu2}
export {stu1 as stu11,stu2 as stu22}

//使用【默认暴露】
export default {
	school:'尚硅谷',
	address:'宏福科技园',
	subjects:['前端','java','大数据']
}
引入模块
// <app.js>
//引入【分别暴露】的模块（这里的都不是解构赋值，根本不符合解构赋值的语法）
import {data,showData,showMsg} from './module1'

//引入【分别暴露】的模块+重命名
import {data as data2} from './module2'

//引入【分别暴露】的模块+打包引入
import * as module1 from './module1'

//引入【统一暴露】的模块（统一暴露和分别暴露，最后引入的方式都是一样的）
import {school,person,getLaoliu} from './module3'

//引入【默认暴露】的模块
import module4 from './module4'

//引入多种暴露方式的模块（module5是默认暴露，其它是分别暴露或统一暴露）
import module5,{teacher1,teacher2,stu1,stu2,stu11,stu22} from './module5'
console.log(module5);
console.log(teacher1);
console.log(teacher2);
console.log(stu1);
console.log(stu2);
ps酷教程
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript模块化
02-10
javascript模块化
JS模块化
最新发布
Dani05的博客
10-04 974
模块化是指将一个复杂的程序依据一定的规则（规范）封装成几个块（文件），并进行组合在一起。最早我们开发将所有的代码写在一个js文件中，随着需求越来越复杂，代码量越来越大，如果仍然把所有代码写在一个js文件中，那么代码耦合度过高不方便后期维护，也不方便程序员找到某一个功能点的代码，所有东西写在一个文件也容易污染全局环境。
Javascript模块化编程
03-02
Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript不是一种模块化编程语言，它不支持"类"（class），更遑论"模块...
JavaScript模块化编程
12-13
介绍js编程中使用模块化方式进行代码编写，模块化一种将系统分离成独立功能部分的方法，可将系统分割成独立的功能部分，严格定义模块接口、模块间具有透明性
Javascript模块化机制实现原理详解
10-15
主要介绍了Javascript模块化机制实现原理详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
JS模块化-三个模块化规范的区别
qq_42496307的博客
06-20 1167
模块化规范 CommonJS Node.js : 服务器端 Browserify : 浏览器端 也称为js的打包工具 基本语法: 定义暴露模块 : exportsexports.xxx = value module.exports = value 引入模块 : requirevar module = require('模块名/模块相对路径') 引入模块发生在什么时候? ...
JS模块化编程
前端小白
07-14 4352
1. 背景 　　JS的强大已经不用解释了，从Web RIA到Node服务器，到处都是JS的身影。然而由于出身的缘故，JS本身在大规模应用上存在着很多问题，比如模块化编程。本文以浏览器端模块化编程为内容，重点介绍AMD规范和CMD规范。在服务器端，NodeJS遵守的Common规范我们这里暂不讨论。 　　对于计算机语言，模块化编程是必不可少的，对架构设计、代码复用起到至关重要的作用，工程中引入别
js 模块化
php_martin的博客
08-22 235
js 模块化
javascript模块化详解
weixin_34185560的博客
03-17 71
模块化：每个模块只完成一个独立的功能，然后提供该功能的接口。模块间通过接口访问。模块中的（过程和数据）对于其它模块来说是私有的（不能访问修改） 原始人写法： 1 function m1(){ 2 　　//... 3 } 4 function m2(){ 5 　　//... 6 } 对象封装写法 1 var loveThing = { 2 mylove : ...
js中的模块化
weixin_48864616的博客
12-07 1192
为什么要用js模块化 随着前端的发展，web技术日趋成熟。项目用的js文件也就越来越多，代码量越来越多。之前一个项目可能一个页面只有一个js，但是随着js逐渐拆分，有两个问题需要我们解决。 1.变量名的冲突 2.引入关系:多个文件之间存在依赖关系，需要保证加载顺序的准确。 模块化： 类似于积木，模块化就是将大文件拆分成小单元的一种方式。 优点： 1.提高代码的复用性 2.提高代码的可维护性 3.按需加载 模块化的解决方案： 1.闭包+自执行函数 格式 const 模块名 = (
JS中的模块化
izwell的博客
12-14 292
今天看YDKJS时，明白了一个以前一直疑惑的东西，那就是JS中的模块开发，之前也使用过require.s进行模块化的开发，但是一直不能明白其中具体的原理，看了YDKJS的讲解后，真的是豁然开朗，在此记录其中一个实例的代码，并进行解析。 var myModules = (function foo(){ var modules = {}; function get(name){ re...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值