Как назвать файл js

Обновлено: 30.06.2024

Введение в соглашения об именах JavaScript на примере, который дает вам здравый смысл, когда дело доходит до именования переменных, функций, классов или компонентов в JavaScript. Никто не соблюдает эти правила соглашения об именах, однако они широко приняты в качестве стандарта в сообществе JS.

Соглашения об именах JavaScript: переменные

Переменные JavaScript чувствительны к регистру. Поэтому переменные JavaScript со строчными и прописными символами отличаются:

Переменная JavaScript должна быть описательной. Нет необходимости добавлять к переменной комментарий для дополнительной документации:

Чаще всего вы найдете переменные JavaScript, объявленные с именем переменной в верблюжьем регистре с начальным символом нижнего регистра:

Есть исключения для констант JavaScript, приватов и классов/компонентов, которые мы рассмотрим позже. Однако, как правило, переменная JavaScript — строка, логическое значение или число, а также объект, массив или функция — объявляется с именем переменной в стиле camelCase.

Краткий обзор различных стилей регистра:

  • camelCase (используется в JS)
  • PascalCase (используется в JS)
  • snake_case
  • чехол для кебаба

Соглашения об именах JavaScript: логические значения

Префикс типа is, are или has помогает каждому разработчику JavaScript отличить логическое значение от другой переменной, просто взглянув на нее:

В отличие от строк и целых чисел, вы можете рассматривать его как еще одно мягкое правило для логического соглашения об именах JavaScript, помимо того, что оно написано в верблюжьем регистре.

Соглашения об именах JavaScript: функция

Функции JavaScript также написаны на верблюжьем регистре. Кроме того, рекомендуется указывать что делает функция, добавляя к имени функции глагол в качестве префикса.

Этот глагол в качестве префикса может быть любым (например, get, fetch, push, apply, вычислить, вычислить, опубликовать). Это еще одно мягкое правило, которое следует учитывать при использовании более информативных переменных JavaScript.

Соглашения об именах JavaScript: класс

Класс JavaScript объявляется с помощью PascalCase, в отличие от других структур данных JavaScript:

Каждый раз, когда вызывается конструктор JavaScript для создания экземпляра нового экземпляра класса, имя класса должно появляться в Pascal Case, поскольку класс изначально был объявлен с использованием Pascal Case.

Соглашения об именах JavaScript: компонент

Компоненты не везде присутствуют в JavaScript, но обычно встречаются во внешних средах, таких как React. Поскольку компонент в некотором роде создается, но вместо этого добавляется к DOM, подобно классу JavaScript, они также широко объявляются с помощью Pascal Case.

Когда компонент используется, он отличается от собственного HTML и веб-компонентов, поскольку его первая буква всегда пишется в верхнем регистре.

Соглашения об именах JavaScript: методы

Как и в случае с функциями JavaScript, метод класса JavaScript объявляется с помощью camelCase:

Здесь применяются те же правила, что и для функций JavaScript. добавление глагола в качестве префикса --, чтобы сделать имя метода более информативным.

Соглашения об именах JavaScript: частные

Редко вы встретите знак подчеркивания (_) перед переменной/функцией/методом в JavaScript. Если вы его видите, значит, он предназначен для личного. Несмотря на то, что это не может быть реализовано с помощью JavaScript, объявление чего-либо как частного говорит нам о том, как это следует использовать или как это не следует использовать.

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

Частная переменная/функция может встречаться и в файле JavaScript. Это может означать, что переменная/функция не должна использоваться вне этого файла, а только внутри для вычисления дальнейшей бизнес-логики для других функций в том же файле..

Соглашения об именах JavaScript: постоянные

И последнее, но не менее важное: в JavaScript есть константы, предназначенные для использования в качестве неизменяемых переменных, которые пишутся заглавными буквами (ВЕРХНИЙ РЕГИСТР):

