2014-01-23 3 views
3

Я пытаюсь передать ссылку на jQuery объекта к модулю и получаю сообщение об ошибке, которое говорит: Uncaught TypeError: не определено не является функциейUncaught Тип ошибки: Undefined не является функцией JavaScript Модуль

Я работаю над fiddle, чтобы попытаться понять этот шаблон, который я видел, а также понять прототип и новое ключевое слово.

Я не уверен, что вызывает эту ошибку. Вот мои HTML и JavaScript вместе с fiddle.

Fiddle.

HTML:

<div class="js-container" data-options="true"></div> 
<div class="js-container" data-options="false"></div> 

JavaScript:

$('.js-container').each(function (i, element) { 
    new MyClass($(element)); 
    console.log($(element)); 
}); 
var MyClass = (function ($element) { 
    this.$element; 
    console.log(this.$element);  
    this.init();  
    MyClass.prototype.init = function() { 
     this.addText();   
     return this; 
    };  
    MyClass.prototype.addText = function() { 
     var optText = this.$element.attr('data-options'); 
     this.$element.text(optText);   
     return this; 
    };  
}()); 

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

+1

Функция, которая имеет '$ element' как аргумент, немедленно выполняется, но вы не передаете никаких аргументов. И 'this. $ Element' не существует, поэтому' undefined'. Вы смешиваете вещи ... – elclanrs

+1

См. Здесь http://stackoverflow.com/questions/8228281/what-is-this-iife-construct-in-javascript, и здесь http://stackoverflow.com/questions/ 3127429/javascript-this-keyword – elclanrs

+1

Подсказка: Какова ценность 'MyClass'? (Значение является результатом * вызова * анонимной функции - обратите внимание на символ '()' ближе к концу.) – user2864740

ответ

2

Вы определяете MyClass после запуска кода, использующего MyClass. Кроме того, набирая ваш класс в переменную, а не декларируя ее, «традиционный» способ вызывает некоторые проблемы. Попробуйте это:

function MyClass ($element) { 

    this.$element; 
    console.log(this.$element); 

    // more code... 
} 

$('.js-container').each(function (i, element) { 
    new MyClass($(element)); 
    console.log($(element)); 
}); 

Кроме того, переместить MyClass.prototype. определения из фактического MyClass. Положите их.

+0

Спасибо! Я изменил свой вопрос, чтобы лучше объяснить, что я пытаюсь сделать. Я прочитал про прототип и новое ключевое слово, но не использовал их раньше. Поэтому я пытаюсь передать элемент в модуль и посмотреть, могу ли я делать то, что я могу сделать. :) – Mdd

+0

@Mdd Отредактировано, чтобы исправить это, но это не считается хорошим изменить вопрос так много, спросив его. – rvighne

+0

@rvignhne Спасибо, и я сожалею об изменении вопроса. Спасибо за пример. Как бы вы расширили MyClass, чтобы добавить еще один метод с прототипом? – Mdd

1

Для чего стоит много времени, когда я вижу эту проблему, я обнаружил, что я случайно вызвал функцию до того, как она была указана в html. Например, я только что вызвал метод jquery в файле js, прежде чем загрузил файлы jquery. Поместите ссылки jquery дальше на страницу, чтобы решить эту проблему.

1

Ни один из вышеперечисленных ответов не работал для меня. Но, конечно, моя проблема была особенной. Я перерабатывал старый проект, чтобы создать новый, и был метод, который сделал класс, о котором я забыл (и передавал строку вместо функции), и тот факт, что он не был обновлен, давал мне эта ошибка, хотя у меня был синтаксис в другом месте, все правильно.

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

Смежные вопросы