[Vue] 模块化开发

最新推荐文章于 2023-08-19 19:24:11 发布

秃小陈

最新推荐文章于 2023-08-19 19:24:11 发布

阅读量639

点赞数 1

分类专栏： vue 笔记 JavaScript 文章标签： vue js javascript

本文链接：https://blog.csdn.net/m0_47652477/article/details/116722685

版权

重点中的重点，懂得都懂

第一章模块化开发介绍
第二章 Webpack

第一章模块化开发介绍

1.1 为什么需要模块化开发

1.1.1 JavaScript的原始功能

在也买你开发的早期，js制作作为一种脚本语言，做一些简单的表单验证或者动画的实现等，那个时候代码还是很少的
但是随着ajax的异步请求的出现，慢慢形成了前后端的分离
- 客户端需要完成的事情越来越多，代码量与日俱增
- 为了应对代码量的剧增，我们通常会将代码阻止在多个js文件中，进行维护
- 但是这种维护方式，会出现很大的问题
  - 例如：全局变量同名的问题
  - 另外，这种代码的编写方式对js文件的依赖顺序几乎是强制性的

对于全局变量同名的早期解决方案：闭包（匿名函数）

将我们一个文件中的代码都放在一个匿名函数里面，形成一个闭包，这样，不同文件之间的变量就不会重名了
但是，这样会导致另外一个问题，代码的复用性变得十分低，我想在另外一个文件引用之前的变量，抱歉，做不到
这时候，模块化的雏形就有了，我们可以在闭包中创建一个obj对象，将我们想要传递的东西都放进去，然后return obj，同时，我们不能再用匿名函数了，给我们的闭包函数定义一个名字，这样别的文件通过调用这个函数就可以接收到这个obj，同时还可以使用我们想要的变量或者方法了

//给闭包函数命名
var module = (function (){
     
		var obj = {
     };
    
    	var flag = true;
    
    	function sum(num1,num2) {
     
            return sum1 + sum2;
        }
    
    	obj.flag = flag;
    	obj.sum = sum;
    
    	return obj;
    })()


//这是另一个闭包函数
(function(){
     
    //我想要调用flag
    var flag = module.flag;
})()

这就是模块的最基础的封装事实上的模块的封装还有很多高级的话题
- 幸运的是,前端模块化开发已经有了很多既有的规范,以及对应的实现方案
常见的模块化规范
- CommonJS 😦 Node用他的规范实现了)
- AMD
- CMD
- 也有ES6的Modules

1.1.2 CommonJS规范(了解)

模块化有两个核心: 导入和导出

在Node环境中,就可以使用这种语法

CommonJS的导出

moudle.exports = {
       
    flag: true,
    test(a,b){
       
        return a+b;
    },
    demo(a,b){
       
        return a+b;
    }
}

CommonJS的导入

//CommonJS的模块,这里相当于对对象的解构
let {
       test , demo , flag} = require('mouduleA');

//等同于
let a = require('mouduleA');

let test = a.test;
let demo = a.demo;
let flag = a.flag;

1.2 ES6的module (常用)

1.2.1 export和import的使用

//index文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>我就是来搞笑的</h2>

<script src="bbb.js" type="module"></script>
<script src="aaa.js" type="module"></script>

</body>
</html>

注意我在script标签加入了type="module"这段代码,意思就是将这对应的文件当作一个模块使用

这个js文件用来演示导出

//aaa.js
let flag = true;

let name = '小明';

let age = 20;

function sum(a, b) {
   
    return a + b;
}

if (flag) {
   
    console.log(sum(

最低0.47元/天解锁文章

秃小陈

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
[Vue] 模块化开发

重点中的重点，懂得都懂第一章模块化开发介绍1.1 为什么需要模块化开发1.1.1 JavaScript的原始功能1.1.2 CommonJS规范(了解)1.2 ES6的module (常用)1.2.1 export和import的使用1.2.2 export default的使用第二章 Webpack2.1 Webpack介绍前端模块化打包webpack和 grunt/gulp的对比2.2 webpack安装2.3 webpack的基本使用2.4 webpack的配置2.4.1 webpack.con
复制链接

扫一扫