访问在子命名空间中定义的 javascript 对象和被导入 HTML 的 js 文件答案

【问题标题】：Accesing a javascript object defined in a subnamespace and the js file being imported into the HTML访问在子命名空间中定义的 javascript 对象和被导入 HTML 的 js 文件
【发布时间】：2012-08-31 15:04:47
【问题描述】：

如何访问命名空间中的对象。 1) 我有一个导入脚本文件的 html

一个脚本定义命名空间应用程序，另一个脚本将一个对象附加到它

我如何访问对象并开始使用它

app.js

var app = (function(jQuery){
    if (!jQuery) {
        alert(app.resources["MISSING_LIB"]);
        return null;
    }

    return {
        init: function() {
            //code for init the app related variables and subnamspaces
        }
    };
})(jQuery);

jQuery(document).ready(function(){
    app.init();
});

personal.js

function(app){
    if (app) {
        app.Cache = function(nativeStorage,serializer ) {
            this.storage = nativeStorage;
            this.serializer = serializer;
        }

        app.Cache.prototype = {
            setItem: function( key, value ){
                this.storage.setItem(key, this.serializer.stringify( value ));
                return( this );
            }
        };

        var personalcontentstorage = new app.Cache(localStorage,JSON);
    } else {
        alert("app is undefined!");
    }
})(app);

myhtml.html

<html>
<head>
<script src="${ '/js/app.js'" type="text/javascript"></script>
<script src="${ '/js/personal.js'" type="text/javascript"></script>
</head>
<body>

    <h1>
        Exploring HTML5's localStorage
    </h1>

    <script type="text/javascript">
        jQuery(document).ready(function(){
            personalcontentstorage.setItem("mykey","myValue") ;
        });
    </script>
</body>
</html>

如何访问对象“personalcontentstorage”以便我可以使用它的方法。访问 hte 对象时出现未定义的错误。我无法按照上面写的方式访问对象

【问题讨论】：

init: function() { 在您的 app.js 定义中是一个语法错误。检查你的控制台。
我放在这里供考虑的代码是伪代码，我原来的 app.js 是一个巨大的文件，它工作正常。我希望使用personal.js中定义的对象的方法可以在html的dom中使用
感谢大家的反馈，作为一名 Java 开发人员，试图在一个快节奏的项目中理解 JS 的糟糕之处，您的反馈确实帮助我正确理解了 JS 的概念 :)

标签： javascript javascript-namespaces

【解决方案1】：

如果您在函数中定义变量，则该变量在函数外部不可见，例如

(function () {
    var foo;
}());

// foo is not visible here

唯一可见的变量是全局变量（或者更准确地说，全局对象的属性，在浏览器的情况下是window）。这些可以通过三种方式定义：

使用var，但不在函数内部：

var foo;

(function () {
    // foo is visible here
}());

// foo is also visible here

将变量显式附加到 window 对象：

(function () {
    window.foo = 7;
}());

// foo is visible here

第一次给变量赋值时不要使用var。这绝对是错误的处理方式：对于阅读代码的人来说，您打算创建一个全局变量并不明显。

全局变量具有各种风险和缺点。如果您在页面中包含第三方脚本，它们可能会使用相同的全局变量名称并干扰您自己的脚本。通常最好将您使用的全局变量的数量保持在最低限度。

我经常使用这种模式，创建一个全局变量来包含项目的所有代码（您可以将MySite 替换为项目名称）：

// Create a global variable that can contain everything else
window.MySite = {};

// Add something to the namespace
MySite.foo = (function () {
    // Code that isn't visible globally here

    return someValueForFoo;
}());

// Elsewhere in my code I can easily access `someValueForFoo`:
MySite.foo

将此应用于您的项目：

window.MySite = {};

// In app.js
MySite.App = (function (jQuery) {
    // ...
}(jQuery));

// In personal.js
MySite.storage = (function (jQuery) {
    // ...
    return new MySite.App.Cache(localStorage,JSON);
}(jQuery));

// Elsewhere in your code
MySite.storage.setItem('foo', 'bar');

【讨论】：

【解决方案2】：

如何从您的 personal.js 函数中返回它？

var Personal = (function(app) {
    if (app) {
        app.Cache = function(nativeStorage, serializer) {
            this.storage = nativeStorage;
            this.serializer = serializer;
        }

        app.Cache.prototype = {
            setItem: function(key, value) {
                this.storage.setItem(key, this.serializer.stringify(value));
                return (this);
            }
        };

        var personalcontentstorage = new app.Cache(localStorage, JSON);
    } else {
        alert("app is undefined!");
    }

    return {
        storage: personalcontentstorage
    };
}(app));

然后在您的 HTML 文件中，您只需引用：

Personal.storage.setItem("myKey", "myValue");

不确定这是否正是您要寻找的。您的代码很难阅读，而且您自己也承认这不是您的代码，只是有点像它。请尝试使用结构良好、功能性强的代码发布您的问题。 :-)

【讨论】：

【解决方案3】：

你不能像那样只引用在另一个范围内声明的变量。这就是存在范围的原因。如果你想获取personalcontentstorage 变量，直接返回即可：

// assign your IIFE to a variable
var something = (function(app){
    if (app) {
        // snip
        return new app.Cache(localStorage,JSON);
    } else {
        alert("app is undefined!");
    }
})(app);

jQuery(document).ready(function() {
    // use the variable your IIFE's return was stored in
    something.setItem("mykey","myValue") ;
});

【讨论】：

非常感谢您的解决方案/建议，它解决了我的问题。从一开始我就知道这是一个范围相关的问题。在工作中学习 JS，我真的很困惑。这肯定会增加我的经验

【解决方案4】：

app.js有问题，app变量不是你想的那样：

var app = (function(jQuery){
    // function body
})(jQuery);

分配给app 的是等号后自执行匿名函数的返回值。这是未定义的（或null，以防 jQuery 是假的）。你必须让函数返回一些东西来分配给app var。

【讨论】：

您刚刚编辑了问题以添加返回值，所以我不确定这个答案是否适用。我也不确定返回值是否首先在原始代码上，或者您是否只是在我回答后才添加它......