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

資訊專(zhuān)欄INFORMATION COLUMN

magix，阿里媽媽前端頁(yè)面區(qū)塊化利器

wmui / 2477人閱讀

摘要：前端工程師就是在重復(fù)使用組裝這些區(qū)塊標(biāo)簽形成最終的需求頁(yè)面。這是最原子的區(qū)塊，我們要達(dá)到想要的頁(yè)面效果，就得不停的重復(fù)嵌套這些區(qū)塊。這些區(qū)塊通常是由多個(gè)標(biāo)簽組合而成的。這些區(qū)塊應(yīng)該很容易被復(fù)用。

轉(zhuǎn)載請(qǐng)注明出處: https://github.com/thx/magix/...

什么是區(qū)塊

其實(shí)html標(biāo)簽就是區(qū)塊，比如 div span a等標(biāo)簽。前端工程師就是在重復(fù)使用、組裝這些區(qū)塊(html標(biāo)簽)形成最終的需求頁(yè)面。這是最原子的區(qū)塊，我們要達(dá)到想要的頁(yè)面效果，就得不停的重復(fù)嵌套這些區(qū)塊。

通常我們所說(shuō)的區(qū)塊是這些html標(biāo)簽的組合，比如當(dāng)我們開(kāi)發(fā)一個(gè)項(xiàng)目時(shí)，每個(gè)頁(yè)面通常都是由多個(gè)邏輯無(wú)關(guān)的區(qū)塊組成的，如常見(jiàn)的頁(yè)頭、頁(yè)尾、內(nèi)容區(qū)。這些區(qū)塊通常是由多個(gè)html標(biāo)簽組合而成的。

我們可以借簽html標(biāo)簽的這種嵌套及DOM Tree思路的，開(kāi)發(fā)一套用于組合嵌套這種大區(qū)塊的框架。這就是接下來(lái)要介紹的magix做的事情

定義區(qū)塊

在這里我們把區(qū)塊定義為由一段html標(biāo)簽組成的代碼片斷，區(qū)塊最小是一個(gè)標(biāo)簽，如

"; this.setHTML(this.id, html); }, "processLogin":function(e){ console.log(e); alert("Login"); } }); });

這樣就完成了事件的處理。
magix內(nèi)部也是對(duì)接的jquery的事件處理函數(shù)，并非自己另外寫(xiě)了一套事件處理，只是在這個(gè)過(guò)程中magix有優(yōu)化，所以推薦使用magix的寫(xiě)法。

view嵌套

實(shí)際開(kāi)發(fā)中區(qū)塊會(huì)非常復(fù)雜，我們通常把一個(gè)復(fù)雜的區(qū)塊再拆分子區(qū)塊，然后再組裝起來(lái)。我們這里假設(shè)header非常復(fù)雜，比如我們新建一個(gè)header-login區(qū)塊用于多帶帶處理登錄的事情。

header-login代碼如下

define("views/header-login", ["magix"], function(require) {
    var Magix = require("magix");
    return Magix.View.extend({
        render: function() {
            var html = "";
            this.setHTML(this.id, html);
        },
        "processLogin":function(e){
            console.log(e);
            alert("Login");
        }
    });
});

既然login已經(jīng)多帶帶成區(qū)塊了，我們修改header.js，直接引用views/header-login區(qū)塊

define("views/header", ["magix"], function(require) {
    var Magix = require("magix");
    return Magix.View.extend({
        render: function() {
            var html = "I am header 
";
            this.setHTML(this.id, html);
        }
    });
});

我們只需要在header.js中通過(guò)mx-view標(biāo)簽屬性引用另外一個(gè)區(qū)塊即可。這樣就完成了子區(qū)塊的拆分及組裝功能。
刷新index.html我們可以看到和之前沒(méi)拆分時(shí)是一樣的

區(qū)塊可視化

我們這樣組裝出來(lái)的頁(yè)面，看上去和普通頁(yè)面是一樣的，但是我們?nèi)绾慰焖僦理?yè)面上被拆分了哪些區(qū)塊，及區(qū)塊間的關(guān)系呢？這時(shí)候需要magix的配套工具magix-inspector
這是一個(gè)js文件，我們可以通過(guò)引入線(xiàn)上鏈接或npm包，更多引入方式可以查看https://github.com/thx/magix-inspector

我們修改index.html，引入線(xiàn)上鏈接
在index.html的head中增加如下script標(biāo)簽

刷新index.html就可以看到右上角有一個(gè)區(qū)塊間關(guān)系圖，鼠標(biāo)指向各個(gè)區(qū)塊會(huì)高亮當(dāng)前區(qū)塊的范圍及區(qū)塊的路徑地址等信息

可視化工具所展示的區(qū)塊間關(guān)系其實(shí)和DOM Tree是非常一致的

區(qū)塊化的好處

我們可以把一個(gè)復(fù)雜的頁(yè)面拆分成n個(gè)獨(dú)立的區(qū)塊多帶帶維護(hù)與處理，方便多人同時(shí)開(kāi)發(fā)，同時(shí)當(dāng)一個(gè)區(qū)塊復(fù)雜時(shí)，我們?nèi)匀豢梢钥焖俚陌阉M(jìn)行拆分，然后再組裝回來(lái)，避免出現(xiàn)一個(gè)龐大的js文件。
這種區(qū)塊可以通過(guò)mx-view標(biāo)簽屬性被引用在項(xiàng)目中的任何地方，當(dāng)一個(gè)區(qū)塊被復(fù)用在多個(gè)地方時(shí)非常方便，比如這時(shí)候你可以在index.html里再添加上一個(gè)

則頁(yè)面上就會(huì)再出現(xiàn)登錄按鈕，多個(gè)同時(shí)存在的同一個(gè)view之間互相獨(dú)立不沖突

后續(xù)

magix核心功能壓縮后僅6kb,gzip后只有3kb,非常小，但功能非常強(qiáng)大，今天介紹的僅僅是冰山一角。
阿里媽媽所有后臺(tái)產(chǎn)品及營(yíng)銷(xiāo)頁(yè)面均是用magix開(kāi)發(fā)，這里放幾個(gè)鏈接
阿里媽媽幫助中心
afp
智鉆

magix的項(xiàng)目地址在這里https://github.com/thx/magix
歡迎試用～

如果你不想按上述教程自己建文件，我把上述示例中的代碼放到了附件里，可以點(diǎn)擊鏈接下載

鏈接是淘云盤(pán)的，鏈接為 http://yunpan.taobao.com/s/2lRwLK22mnX 提取碼為：73bzKa

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

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

相關(guān)文章

  • 已知格式化日期的字符串和格式化后的日期，還原日期

    摘要：轉(zhuǎn)載請(qǐng)注明出處需求已知格式化日期字符串為或等常見(jiàn)的格式化字符串已知和這個(gè)格式化字符串對(duì)應(yīng)的格式化后的日期為或求年月日解當(dāng)然這里可以默認(rèn)日這里只做了年月日加時(shí)分秒也是可以的測(cè)試月日年月日年歡迎試用， 轉(zhuǎn)載請(qǐng)注明出處：https://github.com/xinglie/xi... 需求： 1 已知格式化日期字符串format 為 YYYY-MM-DD 或 DD/MM/YYYY等常見(jiàn)的格式...

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

  • 已知格式化日期的字符串和格式化后的日期，還原日期

    摘要：轉(zhuǎn)載請(qǐng)注明出處需求已知格式化日期字符串為或等常見(jiàn)的格式化字符串已知和這個(gè)格式化字符串對(duì)應(yīng)的格式化后的日期為或求年月日解當(dāng)然這里可以默認(rèn)日這里只做了年月日加時(shí)分秒也是可以的測(cè)試月日年月日年歡迎試用， 轉(zhuǎn)載請(qǐng)注明出處：https://github.com/xinglie/xi... 需求： 1 已知格式化日期字符串format 為 YYYY-MM-DD 或 DD/MM/YYYY等常見(jiàn)的格式...

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

  • 識(shí)別滾動(dòng)條上的mousedown mouseup事件

    摘要：當(dāng)用戶(hù)鼠標(biāo)在滾動(dòng)條上按下的時(shí)候，我們可以假設(shè)他她正在瀏覽網(wǎng)頁(yè)內(nèi)容，那么這個(gè)時(shí)候好的用戶(hù)體驗(yàn)就不能讓滾動(dòng)條再自動(dòng)滾動(dòng)了。為了實(shí)現(xiàn)這個(gè)功能，可能大家首先會(huì)想到的就是和事件了。 轉(zhuǎn)載請(qǐng)注明出處：https://github.com/xinglie/xi... 網(wǎng)頁(yè)內(nèi)容區(qū)域自動(dòng)滾動(dòng)，滾動(dòng)條會(huì)隨著內(nèi)容的增加自動(dòng)往下滾動(dòng)。 當(dāng)用戶(hù)鼠標(biāo)在滾動(dòng)條上按下的時(shí)候，我們可以假設(shè)他（她）正在瀏覽網(wǎng)頁(yè)內(nèi)容，那么...

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

  • 接口combine

    摘要：需求描述進(jìn)行復(fù)雜項(xiàng)目開(kāi)發(fā)時(shí)，服務(wù)端數(shù)據(jù)接口實(shí)現(xiàn)端會(huì)把接口拆分的比較細(xì)粒度，以方便在更多地方復(fù)用。 需求描述 進(jìn)行復(fù)雜項(xiàng)目開(kāi)發(fā)時(shí)，服務(wù)端(數(shù)據(jù)接口實(shí)現(xiàn)端)會(huì)把接口拆分的比較細(xì)粒度，以方便在更多地方復(fù)用。而拆分后的接口在前端進(jìn)行組合請(qǐng)求時(shí)，通常會(huì)出現(xiàn)一個(gè)區(qū)塊要請(qǐng)求5、6個(gè)接口甚至更多接口請(qǐng)求才能拿到想要的數(shù)據(jù)，過(guò)多的數(shù)據(jù)請(qǐng)求會(huì)導(dǎo)致區(qū)塊渲染較慢，移動(dòng)端表現(xiàn)尤為明顯。為了改善這種情況，也有在服...

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

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

0條評(píng)論

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