具有公共和私有方法的 jQuery 插件模板答案

【问题标题】：jQuery plugin template with public and private methods具有公共和私有方法的 jQuery 插件模板
【发布时间】：2019-08-02 15:33:51
【问题描述】：

我正在使用下一个 jQuery 插件实现来定义我的插件。我已经使用 javascript 好几年了，但是 javascript 有很多惊喜。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
    (function ($) {
      // is using $.fn best practise / ok? or is something else better
      // according to https://learn.jquery.com/plugins/basic-plugin-creation it's fine
      $.fn.myPlugin = function () {

        // private variables
        var instance = this;
        var privateVar1 = "some Value";

        // private methods
        var privateMethod = function(arg1) {

          var bla = privateVar1;

          if( arg1 > 0) {
            arg1 -= 1;
            // to call public method I just call:
            instance.publicMethod(arg1);
          }
        };

        // public methods start with this.
        this.initialize = function () {

          // this can refer to different things, depending on calling context
          // https://stackoverflow.com/questions/3562980/javascript-this-value-changing-but-cant-figure-out-why
          return this;
        };

        this.publicMethod = function(arg1) {
          debugger;

          // private methods are called only with the name
          privateMethod(arg1);
        };

         return this.initialize();
      }
    })(jQuery);


  $(document).ready(function() {    

     var a = $("#test").myPlugin();
     a.publicMethod(1);

  });
    </script>
  </head>

  <body>
    <div id="test">Test
       <div id="test1"></div> 
    </div>
  </body>
</html>

我想确保没有任何错误。例如，我知道 this 会根据上下文进行更改 (Javascript 'this' value changing, but can't figure out why) ... 我错过了什么吗？

我们的想法是以这样的形式编写自定义插件：

$("#myList").myCredentialsDialog();
$("#cars").carsGrid();
...

基本上这样每个自定义插件都可以使用这个template。模板表示var instance = this、this.publicMethod、var privateMethod = function() ...

【问题讨论】：

标签： javascript plugins jquery-plugins

【解决方案1】：

你可能会被 javascript 中的上下文弄糊涂。你是对的，这会随着上下文而改变，如果你使用 function() { } 如果你想从上下文之外使用它然后使用 () => { } 代替。

我正在分析您的代码并认为它不起作用。你可以像这样做公共变量。

  <head>
    <meta charset="UTF-8">
    <script src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
    (function ($) {
      // is using $.fn best practise / ok? or is something else better
      // according to https://learn.jquery.com/plugins/basic-plugin-creation it's fine
      $.fn.myPlugin = function () {

        // private variables
        var privateVar1 = "some Value";

        // private methods
        var privateMethod = (arg1) => {

          var bla = privateVar1;

          if( arg1 > 0) {
            arg1 -= 1;
            // to call public method I just call:
            this.publicMethod(arg1);
          }
        };

        // public methods start with this.
        this.initialize = () => {

          // this can refer to different things, depending on calling context
          // https://stackoverflow.com/questions/3562980/javascript-this-value-changing-but-cant-figure-out-why
          return this;
        };

        this.publicMethod = (arg1) => {
          debugger;

          // private methods are called only with the name
          privateMethod(arg1);
        };

         return this.initialize();
      }
    })(jQuery);


  $(document).ready(function() {    

     var a = $("#test").myPlugin();
     a.publicMethod(1);

  });
    </script>
  </head>

  <body>
    <div id="test">Test
       <div id="test1"></div> 
    </div>
  </body>
</html>

这段代码应该可以工作。

【讨论】：

酷，thnx 还有其他观察结果或潜在问题吗？所以唯一应该改变的是使用lamba表达式()来改变上下文？所有浏览器都支持()，我的意思是因为 ecma 脚本 ...
是的。你甚至可以在没有变量实例的情况下做到这一点。这就是为什么在 google javascript 指南中必须使用 lamba 而不是 function() 所以开发人员不会被这个上下文混淆。
唯一的问题是javascript中的() lambda（相当于匿名函数）Internet Explorer 不支持。因此必须使用 function()。 - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
“你认为它行不通”是什么意思？
` this.initialize = function () { return this; };` 你在 this.initialize = function() 中返回 this，这个上下文由 function() 拥有，不在 this 之外。如果您返回实例而不返回此，它将起作用