尝试使用Revealing Module Pattern改进JS技术 - 简单的例子

时间:2014-02-19 19:06:32

标签: javascript jquery design-patterns

最近和其他人一样,我试图根据我对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();

jsFiddle example

0 个答案:

没有答案