前言 : 最近很久沒(méi)有寫文章，不忙也忙的生活節(jié)奏炕横，博客相關(guān)的東西也沒(méi)法做成文章來(lái)詳細(xì)講，最多就是SEO相關(guān)葡粒，倒也沒(méi)多少人會(huì)真正用到份殿，所以過(guò)了一段時(shí)間，就目前開(kāi)發(fā)完的學(xué)院實(shí)訓(xùn)系統(tǒng)web網(wǎng)頁(yè)項(xiàng)目做個(gè)回顧嗽交，整個(gè)團(tuán)隊(duì)就我一個(gè)前端開(kāi)發(fā)卿嘲，所以我負(fù)責(zé)了需求分析、原型設(shè)計(jì)夫壁、UI/UE設(shè)計(jì)等工作拾枣。團(tuán)隊(duì)其他成員和老師都是負(fù)責(zé)java web后臺(tái)。個(gè)人從用框架開(kāi)發(fā)淺談對(duì)框架開(kāi)發(fā)的效率和效果的意義盒让。
<h4>(寫在文前的只言片語(yǔ)梅肤、意書情殤)長(zhǎng)歌破曉穿云過(guò),響徹碧霄振九天.)------Jason Zhang
web開(kāi)發(fā)已現(xiàn)世多年,技術(shù)成熟且學(xué)習(xí)平臺(tái)廣泛,筆者針對(duì)其中細(xì)節(jié)從本質(zhì)上進(jìn)行解釋.力求透徹.</h4>

前端頁(yè)面開(kāi)發(fā)框架
常見(jiàn)web頁(yè)面框架
web頁(yè)面開(kāi)發(fā)的框架，可能常用并且熟悉也就那幾個(gè).
頁(yè)面布局框架：Bootstrap邑茄、Materialize
JS框架： Jquery
一眼看過(guò)去似乎有點(diǎn)少哦姨蝴，其實(shí)開(kāi)發(fā)web網(wǎng)站只要需求不是特別多的，基本就夠了肺缕，有些甚至JS都用的少左医。

開(kāi)發(fā)中前臺(tái)頁(yè)面開(kāi)發(fā)最簡(jiǎn)單，因?yàn)樾枨蟮牟欢嗤荆鋵?shí)如果復(fù)雜了浮梢，也就會(huì)多用到H5和CSS3的一些東西外加JS和Ajax。
框架淺談
Bootstrap

Bootstrap.jpg

這個(gè)框架確實(shí)厲害泉手，我也不多介紹了黔寇。就跟它的宣傳語(yǔ)一樣。
Bootstrap 是最受歡迎的 HTML斩萌、CSS 和 JS 框架缝裤，用于開(kāi)發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的 WEB 項(xiàng)目颊郎。所有開(kāi)發(fā)者憋飞、所有應(yīng)用場(chǎng)景而設(shè)計(jì)。
Bootstrap 讓前端開(kāi)發(fā)更快速姆吭、簡(jiǎn)單榛做。所有開(kāi)發(fā)者都能快速上手、所有設(shè)備都可以適配、所有項(xiàng)目都適用检眯。

確實(shí)目前很多網(wǎng)頁(yè)都用了這個(gè)框架厘擂，確實(shí)為開(kāi)發(fā)省力不少，不過(guò)一些大公司的網(wǎng)頁(yè)都是把里面需要用的組建封裝成自己的锰瘸，并加以改變利用刽严。
新手可能很難上手并做到自己DIY，還是建議按著文檔的方法來(lái)調(diào)用避凝。等到有實(shí)際需求需要整合代碼才去把代碼獨(dú)立并入到工程中舞萄。
學(xué)會(huì)如何把別人框架組件的代碼整合進(jìn)自己項(xiàng)目的CSS和JS中確實(shí)很有用，因?yàn)榭蚣芟螺d的很多都是壓縮好的管削，大小很大倒脓，如果只用少部分JS和CSS樣式就有點(diǎn)大材小用了，所以得下對(duì)應(yīng)的組建并入到自己的工程中含思。
Materialize

Materialize.jpg

