jQuery插件开发

最新推荐文章于 2023-08-31 18:16:34 发布

Brent-CCNU

最新推荐文章于 2023-08-31 18:16:34 发布

阅读量1.4k

点赞数 1

分类专栏： JQuery 文章标签： jquery jquery插件

本文链接：https://blog.csdn.net/zitong_ccnu/article/details/53139090

版权

JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Lightweight Start 模式

1.什么是Lightweight模式

这种模式适合于插件开发新手或者是只是想实现简单的功能，Lightweight start使用了以下内容：

常见最佳实践
window、document和undefined作为参数传入
基本的默认对象
简单的插件构造函数，用于与初始化创建相关的逻辑，以及用于所使用元素的赋值
扩展有默认值的选项
构造函数周围的lightweight包装器，避免出现多实例

// 函数调用之前的分号是为了安全的目的，防止前面的其他插件没有正常关闭。
;(function($, window, document, undefined) {
    "use strict";

    // 这里使用的undefined是ECMAScript3里的全局变量undefined，是可以修改的。
    // undefined没有真正传进来，以便可以确保该值是真正的undefined。ECMAScript5里，undefined是不可修改的。

    // window和document传递进来作为局部变量存在，而非全局变量,
    // 因为这可以加快解析流程以及影响最小化（尤其是同事应用一个插件的时候）。

    // 创建默认值
    var pluginName = "defaultPluginName";
    var defaults = {
        propertyName: "value"
    };

    // 插件真正的构造函数
    function Plugin(element, options) {
        this.element = element;

        // jQuery extend方法用于将两个或多个对象合并在一起，在第一个对象里进行排序。
        // 第一个对象通常为空，因为我们不想为插件的新实例影响默认的option选项。
        this.options = $.extend({}, defaults, options);

        this._defaults = defaults;
        this._name = pluginName;

        this.init();
    }

    $.extend(Plugin.prototype, {
        init: function() {
            // 这里处理初始化逻辑
            // 已经可以访问DOM，并且通过实例访问options，例如this.element, this.options.
            // 可以添加更多的方法，调用方式如下所示
            this.yourOtherFunction("jQuery Boilerplate");
        },

        yourOtherFunction: function(text) {
            // 逻辑代码
            $(this.element).text(text);
        }
    });

    // 真正的插件包装，防止出现多实例
    $.fn[pluginName] = function(options) {
        return this.each(function() {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Plugin(this, options));
            }
        });
    }

})(jQuery, window, document);

2.用法

$("#elem").defaultPluginName({
    propertyName: "a custom value"
});

3.实战

基于checkbox实现开关按钮

1.html code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>flipswitch</title>

    <style type="text/css">
        .flipswitch {
            width: 48px;
            height: 28px;
            border-radius: 14px;
            cursor: pointer;
            background-color: #ccc;
            display: inline-block;
            text-align: left;
            position: relative;
            overflow: hidden;
        }

        .flipswitch > input[type=checkbox] {
            width: 100%;
            height: 100%;
            position: absolute;
            top: -10%;
            left: -5%;
            opacity: 0.01;
            cursor: pointer;
        }

        .flipswitch.active {
            text-align: right;
            background-color: #5cb85c;
        }

        .flipswitch span {
            width: 24px;
            height: 24px;
            margin: 2px;
            border-radius: 13px;
            display: inline-block;
            background: #fff;
        }
    </style>

    <script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.flipswitch.js"></script>
    <script type="text/javascript">
        (function($, window, document) {
            $(function() {
                $(".flipswitch").flipswitch(function(status) {
                    console.log(status);
                });
            })
        })(jQuery, window, document);
    </script>
</head>
<body>
    <div style="width: 800px; margin: 20px auto;">
        <input type="checkbox" class="flipswitch" checked />
    </div>
</body>
</html>

2.jquery.flipswitch.js

;(function ($, window, document, undefined) {
    "use strict";

    var pluginName = "flipswitch";

    function Plugin(element, statusChanged) {
        this.element = element;
        this.statusChanged = statusChanged;
        this._name = pluginName;
        this.init();
    }

    $.extend(Plugin.prototype, {
        init: function () {
            var base = this;
            var statusChanged = base.statusChanged;
            var $elem = $(base.element);

            $elem.wrap('<div class="' + $elem.attr("class") + '"></div>');
            $("<span></span>").insertBefore($elem);

            var $parent = $elem.parent();
            if($elem.prop("checked")) {
                $parent.addClass("active");
            }

            $elem.on("change", function() {
                $parent.toggleClass("active");
                if($.isFunction(statusChanged)) {
                    statusChanged($elem.prop("checked"));
                }
            })
        }
    });

    $.fn[pluginName] = function (statusChanged) {
        return this.each(function () {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" +
                    pluginName, new Plugin(this, statusChanged));
            }
        });
    };

})(jQuery, window, document);

3.效果图
flipswitch

Brent-CCNU

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery插件开发

Lightweight Start 模式1.什么是Lightweight模式这种模式适合于插件开发新手或者是只是想实现简单的功能，Lightweight start使用了以下内容：常见最佳实践window、document和undefined作为参数传入基本的默认对象简单的插件构造函数，用于与初始化创建相关的逻辑，以及用于所使用元素的赋值扩展有默认值的选项构造函数周围的lightweig
复制链接

扫一扫