主要内容:

1. 什么是模块化思维?

2.  ES6包的封装思想

一、什么是模块化思维呢?

现实工作中, 一个项目可能会有多个人同时开发. 然后, 将所有人开发的内容, 合并到一个文件中. 比如:
1. 有3三个人同时开发, 一个人一个js文件, 最后引入到main.js
2. 每个人单独写, 这样, 定义的变量可能会重名, 那么在main.js中取值赋值就可能会出现问题

如何解决这个问题呢? 我们使用了闭包的写法. 然后给闭包设置一个返回值. 这样相互之间就彼此隔离开了. 来看下面的一个案例.

张三开发的js脚本aaa.js

let module1 = (function(){

    let name = "张三"

    let flag = true

    function add() {

        console.log("这是aaa里面的add方法")

    }

    let p = {

        flag: flag,

        name: name

    }

    return p

})()

张三定义了两个变量: flag和name, 并最终作为一个对象返回了

李四开发的脚本bbb.js

let module2 = (function(){

    let flag = false

    let use = "我是use"

    function enable() {

        console.log("bbb里面的enable函数")

    }

    let phone = {

        flag: flag,

        use: use

    }

    return phone;

})()

李四在脚本中也定义了两个变量 flag和use. 并最终作为一个对象返回

张三, 李四都定义了一个相同的变量flag

最终,项目完成了, 要将二者合并, 我们将其合并到总页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="aaa.js"></script>

    <script src="bbb.js"></script>

    在这里就相当于导入

    <script>

        console.log(module1.flag)

        console.log(module2.flag)

    </script>

</head>

<body>

</body>

</html>

我们在引入变量的时候, 分别使用别名, 两个就不会冲突了.

之所以能够让两个js脚本相互隔离, 是闭包的在起作用. 闭包就是一个简单地模块化思维的雏形. 他将每个人开发的东西进行了模块化封装.

二.  ES6包的封装思想

随着项目的越来越复杂, 也形成了很多包, 用来封装模块. 常用的用commonJs, ES6等

下面, 我们重点来看看ES6是如何进行模块化封装的.

其实上面的案例, 我们可以理解为将闭包里面定义的内容进行导出, 然后在在文件中进行导入. ES6中也是同样的导入导出的思想

使用ES定义文件有三步

  • 第一步: 引入js到主文件
  • 第二步: 导出
  • 第三步: 导入

1. 引入js文件

我们已经将文件定义好了, 那么如何引入呢?

在ES6中,引入的js文件, 需要将其type设置为module, 这样告诉浏览器, 我是用的是ES6的语法.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!-- 1. 第一步: 引入js类的时候, 标记为type="module" -->

    <script src="main.js" type="module"></script>

</head>

<body>

</body>

</html>

注意: 这里一定要写type=module, 否则浏览器不知道这是ES6的语法

2. 导出

1) 导出变量

在ES6中,导出文件使用export {变量1, 变量2, 变量3......}

导出变量的方式有两种:

第一种: 定义变量, 直接导出

第一种: export let name;

例:

// 导出变量---方法一

export let addr = "北京市"

第二种; 先定义变量, 后导出

第二种:

let name....;

export{name}

例:

let name = "张三"

let age = 14

let sex = "男"

function run() {

    console.log(name, "在跑步")

}

// 导出变量---方法二

export {name, age, sex}

2) 导出函数

导出函数也有两种方法

第一种; 先定义, 在导出

第二种; 直接定义 + 导出

let name = "张三"

let age = 14

let sex = "男"

function run() {

    console.log(name, "在跑步")

}

// 导出函数---方法一

export {run}    

//导出函数--方法二

export function eat() {

    console.log(name, "在吃饭")

}

3) 导出对象

导出对象, 通常是先定义对象, 然后将其导出.

class Person {

    type="白种人"

    run() {

        return "跑起来"

    }

}

// 导出对象

export {Person}

4) 导出默认值

导出默认值的含义是, 将这个属性设置为默认的导出, 然后可以在导入的位置为其设置别名

// 导出默认方法

let def = "默认的方法"

export default def

3. 导入　　

导出的方法主要有两种, 那么导入呢?

导入的语法是:

import {变量1, 变量2} from "文件path"

1) 按照变量名导入

  • 导入单个变量

比如刚刚导出的aaa

// 导出变量---方法一

export let addr = "北京市"

我们如何导入呢?

import {addr} from "./aaa.js"

  • 多个变量导入

比如我们导出的如下代码

let name = "张三"

let age = 14

let sex = "男"

function run() {

    console.log(name, "在跑步")

}

// 导出变量---方法二

export {name, age, sex}

如何导入呢?

import {name, age, sex} from "./aaa.js"

  • 导入函数

比如下面导出的函数, 我们如何导入呢?

let name = "张三"

let age = 14

let sex = "男"

function run() {

    console.log(name, "在跑步")

}

// 导出函数---方法一

export {run}    

//导出函数--方法二

export function eat() {

    console.log(name, "在吃饭")

}

导入函数使用

import {run, eat} from "./aaa.js"

我们发现导入方法和变量一样的. 调用的时候需要run(), eat(). 这样就会执行函数体了

  • 导入对象

class Person {

    type="白种人"

    run() {

        return "跑起来"

    }

}

// 导出对象

export {Person}

