VPF::Google Code Playground- инструмент для совместного

12345c

Дата 18.2.2010, 20:17 (ссылка)

(голосов:2)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 6
Всего: 101

Обнаружилось, что разработка Google Code Playground, сделанная ими "для себя", для своих скриптов, одновременно подходит для тестирования и обмена кодами Javascript на форуме. (Инструмент предназначен для демонстрации и онлайновой отладки примеров Гугл-кода в браузере. )

Для этого у инструмента есть 3 решающих свойства:

1. Окно для изменения кода Javascript "на лету". Просто стираем ненужное и пишем своё в правом верхнем фрейме.
2. Фрейм для тестирования в том же окне. Кнопка "Run code" справа и показ в "песочнице" в нижнем фрейме (iframe).
3. Кнопки "Сохранить код" ("V"--"Save" справа вверху), "Экспорт" (там же) - дают ссылку, которой затем можно поделиться на форуме как результатом. Если нужно писать HTML и стили - есть кнопка "Edit HTML". Если нужно подставить сторонний код (ту же библиотеку) - пишем в HTML <script src="http://..."></script>.

Недостатки:
Нед.1. Оболочка не понимает кириллицу ни в JS, ни в body, несмотря на то, что в коде заявлено по умолчанию <meta http-equiv="content-type" content="text/html; charset=utf-8"/> .
Нед.2. Оболочка никак не сообщает об ошибке, а просто повторяет запуск ранее сохранённого кода. Создаётся впечатление, что ничего не изменилось. Поэтому при отладке надо (пока это не исправили, но уже год, как это не исправили) быть очень внимательным, убедиться, что код воспринялся (например, ставить специально новый видимый символ). Особенно трудно иметь в виду, что любая кириллица - это тоже ошибка. Есть временный менее удобный выход - запускать по "Export", и если в адресной строке нет длинного параметра - была ошибка.
Нед.3. В разных браузерах - разная детальность поддержки интерфейса (сравните Оперу и FF3.6). Лучше, конечно, использовать самые поддерживаемые разработчиками браузеры FF3.5+ и Chrome, чтобы не упустить что-либо полезное в интерфейсе. (Но Firebug Lite, похоже, хуже действует в FF.)
Нед.4. "The Playground no longer supports Internet Explorer.  Please install the Chrome Frame plugin to use the Playground." (Playground не поддерживает IE.)

Например, здесь на месте некоторого кода без входа в аккаунт Google был сохранён простой alert('dfgrt').
http://savedbythegoog.appspot.com/?id=fb81...6cc9980b923d398
Неизвестно, насколько долго файл будет храниться - посмотрим. Записан 12 февраля 2010.

Про сохранение: оно работает, если нет ошибок в коде или недопустимого кода. Сохранение потребует аккаунта и сохранит в специально созданную для Вас папку "Saved Code" в начале списка гугловских примеров. Чтобы код стал общедоступным, а также, чтобы его сохранить без необходимости вхождения в аккаунт, надо нажать "V"--"Export" справа вверху.

Продолжим перечисление.
4. Наличие библиотек в примерах:
    * jQuery
    * jQueryUI
    * MooTools
    * Dojo
    * Prototype Scriptaculous

Запускать код в песочнице для ready и onload надо с учётом наличия оболочки (класса, точнее, хеша) google. Например, вот как удалось вызвать загрузку чего-либо по onload в разделе jQuery ( стёрто всё, что было в окне "Edit code", и написано):

Код

google.load("jquery", "1");
google.setOnLoadCallback(
function(){
  alert(1)
});

Техника описана здесь: http://code.google.com/intl/ru-RU/apis/ajaxlibs/
Это пишется вместо простого $(function(){alert(1)}); сохранилось в http://savedbythegoog.appspot.com/?id=91ea...1bf944633881a50 .

Пробуем использовать стороннюю библиотеку с другого сайта без оболочки google . Нажимаем "Edit HTML" и видим весь HTML для песочницы.

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Primer raboty s HTML i jQuery</title>
    <style>
      .under{text-decoration: underline;}
    </style>
    <script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
    <script type="text/javascript">
      $(function(){
        a = $('body').html();
        $('body  div').html('...567');
        alert([a, $('body').html()]);
        $('body div').html('<b>Primer</b>');
      });
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div class="under" id="content">345...</div>
  </body>
</html>

Кириллицу использовать по-прежнему ни в какую не получается, сменить кодовую страницу на windows-1251 - тоже не помогает. Но возможно полноценно пользоваться библиотекой, скриптами и стилями. Очевидно, без затруднений можно будет пользоваться внешними файлами стилей и изображениями.
Пример сохранен в http://savedbythegoog.appspot.com/?id=f2b5...128c1665785bae8 .

Из нерешающих, но важных достоинств там есть:

5. Режим отладки (breakpoints), добавлено в апреле 2009.
6. Firebug Lite в режиме отладки.
7. Код пишется с подсветкой и отступами; отступы чувствуют скобки (но не завершающие теги); если выделена группа строк, нажатие Tab нормализует отступы, комментарии не удаляются и всё цивилизованно. Само собой, есть нумерация строк. Выделение текста мышью для копирования беспроблемно - не захватывает лишнего. Поэтому коды примеров для форумов и общения писать удобнее там, чем в самих форумах, если под рукой нет своего редактора.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »