vue学习之模块化开发

为什么使用模块化

JavaScript原始功能

• js作为一种脚本语言，做一些简单的表单验证和动画实现，代码中使用

常用的模块化规范

• CommonJS 、AMD、CMD、Modules（ES6）
• 模块化的核心：导入和导出

CommonJS规范

导入：

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

导出：

//CommonJS模块
let { test, demo, flag } = require('moduteA');
//等同于 (类似于对对象的解剖)
let _mA = require('moduteA'); 
let test = _mA.test; 
let demo = _mA.demo; 
let flag = _mA.flag;

ES6规范

export 指令用于导出变量，如：

//info.js 
export let name = 'zhangsan';
export let age = 20; 
export let height = 1.70; 

//上面代码简写 
let name = 'zhangsan'; 
let age = 20; 
let height = 1.70; 
export {name, age, height}

export 指令用于导出函数，如：

//导出函数 
export function nul(num1, num2){ 
	return num1 + num2; 
}

//导出类 
export class Person { 
	run(){
	 console.log('play');
	}
}

//上面代码简写
function test(num1, num2){
   return num1 + num2; 
  } 

//简写
class Person {
   run(){
        console.log('play');
       } 
   }
   
//导出
export{test, Person}

export default

使用场景：一个模块中的某个功能，可以让导入者自己命名；如：
注意事项：export default在同一个模块中，不允许同时存在多个。

const address = '西安市'; 
//export default address; 

export default function(argument){
	console.log(argument); 
 }
 

import指令用于导入

//导入单一变量 
import {name, height, age} from './Person.js' 

//导入默认值(自定义名称) 
import aaa from './Demo.js' 

//统一全部导入 
import  * as obj from './Person.js'