《javascript忍者秘籍》补遗-01

第二章中 作者给了几个简单的断言例子,思路与方向是极不错的,创造JQ的大神,思想高度绝对无法让我质疑的,但是代码的功底细节,实在是让人不敢恭维。

第一例:

function assert(value, desc) {
    var li = document.createElement('li');
    li.className = value ? 'pass' : 'fail';
    li.appendChild(document.createTextNode(desc));
    //为何不直接使用textContent进行文本赋值呢?相比下,性能会更好!
    document.getElementById('result').appendChild(li);
    //每次执行断言 都要重新动态查找一次result节点?
}

assert(true, '这是真币!');
assert(false, '这是假币@');

上述书中案例,我从鸡蛋里挑骨头,选了两处不妥之处,一个是反复查找节点无缓存,另一个是文本节点创造的低效率。

改造代码:

var assert = (function () {
    //通过闭包 缓存断言的根ul节点
    var results = document.getElementById('result');
    return function (value, desc) {
        var li = document.createElement('li');
        li.className = value ? 'pass' : 'fail';
        //使用textContent属性插入文本节点 提高效率
        li.textContent = desc;
        results.appendChild(li);
    };
})();

上面的代码改善了书里的小遗漏,仍然不够完美,因为初始的惰性加载,会有额外的性能损耗,下面再提供两种极改善方案。

function getAssert() {
    //取消惰性加载
    var results = document.getElementById('result');
    return function (value, desc) {
        var li = document.createElement('li');
        li.className = value ? 'pass' : 'fail';
        li.textContent = desc;
        results.appendChild(li);
    };
};
//需要初始拿到返回方法
var assert = getAssert();

assert(true, '这是真币!');
assert(false, '这是假币@');

上面这一则,取消了惰性加载,但是需要手动获取返回的方法。

下面使用重载:

var assert = function(value,desc)  {
    //保留作用域 缓存私有变量results
    var results = document.getElementById('result');
    //重赋值
    assert =  function (value, desc) {
        var li = document.createElement('li');
        li.className = value ? 'pass' : 'fail';
        li.textContent = desc;
        results.appendChild(li);
    };
    //第一次调用 手动调用
    assert(value,desc);
};


assert(true, '这是真币!');
assert(false, '这是假币@');

世界清静了,代码终于看似完美了。但实际的需求里,可能我们要将方法封闭起来,让同事或者用户使用,那么results这个id,就有了相当大的局限性了,fail与pass的类名也不够灵活。这个场景下,我们更应该使用再往上一个的方式,可以给与我们更大的diy空间。

第二例

(function () {
    
    var results;
    
    this.assert = function (value, desc) {
        var li = document.createElement('li');
        li.className = value ? 'pass' : 'fail';
        results.appendChild(li);
        if (value) {
            li.parentNode.parentNode.className = 'fail';
        }
        return li;
    };
    
    this.test = function (name, fn) {
        results = document.getElementById('results');
        results = assert(true, name).appendChild(
            document.createElement('ul');
    )
        fn();
    };
    
});

这段代码是用来做将断言测试分组的,代码多了些,问题自然也更多了些。

首先作者使用了自执行方法封闭了作用域,使用this来指向全局对象,进而产生全局可访问的属性。

但这段代码是有着执行缺陷的,assert方法可以在test方法外调用,那么此时results是根级ul,还是分组Ul呢?而且动态查找节点的问题依旧没有改动。

代码改善:

var global = (function () {
    //严格模式下全局的this 无法访问 在此做一个防御措施
    return this ? this : window;
})();

(function (global) {
        //缓存根root节点
    var rootResults = document.querySelector('.test-root'),
        results;
    // 将assert私有化 外部不得访问
    function assert(value, desc) {
        var domLi = document.createElement('li');
        domLi.className = value ? 'pass' : 'fail';
        domLi.textContent = desc;
        results.appendChild(domLi);
        if (!value) {
            domLi.parentNode.parentNode.className = 'fail';
        }
        return domLi;
    };
    
    global.test = function (name, fn) {
        results = rootResults;
        results = assert(true, name).appendChild(
            document.createElement('ul')
        );
        //回调函数可以从参数里调用assert
        fn(assert);
    }
    
})(global);

重复了缓存DOM节点的操作,为this的指向做出回退机制,私有化assert方法,将assert方法入参到test方法的回调方法中,算是勉强完美了。

没想到,久负盛名,豆瓣评分8+的大作,JQ作者的光环,代码风格居然是如此的不谨慎。暂待我往下阅读,期望能够有打脸回馈。

    原文作者:Ives
    原文地址: https://segmentfault.com/a/1190000011891108
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