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

Question

我正在使用下一个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”的值在改变，但无法弄清楚为什么）…… 我错过了什么吗？

这个想法是用这样的形式编写自定义插件：

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

基本上，这样每个自定义插件都可以使用此template 。 模板意味着var instance = this ， this.publicMethod ， var privateMethod = function() ...

Answer 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>

此代码应该起作用。

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

问题描述

1 个解决方案

解决方案1
1 2019-08-02 15:51:02

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

问题描述

1 个解决方案

解决方案1 1 2019-08-02 15:51:02

解决方案1
1 2019-08-02 15:51:02