Попытка «инкапсулировать» многоразовый код javascript

Весь этот вопрос - это своего рода «то, что я пробовал» в попытке инкапсулировать мои js, но он не работает, как я надеюсь.Попытка «инкапсулировать» многоразовый код javascript

На моей странице у меня есть div.

<div id='myDiv'></div>

У меня также есть некоторый скрипт:

<script type="text/javascript"> 

    $(function() { 
    $('#myDiv').hide(); 
    }); 

</script>

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

Таким образом, после исследования способов, которыми я могу почти имитируют принципы ООП в JavaScript, я получаю следующее во внешнем файле:

var MyControl = function() { 
    this.init= function (myDiv) { 
     myDiv.hide(); 
    }; 
};

Я тогда называть это так:

$(function() { 
    var myControl = new MyControl(); 
    myControl.init($('#myDiv')); 
});

Проблема в том, что div не скрыт, несмотря на вызов hide() на нем. Если я отлаживаю это, я вижу, что у меня есть div, он передается в порядке и отображает каждую строку кода, которую я ожидал бы (может даже отображать тип div в предупреждении).

Почему сайт не отображается на странице?

Этот подход рекомендуется для решения проблемы, которую я обсуждал в начале этого сообщения?

источник

2013-12-04 JᴀʏMᴇᴇ

У вас есть параметр 'myDiv' и вызывается' div.hide() ' –

Хорошо замечен. Это опечатка (в этом вопросе, а не мой фактический код), я сейчас разоберчу это. Благодарю. –

Вам нужен «конструктор» в вашем коде, или это может быть простое «пространство имен»? –

Если вы хотите использовать тот же div все со временем вы можете попробовать создать свой компонент таким образом:

function MyControl (div) { 
    this.div = div; 
} 

MyControl.prototype.init = function() { 
    return this.div.hide(); 
}

и использовать его таким образом:

var myControl = new MyControl($('#myDiv')); 
myControl.init();

Работа скрипку здесь: http://jsfiddle.net/Z7vRq/

Но если вы хотите, чтобы он использовался только в init, попробуйте так:

function MyControl() { } 

MyControl.prototype.init = function (div) { 
    return div.hide(); 
} 

var myControl = new MyControl(); 
myControl.init($('#myDiv'));

Работа скрипка здесь: http://jsfiddle.net/Z7vRq/1/

Что касается комментировать:

Вы можете попробовать обернуть всю строительную коду в эту структуру:

var MyControl = (function() { 
    function MyControl (div) { 
     this.div = div; 
    } 

    MyControl.prototype.init = function() { 
     return this.div.hide(); 
    } 

    return MyControl; 

})()

источник

2013-12-04 09:19:59

Мне это нравится. Единственный комментарий, который у меня есть, заключается в том, что вы внесли определение init вне функции MyControl. Идея заключалась в том, чтобы обернуть все это, как если бы это был класс. Может ли этот init быть объявлен внутри MyControl? Пожалуйста, извините мое незнание того, что возможно в js, я исхожу из фона C#, поэтому, естественно, двигаюсь к понятию классов и объектов. –

@DeeMac посмотри мое редактирование. Это самое близкое, что вы можете сделать, я думаю ... JS в своем корне - прототипный язык, поэтому лучший способ сделать это - использовать прототипы для создания контроллеров ... –

Большое спасибо. Точно, что я был после. –

Is этот подход рекомендовал для решения проблемы, которую я обсуждал в начале этого сообщения?

Я бы рекомендовал читать RequireJS «Why Modules» и «Why Asynchronous Module Definitions» статьи для грунтования различных задач и решений для создания модульного JavaScript.

источник

2013-12-04 09:21:23

Попытка «инкапсулировать» многоразовый код javascript

ответ

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