Доступ к объекту javascript, определенному в подпространстве имен, и файл js, импортированный в HTML

Как получить доступ к объекту в пространстве имен. 1) у меня есть HTML, который импортирует файлы сценариев

один скрипт определяет приложение namesapce, а другой скрипт прикрепляет к нему объект

как получить доступ к объекту и начать его использовать

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. Я не могу получить доступ к объекту, как я написал выше

Источник

4 ответа

Вы не можете просто ссылаться на переменную, объявленную в другой области видимости. Вот почему сфера существует. Если вы хотите взять 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") ;
});
Источник

Есть проблема в app.js, app переменная не то, что вы думаете:

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

Что присваивается app является возвращаемым значением от самозапускающейся анонимной функции после знака равенства. Который не определен (или null, в случае, если jQuery фальсифицируется). Вы должны иметь функцию, возвращающую что-то, что должно быть назначено app вар.

Источник

Если вы определяете переменную внутри функции, эта переменная не видна за пределами функции, например

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

// foo is not visible here

Единственные переменные, которые видны везде, - это глобальные переменные (или, точнее, свойства глобального объекта, который в случае браузера window). Их можно определить тремя способами:

  1. использование var, но не внутри функции:

    var foo;

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

// foo is also visible here

  2. Явно присоедините вашу переменную к window объект:

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

// foo is visible here

  3. Не использовать 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');
Источник

Как насчет возвращения его из вашей функции 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");

Не уверен, что это именно то, что вы ищете. Ваш код очень трудно читать, и, по вашему собственному признанию, это не совсем ваш код, просто что-то вроде этого. Пожалуйста, попробуйте написать свои вопросы с хорошо структурированным, несколько функциональным кодом.:-)

Источник
Другие вопросы по тегам