欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

javascript&&jquery编写插件模板

程序员文章站 2023-12-31 13:24:22
...

javascrpt插件编写模板

这里不分享如何编写插件,只留一个框架模板,使用面向对象的形式进行编写,方便管理

;(function(window,document){
    function FnName(options) {
        //变量定义区
        var name = "foo";

        //默认参数
        var defaults = {

        };

        //如果未传递参数则使用默认参数
        this.ops = options || {};
        for (var i in defaults) {
            if (typeof options[i] === 'undefined') {
                options[i] = defaults[i];
            } else if (typeof options[i] === 'object') {
                for (var deepDef in defaults[i]) {
                    if (typeof options[i][j] === 'undefined') {
                        options[i][j] = defaults[i][j];
                    }
                }
            }
        }

        //初始化函数
        this.init();
        this.bindEvent();
    }
    //构造函数指向自己本身
    FnName.prototype.constructor = FnName;

    //初始化入口函数
    FnName.prototype.init = function(){

    };

    //时间处理函数,建议所有事件处理放入此处
    FnName.prototype.bindEvent = function(){

    };

    //对外暴露的接口
    function fnName(options) {
        return new FnName(options);
    }

}(window,document));


jquery编写插件模板

; (function ($, window, document, undefined) {
    "use strict";
    //默认参数
    var defaults = {

    };

    function FnName($ele, options) {
        //jquery对象
        this.$ele = $ele;
        this.options  = $.extend(defaults, options || {});
        this.init();
    }

    FnName.prototype = {
        //构造函数指向自己
        constructor: FnName,
        //整体入口函数
        init: function () {
            this.bindEvent();
        },
        //事件绑定函数
        bindEvent: function () {

        }
    };


    $.fn.fnName = function (options) {
        //实例化构造函数
        return new FnName($(this), options);
    }

})(jQuery, window, document);


原文链接:http://www.cnblogs.com/shiyou00/p/7366453.html

相关标签: 前端插件封装

上一篇:

下一篇: