StdJS 0.2.1 版本發布，通用 JavaScript 庫

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