此框架出自谷歌可能知名度沒(méi)有Bootstrap大崎弃，但是它的設(shè)計(jì)感、配色和動(dòng)畫效果含潘，在目前看來(lái)是框架中最完美的吊履！
官網(wǎng)給出了很多組件的效果和使用方法，大家自行去看看效果吧.Materialize调鬓。
此框架除去它的其他頁(yè)面布局外艇炎，我最看重它的配色表和它給出的模版頁(yè)面，可以極大降低前端對(duì)于網(wǎng)頁(yè)的設(shè)計(jì)和布局的困惑腾窝，因?yàn)闆](méi)有獨(dú)立的平面設(shè)計(jì)師來(lái)規(guī)劃整個(gè)布局缀踪，前端開(kāi)發(fā)借助框架能更快開(kāi)發(fā)出想要的效果并且很好看。
總結(jié)

jQuery.jpg

其實(shí)沒(méi)講到Jquery虹脯，因?yàn)檫@個(gè)JS框架驴娃，對(duì)開(kāi)發(fā)其實(shí)作用不大，主要是因?yàn)榭蚣茏陨矶夹枰狫query來(lái)支持循集，它是一個(gè)必需品唇敞，因?yàn)樗孞S語(yǔ)言更優(yōu)美實(shí)用，writer less咒彤，do more疆柔。
其實(shí)到最后，我都沒(méi)有用上述的框架镶柱，而是發(fā)現(xiàn)了一個(gè)國(guó)外團(tuán)隊(duì)自己組建的新框架旷档。這個(gè)框架結(jié)合了Google’s Material Design Standards 和 Bootstrap.
用過(guò)后，我發(fā)現(xiàn)了將Materialize框架的一些優(yōu)點(diǎn)結(jié)合了Bootstrap的一些布局特點(diǎn)歇拆，將兩者共有的組件進(jìn)行優(yōu)化和美化鞋屈，配色和動(dòng)畫效果主要參考的Material范咨，讓Bootstrap的一些組件更生動(dòng)，提高了用戶的體驗(yàn)厂庇。后面詳細(xì)講下這個(gè)框架渠啊。
Propeller前后臺(tái)頁(yè)面框架

Propeller.jpg

0.jpg

前面提到了，就是一個(gè)極其好用的前后臺(tái)結(jié)合了Materialize和Bootstrap框架权旷。我更看重后臺(tái)的一些組件效果昭抒，比如很多后臺(tái)需要用到的，圖表炼杖、數(shù)據(jù)表格、日歷選擇都有盗迟，雖然可選性不多坤邪，但足夠用了。
使用效果
登錄頁(yè)面

1.jpg

后臺(tái)主頁(yè)面

2.jpg

