BIN是一個(gè)簡單、輕量的前端JS框架，可用于Hybrid(結(jié)合Cordova框架) APP、SPA(Single Page Application) APP、MPA(Multiple Page Application) APP以及一般的網(wǎng)頁開發(fā)。

工程結(jié)構(gòu)和開發(fā)模式

BIN工程結(jié)構(gòu)

從結(jié)構(gòu)可以看出，采用BIN開發(fā)的項(xiàng)目能有良好的組織結(jié)構(gòu)和模塊劃分能力，這對于工程管理是十分必要的。
BIN采用的開發(fā)模式十分貼近傳統(tǒng)的GUI開發(fā)，無論多么復(fù)雜的一個(gè)UI，都可以通過搭積木的方式，將一個(gè)一個(gè)UI View組合而成。所以如果你曾經(jīng)做過PC桌面程序、Android、IOS等傳統(tǒng)GUI的開發(fā)，BIN你已經(jīng)熟悉了一大半。

BIN遵循MVC，OCP，KISS等原則，沒有引入過多的模式和概念，保持簡單但又足夠強(qiáng)大！

以翡翠吧吧為例：

框架特性

前后端分離

BIN的開發(fā)是一種類CS結(jié)構(gòu)，前后端開發(fā)人員各自關(guān)注自己的業(yè)務(wù)開發(fā)，通過約定的API進(jìn)行數(shù)據(jù)交互，BIN提供了API本地?cái)?shù)據(jù)Mock模塊，前端能夠更方便獨(dú)立于服務(wù)器進(jìn)行開發(fā)和自測。

代碼本地化

BIN模塊管理和加載機(jī)制采用RequireJS，針對RequireJS提供了基于Local Storage的本地化機(jī)制，對于業(yè)務(wù)代碼，就可以考慮存放在本地，提升頁面加載速度和用戶體驗(yàn)
使用的緩存策略:

• 強(qiáng)緩存:第三方庫代碼、BIN框架代碼，經(jīng)過合并混淆后，文件名加HASH；帶ID的資源圖片

• 協(xié)商緩存(304):配置文件、帶名稱的資源圖片

• 本地緩存(LocalStorage):業(yè)務(wù)代碼
  Tutorials本地化Tutorials無本地化
  Deamon本地化Deamon無本地化

自動(dòng)構(gòu)建

BIN提供了基于Gulp的自動(dòng)構(gòu)建，在工程發(fā)布時(shí)，一鍵處理混淆、合并、壓縮、內(nèi)嵌以及引用處理。

頁面內(nèi)嵌(Inline)+Deferred Loading+Progressive Render

在MPA和WEB頁面開發(fā)中，為了避免頁面加載時(shí)的白屏，BIN引入了頁面內(nèi)嵌（Inline）機(jī)制，在自動(dòng)構(gòu)建階段，將頁面內(nèi)容（比如home.html）自動(dòng)內(nèi)嵌到引導(dǎo)頁面（比如index.html）,在訪問index.html時(shí)，即渲染出home.html的內(nèi)容。然后通過Deferred Loading和Progressive Render逐次顯示各個(gè)子View中的內(nèi)容。整個(gè)頁面加載過程和傳統(tǒng)的GUI加載過程類似（顯示無網(wǎng)絡(luò)依賴的內(nèi)容－>填充有網(wǎng)絡(luò)依賴的內(nèi)容。

Online Tutorials　Online Deamon

功能

• View抽象，模擬原生開發(fā)模式

• 一般頁面 Pageview

• 導(dǎo)航欄頁面 NaviPageView

• 下拉刷新頁面 RefreshView

• 列表頁面 ListView

• 指示器 IndicatorView

• Alert框 AlertView

• Tab欄 TabBarView

• Swipe頁面 Swipeview

• Tab頁面 TabView

• 網(wǎng)絡(luò)API模塊

• 網(wǎng)絡(luò)緩存模塊

• 圖片延遲加載

• 數(shù)據(jù)中心模塊，支持本地存儲和會話存儲

• 本地API測試框架，支持完全無依賴服務(wù)器進(jìn)行開發(fā)

安裝

1. 安裝nodejs

2. 下載BIN壓縮包,參照demo開始你的應(yīng)用開發(fā)

目錄結(jié)構(gòu)

• bin : BIN 框架代碼

• demo : 演示APP

• android-project : Android原生工程，用于打包Android APP

• ios-project : IOS原生工程，用于打包IOS APP

• tools : 包含一些開發(fā)工具

• server : Web APP的模擬服務(wù)器，在本地開發(fā)時(shí)需要

demo

