BUI 開發(fā)規(guī)范

目錄規(guī)范

src目錄及外層 app.json,gulpfile.js,package.json, 不使用npm時(shí),非必須.

注意: 工程目錄下不能有中文文件名,會(huì)影響打包. 整個(gè)工程目錄也不能有中文的路徑, 保存代碼熱更新才會(huì)有效.

目錄說明:

路徑使用規(guī)范

假設(shè)你的頁面在 pages/main/index.html;

1. 單頁開發(fā), 使用相對(duì)根目錄的路徑, 無論你的頁面的層級(jí)目錄有多深, 里面的圖片路徑,跳轉(zhuǎn)路徑, 應(yīng)該使用 images/xxx.jpg, pages/xxx/xxx.html 的寫法;

1. 不使用絕對(duì)根路徑的寫法 /images/xxx.jpg, /pages/xxx/xxx.html; 打包后本地的路徑查找會(huì)從 file:///xxxx 來查找你的文件, 最終導(dǎo)致路徑錯(cuò)誤.

頁面結(jié)構(gòu)規(guī)范

一個(gè)標(biāo)準(zhǔn)的結(jié)構(gòu)包含, .bui-page 子集分別是 header, main, footer 等標(biāo)簽, main 標(biāo)簽必須有, 因?yàn)轫撁娉跏蓟臅r(shí)候會(huì)自動(dòng)撐開main的高度. 快速書寫 ui-page Tab

<div class="bui-page">
    <header class="bui-bar">
        <div class="bui-bar-left">
            <!-- 左邊有圖標(biāo)示例 -->
            <div class="bui-btn"><i class="icon-back"></i></div>
        </div>
        <div class="bui-bar-main">BUI開發(fā)工程模板</div>
        <div class="bui-bar-right">
            <!-- 右邊有圖標(biāo)示例 -->
            <div class="bui-btn"><i class="icon-search"></i></div>
        </div>
    </header>
    <main>
        <!-- 中間內(nèi)容 -->
    </main>
    <footer>
        <!-- 底部?jī)?nèi)容 -->
    </footer>
</div>

結(jié)構(gòu)及命名規(guī)范

注意:

• bui-box, bui-fluid, bui-btn, span1 - span12, icon-, 是全局定義的關(guān)鍵字,不要使用上面的名稱開頭,可能導(dǎo)致你的樣式多了很多東西
• 業(yè)務(wù)中新增的樣式無需以bui開頭命名
• 結(jié)構(gòu)使用 控件名+中橫桿+位置 命名 head main foot left right cell wrap

上下結(jié)構(gòu) 示例 : 滑動(dòng)控件 快速書寫: ui-slide <kbd>Tab</kbd>

    <div class="bui-slide">
        <div class="bui-slide-head">
        </div>
        <div class="bui-slide-main">
        </div>
    </div>

上中下結(jié)構(gòu) 示例 : 滾動(dòng)加載控件 快速書寫: ui-scroll <kbd>Tab</kbd>

    <div class="bui-scroll">
      <div class="bui-scroll-head"></div>
      <div class="bui-scroll-main"></div>
      <div class="bui-scroll-foot"></div>
    </div>

左中右結(jié)構(gòu) 示例 : bar 快速書寫: ui-bar Tab

    <div class="bui-bar">
        <div class="bui-bar-left">
        </div>
        <div class="bui-bar-main"></div>
        <div class="bui-bar-right">
        </div>
    </div>

控件的重復(fù)子元素使用 -cell 示例 : 步驟條 快速書寫: ui-rating Tab

    <div class="bui-rating">
      <div class="bui-rating-cell"></div>
    </div>

控件名父層在控件名后面加上 -wrap 示例 : 側(cè)邊欄 快速書寫: ui-sidebar Tab

    <div class="bui-sidebar-wrap">
      <div id="sidebar" class="bui-sidebar">
        側(cè)滑菜單
      </div>
      <div class="bui-page">
        頁面正文
      </div>
    </div>

模塊化規(guī)范

1. 一個(gè)js 文件里面只能有一個(gè) loader.define 的匿名模塊;
2. 業(yè)務(wù)邏輯需要在 loader.define 里面,防止加載其它模塊的時(shí)候沖突;
3. 避免循環(huán)依賴 A ->依賴 B 模塊, 而 B模塊 -> A模塊, 這就造成循環(huán)依賴,一般需要避免這種設(shè)計(jì),如果一定要用, 不使用依賴前置的方式;
4. 避免循環(huán)嵌套, 在loader.define 里面 又 require 加載當(dāng)前模塊, 這個(gè)時(shí)候還沒實(shí)例化,就會(huì)造成死循環(huán);
5. 每個(gè)頁面的ID不能相同;
6. 模塊的路徑以及資源等,都使用相對(duì)路徑;

事件規(guī)范

事件分為全局事件,及控件事件,

• 全局事件: 指頁面加載的時(shí)候,就會(huì)觸發(fā)的事件;

• 控件事件: 在控件初始化以后才會(huì)存在;

全局事件

頁面初始化加載事件

• pagebefore (dom 初始化完畢, BUI 及 原生方法未初始化)
• pageinit (dom 及 BUI 初始化完畢, 原生方法未初始化 )
• pageready (dom 及 BUI 及原生方法 初始化完畢 )
• onload (dom 及 BUI 及原生方法 及 圖片js資源 都初始化完畢 )

UI控件初始化可以在下面執(zhí)行:

// dom及bui控件初始化完畢
bui.on("pageinit",function(){
  // dom ready , bui ready
})

多頁開發(fā)控件及原生方法都必須在bui.ready 里面

// dom及bui及原生方法都初始化完畢
bui.ready(function(){
  // dom ready , bui ready, native ready
})

在PC的加載順序是 pagebefore -& pageinit -& pageready -& onload , 在手機(jī)的加載順序是 pagebefore -& pageinit -& onload -& pageready 所以為了方法及dom能正確初始化, 我們的事件監(jiān)聽一般在 bui.ready .

控件事件

已安裝BUI Fast 插件的SublimeText用戶, 輸入 bui- + 控件名 + -on,按<kbd&Tab</kbd&鍵可以生成以下結(jié)構(gòu).

BUI Fast 書寫示例: bui-accordion-on

// 監(jiān)聽事件
uiAccordion.on("show",function(){
  // 顯示的時(shí)候做什么事情
})

控件的更多事件,請(qǐng)查看API文檔

注意: 控件的事件監(jiān)聽要在控件初始化之后.