Магистраль должна полагаться на подчеркивание. JS для использования. Он должен использовать функции в подчеркивании для завершения основных операций доступа к элементам страниц и элементов обработки.
Примечание. Backbone хорошо работает с другими библиотеками JS, так что это библиотека, а не структура.
Подчеркивается не расширяет собственный объект, но вызывает метод _ () для инкапсуляции. Как только инкапсуляция завершена, объект JS становится подчеркивающим объектом. Вы также можете получить данные в нативном объекте JS с помощью метода значения () подчеркивания объекта. (jQuery получает объект jQuery через метод $ ())
Подчеркивается более 60 функций в общей сложности. Согласно различным объектам обработки, его можно разделить на пять основных модулей: класс сбора, класс массива, класс функциональной функции, класс объектов и класс функций инструмента.
Подчеркивание Template () Описание функции:
Эта функция содержит три шаблона:
(1) < % %>: содержит логический код и не будет отображаться после рендеринга.
(2) < %= %>: тип данных, отображение данных после рендеринга.
(3) < %- %>: преобразовать теги HTML в общие строки, чтобы избежать кодовых атак.
Формат звонка:
_.template (TemplateString, [data], [настройка])
Двухстороннее привязка данных не реализовано.
1. Подчеркивая инкапсуляция объекта
Underscore не распространяется на нативный прототип объекта JavaScript, но инкапсулирует данные в пользовательский объект, такой как jQuery (далее именуемый «подчеркинный объект»).
Вы можете получить нативные данные JavaScript, вызывая метод Value () подчеркивания объекта, например:
// Определите встроенный объект JavaScript var jsdata = {name: 'data'} // Создать объект в качестве объекта подчеркивания через метод _ () // Прототип объекта подчеркивания содержит все методы, определенные в подчеркивании. Вы можете использовать var underscoredata = _ (jsdata); // Получить собственные данные с помощью метода значения, то есть jsdata underscoredata.value ();2. Приоритетный призыв к встроенным методам JavaScript 1.6
В подчеркивании есть много методов, которые были включены в спецификацию в JavaScript 1.6. Следовательно, в пределах подчеркивания объекта встроенные методы, предоставленные в хост-среде (если внедренная среда хоста внедрила эти методы) будут вызваны первыми для повышения эффективности выполнения функции.
Для хост -сред, которые не поддерживают JavaScript 1.6, Underscore будет реализовать их по -своему, и для разработчиков они полностью прозрачны.
Упомянутая здесь среда хоста может быть средой, работающей в Node.js, или клиентским браузером.
3. Измените пространство имен
Underscore использует _ (подчеркивание) по умолчанию для доступа и создания объектов, но это имя может не соответствовать нашим спецификациям именования или может легко вызвать конфликты именования.
Мы можем изменить имя подчеркивания через метод noconflict () и восстановить значение перед _ (подчеркивая) переменная, например:
<script type = "text/javascript"> var _ = 'custom variable'; </script> <script type = "text/javascript" src = "underscore/underscore-min.js"> </script> <script type = "text/javascript"> // underscore console.dir (_); // Переименование объекта подчеркивания для нас, а затем получить доступ и создать подчеркивающий объект через США var us = _.noconflict (); // вывод "пользовательская переменная" console.dir (_); </script>
4. Цепочка
Помните, как мы делаем операции в jQuery? Например:
$ ('a') .css ('position', 'velivary') .attr ('href', '#') .show ();Подчеркивание также поддерживает операции цепочки, но вам необходимо позвонить в метод Cheape (), чтобы объявить:
var arr = [10, 20, 30]; _ (arr) .chain () .map (function (item) {return item ++;}) .first () .value ();Если метод цепочки () называется, подчеркивание будет инкапсулировать вызываемый метод в закрытии, инкапсулировать возвращаемое значение в подчеркивающий объект и вернуть:
// Это ключевая функция в подчеркивании для реализации операций цепочки. Он инкапсулирует возвращаемое значение в новый объект подчеркивания и снова вызывает метод цепочки (), чтобы обеспечить поддержку следующей функции в цепочке методов. var result = function (obj, chain) {return chain? _ (obj) .Chain (): obj; }5. расширить подчеркивание
Например, мы можем легко расширить пользовательские методы на подчеркивание с помощью метода Mixin ():
_.mixin ({method1: function (object) {// todo}, method2: function (arr) {// todo}, method3: function (fn) {// todo}});Эти методы добавляются к объектному прототипу подчеркивания, который может использоваться всеми созданными подчеркивающими объектами, и они пользуются той же средой, что и другие методы.
6. Traverse the Collection
Каждый () и map () методы являются двумя наиболее часто используемыми методами. Они используются для итерации над сбором (массивом или объектом) и обрабатывают каждый элемент в коллекции по очереди, например:
var arr = [1, 2, 3]; _ (arr) .map (function (item, i) {arr [i] = item + 1;}); var obj = {First: 1, Second: 2} _ (obj).Метод MAP () играет ту же роль и параметры, что и каждый метод (), но он записывает результат, возвращаемый каждой итерационной функцией, к новому массиву и возвращает.
7. Функциональная дроссельная
Функция дросселя относится к управлению частотой выполнения или интервалом функции (точно так же, как ворота, который управляет потоком воды). Underscore предоставляет два метода: Debounce () и Throttle () для функциональной дросселирования.
Чтобы более четко описать эти два метода, предположим, что нам нужно реализовать два требования:
Требование 1: Когда пользователь входит в критерии поиска в текстовом поле, соответствующие ключевые слова автоматически запрошены и предложены пользователю (так же, как при вводе ключевого слова поиска в TMALL)
Во -первых, проанализируйте первое требование. Мы можем связать событие Keypress текстового поля. Когда содержимое блока ввода меняется, запросите подходящее ключевое слово и отобразите его. Предположим, я хочу запросить «Windows Phone», который содержит 13 символов, и мне потребовалось всего 1 секунду, чтобы завершить вход (это кажется немного быстрым, это то, что это значит), затем в течение 1 секунды метод запроса был вызван 13 раз. Это очень страшная вещь, и если TMALL реализован таким образом, я волнуюсь, что он умрет до дня синглов (конечно, это не так хрупко, но это определенно не самое лучшее решение)
Лучшим подходом является запрос подходящего ключевого слова, когда пользователь завершил ввод или ждет подсказки (возможно, он слишком ленив, чтобы вводить следующий контент).
Наконец, мы обнаружили, что в обоих случаях мы ожидали, пользователь временно остановит ввод, поэтому мы решили запросить после того, как пользователь приостановит вход в течение 200 миллисекунд (если пользователь постоянно набирает контент, то мы думаем, что он может быть очень ясно относится к ключевому слову, которое он хочет, так что подождите и приведите его снова)
В настоящее время, используя функцию Debounce () в подчеркивании, мы можем легко реализовать это требование:
<input type = "text" id = "search" name = "search" /> <script type = "text /javascript"> var Query = _ (function () {// operia operation здесь}). Debounce (200); $ ('#search'). bind ('keypress', Query); </script>Вы можете видеть, что наш код очень краткий, а контроль дросселя был реализован в методе Debounce (). Мы только говорим, что если функция запроса не была вызвана в течение 200 миллисекунд, мы выполним нашу операцию запроса, а затем связываем функцию запроса с событием KeyPress в поле ввода.
Как возникла функция запроса? Когда мы называем метод Debounce (), мы передадим функцию, которая выполняет операцию запроса, и время (миллисекунд). Метод Debounce () будет дать функцию на основе времени, которое мы передаем, и вернет новую функцию (то есть функцию запроса). Мы можем вызвать функцию запроса с уверенностью и смелостью, и метод Debounce () поможет нам контролировать ее по мере необходимости.
Требование 2: Когда пользователь перетаскивает прокрутку браузера, вызовите интерфейс сервера, чтобы проверить, есть ли новый контент
Давайте проанализируем второе требование. Мы можем связать метод запроса с событием windows.Onscroll, но это, очевидно, не хорошая практика, потому что пользователь перетаскивает прокрутку один раз и может запустить десятки или даже сотни событий Onscroll.
Можем ли мы использовать приведенный выше метод Debounce () для выполнения управления дроссельностью? Когда пользователь закончил перетаскивание прокрутки, а затем запросить новый контент? Но это не соответствует требованиям, и пользователи надеются увидеть изменения в новом контенте в процессе перетаскивания.
Таким образом, мы решили сделать это: когда пользователь перетаскивает, интервал между каждым двумя запросами составляет не менее 500 миллисекунд, если пользователь перетаскивает 1 секунду, это может вызвать 200 событий Onscroll, но мы делаем только 2 запроса.
Используя метод дроссельной заслонки () в подчеркивании, мы также можем легко реализовать это требование:
<script type = "text/javaScript"> var Query = _ (function () {// Операция запроса здесь}). Дроссель (500); $ (window) .bind ('Scroll', запрос); </script>Код по -прежнему очень краткий, потому что внутри метода дроссельной заслонки () все элементы управления, на которые мы реализовали уже.
Возможно, вы обнаружили, что два метода Debounce () и Throttle () очень похожи (включая метод вызова и возвратное значение), но их функции различны.
Все они используются для функциональной дросселирования, а функции управления не вызываются часто, сохраняя ресурсы клиента и сервера.
Метод Debounce () фокусируется на интервале между выполнением функции, то есть время вызовов функции дважды не может быть меньше, чем указанное время.
Метод дроссельной заслонки () больше фокусируется на частоте выполнения функции, то есть функция будет вызвана только один раз в пределах указанной частоты.
8. Анализ шаблонов
Underscore обеспечивает легкую функцию анализа шаблона, которая помогает нам эффективно организовать структуру страниц и логику.
Я представлю это с примером:
<!-используется для отображения рендерированных тегов-> <ul id = "element"> </ul> <!-Определите шаблон и поместите содержимое шаблона в тег скрипта-> <script type = "text/template" id = "tpl"> < % для (var i = 0; i <list.length; i ++) { %> < % vare = list [i] %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> %> % <span><%=item.firstName%> <%=item.lastName%></span> <span><%-item.city%></span> </li> <% } %> </script> <script type="text/javascript" src="underscore/underscore-min.js"></script> <script type="text/javascript"> // Get рендеринг элементов и содержимое шаблона var element = $ ('#element'), tpl = $ ('#tpl'). html (); // Создание данных, которые могут быть данными var, которые вы получаете от Server = {list: [{FirstName: '<a href = "#"> Zhang </a>', Lastname: 'San', City: 'Shanghai'}, {FirstName: 'li', Lastname: 'Si', City: '<href = "#"#'> bei «Wang», lastname: 'wu', city: 'guangzhou'}, {firstname: 'zhao', lastname: 'liu', city: 'shenzhen'}]} // Проанализируйте шаблон, вернуть содержимое содержимое var html = _.template (tpl, data); // Заполняют анализируемый содержимое в элемент рендеринга element.html (html); </script>В этом примере мы помещаем контент шаблона в тег <cropplice>, вы, возможно, заметили, что тип тега - это текст/шаблон вместо текста/javascript, потому что его нельзя запустить непосредственно в виде скрипта JavaScript.
Я также рекомендую вам поместить контент шаблона в <Script>, потому что, если вы напишите их в <Div> или других тегах, они могут быть добавлены в дерево DOM для анализа (даже если вы скрываете этот тег, его нельзя избежать).
_.
< % %>: Используется для содержания кода JavaScript, который будет выполняться при отображении данных.
< %= %>: Используется для вывода данных, это может быть переменная, атрибут объекта или функциональный вызов (для вывода возвращаемого значения функции).
< %- %>: используется для вывода данных, и преобразование HTML-символов, содержащихся в данных в формы объекта (например, преобразует двойные кавычки для формирования), чтобы избежать атак XSS.
Когда мы хотим отобразить HTML в данных как текст, мы часто используем тег < %- %>.
Underscore также позволяет изменить эти 3 формы тегов. Если мы хотим использовать { % %}, { %= %}, { %- %} в качестве тегов, мы можем сделать это путем изменения шаблонов, точно так же:
_.templateSettings = {evaluation: // {%([/s/s]+?)/%/}/g, interpolate: // {%= ([/s/s]+?)/%/}/g, Escape: // {%-(/s/s]+?)%/g}В этом примере мы передаем содержание шаблона и данные, которые будут заполнены методом шаблона, который будет обрабатываться в следующем порядке:
(1) Расположение содержимого шаблона в исполняемый JavaScript (теги шаблона анализа)
(2) Измените проанализированную область JavaScript в объект данных, который мы передаем с помощью оператора, который позволяет нам напрямую доступ к свойствам объекта данных через переменные в шаблоне.
(3) выполнить проанализированный JavaScript (заполнение данных в шаблон)
(4) вернуть результат после выполнения
Мы часто сталкиваемся с ситуацией, когда метод шаблона называется несколько раз для визуализации данных в один и тот же шаблон.
Предположим, у нас есть список пейджинг, и каждая часть данных в списке отображается через шаблон. Когда пользователь выйдет на следующую страницу, мы получим данные следующей страницы и повторно рендеринг. Фактически, шаблон одинаково каждый раз, когда он отображается, но все процессы обработки шаблона, описанную только сейчас, всегда будут выполняться.
Фактически, метод шаблона подчеркивания обеспечивает более эффективный способ вызова. Мы изменяем последние два предложения в приведенном выше коде на:
// Проанализируйте шаблон, верните проанализированный содержимое var render = _.template (tpl); var html = render (data); // заполняют анализируемый содержимое в элемент рендеринга element.html (html);
Вы найдете тонкую разницу: когда мы вызовым метод шаблона, мы передаем только содержание шаблона, но не данные. В настоящее время метод шаблона проанализирует содержание шаблона, генерирует проанализированный исполняемый код JavaScript и вернет функцию, а корпус функции - проанализированный JavaScript. Поэтому, когда мы называем эту функцию для отображения данных, мы опускаем действие шаблона.
Вы должны сохранить возвращенную функцию (точно так же, как я храню ее в переменной рендеринга), а затем отобразить данные, вызывая функцию, особенно если один и тот же шаблон может быть отображен несколько раз. Это может повысить эффективность выполнения (конкретное улучшение должно зависеть от длины и сложности вашего шаблона, но в любом случае это хорошая привычка).