Я пишу вам всем, потому что я хотел бы получить несколько советов и подсказок о характерном шаблоне модуля, который я использую.
Поискав эту тему в Интернете и в книгах, я не смог найти ничего похожего на этот архитектурный выбор, за исключением некоторых концепций.
Шаблон в нескольких словах: ° Каждая веб-страница должна включать только одну область и может включать множество модулей. ° Каждый модуль представляет собой 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();
});