Если переменная содержит более одного слова в имени объявления переменной, используется символ подчеркивания (_):

Обычно константы JavaScript определяются в верхней части файла JavaScript. Как упоминалось ранее, никто не принуждает никого не изменять переменную здесь, за исключением объявления константы переменной для примитивных структур данных, но ее имя с заглавной буквы предлагает избегать этого.

Соглашения об именах JavaScript: глобальная переменная

Переменная JavaScript определяется глобально, если весь ее контекст имеет к ней доступ. Часто контекст определяется файлом JavaScript, в котором объявлена/определена переменная, но в небольших проектах JavaScript это может быть весь проект.Для глобальных переменных JavaScript не существует специальных соглашений об именах.

  • Глобальная переменная JavaScript объявляется в начале проекта/файла.
  • Глобальная переменная JavaScript записывается в camelCase, если она является изменяемой.
  • Глобальная переменная JavaScript записывается ПРОПИСНЫМИ БУКВАМИ, если она неизменяемая.

Соглашения об именах JavaScript: подчеркивание

А как насчет подчеркивания и тире в именах переменных JavaScript? Поскольку camelCase и PascalCase в основном используются в JS, вы заметили, что символ подчеркивания редко используется для закрытых переменных или констант. Иногда вы можете встретить символы подчеркивания при получении информации от третьих лиц, таких как базы данных или API. Еще один сценарий, в котором вы можете увидеть подчеркивание, — это неиспользуемые параметры функции, но пока не беспокойтесь об этом, если вы их еще не видели ;-)

Соглашения об именах JavaScript: тире

Дефис в переменной JavaScript также не соответствует здравому смыслу. Это только усложняет задачу; например, использовать их в объекте:

Невозможно использовать дефис непосредственно для объявления переменной:

Вот почему их лучше избегать.

Соглашения об именах JavaScript: файлы

В JavaScript существует две стратегии именования файлов: PascalCase и kebab-case. Во внешних приложениях JavaScript вы часто будете видеть PascalCase для именования компонентов (например, компонентов React).

Напротив, в бэкэнд-приложении JavaScript kebab-case — это здравый смысл:

Вы также увидите имена в CamelCase, но, как и в PascalCase (извините, интерфейсные приложения), существует риск того, что операционные системы обрабатывают их по-разному, что может привести к ошибкам. Вот почему использование kebab-case должно быть нормой для имен файлов в JavaScript.

Если вы хотите узнать больше о стиле и форматировании кода JavaScript, которые не обсуждаются здесь из-за соглашений об именах, вам обязательно следует ознакомиться с ESLint и Prettier для JavaScript.

Продолжайте читать о JavaScript

Закрытие JavaScript на примере

В конце концов вы столкнетесь с концепцией закрытия JavaScript. Я хочу дать вам пошаговое руководство по реализации замыкания JavaScript. По пути вы узнаете себя…

Учебник по переменным JavaScript для начинающих

В каждом языке программирования вы найдете переменные. Это справедливо и для JavaScript. По сути, переменные используются для переноса информации. Без них было бы невозможно кодить…

Путь к реакции

Изучайте React, создавая реальные приложения. Нет конфигурации установки. Нет инструментов. Простой React на более чем 200 страницах учебного материала. Изучайте React как более 50 000 читателей.

До сих пор вам, вероятно, не приходилось думать о том, как вы называете свои файлы. При работе в Интернете компьютеры разных типов должны работать вместе. Это означает, что необходимо соблюдать определенные соглашения.

Обязательно соблюдайте следующие правила:

Будьте внимательны при сохранении файлов

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

Всегда используйте правильные расширения файлов при сохранении файлов

Все файлы (даже на Mac) имеют суффикс расширения. При сохранении файла убедитесь, что вы используете правильный суффикс.

  • Файлы HTML заканчиваются на .html
  • Файлы CSS заканчиваются на .css
  • Файлы изображений заканчиваются на .jpg , .jpg или .jpg в зависимости от типа файла.
  • Файлы JavaScript заканчиваются на .js

Никогда не используйте пробелы в именах файлов

На Mac или ПК вы можете сохранить файл под названием «мой потрясающий веб-сайт.html». Это не будет работать на веб-сайте.

Используйте дефисы в именах файлов вместо пробелов. Вместо этого имя вашего файла будет "my-awesome-website.html".

Не используйте специальные символы в именах файлов

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

Точки следует использовать только в расширении файла.

Имена файлов вводятся с учетом регистра

Предполагайте, что ваши имена файлов всегда чувствительны к регистру.

Прописные и строчные буквы различаются.

Во избежание путаницы стандартная практика — всегда использовать строчные буквы.

Сократите имена файлов

Постарайтесь не делать имена файлов слишком длинными. При этом нет необходимости делать их настолько короткими, чтобы они казались загадочными.

Например, страница о вас и о том, чем вы сейчас занимаетесь:

обо мне и о том, что я делаю прямо сейчас.html Плохо. Имя слишком длинное и его трудно напечатать. a.html Плохо. Имя слишком короткое и загадочное. about.html Хорошо. Название четкое и лаконичное.

Должны ли файлы называться как-то с дефисами.js, camelCased.js или как-то иначе?

Я не нашел здесь ответа на этот вопрос.

Хорошее соглашение об именовании – называть файлы так, как вы видите этот объект в коде. Класс MyPlugin будет находиться в MyPlugin.js. Компонент MenuItem React войдет в MenuItem.js. Другие разработчики потребуют/импортируют 'your-cool-module' и будут использовать несколько символов из него, поэтому назовите его cool-module.js . –

Конвенция либо существует, либо нет. Вопрос не в том, «какое имя вы предпочитаете?». Я голосую за повторное открытие.

5 ответов 5

Одним из возможных соглашений об именовании является использование чего-то похожего на схему именования, которую использует jQuery. Он не принят повсеместно, но довольно распространен.

где пара название продукта + подключаемый модуль может также представлять пространство имен и модуль. Версия и тип файла обычно не являются обязательными.

  • мин для уменьшенных файлов
  • специальный для пользовательских созданных или измененных файлов
  • jquery-1.4.2.min.js
  • jquery.plugin-0.1.js
  • myapp.invoice.js

Я согласен с тем, что вы сказали. Но есть одна вещь, с которой я сейчас борюсь: что, если «плагин» содержит два слова? Разделить их точками? jquery.myPlugin-1.0.0.js или jquery.my.plugin-1.0.0.js или jquery.my_plugin-1.0.0.js или jquery.myplugin-1.0.0.js или даже jquery.my-plugin- 1.0.0.js? Может быть, вы сможете дополнить свои примеры этим, спасибо!

А как насчет модулей AMD? Если вы используете версию в именах файлов, вам придется изменить много файлов, если изменится номер версии.

@junior, это старый пост, но быстрый поиск в беседке показывает, что плагины jquery не следуют какому-то определенному соглашению. Похоже, что (1) соединение слов вместе, (2) использование регистра и (3) использование регистра верблюдов используются примерно с одинаковой частотой.

Не забывайте, что в некоторых системах управления версиями и файловых системах возникают проблемы с распознаванием разницы между словом в нижнем регистре и тем же словом в верхнем или верблюжьем регистре (например, "ThisWord" совпадает с "thisword" в некоторых средах). О чем следует помнить при использовании стандарта camelCase.

@knut, вы не должны загружать через имена версий, а сопоставлять имя модуля с конкретным файлом версии.

