Как сделать свою библиотеку js
Обновлено: 04.07.2024
Наверное каждый когда-либо писал свою библиотеку всяких нужных и не очень функций. Я изучаю js, поэтому тоже вот потихоньку пишу всякие плюшки и чета их стало много. Решил оформить все в виде библиотеки, чтобы не захламлять глобальное пространство. Выглядит это так:
Однако теперь столкнулся с проблемой захламления пространства самой библиотеки.
Ну к примеру написал я некий модуль, который делает ajax запросы. У него есть настройки по дефолту, функция установки настроек, непосредственно функция отправки запросов и т.д. То есть модуль состоит из нескольких функций:
Проблема в том, что в составе модуля не все функции должны быть расшарены наружу. Например объект $G.setting не должен быть доступен для прямой записи в него. Значит что? значит нужно
Все, наружу эта переменная не доступна, но она теперь захламляет пространство внутри библиотеки.
Короче я уже не знаю, как лучше оформить свою библиотеку, чтобы и имена переменных были короткие, и чтобы потом не было конфликтов внутри.
При первоначальном планировании архитектуры Angular вы можете обнаружить, что один из общих ресурсов должен использоваться несколькими приложениями. Вы хотите разместить его, например, в npm или, может быть, во внутреннем npm, который может использовать ваша компания. Таким образом, несколько приложений могут воспользоваться этим ресурсом. Звучит хорошо? Да, звучит здорово.
Создание пользовательской библиотеки
Для начала вам нужно создать новый проект с помощью интерфейса командной строки.
Изучите курс и узнайте, как создать веб-приложение с нуля на Angular и Laravel
Сейчас у нас все должно быть хорошо. Однако теперь нам нужно использовать команду, которую CLI предоставляет в Angular 6 или выше, а именно ng generate. Эта библиотека ng generate предназначена для создания пользовательской общей библиотеки. Затем, после присвоения библиотеке имени она будет добавлена в отдельный проект, который называется рабочей областью.
Когда вы выполняете ng new, вы получаете рабочее пространство с одним проектом, которым является ваш веб-проект. ng generate добавит вторую версию в рабочую область, чтобы мы действительно могли протестировать библиотеку в приложении Angular без публикации в npm или любом другом ресурсе. Теперь она изменяет файл tsconfig, и он будет обновлен, чтобы проект Angular, отдельный проект в рабочей области, понимал, как добраться до библиотеки, общей библиотеки, которую мы собираемся создать.
Затем вы можете собрать свою библиотеку, используя команду ng build, а затем дать ей имя проекта, например:
Вы можете использовать ее и протестировать непосредственно в другом проекте Angular, который находится в вашей рабочей области. Таким образом, это действительно легко сделать без необходимости публиковать ее где-нибудь в npm. После этого мы хотели бы опубликовать ее в npm, как только будем готовы к работе. Мы протестировали ее, и все выглядит хорошо. Кто угодно может получить к ней доступ, если это не внутренний npm, который может быть в вашей компании. Мы хотим использовать библиотеку в наших приложениях. Вот ссылка, если вы новичок в участии в npm.
Нам нужно сделать это, чтобы зайти в папку dist, там будет файл package.json. Он будет использоваться для публикации на npm. Нам нужно только ввести следующую команду:
Итак, должны ли мы увидеть, чем отличается наше решение? Поехали.
Итак, во-первых, вы заметите, что у нас есть папка projects. У нас также есть обновленный tsconfig, как вы можете видеть на следующем изображении:
Были добавлены пути к тому месту, где в конечном итоге мы собираемся создать папку dist после того, как выпоним сборку. И поэтому вам нужно сначала выполнить сборку, прежде чем вы сможете это сделать, потому что TypeScript на самом деле будет искать это, чтобы иметь возможность заставить все работать.
Теперь еще одна важная вещь, которая была сделана — это файл angular.json, в котором есть новый проект:
Изучите курс и узнайте, как создать веб-приложение с нуля на Angular и Laravel
Итак, у нас есть вторичный проект прямо здесь, это наша braga-lib, и вы увидеть путь к корню проекта. Теперь все, что нужно для сборки и тестирования, включено. Итак, это основные вещи, которые изменились. Теперь мы можем внести изменения в нашу библиотеку. Итак, если мы зайдем в проект, мы увидим здесь обычные файлы и папку src, а затем добавляется библиотека, как вы можете видеть:
Использование пользовательской библиотеки
Как видите, теперь у нас есть общая библиотека внутри проекта Angular. С минимальными усилиями, буквально за несколько минут, вы можете запустить общую библиотеку. Последним шагом будет фактическая публикация в npm.
Заключение
Это очень полезно, когда вы вместе со своей командой планируете будущие внедрения. Теперь вы можете сказать: эти конкретные виджеты будут использоваться во многих наших приложениях, поэтому давайте просто спланируем создание библиотеки, а не будем размещать их в папке приложения, копируя и вставляя каждый раз!
Автор: André Braga
Источник: //itnext.io
Редакция: Команда webformyself.
Изучите курс и узнайте, как создать веб-приложение с нуля на Angular и Laravel
во-первых, один нюанс. Основной скрипт Не запускается на веб-странице. Я буду управлять .JS файл в Windows с помощью сервера сценариев Windows.
проблема: Я хотел бы создать "библиотеку" javascript, содержащую ряд объектов, каждый из которых имеет ряд функций. Я ожидаю, что эта библиотека со временем станет довольно большой и хотела бы сохранить ее в отдельном файле javascript (назовем его библиотека.js). Я хотел бы получить доступ к объекты из библиотека.js из другого скрипта (назовем этот пользователей.js).
по сути, я ищу что-то похожее на парадигму C/C++ "include".
есть ли в любом случае реализовать это в javascript? (Помните, что это не веб -)
эта страница прямо здесь - это самое близкое, что я смог найти. О нем говорят .WSF файлы, которые позволяют объединить несколько сценариев (которые могут быть написаны на разных языках) в одном файле.
для вашего вопроса это должно быть что-то вроде:
пользователей.wsf
могут быть лучшие способы, но я не эксперт WSH.
Я знаю, что это старый вопрос, и на него ответили и приняли.
Я знаю .WSF-файлов и как они работают; Они служат цели.
однако я также нашел удобным сделать " включение "из чистого.JS-файл, который работает в WSH. Вот мое решение.
С этой функцией утилиты, определенной, я могу сделать это из модуля javascript:
. и тогда я могу призвать любого из функции или пощекочи любую из переменных, определенных в этих модулях.
вы можете достичь своей цели с помощью сервера сценариев Windows, вместо определенного .js or .файл vbs. Более подробную информацию можно найти в сайт MSDN.
сценарий Windows (*.wsf) файл представляет собой текст документ, содержащий расширяемый разметки Код языка разметки (XML). Она включает несколько функций, которые предлагают вам повышенная гибкость сценариев. Поскольку файлы сценариев Windows не двигатель-специфический, они могут содержать скрипт из любого скрипта Windows совместимый обработчик сценариев. Они действуют как контейнер.
вы бы назвали файл, используя тот же синтаксис, что и a .js and .файл vbs:
Как правило, когда нужно выполнить какие-либо действия с DOM, разработчики используют jQuery. Однако практически любую манипуляцию с DOM можно сделать и на чистом JavaScript с помощью его DOM API.
Рассмотрим этот API более подробно:
В конце вы напишете свою простенькую DOM-библиотеку, которую можно будет использовать в любом проекте.
DOM-запросы
В материале представлены основы JavaScript DOM API. Все подробности и детали доступны на Mozilla Developer Network.
DOM-запросы осуществляются с помощью метода .querySelector() , который в качестве аргумента принимает произвольный СSS-селектор.
Он вернёт первый подходящий элемент. Можно и наоборот — проверить, соответствует ли элемент селектору:
Если нужно получить все элементы, соответствующие селектору, используйте следующую конструкцию:
Если же вы знаете, на какой родительский элемент нужно сослаться, можете просто проводить поиск среди его дочерних элементов, вместо того чтобы искать по всему коду:
Возникает вопрос: зачем тогда использовать другие, менее удобные методы вроде .getElementsByTagName() ? Есть маленькая проблема — результат вывода .querySelector() не обновляется, и когда мы добавим новый элемент (смотрите раздел 5), он не изменится.
Также querySelectorAll() собирает всё в один список, что делает его не очень эффективным.
Как работать со списками?
Вдобавок ко всему у .querySelectorAll() есть два маленьких нюанса. Вы не можете просто вызывать методы на результаты и ожидать, что они применятся к каждому из них (как вы могли привыкнуть делать это с jQuery). В любом случае нужно будет перебирать все элементы в цикле. Второе — возвращаемый объект является списком элементов, а не массивом. Следовательно, методы массивов не сработают. Конечно, есть методы и для списков, что-то вроде .forEach() , но, увы, они подходят не для всех случаев. Так что лучше преобразовать список в массив:
Поскольку интерфейс элемента ( Element ) унаследован от интерфейса узла ( Node ), следующие свойства тоже присутствуют:
Первые свойства ссылаются на элемент, а последние (за исключением .parentElement ) могут быть списками элементов любого типа. Соответственно, можно проверить и тип элемента:
Добавление классов и атрибутов
Добавить новый класс очень просто:
Добавление свойства для элемента происходит точно так же, как и для любого объекта:
Можно использовать методы .getAttibute() , .setAttribute() и .removeAttribute() . Они сразу же поменяют HTML-атрибуты элемента (в отличие от DOM-свойств), что вызовет браузерную перерисовку (вы сможете увидеть все изменения, изучив элемент с помощью инструментов разработчика в браузере). Такие перерисовки не только требуют больше ресурсов, чем установка DOM-свойств, но и могут привести к непредвиденным ошибкам.
Cube Dev , Удалённо , От 8000 $
Как правило, их используют для элементов, у которых нет соответствующих DOM-свойств, например colspan . Или же если их использование действительно необходимо, например для HTML-свойств при наследовании (смотрите раздел 9).
Добавление CSS-стилей
Добавляют их точно так же, как и другие свойства:
Какие-то определённые свойства можно задавать используя .style , но если вы хотите получить значения после некоторых вычислений, то лучше использовать window.getComputedStyle() . Этот метод получает элемент и возвращает CSSStyleDeclaration, содержащий стили как самого элемента, так и его родителя:
Изменение DOM
Можно перемещать элементы:
Если не хочется перемещать, но нужно вставить копию, используем:
Метод .cloneNode() принимает булевое значение в качестве аргумента, при true также клонируются и дочерние элементы.
Конечно, вы можете создавать новые элементы:
А затем вставлять их как было показано выше. Удалить элемент напрямую не получится, но можно сделать это через родительский элемент:
Можно обратиться и косвенно:
Методы для элементов
У каждого элемента присутствуют такие свойства, как .innerHTML и .textContent , они содержат HTML-код и, соответственно, сам текст. В следующем примере изменяется содержимое элемента:
На самом деле изменение HTML — плохая идея, т. к. теряются все изменения, которые были сделаны ранее, а также перегружаются обработчики событий. Лучше использовать такой способ только полностью отбросив весь HTML и заменив его копией с сервера. Вот так:
Однако это повлечёт за собой две перерисовки в браузере, в то время как .innerHTML приведёт только к одной. Обойти это можно, если сначала добавить всё в DocumentFragment, а затем добавить нужный вам фрагмент:
Обработчики событий
Один из самых простых обработчиков:
Но, как правило, его следует избегать. Здесь .onclick — свойство элемента, и по идее вы можете его изменить, но вы не сможете добавлять другие обработчики используя ещё одну функцию, ссылающуюся на старую.
Для добавления обработчиков лучше использовать .addEventListener() . Он принимает три аргумента: тип события, функцию, которая будет вызываться всякий раз при срабатывании, и объект конфигурации (к нему мы вернёмся позже).
Свойство event.target обращается к элементу, за которым закреплено событие.
А так вы сможете получить доступ ко всем свойствам:
Предотвращение действий по умолчанию
Для этого используется метод .preventDefault() , который блокирует стандартные действия. Например, он заблокирует отправку формы, если авторизация на клиентской стороне не была успешной:
Метод .stopPropagation() поможет, если у вас есть определённый обработчик события, закреплённый за дочерним элементом, и второй обработчик того же события, закреплённый за родителем.
Как говорилось ранее, метод .addEventListener() принимает третий необязательный аргумент в виде объекта с конфигурацией. Этот объект должен содержать любые из следующих булевых свойств (по умолчанию все в значении false ):
Наиболее распространённым свойством является .capture , и оно настолько распространено, что для этого существует краткий способ записи: вместо того чтобы передавать его в объекте конфигурации, просто укажите его значение здесь:
Обработчики удаляются с помощью метода .removeEventListener() , принимающего два аргумента: тип события и ссылку на обработчик для удаления. Например свойство once можно реализовать так:
Наследование
Допустим, у вас есть элемент и вы хотите добавить обработчик событий для всех его дочерних элементов. Тогда бы вам пришлось прогнать их в цикле, используя метод myForm.querySelectorAll('input') , как было показано выше. Однако вы можете просто добавить элементы в форму и проверить их содержимое с помощью event.target .
И ещё один плюс данного метода заключается в том, что к новым дочерним элементам обработчик будет привязываться автоматически.
Анимация
Проще всего добавить анимацию используя CSS со свойством transition . Но для большей гибкости (например для игры) лучше подходит JavaScript.
Вызывать метод window.setTimeout() , пока анимация не закончится, — не лучшая идея, так как ваше приложение может зависнуть, особенно на мобильных устройствах. Лучше использовать window.requestAnimationFrame() для сохранения всех изменений до следующей перерисовки. Он принимает функцию в качестве аргумента, которая в свою очередь получает метку времени:
Таким способом достигается очень плавная анимация. В своей статье Марк Браун рассуждает на данную тему.
Пишем свою библиотеку
Тот факт, что в DOM для выполнения каких-либо операций с элементами всё время приходится перебирать их, может показаться весьма утомительным по сравнению с синтаксисом jQuery $('.foo').css() . Но почему бы не написать несколько своих методов, облегчающую данную задачу?
Теперь у вас есть своя маленькая библиотека, в которой находится всё, что вам нужно.
Здесь находится ещё много таких помощников.
Пример использования
Заключение
Теперь вы знаете, что для реализации простого модального окна или навигационного меню не обязательно прибегать к помощи сторонних фреймворков. Ведь в DOM API это уже всё есть, но, конечно, у данной технологии есть и свои минусы. Например всегда приходится вручную обрабатывать списки элементов, в то время как в jQuery это происходит по щелчку пальцев.
Читайте также: