首页 > Web开发 > 详细

35. JS 模块化开发

时间:2021-07-28 09:47:58      阅读:36      评论:0      收藏:0      [点我收藏+]

在网页开发的早期,js制作作为一种脚本语言,做一些简单的表单验证或动画 实现等,那个时候代码还是很少的。

以前的代码 直接将代码写在<script>标签中即可

随着ajax异步请求的出现,慢慢形成了前后端的分离

为了应对代码量的剧增,我们通常会将代码组织在多个js文件中,进行维 护。但是这种维护方式,依然不能避免一些灾难性的问题。

例如下面三个JS代码:

技术分享图片

 

 

 user1.js

技术分享图片
var name = "bihu";
var age = 18;
var flag = false;

var add = function(a,b){
    return a + b;
}
View Code

 user2.js

技术分享图片
var name = "bihu";
var age = 18;
var flag = false;

var add = function(a,b){
    return a + b;
}
View Code

 Util.js

if (flag) {
    console.log("我真是帅哥");
} 

学过的都知道,他打印还是不打印这句话,取决于 你引入JavaScript的顺序,因为这里变量名冲突了。

如果开发大项目 怎么可能也是写在一起,如果有100个JS文件 但凡有一个冲突 你就很难找了。

 

解决方案:

1 . 最原始的方法就是使用 “闭包”

2 .前端模块化开发

 

幸运的是,前端模块化开发已经有了很多既有的规范,以及对应的实现方案。

常见的模块化规范:  CommonJS、AMD、CMD,也有ES6的Modules




 

ES模块化的  导出 和 导入

首先 你写的JS 文件 ,引用文件的时候 type 写 module 即可,例如:

        <script src="js/A.js" type="module"></script>
        <script src="js/B.js" type="module"></script>
        <script src="js/C.js" type="module"></script>

 

那么A 和 B  和 C 之间,他们都不是独立的,我在 ABC这三个js文件中写入: var i = 1; 、var i = 2;、 var i = 3;

如果我打印i ,会发现报错:

技术分享图片
<!DOCTYPE html>
<html lang="zh">
<head>
    <title></title>
</head>
<body>
        
        <script src="js/A.js" type="module"></script>
        <script src="js/B.js" type="module"></script>
        <script src="js/C.js" type="module"></script>
        
        
        
        <script type="text/javascript">
            console.log(i)
        </script>
</body>
</html>
View Code

技术分享图片

 

 

 会说i没定义,因为每个js都是一个模块 独立的,所以呢取不到 变量 i 的值。

 

解决方案就是 导入 和 导出:【export 和 import】




 

导出:

导出有很多种方式,导出的数据可以是变量、函数、对象...

第一种导出方式:  【个人强烈推荐这种】

如果我要访问 a中的 变量 i 【值是 1 】:

例:
export{
   aaa,bbb,ccc,ddd 
}


A.js:
var i = 1;
//直接写变量名即可,ES6写法 别忘了
export{i}

这样就吧一个模块中的数据导出了,导出了之后,如果你要用导出的值,那么你在要用的模块上这样导入:

导入:

这里新建Show.js 引入的时候也是module,然后在Show.js中导入A.js 导出的值,然后打印 i 

import {i} from "./A.js"

//这里已导入 i  
//接下来直接打印:
console.log(i)

 

注意! 这里只能导入A.js的 i  ,因为只有你模块导出了 我才能 导入 你模块 导出 的值!!

 


 

第二种方式导出:【直接导出变量】

直接

export var xxx = aaa;   

export var yyy = bbb;   

export var zzz = ccc;   

 

这样既可...


 

 

第三种方式导出:【直接导出 函数、类】

直接导出函数:
export function add(num1,num2){
    return num1 + num2;
}

 直接导出类:

var i = 1;
//直接写变量名即可,ES6写法 别忘了
export{i}

export class Person{
    add(num1,num2){
        return num1 + num2;
    }
}

然后你在Show.js中导入:

import {Person} from "./A.js"

//这里已导入 Person
//接下来直接赋值 然后使用函数:

const show = new Person();

console.log(show.add(1,9));

 


 

还有一种:export default

导入默认值,这个导入的时候可以任意取名字,但是只能导出一个 export default 。【export default在同一个模块中,不允许同时存在多个。】

某些情况下,一个模块中包含某个的功能,我们并不希望给这个功能命名,而且让导入者可以自己来命名,这个时候就可以使用export default

 

A.js :

var str = "广东省";

//只能导出一个 默认的  export default
export default str;

Show.js:

//因为导出的是 默认值 ,所以下面 可以随便起名 不用花括号  下面起的是 address:
import address from "./A.js"

//下面打印出来的就是‘广东省’了
console.log(address)

 

因为只能有一个default ,那么你可以一起携带其他,例如:

A.js :

var str = "广东省";
var i = 111;

export default str;
export {
   i
}

Show.js:

//默认值直接取名,但是i不能取名 且  加 花括号!
import address, {i} from "./A.js"

//下面打印出来的就是‘广东省’ 和 1 了 了
console.log(i)
console.log(address)

 



导出说了那么多种,但是第一种 和 默认用的多,

导入有一种写法:导入全部值 且 取 别名

 

如果我们希望某个模块中所有的信息都导入,一个个导入显然有些麻烦:

通过*可以导入模块中所有的export变量

但是通常情况下我们需要给*起一个别名,方便后续的使用:

 

A.js:

var name = "BiHu";
var age = 18;
var sex = ‘男‘;

export {name,age,sex}

 

Show.js:

//这里导入全部,用 as 取个别名
import  * as all from "./A.js"

//下面打印 直接 all.x即可:
console.log(all.name)
console.log(all.age)
console.log(all.sex)

 

所以这就是 Js 模块化开发. 这个要掌握。

 

35. JS 模块化开发

原文:https://www.cnblogs.com/bi-hu/p/15067964.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!