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之间互相独立不冲突

后续

magix核心功能压缩后仅6kb,gzip后只有3kb,很是小，但功能很是强大，今天介绍的仅仅是冰山一角。
阿里妈妈全部后台产品及营销页面均是用magix开发，这里放几个连接
阿里妈妈帮助中心
 afp
智钻

magix的项目地址在这里https://github.com/thx/magix
欢迎试用～

若是你不想按上述教程本身建文件，我把上述示例中的代码放到了附件里，能够点击连接下载

连接是淘云盘的，连接为 http://yunpan.taobao.com/s/2lRwLK22mnX 提取码为：73bzKa