BIN提供了一個(gè)demo APP，包含了BIN框架包含的所有功能的演示和實(shí)際開發(fā)的示例代碼，demo也可以作為實(shí)際APP開發(fā)的模板。
在PC上演示demo:
1. 拷貝bin目錄中內(nèi)容到demo/bin目錄。
2. 啟動(dòng)nodejs服務(wù)器:
+ 啟動(dòng)本地服務(wù)器：node server.js，加載資源需要。
+ 啟動(dòng)本地API服務(wù)器：node server-demo.js，網(wǎng)絡(luò)API請求需要。
3. 打開Chrome瀏覽器，注意：Chrome需要使用--disable-web-security進(jìn)行跨域，否則ajax請求會失敗。
4. 使用localhost:8080進(jìn)行訪問。 5. 右鍵，點(diǎn)擊 審查元素，使用移動(dòng)模式演示demo。

在Android手機(jī)上演示demo:
1. 拷貝bin目錄中內(nèi)容到demo/bin目錄。
2. 拷貝demo目錄內(nèi)容到android-project/asserts/www目錄下。
3. 編譯APK安裝。

在IPhone手機(jī)上演示demo:
1. 拷貝bin目錄中內(nèi)容到demo/bin目錄。
2. 拷貝demo目錄內(nèi)容到ios-project/www目錄下。
3. 編譯IPK安裝。

文檔

Core

bin

bin是整個(gè)框架的命名空間，包含了可配置的Class結(jié)構(gòu)(classConfig)，包含了全局的單件實(shí)例app,netManager,hudManager,debugManager,naviController,dataCenter。

配置文件

bin中的配置文件有g(shù)lobalConfig, requireConfig, classConfig, netLocalConfig。在bin/config中包含了這些配置文件的模板，實(shí)際應(yīng)用中使用的是config目錄下的。詳細(xì)信息參見文件。

• globalConfig.js
  對應(yīng)用的整體配置，包含global和runtime兩類配置數(shù)據(jù)。
  global : 全局配置，通過bin.globalConfig獲取，這里面是整個(gè)globalConfig里的內(nèi)容
  runtime : 運(yùn)行時(shí)配置，應(yīng)用啟動(dòng)后，會根據(jù)global中runtime來選擇對應(yīng)的運(yùn)行時(shí)配置，以方便我們不同版本的切換。

• requireConfig.js
  對requirejs的整體配置

• classConfig.js
  對bin類結(jié)構(gòu)的配置，在這里面可以修改框架內(nèi)部實(shí)際使用的類，已達(dá)到定制自己的類，比如Application，DataCenter...
  注意 : 該結(jié)構(gòu)定義中不存在沒有依賴關(guān)系，僅僅是一個(gè)結(jié)構(gòu)關(guān)系，所以在requirejs的define中不要直接使用，而是在運(yùn)行時(shí)使用。

• netLocalConfig.js
  網(wǎng)絡(luò)API本地?cái)?shù)據(jù)測試配置

Application

Application是bin的應(yīng)用基類，可通過classConfig中定制。

• init()
  應(yīng)用初始化，可添加自己的初始化操作。bin.Application會自動(dòng)初始化debugManager,hudManager,netManager,naviController,dataCenter。

• run()
  應(yīng)用開始執(zhí)行，可添加應(yīng)用顯示第一個(gè)頁面的代碼。

• onDeviceBack()
  針對Android Device返回鍵點(diǎn)擊回調(diào)，在PC上可通過懸浮Debug按鈕模擬。

• onPause()
  應(yīng)用進(jìn)程被Pause回調(diào)。

• onResume()
  應(yīng)用進(jìn)程被Resume回調(diào)。

bin.netManager

bin中的所有ajax http請求由netManager封裝，netManager提供API抽象。netManager中提供四種策略(Policy)來定制網(wǎng)絡(luò)處理的行為，bin提供了默認(rèn)實(shí)現(xiàn)。
CachePolicy : 網(wǎng)絡(luò)緩存策略,配置網(wǎng)絡(luò)請求的數(shù)據(jù)在客戶端如何緩存
+ NORMAL : 一直緩存在本地,直到超過maxCacheDuration(Config中配置)
+ DURATION : 指定緩存的時(shí)間，過期后無效
+ SESSION : APP期間一直有效，關(guān)閉后緩存失效
+ USER_SESSION : 用戶登陸期間有效，退出后失效
CallbackPolicy : 網(wǎng)絡(luò)回調(diào)策略，可在這里面添加在框架層面對請求的統(tǒng)一處理
DebugPolicy : 網(wǎng)絡(luò)本地?cái)?shù)據(jù)測試策略
SendCheckPolicy : 網(wǎng)絡(luò)發(fā)送策略，處理網(wǎng)絡(luò)請求在發(fā)送前的過濾邏輯
+ ABORT_ON_REQUESTING : 同一個(gè)api請求，當(dāng)已經(jīng)存在請求，再次發(fā)送將會abort前一次請求
+ REJECT_ON_REQUESTING : 同一個(gè)api請求，當(dāng)已經(jīng)存在請求，再次發(fā)送將會被reject，不能請求

• doAPI(params)
  進(jìn)行一次api操作,params為ajax的參數(shù),同時(shí)包含bin定義的參數(shù)
  params.options : bin api選項(xiàng)

• loading : 網(wǎng)絡(luò)加載選項(xiàng) 默認(rèn)為MODEL, true/false加載效果, MODEL表示同時(shí)添加模態(tài)效果, 網(wǎng)絡(luò)請求同時(shí)，用戶將不能進(jìn)行UI操作。

• cache  : 網(wǎng)絡(luò)緩存選項(xiàng) 默認(rèn)無, NORMAL/DURATION/SESSION/USER_SESSION

• cacheDuration : 指定緩存的時(shí)間(ms), 當(dāng)cache為DURATION時(shí)有效

• sendCheck : 網(wǎng)絡(luò)發(fā)送選項(xiàng) 默認(rèn)無, ABORT_ON_REQUESTING/REJECT_ON_REQUESTING

• setDebugPolicy(policy)
  設(shè)置網(wǎng)絡(luò)本地測試策略

• setCallbackPolicy(policy)
  設(shè)置網(wǎng)絡(luò)回調(diào)策略

• setCachePolicy(policy)
  設(shè)置網(wǎng)絡(luò)緩存策略

• setSendCheckPolicy(policy)
  設(shè)置網(wǎng)絡(luò)發(fā)送策略

• ajax(params)
  發(fā)送ajax請求

bin.hudManager

bin中所有hud顯示由hudManager提供，比如Alert，Status，Indicator。

• startIndicator(options)
  開始菊花圖。
  options.model : 是否模態(tài) true/false
  返回本次菊花圖ID，供stopIndicator使用

• stopIndicator(indicatorID)
  停止indicatorID指定的菊花圖，如果沒有指定，則完全取消菊花圖。
  注意 : bin對于菊花圖支持計(jì)數(shù)機(jī)制。

• showStatus(message)
  顯示懸浮信息

• alert(options)
  顯示對話框

bin.naviController

bin中提供了頁面棧概念，由naviController完成。

• push(name, pushData, options)
  跳轉(zhuǎn)到name指定頁面
  name : 頁面名字 pushData : 向新頁面?zhèn)鬟f的數(shù)據(jù)，新頁面可通過onViewPush獲取
  options : 跳轉(zhuǎn)效果參數(shù)，可選

• pop(count, popData, options)
  返回指定級數(shù)(count)頁面
  count : 返回的級數(shù)
  popData : 向返回的頁面?zhèn)鬟f的數(shù)據(jù)，返回頁面可通過onViewBack獲取
  options : 跳轉(zhuǎn)效果參數(shù)，可選

• popTo(name, popData, options)
  返回到指定頁面
  參數(shù)參照pop操作

• current()
  獲取當(dāng)前頁面的棧數(shù)據(jù)，返回為{name, view}
  name : 頁面名字
  view : 頁面對象

• getView(name)
  獲取指定頁面的棧數(shù)據(jù)，返回結(jié)構(gòu)同current()

• startWith(name)
  以name指定的新頁面作為根頁面，原來的頁面棧將被清空

bin.dataCenter

提供數(shù)據(jù)中心封裝，包含了本地持久化和本地會話，用戶持久化和用戶會話這幾種數(shù)據(jù)庫抽象。提供用戶數(shù)據(jù)分離功能。

bin.debugManager

在框架上提供調(diào)試功能，可參見應(yīng)用中懸浮調(diào)試按鈕，可在應(yīng)用中直接查看console.log, console.info, console.error信息，方便調(diào)試。

UI

View

View是BIN中最基本的UI Controller，包含了HTML中某一個(gè)Element對應(yīng)的邏輯，在ios中類似View Controller。

• constructor(options)
  構(gòu)造函數(shù)
  options.html : 從html構(gòu)造view,html應(yīng)該包含一個(gè)根Element
  options.elem : 從已有Element構(gòu)造view,elem可以是DOM或者JQuery節(jié)點(diǎn)
  options.el  : 從已有Element構(gòu)造view,elem可以是DOM或者JQuery節(jié)點(diǎn)，這種方式不會觸發(fā)render和show的調(diào)用
  注意：BIN中的view只能通過這幾種方式來構(gòu)造，三種方式是互斥的

• genHTML()
  為view動(dòng)態(tài)構(gòu)造HTML結(jié)構(gòu)函數(shù)

• preGenHTML()
  genHTML的前事件函數(shù)