因?yàn)镻ropeller提供提供了包含它組件的后臺(tái)管理頁(yè)面罚缕，所以開(kāi)發(fā)起來(lái)難度不大艇纺。
登錄模塊用到了驗(yàn)證框架后面會(huì)說(shuō)，然后根據(jù)項(xiàng)目需求自己DIY設(shè)置了一些東西和樣式邮弹。讓開(kāi)發(fā)效率得到了解放和提示黔衡，并利于二次開(kāi)發(fā)。
后臺(tái)這塊的難度主要在于二期開(kāi)發(fā)中可能會(huì)涉及到數(shù)據(jù)的圖表展示腌乡，需要用到JS插件來(lái)完成盟劫，目前還未著手開(kāi)發(fā)。然后就是數(shù)據(jù)的表格与纽、表單展示侣签，用插件自帶的數(shù)據(jù)表格，實(shí)現(xiàn)了對(duì)表單的排序和搜索急迂，簡(jiǎn)化了后臺(tái)開(kāi)發(fā)的工作量影所。
具體的頁(yè)面效果和交互效果大家在文章最后點(diǎn)擊訪問(wèn)我給出的地址查看源代碼和演示頁(yè)面。
bootstrapValidator表單驗(yàn)證
表單驗(yàn)證的第三方插件確實(shí)有不少僚碎，bootstrapValidator這個(gè)是我在一個(gè)網(wǎng)站偶然發(fā)現(xiàn)的猴娩，由別人整理出來(lái)發(fā)表過(guò)，我就拿來(lái)用了勺阐。只是這個(gè)框架是根據(jù)查詢表單的ID來(lái)定位的卷中，但是我開(kāi)發(fā)的時(shí)候用的Propeller框架，它的模版頁(yè)面把項(xiàng)目需求的三個(gè)頁(yè)面集合到了一個(gè)上渊抽，即登錄仓坞、注冊(cè)、找回頁(yè)面腰吟，產(chǎn)生了三個(gè)頁(yè)面无埃，所以我在JS一共調(diào)用了3次來(lái)檢測(cè)徙瓶，不知道有什么更方便簡(jiǎn)潔的方法不。因?yàn)槲业囊粋€(gè)頁(yè)面上面有三個(gè)表單嫉称，通過(guò)按鈕點(diǎn)擊來(lái)控制隱藏和顯示侦镇。
做驗(yàn)證這塊，設(shè)計(jì)到了正則表達(dá)式织阅，因?yàn)橐?yàn)證郵箱和密碼長(zhǎng)度壳繁、強(qiáng)度，所以網(wǎng)上百度了下荔棉，這方面的正則寫法闹炉。
<pre>
regexp: {regexp: /(?!^[0-9]+$)(?![A-z]+$)(?!^[A-z0-9]+$)^.{6,12}$/,message:
'必須包含數(shù)字和字母，以字母開(kāi)頭（長(zhǎng)度為6-12位）'},
</pre>
<pre>
var email = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})
$/;//獲取輸入郵箱并用正則表達(dá)式把空格替換為空字符
</pre>
郵箱檢驗(yàn)其實(shí)bootstrapValidator中可以用正則來(lái)檢驗(yàn)润樱，我當(dāng)時(shí)為了實(shí)現(xiàn)點(diǎn)擊發(fā)送驗(yàn)證碼的效果渣触，所以把這塊的檢驗(yàn)又重復(fù)了一遍，因?yàn)榭刂破溧]箱的規(guī)范來(lái)發(fā)送郵件壹若，實(shí)現(xiàn)自動(dòng)倒計(jì)時(shí)的效果嗅钻。必須保證郵箱有效。因?yàn)椴恢廊绾卧赽ootstrapValidator框架中來(lái)調(diào)用自己的方法和函數(shù)店展，所以就這樣用了個(gè)單獨(dú)的JS來(lái)完成养篓。完整代碼如下：
<pre>
// 驗(yàn)證碼jsvar sends = {
checked: 1, send: function() {
var email = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/; //獲取輸入郵箱并用正則表達(dá)式把空格替換為空字符
var val = $('#forgot-email').val().replace(/\s+/g, "");
var vall = $('#fotgot-email').val().replace(/\s+/g, "");
if ($('.div-email').find('span').length == 0 && $('.div-email a').attr('class') == 'send1') { if (!email.test(val) || val.length == 0) {
$('.div-email').append('<span class="error">Error</span>');
return false;
} }
if ($('.div-email').find('span').length == 0 && $('.div-email a').attr('class') == 'send1') { if (!email.test(vall) || vall.length == 0) {
$('.div-email').append('<span class="error">Error</span>');
return false;
} }
if (email.test(val)) {
var time = 60; $('.div-email span').remove(); function timeCountDown() {
if (time == 0) { clearInterval(timer);
$('.div-email a').addClass('send1').removeClass('send0').html("發(fā)送驗(yàn)證碼"); sends.checked = 1;
return true;
}
$('.div-email a').html(time + "S后再次發(fā)送");
time--; return false; sends.checked = 0;
}
$('.div-email a').addClass('send0').removeClass('send1'); timeCountDown(); var timer = setInterval(timeCountDown, 1000); }
if (email.test(vall)) { var time = 60;
$('.div-email span').remove(); function timeCountDown() {
if (time == 0) {
clearInterval(timer);
$('.div-email a').addClass('send1').removeClass('send0').html("發(fā)送驗(yàn)證碼"); sends.checked = 1; return true;
}
$('.div-email a').html(time + "S后再次發(fā)送"); time--;
return false; sends.checked = 0;
}
$('.div-email a').addClass('send0').removeClass('send1'); timeCountDown(); var timer = setInterval(timeCountDown, 1000);
} }
}
// 消除重復(fù)錯(cuò)誤樣式$(".register-login").click(function() { $('.div-email span').remove();})
</pre>

這個(gè)驗(yàn)證框架還有點(diǎn)小問(wèn)題，就是當(dāng)驗(yàn)證失敗的時(shí)候赂蕴，應(yīng)該要阻止表單提交的默認(rèn)事件發(fā)生柳弄，框架沒(méi)有做這方面處理，需要我們自己來(lái)完善概说，代碼如下：
<pre>
// 驗(yàn)證成功前提交按鈕不起作用
$("#defaultForm").submit(function(ev) {
ev.preventDefault();
});
$("#defaultFormm").submit(function(ev) {
ev.preventDefault();
});
$("#submit").on("click", function() {
var bootstrapValidator = $("#defaultForm").data('bootstrapValidator'); bootstrapValidator.validate();
if (bootstrapValidator.isValid()) {
$("#defaultForm").submit();
}else{
return;}
});
</pre>

