最近和其他人一样,我试图根据我对Addy Osmani's Essential JS Design Patterns book的阅读,从更基本的声明式JS风格过渡到更模块化的风格。
虽然我大致掌握了模块模式的想法,但我并不确定我是否正确应用这些技术。显然,我知道“有很多方法可以给猫皮肤”和everyone has opinions which may or may not always be correct。我只是想从一个对我有意义的地方开始。
例如,给定以下HTML和JS,下面的代码可以工作(假设加载了jQuery)。但是,对我来说,仍然觉得实施起来并不完全正确。
HTML
<div id="someDiv">
<h2>Header</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
JS
// Using Revealing Module Pattern:
// - add attribute to div
// - add click event to h2 which toggles p
var myMod = (function () {
// defined & cached within the local scope
var d = $('#someDiv'),
h = $('h2'),
addAttribute = function () {
d.attr("data-info", "something here");
addClickEvent();
},
addClickEvent = function () {
h.click(function () {
toggleP(this);
});
},
toggleP = function (el) {
$(el).siblings().toggle();
};
// Return public object
return {
init: addAttribute
};
})();
myMod.init();