• posGenHTML()
  genHTML的后事件函數(shù)

• asyncPosGenHTML()
  posGenHTML的異步版本，對于需要依賴layout過后的屬性(比如width,height)，在該函數(shù)中處理

• show()
  顯示該view

• hide()
  隱藏該view

• remove()
  移除該view,移除后，view在html中對一個(gè)的節(jié)點(diǎn)也會被移除

• onShow()
  view在顯示時(shí)被調(diào)用

• onHide()
  view在隱藏時(shí)被調(diào)用

• onRemove()
  view在移除時(shí)被調(diào)用，一些清理的邏輯在這里處理

• isShow()
  返回view當(dāng)前是否顯示中

• $(sel, fromSel)
  在view中從fromSel節(jié)點(diǎn)查詢sel節(jié)點(diǎn)，并返回該節(jié)點(diǎn)，sel和fromSel為JQuery selector。如果fromSel為空，則從當(dāng)前view的根節(jié)點(diǎn)查詢；如果sel為空，返回view的根節(jié)點(diǎn)

• $html(sel, html)
  如果html不為空，對sel節(jié)點(diǎn)設(shè)置html；如果html為空，則返回sel節(jié)點(diǎn)的html；如果sel為空，則對根節(jié)點(diǎn)操作

• $text(sel, html)
  參照$html，不同點(diǎn)在于調(diào)用節(jié)點(diǎn)的text

• $append(sel, elem)
  將elem插入到sel節(jié)點(diǎn)的最后

• $fragment(sel, fromSel)
  對$(sel, fromSel)創(chuàng)建一個(gè)Fragment，對Fragment操作完后需要調(diào)用setup將實(shí)際內(nèi)容append到$(sel, fromSel)節(jié)點(diǎn)

PageView

PageView代表一個(gè)主頁面，可具有過場動(dòng)畫；PageView從View繼承

• goBack()
  返回上一層頁面

• onViewBack(backFrom, backData)
  頁面返回時(shí)回調(diào)
  backFrom : 所返回頁面的名字
  backData : 所返回頁面?zhèn)鬟f給該頁面的參數(shù)

• onViewPush(pushFrom, pushData, queryParams)
  頁面跳轉(zhuǎn)時(shí)回調(diào)
  pushFrom : 該頁面所跳轉(zhuǎn)頁面的名字
  pushData : 所跳轉(zhuǎn)頁面?zhèn)鬟f給該頁面的參數(shù)
  queryParams : 所跳轉(zhuǎn)頁面在url中傳遞的參數(shù)，建議不要使用該種方式傳遞，而是采用pushData來傳遞
  注意 : onViewPush在render之前被調(diào)用

• onInAnimationBeg()
  頁面進(jìn)入過場動(dòng)畫開始時(shí)回調(diào)

• onInAnimationEnd()
  頁面進(jìn)入過場動(dòng)畫結(jié)束時(shí)回調(diào)

• onDeviceBack()
  針對Android手機(jī)返回鍵點(diǎn)擊事件回調(diào)，如果要處理該事件，不再傳遞該事件，請返回true

NaviPageView

NaviPageView代表一個(gè)具有導(dǎo)航欄的主頁面；NaviPageView從Page繼承

• onLeft()
  導(dǎo)航欄左按鈕點(diǎn)擊回調(diào)

• onRight()
  導(dǎo)航欄右按鈕點(diǎn)擊回調(diào)

• setLeftImage(img)
  設(shè)置左按鈕的圖片

• setRightImage(img)
  設(shè)置右按鈕的圖片

• setLeftText(text)
  設(shè)置左按鈕的文本

• setRightText(text)
  設(shè)置右按鈕的文本
  注意 : 導(dǎo)航按鈕不支持同時(shí)設(shè)置圖片和文字

• setLeftVisible(v)
  設(shè)置左按鈕是否顯示

• setRightVisible(v)
  設(shè)置右按鈕是否顯示

• setTitle(text)
  設(shè)置導(dǎo)航欄Title

• setTitleVisible(v)
  設(shè)置導(dǎo)航欄是否顯示

開發(fā)和其他

1. 使用自己熟悉的一個(gè)編輯器，比如: Sublime，Notepad++，vim ...

2. 使用Chrome做模擬器和調(diào)試器。

3. 由于PC和手機(jī)WebKit的差異，需要在手機(jī)端進(jìn)行測試。

4. 在Android手機(jī)上，為了避開不同手機(jī)在WebKit上的兼容性，BIN使用了Crosswalk內(nèi)核，優(yōu)點(diǎn)是：Crosswalk性能更好，不存在兼容性問題；缺點(diǎn)是：編譯的APK會大10幾MB；Crosswalk有l(wèi)ite版本，但是lite版本不穩(wěn)定。