Написание модульного JavaScript

Найдите минутку, чтобы посмотреть на это; мало что отличается от других наших модулей; есть только больше этого. Основное отличие состоит в том, что я использовал две вспомогательные функции, созданные вне возвращаемого объекта. Первый называется eachProduct , и, как вы можете видеть, он просто берет функцию и запускает ее для каждого элемента в списке продуктов. Другая — это функция сброса, которую мы поймем чуть позже.

Теперь давайте посмотрим на функции init и destroy .

  init: function () { 
     вар то = это; 
     products = sb.find ('li'); 
     sb.listen ({ 
             'change-filter': this.change_filter, 
             'reset-fitlers': this.reset, 
             'выполнить поиск': this.search, 
             'quit-search': this.reset 
         }); 
     eachProduct (функция (продукт) { 
         sb.addEvent (product, 'click', that.addToCart);        
     });  
 }, 
 уничтожить: функция () { 
     вар то = это; 
     eachProduct (функция (продукт) { 
         sb.removeEvent (product, 'click', that.addToCart);         
     }); 
     sb.ignore (['change-filter', 'reset-filters', 'execute-search', 'quit-search']); 
 }, 

Внутри init мы собираем все продукты (которые представлены в элементах списка). Затем мы должны сообщить песочнице, что мы заинтересованы в нескольких событиях. Мы передаем объект в метод sb.listen ; этот объект использует имя события в качестве ключа и функцию события в качестве значения для каждого свойства. Например, мы говорим «песочнице», что когда кто-то другой выполняет событие «execute-search», мы хотим ответить на него, выполнив нашу функцию search . Надеюсь, вы начинаете видеть, как это будет работать!

Затем мы используем нашу вспомогательную функцию eachProduct чтобы назначить функцию щелчка для каждого продукта. Когда продукт щелкнул, мы запускаем addToCart . Мы должны кэшировать this потому что его значение изменяется на глобальный объект внутри функции.

В destroy мы просто удаляем обработчики событий из продуктов и даем песочнице знать, что мы больше не заинтересованы в событиях (на самом деле, я не думаю, что это необходимо, из-за того, как мы обрабатываем вещи в ядре, но Я бросил это на всякий случай, если что-то на «конце» изменится).

Теперь мы рассмотрим функции, которые вызываются, когда другие модули запускают события:

  search: function (query) { 
     сброс настроек(); 
     query = query.toLowerCase (); 
     eachProduct (функция (продукт) { 
         if (product.getElementsByTagName ('p') [0] .innerHTML.toLowerCase (). indexOf (query) <0) { 
             product.style.opacity = '0.2'; 
         }  
     }); 
 }, 
 change_filter: function (filter) { 
     сброс настроек(); 
     eachProduct (функция (продукт) { 
         if (product.getAttribute ('data-8088-keyword'). toLowerCase (). indexOf (filter.toLowerCase ()) <0) { 
             product.style.opacity = '0.2'; 
         } 
     }); 
 }, 
 addToCart: function (e) { 
     var li = e.currentTarget; 
     sb.notify ({ 
         тип: 'add-item', 
         данные: {id: li.id, имя: li.getElementsByTagName ('p') [0] .innerHTML, цена: parseInt (li.id, 10)} 
     });  
 } 

Начнем с search ; эта функция вызывается, когда происходит действие «выполнить поиск». Как видите, он принимает поисковый запрос в качестве параметра. Сначала мы сбрасываем область продукта (на случай, если результаты предыдущего поиска или фильтрации есть). Затем мы зацикливаемся на каждом продукте с нашей вспомогательной функцией. Помните, что продукт — это элемент списка; внутри него абзац с описанием продукта, и это то, что мы будем искать (в реальном примере это, вероятно, не так). Мы получаем текст абзаца и сравниваем его с текстом запроса (обратите внимание, что оба они были выполнены через toLowerCase() ). Если результат меньше 0, то есть совпадение не найдено, мы установим непрозрачность продукта равной 0,2. Вот как мы будем скрывать продукты в этом примере. Это оно!

Сейчас самое время указать, что вся функция reset устанавливает непрозрачность всех продуктов на 1.

Метод changeFilter очень похож на search ; на этот раз вместо поиска по описанию продукта мы используем атрибуты данных data5 * в HTML5. Это позволяет нам добавлять пользовательские атрибуты к нашим элементам HTML, не нарушая правил спецификации. Однако они должны начинаться с «data-», и я также добавил личный префикс, чтобы они не конфликтовали с атрибутами, которые может использовать сторонний код. Фильтр, переданный в эту функцию, сравнивается с атрибутом данных, который будет содержать названия категорий элементов. Если совпадений нет, мы уменьшим непрозрачность элемента.

Последняя функция — addToCart , которая запускается при нажатии на один из продуктов. Мы получим элемент, по которому щелкнули, и затем отправим в систему уведомление, информирующее его о нашем событии «add-item». На этот раз данные, которые мы передаем, являются объектом. Он содержит идентификатор продукта, название продукта и цену продукта. В этом примере мы ленивы и используем идентификатор элемента в качестве идентификатора и цены, а описание продукта в качестве имени.