Мне не известно какое-либо конкретное соглашение для файлов javascript, поскольку они на самом деле не уникальны в Интернете по сравнению с файлами css, файлами html или файлами любого другого типа. Есть некоторые «безопасные» вещи, которые вы можете сделать, чтобы уменьшить вероятность того, что вы случайно столкнетесь с кроссплатформенной проблемой:

  1. Используйте все имена файлов в нижнем регистре. Некоторые операционные системы не чувствительны к регистру имен файлов, и использование всех строчных букв предотвращает непреднамеренное использование двух файлов, которые отличаются только тем, что может не работать в некоторых операционных системах.
  2. Не используйте пробелы в имени файла. Хотя технически это можно заставить работать, существует множество причин, по которым пробелы в именах файлов могут привести к проблемам.
  3. В качестве разделителя слов можно использовать дефис. Если вы хотите использовать какой-то разделитель для нескольких слов вместо пробела или верблюжьего регистра, как в различных-scripts.js , дефис является безопасным, полезным и часто используемым разделителем.
  4. Подумайте об использовании номеров версий в именах файлов. Если вы хотите обновить свои скрипты, запланируйте эффекты кэширования браузера или CDN. Самый простой способ использовать долгосрочное кэширование (для скорости и эффективности), но немедленные и безопасные обновления при обновлении файла JS — это включить номер версии в развернутое имя файла или путь (как это делает jQuery с jquery-1.6.2.js). ), а затем вы увеличиваете/меняете этот номер версии всякий раз, когда обновляете/изменяете файл. Это гарантирует, что ни одна страница, запрашивающая более новую версию, никогда не получит старую версию из кэша.

Не существует официального, универсального соглашения по именованию файлов JavaScript.

Есть несколько вариантов:

  • имя_скрипта.js
  • имя-скрипта.js
  • имя_скрипта.js

действительны все соглашения об именовании, однако я предпочитаю соглашение об именовании, предложенное jQuery (для подключаемых модулей jQuery, хотя оно работает для любого JS)

Прелесть этого соглашения об именах заключается в том, что оно явно описывает добавляемое глобальное загрязнение пространства имен.

  • foo.js добавляет окно.foo
  • foo.bar.js добавляет окно.foo.bar

Потому что я не упомянул версию: она должна идти после полного имени, желательно через дефис, с точками между основной и дополнительной версиями:

  • foo-1.2.1.js
  • foo-1.2.2.js
  • .
  • foo-2.1.24.js

+1 за Прелесть этого соглашения об именах в том, что оно явно описывает добавляемое глобальное загрязнение пространства имен. , никогда не замечал этого

Мой единственный вопрос: что делать, если у вас есть файл, который создает Foo или myFoo , вы бы просто назвали файл Foo.js или myFoo.js соответственно?

Вопрос в приведенной вами ссылке касается именования переменных JavaScript, а не именования файлов, поэтому забудьте об этом в контексте, в котором вы задаете свой вопрос.

Что касается именования файлов, то это исключительно вопрос вкуса и предпочтений. Я предпочитаю называть файлы дефисами, потому что тогда мне не нужно тянуться к клавише Shift, как при работе с именами файлов в верблюжьем регистре; и потому что мне не нужно беспокоиться о различиях между именами файлов Windows и Linux (имена файлов Windows нечувствительны к регистру, по крайней мере, в XP).

Поэтому ответ, как и многие другие, таков: "это зависит" или "это зависит от вас".

Единственное правило, которому вы должны следовать, — быть последовательным в выбранном вами соглашении.

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

Например, у меня есть раскрывающий модуль, объявленный с помощью var KnockoutUtilityModule = function() <. >в своем собственном файле с именем KnockoutUtilityModule.js, хотя объективно я предпочитаю Knockout-utility-module.js.

Имена файлов должны быть написаны строчными буквами и могут включать символы подчеркивания (_) или тире (-), но без дополнительных знаков препинания. Следуйте соглашению, которое использует ваш проект. Расширение имен файлов должно быть . js.

Имея это в виду, как назвать функцию JavaScript?

