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

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

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

頁面布局框架：Bootstrap、Materialize

JS框架： Jquery

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

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

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

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

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

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

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

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

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

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

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

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

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

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

登錄頁面

后臺主頁面

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

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

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

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

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

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

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

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

郵箱檢驗其實bootstrapValidator中可以用正則來檢驗，我當時為了實現點擊發送驗證碼的效果，所以把這塊的檢驗又重復了一遍，因為控制其郵箱的規范來發送郵件，實現自動倒計時的效果。必須保證郵箱有效。因為不知道如何在bootstrapValidator框架中來調用自己的方法和函數，所以就這樣用了個多帶帶的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})$/;
            //獲取輸入郵箱并用正則表達式把空格替換為空字符
            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("發送驗證碼");
                        sends.checked = 1;
                        return true;
                    }
                    $(".div-email a").html(time + "S后再次發送");
                    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("發送驗證碼");
                        sends.checked = 1;
                        return true;
                    }
                    $(".div-email a").html(time + "S后再次發送");
                    time--;
                    return false;
                    sends.checked = 0;
                }
                $(".div-email a").addClass("send0").removeClass("send1");
                timeCountDown();
                var timer = setInterval(timeCountDown, 1000);
            }
        }
    }
    // 消除重復錯誤樣式
$(".register-login").click(function() {
    $(".div-email span").remove();
})

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

// 驗證成功前提交按鈕不起作用
$("#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驗證框架用的字體圖標有2套(glyphicon和FontAwesome)，推薦大家使用FontAwesome，至于為什么，glyphicon在火狐瀏覽器會出現問題，FontAwesome目前在火狐、IE、谷歌內核瀏覽器不會出現問題，問題主要是加載不出來字體文件。

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

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

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

瀏覽器沒有下拉時

瀏覽器下拉后

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

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

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

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

在線預覽地址：http://www.cduyzh.com/practic...

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