2017年05月05日
Jquery插件模板

安卓和IOS web开发时遇到的bug,总结两个设备展示和处理上的不同。

jQuery 插件模板,精简解释版

/*
 * jQuery 插件模板
 */

(function ($) {
    'use strict';

    /**
     * 定义插件的构造方法,用于构造函数,
     * @param element 选择器对象
     * @param options 配置项
     */
    var Plugin = function (element, options) {

        //合并参数设置,对象的属性复制
        this.options = $.extend({}, Plugin.defaults, options);

        //将选择器对象赋值给插件,方便后续调用
        this.$element = $(element);

        //进行一些初始化工作
        this.init();
    };


    /**
     * 插件默认配置项
     * @type 
     */
    Plugin.defaults = {
        option1: "...",
        option2: "..."
    };


    /**
     * 定义插件的方法
     * @type ,
     * 插件的基础方法,构造函数实例化的时候不实例化这部分,这部的方法是通过原型链调用
     */
    Plugin.prototype = {

        init: function () {
            console.log('init');
        },

        func1: function () {

        },

        func2: function () {

        }
    };
    
    /**
     * 定义插件,扩展$.fn,为jQuery对象提供新的插件方法
     * 调用方式:$.fn.Plugin()
     * @param option {string/object}
     */
    $.fn.Plugin = function (option) {
        return this.each(function () {
            var $this = $(this),
            	data = $this.data('PluginData'),
            	options = typeof option == 'object' && option;

            //只实例化一次,后续如果再次调用了该插件时,则直接获取缓存的对象
            if (!data) {
            	// 构造函数实例化
                $this.data('PluginData', (data = new Plugin(this, options)));
            }
            //如果插件的参数是一个字符串,则直接调用插件的名称为此字符串方法
            if (typeof option == 'string') data[option]();
        });
    };

    // 设置构造函数
    $.fn.Plugin.Constructor = Plugin;

    /**
     * 可选:
     * 通过在 dom 上定义相应的参数 默认实例化相应的dom
     */
    $(document).ready(function () {
    	$('[data-role=Plugin"]').Plugin();
    });
})($);