蔡海,男,未婚,辽宁科技学院,电气工程及其自动化专业,贵州省贵阳市息烽县
- 2017-7——2018-1 贵州华信智原科技有限公司(学徒)
- 2018-1——2018-11 贵州华信智原科技有限公司(前端网建)
- 2019-1——2019-4 贵州阳光水木科技有限公司(前端开发)
-
定义:
他就是javascript在es6这个版本实现的一个概念,目的是将js模块化,让js模块(文件)之间可以互相引用。
-
基本特点:
- 每一个模块只加载一次, 每一个JS只执行一次, 如果下次再去加载同目录下同文件,直接从内存中读取。 一个模块就是一个单例,或者说就是一个对象;
- 每一个模块内声明的变量都是局部变量, 不会污染全局作用域;
- 模块内部的变量或者函数可以通过export导出;
- 一个模块可以导入别的模块
-
基本语法: 通过export导出
// uitl.js function a(){ console.log('执行了函数a') } function b(){ console.log('执行了函数a') } var c = '蔡海'; console.log(this); export {a,b,c}
通过import导入
// main.js import {a} from './uitl.js' a();
或者
// uitl.js function a(){ console.log('执行了函数a') } function b(){ console.log('执行了函数a') } var c = '蔡海'; export default { a,b }
// main.js import uitl from './uitl.js' uitl.a(); uitl.b();
又或者
// uitl.js import Vue from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js' function a(){ console.log('执行了函数a') } Vue.filter('capitalize', function (value) { })
// main.js import './uitl.js'
-
实例:
看module.html
-
目前的使用状况
兼容性不太好,IE不支持,很多工具库也没有提供这种原生module的js文件,所以这种模块化开发大都是在node环境下,与CommonJS模块一起使用。
-
学习教程
- module模块 http://es6.ruanyifeng.com/#docs/module 阮一峰
- CommonJS模块 https://www.liaoxuefeng.com/wiki/1022910821149312/1023027697415616 廖雪峰
-
vue开发的标准工具,可以用它在node环境下搭建一个基于webpack的vue项目。
-
项目结构分析
-
特点
- 前后端分离
- 组件化,所有页面由都是由组件拼装而成