1. Свободное владение интерфейсом
Хороший интерфейс гладкий и простой для понимания, и в основном это отражает следующие аспекты:
1. Просто
Чтобы управлять атрибутом CSS определенного элемента, ниже приведен нативный метод:
document.queryselectorall ('#id'). style.color = 'red';После упаковки
Функция a (selector, color) {document.queryselectorall (selector) []. style.color = color} a ('#a', 'red');От длинной линии с десятками букв до простого вызова функции, API прост и прост в использовании
2. читаемость
A ('#A', 'Red') - это хорошая функция, которая помогает нам просто и практически изменить элемент, но проблема в том, что если вы используете изменение функции в первый раз, оно будет более запутанным. Никто не скажет ему, что такое функция. Необходимо знать одну вещь о разработке интерфейса: люди ленивы. С точки зрения функции назначения цвета, хотя записано меньше кода, он увеличивает стоимость памяти. Каждый раз, когда вы это делаете, вам нужно иметь отношения с картированием. A ----> Цвет. Если это несколько простых, это не имеет значения, но обычно набор рамок имеет десятки или даже сотни API, и увеличение затрат на картирование приведет к обрушению программиста. Нам нужно сделать интерфейс значимым. Давайте переписаем функцию:
Функция letsomeElementChangeColor (селектор, цвет) {document.queryselectorall (selector, color);}LetSomeElementChangeColor дается лингвистическое значение по сравнению с A, и любой будет знать его значение.
3. снизить затраты на память
Функция, которую мы только сейчас, тоже такая. Это слишком долго. Хотя LetSomeElementChangeColor снижает стоимость картирования, он увеличивает стоимость памяти. Вы должны знать, что никто, включая академических мастеров, не любит быть в устной форме. API, которые изначально получают DOM, также имеют эту проблему document.getElementsbyclassname; Document.GetElementsByName; Document.queryselectorall; Эти API дают людям ощущение, что слова слишком длинные. Хотя смысл, который они дают, очень ясен, этот подход основан на жертвах простоты. Итак, мы снова переписаем эту предыдущую функцию
Функция setColor (selector, color) {xxxxxxxxxxxxx}Уменьшить имя функции без существенных изменений. Сделайте это легко читать, запомнить и использовать;
4. Расширен
Так называемое расширение означает, что использование функций выполняется в порядке письма, например, проточной воды для формирования цепочки выполнения:
document.getElementbyId ('id'). style.color = 'red'; document.getElementById ('id'). style.fontsize = 'px'; document.getElementById ('id'). style.backgourdcolor = 'pink';Предыдущий метод, который мы использовали, заключался в том, чтобы инкапсулировать две функции SetFontsize, снова BetbackgroundColor; а затем выполнить их setColor ('id', 'red'); setFontsiez ('id', '12px'); betbackgroundcolor ('id', 'pink'); Очевидно, что этот подход не лень выйти за рамки царства; Идентификационный элемент должен быть повторно приобретена каждый раз, влияя на производительность и провалившись; Каждый раз, когда необходимо добавлять новые методы, сбои, эти методы все еще называются каждый раз или проваливаются. Ниже мы переписали его в расширенную функцию. Сначала инкапсулируйте метод получения идентификатора в объект, а затем верните этот объект в каждом методе объекта:
function getElement (selector) {this.style = document.queryselecotrall (selector) .style;} getElement.prototype.color = function (color) {this.style.color = color; return this;} getElement.prototype.background = function (bg) {this.style.background = ratembround = ratembround = color athorground = returncolor = returncolor = returncolor = this;} getElement.prototype.fontsize = function (size) {this.style.fontsize = size; вернуть это;} // call var el = new getElement ('#id') el.color ('red'). founal ('pink'). fontsize ('px');Простые, плавные и легко читаемые позже, мы поговорим о том, как продолжать оптимизировать в параметрах. Поэтому каждый предпочитает использовать jQuery API. Хотя символ $ не представляет какого -либо практического значения, простой символ полезен для нашего использования. Он воплощает приведенные выше принципы: простые, легко читаемые, легко запомнить, записать цепочку и многопараметрическую обработку.
Ночная посуда:
document.getElementbyId ('id'). style.color = 'red'; document.getElementById ('id'). style.fontsize = 'px'; document.getElementById ('id'). style.backgourdcolor = 'pink';мечтать:
$ ('id'). css ({color: 'red', fontsize: '12px', founalcolor: 'pink'})2. Последовательность
1. Последовательность интерфейса
Соответствующие интерфейсы сохраняют постоянный стиль. Полный набор API значительно снизит адаптивность разработчика к новым инструментам, если он передает чувство знакомства и комфорта. Называя эту штуку: как короткую, так и самоопределение, и, самое главное, сохранять последовательность. «В сообществе компьютерных наук есть только две головные боли: неудача кэша и проблемы с именом» - Фил Карлтон выбирает слово, которое вам нравится, и используйте его непрерывно. Выберите стиль, а затем сохраните его.
Ночная посуда:
SetColor,
letbackground
changefontsize
Makedisplay
мечтать:
SetColor;
Betbackground;
setFontsize
набор.........
Постарайтесь поддерживать стиль кода и стиль именования, чтобы люди могли читать ваш код, как будто они читали статьи, написанные одним и тем же человеком.
3. Обработка параметров
1. Тип параметра
Определите тип параметров для предоставления стабильных гарантий для вашей программы
// Мы предусматриваем, что цвет принимает функцию типа строки setcolor (color) {if (typeof color! == 'string') return; dosomething}2. Используйте JSON для передачи параметров
Есть много преимуществ прохождения ценностей в JSON. Он может назвать параметры, игнорировать конкретное местоположение параметров, дать значения по умолчанию и т. Д. Например, следующие плохие ситуации:
Функция FN (Param1, Param2 ............ Paramn)
Вы должны передать каждый параметр соответственно, в противном случае ваш метод будет выполняться иначе, чем вы ожидаете. Правильный метод является следующим.
Функция fn (json) {// Установить значение по умолчанию для необходимых параметров var default = extend ({param: 'default', param: 'default' ......}, json)}Ожидается, что этот код функции будет работать, даже если вы не пропустите в него какие -либо параметры. Потому что при объявлении вы решите значение по умолчанию параметров на основе конкретного бизнеса.
4. Масштабируемость
Один из наиболее важных принципов дизайна программного обеспечения: никогда не изменяйте интерфейс, это означает расширение его! Масштабируемость также требует единой ответственности за интерфейс, и многочисленные интерфейсы ответственности трудно расширить. Возьмите каштан:
// шрифт и фон элемента должны быть изменены в одно и то же время // Nightware: набор функций (селектор, цвет) {document.queryselectrectroall (selector) .style.color = color; document.queryselectrectroall (selector) .style.backgroundcolor = color;} // функция не может быть расширена. Если вам нужно снова изменить размер шрифта, вы можете только изменить эту функцию и заполнить код, чтобы изменить размер шрифта после функции // set dreamfunction set (selector, color) {var el = document.queryselectrectroal px) {var el = set (selector, color) el.style.fontsize = px; return el;}Выше приведено просто простое добавление цветов. Бизнес сложный, а код - это не когда вы его пишете. Вы должны прочитать предыдущий код и изменить его. Очевидно, это не соответствует принципу открытого закрытого. Модифицированная функция возвращает объект элемента, так что в следующий раз, когда вам нужно изменить, вы снова получите возвратное значение для обработки.
2. Использование этого
Масштабируемость также включает в себя гибкое использование этого, вызов и применения методов:
Функция SpecileBonjour () {alert (this.a)} obj.a =; obj.say = saybonjour; obj.say (); /// orsaybonjour.call || Применить (obj); //5. Обработка ошибок
1. ошибки предвидеть
Вы можете использовать TypeOF или попробовать ... поймать для обнаружения. TypeOf заставляет объект обнаружения не бросать ошибки и особенно полезен для неопределенных переменных.
2. Выбросить ошибку
Большинство разработчиков не хотят делать ошибки и должны сами найти соответствующий код. Лучший способ - вывести его непосредственно в консоли, чтобы рассказать пользователю, что случилось. Мы можем использовать выходной API браузера: console.log/warn/ошибка. Вы также можете уйти в свою программу: попробуйте ... поймать.
Ошибка функции (a) {if (typeof a! == 'string') {console.error ('param a должен быть тип строки')}} error function () {try {// какой -то код Excucet здесь, возможно, бросить неправильно} catch (ex) {console.wran (ex);}}6. Предуратель
Предсказуемый интерфейс программы запаха обеспечивает надежность, и для обеспечения плавного выполнения вашего кода он должен учитывать ненормальные ожидания. Давайте посмотрим на разницу между непредвиденным кодом и предсказуемым кодом, используя предыдущий SetColor
//nighwarefunction set(selector, color) {document.getElementById(selector).style.color = color;}//dreamzepto.init = function(selector, context) {var dom// If nothing given, return an empty Zepto collectionif (!selector) return zepto.Z()// Optimize for string selectorselse if (typeof selector == 'string') {selector = selector.trim () // Если это фрагмент HTML, создайте узлы из It // Примечание: как в Chrome, так и в Firefox, Dom Error // выбрасывается, если фрагмент не начинается с <if (selector [] == '<' && fragmentre.test (selector)) dom = zepto.fragment (selector, regexp. $, contextre., celectrector = nat null/ null/ null. Контекст сначала и выберите // узлы из -за того, что if (context! == undefined) return $ (context) .find (selector) // Если это селектор CSS, используйте его для выбора Nodes.else dom = Zepto.qsa (документ, селектор)} // Если функция дана, вызовите его, когда Dom будет готова, если (selecter) etseecter). Выводится коллекция, просто верните Itelse if (Zepto.isz (selector)) return selectorelse {// normalize массив, если приведен массив узлов (isarray (selector)) dom = compact (selector) // rup dom nodes.els (fragmentRe.test (selector)) dom = Zepto.fragment (selector.trim (), regexp. $, context), selector = null // Если есть контекст, сначала создайте коллекцию в этом контексте и Select // hodes // и последнее, но не будет, если он, если он используется, выборочно, чтобы он выбрал. nodes.else dom = zepto.qsa (документ, селектор)} // Создать новую коллекцию Zepto из Nodes sucdetRurn Zepto.z (dom, selector)}Приведенное выше исходный код Zepto. Вы можете видеть, что автор сделал много обработки при предвидетельстве входящих параметров. Фактически, предсказуемость предоставляет несколько входов для программы, не более чем некоторых логических суждений. Зепто использует здесь много правильных и неправильных суждений, что также приводит к длине кода и не подходит для чтения. Короче говоря, предсказуемость действительно требует от вас писать больше параметров для физических объектов в месте. Измените внешнее обнаружение на внутреннее обнаружение. Да, люди, которые его используют, удобны и счастливы его использовать. Сейчас! Самая важная вещь в жизни - это Хейзен.
7. Комментарии и документы читаемость
Лучший интерфейс заключается в том, что мы будем использовать его без документации, но часто, когда количество интерфейсов будет больше, а бизнес увеличится, его будет немного сложно использовать. Поэтому интерфейсные документы и комментарии должны быть тщательно написаны. Комментарии следуют принципу простой и краткости, и предназначены для тех, кто приезжает спустя, чтобы показать им:
// Интерфейс аннотации, чтобы продемонстрировать ppt, использовать функцию Commentary () {// Если вы определяете переменную без буквального значения, лучше всего написать комментарий для него: A: бесполезная переменная, вы можете удалить Var a; // Комментарии в ключе и двусмысленности, точно так же, как окончательный прикосновение: очистить все данные после маршрутизации на интерфейс HASH. Return go.navigate ('hash', function () {data.clear ();});}наконец
Рекомендуется для написания грамматических документов Grammar и синтаксиса написания Royal Document Github. Простой и быстро, код выделен, и вы не говорите много.
Выше приведено полное описание принципов дизайна JavaScript API, представленных вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!