Javascript jQuery插件存储值_Javascript_Jquery_Jquery Plugins_Closures

Javascript jQuery插件存储值

javascript jquery jquery-plugins

Javascript jQuery插件存储值,javascript,jquery,jquery-plugins,closures,Javascript,Jquery,Jquery Plugins,Closures,我正在开发一个jquery插件，在保存属性以备将来使用时遇到了一个问题。在下面的示例中，当我查找18,50,18时，控制台输出为18,50,50。我理解为什么会发生这种情况，但我想不出一个好方法来保存属性，以便在多种不同的方法中使用。我有一种感觉，我错过了一些非常明显的东西，但我只是没有看到它 <html> <body> <h1>Hello</h1> <h2>World</h2>

我正在开发一个jquery插件，在保存属性以备将来使用时遇到了一个问题。在下面的示例中，当我查找

18,50,18

时，控制台输出为

18,50,50

。我理解为什么会发生这种情况，但我想不出一个好方法来保存

属性

，以便在多种不同的方法中使用。我有一种感觉，我错过了一些非常明显的东西，但我只是没有看到它

<html>
    <body>
        <h1>Hello</h1>
        <h2>World</h2>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
        <script type="text/javascript">
            (function ($) {
                var commonOperations, methods, properties;

                commonOperations = function () {
                    console.log(properties.height);
                };

                methods = {
                    init : function (overrides) {
                        var defaults;
                        defaults = { height: 18 };
                        properties = $.extend(defaults, overrides);

                        commonOperations();
                    },

                    foo : function () {
                        commonOperations();
                    }
                };

                $.fn.myPlugin = function (method) {
                    if (methods[method]) {
                        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
                    } else if (typeof method === 'object' || !method) {
                        return methods.init.apply(this, arguments);
                    } else {
                        $.error('Method ' + method + ' does not exist for jQuery.myPlugin');
                    }
                };
            }(jQuery));

            $(document).ready(function () {
                $("h1").myPlugin();
                $("h2").myPlugin({ height: 50 });
                $("h1").myPlugin("foo");
            });
        </script>
    </body>
</html>


你好
世界
（函数（$）{
var操作、方法、属性；
commonOperations=函数（）{
console.log（properties.height）；
};
方法={
初始化：函数（重写）{
var违约；
默认值={高度：18}；
属性=$.extend（默认值、覆盖）；
公共操作（）；
},
foo:function（）{
公共操作（）；
}
};
$.fn.myPlugin=函数（方法）{
if（方法[方法]）{
返回方法[method].apply（this，Array.prototype.slice.call（arguments，1））；
}else if（typeof方法=='object'| |！方法）{
return methods.init.apply（这是参数）；
}否则{
$.error（'Method'+Method+'对于jQuery.myPlugin不存在'）；
}
};
}（jQuery））；
$（文档）.ready（函数（）{
$（“h1”）.myPlugin（）；
$（“h2”）.myPlugin（{height:50}）；
$（“h1”）.myPlugin（“foo”）；
});

这取决于插件的性质，但使用

.data（）

按元素存储属性可能是有意义的

   init: function(overrides) {
     return this.each(function() {
       var defaults = { whatever: "foo" };
       $(this).data('properties', $.extend(defaults, overrides));
     });
   }

然后，其他方法总是从元素中提取“属性”对象：

    foo : function () {
      return this.each(function() {
        commonOperations.call(this, $(this).data('properties'));
      });
    }

+1-支持信息可在此处找到：谢谢。这很有道理。