Сегодня я расскажу вам, как осуществляется подключение разных типов скриптов к вашему сайту. Это своего рода основа основ, и написать эту статью я должен был одной из первых. Потому – начнем.
Подключение JS-скриптов (файлы с расширением *.js) к сайту
JavaScript помогает нам во многих моментах повысить функциональность сайта. Будь то стилизация форм или, например, какая-нибудь техническая сторона вопроса.
Подключение JavaScript’а осуществляется двумя способами:
1. Первый – это непосредственно вставка кода в ваш сайт с помощью тегов:
2. Второй – с помощью файла:
Где «https://www.pandoge.com/main.js» – путь до файла скрипта. Такой вариант рекомендуется писать для файлов на удаленном (внешнем) сервере. Если же файл находится на вашем сайте, то можно просто указать относительный путь:
Это удобно, если вы вдруг захотите сменить домен или перевести сайт на другой протокол.
Что касается места подключения, то все скрипты рекомендуется подключать в секции HEAD, перед закрывающим ее тегом. Например:
Все для начинающего вебмастера
Их также можно подключить в секции BODY. Например, все библиотеки рекомендуется подключать в секции HEAD, тогда как все счетчики, слайдеры, галереи и прочие скрипты – в секции BODY, также перед закрывающим тегом.
Подключение PHP-скриптов (файлы с расширением *.php) к сайту
Подключение PHP-скриптов осуществляется уже тремя способами:
1. Первый – это та же вставка кода в саму страницу сайта (обратите внимание, что если вы имеете страницу с расширением *.html – вам необходимо сменить расширение на *.php) с помощью тегов:
2. С помощью файла (в таком случае подключение можно осуществлять и на странице с *.html расширением):
Но для работы этого способа в файл .htaccess, который находится в корне вашего сайта, в самый верх, необходимо добавить эти строки:
RemoveHandler .html .htm AddType application/x-httpd-php .php .htm .html .phtml
Если такого файла нет на хостинге — создайте его через любой текстовый редактор.
3. Третье – с помощью JS-скрипта. В этом случае вы также можете получить результат выполненного PHP-скрипта на сервере.
Реализация будет следующая:
Где «.result» – это класс, куда будут грузиться данные, а «/main.php», соответственно, адрес до PHP-скрипта.
Если вы грузите данные с другого сервера, то поддержка PHP на вашем сервере не обязательна. Не забывайте подключить к вашему сайту библиотеку jQuery.
Здесь правила абсолютно те же: полный адрес к файлу, если он находится на внешнем сервере, относительный – если на вашем.
Обратите внимание! Если вы хотите подключить PHP-скрипт к вашему сайту, то на сервере должна быть поддержка PHP. О том, есть ли у вас такая возможность – узнайте у своего хостинг-провайдера.
Если вы осуществляете подключение скриптов первый раз – попробуйте подключить скрипты из архива, который прикреплен в конце статьи. Если в обоих случаях вы получили сообщение «Hello World!» – значит, вы все сделали правильно.
Источник: www.pandoge.com
Инклюд в яваскрипте 19 марта 2007
Современный крупный сайт невозможно представить без яваскрипта, и чем ближе разработчик желает приблизить свое приложение к тому, что называется вебом 2.0, тем больше становится доля яваскрипта в общем объеме программного кода.
Большое число скриптов труднее структурировать, а элемент каждой страницы превращается в нечто подобное:
01
02
03
04
05
06
07
08
. и еще 30 таких же .
Но это полбеды. Ведь файл Page/Index.js зависит от Company.js, а тот в свою очередь от Widget/Person.js и Widget/Address.js. А те от Widget/Date.js и Box.js и т. д.
Причем загружать их нужно именно в указанной последовательности. А если страниц много? А если, например, хочется разделить какой-нибудь из виджетов на два файла? Или добавить пару новых классов? Или объединить несколько скриптов в один большой файл для ускорения загрузки?
Ведь все зависимости удобно было бы хранить непосредственно в js-файлах.
Почти в любом «взрослом» языке для этого существует конструкция include. В яваскрипте ее нет, но при должном желании ее удается сымитировать. Представьте, как удобно было бы написать в начале Company.js что-нибудь вроде:
01
02
03
04
05
06
07
js.include(‘als.Template’); js.include(‘als.utils.Text’); js.include(‘als.widget.Box’); js.include(‘domain.ClientsInfo.Widget.Properties’); js.include(‘domain.ClientsInfo.widget.Address’); js.include(‘domain.ClientsInfo.widget.Person’); .
Что же мешает так сделать? Или веб 2.0 способен лишь на раскрашивание кнопок?
Решение
Какие препятствия поджидают нас? Во-первых, инклюд должен полностью отрабатывать до начала выполнения кода. Во-вторых, не исключены зависимости нескольких файлов от одного модуля и загружать его дважды совсем не хочется. В-третьих, требуется какой-нибудь механизм загрузки файлов с сервера. Для начала препятствий хватит.
На дворе 2007 год, и подавляющее большинство браузеров поддерживают XHTTPRequest именно им и следует воспользоваться. Этот объект работает в двух режимах: асинхронном (когда указывается функция обратного вызова) и синхронном (запрос происходит непосредственно во время вызова xhttp.open() ). Нам нужен второй: при этом код загрузится прямо на месте js.include . А дальше достаточно выполнить eval(xhttp.responseText) :
01
02
03
04
05
06
07
08
09
10
11
12
13
14
//js.js js = <>; js.loadedModules = <>; ┘ js.include = function(path) < if(js.loadedModules[path]) return; var transport = js.getXHTTPTransport(); transport.open(‘GET’, js.rootUrl + path.replace(/./g, ‘/’) + ‘.js’, false); transport.send(null); var code = transport.responseText; eval(code); >
Вот и все. Теперь перед загрузкой скриптов достаточно подключить js.js и инклюд работает.
Модули
Полезно вынести в отдельную команду объявление загруженного модуля. Например, в начале каждого файла писать js.module(«js.Event») , а саму функцию сделать так:
01
02
03
js.module = function(path)
Теперь инклюд будет знать о том, что скрипт с данным адресом уже загружен, даже если js-файл подключен с помощью тега .
Ну а кроме того, каждая загрузка скрипта отдельный запрос на сервер. Поэтому если всегда необходимо загружать группу файлов как единый набор, оптимально объединить их в один большой. Тогда и серверу придется выполнять меньше операций, и трафик между браузером и сервером сократится. А нам в итоге нужно написать:
01
02
03
04
05
06
07
08
js.module(«domain.Class1»); domain.Class1 = function() js.module(«domain.Class2»); js.include(«domain.Class1»); domain.Class2 = function() domain.Class2.prototype = new domain.Class1();
То, что объявление модуля вынесено в самое начало файла (до инклюдов), позволяет избежать зацикливания даже в тех случаях, когда между файлами возникает циклическая зависимость.
Неймспейсы
Раз уж мы раскладываем файлы по папкам вроде domain/ClientsInfo/Widget/Person.js, логично было бы в файле Person.js иметь описание класса domain.ClientsInfo.Widget.Person. Но если попытаться создать класс domain.ClientsInfo.Widget.Person при несуществующем domain.ClientsInfo.Widget, интерпретатор яваскрипта выдаст ошибку. Между тем, проверять в начале каждого файла, что существует объект domain.ClientsInfo.Widget, а вместе с ним и domain.ClientsInfo, и просто domain, будет утомительно и громоздко.
Объявление неймспейса имен удобно вынести в функцию объявления модуля. Например, так:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
js.evalProperty = function(object, name, value) < if(object) < if(!object[name]) object[name] = value || true; return object[name]; >return null; > js.evalPath = function(path, context, value) < context = context || window; var pos = path.indexOf(‘.’); if(pos == -1) < return js.evalProperty(context, path, value); >else < var name = path.substring(0, pos); var path = path.substring(pos + 1); var obj = js.evalProperty(context, name, value); return js.evalPath(path, obj, value); >> js.module = function(path)
Загруженный код выполняется с помощью функции eval(). Это означает, что в «Мозилле» отладить его не удастся. Visual Studio более покладиста, но не балует подсветкой синтаксиса. Проблема решается подключением отлаживаемых скриптов тегом .
Источник: www.artlebedev.ru
Подключение JavaScript файлов к проекту на Laravel с помощью Webpack
Фреймворк Laravel позволяет быстро подключать требуемые файлы с JS-скриптами. При этом он может сразу собирать несколько файлов JavaScript в один общий файл или, если этого требует логика проекта, в несколько файлов. Для того, чтобы воспользоваться этим средством разработки, нужно сначала собрать библиотеку из требуемых для подключения файлов, содержащих JavaScript, а после, воспользоваться API для определения инструкций сборки Webpack для того, чтобы собрать их в папке с файлами проекта, доступной из Web. Как подключать CSS файлы к проекту на Laravel с помощью Webpack читай по → этой ссылке.
Node.js и NPM
Предполагается, что у вас есть доступ к командной строки на сервере и то, что на сервере установлены Node.js и NPM. Для того, чтобы проверить, установлен ли Node.js можно воспользоваться командой:
node -v
, которая выведет версию установленной Node.js. И командой:
npm -v
, которая выведет версию пакета NPM, установленного на сервере.
Если при этих запросах выдаётся ошибка о том, что данная команда не найдена, это значит, что скорее всего эти пакеты не установлены на сервере и их нужно установить.
Подготовка скриптов JavaScript к переносу в проект
Для того, чтобы не создавать хаос у себя на сервере, все файлы, относящиеся к проекту лучше хранить в папке /resources , которая уже создана при установке Laravel. В эту папку вложена папка js , в которую и нужно складывать все файлы с JavaScript, которые нужны для работы с проектом. Если эти файлы нужно разделить на группы, можно сделать вложенные папки. Полный путь до папки к JS-скриптам относительно корня папок проекта будет:
/resources/js
webpack.mix.js — файл для указания того, что будет входить в сборку JavaScript проекта на Laravel
После того, как файл с JS-скриптом подготовлен, его требуется перенести в папку public проекта, которая служит корневой папкой для сайта.
Для этого нужно отредактировать файл webpack.mix.js , который находится в корневой директории проекта.
Для подключения одного файла к проекту нужно в этом файле webpack.mix.js прописать команду:
mix.js(‘resources/js/metrika.js’, ‘public/js/moonbase.js’)
- resources/js/metrika.js — это файл, который требуется подключить к проекту (с полным путём к нему)
- public/js/moonbase.js — это файл, куда требуется перенести данный файл (с указанием пути, куда переносим и названием файла, куда будут складываться все JavaScrirt скрипты)
Сборка файла с JS-скриптами для публикации на сайте Laravel
Для того, чтобы перенести файл с нашим JavaScript в папку проекта, нужно выполнить в консоли сервера из корня проекта команду:
$ npm run dev
Для сборки в режиме «продакшен» (без лишних символов в одну строку), используйте команду:
$ npm run production
В результате получите отчёт:
DONE Compiled successfully in 1011ms 10:26:47 PM Asset Size Chunks Chunk Names /js/moonbase.js 1.27 KiB 0 [emitted] /js/moonbase
Для компиляции нескольких файлов JavaScript в проект Laravel
Для компиляции нескольких файлов JavaScript в проект Laravel в файле webpack.mix.js в качестве первого аргумента можно передавать массив с именами файлов, которые требуется подключить в проект, например:
mix.scripts([ ‘resources/js/file1.js’, ‘resources/js/file2.js’, ‘resources/js/file3.js’ ], ‘public/js/all.js’);
Подключение JS-скриптов к проекту Laravel
Всё, что осталось сделать, это в шаблон сайта вписать подключение собранного файла с JavaSript (или нескольких файлов в зависимости от функционала страниц проекта и необходимость поместить некоторые скрипты в начало страницы).
Но обычно (за редкими исключениями) достаточно добавить подключение JS-скриптов перед закрывающим тегом , например так:
После этого все подключенные скрипты должны начать работать после перезагрузки страницы проекта.
Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! 😉
Источник: mb4.ru