BUI入門(mén)系列-Hello BUI !

導(dǎo)引
歡迎使用BUI醇蝴！在這一章節(jié)里控硼，我們將學(xué)習(xí)以下內(nèi)容:

如何加載BUI文件和開(kāi)始使用BUI的一些基礎(chǔ)功能
BUI依賴(lài)的其他框架
如何去定義模塊和加載模塊
如何使用API以及對(duì)應(yīng)的demo
在使用過(guò)程中遇到的問(wèn)題如何去處理

如何開(kāi)始

最簡(jiǎn)單的使用BUI的方式是直接引用CDN上的文件，這能節(jié)約很多部署文件帶來(lái)的問(wèn)題，不過(guò)這也要求，你必須能訪問(wèn)公共網(wǎng)絡(luò)。

你只需要把你要運(yùn)行的頁(yè)面放到一個(gè)web server上柿冲，BUI框架沒(méi)有什么安全上的限制，所以不需要服務(wù)器有特別的功能兆旬，不過(guò)如果能提供Combo功能更好假抄，Combo功能在下面會(huì)介紹。

最簡(jiǎn)單的示例

<pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Tutorial: Hello BUI!</title>
  6. <link rel="stylesheet">
  7. <link rel="stylesheet">
  8. </head>
  9. <body>
  10. <h1>Hello</h1>
  12. <script src="https://s.tbcdn.cn/g/fi/bui/jquery-1.8.1.min.js"></script>
  13. <script src="https://s.tbcdn.cn/g/fi/bui/seed-min.js?t=201212261326"></script>
  14. <script>
  15. BUI.use('bui/overlay', function (Overlay) { //因?yàn)閙essage屬于
  16. Overlay.Message.Alert('歡迎使用BUI');
  17. });
  18. </script>
  19. </body>
  20. </html>

</pre>

上面的代碼演示了如何使用BUI丽猬，你需要引入：

  1. BUI默認(rèn)的CSS文件宿饱，如果你有自定義的樣式可以不引入
  2. BUI依賴(lài)的類(lèi)庫(kù)，默認(rèn)是JQuery,也可以更換為Kissy脚祟，參看詳情

你可能需要處理使用https的資源谬以，你可以直接將地址換成類(lèi)似于：
https://s.tbcdn.cn/g/fi/bui/seed-min.js的地址

不使用loader

如果你對(duì)loader陌生，可以直接將整個(gè)BUI引入由桌，但是我們不推薦這樣做：

  1. 整個(gè)BUI文件很大为黎，超過(guò)200k
  2. 有一些模塊并未包含到打包好的文件中
  3. 未來(lái)不排除，在新的版本中去掉這種引入方式

<pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Tutorial: Hello BUI!</title>
  6. <link rel="stylesheet">
  7. <link rel="stylesheet">
  8. </head>
  9. <body>
  10. <h1 id="greeting">Hello</h1>
  12. <script src="https://s.tbcdn.cn/g/fi/bui/jquery-1.8.1.min.js"></script>
  13. <script src="https://s.tbcdn.cn/g/fi/bui/bui-min.js?t=201212261326"></script>
  14. <script>
  15. BUI.Message.Alert('歡迎使用BUI'); //Message 屬于Overlay模塊行您，BUI.Message = BUI.Overlay.Message
  16. //TO DO
  17. </script>
  18. </body>
  19. </html>

</pre>

<label class="label label-info" style="display: inline-block; padding: 1px 4px 2px; font-size: 12px; font-weight: bold; line-height: 18px; color: rgb(255, 255, 255); vertical-align: middle; white-space: nowrap; text-shadow: rgba(0, 0, 0, 0.25) 0px -1px 0px; background-color: rgb(58, 135, 173); border-radius: 3px;">注意</label> 以下幾點(diǎn)：

  1. css文件放到head標(biāo)簽中
  2. script文件作為body的最后標(biāo)簽铭乾，防止JS阻塞DOM加載

更多的關(guān)于加載和配置BUI的內(nèi)容請(qǐng)參看：BUI的加載和配置

模塊規(guī)范

BUI的模塊規(guī)范遵循CMD規(guī)范,加載默認(rèn)方式使用seajs，可以去seajs的文檔了解更多的信息娃循。

作為BUI的開(kāi)發(fā)者為了方便用戶炕檩，我們?cè)趯?shí)現(xiàn)和加載層次上，屏蔽了底層loader的存在捌斧，您只需要按照BUI的寫(xiě)法既可以無(wú)障礙的使用loader笛质。

定義模塊

