国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

前端框架快速開(kāi)發(fā)靜態(tài)頁(yè)面

李世贊 / 1627人閱讀

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

前言

最近很久沒(méi)有寫(xiě)文章,不忙也忙的生活節(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ā)的效率和效果的意義。

前端頁(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


這個(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


此框架出自谷歌可能知名度沒(méi)有Bootstrap大,但是它的設(shè)計(jì)感、配色和動(dòng)畫(huà)效果,在目前看來(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é)


其實(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)畫(huà)效果主要參考的Material,讓Bootstrap的一些組件更生動(dòng),提高了用戶的體驗(yàn)。后面詳細(xì)講下這個(gè)框架。

Propeller前后臺(tái)頁(yè)面框架

What is propeller?


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

使用效果

登錄頁(yè)面

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

因?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)上百度了下,這方面的正則寫(xiě)法。

                    regexp: {
                        regexp: /(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{6,12}$/,
                        message: "必須包含數(shù)字和字母,以字母開(kāi)頭(長(zhǎng)度為6-12位)"
                    },
var email = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;
            //獲取輸入郵箱并用正則表達(dá)式把空格替換為空字符

郵箱檢驗(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è)多帶帶的JS來(lái)完成。完整代碼如下:

//  驗(yàn)證碼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ā)送驗(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();
})

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

// 驗(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;
});



保證只要有表單錯(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)頭并要有大寫(xiě),并且由數(shù)字和字母組成的正則表達(dá)式寫(xiě)法,因?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)始寫(xiě),加之原型圖根本沒(méi)有美工,自己來(lái)設(shè)計(jì)要浪費(fèi)很多時(shí)間成本。

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

瀏覽器下拉后

hover的css效果

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

End

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

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

最后在這里,開(kāi)源下項(xiàng)目代碼:github地址:https://github.com/cduyzh/pra...

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

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

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/111955.html

相關(guān)文章

  • 前端框架快速開(kāi)發(fā)靜態(tài)頁(yè)面

    摘要:框架開(kāi)發(fā)解放了生產(chǎn)力,讓一個(gè)靜態(tài)頁(yè)面效果更逼真,也讓用戶體驗(yàn)逐漸上去,但是目前對(duì)網(wǎng)站的需求主要還是為了展示和宣傳一些東西,反觀教育機(jī)構(gòu)和政府部門(mén)的網(wǎng)站都是偏動(dòng)畫(huà)少,體現(xiàn)了公關(guān)的嚴(yán)肅性。 showImg(https://segmentfault.com/img/remote/1460000009262879?w=1183&h=522); 前言 最近很久沒(méi)有寫(xiě)文章,不忙也忙的生活節(jié)奏,博客...

    wenzi 評(píng)論0 收藏0
  • 前端框架快速開(kāi)發(fā)靜態(tài)頁(yè)面

    摘要:框架開(kāi)發(fā)解放了生產(chǎn)力,讓一個(gè)靜態(tài)頁(yè)面效果更逼真,也讓用戶體驗(yàn)逐漸上去,但是目前對(duì)網(wǎng)站的需求主要還是為了展示和宣傳一些東西,反觀教育機(jī)構(gòu)和政府部門(mén)的網(wǎng)站都是偏動(dòng)畫(huà)少,體現(xiàn)了公關(guān)的嚴(yán)肅性。 showImg(https://segmentfault.com/img/remote/1460000009262879?w=1183&h=522); 前言 最近很久沒(méi)有寫(xiě)文章,不忙也忙的生活節(jié)奏,博客...

    mozillazg 評(píng)論0 收藏0
  • 關(guān)于前后端分離與模板引擎

    摘要:但似乎他們的職責(zé)在以前甚至于現(xiàn)在都并不明確,雖然前端是跟瀏覽器打交道,但是最終瀏覽器拿到的頁(yè)面是服務(wù)器通過(guò)模板生成的一個(gè)臨時(shí)靜態(tài)頁(yè)面而已。當(dāng)然,一般傳統(tǒng)上的開(kāi)發(fā)協(xié)作模式有兩種一種是前端先寫(xiě)一個(gè)靜態(tài)頁(yè)面,寫(xiě)好后,讓后端去套模板。隨著不同終端(Pad/Mobile/PC)的興起,對(duì)開(kāi)發(fā)人員的要求越來(lái)越高,純?yōu)g覽器端的響應(yīng)式已經(jīng)不能滿足用戶體驗(yàn)的高要求,往往需要針對(duì)不同的終端開(kāi)發(fā)定制的版本,為了提...

    cnTomato 評(píng)論0 收藏0
  • 構(gòu)建前端項(xiàng)目

    摘要:解決思路服務(wù)器端渲染服務(wù)器端和前端公用同一個(gè)應(yīng)用,然后通過(guò)構(gòu)建工具及配置,確定哪些組件需要再服務(wù)器端渲染,那些組件需要再客戶端渲染。服務(wù)器端渲染,由框架與構(gòu)建工具配合,并依據(jù)一定的項(xiàng)目結(jié)構(gòu)和編碼方式,共同運(yùn)行。 分離 為什么需要 前后端分離、web服務(wù)器與static服務(wù)器分離: 前端與后端耦合 (需求) 自動(dòng)化、工程化的構(gòu)建前端的代碼 (基礎(chǔ)條件) 模塊化、組件化,項(xiàng)目共享代碼 (...

    mindwind 評(píng)論0 收藏0
  • 實(shí)現(xiàn)前后端分離的心得

    摘要:實(shí)現(xiàn)前后端分離的心得對(duì)目前的來(lái)說(shuō),前后端分離已經(jīng)變得越來(lái)越流行了,越來(lái)越多的企業(yè)網(wǎng)站都開(kāi)始往這個(gè)方向靠攏。前后端工作分配不均。 實(shí)現(xiàn)前后端分離的心得 對(duì)目前的web來(lái)說(shuō),前后端分離已經(jīng)變得越來(lái)越流行了,越來(lái)越多的企業(yè)/網(wǎng)站都開(kāi)始往這個(gè)方向靠攏。那么,為什么要選擇前后端分離呢?前后端分離對(duì)實(shí)際開(kāi)發(fā)有什么好處呢? 為什么選擇前后端分離 在以前傳統(tǒng)的網(wǎng)站開(kāi)發(fā)中,前端一般扮演的只是切圖的工作...

    zilu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<