在线测试地址
GitHub links
Attention:
Don't name a variable begins with $_ ,since $_ is designed for Eng name space.
It's version 0.8 beta now.
I will support more characteristics or methods recently, and introduce them at the end of API and version announcement.
-----------------------------------------------------------------------------------------------
Basic demo:
sample
html:
{{value}}
js:
var app=new Eng({
el:document.getElementById('app'),
data:{
value:'Hello Eng'
}
});
output:
Hello Eng
e-base
html:
{{value}}
{{value}}
js:
var app=new Eng({
el:document.getElementById('app'),
data:{
base1:{
value:"I'm based on the value value of 'base1'",
base2:{
value:"I'm based on the value value of 'base2'",
}
}
}
});
output:
I'm based on the value value of 'base1'
I'm based on the value value of 'base1
notice:
# e-base = baseName
The value of the child element of the 'e-base' instruction is based
on 'baseName';
# {{baseName.value}}
This writing is illegal and not allowed anywhere in Eng and will never be
supported in the future
The author believes that this is a loose and imprecise data structure design
behavior that does not conform to the idea of Eng 'inertial thinking'.
(The datastructure matches the DOM structure completely )
e-attr
html:
...
...
...
...
js:
var app=new Eng({
el:document.getElementById('app'),
data:{
v0:'css',
v1:true,
v2:9,
v3:'this is a title'
}
});
output:
...
...
...
...
.......
notice:
#CN:
# e-attr //support multiple expressions
# Extra spaces are not allowed outside '(...)' in the current version
# Additional semicolons are not allowed in '(...)' in the current version;
e-html
html:
js:
var app=new Eng({
el:document.getElementById('app'),
data:{
v:'DOM text
'
}
});
output:
DOM text
.......
notice:
# Child elements under the 'e-html' directive, such as those containing
other instructions, will not be executed
e-id
html:
js:
var app=new Eng({
el:document.getElementById('app'),
data:{},
created:function(eng){
//idName = idName
eng.idName.onclick=function(){
alert('click');
};
}
});
notice:
#CN:
# The 'e-id' command does not support execution within three conditions
of 'e-for ', '$_setToSelf()', and '$_setToGlobal()';
# e-id=name , //The naming of 'name' is unique
e-for
html:
index = {{$_index}} value= {{$_value}}
index = {{$_index}} .... {{v}}
{{v}}
{{v}}
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"}
]
},
]
}
});
output:
index = 0 value = a
index = 1 value = b
index = 0 .... a
index = 1 .... b
I'm for3 0
I'm for4 0
I'm for4 1
I'm for3 1
I'm for4 2
I'm for4 3
notice:
# Eng to adapt to dynamic DOM change interactive scenes, all for elements
rely on their parent elements for localization,When the parent did not
identify, suggest using' 'to do the parent element...
# e-for=name ,
If you want to use the 'watcherFor:{...}' filter, the name of the'C' must
be unique in order to quickly locate the 'for' object
el (options supplement)
js:
var domStr="{{v}}
";
var app=new Eng({
el:domStr,
data:{
v:'I also support the DOM text data template'
},
created:function(eng){
document.body.appendChild( eng.$_el );
}
});
output:
I also support the DOM text data template
notice:
# 'el' supports both the DOM node and the DOM text, and the resulting
DOM object is returned in 'created( eng ) ' with 'eng.$_el'
watcher:{ .... } (option/method)
html:
{{v1}}
{{v2}}
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="The value of 'v1' has been modified";
}
},
'base.v2':function(oldValue,newValue,eng){
if(newValue==456){
eng.$_value="The value of 'base.v2 ' has been modified";
}
}
}
});
output:
The value of 'v1' has been modified
The value of 'base.v2 ' has been modified
notice:
#CN
# eng.$_value //Modify output value
# eng.$_destroy=true; //Destroy the 'watcher' object
watcherFor:{ .... } (option/method)
html:
index = {{$_index}} value = {{$_value}}
index = {{$_index}} value = {{v}}
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 //Used to destroy registered filters
// });
}
});
output:
index = 0 value = 1
index = 1 value = 3
index = 2 value = 5
index = 0 value = 0
index = 1 value = 2
index = 2 value = 4
notice:
# As mentioned earlier, if you want to use the filter, the naming
of the 'for' object must be unique
# eng.$_watcherFor( { for1:null } )
// Used in "created( eng )" to destroy registered filters
The following are all instructions for the use of the 'eng' parameter in the
'created( eng ){...} ' options/method
var app=new Eng({
el:...,
data:...,
created:function(eng){
eng.$_data; // Equivalent to app
eng.idName; //e-id
eng.$_watcher(); //Equivalent to 'watcher'
eng.$_watcherFor();//Equivalent to 'watcherFor'
eng.$_setToSelf();
eng.$_setToGlobal();
}
});
eng.$_watcher(...)
js:
var app=new Eng({
el:...,
data:{
v:...
},
created:function(eng){
eng.$_watcher({
'v':function(oldValue,newValue,eng){
.....
}
})
}
});
notice:
# eng.$_watcher()
// Usage is equivalent to 'watcher' ,Effect when modifying data
eng.$_watchFor(...)
js:
var app=new Eng({
el:...,
data:{
v:...
},
created:function(eng){
eng.$_watcherFor({
'forNames':function(eng){
....
}
})
}
});
说明:
# eng.$_watcherFor()
//Usage is equivalent to 'watcherFor' , Effect when modifying data
eng.$_setToSelf(...)
js:
var app=new Eng({
el:null,
data:{},
created:function(eng){
var data={
v : "I do not support data binding"
};
var domOrStr= " {{v}}
";
var dom=eng.$_setToSelf(data,domOrStr);
document.body.appendChild(dom);
}
});
console.log(app.v);
output:
I do not support data binding
notice:
#CN
# data: //Legal JSON data
# domOrStr: //The DOM node or text does not support writing to
the 'e-id ' and 'e-for' instructions;
# Data binding is not supported
eng.$_setToGlobal(...)
js:
var app=new Eng({
el:null,
data:{},
created:function(eng){
var data={
v:"I support data binding"
};
var domOrStr = " {{v}}
";
var dom=eng.$_setToGlobal({
el:domOrStr,
key:'base',
data:data,
base:'',
});
document.body.appendChild(dom);
}
});
console.log(app.base.v);
output:
I support data binding
notice:
#CN:
# el: //The DOM node or the DOM text does not support writing
the 'e-id' and 'e-for' instructions for the time being
# data: //Legal JSON data;
# key: //Key value naming of 'data';
# base: //Path location for data storage ,If ignored, add to the root
directory of the data structure
# The relationship between the three parties is equivalent to:
app.base.key=data;
# Support data binding
Version preview:
#CN:
# 1.The follow-up will provide a sever side plug-in that supports DOM text
compression into Eng of recognized JSON objects and reduces network
data transmission. All the 'el' options in Eng support this JSON object,
speeding up the generation of DOM and data;
# 2.Will support 'component active behavior' which allows you to define
component objects within a page individually. Eng asks the server for
all the material of that object and generates the complete component;
# 3. $_setToGlobal () and $_setToSelf will probably support writing to
'e-id' and 'e-for' instructions, if necessary;
# 4.Will support data paging
# 5.Data revocation and redo operations that allow recording of a certain
number of steps are supported
# 6.Data comparisons are supported, and only modified data is submitted
to reduce server load (if necessary)
# 7.The next version is likely to achieve most of the above functions
# 8.The local terminal volume of the Eng will eventually be controlled
around 20KB or less
-----------------------------------------------------------------------------------------------
About Eng:
Eng is abbreviated from "Engine".By using this shortened sign,we mean it can
actually act as an engine to drive the Data-structure & the Dom-structure
organically and coherently.If we prefer to adopt "inertial thinking" policy
in analyzing the challenging problem that confronts us,the interaction
between data processing and the Dom-structure can be simplified on
most ocassions.
Eng is componentized solution, Currently only 11 KB ,Only five basic
instruction and five (option/methods),You can achieve angular , vue
and react tool commonly used functions
Eng has an exceptional performance in all similar software, as well
as minimal learning difficulty.
Origin of Eng:
The author by accident in colleagues there to contact and to know that such
tools, think they are using a complex idea or strategy, to solve a simple
matter.
To solve things logically complex is' objective 'existence, but the
complexity of the solution is a' subjective '.
Authors abhor 'subjective' complex, think there are more concise 'inertial
thinking' solutions.
This is the origin of Eng, so the emergence of Eng with A, b and C and other
similar tools for front-end development, is the essential difference between
understanding thoughts in A different way
The idea of Eng
Eng 'inertial thinking' thought is based on the inherent law of usage
environment, form the habitual way, ignore the production tools
Complex, will focus on solving things' objective 'complex;
All behavior in Eng all around a 'base', this is also a page of the dom
tree structure regularity, Eng completely according to keep the dom
rendering logic rules
Eng only five basic instruction and 5 (option/method), the future is likely
to complement,but not is the core or need special learning;
Eng data structure and the dom hierarchy in the exact match, (in the data,
and all of the key values of an Array and a json object as' base ');
Eng's 'inertial thinkingt' based on strict rules of logic, which is all
subsequent upgrade the support of the new features will not be additional
components,There will be only local client and server two main file.