JS中常用的封装函数4种方法

1. 函数封装法

function box(){

               }

2. 封装成对象 :

let Cookie = {

            get(){

                   },

            set(){

                   }

               }

3. 封装成构造函数:

function Dog(){

               }  

4. 类的方法

class Person{

                  constructor(){

            }

            show(){

            }

             }

jQuery中常见的封装函数方法:

方法一:

$.extend({

    log(s){

        console.log(s)//封装了打印函数

    }

})

方法二:

$.fn.mytest = function(){

            console.log(this,1111)//this 伪数组

            this.css({color:'yellow'})

        }

        $('div').mytest()//指出哪个选择器调用这个函数

方法三:也可以在原型函数上添加,例如:

var arr = [1,2,3]

        // arr.map(function(){})

        Array.prototype.myMap = function(fn){    //原型上添加

        }

        arr.myMap(function(){                    //数组上直接调用这个函数

        })

 

欢迎大家多多交流,如有疑问可以在博客上问我哦~

JS和JQUERY常见函数封装方式的更多相关文章

  1. offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. jQuery的封装方式与JS中new的实现原理

    function jQuery() { return new jQuery.fn.init(); } jQuery.fn = jQuery.prototype = { init: function() ...

  3. JS对象转URL参数(原生JS和jQuery两种方式)

    转自:点击打开链接 现在的js框架将ajax请求封装得非常简单,例如下面: $.ajax({ type: "POST", url: "some.php", da ...

  4. 最简单的原生js和jquery插件封装

    最近在开发过程中用别人的插件有问题,所以研究了一下,怎么封装自己的插件. 如果是制作jquery插件的话.就将下面的extend方法换成  $.extend 方法,其他都一样. 总结一下实现原理: 将 ...

  5. js与jQuery实现方式对比汇总

      CreateTime--2016年12月16日09:11:23Author:Marydonjs与jQuery实现方式对比汇总 <div id="ListContainer" ...

  6. js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用)

    js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递 二.js进阶ajax函数封装 ajax1.js function ajax(ur ...

  7. <<< 网页中如何利用原生js和jquery储存cookie

    javascript当中的cookie机制,使应用达到了真正的全局变量的要求,cookie是浏览器提供的一种机制,它将document 对象的cookie属性提供给JavaScript.可以由Java ...

  8. ajax请求原理及jquery $.ajax封装全解析

    .ajax原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得 ...

  9. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

随机推荐

  1. MyBatis实现批量添加

    在进行后端的操作时,批量添加总是少不了,话不多说,下面贴上代码 Mybatis代码: <insert id="batchInsert" parameterType=" ...

  2. Spring源码之AOP的使用

    Spring往期精彩文章 Spring源码搭建 Spring源码阅读一 前言 我们都知道Java是一门面向对象(OOP)的语言,所谓万物皆对象.但是它也存在着一些个弊端:当你需要给多个不具有继承关系的 ...

  3. Dart 中的final 和 const

    Dart 常量和常量值 final 和 const 两个关键字用来定义常量,有什么区别呢? final 声明的是运行时常量,const声明的是编译时常量 const 可以声明常量值 举个例子: imp ...

  4. Centos7 配置JDK 提示 /lib/ld-linux.so.2: bad ELF interpreter: No such file or direct

    解决办法:yum install glibc.i686

  5. Task 异步小技巧

    原文地址:Task 异步小技巧 - 一事冇诚 - 博客园 (cnblogs.com) async Task 语法糖出来后,异步编程变得非常简单,适合需要耗费较长时间的任务. 有些小伙伴使用后可能会非常 ...

  6. vue3 element-plus 配置json快速生成table列表组件,提升生产力近500%(已在公司使用,持续优化中)

    ️本文为博客园首发文章,未获授权禁止转载 大家好,我是aehyok,一个住在深圳城市的佛系码农‍♀️,如果你喜欢我的文章,可以通过点赞帮我聚集灵力️. 个人github仓库地址: https:gith ...

  7. Spring的JDK动态代理如何实现的(源码解析)

    前言 上一篇文章中提到了SpringAOP是如何决断使用哪种动态代理方式的,本文接上文讲解SpringAOP的JDK动态代理是如何实现的.SpringAOP的实现其实也是使用了Proxy和Invoca ...

  8. 这部分布式事务开山之作,凭啥第一天预售就拿下当当新书榜No.1?

    大家好,我是冰河~~ 今天,咱们就暂时不聊[精通高并发系列]了,今天插播一下分布式事务,为啥?因为冰河联合猫大人共同创作的分布式事务领域的开山之作--<深入理解分布式事务:原理与实战>一书 ...

  9. Kafka消息(存储)格式及索引组织方式

    要深入学习Kafka,理解Kafka的存储机制是非常重要的.本文介绍Kafka存储消息的格式以及数据文件和索引组织方式,以便更好的理解Kafka是如何工作的. Kafka消息存储格式 Kafka为了保 ...

  10. .NET CLI简单教程和项目结构

    WHAT IS .NET CLI ? .NET 命令行接口 (CLI) 工具是用于开发.生成.运行和发布 .NET 应用程序的跨平台工具链. 来源:.NET CLI | Microsoft Docs ...