StdJS是一套功能扩展与增强型的Javascript库，其设计的的目的不仅是要解决现有的问题，修复固有的缺陷，以更容易，更快速的方式实现特定的功能，更是要让JS的本身从整体上得到提升。使用StdJS时候不需要去使用某种抽象的逻辑，固有的模式去完成某些工作，而是让开发者利用其本身的功能去直接的达到目的，以尽可能的高效率去完成尽可能高质量的项目。
一些StdJS的代码例子
/**创建一个div节点同时包含10个HTML为abc的span子节点,并添加到body.*/varabc=newStd.dom("div>span{abc}*10","body")<!--利用cssselector方式来编写html代码,该代码可以直接被转换为html--><scripttype="text/std-css-selector"render-here="true">(.header>.title+.navigation)+(.body>.content>span{bodycontent})+(.footer>.links>(a[href='#']{link1}+a[href='#']{link2}))</script><!--用cssselector字符串进行快速创建UI组建的布局,比JS创建省下了80%的代码--><scripttype="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","https://source.stdjs.com");//载入名称为ui.Window包之后触发回调函数Std.use("ui.Window",function(){//...});//创建一个函数,在执行这个函数时候,自动从代码源中载入包"ui.Button","ui.ToolBar"varfunc1=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内置解析和执行的模块,无需浏览器支持,可以在低版本的浏览器中运行可以动态的手动暂停或者停止正在执行的任务--><scripttype="text/std-animation">@keyframestestKeyframe{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语法--><scripttype="text/std-template"std-name="tpl1"><?@include'header.tpl'?><divclass="title"><?=title?></div><?#eachabcasindex,value?><divclass="item"><divclass="_index"><?=index?></div><divclass="_value"><?=value?></div></div><?/each?></script><script>Std.main(function(){Std.template("tpl1").renderTo("body",{abc:["first","second","last"],title:"titletext"});})</script>/**创建两个模块,A和B,模块B继承模块A*模块B会继承模块A的所有参数,例如静态方法,option参数选项,模型等*模块可以被多次继承,成员方法本身也可以被多次扩展*/varA=Std.module({model:"events",option:{width:32,height:32,name:"test"},static:{func1:function(){console.log("staticfunc1");},func2:function(){console.log("staticfunc2");}},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,并且扩展成员方法func1varB=Std.module({parent:A,option:{name:"testB"},extend:{func1:function(){console.log("func1_B")}},main:function(){console.log("main_b");}})//创建模块A的实例vara=newA({width:44});//创建模块B的实例varb=newB({width:56});
评论