Шаблон модуля Javascript для приложений jquery
Я пишу всем вам, потому что я хотел бы получить несколько советов и советов по поводу характерного шаблона модуля, который я использую.
Ища тему в Интернете и в книгах, я не смог найти ничего похожего на этот архитектурный выбор, кроме определенных концепций.
Шаблон в нескольких словах: ° Каждая веб-страница должна включать только одну область и может включать в себя множество модулей. ° Каждый модуль является IIFE с подфункциями. ° Каждая область имеет готовый документ и вызывает один или несколько модулей.
Я прилагаю вам пример кода, чтобы быть более наглядным.
Эта модель напоминает вам что-то уже виденное ранее? Это хороший архитектурный выбор? Есть ли слабые места или архитектурные ошибки в этом шаблоне? Это хорошее использование функций и пространств имен IIFE?
Заранее спасибо, с наилучшими пожеланиями.
index.html
<html>
<head>
<meta HTTP-EQUIV='content-type' CONTENT='text/html; charset=utf-8'/>
</head>
<body>
<div id="first"></div>
<div id="second" style="border:2px solid green;width:150px;height:190px;"></div>
</body>
<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
<script type='text/javascript' src='js/module.one.js'></script>
<script type='text/javascript' src='js/module.two.js'></script>
<script type='text/javascript' src='js/scope.js'></script>
module.one.js
(function () {
// Module namespace
if (typeof $M === 'undefined') {
$M = {};
}
// Variables declaration chained
var
$first,
$second,
$chunk,
documentHeight,
animationTime,
style,
style2;
/* ===========================================================================================================
INIT FUNCTION
============================================================================================================= */
var init = function() {
// calls setup first
setup();
// calls other functions
appendChunk();
animateChunk();
};
function setup() {
// Vars caching
$document = $(document);
$first = $('#first');
$second = $('#second');
$chunk = $("<div id='chunk'> truffle shuffle </div>");
documentHeight = $document.height();
animationTime = 1000;
style = {
'border':'2px solid red',
'height': documentHeight / 8,
'width': '150px'
};
style2 = {
'height': documentHeight / 4,
'width': '300px'
};
$second.hide();
}
/* ===========================================================================================================
OTHER FUNCTIONS
============================================================================================================= */
function appendChunk() {
$first.append($chunk);
$chunk.css(style);
}
function animateChunk() {
$chunk.animate(style2,animationTime,function(){
$(this).trigger('animationComplete');
});
}
/* ===========================================================================================================
INIT MODULE
============================================================================================================= */
$M.one = init;
})();
module.two.js
(function () {
// Module namespace
if (typeof $M === 'undefined') {
$M = {};
}
// Variables declaration chained
var
$second,
$chunk,
animationTime,
style;
/* ===========================================================================================================
INIT FUNCTION
============================================================================================================= */
var init = function() {
// calls setup first
setup();
// calls other functions
chunkListener();
secondListener();
isSecondVisible();
};
function setup() {
// Vars caching
$second = $('#second');
$chunk = $("#chunk");
animationTime = 1000;
style = {
'border':'2px solid red',
'height': '150px',
'width': '150px'
};
}
/* ===========================================================================================================
OTHER FUNCTIONS
============================================================================================================= */
function chunkListener() {
$chunk.on('animationComplete',function(){
$second.fadeIn().trigger('animationComplete');
});
}
function secondListener() {
$second.on('animationComplete',function(){
$chunk.animate(style,animationTime);
});
}
function isSecondVisible() {
var time = setInterval(function() {
if($second.is(':visible')) {
console.log("visible");
clearInterval(time);
} else {
$second.html("finished!");
}
},200);
}
/* ===========================================================================================================
INIT MODULE
============================================================================================================= */
$M.two = init;
})();
scope.js
$(document).ready(function () {
$M.one();
$M.two();
});
1 ответ
Эта модель напоминает вам что-то уже виденное ранее?
Структура модулей похожа на шаблон модуля. Принцип расширения "супер" модуля, к которому вы обращаетесь как $M выглядит также знакомо. См. Модуль Увеличение
Это хороший архитектурный выбор? Есть ли слабые места или архитектурные ошибки в этом шаблоне?
Модульное мышление часто (конечно, в зависимости от контекста, сделать модульное приложение "Привет, мир" - это немного излишним) - хороший архитектурный выбор. Тем не менее, читая логику ваших модулей, я немного сомневался в том, чтобы создать процедурный внутренний дизайн и не подвергать какой-либо API-интерфейс. Я полагаю, что у вас есть возможность улучшить дизайн ваших модулей путем реализации архитектуры, подобной MV-*.
Это хорошее использование функций и пространств имен IIFE? Я думаю, что ваше использование хорошо, как оно есть. Я возможно добавлю "супер" модуль ($M) в качестве аргумента ваших модулей IIFE, которые должны лучше изолировать ваши модули от внешнего мира (глобальной области).
Рекомендации