Vue 模块化开发
模块化开发
JavaScript原始功能
-
在网页开发的早期,js制作作为一种脚本语言,做一些简单的表单验证或动画实现等,那个时候代码还是很少的。
- 那个时候的代码是怎么写的呢?直接将代码写在
<script>
标签中即可
- 那个时候的代码是怎么写的呢?直接将代码写在
-
随着ajax异步请求的出现,慢慢形成了前后端的分离
- 客户端需要完成的事情越来越多,代码量也是与日俱增。
- 为了应对代码量的剧增,我们通常会将代码组织在多个js文件中,进行维护。
- 但是这种维护方式,依然不能避免一些灾难性的问题。
利用匿名函数的解决方案
- 我们可以使用匿名函数来解决方面的重名问题
- 我们先创建两个js文件
- 在aaa.js文件中,我们使用匿名函数
(function() {
var lazy = true
})
- 但是如果我们希望在main.js文件中,用到lazy,应该如何处理呢?
- 显然,另外一个文件中不容易使用,因为lazy是一个局部变量。
使用模块作为出口
常见的模块化规范:CommonJS、AMD、CMD,也有ES6的Modules
CommonJS
- 模块化有两个核心:导出和导入
- CommonJS的导出:
modul.exports = {
lazy: true,
test(a, b) {
return a + b
},
demo(a, b) {
return a * b
}
}
CommonJS的导入
//CommonJs模块
let {test, demo, lazy} = require('moduleA')
//等同于
let _mA = require('moduleA')
let test = _mA.text
let demo = _mA.demo
let lazy = _mA.lazy
ES6的export指令
- export指令用于导出变量,比如下面的代码:
//info.js
export let name = 'why'
export let age = 18
export let height = 1.78
- 上面的代码还有另外一种写法:
//info.js
let name = 'why'
let age = 18
let height = 1.78
export {name, age, height}
- 上面我们主要输出变量,也可以输出函数或者输出类
- 某些情况下,一个模块中包含某个的功能,我们并不希望给这个功能命名,而且让导入者可以自己来命名
- 这个时候就可以使用export default
// info.js
export default function () {
console.log('default function')
}
- 我们来到main.js中,这样使用就可以了
- 这里的myLazy是我自己命名的,你可以根据需要命名它对应的名字
inport myLazy fron './info.js'
myLazy()
- 另外,需要注意:
- export default在同一个模块中,不允许同时存在多个
- 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应- 的这个模块了
- 首先,我们需要在HTML代码中引入两个js文件,并且类型需要设置为module
<script src="info.js" type="module"></script>
<script src="main.js" type="module"></script>
- import指令用于导入模块中的内容,比如main.js的代码
inport {name, age, height} from "./info.js"
console.log(name, age, heigth)
- 如果我们希望某个模块中所有的信息都导入,一个个导入显然有些麻烦:
- 通过*可以导入模块中所有的export变量
- 但是通常情况下我们需要给*起一个别名,方便后续的使用
import * as info from './info.js'
console.log(info.name, info.age, info.height, info.friends)
本文来自博客园,作者:懒惰ing,转载请注明原文链接:https://www.cnblogs.com/landuo629/p/12426345.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器