JQ插件封装造轮子

BLUE 发布于2019-08-21 17:51 / 2062人阅读

摘要：插件封装第一天查看代码，发现好多方法都是使用来封装方法，但又是什么，控制台后发现都是的方法结果为可以为对象添加方法和属性。不能使用应为测试代码使用求最大高度求最宽的插件封装第二天如上面如果封装方法过多，看起来会非常乱，这时可以使用的。

JQ插件封装第一天

查看jq代码，发现好多方法都是使用$.fn来封装方法，但fn又是什么，控制台console后发现都是jq的方法
console.log($.fn)

$.prototype===$.fn,结果为true

prototype：可以为对象添加方法和属性。 这样就可以理解为给jq原型添加方法及属性。

自己写个小例子：

1.实现字符串转int方法（同parseInt()） html:

js:

//防止全局变量污染，影响其他插件
(function($){
    $.fn.isnum=function(str){
        //注意：操作this的时候这里已经是$(this),请使用jq的操作dom的方法。
        //不能使用value,应为val()
        //测试代码：this.get(0).value=((+str||str==0)?(+str):NaN)
        this.val((+str||str==0)?(+str):NaN);
        console.log(this.value);
    }
})(jQuery)

使用

$("input").isnum("0999");//999
$("input").isnum("99s");//NaN

2.求最大div高度 html:

js:

// 求最宽的div

    (function($){
        $.fn.max_w = function(){
            var max = 0;
            $.each(this,function(i,item){
                max = Math.max(max,$(item).width());
            })
            return max;
        }
    })(jQuery)

    alert($("div").max_w())

JQ插件封装第二天

如上面如果封装方法过多，看起来会非常乱，这时可以使用jq的extend。

jQuery.extend( target [, object1 ] [, objectN... ] )
jQuery.extend( [ deep ], target , object1 [, objectN... ] )

参数描述
deep 可选/Boolean类型指示是否深度合并对象，默认为false。如果该值为true，且多个对象的某个同名属性也都是对象，则该"属性对象"的属性也将进行合并。
target Object类型目标对象，其他对象的成员属性将被复制到该对象上。 object1 可选/Object类型第一个被合并的对象。
objectN 可选/Object类型第N个被合并的对象。

个人理解extend的作用就是把好多对象合并到一个对象里面，目前有三个以上参数，第一个是否深度合并，第二个合并到的目标，第三个被合并的对象，三个以后同第三个以此类推，通常只写一种参数即可：合并的object

下面做个测试：

var a = function(){
    console.log("a");
}
var b = function(){
    console.log("b");
}
var c = function(){
    console.log("c");
}
var f = new Object;
//把a，b，c放到一个对象合集然后合并到f对象里
$.extend(f,{a,b,c})
console.log(f);

结果：

如果要合并到jquery对象中上面的$.extend(f,{a,b,c})需要把f改为$或者jquery,也可以直接省略该参数$.extend({a,b,c})，开发中就可以直接使用$.extend({a,b,c}),这样就可以对jq全局对象进行添加方法了.

一般开发中都是对某个实例进行添加方法，再看下第一天的test代码

(function($){ 
$.fn.isnum=function(str){
this.val((+str||str==0)?(+str):NaN); console.log(this.value); }
})(jQuery)

都是基于fn实例上添加方法，所以使用$.fn.extend（插件开发经常使用）
对上面的方法进行改写：

 (function($){
 $.fn.extend({
     isnum:function(str){
         this.val((+str||str==0)?(+str):NaN);
     },
     isNaN:function(){
         //…………
     }
  })
 
})(jQuery)
$("input").isnum("test")

总结：

在封装插件时常用$.fn.extend（对dom操作时）.在封装像parsInt这样的方法时候适用于$.extend

上面差不多就满足了插件复用的基本需求了，但是，当你想在原来基础上添加内容，或者修改变量时，就需要传参来解决了。

