magix,阿里妈妈前端页面区块化利器

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

什么是区块

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

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

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

定义区块

在这里我们把区块定义为由一段html标签组成的代码片断,区块最小是一个标签,如

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

后续

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

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

如果你不想按上述教程自己建文件,我把上述示例中的代码放到了附件里,可以点击链接下载

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

你可能感兴趣的:(spa,javascript)