Предыдущие статьи представили некоторые базовые знания о серии отладки JS. На этот раз искаженные братья -кодексы принесли вам точки останова JS и методы динамической отладки. Друзья, которые это нужно, могут ссылаться на это.
Упражнения после класса я ушел вчера. Проанализируйте, как выполняется функция VotePost в соответствии с рекомендациями.
На самом деле, мы видели исходный код. Просто прочитайте исходный код, и вы можете знать, как он реализован.
Функция wotepost (n, t, i) {i || (i =! 1); var r = {blogApp: currentBlogApp, postid: n, woteType: t, isabandoned: i}; $ ("#digg_tips"). CSS ("Color", "Red"). Html ("Commit ..."); $ .ajax ({url: "/mvc/vote/voteblogpost.aspx", type: "post", datatype: "json", contentype: "application/json; charset = utf-8", данные: json.string (r), успех: функция (n) {if (n. vareshess) {varesow "_ccount"); (n.status == 500? }Это почти так.
PS: я использую код форматированного типа «возвышенное текст», который немного отличается от результата после форматирования на хромированной консоли.
Вы также можете попробовать этот онлайн -инструмент форматирования, эффект похож: онлайн JavaScript Beautiful
Просто прочитав код, вы можете примерно знать, что эта функция имеет 3 параметра. Первый - Postid, который является идентификатором статьи, а вторая - рекомендация (DIGG) или оппозиция (Bury).
Но третий не использовался, и значение по умолчанию неверно
Глядя вниз, он отображает строку «Отправить ...» на #digg_tips, а затем передает данные на фон через Ajax.
После возвращения данных, если N.IsSuccess верно, он будет +1 на соответствующем идентификаторе подсчета подобного (#DIGG_COUNT) или возражения (#Bury_Count).
Однако, если стоимость Исабандон является верной, подсчет -1.
Затем мы можем догадаться, что третий параметр используется для отозвания рекомендации или возражений. Проще говоря, я нажал на рекомендацию, но я не хочу рекомендовать ее сейчас. Я могу передать третий параметр True, чтобы достичь эффекта отмены рекомендации.
Давайте проверим это позже.
Затем информация N.Message, возвращаемая сервером, отображается по адресу #DIGG_TIPS.
Если в AJAX возникает ошибка, это 500. Это заставит «извините! Произошла ошибка! Пожалуйста, обратная связь по адресу [email protected]». Другие статусы напрямую приводят сервер для возвращенного сообщения об ошибке.
Это общий процесс, потому что эта функция проста, ее можно увидеть с первого взгляда.
Некоторые новые друзья, возможно, спросили, как узнать, какая ценность CurrentBlogapp, n, t, я?
Затем давайте перейдем к следующему шагу и динамической отладке. Динамическая отладка является очень полезным методом для составленных проектов.
Сначала найдите исходный код VotePost (я сказал это вчера и не понимаю его очень много, затем вернитесь и посмотрите в первую очередь.)
Так легко, мы обнаружили исходный код.
Далее мы нажимаем на номер 92 и выполняем операцию точки останова.
Почему не точки останова в строке 91?
Поскольку строка 91 является частью объявления функции, мы не можем установить точку останова, мы можем установить точку останова в коде для выполнения функцией.
Видя, что количество линии строки 91 стало синим, что указывает на то, что в этом месте была точка останова. В то же время мы можем увидеть сбитые точки останова в столбце точек останова справа.
Столбец точек останова управляет всеми точками останова, которые могут быть легко перенаправлены в соответствующую позицию точки останова и будут использоваться в будущем.
Теперь, когда мы закончили настройку точки останова, мы нажмите на рекомендацию. Полем (Хотя я чувствую, что изменяю рекомендациям, я действительно так не думал. Я только что нашел кнопку для практики.)
Когда вы нажимаете кнопку рекомендации, произошло что -то волшебное. Вместо того, чтобы запустить функцию рекомендации, вы подскочили к точке останова, которую мы только что опустили на панели источников консоли.
Теперь вы можете не только увидеть текущую переменную в столбце переменных сфера справа, но и перемещать мышь непосредственно на любую переменную, чтобы просмотреть значение переменной.
В столбце переменных применения отображается текущая область применения и его родительскую область, а также закрытие.
Разве это не очень удобно? Полем (Переменные сфера очень помогли мне, когда я впервые изучал закрытие.)
Давайте перейдем к следующему шагу и нажмите F10 3 раза, чтобы увидеть что -то подобное.
Каждый раз, когда мы нажимаем на F10, мы будем выполнять оператор. Нажав 3 раза только сейчас, мы выполним $ ("#Digg_tips"). CSS ("Color", "Red"). HTML ("отправить ...");
Таким образом, мы можем увидеть #digg_tips, отображающие слова в представлении на странице.
Но когда мы снова нажимаем на F10, мы обнаружили, что он продолжал выполнять всю дорогу, не вводя функцию обратного вызова в Ajax.
Это запутанный вопрос, и я хочу сосредоточиться на нем.
Для подобных функций обратного вызова, особенно асинхронного, нам нужно следующую точку останова в функции обратного вызова.
Таким образом, мы можем просто установить точку останова в строке 96. Теперь мы нажимаем на рекомендацию и все еще останавливаемся в строке 92. Мы можем просто нажать F8 и сломать ее на функции обратного вызова Ajax.
Теперь мы можем отлаживать данные обратного вызова, и мы также можем обнаружить, что есть дополнительная штука с переменными объема справа, что является закрытием.
Если вы не можете понять это сейчас, просто пройдите через это. Эта вещь должна быть введена за большое количество времени, и это не может быть объяснено всего несколькими словами. Во всяком случае, консоль очень мощная.
Видя закрытие, мы также видим данные о возврате n Ajax. Очевидно, что мое собственность Issuccess является ложным и не удалось, потому что оно возвращает сообщение «не может рекомендовать ваш собственный контент».
Разве это не очень интересно? Динамическая отладка позволяет легко найти ошибки?
Далее, давайте экспериментируем с третьим параметром.
Мы вводим VotePost (CB_Entryid, 'Digg', True); и нажмите Enter.
Он также остановился в точке останова строки 92, поэтому он не будет отлаживать в этом и напрямую введет функцию обратного вызова Ajax от F8.
Здесь мы четко видим, что когда третий параметр правда, рекомендация действительно отменена. В то же время вы можете видеть, что номер рекомендации действительно -1, даже если он обновлен.
На этот раз мы использовали два ярлыка клавиши F10 и F8. Мы представим их подробно завтра. Сегодня мы сначала изучим базовую отладку.
Упражнения после класса: (Улучшение сложности)
1. Проверьте кнопку отправки комментариев для комментариев ниже и найдите его событие. (jquery bound)
2. Динамически отлаживает процесс выполнения этого события комментариев.
Если вы не знаете это упражнение, рекомендуется прочитать «краткий разговор о вопросах позиционирования исходного кода события JQUERY» для подробного анализа.
Эта статья поступает из: искаженная статья блога Blog Garden Blogger. http://www.cnblogs.com/52cik/