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