中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

回到剛才討論的話題，設(shè)置 debug 開關(guān)后，任務(wù)信息就潛在的泄漏可能性。進(jìn)一步地，繼續(xù)改造代碼也可以達(dá)成在使用 debug 開關(guān)時(shí)的安全性，做法是將開關(guān)的控制放在 SmartQueue 的構(gòu)造函數(shù)中，這樣要求 SmartQueue 實(shí)現(xiàn) Singleton 模式（見上一篇文章）；一旦創(chuàng)建對(duì)象后，不允許修改閉包內(nèi)的 debug 標(biāo)記。

在編寫具體測(cè)試代碼前，我們?cè)O(shè)計(jì)了一個(gè)測(cè)試方法，以簡(jiǎn)化測(cè)試代碼（主要是用例）的編寫。簡(jiǎn)單地說，就是將測(cè)試用例與測(cè)試本身的代碼分離——前者以語義良好的方式編寫，后者是一次性編寫，用于處理前者設(shè)定的測(cè)試用例。用例編寫者需要寫格式形如這樣的代碼：

    <ul id="J_test_cases">
        <li>
            <pre>task = new sq.Task({fn: function() { log('unamed') }})</pre>
            <ul>
                <li>typeof task.fn === 'function'</li>
                <li>task.name === 't0'</li>
                <li>task.level === 1</li>
                <li>task.dependencies.length === 0</li>
                <li>task.context == window</li>
            </ul>
        </li>
        <li>
            <pre>task = new sq.Task({fn: function() { log('unamed') }, name: 'hello'})</pre>
            <ul>
                <li>task.name === 'hello'</li>
                <li>task.level === 1</li>
            </ul>
        </li>
    </ul>

ul li pre (CSS 選擇器路徑，下同)中寫要測(cè)試的代碼，相當(dāng)于前置操作；ul ul li 中對(duì)這個(gè)代碼進(jìn)行斷言測(cè)試，可以編寫多條斷言。這里建議對(duì)基本數(shù)據(jù)類型使用 === 和 !=== 運(yùn)算符以加強(qiáng)對(duì)數(shù)據(jù)類型的預(yù)期判斷。

接下來，我們編寫兩個(gè) helper 方法用來輸出和測(cè)試：

function log(str) {
    node.value += str + '\n';
}

function assert(expression) {
    var flag;
    eval('flag = ' + expression);
    return typeof(flag) === 'boolean' && flag;
}

log 用來向文本框追加信息，assert 用來測(cè)試傳入表達(dá)式的值。測(cè)試方法如下（這里使用了 jQuery）：

var sq = SmartQueue, task, total = 0, passed = 0, failed = 0;
$('#J_test_cases').children().each(function(index) {
    eval($('pre', this).text());
    task.register();
    $('li', this).each(function() {
        var item = $(this);
        var flag = assert(item.text());
        if(flag) passed ++; else failed ++;
        item.prepend((flag ? '<font color="green">[PASS]</font>' : '<font color="red">[FAIL]</font>') + ' ');
        total++;
    }).wrap('<pre></pre>');
}).end().before('<p>Total: ' + total + ', passed: '+ passed +', failed: ' + failed + '</p>');
sq.fire();

這個(gè)結(jié)構(gòu)還可改進(jìn)一下，比如輸出測(cè)試說明而不是具體的代碼，也可以增加后置操作，這里就不再演示了。你還可以查看 完整的測(cè)試頁面 ，含有 23 個(gè)測(cè)試用例和完整的測(cè)試實(shí)現(xiàn)。

~~~~~~~~~~~~~ 八卦分割線 ~~~~~~~~~~~~~

好吧，我們已經(jīng)體會(huì)到了思考和行動(dòng)的樂趣，走到了系列文章的尾聲，但這只是開始。我們經(jīng)歷了一個(gè)很小的實(shí)用組件的實(shí)現(xiàn)全過程，領(lǐng)略到了 JavaScript 世界的精彩，讓我們繼續(xù)前行~

原文：http://ued.alipay.com/?p=1204

本文鏈接：http://www.95time.cn/tech/web/2009/7116.asp　

出處：Alipay UED
責(zé)任編輯：bluehearts

上一頁 JavaScript組件之旅:測(cè)試組件 [1] 下一頁

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。