JSBin — это HTML онлайн-редактор, предназначенный для помощи тем, кто собирается изучать front-end-разработку или уже изучает её.
Учебник Example также запустил HTML онлайн-редактор, доступный по адресу:https://c.example.com/front-end/61
Ниже мы рассмотрим руководство пользователя для этого инструмента:
Краткое руководство
После открытия страницы вы увидите следующий экран. Адресная строка — этоhttp://jsbin.com/вот именно так, а ниже находятся панели редакторов HTML и JavaScript, куда можно вводить содержимое:
Как только вы введёте любой символ в любой панели редактора, вы сразу заметите, что "адресная строка" меняется. Как показано ниже, область 1 — это вашBin ID, область 2 — этономер версии Bin(По умолчанию он начинается с 1), а область 3 — это текущийрежим отображения, где "edit" обозначает режим "Edit". По умолчанию HTML / CSS / JavaScript, которые вы вводите, сразу отражаются в панели Output справа.
Примечание: вJS BinJS Bin каждая комбинация фронтенд-веб-страницы (HTML + CSS + JavaScript) называется Bin!
Конечно, как только выBinзакончите настраивать его, вы сможете напрямую поделиться URL вашего текущего JS Bin. Очень удобно!
Знакомство с навигационной панелью
Как показано ниже, этоJS Binосновной интерфейс после входа, очень простой; сверху находится только навигационная панель. Далее мы объясним согласно пронумерованному рисунку:
Навигация 1. Главное меню JS Bin
Вы можете в любой момент создать новыйBin, выберите пунктNew.
Если вы зарегистрировались как участник, вы увидите функциюOpen, потому что всеBinBins, которые вы редактировали, автоматически сохраняются, и вы можете в любое время снова открыть ранее написанныеBins.Как показано ниже, если вы больше не хотите видеть определённые Bins, вы также можете отправить их в архив; по умолчанию они здесь не будут видны, и вы сможете восстановить их позже.
Как показано ниже, нажмитеArchive view, чтобы восстановить ранее архивированныеBins
ФункцияAdd descriptionв главном меню просто помогает добавить метатег description в ваш HTML.
ФункцияCreate milestoneв главном меню просто сообщает JS Bin: "Я завершил веху Bin; пожалуйста, зафиксируйте для меня текущую версию." Поэтому после нажатия этой функции "номер ревизии" в URL JS Bin автоматически+1
ФункцияSave as templateв главном меню — взять ваш текущийBinBin и сохранить его как шаблон, чтобы, когда вы позже добавите новыеBinпо умолчанию HTML/CSS/JavaScript будет иметьBinсодержимое, которое вы сейчас установили.
ФункцияCloneв главном меню отличается от предыдущей лишь немного: она не меняет номер ревизии, а вместо этого использует совершенно новыйCreate milestone. Функция имеет лишь небольшое отличие: она не меняет номер ревизии, а скорее совершенно новыйBinID, как показано ниже:
ФункцияDownloadв главном меню беретBinBin и скачивает его; она объединяет HTML/CSS/JavaScript в один HTML-файл.
Панель навигации 2. Add Library (Insert Library)
Эта кнопка позволяет удобно вставлять некоторые распространенные внешние ресурсы в ваш HTML, такие как jQuery, jQuery UI, jQuery Mobile, Bootstrap, YUI, AngularJS, Kendo UI, Backbone, Modernizr и т. д. Это удобный маленький инструмент.
Панель навигации 3. Различные редакторы, консоль и панели предварительного просмотра в реальном времени
Панель редактора HTML
В этой панели редактора есть подсветка синтаксиса. К сожалению, в ней пока нет IntelliSense или автодополнения, но она поддерживаетEmmet ( Zen Coding) метод написания, который действительно мощный! Те, кто не знает Zen Coding, могут обратиться к обучающему видео, которое я записал ранее [Как эффективно использовать расширения VS2012 — использование ZenCoding для быстрого создания HTML-синтаксиса (Web Essentials 2012)], которое демонстрирует, как использовать специальныйZen Codingсинтаксис для быстрого написания HTML-контента!
Кроме того, вы также можете переключаться между различными режимами синтаксиса и в конце нажатьConvert to HTML, чтобы автоматически преобразовать в формат HTML.
Панель редактора CSS
Это очень похоже на редактор HTML, и он также поддерживаетZen Codingсинтаксис! Вы также можете использовать более эффективный синтаксис LESS или Stylus для написания стилей CSS и в конце нажатьConvert to CSS, чтобы автоматически преобразовать в стандартный формат CSS.
Примечание: вы даже можете использовать JS Bin напрямую какLESSилиStylusучебный инструмент!
Панель редактора JavaScript
Это также очень похоже на редакторы HTML/CSS, поддерживает различные синтаксисы, которые помогают эффективно писать JavaScript, а также поддерживает TypeScript!
Панель консоли
Эта панель такая же, как панель Console в инструментах разработчика разных браузеров. Не знаю, зачем они также сделали веб-версию; я считаю, что она не лучше встроенной в браузерах, поэтому я в основном ей не пользуюсь.
Панель вывода
Основное назначение этой панели — выводить результат выполнения итоговой комбинации HTML/CSS/JavaScript. По умолчанию отмечена опцияAuto-run JS, что означает: когда вы печатаете в редакторе JavaScript, веб-страница в панели вывода постоянно обновляется. Иногда эта опция может привести к сбою браузера. Если вы столкнулись с нестабильностью браузера, рекомендуется снять этот флажок. После включения, если вы хотите выполнить изменённый JS, вы должны нажатьRun with JSкнопку, чтобы фактически выполнить новую версию программы JavaScript.
Крайняя справаLive previewстрелка открывает веб-страницу в совершенно новом окне. В этот момент вы заметите, что URL немного отличается: отсутствует частьedit, что также означает, что вы можете поделиться этим URL с другими, позволить им увидеть результат выполнения страницы или напрямую более полно взаимодействовать с интерактивными функциями, заданными на странице, без влияния со стороныJS Binпанели редактора. Как показано в сравнении ниже:
Панель навигации 4. Вход, регистрация, обновление пароля учётной записи участника (без личной информации)
С JS Bin вы можете успешно зарегистрироваться, просто введя Email и пароль, и никакой проверки личности нет. Если вы введёте неправильный аккаунт или пароль, это не важно; просто зарегистрируйте новый! На экране после входа вы можете обновить свой Email и пароль в любое время. Очень открыто!
Панель навигации 5. Файлы справки
Если вы прочитаете все ссылки здесь, вы поймёте, что были обмануты простым внешним видом JS Bin; на самом деле он очень богат функциями!
Панель навигации 6. Поделиться
Когда редактирование вашегоBinBin будет завершено, вы можете поделиться им многими способами. Это меню функции Share предоставляет некоторые возможности:
Заблокировать ревизию #1 от дальнейших изменений означает, что вы хотите зафиксировать текущую версию #1 (то есть ту, что находится в части адресной строки1). Эта функция точно такая же, какCreate milestone в главном меню JS Bin.функцию.
После ввода URL, предоставленного Live & Full Preview, вы получаете веб-страницу без панелей редактора, что меньше отвлекает при экспериментах с определёнными функциями. Однако в правом верхнем углу страницы всё ещё появляется плавающая кнопка «Edit in JS Bin», позволяющая в любой момент войти в панель редактора.
Code View — это экран, где мы редактируем.
Embed не только встраивает гиперссылку, но также в конце загружает файл JavaScript, который напрямую превращает гиперссылку в сложную страницу, как показано ниже:
После вставки этой строки в веб-страницу отображаемый результат будет таким, как показано ниже:
Последняя, Codecast, — это функция «трансляции». Вы можете поделиться URL с другими и попросить их открыть страницу. После этого вы можете продолжать изменять любое содержимое этого Bin, и браузер другого человека будет показывать то же содержимое, что видите вы. Вот почему она называется функцией «трансляции». Она очень подходит для онлайн-обучения или дистанционного обучения!
§ Поделюсь несколькими советами по использованию JS Bin
1. Включение отображения номеров строк
Это недокументированный приём. Просто быстро дважды щёлкните мышью по заголовку панели редактора, чтобы включить отображение номеров строк. Дважды щёлкните ещё раз, чтобы отключить его. Очень удобно.
2. Способ настройки ID дляBincustomizing the ID
Это ещё один недокументированный приём. Большинство людей думают, что JS Bin не позволяет настраивать URL, но на самом деле позволяет. Способ таков:
Пока не обращайте внимания на текущий URL. Просто введите нужный вам настроенныйBin IDпрямо в адресной строке, как показано ниже:
После нажатия Enter автоматически создаётся совершенно новый Bin, и этотBin IDтеперь принадлежит вам! (^_^)
3. УправлениеBinпанелями по умолчанию экрана редактирования
Когда вы хотите перейти на экран редактирования определённого Bin, в зависимости от настроек JS Bin у каждого человека 5 панелей по умолчанию, которые открываются, будут разными. Если вы хотите сегодня поделиться Bin с кем-то и хотите, чтобы у другого человека по умолчанию были открыты только панели HTML и JavaScript, вы можете просто немного изменить URL. Например, следующий URL Bin:
- http://jsbin.com/avegen/1/edit
Мы можем изменить URL на следующий (добавьте Query String в конец URL и разделите их запятыми), а затем отправить этот URL другому человеку. Другой человек откроет панели HTML и JavaScript так, как вы задумали:
- http://jsbin.com/avegen/1/edit ?html,javascript
Имена параметров, соответствующие этим пяти панелям, следующие:
- htmlредактор HTML
- cssредактор CSS
- javascriptредактор JavaScript
- consoleКонсоль
- liveПанель предварительного просмотра
4. Включение подсветки парных скобок JavaScript
Поскольку JS Bin использует пакетCodeMirrorв качестве своего редактора JavaScript (он действительно мощный), то если вы хотите настроить редактор JavaScript, это возможно. Просто обратитесь кдокументации API CodeMirror— и готово. Здесь я расскажу об одной полезной настройке, а именно о включении подсветки парных скобок JavaScript.
Возьмём этот Bin в качестве примера:http://jsbin.com/oyuyev/1/edit
Нам нужно выполнить следующую команду на вкладке Консоль в инструментах разработчика браузера. Откройте встроенные инструменты разработчика браузера (IE8+, Chrome, Firefox, Safari — во всех есть такие инструменты), переключитесь на вкладку Консоль и введите:
jsbin.settings.editor.matchBrackets = <span class="kwrd" style="color: #0000FF;">true</span> ;
Затем нажмите F5 (обновите веб-страницу), переместите курсор к парной фигурной скобке, и вы увидите подсветку:
5. Сброс среды разработки JS Bin
В этой версии JS Bin, если вы выполните функцию главного меню«Сохранить как шаблон», то, к сожалению, вернуться уже не сможете! Это значит, что вы не сможете восстановить встроенный по умолчанию HTML-шаблон сайта. Кроме того, если вы изменили слишком много настроек в редакторе и им больше нельзя нормально пользоваться, вы можете сбросить среду разработки JS Bin. В этот момент можно использовать следующий приём.
Примечание: это тоже недокументированный приём. Я потратил несколько часов на исследования, чтобы разобраться с ним!
Откройте встроенные инструменты разработчика браузера (IE8+, Chrome, Firefox, Safari — во всех есть такие инструменты), переключитесь на вкладку Консоль и введитеdelete jsbin.settings, затем нажмите Enter для выполнения. После успешного выполнения все настройки будут сброшены.
delete jsbin.settings
Однако содержимое шаблонов html / css / javascript также нужно очистить, потому что JS Bin хранит эти шаблоны в localStorage браузера (это механизм хранения в HTML5). В этот момент вам также нужно ввестиlocalStorage.clear()чтобы полностью очистить оставшиеся данные.
localStorage.clear()
Экран после выполнения показан ниже. После выполнения нажмите F5 (обновить), чтобы вернуться к исходным значениям по умолчанию!
6. Выводить только содержимое JavaScript (чтобы другой Bin мог загрузить его через AJAX)
Мы берёмhttp://jsbin.com/ json-test /1/ editв качестве примера. Я ввёлчистый JSON JavaScript. Здесь также можно увидеть несколькоJSHintпредупреждающих сообщений, но пока нам не нужно о них беспокоиться.
{
"author" : "Will" ,
"bookname" : "ASP.NET MVC 4开发实战"
}
Примечание: строки в JSON должны быть заключены в двойные кавычки!
На этом этапе мы создаём ещё один новый Bin и добавляем библиотеку jQueryBin(Примечание: поскольку HTML-содержимое было изменено, ему сразу будет присвоен
ID, создавая совершенно новый URL)/editНа этом этапе мы немного изменяем URL, который только что получили, меняя.jsна
- http://jsbin.com/ json-test /1 .js
чтобы получить только часть JavaScript, как показано ниже:
$.ajax({
url: 'http://jsbin.com/json-test/1.js' ,
dataType: 'json' ,
success: function (data) {
alert(data.author + ' - ' + data.bookname);
}
});
Затем введите следующий код jQuery, чтобы протестировать функциональность AJAX в jQuery:
