转载请说明出处: https://github.com/thx/magix/…
什么是区块
实在html标签就是区块,比方 div span a等标签。前端工程师就是在反复运用、组装这些区块(html标签)构成终究的需求页面。这是最原子的区块,我们要到达想要的页面结果,就得不断的反复嵌套这些区块。
一般我们所说的区块是这些html标签的组合,比方当我们开辟一个项目时,每一个页面一般都是由多个逻辑无关的区块构成的,如常见的页头、页尾、内容区。这些区块一般是由多个html标签组合而成的。
我们能够借签html标签的这类嵌套及DOM Tree思绪的,开辟一套用于组合嵌套这类大区块的框架。这就是接下来要引见的magix做的事变
定义区块
在这里我们把区块定义为由一段html
标签构成的代码片段,区块最小是一个标签,如<button>
。区块能够像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 <xinglie.lkf@taobao.com>",
"license": "MIT"
}
然后经由过程npm install
把seajs、jquery及magix装置到本机
页面开辟
新建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