序上一篇主要介紹了組件的原理，這一篇主要是舉個例子，來說明組件的應用。 案例
這里引入的都是單元素，如果組件定義多元素，也是符合的, 比如下面定義一個x-component, 如果只有一個slot，那么就可以不用定義name屬性，在html上定義的里面的內容都是屬于slot的content <div class="x-component-style"></div> <div><slot></slot></div> <div></div> 這里要注意：slot必須要將元素包圍起來。因為上一篇對于組件的屬性nodes是從放在html就開始定義的，而不是save的時候定義，因為它沒有parentDom，如果沒有包圍起來，在執(zhí)行頁面restore的時候，會造成不可思議的bug。 ui組件庫上述說明了幾個Componnet的例子， 如果創(chuàng)建一個組件庫呢？統(tǒng)一組件的整體風格是非常的重要的。這里我們按照google的material design創(chuàng)建了一個符合移動端的組件庫。把它放在/public/ui的文件夾中，并把組件庫的的service文件strui.js放在services文件夾中，里面主要是定義一系列的組件信息。在使用的時候，在/public/script/index.js中引入strui服務 App.require(["strui"], function (strui) {
// 其它頁面配置信息
strui.init(app, function () { // 初始化，主要是為了引入相關的樣式，是個異步的過程
app.initialize(document.body);
})
})以下就是strui里面的簡要代碼 App.require(function () {
var components = []; // 組件配置
var popUps = []; // 彈窗配置, 下一篇詳解
var layers = []; // 繼承于組件，應用于canvas的組件，不做介紹
var pages = []; // 頁面配置
var services = [];
App.prototype.showDialog = function () {} // App的附加方法群
Page.prototype.showDialog = function () {} // Page的附加方法群
// 全局的漣漪特效
if ("ontouchstart" in window) {
window.addEventListener("touchstart", touchstartHandler, false);
} else {
window.addEventListener("mousedown", touchstartHandler, false);
}
// 定義服務
App.define("tdrui", {
init: function (app, feeback) {
app.appendComponentConfig(components);
app.appendComponentConfig(layers);
app.appendPopUpConfig(popUps);
app.appendPageConfig(pages);
app.appendServiceConfig(services); // 不是放在services文件夾中的需要特別定義
// 接下來移入css文件，主要是str.css，引入后執(zhí)行feeback
// 最后引入適配各個屏幕的str-xx.css
}
})
})這樣子，就可以暢快的使用組件庫里面的組件了。 strui框架主要做了以下的事情：
使用組件的時機在這里，我們相當于把組件的使用全介紹了，回到上一篇的開頭，通過組件怎么讓業(yè)務和渲染層的代碼不混雜在一起呢？
|
|
|
