摘要：框架開發(fā)解放了生產(chǎn)力，讓一個靜態(tài)頁面效果更逼真，也讓用戶體驗逐漸上去，但是目前對網(wǎng)站的需求主要還是為了展示和宣傳一些東西，反觀教育機構(gòu)和政府部門的網(wǎng)站都是偏動畫少，體現(xiàn)了公關(guān)的嚴(yán)肅性。

最近很久沒有寫文章，不忙也忙的生活節(jié)奏，博客相關(guān)的東西也沒法做成文章來詳細(xì)講，最多就是SEO相關(guān)，倒也沒多少人會真正用到，所以過了一段時間，就目前開發(fā)完的學(xué)院實訓(xùn)系統(tǒng)web網(wǎng)頁項目做個回顧，整個團隊就我一個前端開發(fā)，所以我負(fù)責(zé)了需求分析、原型設(shè)計、UI/UE設(shè)計等工作。團隊其他成員和老師都是負(fù)責(zé)java web后臺。個人從用框架開發(fā)淺談對框架開發(fā)的效率和效果的意義。

web頁面開發(fā)的框架，可能常用并且熟悉也就那幾個.

頁面布局框架：Bootstrap、Materialize

JS框架： Jquery

一眼看過去似乎有點少哦，其實開發(fā)web網(wǎng)站只要需求不是特別多的，基本就夠了，有些甚至JS都用的少。

開發(fā)中前臺頁面開發(fā)最簡單，因為需求的不多，其實如果復(fù)雜了，也就會多用到H5和CSS3的一些東西外加JS和Ajax。

這個框架確實厲害，我也不多介紹了。就跟它的宣傳語一樣。

Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發(fā)響應(yīng)式布局、移動設(shè)備優(yōu)先的 WEB 項目。所有開發(fā)者、所有應(yīng)用場景而設(shè)計。
Bootstrap 讓前端開發(fā)更快速、簡單。所有開發(fā)者都能快速上手、所有設(shè)備都可以適配、所有項目都適用。

確實目前很多網(wǎng)頁都用了這個框架，確實為開發(fā)省力不少，不過一些大公司的網(wǎng)頁都是把里面需要用的組建封裝成自己的，并加以改變利用。

新手可能很難上手并做到自己DIY，還是建議按著文檔的方法來調(diào)用。等到有實際需求需要整合代碼才去把代碼獨立并入到工程中。

學(xué)會如何把別人框架組件的代碼整合進(jìn)自己項目的CSS和JS中確實很有用，因為框架下載的很多都是壓縮好的，大小很大，如果只用少部分JS和CSS樣式就有點大材小用了，所以得下對應(yīng)的組建并入到自己的工程中。

此框架出自谷歌可能知名度沒有Bootstrap大，但是它的設(shè)計感、配色和動畫效果，在目前看來是框架中最完美的！

官網(wǎng)給出了很多組件的效果和使用方法，大家自行去看看效果吧.Materialize。

此框架除去它的其他頁面布局外，我最看重它的配色表和它給出的模版頁面，可以極大降低前端對于網(wǎng)頁的設(shè)計和布局的困惑，因為沒有獨立的平面設(shè)計師來規(guī)劃整個布局，前端開發(fā)借助框架能更快開發(fā)出想要的效果并且很好看。

其實沒講到Jquery，因為這個JS框架，對開發(fā)其實作用不大，主要是因為框架自身都需要Jquery來支持，它是一個必需品，因為它讓JS語言更優(yōu)美實用，writer less，do more。

其實到最后，我都沒有用上述的框架，而是發(fā)現(xiàn)了一個國外團隊自己組建的新框架。
這個框架結(jié)合了Google"s Material Design Standards 和 Bootstrap.

用過后，我發(fā)現(xiàn)了將Materialize框架的一些優(yōu)點結(jié)合了Bootstrap的一些布局特點，將兩者共有的組件進(jìn)行優(yōu)化和美化，配色和動畫效果主要參考的Material，讓Bootstrap的一些組件更生動，提高了用戶的體驗。后面詳細(xì)講下這個框架。

前面提到了，就是一個極其好用的前后臺結(jié)合了Materialize和Bootstrap框架。我更看重后臺的一些組件效果，比如很多后臺需要用到的，圖表、數(shù)據(jù)表格、日歷選擇都有，雖然可選性不多，但足夠用了。

登錄頁面

后臺主頁面

因為Propeller提供提供了包含它組件的后臺管理頁面，所以開發(fā)起來難度不大。

登錄模塊用到了驗證框架后面會說，然后根據(jù)項目需求自己DIY設(shè)置了一些東西和樣式。讓開發(fā)效率得到了解放和提示，并利于二次開發(fā)。

后臺這塊的難度主要在于二期開發(fā)中可能會涉及到數(shù)據(jù)的圖表展示，需要用到JS插件來完成，目前還未著手開發(fā)。然后就是數(shù)據(jù)的表格、表單展示，用插件自帶的數(shù)據(jù)表格，實現(xiàn)了對表單的排序和搜索，簡化了后臺開發(fā)的工作量。

具體的頁面效果和交互效果大家在文章最后點擊訪問我給出的地址查看源代碼和演示頁面。

