Структура js файлов

Переходим к описанию js файлов. Мы используем jquery как основной фреймворк по работе с клиентской частью кода. Один наш пользовательский js файл (назовем его /Scripts/common.js) будет вызываться всегда. В него будут добавлены те функции, которые будут присутствовать на любой странице. Остальные js-файлы будут вызываться опционально.

Чтобы не путаться создадим 2 папки «admin» и «default» в /Scripts.

Все файлы будут иметь уникальные имена, которые будут записаны в SmallCase формате, и будут относиться к определенной странице (в основном). Например: user-register.js – файл, который будет включен в страницу User/Register.cshtml:

@section scripts {

@Scripts.Render(" /Scripts/default/user-register.js")

}

Эта секция выведется в том месте, где описана в _Layout.cshtml:

…

@Scripts.Render(" ~/bundles/bootstrap")

@Scripts.Render(" ~/bundles/common")

@RenderSection(" scripts", required: false)

< /body>

В /App_Start/BundleConfig.cs тем временем добавим описание:

bundles.Add(new ScriptBundle(" ~/bundles/common").Include(

" ~/Scripts/common.js"));

Все пользовательские js классы, за исключением плагинов, будут иметь следующую структуру:

function FunctionName() {

_this = this;

this.init = function () {

/* установка обработки нажатий или иных манипуляций */

$(" button").click(function () {

var id = $(this).attr(" id");

_this.saySomething(id);

});

}

/* другие публичные методы*/

this.saySomething = function (id) {

alert(" Пыщь-пыщь!: " + id);

}

/* другие приватные методы */

function saySomething (id) {

alert(" Пыщь-пыщь! Но тссс!: " + id);

}

}

var functionName = null;

$().ready(function () {

functionName = new FunctionName();

functionName.init();

});

Рассмотрим подробнее:

1. function FunctionName имеет имя в стиле UpperCamelCase по имени файла, в котором находится (Common и UserRegister в файлах common.js и user-register.js соответственно)

2. _this = this; Сохранение ссылки на данную функцию, чтобы была возможность использовать внутри delegate-функций

3. this.init – внешняя (public) функция, где будет происходить инициализация обработки.

4. var functionName = null – создание глобальной переменной. Возможно использование из других файлов. (Можно использовать и из других файлов)

5. $().ready() – вызывается после того, как сформирована DOM-структура. JQuery функция.

6. functionName = new FunctionName(); - создаем объект класса.

7. functionName.init(); - инициализируем его.