在线测试地址
gitHub 文件地址
特别声明:
Eng 数据中 $_ 是 Eng的数据专属命名域,请勿以 $_ 开头命名数据
目前放出的是Eng的 0.8 beta版,
即将补充支持的 特性 或 方法 ,将在APi 结尾 版本前瞻中说明
API
基本案例
示例
html:
<div id="app">
<p>{{value}}</p>
</div>
js:
var app=new Eng({
el:document.getElementById('app'),
data:{
value:'Hello Eng'
}
});
输出:
<div id="app">
<p>Hello Eng</p>
</div>
e-base
html:
<div id="app">
<div e-base='base1'>
<p>{{value}}</p>
<div e-base='base2'>
<p>{{value}}</p>
</div>
</div>
</div>
js:
var app=new Eng({
el:document.getElementById('app'),
data:{
base1:{
value:'我是基于 base1 的value值',
base2:{
value:'我是基于 base2 的value值'
}
}
}
});
输出:
<div id="app">
<div>
<p>我是基于 base1 的value值</p>
<div>
<p>我是基于 base2 的value值</p>
</div>
</div>
</div>
注意:
#CN:
# e-base=baseName指令所在标签下所有子元素的值, 都是基于当前 baseName,
# {{baseName.value}} 这种写法是在Eng 中任何地方都是非法且不允许的, 今后也永远
# 不会支持.
# 作者认为这是散漫又不严谨的数据结构设计行为.不符合Eng '惯性逻辑思维' 的思想
# (数据结构 与 dom树结构 完全匹配 )
e-attr
html:
<div id="app">
<div e-attr='class=v0'> ...
</div>
<div e-attr='class=v1?(css0):(css1)'> ...
</div>
<div e-attr='class=v2>=10?(css0):(css1)'> ...
</div>
<div e-attr='class=v0;tittle=v3;atr=v2>=10?(css0):(css1)'> ...
</div>
</div>
js:
var app=new Eng({
el:document.getElementById('app'),
data:{
v0:'css',
v1:true,
v2:9,
v3:'this is tittle'
}
});
输出:
<div id="app">
<div class='css'> ...
</div>
<div class='css0'> ...
</div>
<div class='css1'> ...
</div>
<div class='css' tittle='this is tittle' atr='css1'> ...
</div>
</div>
.......
注意:
#CN:
# e-attr 指令支持多个表达式
# 当前版本中 ( ) 外不能有多余的 空格
# 当前版本中 ( ) 内不能有其它 分号 ';'
e-html
html:
<div id="app">
<div e-html='v'>
</div>
</div>
js:
var app=new Eng({
el:document.getElementById('app'),
data:{
v:'<p>DOM 文本</p>'
}
});
输出:
<div id="app">
<div>
<p>DOM 文本</p>
</div>
</div>
.......
注意:
#CN
# e-html 指令下的子元素, 如包含有其它指令, 都不会被执行
e-id
html:
<div id="app">
<button e-id='idName' >Click</button>
</div>
js:
var app=new Eng({
el:document.getElementById('app'),
data:{},
created:function(eng){
//idName = idName
eng.idName.onclick=function(){
alert('click');
};
}
});
说明:
#CN:
# e-id 指令不支持在e-for 循环内 ,以及 $_setToSelf() 和 $_setToGlobal() 中使用;
# e-id=name , name命名唯一
e-for
html:
<div id="app">
<div>
<p e-for='for1'>
index = {{$_index}} value= {{$_value}}
</p>
</div>
<eng>
<p e-for='for2'>
index = {{$_index}} .... {{v}}
</p>
</eng>
<eng>
<div e-for='for3'>
{{v}}
<div e-for='for4' style='margin-left: 30px'>
{{v}}
</div>
</div>
</eng>
</div>
js:
var app=new Eng({
el:document.getElementById('app'),
data:{
for1:['a','b'],
for2:[
{v:'a'},
{v:'b'},
],
for3:[
{
v:"I'm for3 0",
for4:[
{v:"I'm for4 0"},
{v:"I'm for4 1"}
]
},
{
v:"I'm for3 1",
for4:[
{v:"I'm for4 2"},
{v:"I'm for4 3"}
]
},
]
}
});
输出:
<div id="app">
<div>
<p> index = 0 value = a </p>
<p> index = 1 value = b </p>
</div>
<eng>
<p> index = 0 .... a </p>
<p> index = 1 .... b </p>
</eng>
<eng>
<div>
I'm for3 0
<div> I'm for4 0 </div>
<div> I'm for4 1 </div>
<div>
<div>
I'm for3 1
<div> I'm for4 2 </div>
<div> I'm for4 3 </div>
<div>
</eng>
</div>
注意:
#CN
# Eng 为适应动态的 DOM 变化交互场景, 所有for元素都依赖其父元素进行定位,
# 在没有确定的父标签,又需要确定的填充位置时,建议统一使用 <eng> </eng>做为
# 父标签包裹 , 同理也可以作为e-base的base父元素
# e-for=name , 如果要使用 watcherFor:{} 过滤器的话, 为了快速定位for对象
# 'name' 的命名在所有 for 对象中必须具有 唯一性 ;不打算使用过滤器,则所有合
# 法的命名均适用
el 选项 补充说明
js:
var domStr="<p>{{v}}</p>";
var app=new Eng({
el:domStr,
data:{
v:'我还支持 dom 文本数据模板'
},
created:function(eng){
document.body.appendChild( eng.$_el );
}
});
输出:
<p>我还支持 dom 文本数据模板</p>
注意:
#CN
# el 既支持 dom节点 也支持 dom文本, 生成的dom对象 在 created() 内,
# 以 eng.$_el 返回
watcher:{ .... } 选项方法
html:
<div id="app">
<p>{{v1}}</p>
<div e-base='base'>
<p>{{v2}}</p>
</div>
</div>
js:
var app=new Eng({
el:document.getElementById('app'),
data:{
v1:123,
base:{
v2:456
}
},
watcher:{
'v1':function(oldValue,newValue,eng){
if(newValue==123){
eng.$_value='v1 的值 ,被修改了';
}
},
'base.v2':function(oldValue,newValue,eng){
if(newValue==456){
eng.$_value='base.v2 的值 ,被修改了';
}
}
}
});
输出:
<div id="app">
<p> v1 的值 ,被修改了</p>
<div>
<p> base.v2 的值 ,被修改了</p>
</div>
</div>
注意:
#CN
# eng.$_value //修改输出的值
# eng.$_destroy=true; //销毁该 watcher 对象
watcherFor:{ .... } 选项方法
html:
<div id="app">
<eng>
<p e-for='for1'>
index = {{$_index}} value = {{$_value}}
</p>
</eng>
<hr>
<eng>
<p e-for='for2'>
index = {{$_index}} value = {{v}}
</p>
</eng>
</div>
js:
var app=new Eng({
el:document.getElementById('app'),
data:{
for1:[0,1,2,3,4,5],
for2:[
{v:0}, {v:1}, {v:2}, {v:3}, {v:4}, {v:5}
]
},
watcherFor:{
for1:function(eng){
if(eng.$_data % 2 == 0){
eng.$_allow=false;
};
},
for2:function(eng){
if(eng.$_data.v % 2 == 1){
eng.$_allow=false;
};
},
},
created:function(eng){
// eng.$_watcherFor({
// for1:null //用于销毁已注册的 过滤器
// });
}
});
输出:
<div id="app">
<eng>
<p> index = 0 value = 1 </p>
<p> index = 1 value = 3 </p>
<p> index = 2 value = 5 </p>
</eng>
<eng>
<p> index = 0 value = 0 </p>
<p> index = 1 value = 2 </p>
<p> index = 2 value = 4 </p>
</eng>
</div>
注意:
#CN
# 之前提到过如果要使用该过滤器 ,为了快速定位for对象 ,for 对象 的命名必须具有唯一性.
# eng.$_watcherFor( { for1:null } ) 用于销毁已注册的过滤器
以下全被为
created : function( eng ) 选项方法内 eng 参数使用说明示例
var app=new Eng({
el:...,
data:...,
created:function(eng){
eng.$_data; // 等于 app
eng.idName; //e-id
eng.$_watcher(); //等同于watcher
eng.$_watcherFor();//等同于watcherFor
eng.$_setToSelf();
}
});
eng.$_watcher(...)
js:
var app=new Eng({
el:...,
data:{
v:...
},
created:function(eng){
eng.$_watcher({
'v':function(oldValue,newValue,eng){
.....
}
})
}
});
说明:
#CN
# eng.$_watcher() 用法等同于 watcher ,修改数据时生效
eng.$_watchFor(...)
js:
var app=new Eng({
el:...,
data:{
v:...
},
created:function(eng){
eng.$_watcherFor({
'forNames':function(eng){
....
}
})
}
});
说明:
#CN
# eng.$_watcherFor() 用法等同于 watcherFor , 修改数据时生效
eng.$_setToSelf(...)
js:
var app=new Eng({
el:null,
data:{},
created:function(eng){
var data={
v : "I'm one-time"
};
var domOrStr= "<p e-attr='title={{v}}'> {{v}} </p>";
var dom=eng.$_setToSelf(data,domOrStr);
document.body.appendChild(dom);
}
});
console.log(app.v);
输出:
<p title="I'm one-time">
I'm one-time
</p>
说明:
#CN
# data: 合法的json数据
# domOrStr: dom 节点或文本 , 不支持写入e-id 和e-for 指令,其它均支持
# 生成的数据是一次性的, 不支持数据绑定
eng.$_setToGlobal(...)
js:
var app=new Eng({
el:null,
data:{},
created:function(eng){
var data={
v:"I'm not one-time"
};
var domOrStr = "<p e-attr='title={{v}}'> {{v}} </p>";
var dom=eng.$_setToGlobal({
el:domOrStr,
key:'base',
data:data,
base:'',
});
document.body.appendChild(dom);
}
});
console.log(app.base.v);
输出:
<p title="I'm not one-time">
I'm not one-time
</p>
说明:
#CN:
# el: dom 节点或文本 , 暂不支持写入e-id 和e-for 指令,其它均支持;
# data: 合法的json 对象
# key: data的 key 值命名
# base: 数据存储的位置 ,忽略 则 添加到数据 的根目录
# 已上三者的关系 等价于: app.base.key=data;
# 支持数据绑定
版本前瞻:
#CN:
# 1.后续,将会提供一个sever端的插件,支持将dom文本压缩成 Eng 可以识别的json对象,
# 减少网络数据传输,Eng中的所有el选项都将支持该json对象 ,加速dom和数据的首次
# 生成渲染效率
# 2.将 支持 '组件自行为', 允许单独在页面内定义组件对象, Eng 会向服务端 请求该对
# 象的所有素材,生成完整的组件..
# 3.$_setToGlobal()和 $_setToSelf 将有可能将支持 写入e-id 和e-for 指令,如果有
# 必要的话
# 4.将 支持数据分页
# 5.将 支持数据 撤销 重做操作, 允许记录一定步数的数据操作
# 6.将 支持 数据比对,仅提交已修改的数据,减少服务器端重复计算(有必要的话)
# 7.下个版本有可能兑现已上大部分功能
# 8.Eng 的本地端体积,最终将会控制在 20kb左右或以内
关于Eng:
Eng 取自 engine 的缩写,寓意可以向 引擎 一样快而简的将 '数据结构' 与 'dom结构'
紧密的契合驱动,以 '惯性思维' 的方式,在大多数场景下化繁就简的处理数据及dom交
互.
Eng 是组件化的解决方案, 目前仅有 11kb ,只有5个基本指令,5个 选项方法,就可以实
现 angular, vue 和 react等, 前端工具常用功能
Eng 拥有不逊色于所有同类软件的优异性能,以及最低的学习曲线.
Eng的由来:
作者主要从事js交互及特效编写,心得认为:大部分插件的编写,如果能够基于其使用环境
的内在逻辑规律,并设计相应的 逻辑和dom 结构,将会极大的简化编写 复杂程度 和 使用
难度..
作者偶然在同事那里接触并粗浅了解一下相关的工具,认为它们在用一种复杂的思想或策略,
去解决一件简单的事情.
待解决事物的 逻辑上的复杂是'客观'存在的, 但解决方案的复杂程度是'主观'上的.
作者厌恶一切主观上的复杂,认为有更简洁的 ' 惯性思维' 解决方案, 并乐于 '造轮子'.
这就是Eng的由来 , 所以Eng的出现与angular vue 和 react等工具 的本质区别是对前端
世界理解的思想方式不同
Eng的思想:
Eng的'惯性思维' 思想是基于使用环境的内在规律, 形成习惯性的处理方式,忽略生产工具
的复杂,将重点放在解决事物的'客观'复杂上;
Eng中所有的行为均围绕着一个 基础/base ,这也是页面 dom 树的结构规律, Eng 完全遵
守dom渲染逻辑规则;
Eng中只有5个基本指令和5个选项方法,未来可能会有所补充,但不会是核心或需要特别学习
的;
Eng中数据结构与dom分级结构完全匹配 , (数据中,所有Array和json对象的key值 ,皆为
base);
Eng的'惯性思维'基于严格规律逻辑,也就是后续所有升级新特性的支持,将会one-take.不会
出现全家桶等额外插件,仅会有本地端 和 服务端两个主文件
网友评论