（VueJs）前端模块化

最新推荐文章于 2024-01-24 22:01:38 发布

黑胡子大叔的小屋

最新推荐文章于 2024-01-24 22:01:38 发布

阅读量1.1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/lzl980111/article/details/104806102

版权

前端专栏收录该内容

75 篇文章 0 订阅

订阅专栏

为什么引入模块化思想？

当我们是以一个开发小组的形式开发项目，每个人负责项目的某个模块，若没有模块化思想，各模块之间定义的变量，方法很容易交杂在一起导致错误。

模块化实现的基本思想

闭包

在匿名函数内部，定义一个对象
给对象添加各种需要暴露到外面的属性和方法
将这个对象返回，外面加一个ModuleA接收

var ModuleA=(function(){
//1、定义一个对象
var obj={};
//2、在对象内部添加变量和方法
obj.flag=true    //属性flag
obj.myFunc=function(info){
console.log(info);
//3、返回对象
return obj;
}

使用：

if(ModuleA.flag){
	console.log('输出内容');
}
moduleA.myFunc('输出');

常见的模块化规范：

CommonJS
AMD
CMD
ES6的Modules
export / import
导出和导入，一旦你通过导出的方式给别人暴露出来，任何人只需要通过导入的方式就可以调用。

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Es6模块化</title>
</head>
<body>
<script src="./xiaoming.js" type="module"></script>
<script src="./xiaohong.js" type="module"></script>
<script src="./xiaogang.js" type="module"></script>
</body>
</html>

xiaoming.js:

const name='xiaoming';

function sum(num1,num2) {
    return num1+num2;
}
if (flag){
    console.log(sum(20,300))
}
//导出方式1
export {
    name,sum
}
//导出方式2
export var age=18;
export var flag=true;
export function sum1(num1,num2){
    return num1+num2;
}
//Es5定义类
function Person5() {

}
//Es6定义类
export class Person6 {
    run(){
        console.log('奔跑')
    }
}

//导出方式3   export default   导入这可以自己明明，当然default导出时只能设置一个
const city='山东青岛';
export default city;


//导出方式2
export var age=18;
export var flag=true;

xiaogang.js:


//导入方式1
import {flag} from "./xiaoming.js";
//导入方式2 导入export default时可以随意命名
import abcd from "./xiaoming.js";
//导入方式3 全部统一导入
import * as abc from "./xiaoming.js"
if(flag){
    console.log('很强');
    console.log(abc.name);
    console.log(abcd);
}

输出结果：
在这里插入图片描述

黑胡子大叔的小屋

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
（VueJs）前端模块化

为什么引入模块化思想？当我们是以一个开发小组的形式开发项目，每个人负责项目的某个模块，若没有模块化思想，各模块之间定义的变量，方法很容易交杂在一起导致错误。模块化实现的基本思想闭包在匿名函数内部，定义一个对象给对象添加各种需要暴露到外面的属性和方法将这个对象返回，外面加一个ModuleA接收var ModuleA=(function(){//1、定义一个对象var obj={...
复制链接

扫一扫

专栏目录