模塊的定義遵循CMD規(guī)范，模塊的名稱(chēng)一般使用"/"捞蚂，例如 bui/list/simplelist,模塊名稱(chēng)必須跟目錄有對(duì)應(yīng)關(guān)系经瓷，上面定義的模塊的文件是bui/list/simplelist.js

這里有非常復(fù)雜的目錄映射，不過(guò)日常使用中洞难，使用最簡(jiǎn)單的方式：文件目錄名跟模塊名一致的規(guī)則即可。

示例如下：

<pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">

  1. //定義模塊的函數(shù)揭朝，有3個(gè)變量队贱，模塊名稱(chēng)、依賴(lài)的模塊和模塊的主體函數(shù)

  2. //模塊名稱(chēng)和依賴(lài)的模塊可以省略

  3. define('newModuleName',['module1','module2'],function(require){

  4. var Module1 = require('module1'); //根據(jù)模塊名稱(chēng)獲取模塊

  5. var NewModule = function(){ //定義模塊

  6. };

  7. return NewModlue; //將定義的新模塊返回潭袱，在其他模塊中require('newModuleName')來(lái)使用

  8. });

</pre>

CMD的規(guī)范比這里的示例要復(fù)雜柱嫌，但是僅僅使用BUI，了解示例的代碼就足夠了屯换。如果想了解更多這方面的知識(shí)的話编丘，可以去深入了解一下seajs与学。

模塊加載

以下代碼簡(jiǎn)單的展示加載BUI模塊的方式：

默認(rèn)的加載方式

BUI.use(id, callback)

<pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">

  1. <script src="https://s.tbcdn.cn/g/fi/bui/jquery-1.8.1.min.js"></script>

  2. <script src="https://s.tbcdn.cn/g/fi/bui/seed-min.js?t=201212261326"></script>

  3. <script type="text/javascript">

  4. BUI.use('bui/list',function(List){

  5. });

  6. //一次加載多個(gè)模塊

  7. //bui/list 對(duì)應(yīng)模塊 List

  8. //bui/data 對(duì)應(yīng)模塊 Data

  9. BUI.use(['bui/list','bui/data'],function(List,Data){

  10. });

  11. </script>

</pre>

加載多個(gè)模塊時(shí)，當(dāng)模塊加載完畢后會(huì)調(diào)用指定的callback方法嘉抓，其中回調(diào)方法的參數(shù)與加載的模塊一一對(duì)應(yīng)索守。如：加載['bui/list','bui/data']，其后的回調(diào)方法則需要定義兩個(gè)參數(shù)function(List,Data)抑片，則參數(shù)List所對(duì)應(yīng)的是bui/list模塊的對(duì)象卵佛，如此類(lèi)推。

使用CDN

我們所有的示例中皆使用cdn上的JS文件敞斋，這意味著你可以直接復(fù)制代碼粘貼到本地運(yùn)行截汪，而不需要修改任何路徑，但這里有以下缺點(diǎn)：

  • 開(kāi)發(fā)方面植捎，cdn上的文件都是經(jīng)過(guò)build的衙解，經(jīng)過(guò)壓縮和代碼優(yōu)化，這也意味著調(diào)試?yán)щy
  • 這也要求你能說(shuō)服你的客戶焰枢，接受引用cdn上的文件蚓峦，很多情況下，這很困難医咨。
  • 加載你自己的模塊時(shí)枫匾，你需要額外配置自己的配置文件。
  • 目前CDN上的代碼更新比較頻繁拟淮，因?yàn)锽UI處于開(kāi)發(fā)階段必然會(huì)接受大量需求和反饋干茉，為了能及時(shí)響應(yīng)，所以不可避免的會(huì)偶爾的引入一些問(wèn)題很泊。

上面的所有問(wèn)題都有對(duì)應(yīng)的解決方案角虫，可以查看以下章節(jié)加載文件，編譯自己的模塊來(lái)進(jìn)一步了解委造。

假如你要部署自己的本地應(yīng)用戳鹅，你可以下載BUI的源碼,同時(shí)部署到自己的web server上。你可以將自己的代碼放在自己的目錄下昏兆，如下圖：

image

然后這樣引用文件：

<pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Tutorial: Hello BUI!</title>
  6. <link href="../assets/css/bui/css/dpl-min.css" rel="stylesheet">
  7. <link href="../assets/css/bui/css/bui-min.css" rel="stylesheet">
  8. </head>
  9. <body>
  10. <h1 id="greeting">Hello</h1>
  12. <script src="../assets/js/bui/jquery-1.8.1.min.js"></script>
  13. <script src="../assets/js/bui/seed-min.js?t=201212261326"></script>
  14. <script>
  15. BUI.use('bui/list',function(List){
  16. //TO DO
  17. });
  18. </script>
  19. </body>
  20. </html>

