定义对象的替代方法?对象字面量可以工作,但有冗余

发布于 2024-12-02 15:23:15 字数 1971 浏览 1 评论 0原文

好吧,我给自己做了一个小对象,用 JSON 来评估整个加载 jquery 的情况(事实上,我用它来加载我所有的 js 文件):

<script type="text/javascript">

/* Library loading object */

var ScriptLoader = {
    //values
    head_tag : document.getElementsByTagName('head')[0],
    fallback : false,

    //functions
    createScript: function(script_path) {
        var script_tag = document.createElement('script');
        script_tag.type = 'text/javascript';
        script_tag.src = script_path;
        return script_tag;
    },

    addToHead : function(tag) {
        ScriptLoader.head_tag.appendChild(tag);
    },

    addLoadEvent : function(func) {
        var prev = window.onload;

        if (typeof window.onload !== 'function') {
            window.onload = func;
        } else {
            window.onload = function() {
                prev();
                func();
            }
        }
    }
};


//Loading jquery, modernizr, and my js files when window is ready.

ScriptLoader.addLoadEvent(function() {
    /* Load from jquery's cdn for speed + auto latest download */
    var scripts = ['http://code.jquery.com/jquery-latest.min.js',
        'scripts/modernizr.js',
        'scripts/script.js'],
            idx = 0;
    for (; idx < scripts.length; idx++) {
        ScriptLoader.addToHead(ScriptLoader.createScript(scripts[idx]));
    }
});

//jquery fallback
ScriptLoader.addLoadEvent(function() {
    if (typeof window.jQuery === undefined) {
        ScriptLoader.fallback = true;
        ScriptLoader.addToHead(ScriptLoader.createScript('scripts/jquery-mini-1.6.2.js'));
    }
});

//grab info
(function() {
    setTimeout(function() {
        console.log('jquery loaded: ' + (window.jQuery !== undefined));
        console.log('used fallback: ' + ScriptLoader.fallback);
    }, 1000);
})();

现在,这已经完全正常工作了,但是注意到对我的对象名称的不断调用吗?有没有办法简单地使用 this 而不是那个?我有点了解整个功能级别的作用域,并且还意识到这被分配给最近的封闭函数,但我对此并不清楚。

我也简短地阅读了但不完全理解闭包。 。

谢谢 :)

Okay so I have made myself a small object to assess the whole loading jquery with a fallback thing (and have employed it to loading all my js files, infact), using JSON:

<script type="text/javascript">

/* Library loading object */

var ScriptLoader = {
    //values
    head_tag : document.getElementsByTagName('head')[0],
    fallback : false,

    //functions
    createScript: function(script_path) {
        var script_tag = document.createElement('script');
        script_tag.type = 'text/javascript';
        script_tag.src = script_path;
        return script_tag;
    },

    addToHead : function(tag) {
        ScriptLoader.head_tag.appendChild(tag);
    },

    addLoadEvent : function(func) {
        var prev = window.onload;

        if (typeof window.onload !== 'function') {
            window.onload = func;
        } else {
            window.onload = function() {
                prev();
                func();
            }
        }
    }
};


//Loading jquery, modernizr, and my js files when window is ready.

ScriptLoader.addLoadEvent(function() {
    /* Load from jquery's cdn for speed + auto latest download */
    var scripts = ['http://code.jquery.com/jquery-latest.min.js',
        'scripts/modernizr.js',
        'scripts/script.js'],
            idx = 0;
    for (; idx < scripts.length; idx++) {
        ScriptLoader.addToHead(ScriptLoader.createScript(scripts[idx]));
    }
});

//jquery fallback
ScriptLoader.addLoadEvent(function() {
    if (typeof window.jQuery === undefined) {
        ScriptLoader.fallback = true;
        ScriptLoader.addToHead(ScriptLoader.createScript('scripts/jquery-mini-1.6.2.js'));
    }
});

//grab info
(function() {
    setTimeout(function() {
        console.log('jquery loaded: ' + (window.jQuery !== undefined));
        console.log('used fallback: ' + ScriptLoader.fallback);
    }, 1000);
})();

Right now, this is fully working, but notice the constant calls to my object's name? Is there a way to simply just use this instead of that? I kind of get the whole functional-level scope only thing, and also realize that this gets assigned to the nearest enclosing function, but I'm not crystal clear on that..

I also breifly read on but don't fully understand closures..

Thanks :)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

爱你不解释 2024-12-09 15:23:15

否,因为 this 引用的是对象的实例,而不是对象模板。

闭包只是从函数内部返回的函数,然后可以将其分配给新变量并像父函数一样执行。闭包保留了其原始函数父函数的范围,即使它的新赋值没有提及它。这就是闭包容易发生内存泄漏的原因,因为 ECMAScript 的垃圾收集器没有闭包分配的范围。

function foo(a,b){
  var c = 1;
  return function(c){
    return a + b + c;
  }
}

var bar = foo(3,5); // bar is now a closure

alert(bar(2)); // 10

No because this refers to the instance of the object, not the object template.

Closures are simply returned functions from within functions which can then be assigned to new variables and executed as if they were parent functions. The closure retains the scope of its original function parent even though there is no mention of it by its new assignment. This is why closures are prone to memory leaks, because ECMAScript's garbage collector has no scope of the closure assignments.

function foo(a,b){
  var c = 1;
  return function(c){
    return a + b + c;
  }
}

var bar = foo(3,5); // bar is now a closure

alert(bar(2)); // 10
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文