Угловой в рамках MVVM у Angular хороши, но с такой большой и комплексной структурой он не низко, и для начала работы потребуется не менее одна или две недели. NockoutJS фокусируется на привязке данных и может быть использован только за один или два дня, поэтому стоимость обучения не должна быть слишком низкой! В эпоху, когда эволюция фронта настолько быстрая, стоимость обучения также является фактором, который необходимо учитывать. Много раз наши проекты не такие сложные, и им не нужны универсальные рамки. Им нужны простые и легкие инструменты.
Перед нокаутом
Предположим, мы строим систему заказа и нам нужно отобразить цену за единицу продукта, а затем мы можем рассчитать общую цену на основе входного количества и отобразить ее. Это также легко достичь с помощью нативного кода, эффект:
Код заключается в следующем:
<!-код HTML-> цена: <span id = "цена"> < /span> <br /> account: <input type = "text" id = "account" value = "" Placeholder = "Пожалуйста, введите количество" /> <br /> sum: <span id = "sum"> < /span> // js codevar pricenode = document.getelementbyid ('price'), accoent> // js codevar pricenode = document.getElementb document.getElementById ('account'), sumnode = document.getElementById ('sum'), цена = 100, учетная запись = 11, сумма = цена * account; // инициализировать. pricenode.innertext = price; accountnode.value = account; sumnode.textContent = sum; // Мониторинг пользовательского ввода представления слоя accountnode.addeventlistener ('keydown', function (e) {window.settimeout (function () {account = account.value; sum = price * account; sumnode.Ну, это довольно просто! О, кстати, мы отображаем 50 предметов одновременно, и есть 10 типов дисплеев, а также различные рекламные акции, такие как покупка 5 ящиков Okamoto и получение жареной палочки для теста ...
Итак, вы знаете проблему нативной реализации:
• С увеличением взаимодействия с пользовательским интерфейсом и данных количество кода быстро выросло и трудно поддерживать
• Имена, основанные на запросах DOM, ID или классе трудно управлять
• Высокая связь кода, трудно повторно использовать
Введение в nockoutjs
Knockoutjs (далее, называемый KO), по -видимому, решают вышеуказанные проблемы. Это легкая библиотека MVVM, которая фокусируется на реализации привязки данных и представлений. Он не предоставляет классы пользовательского интерфейса и функции маршрутизации, и это очень быстро, чтобы начать. В то же время, так как KO вышел в течение нескольких лет, он стал относительно зрелой основой. При выполнении некоторых страниц, которые отображаются более динамически, KO, несомненно, является лучшим выбором. Я не скажу много о MVVM, просто картине, чтобы запутать:
KO основан на трех основных функциях (введение на официальный веб -сайт):
1. Наблюдаемые и отслеживание зависимостей: используйте наблюдаемые для настройки неявной цепочки взаимосвязи между данными модели для преобразования и привязки данных.
2. Декларативные привязки: используйте простой и простой для чтения синтаксис для легко связать данные модели с элементами DOM.
3. Шаблон: встроенный шаблонный двигатель, быстро напишите сложные презентации пользовательского интерфейса для данных модели.
Использовать KO очень просто. Просто загрузите его непосредственно на официальный веб -сайт (http://knockoutjs.com/index.html) и представьте его с <script>.
Наблюдаемые объекты
Перепишите приведенный выше пример, используя KO (пользовательская цена, которая была одним из моих желаний в детстве):
Код выглядит так:
<!-HTML-код-> <div Id = "one"> цена: <input type = "text" data-bind = "значение: цена" Placeholder = "Пожалуйста, введите цену единицы" /> <br /> account: <input type = "text" bind = "value: account" Placeholder = "Пожалуйста, введите номер" /> <br /> sum: <span data-bind = ". = function (p, a) {// устанавливается как наблюдаемый объект и инициализируйте это .price = ko.observable (p); this.account = ko.observable (a); // При вызове функции KO это будет передано. В противном случае при выполнении внутреннего кода KO.PureCompled, это ko и ko.price () сообщает о ошибке. this.sum = ko.purecomomemomoputed (function () {// Потому что наблюдаемый объект является объектом функции, вам необходимо использовать Price () для чтения текущего значения. // Установить значение, используя цену (newvalue) и поддерживает записи цепи: this.price (12) .account (3) возвращает это. Price () * this.Acount ();}, это); 10); // Применение этого привязки, и связывание начинает вступать в силу ko.applybindings (vm);1) Сначала давайте посмотрим на код HTML:
Вы можете видеть, что пара клавишных значений, такая как Data-bind = "xx: oo", добавляется в каждый тег. Это синтаксис связывания KO. Что представляет XXOO? (Xxoo? Автор по -прежнему ребенок ...) Из примера мы видим, что атрибуты xx являются тегами, которые могут быть атрибутами тегов, такими как текст, значение, класс, проверенный и т. Д., И на самом деле они также могут быть кликами, фокусировкой, загрузкой и другими событиями DOM. OO выглядит как переменная, но это не переменная, а функциональный объект. Выполнение этой функции (с ()) может получить соответствующее связанное значение. Через XXOO атрибуты или события элемента могут быть связаны с объектами функции в JS (если XXOO, вы должны нести ответственность друг за друга), это декларативное привязка KO. Определение привязки на самом деле является режимом наблюдателя, но это двустороннее привязка. Издатель и подписчик подписываются на сообщения друг друга. Это двустороннее связывание MVVM. Результатом двунаправленного привязки KO является то, что одна сторона может автоматически обновлять другую сторону, изменяясь, то есть слой данных и презентации тесно связаны вместе через ViewModel. Эффект связывания аналогичен:
2) Давайте посмотрим на код JS:
Вы можете видеть, что объект ViewModel определен в JS, и OO, связанный в HTML, эксплуатируется в объекте. Здесь есть две основные операции: ko.observable () и ko.purecomputed ().
• Ko.observable (p): см. Имя, это метод установки наблюдаемых объектов. Продолжаемый параметр P является инициализированным значением. Параметры здесь могут быть основным типом данных или объектом JSON. После того, как он был установлен, это означает, что система будет наблюдать за этим значением все время. Будет ли P в ViewModel или P в изменении связанного объекта, вызовут событие обновления, и все места, которые используют это значение, будут обновлены до последнего состояния. Очевидно, что наблюдаемые объекты относительно требуют производительности, поэтому для значений, которые не требуют динамических изменений (таких как цены), не устанавливаются как наблюдаемые объекты. Конечно, его все еще нужно поместить в ViewModel для централизованной инициализации.
• ПРИМЕЧАНИЕ: наблюдаемый объект, возвращаемый ko.observable (p), является функциональным объектом, поэтому вам необходимо использовать цену () для чтения наблюдаемого объекта; Точно так же установка наблюдаемого объекта требует цены (newvalue) для использования цены (newvalue). Что более внимательно, так это то, что при настройке он поддерживает запись цепочки: viewmodel.price (100) .account (10).
• Ko.purecomputed ()-так называемое отслеживание зависимостей. Вот цена за единицу * Количество равна общей цене. Обратите внимание, что вы не можете напрямую использовать это .sum = this.price () * this.account (); Чтобы указать сумму. Этот метод написания не может динамически обновлять связанный объект, но динамически изменяет переменную суммы, но для обновления связанного объекта необходимы другие операции. Следовательно, значения связывания, связанные с расчетами, должны быть установлены с использованием функции расчета KO. Конечно, возвращаемый объект функции также является функциональным объектом. Кроме того, KO также имеет вычислительную функцию, которая также может быть установлена, но рекомендуется использовать Pure для повышения производительности.
• Обратите внимание на метод написания здесь: ko.purecomanted (fn, this), то есть свяжите Fn с объемом ViewModel, который фактически является вызовом/применением в JS. Поскольку это объект KO при выполнении внутренних функций KO, чтобы получить объем объекта ViewModel, это необходимо передать в приведенный выше метод написания. Конечно, вы также можете использовать это для сохранения объекта ViewModel за пределами функции KO, а затем использовать его внутри функции KO, чтобы вызвать объект ViewModel. Так:
var that = this; this.sum = ko.purecompodation (function () {return that.price () * that.account ();});После определения конструктора ViewModel создается создание объекта ViewModel, а затем метод ko.applybindings () используется, чтобы привлечь привязку вступить в силу. Не пропустите этот шаг.
Простой режим страницы с помощью KO:
<!-html-код-> <span data-bind = "text: bindtext"> </span> // js codevar viewmodel = {bindtext: ko.observable ('initvalue')}; ko.applybindings (viewmodel);Подводя итог, это: Использовать Data-bind = "xx: oo", чтобы объявить привязку в HTML, создать ViewModel в JS и установить наблюдаемый объект и, наконец, применить привязку.
Наблюдаемый массив объектов
Давайте посмотрим на использование наблюдаемых массивов объектов. В КО массивы и переменные не могут быть смешаны, как JS. Для объектов массива вам нужно использовать Ko.observablearray ([…,…]) таким же образом. Точно так же элементы массива могут быть основных типов или объектов JSON. Обещаемая массива объектов в KO имеет ряд методов работы массива, таких как Slice (), sort (), push () и т. Д. Эффект такой же, как и методы работы массива JS. Единственная разница между изменениями, сделанными с помощью метода КО, будет уведомлена подписчику, чтобы обновить интерфейс, но метод JS не будет обновлять интерфейс. Вот простой пример:
<!-HTML-код-> <SELECT DATA-BIND = "Параметры: список"> </select> // JS Codevar VM = {// Список: ko.observableArray () список: ko.observablearray (['luffy', 'Zoro', 'sanji'])}; Ko.applybindings (vm);Ключевой момент: KO контролирует состояние массива, а не состояние самого элемента. То есть, когда состояние массива изменяется (добавление элементов), событие КО будет запускается, чтобы привести к обновлению связанного объекта, но изменения в элементах внутри массива (например, изменения значения) не будут контролироваться и не смогут вызвать событие КО. Например:
Использование местных методов для динамического изменения Луффи на Люси в консоли не будет обновлять страницу пользовательского интерфейса, в то время как использование массива KO для изменения массива немедленно обновить страницу. Стоит отметить, что при освежении предыдущие изменения также будут обновлены (Luffy> Люси). Другими словами, переменные в памяти JS фактически изменились, но все еще не хватает действия, чтобы обновить DOM. Как вы можете видеть здесь, метод чтения массива является vm.list () [0], потому что список также является функциональным объектом, а выполнение возвращаемого значения - это содержание списка, которое мы хотим. Точно так же вы можете сбросить наблюдаемый массив объектов через Vm.list ([«Girl», «Girl»]) и немедленно обновить пользовательский интерфейс.
Если вам нужно динамически отреагировать изменения элементов массива на пользовательский интерфейс, вам необходимо установить элементы массива на наблюдаемые объекты, а затем использовать метод KO для изменения значения элемента массива. Обратите внимание, что он должен использовать список методов KO () [0] ("Люси")!
Существует два типа методов для эксплуатации наблюдаемых массивов объектов. Одним из них является то же имя, что и нативный метод массива JS: POP, PUSH, SHIFT, UNSTIFT, обратный, сортировка, сплайс. Эта часть такая же, как использование и эффекты нативного метода JS, поэтому я больше не буду повторять его.
Некоторые другие методы не доступны в JS, в основном следующим образом:
• Удалите (eepeitem) - удалите все элементы элементов с одинаковыми значениями в некоторые из них и верните их в форму массива. Здесь это означает, что вы не можете напрямую удалить первый список элементов. Remove (0), но используйте список форм. Remove (list () [0]), чтобы удалить его. Короче говоря, пропущенный параметр должен быть значением элемента элемента. Его можно использовать в форме списка () [0], или вы можете напрямую ввести строку значения (например, «Luffy»).
• Удалить (function (item) {return item.age <18;}) - удалить все элементы элементов с возрастными атрибутами менее 18 и вернуть их в качестве массива. Это использование ничем не отличается от обычных функций высшего порядка. Элемент передается как параметр функции высшего порядка. Когда итерация через массив элемент удаляется, когда возвратное значение функции высшего порядка является истинным значением, в противном случае он перейдет к следующему элементу.
• removeall (['chad', 132, не определен]) - удалите все элементы элементов со значениями, равными «Chad» или 123 или не определены, и вернуть их в качестве массива.
• Removeall () - Удаляет все элементы и возвращает в качестве массива.
Советы: При работе со наблюдаемыми объектами, если есть много объектов и частых взаимодействий, сразу обновляется с каждым изменением потребления производительности. В настоящее время вы можете использовать расширение myobservablearray.extend ({ratelimit: 1000}) для установки задержки обновления. Например, при постоянном вставке элементов в наблюдаемый массив вы можете установить время цикла 1000 мс для концентрации всех операций в течение 1000 мс в обновление, чтобы избежать ухудшения производительности, вызванных частыми операциями DOM.
Суммировать
Эта статья в основном представляет самую важную концепцию в нокаутировании: наблюдаемые объекты (массивы). Наблюдаемый объект по сути является функциональным объектом. При использовании наблюдаемых объектов с помощью метода KO пользовательский интерфейс может быть динамически обновлен. Это рекомендуемый метод. В то же время вы также можете управлять наблюдаемыми объектами с помощью нативного метода JS, но нативный метод не будет обновлять дисплей пользовательского интерфейса, и вам нужно будет подождать, пока следующее событие обновления будет обновлено до пользовательского интерфейса.