模块化编程

模块化编程

一、模块化简介

1、模块化产生的背景

随着网站逐渐变成"互联网应用程序"，嵌入网页的Javascript代码越来越庞大，越来越复杂。

Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。

但是，Javascript不是一种模块化编程语言，它不支持"类"（class），包（package）等概念，更遑论"模块"（module）了。

2、什么是模块化开发

传统非模块化开发有如下的缺点：

• 命名冲突
• 文件依赖

模块化规范：

• CommonJS模块化规范
• ES6模块化规范

二、ES5模块化规范

安装babel并初始化根目录:https://www.cnblogs.com/ilusymon/p/14174996.html

1、编写01.js

// 定义成员：
const addition = function (a, b) {
    return parseInt(a) + parseInt(b)
}
const subtract = function (a, b) {
    return parseInt(a) - parseInt(b)
}
//声明哪些方法可以被调用
module.exports = {
    addition,
    subtract
    //subtract:subtract
}

2、编写02.js

//引入模块，注意：当前路径必须写 ./
const operation = require('./01.js')
console.log(operation)

const result1 = operation.addition(1, 2)
const result2 = operation.subtract(1, 2)
console.log(result1, result2)

3、运行02.js

三、ES6模块化规范（方式一）

1、编写login.js

export function login(){
    console.log("用户登录");
}
export function register(){
    console.log("用户注册");
}

2、编写main.js

import {login,register} from "./login.js"
login();                    
register();

3、运行main.js

node main.js

4、在es6v1.0执行node main.js出现SyntaxError(兼容性不强)

babel es6 -d es5

三、ES6模块化规范（方式二）

1、编写login.js

export default{
    login(){
        console.log("用户登录");
    },
    register(){
        console.log("用户注册");
    }
}

2、编写main.js

import login from "./login.js"
login.login();
login.register();

3、运行main.js

4、在es6v2.0执行node main.js出现SyntaxError(兼容性不强)

babel es6v2 -d es5v2