写个测试：给文档div设置高度，宽度，背景及自定义css
html:

js:

(function($){
            $.fn.extend({
                e_width:function(options){
                    var settings = $.extend({
                        width:"50px",
                        height:"20px",
                        background:"red"
                    },options);
                     this.each(function(){
                        $(this).css(settings);
                    });
                }
            })
        })(jQuery)
        $("div").e_width({
            "opacity":0.5,
            "cursor":"pointer"
        })

声明一个变量settins来初始化默认数据（即没有传参的默认状态），然后将opions形参合并到settins，最后作用到css中，所以在实例中添加参数就可以合并到settings中，完成自定义css，而且继续传参数会代替前面初始设置的值。

封装

(function(){
    $.extend({
    //变量在数组中是否存在，存在的位置
        areArray(b,arr){
            for(var i in arr){
                if(arr[i] == b){
                     return arr[i]+"所在位置"+i;
                }
            }
        },
        unrepeat(arr){
        //unrepeat 数组去重，返回去重后的数组
            for(var i =0;i

云服务器 GPU云服务器造轮子 jq插件 jq滚动条插件 jq弹出层插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90107.html

原生js造轮子之模仿JQ的slideDown()与slideUp()

摘要：代码如下原生调用该文件中加入这一行代码参数参数时间调用该文件加入这一行代码中引入绑定到实例原型上组件中调用鄙人创建了一个群，供大家学习交流，希望和大家合作愉快，互相帮助，交流学习，以下为群二维码代码如下: const slider = (function() { var Slider = {}; // the constructed function,timeManager,...

王笑朝 2019-08-29 17:18 评论0 收藏0
原生js造轮子之模仿JQ的slideDown()与slideUp()

摘要：代码如下原生调用该文件中加入这一行代码参数参数时间调用该文件加入这一行代码中引入绑定到实例原型上组件中调用鄙人创建了一个群，供大家学习交流，希望和大家合作愉快，互相帮助，交流学习，以下为群二维码代码如下: const slider = (function() { var Slider = {}; // the constructed function,timeManager,...

RancherLabs 2019-08-26 13:22 评论0 收藏0
手摸手，带你封装一个vue component

摘要：灵活性和针对性。所以我觉得大部分组件还是自己封装来的更为方便和灵活一些。动手开干接下来我们一起手摸手教改造包装一个插件，只要几分钟就可以封装一个专属于你的。项目地址：vue-countTo配套完整后台demo地址：vue-element-admin系类文章一：手摸手，带你用vue撸后台系列一（基础篇）系类文章二：手摸手，带你用vue撸后台系列二（登录权限篇）系类文章三：手摸手，带...

pkhope 2019-08-20 15:48 评论0 收藏0
vue无缝滚动的插件开发填坑分享

摘要：写插件的初衷项目经常需要无缝滚动效果，当时写的时候用用这个老插件，相对不上很好用。后来转向在没有找到好的无缝滚动插件，除了配置可以实现但是相对来说太重了，于是自己造了个轮子。写插件的初衷 1.项目经常需要无缝滚动效果，当时写jq的时候用用msClass这个老插件，相对不上很好用。2.后来转向vue在vue-awesome没有找到好的无缝滚动插件，除了配置swiper可以实现但是相对来...

岳光 2019-08-22 14:04 评论0 收藏0
用Vue搭建一个应用盒子（二）：datetime-picker

摘要：接着上次的进度，我们已经实现了一个。我们应该完成的效果是一个，日期选择器。好了，到这一步，还不能实现这个插件。我们还需要添加一个方法，因为并没有被执行，所以我们需要添加如下代码好了，这里事件选择插件就能顺利使用了。与的结合使用实例接着上次的进度，我们已经实现了一个todo-list。它已经具备了基本的功能，可以新建、编辑、删除任务。但是美中不足的是，它的时间设定上只能通过输入一段字符...

Ververica 2019-08-26 11:32 评论0 收藏0