关于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'