Лондон, Шордич
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
, чтобы манипулировать самим документом или получать в дочерних элементах этого документа, которые являются различными элементами веб-страницы.