</pre>

獲取幫助

  • 你可以去BUI網(wǎng)站查看更多的Demo
  • 你可以去BUI論壇參與交流和探討
  • 你可以去BUI API查看控件的API以便更加了解BUI
  • 你可以去issue列表里提交自己的問(wèn)題和需求
  • 你可以參加旺旺群：778141976枫虏，QQ群：138692365

下一步學(xué)習(xí)

開(kāi)始使用BUI是非常簡(jiǎn)單的爬虱，只需要引入BUI所依賴(lài)的文件隶债，和引入對(duì)應(yīng)的模塊即可跑筝。但是BUI有很多非常好的機(jī)制和功能死讹，根據(jù)你的需要你可以按照不同的章節(jié)進(jìn)行學(xué)習(xí)曲梗。

  • 假如你使用過(guò)BUI赞警，你想了解更多的BUI整體的設(shè)計(jì)和未來(lái)的方向妓忍，你可以去看一下BUI的現(xiàn)狀章節(jié)
  • 假如你想知道更多的加載BUI模塊相關(guān)的信息，你可以去查看一下加載文件章節(jié)
  • 假如你僅僅是被BUI的控件吸引愧旦，可以直接去BUI網(wǎng)站復(fù)制對(duì)應(yīng)的Demo
  • 假如你想了解BUI的控件結(jié)構(gòu)，基于BUI進(jìn)行新控件的開(kāi)發(fā)和擴(kuò)展忘瓦，可以從類(lèi)的創(chuàng)建和繼承開(kāi)始

BUI 剛剛起步，但是我們堅(jiān)持的理念是：讓您的工作更輕松耕皮，不讓前端領(lǐng)域成為您項(xiàng)目的瓶頸境蜕，更希望您能參與到BUI的開(kāi)發(fā)當(dāng)中！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末凌停，一起剝皮案震驚了整個(gè)濱河市粱年，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌台诗，老刑警劉巖，帶你破解...
    沈念sama閱讀 217,826評(píng)論 6贊 506
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件拉队，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡粱快，警方通過(guò)查閱死者的電腦和手機(jī)叔扼，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,968評(píng)論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門(mén)事哭，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)瓜富，“玉大人鳍咱，你說(shuō)我怎么就攤上這事与柑。” “怎么了价捧？”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,234評(píng)論 0贊 354
  • 道士緝兇錄：失蹤的賣(mài)姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長(zhǎng)干旧。 經(jīng)常有香客問(wèn)我妹蔽，道長(zhǎng)挠将，這世上最難降的妖魔是什么？ 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,562評(píng)論 1贊 293
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任舔稀，我火速辦了婚禮掌测，結(jié)果婚禮上内贮，老公的妹妹穿的比我還像新娘汞斧。我一直安慰自己，他們只是感情好粘勒，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,611評(píng)論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著庙睡，像睡著了一般事富。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上乘陪，一...
    開(kāi)封第一講書(shū)人閱讀 51,482評(píng)論 1贊 302
  • 城市分裂傳說(shuō)
    那天统台，我揣著相機(jī)與錄音，去河邊找鬼贱勃。 笑死谣拣，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的森缠。 我是一名探鬼主播，決...
    沈念sama閱讀 40,271評(píng)論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開(kāi)眼贵涵，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼宾茂！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起跨晴，我...
    開(kāi)封第一講書(shū)人閱讀 39,166評(píng)論 0贊 276
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎端盆，沒(méi)想到半個(gè)月后费封，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體蒋伦，經(jīng)...
    沈念sama閱讀 45,608評(píng)論 1贊 314
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,814評(píng)論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年痕届，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片锤窑。...
    茶點(diǎn)故事閱讀 39,926評(píng)論 1贊 348
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡蓝撇，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出渤昌，到底是詐尸還是另有隱情，我是刑警寧澤独柑，帶...
    沈念sama閱讀 35,644評(píng)論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站忌栅，受9級(jí)特大地震影響车酣，放射性物質(zhì)發(fā)生泄漏索绪。R本人自食惡果不足惜湖员，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,249評(píng)論 3贊 329
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一瑞驱、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧唤反，春花似錦、人聲如沸彤侍。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,866評(píng)論 0贊 22
  • 一樁弒父案盏阶，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至，卻和暖如春惠窄，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,991評(píng)論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工楞卡， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人蒋腮。 一個(gè)月前我還...
    沈念sama閱讀 48,063評(píng)論 3贊 370
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長(zhǎng)得像焦除，于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子作彤，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,871評(píng)論 2贊 354