javascript结合公共(public)和私有(private)window.onload

Question

我目前正在构建网站时学习 javascript 命名空间，我有以下要求:我想将我的所有代码设为私有(private)，以便页面上的其他公共(public)脚本(可能是广告，我在这个阶段不太确定)无法覆盖或更改我的 javascript。我预见的问题是公共(public)脚本可能会使用 window.onload我不希望他们覆盖我的私有(private)版本 window.onload .我仍然想让它们运行 window.onload尽管。

到目前为止，我有以下布局:

//public code not written by me - i'm thinking this will be executed first
window.onload = function() {
    document.getElementById('pub').onclick = function() {
        alert('ran a public event');
    };
};

//private code written by me
(function() {
    var public_onload = window.onload; //save the public for later use
    window.onload = function() {
        document.getElementById('priv').onclick = function() {
            a = a + 1
            alert('ran a private event. a is ' + a);
        };
    };
    if(public_onload) public_onload();
    var a = 1;
})();

我有很多关于这个的问题......

首先，这是编写我的 javascript 代码的好结构，还是有更好的结构？ (我计划将我所有的代码放在匿名函数中)。我的私有(private)代码真的是私有(private)的，还是有一种方法可以让公共(public) javascript 访问它？我猜这个问题的答案是“是的 - 使用棘手的 eval 技术。不要嵌入你不信任的代码”，但我想知道如果是这样，这将如何完成。

其次，当我点击公共(public)链接时，不会触发该事件。为什么是这样？

最后，如果我注释掉 if(public_onload) public_onload();然后行 a当我单击私有(private)按钮时正确返回。但如果我离开这条线，那么 a的值是 nan。为什么是这样？

Answer 1

您可以附加事件监听器以避免以如下方式覆盖它们:

<ol id="res"></ol>

<script type="text/javascript">
    var res = document.getElementById('res');

    function log(line) {
        var li = document.createElement('li');
        li.innerHTML = line;
        res.appendChild(li);
    }

    // global code:
    window.onload = function() {
        log('inside the global window.onload handler');
    };

    // private code:
    (function(window) {
        function addEvent(el, ev, fn) {
            if (el.addEventListener) {
                el.addEventListener(ev, fn, false);
            } else if (el.attachEvent) {
                el.attachEvent('on' + ev, fn);
            } else {
                el['on' + ev] = fn;
            }
        }
        addEvent(window, 'load', function() {
            log('inside the second window.onload handler in "private section"');
        });
    })(window); 
</script>​

DEMO

您询问的代码组织示例:

HTML:
<ol id="res"></ol>​
JavaScript:

/* app.js */

// in global scope:    
var MyApp = (function(app) {
    var res = document.getElementById('res');

    app.log = function(line) {
        var li = document.createElement('li');
        li.innerHTML = line;
        res.appendChild(li);
    };

    app.doWork = function() {
        app.log('doing a work');
    };

    return app;
})(MyApp || {});

/* my-app-module.js */

// again in global scope: 
var MyApp = (function(app) {

    app.myModule = app.myModule || {};

    app.myModule.doWork = function () {
        app.log('my module is doing a work');
    };

    return app;
})(MyApp || {});

/* somewhere after previous definitions: */

(function() {
    MyApp.doWork();
    MyApp.myModule.doWork();
})();

DEMO

MyApp is accessible from outside
Nothing is accessible from outside