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

wmui 发布于2019-08-22 11:01 / 2364人阅读

摘要：前端工程师就是在重复使用组装这些区块标签形成最终的需求页面。这是最原子的区块，我们要达到想要的页面效果，就得不停的重复嵌套这些区块。这些区块通常是由多个标签组合而成的。这些区块应该很容易被复用。

转载请注明出处: 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

超融合服务器私有云阿里爸爸阿里妈妈阿里妈妈广告联盟驴妈妈阿里云 jsp页面静态化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91624.html

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

摘要：转载请注明出处需求已知格式化日期字符串为或等常见的格式化字符串已知和这个格式化字符串对应的格式化后的日期为或求年月日解当然这里可以默认日这里只做了年月日加时分秒也是可以的测试月日年月日年欢迎试用，转载请注明出处：https://github.com/xinglie/xi... 需求： 1 已知格式化日期字符串format 为 YYYY-MM-DD 或 DD/MM/YYYY等常见的格式...

sherlock221 2019-08-22 11:01 评论0 收藏0
已知格式化日期的字符串和格式化后的日期，还原日期

摘要：转载请注明出处需求已知格式化日期字符串为或等常见的格式化字符串已知和这个格式化字符串对应的格式化后的日期为或求年月日解当然这里可以默认日这里只做了年月日加时分秒也是可以的测试月日年月日年欢迎试用，转载请注明出处：https://github.com/xinglie/xi... 需求： 1 已知格式化日期字符串format 为 YYYY-MM-DD 或 DD/MM/YYYY等常见的格式...

QiuyueZhong 2019-08-01 15:34 评论0 收藏0
识别滚动条上的mousedown mouseup事件

摘要：当用户鼠标在滚动条上按下的时候，我们可以假设他她正在浏览网页内容，那么这个时候好的用户体验就不能让滚动条再自动滚动了。为了实现这个功能，可能大家首先会想到的就是和事件了。转载请注明出处：https://github.com/xinglie/xi... 网页内容区域自动滚动，滚动条会随着内容的增加自动往下滚动。当用户鼠标在滚动条上按下的时候，我们可以假设他（她）正在浏览网页内容，那么...

xiaokai 2019-08-22 10:34 评论0 收藏0
接口combine

摘要：需求描述进行复杂项目开发时，服务端数据接口实现端会把接口拆分的比较细粒度，以方便在更多地方复用。需求描述进行复杂项目开发时，服务端(数据接口实现端)会把接口拆分的比较细粒度，以方便在更多地方复用。而拆分后的接口在前端进行组合请求时，通常会出现一个区块要请求5、6个接口甚至更多接口请求才能拿到想要的数据，过多的数据请求会导致区块渲染较慢，移动端表现尤为明显。为了改善这种情况，也有在服...

EddieChan 2019-08-20 10:39 评论0 收藏0