javascript结合了公共和私有窗口.onload

javascript combining public and private window.onload

本文关键字：窗口 onload 结合了 javascript      更新时间：2023-09-26

我目前正在构建网站时学习javascript名称空间，我有以下要求：我想让我的所有代码都是私有的，这样页面上的其他公共脚本（可能是广告，现阶段我不太确定）就不能覆盖或更改我的javascript。我预见到的问题是公共脚本可能使用CCD_ 1，并且我不希望它们覆盖我的CCD_。不过我还是想让他们运行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代码的好结构，还是有更好的结构？（我计划把我所有的代码都放在匿名函数中）。我的私有代码真的是私有的吗？或者有没有一种方法可以让公共javascript访问它？我猜答案是"是的-使用棘手的eval技术。不要嵌入你不信任的代码"，但我想知道如果是这样的话该怎么做。

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

最后，如果我注释掉if(public_onload) public_onload();行，那么当我单击私有按钮时，a将正确返回。但如果我把这一行留在里面，那么a的值是nan。为什么会这样？

您可以附加事件侦听器，以避免它们以如下方式被覆盖：

<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>​

演示

您询问的代码组织示例：

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();
})();

​演示

MyApp可从外部访问
外部无法访问任何东西

相关文章：