Это, возможно, уже было задано много раз, и я искал вокруг SO, но пока все ответы, которые я прочитал, не совсем то, что я ищу.
Я работаю над сайтом с умеренными элементами DOM, показывающими/скрывающимися, некоторыми вызовами AJAX и, возможно, чем-то другим. Таким образом, у меня будут два основных файла script (стандарт HTML-Boilerplate)
plugins.js // third party plugins here
site.js // all my site specific code here
Раньше я использую шаблон шаблона объектного литерала, поэтому мой site.js
выглядит примерно так:
var site = {
version: '0.1',
init: function() {
site.registerEvents();
},
registerEvents: function() {
$('.back-to-top').on('click', site.scrollToTop);
},
scrollToTop: function() {
$('body').animate({scrollTop: 0}, 400);
}
};
$(function() {
site.init();
});
До сих пор это было хорошо, это хорошо читаемо, все методы являются общедоступными (я вроде как это, так как я могу проверить их с помощью инструментов Chrome Dev прямо, если это необходимо). Тем не менее, я намерен отделить некоторые функциональные возможности сайта от более модульного стиля, поэтому я хочу иметь что-то вроде этого ниже кода выше (или в отдельных файлах):
site.auth = {
init: function() {
site.auth.doms.loginButton.on('click', site.auth.events.onLoginButtonClicked);
},
doms: {
loginButton: $('.login'),
registerButton: $('.register')
},
events: {
onLoginButtonClicked: function() {
}
},
fbLogin: function() {
}
};
site.dashboard = {
};
site.quiz = {
};
// more modules
Как вы можете видеть, это очень читаемо. Однако есть один очевидный недостаток, и я должен написать код типа site.auth.doms.loginButton
и site.auth.events.onLoginButtonClicked
. Вдруг становится трудно читать, и он будет только увеличиваться дольше, чем сложнее получить функциональность. Затем я попробовал модульный шаблон:
var site = (function() {
function init() {
$('.back-to-top').on('click', scrollToTop);
site.auth.init();
}
function scrollToTop() {
$('body').animate({scrollTop: 0}, 400);
}
return {
init: init
}
})();
site.auth = (function() {
var doms = {
loginButton: $('.login'),
registerButton: $('.register')
};
function init() {
doms.loginButton.on('click', onLoginButtonClicked);
}
function onLoginButtonClicked() {
}
return {
init: init
}
})();
// more modules
Как вы можете видеть, эти длинные имена исчезли, но потом, наверное, мне нужно запустить все остальные модули в функции site.init(), чтобы построить их все? Тогда я должен помнить о том, чтобы возвращать функции, которые должны быть доступны другими модулями. Оба они в порядке, я думаю, хотя и немного хлопот, но в целом, я на лучший рабочий процесс, работающий с модульным шаблоном?