如何在一个真实的例子中使用javascript模块模式？

问题描述

我正在尝试理解JavaScript模块模式。我已经看到它应该是什么样子的例子，但我不明白如何使用它。

I am trying to understand the JavaScript Module Pattern. I've seen examples of what it should look like, but I don't understand how to use it.

例如，这里发生了一些事情：

For example, a few things are happening here:

$('input#share').on("click", function() {

    $('.loading').html('<img class="remove_loading" src="/graphics/loading.gif" />');

    var message = $(".wallmessage").val();

    if (message == ""){
        $("#messageempty").jmNotify();
        $('.remove_loading').remove();
    } else {
        addMessage(message);
    }

    return false;
});


function addMessage(message)
{
    $.ajax({
        url: '/test',
        type: 'POST',
        dataType: "json",
        data: {'message' : message},
        success: function(data) {
                ...
        },
        error: function() {
            ...
        }
    });
}

如何将上述示例用于：

var myTest = function() {
    var selectId;
    function addMessage () {
        // ...
    }
    return { // public interface
        publicMethod1: function () {
            // all private members are accesible here
        }
    };
};
var start = myTest();

我在哪里添加click事件，声明我的vars，添加 addMessage 使用ajax调用的函数。并调用 addMessage 函数？我是否必须将所有内容包装在 $（文件）.ready（function（）？

Where do I add the click event, declare my vars, add the addMessage function with the ajax call. and call the addMessage function? Do i have to wrap everything in $(document).ready(function()?

任何人都可以摆脱一些为我点亮这个？

Can anyone shed some light on this for me?

谢谢

推荐答案

这是相当的一个固执己见的主题，但我会这样做（不完全知道你的完整应用程序及其作用），有点像这样：

This is quite an opinionated subject, but I'd do it (without entirely knowing your full app and what it does), somewhat like so:

var myApp = (function() {

  var someElement = $("#foo"); //some element I know I'll use lots

  var addMessage = function(message) {
    $.ajax({
      url: '/test',
      type: 'POST',
      dataType: "json",
      data: {'message' : message},
      success: function(data) {
              ...
      },
      error: function() {
          ...
      }
    });
  };

  var inputClick = function(event) {
    event.preventDefault();
    //depending on if you'll reuse these selectors throughout the app I might have these as variables
    $('.loading').html('<img class="remove_loading" src="/graphics/loading.gif" />');

    var message = $(".wallmessage").val();

    if (message == ""){
      $("#messageempty").jmNotify();
      $('.remove_loading').remove();
    } else {
      addMessage(message);
    }
  };

  var bindFunctions = function() {
    $("input#share").on("click", inputClick)
  };

  var init = function() {
    bindFunctions();
  };

  return {
    // EDIT: 27/12/16 - need to return init for 'usage' example to work
    init: init,
    addMessage: addMessage
    //anything else you want available
    //through myApp.function()
    //or expose variables here too
  };


})();

//usage

myApp.init();

您的模式的原始代码是错误的，该函数必须具有（ ）在最后，使它成为立即调用的函数，然后执行，通过 return语句公开任何内容。

Your original code for the pattern is wrong, the function has to have () at the very end, to make it a function that is immediately invoked, and then executes, exposing anything through the return statement.

您可能希望与我所做的略有不同，这只是一个基本想法，但我希望它可以让您入门。

You may wish to differ slightly from what I've done, it's only a basic idea but I hope it might get you started.

有一段时间回答了一个与此模式有关的问题，解释为什么我们使用（function（）{}）（）; 以及如何 return 语句在该上下文中有效，如果您对它有点困惑，那也可能值得一读。

Someone a while back asked a question relating to this pattern and I answered it explaining why we use (function() {})(); and how the return statement works in that context, if you're slightly confused by it that might be worth reading too.

这篇关于如何在一个真实的例子中使用javascript模块模式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！