Vue.js—模块化开发

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

cb++

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

阅读量212

点赞数

本文链接：https://blog.csdn.net/weixin_44768794/article/details/115328640

版权

模块化开发

初识前端模块化
- 1.1 使用模块作为出口
- 1.2 CommonJs
ES6模块化的导入和导出
- 2.1 export指令
- 2.2 import导入指令

初识前端模块化

■ 在网页开发的早期，js制作作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的。
□ 那个时候的代码是怎么写的呢？直接将代码写在

1.1 使用模块作为出口

var ModuleA = (function(){
  var obj = {}
  obj.flag = true
  obj.sum = function(info) {
    console.log('info');
  }
  return obj
})()

1.2 CommonJs

■ 模块化有两个核心：导入和导出
■ CommonJs的导出：

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

■ CommonJs的导入

let {text,demo,flag} = require('moduleA');

//  等同于
let _mA = require('moduleA');
let text = _mA.text;
let flag = _mA.flag;
let demo = _mA.demo;

ES6模块化的导入和导出

2.1 export指令

index.html
在script标签里面加上 type = ‘module’，告诉浏览器你用的是ES6

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="/js/vue.js"></script>
  <script src="/前端模块化/模块化雏形/ES6模块化/aaa.js" type = 'module'></script>
  <script src="/前端模块化/模块化雏形/ES6模块化/bbb.js" type = 'module'></script>
</body>
</html>

aaa.js
用export导出，有四种方式

var name = '小明'
var age = 18
var flag = true

function sum(sum1, sum2) {
  return sum1 + sum2
}

if (flag) {
  console.log(sum(10, 20));
}
// 导出方法一，{}
export {
  flag, sum
}

// 导出方式二
export var num1 = 0
export var num2 = 1

// 导出对象和函数
export function mul(a, b) {
  return a * b
}

export class Person {
  sum() {
    console.log("sum");

  }
}

//default导出,只能定义一个
const name = "北京人"
export default name

2.2 import导入指令

import导入有五种方式

// 导入{}中定义的变量
import { flag, sum } from "./aaa.js";

if (flag) {
  console.log("小明是天才，哈哈哈哈");
  console.log(sum(20, 30));
}
// 直接导入定义的变量
import { num1, num2 } from "./aaa.js"
console.log(num1);
console.log(num2);

//导入export的function/class
import { mul, Person } from "./aaa.js"
console.log(mul(20, 40));

const p = new Person()
p.sum()

// 导入default定义的变量
import name from "./aaa.js"
console.log(name);

// 统一全部导入
import * as aaa from "./aaa.js"
console.log(aaa.flag);

在这里插入图片描述

cb++

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js—模块化开发

模块化开发初识前端模块化1.1 使用模块作为出口1.2 CommonJsES6模块化的导入和导出2.1 export指令2.2 import导入指令初识前端模块化■ 在网页开发的早期，js制作作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的。□ 那个时候的代码是怎么写的呢？直接将代码写在1.1 使用模块作为出口var ModuleA = (function(){ var obj = {} obj.flag = true obj.sum = function(in
复制链接

扫一扫