站長資訊網(wǎng)在電力公司工作已有兩年，開發(fā)的各個應(yīng)用都是基于H5應(yīng)用。而H5引用中又基于cordova.js 庫來開發(fā)，各個外包公司接了應(yīng)用，都是一頭霧水，不曉得怎么開發(fā)，這篇文章主要是講解使用基于seajs庫和Bootstrap框架來搭建的一套前端通用框架。
前端框架主要研究了四點
1、 研究Web框架的動態(tài)加載技術(shù)
針對移動互聯(lián)網(wǎng)環(huán)境下移動端內(nèi)存、流量、電池資源有限，通過使用動態(tài)加載技術(shù)，將程序文件打散成多個小文件，以延遲加載技術(shù)（LazyLoading），實現(xiàn)按需加載提升用戶體驗，降低移動端的資源使用率。在業(yè)務(wù)和樣式上，前端開發(fā)人員只需要在JS代碼塊頭部引用需要的js庫和css樣式即可。在邏輯上，開發(fā)人員只需調(diào)用后端提供的接口進(jìn)行讀取與顯示。這種技術(shù)的主要優(yōu)點包括可維護(hù)性高、動態(tài)加載快、前端性能優(yōu)化好。
2、 研究模塊化構(gòu)建技術(shù)
在前端人員開發(fā)移動應(yīng)用項目的基礎(chǔ)上，通過使用模塊化構(gòu)建技術(shù)，將每個頁面分成多個功能進(jìn)行分塊化處理，這樣既可快速的實現(xiàn)移動端的頁面獲取，也可在移動端調(diào)試的時候快速定位相關(guān)問題。通過定義多個模塊來相互調(diào)用，既保證了各個模塊之間不發(fā)生沖突，又提高了開發(fā)人員的編碼效率。其優(yōu)點主要是職責(zé)單一、依賴就近。
3、 研究多分辨率、多尺寸移動終端界面適配技術(shù)
針對移動端的各個終端設(shè)備，在基于bootstrap框架的基礎(chǔ)上，通過媒體查詢功能（Medie Query）來設(shè)置統(tǒng)一的樣式，通過視窗（meta）屬性內(nèi)容，設(shè)置等比例窗口，這樣實現(xiàn)了不同手機(jī)型號的不同分辨率、不同尺寸終端無法適配的問題，進(jìn)一步減少代碼的冗余和再次開發(fā)。
4、 研究移動端公用組件的封裝
基于bootstrap框架下一些組件封裝的有限，通過對時間插件(datatime)、彈窗插件(dialog)、圖形插件(echarts)、下拉刷新上拉加載插件(Refresh)、滑動插件(swiper)、省市區(qū)選擇 (citypicker) 插件、提示信息插件(UED)等一些插件進(jìn)行封裝，按需調(diào)用，按需加載，以做到不同頁面引用不同的插件，實現(xiàn)組件的調(diào)用，大大減少了前端開發(fā)人員的時間，同時也提高了用戶體驗。
這里，我們就拿其中一個插件——彈窗來講解
先給大家看看效果圖吧
彈窗，基本上每個應(yīng)用都會用到，而各式各樣的彈窗有那么多，許多程序員，這邊寫一套，那邊寫一套，代碼特別亂，這里我在網(wǎng)上也找了一套，自己單獨整理了一下，希望大家以后使用共同的一套代碼，做到簡潔，簡單。
前端h5代碼
h5頁面要做到簡潔，簡單，不允許有單獨的css和js邏輯代碼（下面一句css代碼是為了測試使用）
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <title>首頁</title> <meta charset="utf-8" /> <style>.col-xs-6 { padding: 10px 1px; }</style> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-6"><button class="btn has-hover input-reverse-tofull">默認(rèn)的彈窗</button></div> <div class="col-xs-6"><button class="btn btn-success has-hover">success</button></div> <div class="col-xs-6"><button class="btn btn-primary has-hover">primary</button></div> <div class="col-xs-6"><button class="btn btn-danger has-hover">danger</button></div> <div class="col-xs-6"><button class="btn btn-warning has-hover">warning</button></div> <div class="col-xs-6"><button class="btn btn-success has-hover">可設(shè)置背景色</button></div> <div class="col-xs-6"><button class="btn btn-danger has-hover">自定義標(biāo)題、描述</button></div> <div class="col-xs-6"><button class="btn btn-danger has-hover">點后回調(diào)</button></div> <div class="col-xs-6"><button class="btn has-hover input-reverse-tofull">box-shadow</button></div> <div class="col-xs-6"><button class="btn btn-success has-hover">box-shadow</button></div> <div class="col-xs-6"> <button class="btn btn-primary has-hover">box-shadow</button> </div> <div class="col-xs-6"><button class="btn btn-primary has-hover">無進(jìn)入動畫</button></div> <div class="col-xs-6"><button class="btn btn-warning has-hover">單個按鈕</button></div> <div class="col-xs-6"> <button type="button" class="btn btn-info" id="btn-modal">bootstrap彈窗</button> </div> <div class="col-xs-6"> <button type="button" class="btn btn-info" >無標(biāo)題</button> </div> </div> </div> <script type="text/html" id="modal-tpl"> <div id="dialogContent">這里是用戶獲取到的內(nèi)容,獲取的內(nèi)容，可直接設(shè)置在這里，然后在頁面顯示</div> </script> <script>var basepath = "../../";//定義當(dāng)前目錄的位置（如果全部在根目錄的話，則不需要定義）</script><!--1、首先加載sea.js 我們使用的是模塊化來加載文件--> <script src="../../js/modules/sea.js"></script> <!--2、然后加載配置項--> <script src="../../config.js"></script> <!--3、最后使用seajs.use來加載當(dāng)前需要加載的模塊--> <script>seajs.use("../js/dialogs");</script> </body> </html>
View Code
上面代碼，是用我的通用框架代碼，大家如果用到彈窗，可直接引用dialog.js 、dialog.css、jquery.js和dialogtest.js即可
dialogtest.js代碼如下
define(function (require) { require("bootstrap");//加載bootstrap require('dialog');//加載彈窗 require('dialogcss');//加載彈窗 var modal = new Modal({ title: '測試案例', content: $('#modal-tpl').html(), width: "90%", onOk: function () { //操作 alert("你點擊了確定"); }, onModalShow: function () { //彈窗初始化操作 } }); $(".btn").each(function (index) { $(this).on("click", function () { if(index==0) { $('body').dailog({ type: 'defalut' }); }else if(index==1) { $('body').dailog({ type: 'success' }) } else if (index == 2) { $('body').dailog({ type: 'primary' }) } else if (index == 3) { $('body').dailog({ type: 'danger' }) } else if (index == 4) { $('body').dailog({ type: 'warning' }) } else if (index ==5) { $('body').dailog({ type: 'success', maskBg: 'rgba(33,11,22,0.5)' }) } else if (index ==6) { $('body').dailog({ type: 'danger', title: '我是自定義標(biāo)題', discription: '這里是自定義的描述，可以寫上你的描述或者他的描述，總之可以寫很多文字，你自己看著辦吧' }, function (ret) { if (ret.index == 0) { alert("你點擊了確定按鈕"); } else { alert("你點擊了取消操作"); } console.log("信息為："+JSON.stringify(ret)); }) } else if (index ==7) { $('body').dailog({ type: 'danger', title: '錯誤提示', discription: '這里是自定義的描述，可以寫上你的描述或者他的描述，總之可以寫很多文字，你自己看著辦吧', isInput: true }, function (ret) { console.log(ret); if (ret.index === 0) { alert('你點擊的是第' + ret.index + '個按鈕,狀態(tài):' + ret.input.status + ';輸入的值為:' + ret.input.value) }; }); } else if (index == 8) { $('body').dailog({ type: 'defalut', showBoxShadow: true }) } else if (index ==9) { $('body').dailog({ type: 'success', showBoxShadow: true, maskBg: '#fff' }) } else if (index == 10) { $('body').dailog({ type: 'primary', showBoxShadow: true, maskBg: '#ccc' }) } else if (index == 11) { $('body').dailog({ type: 'primary', showBoxShadow: true, animateStyle: 'none' }) } else if (index == 12) { $('body').dailog({ type: 'warning', showBoxShadow: true, animateStyle: 'none', bottons: ['確定'], discription: '也許有點問題!' }) }else if(index==13) { modal.open(); } else if (index == 14) { $('body').dailog({ type: 'defalut',showBoxShadow: true, animateStyle: 'none',isnobutton:false, bottons: ['關(guān)閉'], discription: '也許有點問題也許有點問題也許有點問題也許有點問題也許有點問題也許有點問題也許有點問題也許有點問題也許有點問題!' }); } }) }) })
