序上一篇主要介紹了組件的原理，這一篇主要是舉個(gè)例子，來(lái)說(shuō)明組件的應(yīng)用。 案例
這里引入的都是單元素，如果組件定義多元素，也是符合的, 比如下面定義一個(gè)x-component, 如果只有一個(gè)slot，那么就可以不用定義name屬性，在html上定義的里面的內(nèi)容都是屬于slot的content <div class="x-component-style"></div> <div><slot></slot></div> <div></div> 這里要注意：slot必須要將元素包圍起來(lái)。因?yàn)樯弦黄獙?duì)于組件的屬性nodes是從放在html就開(kāi)始定義的，而不是save的時(shí)候定義，因?yàn)樗鼪](méi)有parentDom，如果沒(méi)有包圍起來(lái)，在執(zhí)行頁(yè)面restore的時(shí)候，會(huì)造成不可思議的bug。 ui組件庫(kù)上述說(shuō)明了幾個(gè)Componnet的例子， 如果創(chuàng)建一個(gè)組件庫(kù)呢？統(tǒng)一組件的整體風(fēng)格是非常的重要的。這里我們按照google的material design創(chuàng)建了一個(gè)符合移動(dòng)端的組件庫(kù)。把它放在/public/ui的文件夾中，并把組件庫(kù)的的service文件strui.js放在services文件夾中，里面主要是定義一系列的組件信息。在使用的時(shí)候，在/public/script/index.js中引入strui服務(wù) App.require(["strui"], function (strui) {
// 其它頁(yè)面配置信息
strui.init(app, function () { // 初始化，主要是為了引入相關(guān)的樣式，是個(gè)異步的過(guò)程
app.initialize(document.body);
})
})以下就是strui里面的簡(jiǎn)要代碼 App.require(function () {
var components = []; // 組件配置
var popUps = []; // 彈窗配置, 下一篇詳解
var layers = []; // 繼承于組件，應(yīng)用于canvas的組件，不做介紹
var pages = []; // 頁(yè)面配置
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);
}
// 定義服務(wù)
App.define("tdrui", {
init: function (app, feeback) {
app.appendComponentConfig(components);
app.appendComponentConfig(layers);
app.appendPopUpConfig(popUps);
app.appendPageConfig(pages);
app.appendServiceConfig(services); // 不是放在services文件夾中的需要特別定義
// 接下來(lái)移入css文件，主要是str.css，引入后執(zhí)行feeback
// 最后引入適配各個(gè)屏幕的str-xx.css
}
})
})這樣子，就可以暢快的使用組件庫(kù)里面的組件了。 strui框架主要做了以下的事情：
使用組件的時(shí)機(jī)在這里，我們相當(dāng)于把組件的使用全介紹了，回到上一篇的開(kāi)頭，通過(guò)組件怎么讓業(yè)務(wù)和渲染層的代碼不混雜在一起呢？
|
|
|
來(lái)自： 新進(jìn)小設(shè)計(jì) > 《待分類》
