JavaScript IIFE

Я признаю, что я довольно зеленый, когда дело доходит до JavaScript, и это не помогает, что каждый раз, когда я думаю, что у меня это получается, какой-то странный кривый мяч сбивает меня с толку.

У меня есть файл js примерно так:

(function (myiife, $) {

    var myArrayOfThings = [];    

    myiife.myFunction = function (id) {
        var cachedThing = myiife.getFromArray(id);
        if (cachedThing === null) {
            // get from server
        } else {
            // do something with cached item
        }
    };

    myiife.getFromArray = function (idToFind) {
        for (var i = 0, len = myArrayOfThings; i < len; i++) {
            if (myArrayOfThings[i].Id=== idToFind) {
                return myArrayOfThings[i]; // Return as soon as the object is found
            }
        }
        return null;
    };

}(window.myiife= window.myiife|| {}, jQuery));

Что меня действительно смущает, так это правильный способ ожидать, что вы сможете называть вещи. Я думаю, я действительно еще не понимаю масштаб вещей, и я изо всех сил пытаюсь быть честным.

Ожидается ли, что если я захочу вызвать myFunction со страницы, она ДОЛЖНА выглядеть так?

onclick="myiife.myFunction(1)"

Я читал материалы о масштабах, но, очевидно, мне все еще не хватает чего-то очень фундаментального в моем понимании всего этого.

Из примеров, которые я видел, я не вижу других, которые, похоже, должны ставить имена функций с префиксом iife, чтобы выполнять что-то со страницы.

Любое хорошее рекомендуемое чтение также будет оценено.


javascript scope iife
person Jammer    schedule 14.02.2014    source источник
comment
Не совсем понятно, что вы спрашиваете. Вы присоединили myiife к window, а myiife имеет свойство, представляющее собой функцию с именем myFunction. Так что да, в вашем обработчике кликов вам нужно сказать ему вызывать myFunction, который является свойством myiife. Однако лучше вообще не встраивать обработчики событий.   -  person Matt Burland    schedule 14.02.2014

Ответы (1)


arrow_upward
1
arrow_downward

Глобальная область видимости в Javascript (по крайней мере, в браузере) равна window. Итак, что вы сделали, так это прикрепили myiife к окну, а myiffe имеет функцию с именем myFunction. Поэтому, если вы хотите вызвать его из глобальной области видимости (т.е. window), то, конечно, вам нужно указать myiffe.myFunction().

То, что вы, возможно, видели, делают другие люди, примерно так:

var myFunction = (function() {
    var counter = 0;
    return function() {
        counter++;
        console.log(counter);
    };
})()

Там, где у них есть IIFE, что-то возвращает (в данном случае функция, во многих других случаях люди возвращают объект). В этом случае, поскольку myFunction является глобальной переменной, они могут вызывать ее только с помощью myFunction(). Чего они достигли с помощью IIFE, так это в основном сделать переменную counter частной. Только вещи внутри IIFE имеют к нему доступ.

Конечно, если вы не определяете myFunction внутри IIFE, то это будет просто функция в глобальной области видимости и может быть вызвана непосредственно из глобальной области видимости.

 function myFunction() {
     // do something
 }

 myFunction();

Но на ваш вопрос об использовании этого в обработчике событий - лучше было бы не встраивать обработчик событий в ваш HTML, а вместо этого связывать его в коде. Это дает вам больше гибкости, более четкое разделение и более удобный код.

person Matt Burland    schedule 14.02.2014
comment
По какой-то причине, Мэтт, это имеет больше смысла, чем что-либо еще, что я читал. Спасибо. - person Jammer; 14.02.2014