![]() Главная страница Случайная страница КАТЕГОРИИ: АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника |
Структура 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(); - инициализируем его.
|