StdJSJavscript库
StdJS 是一套功能扩展与增强型的 Javascript 库，其设计的的目的不仅是要解决现有的问题，修复固有的缺陷，以更容易，更快速的方式实现特定的功能，更是要让 JS 的本身从整体上得到提升。
使用 StdJS 时候不需要去使用某种抽象的逻辑，固有的模式去完成某些工作，而是让开发者利用其本身的功能去直接的达到目的，以尽可能的高效率去完成尽可能高质量的项目。
一些StdJS的代码例子
/*
* 创建一个div节点同时包含10个HTML为abc的span子节点,并添加到body.
*/
var abc = new Std.dom("div>span{abc}*10","body")
<!--
利用css selector方式来编写html代码,该代码可以直接被转换为html
-->
<script type="text/std-css-selector" render-here="true">
(.header > .title + .navigation) +
(.body > .content > span{body content}) +
(.footer > .links > (a[href='#']{link1} + a[href='#']{link2}))
</script>
<!--
用css selector字符串进行快速创建UI组建的布局,比JS创建省下了80%的代码
-->
<script type="text/std-ui" std-name="test">
GridLayout[rows=3][columns=2] > (
(Label{名称:} + LineEdit#name) +
(Label{日期:} + DateTimeEdit#dateTime) +
(Label{描述:} + TextEdit#text)
)
</script>
/*
* 异步载入第三方外部资源文件,文件全部载入之后会触发 Std.main 方法
* Std.require 方法支持跨域文件的载入
*/
//3个文件同时载入
Std.require("1.js","1.css","123.png");
//3个文件顺序载入,一个载入完成之后载入下一个
Std.require(["1.js","1.css","123.png"]);
/*
* 设置代码仓库的源地址,当使用代码源中包时自动加载对应代码文件,而无需手动调用
* 源中可以包含数千个包,而这些包仅会在使用时候才会被载入.
*/
Std.source("StdJS","http://source.stdjs.com");
//载入名称为 ui.Window 包之后触发回调函数
Std.use("ui.Window",function(){
//...
});
//创建一个函数,在执行这个函数时候,自动从代码源中载入包 "ui.Button","ui.ToolBar"
var func1 = Std.func(function(){
//....
},{
packages:["ui.Button","ui.ToolBar"]
});
/*
* 添加新的根据浏览器内核自动调配的css规则.
* 该方法可以自动解决浏览器的兼容性,并且随时可以删除或禁用这个规则
* 该方法在大多情况下都可以直接替代style或link标签来载入css
*/
Std.css({
body:{
color:"red",
transform:"skewY(-6deg)"
},
span:{
color:"black"
},
"#content":{
'>':{
p:{
lineHeight:"20px"
}
}
}
});
<!--
通过html标签创建Std.animation.keyframes与CSS3通用并兼容所有浏览器的动画规则..
StdJS内置解析和执行的模块,无需浏览器支持,可以在低版本的浏览器中运行
可以动态的手动暂停或者停止正在执行的任务
-->
<script type="text/std-animation">
@keyframes testKeyframe{
0%{
width:50px;
height:100px;
background:red;
}
50%{
width:90px;
height:120px;
background:blue;
color:red;
animation-timing-function:ease;
}
100%{
height:150px;
width:300px;
background:green;
color:blue;
}
}
</script>
<!--
高性能模板,内置两套语法,简写语法和JS语法
-->
<script type="text/std-template" std-name="tpl1">
<?@include 'header.tpl'?>
<div class="title"><?=title?></div>
<?#each abc as index,value?>
<div class="item">
<div class="_index"><?=index?></div>
<div class="_value"><?=value?></div>
</div>
<?/each?>
</script>
<script>
Std.main(function(){
Std.template("tpl1").renderTo("body",{
abc:["first","second","last"],
title:"title text"
});
})
</script>
/*
* 创建两个模块,A和B,模块B继承模块A
* 模块B会继承模块A的所有参数,例如静态方法,option参数选项,模型等
* 模块可以被多次继承,成员方法本身也可以被多次扩展
*/
var A = Std.module({
model:"events",
option:{
width:32,
height:32,
name:"test"
},
static:{
func1:function(){
console.log("static func1");
},
func2:function(){
console.log("static func2");
}
},
public:{
func1:function(){
console.log("func1_A");
},
func2:function(){
console.log(this.opts.name);
}
},
main:function(option){
this.init_opts(option);
console.log("main_a");
}
});
//创建模块B,继承模块A,并且扩展成员方法func1
var B = Std.module({
parent:A,
option:{
name:"testB"
},
extend:{
func1:function(){
console.log("func1_B")
}
},
main:function(){
console.log("main_b");
}
})
//创建模块A的实例
var a = new A({width:44});
//创建模块B的实例
var b = new B({width:56});
评论