zoukankan      html  css  js  c++  java
  • javascript&&jquery编写插件模板

    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);
  • 相关阅读:
    vue的devTools谷歌插件安装使用
    springcloud(14)seata分布式事务
    springcloud(13)zipkin工具的使用
    springcloud(12)SentinelResource注解配置应用及其他
    springcloud(11)sentinel安装和基本使用
    springcloud(10)Nacos集群(windows环境)
    springcloud(9)Nacos基本操作
    springcloud(8)GateWay网关
    springcloud(7)hystrix服务熔断和dashboard
    通用语言
  • 原文地址:https://www.cnblogs.com/shiyou00/p/7366453.html
Copyright © 2011-2022 走看看