magix，阿里媽媽前端頁面區塊化利器

時間 2019-12-09

標籤 magix 阿里媽媽前端頁面區塊利器欄目阿里巴巴简体版

原文原文鏈接

轉載請註明出處: https://github.com/thx/magix/...javascript

什麼是區塊

其實html標籤就是區塊，好比 div span a等標籤。前端工程師就是在重複使用、組裝這些區塊(html標籤)造成最終的需求頁面。這是最原子的區塊，咱們要達到想要的頁面效果，就得不停的重複嵌套這些區塊。html

一般咱們所說的區塊是這些html標籤的組合，好比當咱們開發一個項目時，每一個頁面一般都是由多個邏輯無關的區塊組成的，如常見的頁頭、頁尾、內容區。這些區塊一般是由多個html標籤組合而成的。前端

咱們能夠借籤html標籤的這種嵌套及DOM Tree思路的，開發一套用於組合嵌套這種大區塊的框架。這就是接下來要介紹的magix作的事情java

定義區塊

在這裏咱們把區塊定義爲由一段html標籤組成的代碼片段，區塊最小是一個標籤，如<button>。區塊能夠像html標籤同樣嵌套，即一個區塊能夠由多個子區塊組成node

項目中的區塊

當咱們在開發一個項目時，如前面提到的頁頭、頁尾、內容區等，這些在咱們項目裏就是一個個區塊，固然像內容區咱們仍然能夠再拆分子區塊。像頁頭、頁尾在項目裏能夠理解爲原子區塊，不必再拆分了。這些區塊應該很容易被複用。jquery

準備工做

magix適配了不一樣的加載器與dom操做類庫，有amd、cmd及kissy，可點擊這裏查看，固然您也能夠本身定製，定製方法點擊這裏git

接下來咱們使用cmd版本，即seajs+jq來說解magix的區塊化管理github

安裝

新建一個magix-test目錄，在magix-test目錄裏放上package.json文件以下：web

{
    "name": "magix-test",
    "version": "1.0.0",
    "description": "magix示例項目",
    "keywords": [
        "magix",
        "view"
    ],
    "dependencies": {
        "jquery": "",
        "seajs": "",
        "magix": ""
    },
    "author": "xinglie <xinglie.lkf@taobao.com>",
    "license": "MIT"
}

而後經過npm install把seajs、jquery及magix安裝到本機npm

頁面開發

新建index.html以下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Magix-test</title>
        <script src="node_modules/seajs/dist/sea-debug.js"></script>
        <script src="node_modules/jquery/dist/jquery.js"></script>
    </head>
    <body >
        <div id="header"></div>
        <div id="footer"></div>
        <script type="text/javascript">
        seajs.config({
            debug:true,
            alias:{
                magix:location.href+'./node_modules/magix/dist/cmd/magix-core'
            },
            paths:{
                views:'./views'//等下咱們新建的區塊都放到views目錄下
            }
        });
        define('$',function(){//shim
            return jQuery;
        });
        </script>
    </body>
</html>

這樣咱們的首頁就完成了，接下來咱們開發header及footer，而後把它們渲染到index.html裏相應的位置上。

咱們在magix-test目錄下新建views目錄，咱們把新建的header及footer放到該目錄裏
header.js以下

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);
        }
    });
});

新建footer.js，代碼如header
而後咱們修改index.html，加載header及footer，修改後的index.html以下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Magix-test</title>
        <script src="node_modules/seajs/dist/sea-debug.js"></script>
        <script src="node_modules/jquery/dist/jquery.js"></script>
    </head>
    <body >
        <div id="header" mx-view="views/header"></div>
        <div id="footer" mx-view="views/footer"></div>
        <script type="text/javascript">
        seajs.config({
            debug:true,
            alias:{
                magix:location.href+'./node_modules/magix/dist/cmd/magix-core'
            },
            paths:{
                views:'./views'//等下咱們新建的區塊都放到views目錄下
            }
        });
        define('$',function(){//shim
            return jQuery;
        });
        seajs.use('magix',function(Magix){
            Magix.boot();//處理頁面上的mx-view節點
        });
        </script>
    </body>
</html>

而後在web server中查看index.html便可，若是沒什麼問題應該就能看到header及footer已經渲染到了相應的節點裏

事件處理

你能夠用jquery的事件在render方法中本身綁定，也能夠使用magix定義的方法書寫事件，推薦使用magix定義的方法來處理事件：高性能，自動解綁

咱們修改header.js以下

define('views/header', ['magix'], function(require) {
    var Magix = require('magix');
    return Magix.View.extend({
        render: function() {
            var html = 'I am header <div><button mx-click="processLogin()">Login</button></div>';
            this.setHTML(this.id, html);
        },
        'processLogin<click>':function(e){
            console.log(e);
            alert('Login');
        }
    });
});

這樣就完成了事件的處理。
magix內部也是對接的jquery的事件處理函數，並不是本身另外寫了一套事件處理，只是在這個過程當中magix有優化，因此推薦使用magix的寫法。

view嵌套

實際開發中區塊會很是複雜，咱們一般把一個複雜的區塊再拆分子區塊，而後再組裝起來。咱們這裏假設header很是複雜，好比咱們新建一個header-login區塊用於單獨處理登陸的事情。

header-login代碼以下

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

既然login已經單獨成區塊了，咱們修改header.js，直接引用views/header-login區塊

define('views/header', ['magix'], function(require) {
    var Magix = require('magix');
    return Magix.View.extend({
        render: function() {
            var html = 'I am header <div mx-view="views/header-login"></div>';
            this.setHTML(this.id, html);
        }
    });
});

咱們只須要在header.js中經過mx-view標籤屬性引用另一個區塊便可。這樣就完成了子區塊的拆分及組裝功能。
刷新index.html咱們能夠看到和以前沒拆分時是同樣的

區塊可視化

咱們這樣組裝出來的頁面，看上去和普通頁面是同樣的，可是咱們如何快速知道頁面上被拆分了哪些區塊，及區塊間的關係呢？這時候須要magix的配套工具magix-inspector
這是一個js文件，咱們能夠經過引入線上連接或npm包，更多引入方式能夠查看https://github.com/thx/magix-inspector

咱們修改index.html，引入線上連接
在index.html的head中增長以下script標籤

<script src="//thx.github.io/magix/assets/helper.js"></script>

刷新index.html就能夠看到右上角有一個區塊間關係圖，鼠標指向各個區塊會高亮當前區塊的範圍及區塊的路徑地址等信息

可視化工具所展現的區塊間關係其實和DOM Tree是很是一致的

區塊化的好處

咱們能夠把一個複雜的頁面拆分紅n個獨立的區塊單獨維護與處理，方便多人同時開發，同時當一個區塊複雜時，咱們仍然能夠快速的把它進行拆分，而後再組裝回來，避免出現一個龐大的js文件。
這種區塊能夠經過mx-view標籤屬性被引用在項目中的任何地方，當一個區塊被複用在多個地方時很是方便，好比這時候你能夠在index.html裏再添加上一個<div mx-view="views/header-login"></div>則頁面上就會再出現登陸按鈕，多個同時存在的同一個view之間互相獨立不衝突