Лондон, Шордич

7-я неделя в Makers была повторным посещением Javascript, и я очень ценю это. На данный момент я все еще могу сказать, что мне удобнее использовать Ruby, чем Javascript, и я надеюсь улучшить баланс между ними. По сравнению с неделей 5, которая была первой неделей знакомства с Javascript, эта неделя была более тяжелой, поскольку нас попросили разобраться с некоторыми базовыми языковыми концепциями, которые не очень хорошо понимаются в Javascript (замыкания/шаблон модуля/Dom, и это лишь некоторые из них). ).

Итак, цели на эту неделю.

  • Создайте интерфейсное приложение на Javascript (без использования jQuery, сначала перейдите на NPM)
  • Умение работать с Javascript (использование шаблона модуля для инкапсуляции кода, больше практики в синтаксисе JavaScript и т. д.)

Подход, который я считаю особенно полезным на этой неделе, — это сравнение. Сравните Javascript с Ruby, сравните DOM + Javascript с jQuery.

Например, при изучении шаблона модуля и, поскольку в javascript модуля нет (я знаю, что в ES6 есть класс, но я еще не там…), полезно сравнить шаблон модуля JS с модулем Ruby:

  • Они оба создают часть повторно используемого кода.
  • Они оба представляют интерфейс, но скрывают его состояние и реализацию.

Очевидно, что есть и явная разница. Например, в шаблоне модуля вы также увидите:

  • немедленно вызываемые функциональные выражения
  • закрытия

Но мне было легче перейти к различиям, когда вы поняли общее место между концепциями.

Другой пример — NPM против Gem. NPM — это то же самое, что и Bundler, а пакеты Node функционируют так же, как Gems в Ruby.

Я также ценю трудный способ не использовать jQuery на этой неделе (вместо этого используя DOM+ Javascript). Это определенно помогло разоблачить jQuery и понять лежащий в его основе поток. Ясно, что jQuery — отличный инструмент, но я полагаю, что вы не хотели бы слишком полагаться на него, по крайней мере, не зная, что это просто еще один слой на Javascript.

В течение этой недели неизбежно возникали некоторые препятствия, о которых мне еще нужно позаботиться. Например, один из них подъемный.

Я понимаю концепцию подъема, однако когда дело доходит до практики, возникает некоторая путаница. Внутри шаблона модуля я изначально использовал (var) FunctionA= function () {},, однако, когда я попытался получить к нему доступ извне, я получил предупреждение об ошибке «FunctionA не является функцией». Затем я должен изменить его на function FunctionA() {}.

Исследуя это, я получил гипотезу о том, что function FunctionA() {} "поднимается" на вершину текущей области (мой шаблон модуля) перед выполнением. Однако для последнего function FunctionA() {} объявление переменной поднимается, но не присваивание, что вызовет ошибку, если я вызову ее перед повторным назначением. Я проверю свою теорию на практике на следующей неделе.

Итак, на этой неделе все. Увидимся на следующей неделе:)

==========Главные события недели==============

А. Минимум HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <!-- page content -->
  </body>
</html>

Б. НПМ

NPM — это менеджер пакетов на основе узлов, который поможет вам организовать и контролировать версии пакетов узлов на вашем компьютере и в ваших проектах. Npm — это аналог Bundler из мира Ruby. Пакеты Node работают аналогично Ruby’s Gems.

Пакет можно установить глобально (т. е. сделать команду доступной для вас в командной строке), локально внутри проекта и локально в среде разработки.

Если вы еще этого не сделали, установите Node с помощью brew install node и следуйте дополнительным инструкциям. Самый простой способ, очень похожий на создание Gemfile, — использовать файл package.json, созданный с помощью npm init.

Вот что мы получим, если запустим npm init в папке с именем testProject и будем следовать инструкциям на экране, каждый раз нажимая Enter:

package.json

{
  "name": "testProject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Чтобы установить пакет в свой проект, например, если вы хотите использовать пакет с именем hapi в своем приложении, вы должны использовать npm install hapi --save. Опция --save указывает npm установить пакет в проект внутри папки с именем node_modules, а также обновить ваш package.json.

Если вы хотите установить пакет, который нужен всем, кто разрабатывает ваше приложение, но не нужен для запуска приложения, у вас есть другой вариант. Например, если вы хотите использовать тестовую среду «jasmine-node», вы должны ввести npm install jasmine-node --save-dev.

С. ДОМ

Объектная модель документа (DOM) — это программный интерфейс для документов HTML и XML. Он представляет страницу, чтобы программы могли изменять структуру, стиль и содержимое документа. DOM представляет документ в виде узлов и объектов.

Веб-страница — это документ. Этот документ может отображаться либо в окне браузера, либо в виде исходного HTML-кода. Но в обоих случаях это один и тот же документ. Объектная модель документа (DOM) представляет тот же документ, поэтому с ним можно манипулировать. DOM — это объектно-ориентированное представление веб-страницы, которое можно изменить с помощью языка сценариев, такого как JavaScript.

API = DOM + JavaScript

Модель DOM была разработана так, чтобы быть независимой от какого-либо конкретного языка программирования, что делает структурное представление документа доступным из единого согласованного API. Хотя в этой справочной документации мы фокусируемся исключительно на JavaScript, реализации DOM можно построить для любого языка, как демонстрирует этот пример Python.

Когда вы создаете сценарий — будь то встроенный в элемент <script> или включенный в веб-страницу с помощью инструкции по загрузке сценария — вы можете сразу же начать использовать API для элементов document или window, чтобы манипулировать самим документом или получать в дочерних элементах этого документа, которые являются различными элементами веб-страницы.