成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

wmui / 2493人閱讀

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

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

什么是區(qū)塊

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

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

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

定義區(qū)塊

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

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

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

view嵌套

實際開發(fā)中區(qū)塊會非常復(fù)雜，我們通常把一個復(fù)雜的區(qū)塊再拆分子區(qū)塊，然后再組裝起來。我們這里假設(shè)header非常復(fù)雜，比如我們新建一個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中通過mx-view標(biāo)簽屬性引用另外一個區(qū)塊即可。這樣就完成了子區(qū)塊的拆分及組裝功能。
刷新index.html我們可以看到和之前沒拆分時是一樣的

區(qū)塊可視化

我們這樣組裝出來的頁面，看上去和普通頁面是一樣的，但是我們?nèi)绾慰焖僦理撁嫔媳徊鸱至四男﹨^(qū)塊，及區(qū)塊間的關(guān)系呢？這時候需要magix的配套工具magix-inspector
這是一個js文件，我們可以通過引入線上鏈接或npm包，更多引入方式可以查看https://github.com/thx/magix-inspector

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

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

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

區(qū)塊化的好處

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

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

后續(xù)

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91624.html

相關(guān)文章

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

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

    sherlock221 評論0 收藏0

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

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

    QiuyueZhong 評論0 收藏0

  • 識別滾動條上的mousedown mouseup事件

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

    xiaokai 評論0 收藏0

  • 接口combine

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

    EddieChan 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<