Модуль корзины покупок

У нас есть еще один модуль для просмотра. Это модуль «корзина»:

  CORE.create_module («корзина», функция (sb) {  
     var cart, cartItems; 
 
     возвращение { 
         init: function () { 
             cart = sb.find ('ul') [0];  
             cartItems = {}; 
 
             sb.listen ({ 
                 'add-item': this.addItem 
             }); 
         }, 
         уничтожить: функция () { 
             cart = null; 
             cartItems = null; 
             sb.ignore ([ 'надстройка элемент']); 
         }, 
         addItem: function (product) { 
         } 
     }; 
 }); 

  addItem: function (product) { 
     var entry = sb.find ('# cart-' + product.id + '.quantity') [0]; 
     if (entry) { 
         entry.innerHTML = (parseInt (entry.innerHTML, 10) + 1); 
         cartItems [product.id] ++; 
     } еще { 
         entry = sb.create_element ('li', {id: "cart-" + product.id, потомки: [ 
                 sb.create_element ('span', {'class': 'product_name', text: product.name}), 
                 sb.create_element ('span', {'class': 'amount', text: '1'}), 
                 sb.create_element ('span', {'class': 'price', текст: '$' + product.price.toFixed (2)}) 
                 ], 
                 'class': 'cart_entry'}); 
 
         cart.appendChild (вход); 
         cartItems [product.id] = 1; 
     } 
 
 } 

  var Sandbox = { 
     create: function (core, module_selector) { 
             var CONTAINER = core.dom.query ('#' + module_selector); 
             возвращение { 
                 
             }; 
         }     
 }; 

  найти: функция (селектор) { 
     вернуть CONTAINER.query (селектор); 
 }, 

  addEvent: function (element, evt, fn) { 
     core.dom.bind (element, evt, fn); 
 }, 
 removeEvent: function (element, evt, fn) { 
     core.dom.unbind (element, evt, fn); 
 }, 

  notify: function (evt) { 
     if (core.is_obj (evt) && evt.type) { 
         core.triggerEvent (EVT); 
     } 
 }, 
 listen: function (evts) { 
     if (core.is_obj (evts)) { 
         core.registerEvents (evts, module_selector); 
     }             
 },  
 игнорировать: функция (evts) { 
     if (core.is_arr (evts)) { 
         core.removeEvents (evts, module_selector); 
     }          
 }, 

  create_element: function (el, config) { 
     var i, текст; 
     el = core.dom.create (el); 
     if (config) { 
         if (config.children && core.is_arr (config.children)) { 
             я = 0; 
             while (config.children [i]) { 
                 el.appendChild (config.children [I])); 
                 я ++; 
             } 
             удалить config.children; 
         } else if (config.text) { 
            text = document.createTextNode (config.text); 
            удалить config.text; 
            el.appendChild (текст); 
         } 
         core.dom.apply_attrs (el, config); 
     } 
     вернуть эл; 
 } 

  var CORE = (function () { 
     var moduleData = {}, debug = true; 
 
     возвращение { 
         debug: function (on) { 
             отладка = вкл?  правда: ложь; 
         }, 
 
     }; 
 
 } ()); 

  create_module: функция (moduleID, создатель) { 
     var temp; 
     if (typeof moduleID === 'string' && typeof creator === 'function') { 
         temp = creator (Sandbox.create (this, moduleID)); 
         if (temp.init && temp.destroy && typeof temp.init === 'function' && typeof temp.destroy === 'function') { 
             moduleData [moduleID] = { 
                 создать: создатель, 
                 экземпляр: ноль 
             }; 
             temp = null; 
         } еще { 
             this.log (1, "Module \" "+ moduleId +" \ "Registration: FAILED: экземпляр не имеет функций инициализации или уничтожения"); 
         } 
     } еще { 
         this.log (1, "Module \" "+ moduleId +" \ "Registration: FAILED: один или несколько аргументов имеют неправильный тип"); 
 
     } 
 }, 

  start: function (moduleID) { 
     var mod = moduleData [moduleID]; 
     if (mod) { 
         mod.instance = mod.create (Sandbox.create (this, moduleID)); 
         mod.instance.init (); 
     } 
 }, 
 start_all: function () { 
     var moduleID; 
     for (moduleID в moduleData) { 
         if (moduleData.hasOwnProperty (moduleID)) { 
             this.start (moduleID); 
         } 
     } 
 }, 

  stop: function (moduleID) { 
	 данные вар; 
	 if (data = moduleData [moduleId] && data.instance) { 
		 data.instance.destroy (); 
		 data.instance = null; 
	 } еще { 
		 this.log (1, "Остановить модуль" + moduleID + "': FAILED: модуль не существует или не был запущен"); 
	 } 
 }, 
 stop_all: function () { 
	 var moduleID; 
	 for (moduleID в moduleData) { 
		 if (moduleData.hasOwnProperty (moduleID)) { 
			 this.stop (moduleID); 
		 } 
	 } 
 }, 

  registerEvents: function (evts, mod) { 
	 if (this.is_obj (evts) && mod) { 
		 if (moduleData [mod]) { 
			 moduleData [mod] .events = evts; 
		 } еще { 
			 this.log (1, ""); 
		 } 
	 } еще { 
		 this.log (1, ""); 
	 } 
 }, 
 triggerEvent: function (evt) { 
	 var mod; 
	 для (мод в moduleData) { 
		 if (moduleData.hasOwnProperty (mod)) { 
			 mod = moduleData [mod]; 
			 if (mod.events && mod.events [evt.type]) { 
				 mod.events [evt.type] (evt.data); 
			 } 
		 } 
	 } 
 }, 
 removeEvents: function (evts, mod) { 
	 var i = 0, evt; 
	 if (this.is_arr (evts) && mod && (mod = moduleData [mod]) && mod.events) { 
		 for (; evt = evts [i ++];) { 
				 удалить mod.events [evt]; 
			 } 
	 } 
 }, 

  log: function (серьезность, сообщение) { 
	 if (debug) { 
		 консоль [(серьезность === 1)?  'log': (серьезность === 2)?  'warn': 'error'] (сообщение); 
	 } еще { 
		 // отправить на сервер 
	 }      
 }, 

  Дом: { 
	 запрос: функция (селектор, контекст) { 
		 var ret = {}, это = это, jqEls, i = 0; 
 
		 if (context && context.find) { 
			 jqEls = context.find (селектор); 
		 } еще { 
			 jqEls = jQuery (селектор); 
		 } 
		 
		 ret = jqEls.get (); 
		 ret.length = jqEls.length; 
		 ret.query = function (sel) { 
			 вернуть that.query (sel, jqEls); 
		 } 
		 возвратный ответ; 
	 }, 

  bind: function (element, evt, fn) { 
	 if (element && evt) { 
		 if (typeof evt === 'function') { 
			 fn = evt; 
			 evt = 'click'; 
		 } 
		 jQuery (элемент) .bind (evt, fn); 
	 } еще { 
		 // записывать неверные аргументы 
	 } 
 }, 
 unbind: function (element, evt, fn) { 
	 if (element && evt) { 
		 if (typeof evt === 'function') { 
			 fn = evt; 
			 evt = 'click'; 
		 } 
		 jQuery (элемент) .unbind (evt, fn); 
	 } еще { 
		 // записывать неверные аргументы 
	 } 
 }, 

  create: function (el) { 
         return document.createElement (el);         
     }, 
     apply_attrs: function (el, attrs) { 
         JQuery (эл) .attr (ATTRS);              
     } 
 }, // конец объекта dom 
 is_arr: function (arr) { 
     return jQuery.isArray (arr);          
 }, 
 is_obj: function (obj) { 
     return jQuery.isPlainObject (obj);          
 } 

  запрос: функция (селектор, контекст) { 
     var ret = {}, это = this, len, i = 0, djEls; 
 
     djEls = dojo.query (((контекст)? context + "": "") + селектор); 
 
     len = djEls.length; 
 
     while (i <len) { 
         ret [i] = djEls [i ++]; 
     } 
     ret.length = len; 
     ret.query = function (sel) { 
         вернуть that.query (sel, селектор); 
     } 
     возвратный ответ; 
 }, 

  eventStore: {}, 
 bind: function (element, evt, fn) { 
     if (element && evt) { 
         if (typeof evt === 'function') { 
             fn = evt; 
             evt = 'click'; 
         } 
         if (element.length) { 
             var i = 0, len = element.length; 
             for (; i <len;) { 
                 this.eventStore [element [i] + evt + fn] = dojo.connect (element [i], evt, element [i], fn); 
                 я ++; 
             } 
         } еще { 
            this.eventStore [element + evt + fn] = dojo.connect (element, evt, element, fn); 
         } 
     } 
 }, 
 unbind: function (element, evt, fn) { 
     if (element && evt) { 
         if (typeof evt === 'function') { 
             fn = evt; 
             evt = 'click'; 
         } 
          if (element.length) { 
             var i = 0, len = element.length; 
             for (; i <len;) { 
                 dojo.disconnect (this.eventStore [element [i] + evt + fn]); 
                 удалите this.eventStore [element [i] + evt + fn]; 
                 я ++; 
             } 
         } еще { 
             dojo.disconnect (this.eventStore [element + evt + fn]); 
             удалите this.eventStore [element + evt + fn]; 
         } 
     } 
 }, 

 create: function (el) { 
        return document.createElement (el);         
     }, 
    apply_attrs: function (el, attrs) { 
        var attr; 
        for (attr в attrs) { 
            dojo.attr (el, attr, attrs [attr]); 
         } 
     } 
}, // конец объекта dom 
is_arr: function (arr) { 
    return dojo.isArray (arr); 
 }, 
is_obj: function (obj) { 
    return dojo.isObject (obj); 
 }