在具體頁面開發(fā)的過程中，難免遇到各種各樣的組件需求帕识，除了已經(jīng)提供的input泛粹，select等等，還有未提供的例如日歷組件（H5已經(jīng)簡單集成）肮疗，富文本編輯器晶姊、 彈出框等。最簡單的就是要解決復(fù)用的問題伪货。
（一）最簡單的組件定義
隨意一個(gè)tabview組件為例们衙，首先要包含css樣式和js行為。
這是css文件
這是js文件碱呼，圖片中缺了一句蒙挑，需要把TabView掛載到window全局變量中來使用。window.TabView=TabView;
這是在頁面中引用文件并實(shí)例化組件
如上所示愚臀，一個(gè)組件對(duì)應(yīng)一套 css忆蚀、js文件，并實(shí)例化姑裂。這種方式顯然是不合理的馋袜，主要問題有：
··1.css文件中可能重復(fù)定義類名（使用命名空間的方式解決）等變量。
··2.js文件中的變量也可能重復(fù)（使用上圖的匿名函數(shù)解決）舶斧。
··3.每個(gè)文件都向window全局函數(shù)進(jìn)行掛載欣鳖，當(dāng)組件數(shù)量較多時(shí)，window變量也越來越大茴厉。
··4.頁面引用的文件也會(huì)越來越多泽台。
··5.組件和組件之間的依賴關(guān)系也沒有解決。
為了解決這些問題矾缓，使用require.js進(jìn)行模塊化開發(fā)（官網(wǎng)： http://requirejs.org/ ）怀酷，一個(gè)js文件可看作一個(gè)模塊。
require.js的兩個(gè)核心函數(shù)：
1.define(['mod1','mod2',...] , function(m1,m2,...){ return {暴露出來的變量}; })：定義一個(gè)模塊而账。這個(gè)函數(shù)接收兩個(gè)參數(shù)，第一個(gè)函數(shù)（可選）是一個(gè)數(shù)組因篇，['mod1','mod2',...] 即定義當(dāng)前模塊需要引用的別的模塊名,如果沒有依賴別的模塊（即別的js文件）泞辐，則不寫笔横。第二個(gè)參數(shù)是一個(gè)函數(shù)，里面寫是當(dāng)前模塊的內(nèi)容咐吼。需要注意的是吹缔，第一個(gè)參數(shù)引用了幾個(gè)模塊，第二個(gè)參數(shù)function中的參數(shù)就有多少個(gè)锯茄。mod1,mod2的數(shù)量對(duì)應(yīng)m1,m2的數(shù)量厢塘。在這個(gè)函數(shù)中，通過return肌幽，將外部可訪問的變量暴露出來晚碾。
2.require(['mod1','mod2',...] , function(m1,m2,...){ })：引用模塊。整個(gè)頁面從require函數(shù)開始執(zhí)行喂急。這個(gè)函數(shù)依然接收兩個(gè)參數(shù)格嘁，第一個(gè)參數(shù)是需要引用的模塊數(shù)量，第二個(gè)參數(shù)是一個(gè)函數(shù)廊移，需要執(zhí)行的代碼
當(dāng)然require.js還有各種api糕簿，但是在實(shí)際開發(fā)的過程中，用到的比較少狡孔，所以先不詳細(xì)介紹了懂诗。
在html文件中引用方式：在body底部，把require.js這個(gè)庫引用進(jìn)來苗膝。data-main這個(gè)自定義屬性引用的就是自己在js文件夾中定義的入口文件main.js殃恒。require.js會(huì)自動(dòng)的訪問data-main中保存的文件，
<script type="text/javascript" src="require.js" data-main="js/main"></script>
代碼：先定義兩個(gè)模塊
1.animate.js:
define(function(){
function Animate(){
this.name = "Animate";
}
return {
Animate : Animate
}
});
2.treeview.js
define(function(){
function TreeView(){
this.name = 'TreeView';
};
return {
TreeView : TreeView
};
});
3.定義第三個(gè)模塊荚醒，tabview.js芋类，需要引用animate模塊
define(['animate'],function(a){
function TabView(){
this.name = "TabView";
this.animate = new a.Animate();
};
return {
TabView : TabView
};
});
4.定義程序主入口 main.js ，需要引用 treeview 和 tabview 兩個(gè)模塊界阁，彈出三個(gè)模塊的名稱侯繁。
require(['tabview','treeview'],function(tab,tree){
var tabView = new tab.TabView(),
treeView = new tree.TreeView();
alert(tabView.name);
alert(treeView.name);
alert(tabView.animate.name);
});
5.在html中引用下載好的require.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>require.js</title>
</head>
<body>
<script type="text/javascript" data-main="js/main" src="../require.js"></script>
</body>
</html>
在瀏覽器中執(zhí)行的結(jié)果是一次有三個(gè)alert彈窗，彈出了三個(gè)名字泡躯。
還有一個(gè)例子贮竟，在github上，是一個(gè)自定義的彈出框組件：
https://github.com/WebPuY/modelWindow.git
感謝真阿當(dāng)老師的教程