Функция JavaScript определяется с помощью ключевого слова function, за которым следует имя и круглые скобки (). Имена функций могут содержать буквы, цифры, знаки подчеркивания и доллара (те же правила, что и для переменных). В круглых скобках могут быть имена параметров, разделенные запятыми: (параметр1, параметр2, )

Знаете также, что такое файл JS? Файл JS — это текстовый файл, содержащий код JavaScript, который используется для выполнения инструкций JavaScript на веб-страницах. Он может включать в себя функции, которые открывают и закрывают окна, проверяют поля формы, включают прокручиваемые изображения или создают раскрывающиеся меню. На файлы JS ссылаются веб-страницы, содержащие функции JavaScript.

Точно так же вы можете спросить, каковы соглашения об именах файлов?

  • Имена файлов должны быть согласованными.
  • Имена файлов должны быть короткими, но описательными (
  • Избегайте использования специальных символов или пробелов в имени файла.
  • Используйте заглавные буквы и знаки подчеркивания вместо точек, пробелов или косых черт.
  • Используйте формат даты ISO 8601: ГГГГММДД.

Что такое camelCase в JavaScript?

верблюжий регистр: верблюжий регистр (стилизованный под верблюжий регистр; также известный как верблюжьи кепки или, более формально, средние заглавные буквы) — это практика написания фраз таким образом, что каждое слово или аббревиатура в середине фразы начинается с заглавной буквы без промежуточные пробелы или знаки препинания. Разбить строку на слова.

Что такое имя функции?

Имена функций как выражения. В таком выражении, как f[x], «имя функции» f само по себе является выражением, и вы можете обращаться с ним так же, как с любым другим выражением. Вы можете заменить имена функций, используя правила трансформации: 1.

Что такое функция в JavaScript?

Функции — это один из основных строительных блоков в JavaScript. Функция — это процедура JavaScript — набор операторов, которые выполняют задачу или вычисляют значение. Чтобы использовать функцию, вы должны определить ее где-то в области, из которой вы хотите ее вызвать.

Как начинается цикл for?

Операция For Loop 1 выполняется (один раз) перед выполнением блока кода. Оператор 2 определяет условие выполнения блока кода. Оператор 3 выполняется (каждый раз) после выполнения блока кода.

Что означает Дом?

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

Как запустить JavaScript?

Все, что вам нужно сделать, чтобы запустить его, это загрузить веб-страницу. Создайте файл .html. Создайте файл .js. Поместите весь код JS в этот файл. В html-файл включите тег script и обратитесь к файлу . js, который вы создали. Запустите html-файл в любом браузере.

Как вы определяете класс в JavaScript?

Класс JavaScript — это тип функции. Классы объявляются с помощью ключевого слова class. Мы будем использовать синтаксис выражения функции для инициализации функции и синтаксис выражения класса для инициализации класса. Мы можем получить доступ к [[Prototype]] объекта, используя Object.

Что означает $<> в JavaScript?

Что означает $<> (знак доллара и фигурные скобки) в строке в Javascript? Функционально это выглядит так, как будто вы можете вложить переменную в строку, не выполняя конкатенацию с помощью оператора +.

Каковы правила именования файлов?

Какое соглашение об именах файлов лучше всего?

Возможно, это лучшее соглашение об именовании файлов, которое когда-либо применялось.Используйте заглавные буквы для разделения слов, а не пробелы. Делайте имена файлов короткими, но осмысленными. При использовании даты в имени файла всегда указывайте дату «сзади вперед» и в следующем формате: ГГГГ, ГГГГММ или ГГГГММДД. Упорядочить элементы в имени файла наиболее подходящим способом для извлечения записи.

Какое допустимое имя файла?

Имя файла (также пишется как два слова, имя файла) — это имя, используемое для уникальной идентификации компьютерного файла, хранящегося в файловой системе. Различные файловые системы налагают различные ограничения на длину имени файла и допустимые символы в имени файла. хост (или сервер) — сетевое устройство, на котором находится файл.

Как вы разрабатываете соглашения об именах?

Рекомендации по разработке соглашения об именах файлов Найдите правильный баланс компонентов для вашего FNC. Слишком мало компонентов создает двусмысленность; слишком много ограничивают открытие и понимание. Используйте осмысленные сокращения. Имена файлов, содержащие слишком много символов, могут быть громоздкими и вызывать проблемы при передаче файлов.

Почему так важно присваивать имена файлам?

Почему вам нужно соглашение об именах файлов Соглашение об именах файлов — это систематический метод именования файлов. Ваше соглашение об именах файлов всегда будет вашим самым мощным и простым методом для организации и поиска ваших документов. Находите и идентифицируйте документы, даже если они больше не находятся в исходной папке.

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

Интеграция стилей, используемая DataTables, состоит из двух составных частей для каждой библиотеки стилей (обратите внимание, что каждая из этих частей является необязательной — например, многие расширения не требуют специального Javascript):

  • Javascript. В файле интеграции будут установлены параметры по умолчанию (обычно это имена классов и средства визуализации), которые подходят для библиотеки стилей. Это загружается в дополнение к основному программному обеспечению.
  • CSS. В этом случае файл интеграции добавляет все необходимые стили, которые не поддерживаются библиотекой стилей.

Файлы интеграции содержатся в исходном репозитории для каждой библиотеки, и поэтому важно, чтобы используемые имена файлов были согласованы между ядром DataTables и его различными расширениями. Это гарантирует, что у разработчиков есть доступ к программному обеспечению, которое им необходимо немедленно обновить, выпуски являются атомарными, и существует согласованный метод включения необходимых файлов для каждой библиотеки стилей.

Недостаток этого подхода заключается в том, что он значительно увеличивает количество необходимых файлов, если вы используете большое количество расширений. Однако это перевешивается тем фактом, что согласованные имена обеспечивают возможность программного объединения файлов (как это используется при загрузке DataTables).

Правила имени файла

  1. Имена файлов расположены в иерархическом порядке, наиболее значимое имя программы находится слева.
  2. Каждый подключаемый модуль добавляет свое имя в иерархию (справа), если только оно не идентично предыдущему элементу в иерархии.
  3. jQuery находится на вершине дерева иерархии
  4. Иерархия разделена точкой.
  5. Имя файла ограничено двумя последними элементами в иерархии.
  6. К файлам интеграции фреймворка стилей имя фреймворка добавляется последним элементом в иерархии.
  7. Предоставленные DataTable стили считаются фреймворком (значения Javascript по умолчанию подходят для их фреймворка стилей, поэтому нет необходимости в файле интеграции Javascript DataTables!)
  8. Расширение .min используется для представления уменьшенного файла (добавляется перед расширением файла)
  9. Имя файла всегда будет иметь расширение (например, .css или .js ).
  10. Имя файла: верблюжий регистр, т. е. все буквы в нижнем регистре, за исключением тех случаев, когда два слова объединены.

Пример — таблицы данных

Возьмем DataTables — это подключаемый модуль для jQuery, поэтому его основной файл Javascript называется jquery.dataTables.js . Файл интеграции Bootstrap будет называться jquery.dataTables.bootstrap.js, но правило 5 усекает его до dataTables.bootstrap.js. Таким образом, каталог DataTables Javascript будет состоять из:

  • jquery.dataTables.js
  • dataTables.bootstrap.js
  • dataTables.foundation.js
  • dataTables.jqueryui.js

Что касается стилей, файлы CSS аналогичны файлам интеграции, поэтому у нас есть:

  • jquery.dataTables.css
  • dataTables.bootstrap.css
  • dataTables.foundation.css
  • dataTables.jqueryui.css

Пример — адаптивный

Теперь рассмотрим адаптивное расширение.Для Responsive нет необходимости в файлах интеграции Javascript, поэтому у нас просто есть:

Читайте также: