magi，阿里妈妈前端页面区块化利器

2016-07-29 23:45:00

转载请注明出处: https://github.com/thx/magix/...

什么是区块

其实html标签就是区块，比如 div span a等标签。前端工程师就是在重复使用、组装这些区块(html标签)形成最终的需求页面。这是最原子的区块，我们要达到想要的页面效果，就得不停的重复嵌套这些区块。

通常我们所说的区块是这些html标签的组合，比如当我们开发一个项目时，每个页面通常都是由多个逻辑无关的区块组成的，如常见的页头、页尾、内容区。这些区块通常是由多个html标签组合而成的。

我们可以借签html标签的这种嵌套及DOM Tree思路的，开发一套用于组合嵌套这种大区块的框架。这就是接下来要介绍的magix做的事情

定义区块

在这里我们把区块定义为由一段html标签组成的代码片断，区块最小是一个标签，如。区块可以像html标签一样嵌套，即一个区块可以由多个子区块组成

项目中的区块

当我们在开发一个项目时，如前面提到的页头、页尾、内容区等，这些在我们项目里就是一个个区块，当然像内容区我们仍然可以再拆分子区块。像页头、页尾在项目里可以理解为原子区块，没必要再拆分了。这些区块应该很容易被复用。

准备工作

magix适配了不同的加载器与dom操作类库，有amd、cmd及kissy，可点击这里查看，当然您也可以自己定制，定制方法点击这里

接下来我们使用cmd版本，即seajs+jq来讲解magix的区块化管理

安装

新建一个magix-test目录，在magix-test目录里放上package.json文件如下：

{
"name": "magix-test",
"version": "1.0.0",
"description": "magix示例项目",
"keywords": [
"magix",
"view"
],
"dependencies": {
"jquery": "",
"seajs": "",
"magix": ""
},
"author": "xinglie ",
"license": "MIT"
}
然后通过npm install把seajs、jquery及magix安装到本机

页面开发

新建index.html如下

    Magix-test    seajs.config({        debug:true,        alias:{            magix:location.href+'./node_modules/magix/dist/cmd/magix-core'        },        paths:{            views:'./views'//等下我们新建的区块都放到views目录下        }    });    define('$',function(){//shim        return jQuery;    });

这样我们的首页就完成了，接下来我们开发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如下

    Magix-test    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节点    });

然后在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 Login';
this.setHTML(this.id, html);
},
'processLogin':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 = 'Login';
this.setHTML(this.id, html);
},
'processLogin':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 ';            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标签

刷新index.html就可以看到右上角有一个区块间关系图，鼠标指向各个区块会高亮当前区块的范围及区块的路径地址等信息

可视化工具所展示的区块间关系其实和DOM Tree是非常一致的

区块化的好处

我们可以把一个复杂的页面拆分成n个独立的区块单独维护与处理，方便多人同时开发，同时当一个区块复杂时，我们仍然可以快速的把它进行拆分，然后再组装回来，避免出现一个庞大的js文件。
这种区块可以通过mx-view标签属性被引用在项目中的任何地方，当一个区块被复用在多个地方时非常方便，比如这时候你可以在index.html里再添加上一个则页面上就会再出现登录按钮，多个同时存在的同一个view之间互相独立不冲突