StdJS 0.2.1 版本发布，通用 JavaScript 库

code0x14 8年前

StdJS 0.2.1 对0.2版本中存在的一些已知bug进行了修复,同时增加了几个新的方法,以及对部分功能的进行了更新.

 

功能增加:

1. Std.css模块增加了静态方法 support , 用于测试浏览器对指定css名称的支持情况,如果浏览器支持指定名称的css属性,将会返回true,否则返回false 

//true  Std.css.support("fontSize");  Std.css.support("font-size");  //false  Std.css.support("boxWidth");  //true  Std.css.support("animation",true);

 

2. Std.timer模块中增加了静态方法 test ,该方法用于执行一个指定的函数,可以指定函数执行的次数,当执行完毕之后,返回这个函数执行消耗的时间. 

//测试循环需要的时间  Std.timer.test(function(){      for(var i=0;i<100000000;i++){      }  });

3. Std.dom模块增加了静态方法 isDocument, 该方法用于判断一个对象是否为一个document对象,返回一个Boolean值.

4. Std.dom模块增加了静态方法 documentElement,该方法用于获取一个指定元素的文档根元素,如果传递的参数不是一个DOM元素,而是document,则返回document.documentElement,如果是window,则返回window.document.documentElement

 

功能更新:

1. 更新了Std.dom的成员方法insert,当没有传递第二个参数或第二个参数为空的时候,默认插入到末尾.

2. 更新了Std.dom的成员方法addClass,removeClass,toggleClass,className 在document和window上进行操作的时候直接转移到documentElement上

bug修复:

1. 修复了Std.dom成员方法addClass增加类名时候可以增加空格的bug
2. 修复了Std.dom.united模块通过css选择器获取元素时候在chrome下有可能获取重复的bug
3. 修复了Std.dom的成员方法insert插入到最后一个索引位置不正确的bug
4. 修复了Std.dom的成员方法hasFocus在document失去焦点之后获取到结果不准确的bug
5. 修复了Std.ui的layout模块insert方法插入出错的bug
6. 修复了Std.ui的locker模块有滚动条的情况下无法遮住整个网页的bug
7 .修复了Std.dom的成员方法mouse,在document和window对象上会报错,unselect选项无法起作用的bug

StdJS文档地址:

http://doc.stdjs.com/action_documentation.location_documentation&ID=8

 

一些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});

 

StdJS网站: http://www.stdjs.com