《jQuery插件开发 - 插件锻造师》第三章插件参数化

除特别注明外，其他文章均由左撇峰子创作，转载请保留原地址，谢谢~

本文链接：https://blog.csdn.net/zpfz756/article/details/89414382

上篇我们已经学会如何去调用插件的方法，这章我们来讲讲如何给插件的方法进行参数化。

如果我们不对sayHello这个方法进行参数化，对它调用时，不管把方法赋予到哪个class或id上，其显示效果都是一样的。你可能不明白上述这句话，来，咱们给HTML下的代码稍微做下变更：

<body>
    <button class="Demo_sayHello_1">Hello World - 1</button>
    <button class="Demo_sayHello_2">Hello World - 2</button>

    <script src="../js/jquery.min.js"></script>
    <script src="demo.js"></script>
    <script type="text/javascript">
        $(function(){
            $('.Demo_sayHello_1').sayHello();
            $('.Demo_sayHello_2').sayHello();
        });
    </script>
</body>
<!-- head等其他代码不做变更，此处不再写出。 -->

你可以发现，咱们添加了两个类名为Demo_sayHello_1和Demo_sayHello_2的按钮，同时在<script type="text/javascript">...</script>处也给两个类名添加了sayHello方法，打开HTML文件预览并点击下两个按钮，可以看到弹出提示的内容是一样的，而我们目的是想让Hello World这些字段随时可以更改，这就是咱们为什么要对插件中的方法进行参数化的原因。

既然已经明白为什么进行参数化，咱们就可以开始下一个操作：

1.打开Demo1文件夹下的demo.js，改写以下代码：

;(function ($) {
    "use strict";
    $.fn.sayHello = function (options) {
        var parameter = $.extend({
            'msg': 'Hello World,ZuoPieFengZi!'
        }, options);

        return this.each(function () {
            var $this = $(this);
            var $parameter = parameter;
            $this.on('click', function() {
                alert($parameter.msg);
            });
        });
    };
})(jQuery);

对于改动的代码，我这里简单解释下：

var parameter = $.extend({  //parameter是参数的意思，这里只是一个变量，名称无所谓。
    'msg': 'Hello World,ZuoPieFengZi!'  //msg是参数名称，Hello World,ZuoPieFengZi!是默认值，也就是当你调
                                        //用方法时，括号内没有任何值时，它就默认显示该值。
}, options);

var $parameter = parameter;  //把刚才的变量赋予给$parameter，方便下方属性调用。
alert($parameter.msg);       //以  变量名.参数名称  进行调用，比如此处是提示$parameter.msg的值。

其他不作注释的代码，仍当作一个模板来处理，这里就不再赘述。

2.打开同目录下的demo.html，改写以下代码：

<body>
    <button class="Demo_sayHello_1">Hello World - 1</button>
    <button class="Demo_sayHello_2">Hello World - 2</button>

    <script src="../js/jquery.min.js"></script>
    <script src="demo.js"></script>
    <script type="text/javascript">
        $(function(){
            $('.Demo_sayHello_1').sayHello({
                msg: "sayHello"
            });
            $('.Demo_sayHello_2').sayHello({
                msg: "sayGoodbye"
            });
        });
    </script>
</body>

现在两个不同类名的按钮可以以参数形式对sayHello方法的msg参数进行赋值。运行demo.html，然后分别点击Hello World - 1和Hello World - 2两个按钮，运行结果如下图：