javascript代码实例教程-Jquery扩展-手把手带你体验

发布时间:2019-01-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Jquery扩展-手把手带你体验脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 jquery扩展是在项目中经常用到的,有时候为了提取一些公共方法,有时候为了模块化管理等等,下面我们来体验一下。当然扩展离不开Jquery几个基础方法

 

   1:$.extend()

 

   2:$.fn.functionName 添加新的方法

 

介绍1:$.extend方法

(1):合并到Jquery全局变量

 

$.extend({

     sayHi: function (content) {

         console.LOG("say:" + (content ? content : "default"));

     }

 });

 $.sayHi();

 $.sayHi("haha");

 

 

 

 

 

 

(2):合并对象字面量

 

VAR defaultsetting = { name: 'boy', age: 30, cITy: 'bj' };

var inputSetting = { name: 'girl', age: 60, city: 'bj', hasChild: 'yes' };

var result = $.extend({}, defaultSetting, inputSetting);

console.log(result);

 

 

 

 

 

 

(3)合并到jquery对象

    $.fn.extend({ sayHi: function (content) {

        console.log("say:" + (content ? content : "default"));

           }

     });

    $("a").sayHi();

 

 

 

 

 (4)深度合并

 

var ndefaultSetting = { name: 'nihao', info: { height: 20, width: 10, glasses: 1,attentionMe:'hi'} };

var nInputSetting = { name: 'wohao', info: { height: 30, width: 30, glasses: 0} };

var nRet = $.extend({}, ndefaultSetting, nInputSetting);

var ndepthFalseRet = $.extend(false, {}, ndefaultSetting, nInputSetting);

var ndepthTrueRet = $.extend(true, {}, ndefaultSetting, nInputSetting);

console.log(nRet);

console.log(ndepthFalseRet);

console.log(ndepthTrueRet);

结果:

 

 

 

开始编写

1.创建scoPE area止插件"污染"

 

(function ($) {

 

  })($);

2.编写逻辑代码,设置颜色

 

(function ($) {

     var defaultSettings = { color: "red" };

     $.fn.extend({

         setColor: function (options) {

             var opts = $.extend({}, defaultSettings, options); //合并参数

             this.each(function () {  //循环考虑到的是当前元素为集合

                 var $this = $(this);

                 $this.css({ color: opts.color });

             });

         }

     });

 })($);

3.测试

1

<p>   哈哈哈</p>

 

 

$(function () {

     alert("设置红色");

     $("p").setColor();

     alert("设置黑色");

     $("p").setColor({ color: "black" });

 });

效果为先变红,再次变黑

 

  

 

这样一个最基本的扩展就完成了。

 

 

 

改造:用对象来承接,方便维护管理

 

(function ($) {

    //定义构造函数

    var myPlugin_SetColor = function (ele, opts) {

        this.$element = ele;

        this.defaultSettings = { color: "red" };

        this.options = $.extend({}, this.defaultSettings, opts);

 

    }

    //定义方法

    myPlugin_SetColor.PRototype = {

        setColor: function () {

            return this.$element.css({ color: this.options.color });

        }

    }

    //使用插件

    $.fn.setColor = function (options) {

        return new myPlugin_SetColor(this, options).setColor();

    }

 

})($);

  测试代码

 

 

$(function () {

     alert("设置红色");

     $("p").setColor();

     alert("设置橙色");

     $("p").setColor({ color: "orange" });

 });

  效果

 

 

 

 补充:最后补充一些小点

 

 

说明:

 

1、代码最前面的分号,可以防止多个文件压缩合并以为其他文件最后一行语句没加分号,而引起合并后的语法错误。

 

2、匿名函数(function(){})();:由于Javascript执行表达式是从括号里面到外面,所以可以用圆括号强制执行声明的函数。避免函数体内和外部的变量冲突。

 

3、$实参:$是jquery的简写,很多方法和类库也使用$,这里$接受jQuery对象,也是为了避免$变量冲突,保证插件可以正常运行。

 

4、window, document实参分别接受window, document对象,window, document对象都是全局环境下的,而在函数体内的window, document其实是局部变量,不是全局的window, document对象。这样做有个好处就是可以提高性能,减少作用域链的查询时间,如果你在函数体内需要多次调用window 或 document对象,这样把window 或 document对象当作参数传进去,这样做是非常有必要的。当然如果你的插件用不到这两个对象,那么就不用传递这两个参数了。

 

5、最后剩下一个undefined形参了,那么这个形参是干什么用的呢,看起来是有点多余。undefined在老一辈的浏览器是不被支持的,直接使用会报错,js框架要考虑到兼容性,因此增加一个形参undefined

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-Jquery扩展-手把手带你体验全部内容,希望文章能够帮你解决javascript代码实例教程-Jquery扩展-手把手带你体验所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。