上面导入了一个对象, 如何导入对象呢?

import {Person} from './aaa.js'

可以这样使用

let p = new Person()

2) 导入全部

如果有很多变量, 就可以使用导入全部

// 导入方法二

import * as bbb from "./bbb.js"

导入全部的时候, 我们会为其设置一个别名, 然后通过别名.变量获取变量值

3) 导入默认方法

我们导出的默认方法, 如何进行导入呢?

// 导出默认方法

let def = "默认的方法"

export default def

默认导出通常只能有一个, 所以, 我们可以给默认导出命一个名字

// 导入方法三

import defData from './aaa.js'
//打印输出默认导出的变量
console.log(defData)

9.Vue之webpack打包基础---模块化思维的更多相关文章

  1. vue和webpack打包 项目相对路径修改

    一般vue使用webpack打包是整个工程的根目录,但是很多情况下都是把vue打包后的文件在某子目录下. 修改: 1,打开index.js assetsPublicPath:'/' 改为: asset ...

  2. vue之webpack打包工具的使用

    vue之webpack打包工具的使用 一.什么是webpack? webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个 ...

  3. vue 使用webpack打包后路径报错以及 alias 的使用

    一.vue 使用webpack打包后路径报错(两步解决) 1. config文件夹 ==> index.js ==> 把assetsPublicPath的 '/ '改为 './' 2. b ...

  4. vue项目webpack打包后修改配置文件

    从webpack打包结构中我们知道,vue中有一个存放外部资源的文件夹static,它里面的文件是不会被打包编译的,所以我们就可以利用外部引入js的方式将我们的想要的数据在index.html中以js ...

  5. 10. vue之webpack打包详解

    一.什么是webpack webpack官网给出的定义是 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应 ...

  6. webpack打包非模块化js

    本文主要记录了非模块化js如何使用webpack打包 模块化打包实现方式 webpack是模块打包工具,通过入口文件递归遍历其依赖图谱,绝对是打包神器. bar.js export default f ...

  7. vue通过webpack打包后怎么运行

    1. 成功使用webpack打包完成后会默认得到dist的文件夹 2. dist文件夹中有html与其他的静态文件 3. 在dist文件夹中打开命令窗口或者git,开一个服务器(像anywhere) ...

  8. vue项目 webpack打包后，图片路径是绝对路径

    vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下: 1.config文件夹下index.js中: assetsPublicPath:&q ...

  9. vue的webpack打包

    一个完整的项目离不开 开发环境 生产环境 测试环境 这三个环境 首先解释一下这三个环境的含义 开发环境:开发环境是程序猿们专门用于开发的服务器,配置可以比较随意,为了开发调试方便,一般打开全部错误报告 ...

随机推荐

  1. leetcode常见问题

    开学了 开始每日刷leetcode了  ,开一个新分类记录做题过程和心得. 1.出现本地调试无问题但提交后报错时,很有可能是全局变量导致的,解决办法 (1).尽量写成局部变量,函数尽量传参进入. (2 ...

  2. Codeforces Round #676 (Div. 2) XORwice、Putting Bricks in the Wall、Palindromifier

    题目链接:XORwice 题意:给你两个数a.b.求一个数x,使得((a异或x)+(b异或x))这个值最小,输出最小那个x 题解: 输出(a|b)-(a&b)就行(猜了一手 代码: #incl ...

  3. HDU 1565 方格取数 状压dp

    题目: 给你一个n*n的格子的棋盘,每个格子里面有一个非负数. 从中取出若干个数,使得任意的两个数所在的格子没有公共边,就是说所取的数所在的2个格子不能相邻,并且取出的数的和最大. Input 包括多 ...

  4. Codeforces Round #645 (Div. 2) C. Celex Update

    题目链接:C.Celex Update 题意: 给你如图所示的图形,问从(x1,y1)−>(x2,y2)路径上的不同的元素和的数量是多少. 题解: 从(1,1)到(3,3) 元素和的1−2−4− ...

  5. MySql 执行 DELETE/UPDATE时，报 Error Code: 1175错误

    MySql 执行 DELETE FROM Table 时,报 Error Code: 1175. You are using safe update mode and you tried to upd ...

  6. PowerShell随笔2---初始命令

    PowerShell便捷之处 PowerShell中兼容运行cmd的命令,比如 ipconfig.ping命令等 PowerShell的命令更友好,可读性更强.比如停止一个服务 CMD命令:sc st ...

  7. 【Azure Redis 缓存】使用Python代码获取Azure Redis的监控指标值 (含Powershell脚本方式)

    问题描述 通过Metrics监控页面,我们能得知当前资源(如Redis)的运行情况与各种指标.如果我们需要把指标下载到本地或者生成JSON数据导入到第三方的监控平台呢?Azure是否可以通过Pytho ...

  8. Cobbler自定义标题及菜单密码

    sha1pass mypassword || openssl passwd -1 -salt sXiKzkus mypassword $1$sXiKzkus$x12Z3ZaiC34GhceLH5LXw ...

  9. codeforces 5C

    C. Longest Regular Bracket Sequence time limit per test 2 seconds memory limit per test 256 megabyte ...

  10. confirm() ：带有指定消息和 OK 及取消按钮的对话框

    定义和用法 confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框. 语法 confirm(message) 参数描述 message 要在 window 上弹出的对话框中显示的 ...