jQuery插件开发前准备(四)

通过上面三个小结的梳理,最终来个总结,将插件通用形式整成模板,以供重复调用。

(function($) {
    var MyPlugin = (function() {
        function MyPlugin(element, options) {
            // 将用户配置项与默认选项进行深拷贝
            this.settings = $.extend(true, $.fn.MyPlugin.defaultValue, options || {});
            this.element = element;
            this.init();
        }
        MyPlugin.prototype = {
            // 初始化插件
            init: function() {
                var _this = this;
            },
            //绘制dom结构
            _initDom: function() {

            }
        };
        // 必须要将该对象返回出去
        return MyPlugin;
    })();
    $.fn.MyPlugin = function(options) {
        return this.each(function() {
            var _this = $(this),
                // 从当前对象下读取实例
                instance = _this.data(‘MyPlugin‘);
            // 如果没有实例新建一个
            if (!instance) {
                // 新建实例,_this表示当前选中元素,options表示配置
                instance = new MyPlugin(_this, options);
                // 将当前实例保存到data数据中
                _this.data(‘MyPlugin‘, instance);
            }
            if ($.type(options) === ‘string‘) {
                return instance[options]();
            }
        });
    };
    // 默认参数
    $.fn.MyPlugin.defaultValue = {
        value1: ‘1‘,
        value2: ‘2‘,
        value3: ‘3‘,
        value4: ‘4‘
    };
})(jQuery);        
时间: 2024-10-07 23:42:06

jQuery插件开发前准备(四)的相关文章

jQuery插件开发前准备

[前言] 关于jQuery的插件,网上一搜一大把,一开始在项目中使用别人写的插件的时候,真是佩服的五体投地,调用的时候简简单单的几句代码,就能实现很复杂的功能.那么如何开发自己的插件呢?其实并不难,从简单的开始,一步一步网上添加功能,最后咋们也能写出功能强大的插件. [jQuery插件开发模式] jQuery插件开发模式有三种: (1)通过$.extend()来扩展jQuery 多用于拓展工具方法,比如给一个数组封装一个方法,功能是将其中的重复元素删除:$.removeSameItem([1,1

jQuery插件开发前准备(二)

在上一节中我们已经使用$.fn.myPlugin给jQuery拓展了一个方法,同时也保证了jQuery的链式调用没有被破坏.细心的小伙伴们可能注意到了,在$.fn.myPlugin的方法中我们使用构造函数生成了一个对象,如下: 其实,我们真正实现自己插件的代码是写在MyPlugin构造函数里面的,这样可以好处是,当我们使用$(selector).myPlugin(options)的时候,会进行如下的操作: (1)选择当前元素,读取当前元素下的MyPlugin属性: (2)判断该属性书否存在,如果

jQuery插件开发前准备(三)

[MyPlugin核心函数实现] 从上两节中我们已经知道了MyPlugin是个构造函数,需要这$.fn.MyPlugin()中实例化,所以MyPlugin应该定义如下: var MyPlugin = (function() { function MyPlugin(element, options) { // 将用户配置项与默认选项进行深拷贝 this.settings = $.extend(true, $.fn.MyPlugin.defaultValue, options || {}); thi

掌握jQuery插件开发

在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求.目前页面中常用的一些组件,都有多种jQuery插件可供选择,网络上也有很多专门收集jQuery插件的网站.利用jQuery插件确实可以给我们的开发工作带来便捷,但是如果只是会简单使用,而对其中的原理不甚了解,那么在使用过程中碰到问题或者对插件进行定制开发时就会有诸多疑惑.本文的目的就是可以快速了解jQuery插件

如何掌握jQuery插件开发(高能)

在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求.目前页面中常用的一些组件,都有多种jQuery插件可供选择,网络上也有很多专门收集jQuery插件的网站.利用jQuery插件确实可以给我们的开发工作带来便捷,但是如果只是会简单使用,而对其中的原理不甚了解,那么在使用过程中碰到问题或者对插件进行定制开发时就会有诸多疑惑.本文的目的就是可以快速了解jQuery插件

【转】简单的jQuery插件开发方法

在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求.目前页面中常用的一些组件,都有多种jQuery插件可供选择,网络上也有很多专门收集jQuery插件的网站.利用jQuery插件确实可以给我们的开发工作带来便捷,但是如果只是会简单使用,而对其中的原理不甚了解,那么在使用过程中碰到问题或者对插件进行定制开发时就会有诸多疑惑.本文的目的就是可以快速了解jQuery插件

JavaScript学习总结(四)——jQuery插件开发与发布

JavaScript学习总结(四)--jQuery插件开发与发布 目录 一.插件开发基础 1.1.$.extend 1.1.1.扩展属性或方法给jQuery 1.1.2.扩展对象 1.2.$.fn.extend 1.3.$.fn 二.插件开发 2.1.jQuery插件开发基本模式 2.2.获取上下文 2.3.第一个jQuery插件 2.4.链式编程 2.5.参数与默认值 2.5.1.默认值 2.5.2.参数对象 2.5.2.参数类型 2.6.命名空间与面向对象 2.7.插件与关联的CSS 2.8

jQuery插件开发精品教程(让你的jQuery更上一个台阶)

刘哇勇的部落格要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈. 学会使用jQuery并不难,因为它简单易学,并且相信你接触jQuery后肯定也使用或熟悉了不少其插件.如果要将能力上升一个台阶,编写一个属于自己的插件是个不错的选择. 本教程可能不是最精品的,但一定是最细致的. jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发

jQuery 插件开发

jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发的,有了模式,我们就能更好地组织我们的代码,并且从这些前人总结出来的模式中学到很多好的实践. jQuery插件开发方式主要有三种: 通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部件工厂方式创建 通常我们使用第二种方法来进行简单插件开发,说简单是相对于第三种方式.第三种方式是用来开发更高级jQuery部件的,该模式开发出来的部件带有很多jQ