Я долго писал код JavaScript и не могу вспомнить, какую эпоху это началось. Я очень взволнован достижениями JavaScript в последние годы; Мне очень повезло быть бенефициаром этих достижений. Я написал много статей, глав и книги, посвященной этому, но сейчас я все еще могу найти некоторые новые знания об этом языке. Следующее описывает навыки программирования, которые заставили меня вздохнуть "Ах!" в прошлом. Вы должны попробовать эти навыки сейчас, а не ждать, чтобы случайно обнаружить их некоторое время в будущем.
Краткое письмо
Одной из моих любимых вещей в JavaScript является метод аббревиатуры генерации объектов и массивов. В прошлом, если вы хотите создать объект, вам нужно было бы сделать это:
var car = new Object (); car.colour = 'red'; Car.wheels = 4; car.hubcaps = 'spinning'; car.age = 4;
Следующий метод написания может достичь того же эффекта:
var car = {color: 'red', колеса: 4, hubcaps: 'spinning', возраст: 4}Это намного проще, вам не нужно многократно использовать имя этого объекта. Таким образом, автомобиль определяется. Может быть, вы столкнетесь с проблемой InvaliduserInsession, которая встречается только тогда, когда вы используете IE. Просто запомните одну вещь и не пишите запятые перед закрывающими брекетами, и у вас не будет никаких проблем.
Еще одна очень удобная аббревиатура для массивов. Традиционный способ определения массива заключается в следующем:
var moviesthatneedbetterwriters = new Array («Transformers», «Transformers2», «avatar», «Indianajones 4»);
Версия аббревиатуры такая:
var moviesthatneedbetterwriters = ['transformers', 'transformers2', 'avatar', 'indianajones 4'];
Для массивов здесь есть проблема, но на самом деле нет функции группы графиков. Но вы часто обнаружите, что кто -то определяет вышеуказанный автомобиль, как этот, как это
var car = new Array (); автомобиль ['color'] = 'red'; автомобиль ['Wheels'] = 4; CAR ['Hubcaps'] = 'Spinning'; автомобиль ['age'] = 4;
Массивы не всемогущие; Если они написаны неправильно, они будут запутать. Графические группы на самом деле являются функцией объектов, и люди запутали эти два понятия.
Еще один очень крутой метод сокращения - использовать тройные условные символы. Вам не нужно писать это, как ниже ...
направление var; if (x <200) {направление = 1; } else {направление = -1; }…Вы можете упростить его с тройной условной нотацией:
var direction = x <200? 1: -1;
Когда условие верно, значение после отметки вопроса принимается, в противном случае значение после взятия толстой кишки.
Хранить данные в JSON
Прежде чем я обнаружил JSON, я использовал различные сумасшедшие методы для хранения данных в неотъемлемых типах данных JavaScript, таких как массивы, строки, глифы, которые легко разделить, и другие раздражающие вещи. После того, как Дуглас Крокфорд изобрел JSON, все изменилось. Используя JSON, вы можете использовать собственные функции JavaScript для хранения данных в сложных форматах, и нет необходимости делать другие дополнительные преобразования, и вы можете напрямую получить к ним доступ. JSON - это аббревиатура «обозначения объекта JavaScript», которая использует два метода аббревиатуры, упомянутых выше. Итак, если вы хотите описать группу, вы можете написать так:
var band = { "name":"The Red Hot Chili Peppers", "members":[ { "name":"Anthony Kiedis", "role":"lead vocals" }, { "name":"Michael 'Flea' Balzary", "role":"bass guitar, trumpet, backing vocals" }, { "name":"Chad Smith", "role":"drums,percussion" }, {"name": "John Frusciante", "Роль": "Ведущая гитара"}], "Год": "2009"}Вы можете использовать JSON непосредственно в JavaScript, инкапсулировать его в функции или даже использовать его в качестве формы возвращаемого значения API. Мы называем это JSON-P, и многие API используют эту форму.
Вы можете вызвать источник источника данных и непосредственно вернуть данные JSON-P в коде скрипта:
<div id = "Delicious"> </div> <script> function Delicious (o) {var out = '<ul>'; for (var i = 0; i <o.length; i ++) {out + = '<li> <a href = "' + o [i] .u + '">' + o [i] .d + '</a> </li>'; } out += '</ul>'; document.getElementbyId ('Delicious'). innerhtml = out; } </script> <script src = "http://feeds.delicious.com/v2/json/codepo8/javascript?count=15&callback=delicious"> </script>Это вызывает функцию веб -службы, предоставленную The Delicious Websity, чтобы получить самый последний неупорядоченный список закладок в формате JSON.
По сути, JSON - самый легкий способ описать сложные структуры данных, и он может работать в браузере. Вы даже можете запустить его в PHP с функцией json_decode (). Одна вещь, которая удивила меня о собственных функциях JavaScript (математика, массив и строка), заключается в том, что после того, как я изучил математические и струнные функции в JavaScript, я обнаружил, что они могут значительно упростить мою работу по программированию. Используя их, вы можете сохранить сложную обработку петли и условные суждения. Например, когда мне нужно реализовать функцию, чтобы найти наибольшее число в массиве чисел, я использовал этот цикл, как это:
var numbers = [3,342,23,22,124]; var max = 0; for (var i = 0; i <number.length; i ++) {if (number [i]> max) {max = number [i]; }} alert (max);Мы можем сделать это без петли:
var numbers = [3,342,23,22,124]; numbers.sort (function (a, b) {return b - a}); оповещение (числа [0]);Следует отметить, что вы не можете сортировать () множество числовых символов, потому что в этом случае он будет сортировать только в алфавитном порядке. Если вы хотите узнать больше об использовании, вы можете прочитать эту хорошую статью о Sort ().
Другая интересная функция - math.max (). Эта функция возвращает наибольшее число в параметре:
Math.max (12,123,3,2,433,4); // возвращает 433
Поскольку эта функция может проверить числа и вернуть самый большой, вы можете использовать ее для проверки поддержки браузера для функции:
var scrolltop = math.max (doc.documentelement.scrolltop, doc.body.scrolltop);
Это используется для решения проблем IE. Вы можете получить значение Scrolltop текущей страницы, но в зависимости от Doctype на странице, только одно из двух вышеупомянутых свойств будет хранить это значение, а другое свойство будет не определен, поэтому вы можете получить это число с помощью Math.max (). Прочитайте эту статью, и вы получите больше знаний об использовании математических функций для упрощения JavaScript.
Есть также пара очень полезных функций, которые управляют строками, разделены () и join (). Я думаю, что наиболее репрезентативным примером было бы написать функцию для прикрепления стиля CSS к элементам страниц.
Это так. Когда вы добавляете класс CSS к элементу страницы, это либо первый класс CSS этого элемента, либо у него уже есть несколько классов. Вам нужно добавить пространство после существующего класса, а затем следовать классу. И если вы хотите удалить этот класс, вам также необходимо удалить пространства перед этим классом (это было очень важно в прошлом, потому что некоторые старые браузеры не распознавали класс, за которым следуют места).
Итак, оригинальное письмо будет выглядеть следующим образом:
функция addClass (elm, newclass) {var c = elm.classname; elm.classname = (c === '')? NewClass: C+''+NewClass; }Вы можете использовать функции split () и join () для автоматического выполнения этой задачи:
функция addClass (elm, newclass) {var classes = elm.classname.split (''); Classe.push (NewClass); elm.classname = classe.join (''); }Это гарантирует, что все классы разделены пространствами и что класс, который вы хотите добавить, размещен точно в последнем.
Делегация мероприятия
Все веб -приложения обусловлены событием. Мне нравится обработка событий, особенно мне нравится определять события сам. Это делает ваш продукт масштабируемым, не изменяя код ядра. Существует большая проблема (также мощное проявление) об удалении событий на странице. Вы можете установить слушатель событий на элемент, и слушатель событий начинает работать. Но на странице нет никаких признаков того, что есть слушатель. Из -за этой непредсказуемой проблемы (которая особенно неприятна для некоторых новичков) и различных проблем с памятью, которые «браузеры», такие как IE6, используют слишком много прослушивания событий, вы должны признать, что целесообразно пытаться использовать программирование событий как можно меньше.
Таким образом, комиссия инцидента произошла.
Когда событие на элементе на странице запускается, и в отношениях Домерация Дома все дети этого элемента также могут получить это событие. В настоящее время вы можете использовать обработчик событий на родительском элементе, чтобы справиться с ним, а не использовать слушателей событий на куче детских элементов для его обработки. Что именно это значит? Давайте скажем так, на странице много гиперссылок. Вы не хотите использовать эти ссылки напрямую. Вы хотите назвать эту ссылку через функцию. HTML -код такой:
<h2> Отличные веб -ресурсы </h2> <ul id = "resources"> <li> <a href = "http://opera.com/wsc"> hora web ncormards curriculum </a> </li> <li> <a href = "http://sitepoint.com"> sitepoint </a> </li> <li> href = "http://alistapart.com"> Список отдельно </a> </li> <li> <a href = "http://yuiblog.com"> yui blog </a> </li> <li> <a href = "http://blametonthevoices.com. href = "http://oddlyspecific.com"> странно конкретно </a> </li> </ul>
Обычная практика - пройти через эти ссылки и прикрепить обработчик событий к каждой ссылке:
// Типичный пример обработки событий (function () {var resources = document.getElementbyId ('resources'); var links = resources.getElementsbytagname ('a'); var all = links.length; for (var i = 0; i <all; i ++) {// Прикрепить слушатель к каждой ссылке [i]. var x = e.target;Мы также можем выполнить эту задачу с помощью процессора событий:
(function () {var resources = document.getElementById ('resources'); resources.AddeventListener ('click', handler, false); function handler (e) {var x = e.target; // Получить ссылку tha if (x.nodename.tolowhercase () === 'a') {alert ('evelegation:' + x); }) ();Поскольку событие Click происходит в этих элементах страницы, все, что вам нужно сделать, это сравнить их имена и выяснить, какой элемент должен реагировать на событие.
Отказ от ответственности: два примера о событиях, упомянутых выше, могут работать во всех браузерах. За исключением IE6, вам нужно использовать модель событий на IE6, а не простой стандартной реализации W3C. Вот почему мы рекомендуем использовать несколько инструментов.
Преимущество этого подхода не ограничивается уменьшением нескольких процессоров событий в один. Подумайте, например, вам нужно динамически добавить больше ссылок в эту таблицу ссылок. После использования делегирования событий вам не нужно вносить какие -либо другие изменения; В противном случае вам необходимо снова повторно склонить эту таблицу ссылок и снова установить обработчик событий для каждой ссылки.
Анонимные функции и модульность
Самая раздражающая вещь в JavaScript - это то, что у переменных нет возможности использования. Любая переменная, функция, массив, объект, если она не находится внутри функции, считается глобальной, что означает, что другие сценарии на этой странице также могут получить к нему доступ и переопределить ее.
Решение состоит в том, чтобы поместить вашу переменную в анонимную функцию и назвать ее сразу после определения. Например, следующий метод написания будет создавать три глобальные переменные и две глобальные функции:
var name = 'chris'; var age = '34'; var status = 'single'; Функция createemempemempement () {// [...]} function getMemberDetails () {// [...]}Если на этой странице на этой странице есть переменная, называемая статусом, возникнут. Если мы инкапсулируем их в MyApplication, эта проблема будет решена:
var myApplication = function () {var name = 'chris'; var age = '34'; var status = 'single'; function createemember () {// [...]} function getMemberDetails () {// [...]}} ();Однако, таким образом, нет никакой функции вне функции. Если это то, что вам нужно, это нормально. Вы также можете опустить имя функции:
(function () {var name = 'chris'; var age = '34'; var status = 'single'; function createemember () {// [...]} function getMemberDetails () {// [...]}}) ();Если вы хотите использовать внутреннюю часть функции, вам необходимо внести некоторые изменения. Чтобы получить доступ к CreateMember () или GetMemberDetails (), вам необходимо превратить их в свойства MyApplication, чтобы выставить их на внешний мир:
var myApplication = function () {var name = 'chris'; var age = '34'; var status = 'single'; return {createMempemement: function () {// [...]}, getMemberDetails: function () {// [...]}}} (); //myapplication.createmember () и //myapplication.getmemberdetails () можно использовать.Это называется модульным режимом или синглтоном. Дуглас Крокфорд говорил о том, что он много раз говорил, и широко используется в библиотеке пользовательских интерфейсов Yahoo Yui. Но что делает меня неудобным, так это то, что мне нужно изменить структуру предложения, чтобы внешний мир мог быть доступен к функциям и переменным. Более того, мне нужно добавить префикс MyApplication при вызове. Итак, я не люблю это делать, я предпочитаю просто экспортировать указатели в элементы, к которым необходимо получить доступ к внешнему миру. После этого написание внешних вызовов упрощено:
var myApplication = function () {var name = 'chris'; var age = '34'; var status = 'single'; function createemember () {// [...]} function getMemberDetails () {// [...]} return {create: createMempe, get: getMemberDetails}} (); // теперь напишите это как myApplication.get () и myApplication.create ().Я называю это «шаблоном раскрывающего модуля».
Настраивается
После того, как я опубликовал код JavaScript, который я написал в этот мир, кто -то хотел изменить его, обычно люди хотели выполнить задачи, которые он не мог выполнить себя, но обычно программа, которую я написал, не была достаточно гибкой и не предоставляла пользовательские функции. Решение состоит в том, чтобы добавить объект элемента конфигурации в ваш сценарий. Однажды я написал статью, которая введет объекты элемента конфигурации JavaScript. Вот ключевые моменты:
---- В ваш сценарий добавьте объект с именем конфигурации.
---- Этот объект хранит все, что людям часто нужно менять при использовании этого сценария:
** CSS ID и имя класса;
** Имя кнопки, этикетка слова и т. Д.;
** Значения, такие как «количество изображений, отображаемых на страницу» и «размер отображаемых изображений»;
** Местоположение, местоположение и настройки языка.
--- вернуть этот объект пользователю как общее свойство, чтобы пользователь мог изменить и перезаписать его.
Обычно это то, что вам нужно сделать на последнем шаге в процессе программирования. Я сосредоточил их в одном примере: «Пять вещей, которые нужно сделать со сценарием, прежде чем передать его следующему разработчику».
На самом деле, вы также хотите, чтобы ваш код использовался очень хорошим образом, и внесли некоторые изменения в соответствии с их соответствующими потребностями. Если вы реализуете эту функцию, вы получите менее запутанные электронные письма от людей, которые жалуются на ваш сценарий, который скажет вам, что кто -то изменил ваш сценарий, и это очень полезно.
Взаимодействовать с фоном
Одна из важных вещей, которые я узнал за столь многих лет опыта программирования, заключается в том, что JavaScript является отличным языком для разработки взаимодействия интерфейса, но если он используется для обработки чисел или источников данных доступа, это немного неудовлетворительно.
Первоначально я выучил JavaScript, чтобы заменить Perl, потому что я ненавижу копировать код в папку CGI-бин, чтобы сделать Perl. Позже я понял, что я должен использовать бэкэндский рабочий язык для обработки основных данных, и я не могу позволить JavaScript делать все. Что еще более важно, нам нужно рассмотреть характеристики безопасности и языковых характеристик.
Если я доступ к веб-сервису, я могу получить данные в формате JSON-P. В клиентском браузере я делаю различное преобразование данных, но когда у меня есть сервер, у меня есть больше способов преобразовать данные. Я могу генерировать данные формата JSON или HTML на стороне сервера и вернуть их клиенту, а также данные кэша и т. Д. Если вы понимаете и подготовьте их заранее, вы будете делать долгосрочные прибыли и сохранить много головных болей. Написание программ, подходящих для различных браузеров, является пустой тратой времени, используйте Toolkit!
Когда я впервые запустил веб -разработку, я долго пытался в течение долгого времени изо всех сил пытаться использовать Document.all или Document.layers при доступе к странице. Я выбрал Document.layers, потому что мне нравится идея, что любой слой является его собственным документом (и я написал слишком много документов. Запись для генерации элементов). Паттерн слоя в конечном итоге потерпел неудачу, поэтому я начал использовать документ. Все. Я был очень счастлив, когда Netscape 6 объявил, что он поддерживает только модели W3C DOM, но на самом деле пользователи не заботились об этом. Пользователи просто видят, что такие браузеры не могут отображать вещи, которые большинство браузеров могут отображать нормально - это проблема с нашей кодировкой. Мы написали близорукий код, который можно запускать только в текущей среде, но, к сожалению, наша операционная среда постоянно меняется.
Я трачу слишком много времени, занимаясь совместимостью с различными браузерами и различными версиями. Быть хорошим в решении этой проблемы дает мне хорошую возможность работы. Но теперь нам не нужно терпеть эту боль.
Некоторые наборы инструментов, такие как Yui, Jquery и Dojo, могут помочь нам решить эту проблему. Они решают различные проблемы браузера, абстрагируя различные реализации интерфейса, такие как несовместимость версий, недостатки дизайна и т. Д., Которые спасают нас от нашей боли. Если вы не хотите проверить определенный бета -браузер, не добавляйте код в свою собственную программу, чтобы исправить дефекты браузера, потому что вы, вероятно, забудете удалить свой код, когда браузер изменил эту проблему.
С другой стороны, полагаться полностью на наборы инструментов также является близоруким поведением. Наборы инструментов могут помочь вам быстро развиваться, но если у вас нет глубокого понимания JavaScript, вы также сделаете что -то не так.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.