一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。
自学前端
- 前文
- 本文是我自学vue的一些知识以及个人理解, 希望帮助到一些想要学习前端的小白朋友
- 介绍本次学习的是vue中的模块化
- 这是基于我学习的笔记而来的文章
JavaScript原始功能
- 在网页开发的早期 , js制作作为一种脚本语言, 做一些简单的表单验证或动画实现的那个, 那个时候的代码还是很少见得随着ajax异步请求的出现, 慢慢形成了前后端的分离客户端的需要完成的事情越来越多, 代码量也是与日俱增为了应对代码量的剧增, 我们通常会将代码组织子多个js文件中, 进行维护但是这种维护方式, 依然不能避免一些灾难性的问题 另外, 这种代码编写方式对js文件的依赖顺序几乎是强制性的但是当js文件过多, 比如有几十个的时候, 弄清楚它们的顺序是一件比较同时的事情而且即使你弄清楚顺序了, 也不能避免上面出现的这种尴尬的问题发生
使用模块作为出口
- 我们可以使用将需要暴露到外面的变量, 使用一个模块作为出口非常简单, 在匿名函数内部, 定义一个对象给对象添加各种需要暴露到外面的属性和方法(不需要包露的直接定义即可)最后将这个对象返回, 并且在外面使用了一个MoudleA接受 接下来, 我们在main.js中怎么使用呢我们只需要使用属于自己的属性和方法即可 这就是模块最基础的封装, 事实上模块的封装还有很多高级的话题:单是我们这里就是要认识一下为什么需要模块, 以及模块的原始雏形幸运的是, 前端模块化开发已经有了很多的规范以及对应的实现方案
CommonJS(了解)
- 模块化有两个核心:
- 导出和导入CommonJS的导出:
-
module.exports = { flag:true, test(a, b) { return a + b }, demo(a, b) { return a = b } } - CommonJS的导入
-
//CommonJS模块 let {test, demo, flag} = require('moduleA'); //等同于 let _mA = require('moduleA'); let test = _mA.test; let demo = _mA.demo; let flag = _mA.flag; //export(导出)/ import(导出)
export基本使用(导出)
- export指令用于导出变量, 比如下面的代码
-
//导出方式一: export { flag, sum } //导出方式二: export var num1 = 1000; export var height = 1.88 //3. 导出函数/ 类 export function mul(num1, num2) { return num1 * num2 }
-
export default
- 某些情况下, 一个模块中包含某个的功能, 我们并不希望给这个功能命名, 而且让导入这自己来命名 这个时候就可以使用export default 另外, 需要注意:export default在同一个模块中, 不允许同时存在多个
import使用(导入)
- 如果我们希望摸个模块中所有的信息都导入, 一个个导入显然有些麻烦通过可以到入模块中所有的export变量但是通常情况下我么需要给起一个别名, 方便后续的使用
后记
- 希望对对前端有兴趣的朋友们有帮助
- 这篇文章主要是关于vue模块化的文章, 希望大家喜欢
- vue的作者是中国人尤雨溪, 非常厉害的人
