摘要:前端工程师就是在重复使用组装这些区块标签形成最终的需求页面。这是最原子的区块,我们要达到想要的页面效果,就得不停的重复嵌套这些区块。这些区块通常是由多个标签组合而成的。这些区块应该很容易被复用。
转载请注明出处: 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
这样我们的首页就完成了,接下来我们开发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
然后在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 "; this.setHTML(this.id, html); }, "processLogin":function(e){ console.log(e); alert("Login"); } }); });
这样就完成了事件的处理。
magix内部也是对接的jquery的事件处理函数,并非自己另外写了一套事件处理,只是在这个过程中magix有优化,所以推荐使用magix的写法。
实际开发中区块会非常复杂,我们通常把一个复杂的区块再拆分子区块,然后再组装起来。我们这里假设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里再添加上一个
magix核心功能压缩后仅6kb,gzip后只有3kb,非常小,但功能非常强大,今天介绍的仅仅是冰山一角。
阿里妈妈所有后台产品及营销页面均是用magix开发,这里放几个链接
阿里妈妈帮助中心
afp
智钻
magix的项目地址在这里https://github.com/thx/magix
欢迎试用~
如果你不想按上述教程自己建文件,我把上述示例中的代码放到了附件里,可以点击链接下载
链接是淘云盘的,链接为 http://yunpan.taobao.com/s/2lRwLK22mnX 提取码为:73bzKa
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/91624.html
摘要:转载请注明出处需求已知格式化日期字符串为或等常见的格式化字符串已知和这个格式化字符串对应的格式化后的日期为或求年月日解当然这里可以默认日这里只做了年月日加时分秒也是可以的测试月日年月日年欢迎试用, 转载请注明出处:https://github.com/xinglie/xi... 需求: 1 已知格式化日期字符串format 为 YYYY-MM-DD 或 DD/MM/YYYY等常见的格式...
摘要:转载请注明出处需求已知格式化日期字符串为或等常见的格式化字符串已知和这个格式化字符串对应的格式化后的日期为或求年月日解当然这里可以默认日这里只做了年月日加时分秒也是可以的测试月日年月日年欢迎试用, 转载请注明出处:https://github.com/xinglie/xi... 需求: 1 已知格式化日期字符串format 为 YYYY-MM-DD 或 DD/MM/YYYY等常见的格式...
摘要:当用户鼠标在滚动条上按下的时候,我们可以假设他她正在浏览网页内容,那么这个时候好的用户体验就不能让滚动条再自动滚动了。为了实现这个功能,可能大家首先会想到的就是和事件了。 转载请注明出处:https://github.com/xinglie/xi... 网页内容区域自动滚动,滚动条会随着内容的增加自动往下滚动。 当用户鼠标在滚动条上按下的时候,我们可以假设他(她)正在浏览网页内容,那么...
阅读 693·2021-11-22 13:52
阅读 1498·2021-09-27 13:36
阅读 2800·2021-09-24 09:47
阅读 2130·2021-09-22 15:48
阅读 3575·2021-09-22 15:39
阅读 1437·2019-08-30 12:43
阅读 2905·2019-08-29 18:39
阅读 3157·2019-08-29 12:51