序
上一篇主要介紹了組件的原理，這一篇主要是舉個例子，來說明組件的應用，
案例
-
實作一個下拉重繪組件，當用戶在某個區域將手指從上面往下滑動，這個組件就會出現，然后頁面執行重繪操作，等重繪完，這個組件就會消失，
- 我們定義一個物件，放在組件配置陣列中，在需要用到的時候加載，在/public/index.js加入代碼
- 在home.html中添加，對于組件獲取，只能通過id
- 然后在/public/component檔案夾中加入以下目錄檔案
- 在str-down-fresh.html加入如下代碼
- 在str-down-fresh.js加入組件的邏輯代碼
- 在home.js監聽loading事件，在10s后隱藏，如以下代碼
-
關于slot的例子，引入的a-btn標簽，在home.html引入,slot的單元素直接用元素，如果是多元素替換slot，用template元素，
-
引入組件配置
-
slot順序不代表渲染順序
-
然后在/public/component檔案夾中加入
-
在a-btn.html加入如下代碼, 以這里的渲染順序為主
-
在a-btn.js加入如下代碼
-
這里引入的都是單元素，如果組件定義多元素，也是符合的, 比如下面定義一個x-component, 如果只有一個slot，那么就可以不用定義name屬性，在html上定義的里面的內容都是屬于slot的content
在x-component.html定義
<div ></div>
<div><slot></slot></div>
<div></div>
這里要注意：slot必須要將元素包圍起來，因為上一篇對于組件的屬性nodes是從放在html就開始定義的，而不是save的時候定義，因為它沒有parentDom，如果沒有包圍起來，在執行頁面restore的時候，會造成不可思議的bug，
ui組件庫
上述說明了幾個Componnet的例子， 如果創建一個組件庫呢？統一組件的整體風格是非常的重要的，這里我們按照google的material design創建了一個符合移動端的組件庫，把它放在/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，引入后執行feeback
// 最后引入適配各個螢屏的str-xx.css
}
})
})
這樣子，就可以暢快的使用組件庫里面的組件了，
strui組件庫是一個為了兼容現代瀏覽器的高性能全平臺ui組件庫，目前正在開發中，目前只有在移動端進行開發專案，pc端還未兼容（正在開發中）
strui框架主要做了以下的事情：
- 定義全域化樣式，統一風格；
- 里面使用了多個css檔案，為了更好的適配移動端以及pc端；
- 簡化開發流程，提高專案的質量，
使用組件的時機
在這里，我們相當于把組件的使用全介紹了，回到上一篇的開頭，通過組件怎么讓業務和渲染層的代碼不混雜在一起呢？
- 我們要掌握資料的流向，對于組件來說，它是可以保存資料的，它的主要目標是根據資料渲染不同的界面，它應該是和業務無關的；
- 對于Page物件來說，它是控制資料的流向，如果需要獲取資料，可以從后端獲取，可以從組件里面獲取，也可以給組件賦值，更改組件的狀態，同時它也是處理業務的主要場地，通過監聽組件和dom的事件，進行業務處理；
- 有時候組件是一次性的，僅僅針對于單個Page物件，把它抽象出來還是有很大的意義的，它可以更好的分離頁面各種功能，讓它們各司其職，在下一次更改的時候，只需要更改部分組件和它的資料流行就可以很好的解決；
- 對于組件我們應該是可以精細控制的，雖然開發的時候會耗費點時間，對于要應對復雜多變的業務，也是非常必須的，
案例地址
總結
介紹組件的定義和使用，同時引入了組件庫，并且總結了組件的使用情況，
推廣
底層框架開源地址：https://gitee.com/string-for-100w/string
演示網站: https://www.renxuan.tech/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/172613.html
標籤：JavaScript
上一篇：9.組件原理詳解
下一篇：11.彈窗原理詳解