Question

我有一个对象，我在我的页面中多次调用它，但参数不同。

var lazyLoad = (function () {

    var CONFIG = {
        block: '',
        url: ''
    }

    function work(){            
        window.d = document
        var buffer = ''
        d.write = d.writeln = function(s){ buffer += s }
        d.open = d.close = function(){}
        s = d.createElement('script') 
        s.setAttribute('type','text/javascript')
        s.setAttribute('src',CONFIG.url)
        d.getElementById(CONFIG.block).appendChild(s)
        s.onload = function () {
            window.setTimeout(function() {
                console.warn(CONFIG.block + ' ' + buffer)
                d.getElementById(CONFIG.block).innerHTML += buffer
                buffer = ''
            }, 0)
       }
    }

    return {
            init: function (options) {
                $.extend(CONFIG, options);

                random = $('#'+CONFIG.block).attr('rel')
                id = $('#'+CONFIG.block).attr('id').replace(random,'')
                id = id.replace('DIV','')
                size = id.split('X')
                ele_width = size[0] || CONFIG.width
                ele_height = size[1] || CONFIG.height

                $('#'+CONFIG.block).css({
                                            'width':ele_width+'px',
                                            'height':ele_height+'px',
                                            'background':'url(/static/i/ajax-loading-black.gif) no-repeat center center'
                                        })

                console.log(CONFIG.block)
                $(window).load(function(){

                        work()

                })
            }

    }

})();

我称之为：

lazyLoad.init({
            url: 'http://example.com/test1.js',
            block: DIVID1
        })

比

lazyLoad.init({
            url: 'http://test.com/test2.js',
            block: DIVID2
        })

而不是：

lazyLoad.init({
            url: 'http://testdomain.com/test3.js',
            block: DIVID3
        })

加载文档后，我看到每个div都有宽度和高度，这是应用此脚本的，但buffer仅在最后div中插入。

Answer 1

问题是在外部函数中声明CONFIG，因为javascript全部是单线程的（忽略WebWorkers here =））你的work函数被称为{{1}中的值是正确的。但是，每次执行CONFIG时，您都会在$.extend(CONFIG, options);被触发时更改同一个对象，s.onload中剩余的值是最后使用的值。尝试：

CONFIG.block

具有不同参数的Init对象

1 个答案: