网站模块化设计平台（什么是网站模块）
大家好，今天小编关注到一个比较有意思的话题，就是关于网站模块化设计平台的问题，于是小编就整理了1个相关介绍网站模块化设计平台的解答，让我们一起看看吧。
1、模块化开发的核心？
核心：导出和导入；
1、普通模块化：
同级新建文件index.html,a.js.b.js三个文件；
index.html中引入a.js和b.js。（a.js在前）
lt;script src=#34;a.js#34;gt;lt;/scriptgt;
lt;script src=#34;b.js#34;gt;lt;/scriptgt;
a.js中导出：
var modules=(function(){
var name=#39;jack#39;;
var flag=true;
function num(a,b){
return a b;
}
var obj={};
obj.flag=flag;
obj.num=num;
obj.name=name;
return obj;
})()
b.js中导入：
console.log(modules.name)//jack
console.log(modules.num(1,6))//7
console.log(modules.flag)//true
在b.js可以取出a.js中obj的值。
2、commonJs模块化：export
a.js导出：
var name=#39;jack#39;;
var flag=true;
function num(a,b){
return a b;
}
export.module({
name,
flag,
num
)}
b.js导入：
var {name,flag,num}=require(#39;a.js的路径#39;);//name,flag,num可以直接用
var obj=require(#39;a.js的路径#39;);//obj.name=#39;jack#39;,obj.flag=true,obj.num(1,6)=7
3、es6模块化：export导出,import导入
export的基本使用：
a.js:
导出方式一：
export var name=#34;jack#34;;
export var height=1.88;
导出方式二：
var name=#34;jack#34;;
var height=1.88;
export {name,height};
b.js
import {name,height} from #39;a.js#39;;
console.log(name);//jack
console.log(height);//1.88
4、导出函数或类：
//直接导出
//export const num1=123;
//导出函数：
export function add(num1,num2){
return num1 num2
}
//导出类
export class Person{
run(){console.log(#39;this.a#39;)}
}
//导入函数和类
import {add,Person} from #39;./export.js#39;
console.log(add(1,2));
const p=new Person();
p.run()
5、export default:导入者自己命名。(同一个模块中只能有一个default)
//导出
export default function(){
console.log(#39;this.default#39;);
}
//导入
import de from #39;./export.js#39;;
de();
6、普通html中引入export的两个js文件，需要给script的type设为module;
lt;script type=#34;module#34; src=#34;a.js#34;gt;lt;/scriptgt;
7、全部统一导出：*可以导入模块中所有的export变量，
import * as all from #39;./export.js#39;;//all，为*的别名，方便后续使用。
console.log(all.num1,#39;aaa#39;)
模块化开发就是有组织地把一个大程序拆分成独立并互相依赖的多个小文件（模块）。
模块内部有许多私有属性，只向外暴露一部分公开的接口(如可以修改私有属性的方法等)
ES6之前，JavaScript语言一直没有模块（module）体系，无法把大文件有组织地划分成小块，并管理之间地依赖。但是模块化的思想一直存在。因为用Javascript写的代码越来越庞大，而网页也越来越像桌面APP。如此庞杂的代码，如果不进行模块化，就可能引发命名冲突，造成不易复用、维护性高。
到此，以上就是小编对于网站模块化设计平台的问题就介绍到这了，希望介绍关于网站模块化设计平台的1点解答对大家有用。
