jQuery插件编写格式

以下是本人从事前端开发,编写jQuery第三方UI插件的一些学习心得。
        jQuery编写插件有两种写法,分别是类和对象,一般用的比较多的是对象。
        对象
的写法:
         (function ($){
            $.fn.extend({
                zzqStu:function (options){
                     //默认值 
                    var student = {
                        name:'张三',
                         sex:'女'
                    }
                    var ops = $.extend(student,options);//合并json数据。如果相同的后面的json数据将前面的覆盖掉
                    alert(JSON.stringify(ops));
                 }
        });    
    })(jQuery);
        类的写法:
        
(function ($) {
            //默认值
            $.fn.student = {
                name:'张三',
                sex:'女'
            };
            $.fn.zzqStu = function (options){
                var ops = $.extend($.fn.student,options);//合并json数据。如果相同的后面的json数据将前面的覆盖掉
                alert(JSON.stringify(ops));
                };
        })(jQuery);  

        而我一般用的比较多的是类的写法。
        (function($){
            
$.fn.winDefault = {

                name:'张三',

                sex:'女'

        };

        //winform为插件名字 

            $.fn.winform = function (options){
                $.zzq.init($.extend($.fn.winDefault,options),this.selector);
            };
            
           
$.zzq = {
                init:function(options,selector){
                        //设置为全局参数
                        this.options = options;
                        this.winform = $(selector);
                        //调用方法
                        this._render();
                },
                _render:function(){
                //代码
                }
            }
        })(jQuery); 

        目前我公司的前端UI插件,我都是用这种写法去编写的。其他程序员调用的时候只需要$("#ID").winform({参数,默认的参数}); 在这里列出两种jQuery编写插件的方法和我个人的编写风格给大家互相学习,互相指导。以上如果有不对的地方请大家指出。

你可能感兴趣的:(js,jquery,插件,编写)