关于javascript:js模块化

js 模块化

https://blog.csdn.net/weixin_…

https://zh.javascript.info/mo…

commonJS

基于 node 端的运行

裸露

const name = "xxx";
const age = 1;

/**
 * moudle.exports={} 裸露
 */
module.exports = {
    getName,
    getAge,
    name,
    age
};

function getName() {return this.name;}

function getAge() {return this.age;}

/** 
 * 应用 exports.xxx=value 裸露
 */

exports.add= function(a,b){return a + b;}

引入

/**
 * 裸露的实质是以 module.exports 为主
 * module.exports 和 exports 不能混用，不然以 module.exports 为主
 */
const xiaomao = require("./m1");// 引入自定义模块
const m3=require("./m3");// 引入自定义模块
const uniq=require('uniq');// 引入第三方模块
xiaomao.getName();
xiaomao.getAge()
m3.add(1,11)

let arr=[1,1,3,4,423,-1,-100,323,22,11,1,33,4,2,111,32321]
uniq
// 数组去重和排序（字典排序）uniq(arr)

基于浏览器端的运行

全局装置 browserify npm browserify -g

对 app.js 进行编译, 生成 buid.js

browserify ./app.js -o ./buid.js

在页面引入 buid.js

es6

编译

babel 用于编译 es6 为 es5,browserify 用于编译 node.js 为浏览器辨认的 js

全局装置：babel-cli、Browserify：npm install babel-cli browserify -g

   部分装置：babel-preset-es2015：`npm install babel-preset-es2015`

以上是否须要编译待定

在 node 中能够间接应用，在页面间接加上 type=”module“也能够间接应用

https://www.ruanyifeng.com/bl…

有待商讨

别离裸露

export const data='asheh'
export const msg='ssss'
export function showMsg(){console.log(msg);
}
export function showData() {console.log(');
}

对立裸露

const school='尚硅谷'
const person={
    name:'老刘',
    age:18,
    sex:'女'
}
function getLaoliu(){console.log(person)
}
// 对立裸露 -- 罕用 ` 在这里插入代码片 `
export {school,person,getLaoliu}
// 反对改名
export {school as school ,person as person,getLaoliu as getLaoliu}

默认裸露 (适宜只裸露一个数据) 只能裸露一次

export default {
    name:"wc",
    age:5
}

混合应用

# [别离裸露]
export const teacher1={name:'强哥',age:15}
export const teacher2={name:'ke 哥',age:35}
# [对立裸露]
const stu1= {name:'网哥',age:25}
const stu1= {name:'掌声',age:33}
export {stu1,stu2}

# [默认裸露]
export default{
    school:'上海 dax',
    address:'shanghai',
    subject:['计算机','java','大数据']
}

引入办法

# 引入【别离裸露】模块
import {data,msg,showData,showMsg} form './module1' # 留神不是解构赋值

# 引入【别离裸露】模块 + 打包退出
import * form './module1'

# 引入【别离裸露】模块 + 重命名
import {data as data2} form './module2'

# 引入【对立裸露】模块（和下面三种一样）import {school as sc,person,getLaoliu} form './module3'

# 引入【默认裸露】模块 
import module4 form './module4'

# 引入多种裸露形式
import module5,{teacher1，teacher2,stu1,stu2} from './module5'