表單驗證的第三方插件確實有不少，bootstrapValidator這個是我在一個網(wǎng)站偶然發(fā)現(xiàn)的，由別人整理出來發(fā)表過，我就拿來用了。只是這個框架是根據(jù)查詢表單的ID來定位的，但是我開發(fā)的時候用的Propeller框架，它的模版頁面把項目需求的三個頁面集合到了一個上，即登錄、注冊、找回頁面，產(chǎn)生了三個頁面，所以我在JS一共調(diào)用了3次來檢測，不知道有什么更方便簡潔的方法不。因為我的一個頁面上面有三個表單，通過按鈕點擊來控制隱藏和顯示。

做驗證這塊，設(shè)計到了正則表達(dá)式，因為要驗證郵箱和密碼長度、強度，所以網(wǎng)上百度了下，這方面的正則寫法。

                    regexp: {
                        regexp: /(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{6,12}$/,
                        message: "必須包含數(shù)字和字母，以字母開頭（長度為6-12位）"
                    },

var email = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;
            //獲取輸入郵箱并用正則表達(dá)式把空格替換為空字符

郵箱檢驗其實bootstrapValidator中可以用正則來檢驗，我當(dāng)時為了實現(xiàn)點擊發(fā)送驗證碼的效果，所以把這塊的檢驗又重復(fù)了一遍，因為控制其郵箱的規(guī)范來發(fā)送郵件，實現(xiàn)自動倒計時的效果。必須保證郵箱有效。因為不知道如何在bootstrapValidator框架中來調(diào)用自己的方法和函數(shù)，所以就這樣用了個多帶帶的JS來完成。完整代碼如下：

//  驗證碼js
var 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("Error");
                    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("Error");
                    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ā)送驗證碼");
                        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ā)送驗證碼");
                        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ù)錯誤樣式
$(".register-login").click(function() {
    $(".div-email span").remove();
})

這個驗證框架還有點小問題，就是當(dāng)驗證失敗的時候，應(yīng)該要阻止表單提交的默認(rèn)事件發(fā)生，框架沒有做這方面處理，需要我們自己來完善，代碼如下：

// 驗證成功前提交按鈕不起作用
$("#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;
});

保證只要有表單錯誤，按鈕不起作用，全部正確后按鈕可用。

注意：bootstrapValidator驗證框架用的字體圖標(biāo)有2套(glyphicon和FontAwesome)，推薦大家使用FontAwesome，至于為什么，glyphicon在火狐瀏覽器會出現(xiàn)問題，F(xiàn)ontAwesome目前在火狐、IE、谷歌內(nèi)核瀏覽器不會出現(xiàn)問題，問題主要是加載不出來字體文件。

缺陷：表單驗證中，我還沒找到正則表達(dá)式來實現(xiàn)驗證密碼，首字母開頭并要有大寫，并且由數(shù)字和字母組成的正則表達(dá)式寫法，因為對正則不熟悉，也算是一個遺憾了。目前的效果是只要包含了字幕和數(shù)字長度大于6位驗證就通過。

為什么想到用這個插件來實現(xiàn)導(dǎo)航，因為考慮到效率和效果，因為團隊沒有美工啊，我自己考慮到了兼容性問題，想做個適配手機端的首頁效果，后臺和登錄界面沒有做適配移動端的設(shè)計，所以為了快速開發(fā)并且好看用到了網(wǎng)上開源的一個插件，有23種基于Bootstrap設(shè)計的導(dǎo)航效果。

現(xiàn)在都是框架開發(fā)，很多東西其實真的不想從底層開始寫，加之原型圖根本沒有美工，自己來設(shè)計要浪費很多時間成本。

瀏覽器沒有下拉時

瀏覽器下拉后

hover的CSS3動畫效果，只支持IE9以上的瀏覽器，是為了增加用戶體驗而添加的效果。
具體的效果要自己看，我這里就不錄GIF動畫來展示效果了，效果主要在首頁的列表新聞的更多按鈕那，和頂部菜單導(dǎo)航也用到了動畫效果。

框架開發(fā)解放了生產(chǎn)力，讓一個靜態(tài)頁面效果更逼真，也讓用戶體驗逐漸上去，但是目前對網(wǎng)站的需求主要還是為了展示和宣傳一些東西，反觀教育機構(gòu)和政府部門的網(wǎng)站都是偏動畫少，體現(xiàn)了公關(guān)的嚴(yán)肅性。所以動畫效果盡量還是分對象來使用。

框架和插件在計算機領(lǐng)域的各行業(yè)都是持續(xù)不減的話題，有人鼓勵直接用框架和插件，有人贊成原生手寫輔以框架。有人注重頁面展示效果，卻不關(guān)心底層的實現(xiàn)，有人重視底層實現(xiàn)原理，愿意自己照葫蘆畫瓢花大量時間自己寫，還有人兼顧兩者，利用完框架實現(xiàn)頁面效果后，重新看框架實現(xiàn)的源代碼，理解其中來龍去脈，根據(jù)自己實現(xiàn)選擇是否深入研究。

最后在這里，開源下項目代碼：github地址：https://github.com/cduyzh/pra...

在線預(yù)覽地址：http://www.cduyzh.com/practic...

如果有任何問題歡迎聯(lián)系我在博客評論、github、QQ等。謝謝！