3.jpg

保證只要有表單錯(cuò)誤语御，按鈕不起作用，全部正確后按鈕可用席怪。
注意：bootstrapValidator驗(yàn)證框架用的字體圖標(biāo)有2套(glyphicon和FontAwesome)应闯，推薦大家使用FontAwesome，至于為什么挂捻，glyphicon在火狐瀏覽器會(huì)出現(xiàn)問(wèn)題碉纺，F(xiàn)ontAwesome目前在火狐、IE刻撒、谷歌內(nèi)核瀏覽器不會(huì)出現(xiàn)問(wèn)題骨田，問(wèn)題主要是加載不出來(lái)字體文件。

缺陷：表單驗(yàn)證中声怔，我還沒(méi)找到正則表達(dá)式來(lái)實(shí)現(xiàn)驗(yàn)證密碼态贤，首字母開(kāi)頭并要有大寫，并且由數(shù)字和字母組成的正則表達(dá)式寫法醋火，因?yàn)閷?duì)正則不熟悉悠汽，也算是一個(gè)遺憾了箱吕。目前的效果是只要包含了字幕和數(shù)字長(zhǎng)度大于6位驗(yàn)證就通過(guò)。
使用其他小插件收獲
基于Bootstrap的導(dǎo)航
為什么想到用這個(gè)插件來(lái)實(shí)現(xiàn)導(dǎo)航柿冲，因?yàn)榭紤]到效率和效果茬高，因?yàn)閳F(tuán)隊(duì)沒(méi)有美工啊，我自己考慮到了兼容性問(wèn)題假抄，想做個(gè)適配手機(jī)端的首頁(yè)效果怎栽，后臺(tái)和登錄界面沒(méi)有做適配移動(dòng)端的設(shè)計(jì)，所以為了快速開(kāi)發(fā)并且好看用到了網(wǎng)上開(kāi)源的一個(gè)插件宿饱，有23種基于Bootstrap設(shè)計(jì)的導(dǎo)航效果熏瞄。
現(xiàn)在都是框架開(kāi)發(fā)，很多東西其實(shí)真的不想從底層開(kāi)始寫谬以，加之原型圖根本沒(méi)有美工强饮，自己來(lái)設(shè)計(jì)要浪費(fèi)很多時(shí)間成本。瀏覽器沒(méi)有下拉時(shí)

瀏覽器沒(méi)有下拉時(shí).jpg

瀏覽器下拉后

瀏覽器下拉后.jpg

hover的css效果
hover的CSS3動(dòng)畫效果蛉签，只支持IE9以上的瀏覽器，是為了增加用戶體驗(yàn)而添加的效果沥寥。具體的效果要自己看碍舍，我這里就不錄GIF動(dòng)畫來(lái)展示效果了，效果主要在首頁(yè)的列表新聞的更多按鈕那邑雅，和頂部菜單導(dǎo)航也用到了動(dòng)畫效果片橡。
End

框架開(kāi)發(fā)解放了生產(chǎn)力，讓一個(gè)靜態(tài)頁(yè)面效果更逼真淮野，也讓用戶體驗(yàn)逐漸上去捧书，但是目前對(duì)網(wǎng)站的需求主要還是為了展示和宣傳一些東西，反觀教育機(jī)構(gòu)和政府部門的網(wǎng)站都是偏動(dòng)畫少骤星，體現(xiàn)了公關(guān)的嚴(yán)肅性经瓷。所以動(dòng)畫效果盡量還是分對(duì)象來(lái)使用。
框架和插件在計(jì)算機(jī)領(lǐng)域的各行業(yè)都是持續(xù)不減的話題洞难，有人鼓勵(lì)直接用框架和插件舆吮，有人贊成原生手寫輔以框架。有人注重頁(yè)面展示效果队贱，卻不關(guān)心底層的實(shí)現(xiàn)色冀，有人重視底層實(shí)現(xiàn)原理，愿意自己照葫蘆畫瓢花大量時(shí)間自己寫柱嫌，還有人兼顧兩者锋恬，利用完框架實(shí)現(xiàn)頁(yè)面效果后，重新看框架實(shí)現(xiàn)的源代碼编丘，理解其中來(lái)龍去脈与学，根據(jù)自己實(shí)現(xiàn)選擇是否深入研究彤悔。