原生JS
文章平均质量分 91
guxin_duyin
这个作者很懒,什么都没留下…
展开
-
在项目中用TS封装axios,一次封装团队受益
写在前面虽然说Fetch API已经使用率已经非常的高了,但是在一些老的浏览器还是不支持的,而且axios仍然每周都保持2000多万的下载量,这就说明了axios仍然存在不可撼动的地位,接下来我们就一步一步的去封装,实现一个灵活、可复用的一个请求请发。这篇文章封装的axios已经满足如下功能:无处不在的代码提示;灵活的拦截器;可以创建多个实例,灵活根据项目进行调整;每个实例,或者说每个接口都可以灵活配置请求头、超时时间等;取消请求(可以根据url取消单个请求也可以取消全部请求)基础封装转载 2022-05-23 21:54:11 · 439 阅读 · 0 评论 -
编程训练--每周一道编程题(三)
题目:给定一个整数数组和一个目标值,找出数组中和为目标值的两个数。你可以假设每个输入只对应一种答案,且同样的元素不能被重复利用。例如:给定nums=[2,7,11,15],target=9 因为nums[0]+nums[1]=2+7=9 所以返回[0,1]思路一:遍历数组,从第0个元素开始...原创 2020-03-21 19:36:17 · 172 阅读 · 0 评论 -
编程训练--每周一道编程题(二)
题目:某公司 1 到 12 月份的销售额存在一个对象里面,如下:{1:222, 2:123, 5:888},请把数据处理为如下结构:[222, 123, null, null, 888, null, null, null, null, null, null, null]。方法一:const handle1 = obj => { let array = new Arr...原创 2020-03-14 11:01:42 · 223 阅读 · 0 评论 -
编程训练--每周一道编程题(一)
从今天开始,每周一道编程题,立贴为证!今日编程题:随机生成一个长度为10的整数类型的数组,例如[2,10,3,4,5,11,10,11,20,23],将其排列成一个新数组,要求新数组形式如下,例如[[2,3,4,5],[10,11],[20,23]]其实,我感觉这道题有一点问题,因为没有限制数组内元素的范围,如果是1-100000就不太好分了,所以,我觉得应该限制为1-100;这样这个...原创 2020-03-07 21:46:12 · 313 阅读 · 0 评论 -
漫话JS继承
今天我们讲一下JS的继承。那么什么是继承呢?继承在本质上是特殊和一般的关系,即常说的is-a的关系。子类继承父类,表明子类是一种特殊的父类,具有父类的属性和方法,并且常常具有自己的一些特殊的属性和方法。在js中则表现为子类的实例可以直接使用父类的所有属性和方法,可以减少代码冗余,增强代码可维护性,提高开发效率,是js面向对象编程的一大特性。设计思想JS的继承是靠一种原型链的一级一级...原创 2019-12-12 20:12:31 · 104 阅读 · 0 评论 -
JS基础(四)--DOM编程和BOM编程
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><script原创 2018-03-23 09:27:58 · 255 阅读 · 0 评论 -
从Promise来看JavaScript中的Event Loop、Tasks和Microtasks
前几天面试的时候,碰到了这样一个题:说出下列代码的执行结果:setTimeout(function () { console.log(1)}, 0); new Promise(function executor(resolve) { resolve();}).then(function () { console.log(2);}); //2,...转载 2018-09-11 17:40:14 · 116 阅读 · 0 评论 -
JS中arr.forEach()如何跳出循环
我们都知道for循环里要跳出整个循环是使用break,但在数组中用forEach循环如要退出整个循环呢?使用break会报错,使用return也不能跳出循环。使用break将会报错:var arr = [1,2,3,4,5];var num = 3;arr.forEach(function(v){ if(v == num) { break; } con...原创 2018-10-09 12:00:23 · 30088 阅读 · 4 评论 -
Object.assign详解
一、Object.assign是什么? 首先了解下Object.assign()是什么。我们先看看ES6官方文档是怎么介绍的? Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。 简单来说,就是Object.assign()是对象的静态方法,可以用来复制对象的可枚举属性到目标对象,利...原创 2019-03-30 18:25:50 · 87299 阅读 · 16 评论 -
Grunt、Gulp区别 webpack、 requirejs区别
虽然gulp已经出来很久了,但是一直没有去使用过。得益于最近项目需要,就尝试了一下,以下从几个要点讲一下grunt和gulp使用的区别,侧重讲一下在使用gulp过程中发现的问题。而两种工具孰优孰劣由读者自己判断。1. 书写方式grunt运用配置的思想来写打包脚本,一切皆配置,所以会出现比较多的配置项,诸如option,src,dest等等。而且不同的插件可能会有自己扩展字段,导致认知成本...转载 2019-03-24 17:08:28 · 112 阅读 · 0 评论 -
浅谈前端模块化
模块化是指将 一个复杂的系统分解为多个模块以方便编码。很久以前,开发网页要通过命名空间的方式来组织代码,例如 jQuery 库将它的 API在了 window .$下,在加载完 jQue町后,其他模块再通过 window ♀去使用 jQuery 。这样做有很多问题,其中包括:• 命名空间冲突,两个库可能会使用同一个名称,例如 Zepto ( http: // zeptojs.com )...原创 2019-04-10 14:46:41 · 164 阅读 · 0 评论 -
js中循环对比(for循环,foreach,for in,for of ,map)
对空位的处理for循环(不会忽略空位,标记undefined)var arr =[1,2,undefined,3,null,,7]for (let i=0;i<arr.length;i++) { console.log('for循环',arr[i])}for of(不会忽略空位,标记undefined)for(let i of arr) { con...转载 2019-04-13 15:15:45 · 437 阅读 · 0 评论 -
看完让你彻底搞懂Websocket原理
偶然在知乎上看到一篇回帖,瞬间觉得之前看的那么多资料都不及这一篇回帖让我对websocket的认识深刻有木有。所以转到我博客里,分享一下。比较喜欢看这种博客,读起来很轻松,不枯燥,没有布道师的阵仗,纯粹为分享。废话这么多了,最后再赞一个~一、websocket与httpWebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持持久连接...转载 2019-04-21 16:54:20 · 430 阅读 · 0 评论 -
JS基础(三)----内置对象
Array 对象方法方法描述concat()连接两个或更多的数组,并返回结果。join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。pop()删除并返回数组的最后一个元素push()向数组的末尾添加一个或更多元素,并返回原创 2018-01-14 15:08:32 · 219 阅读 · 0 评论 -
浅析js事件冒泡机制
什么是js事件冒泡呢?简单来说就是事件从事件源逐级向上传递,这一机制就叫事件冒泡机制。打个比方就好像某个地方发生了一件什么大事,县长要报告给市长,市长又要报告给省长,省长最后再报告给中央,这样一级一级往上传递消息。那么在js中这种事件机制有什么影响呢?且看下面代码: 假如我给div、p和span标签各添加了一个点击事件,点击时分别弹出框弹出1、2、3原创 2017-10-01 10:44:09 · 1006 阅读 · 0 评论 -
使用canvas绘制动态时钟
废话不多说,直接上代码! clock function clock(){ var now = new Date(); var ctx = document.getElementById('canvas').getContext('2d'); ctx.save();转载 2017-09-17 15:58:09 · 228 阅读 · 0 评论 -
JavaScript 的闭包是什么
JavaScript 中的变量有两种:全局变量局部变量使用 闭包 我们可以将全局变量变为局部变量。两种变量一个函数可以访问它内部定义的变量,比如这样:function myFunction() { var a = 4; return a * a;}12341234同时函数也可以访问它外部定义的变量,比如这样:var a = 4;f转载 2017-04-16 18:44:43 · 233 阅读 · 0 评论 -
帮助你更快学习JavaScript的六个思维技巧
当人们试图学习JavaScript或其他编程语言的时候,他们通常会遇到如下挑战。一些概念让他们感到困惑,特别是如果之前学过其他类型的语言。很难找到学习的时间(或者动力)去学习。你很容易忘掉之前学到的东西。JavaScript工具太多并且经常更新,以至于很难找到学习的切入点。幸运的是,这些难题最终能够被克服。在这篇文章,我将转载 2017-05-11 21:32:12 · 238 阅读 · 0 评论 -
null,undefined 的区别?
undefined表示变量声明但未初始化时的值,null表示准备用来保存对象,还没有真正保存对象的值。从逻辑角度看,null值表示一个空对象指针。未初始化定义的值用typeof检测出来是"undefined"(字符串),而null值用typeof检测出来是"object"(字符串)。如:var num;这就是声明了变量,但未给变量初始化赋值,此时用typeof检测出来就是“undefi原创 2017-04-15 16:16:36 · 359 阅读 · 0 评论 -
实现带复选框的下拉列表
最近在项目中有遇到需要带复选框的下拉列表,找了好久都没找到相关资料,只好自己用jQuery+css实现了一个简单的小demo,虽然有点丑,但效果基本实现了,大家将就着看吧。注:(以下代码为本人自己编写,只是一个小Demo,可以直接复制使用,但代码只是演示其效果和功能,告诉大家如何去写,所以界面可能没大家想要的那么漂亮!敬请谅解!0.0.)html代码如下原创 2017-04-16 10:54:18 · 32128 阅读 · 3 评论 -
如何实现日期输入框中结束日期晚于开始日期且两个日期在同一个月
前几天做一个需求的时候要实现这么一个功能,有两个日期输入框,结束日期和开始日期要是同一个月。那么具体要如何实现呢?且看以下代码:HTML代码开始日期结束日期JS代码: var d1; var d2; $("#date1").blur(function(){ var date1=$("#date1").val();原创 2017-05-01 22:04:23 · 1074 阅读 · 0 评论 -
javascript静态页面传值的三种方法分享
这篇文章介绍了javascript静态页面传值的三种方法及优缺点,有需要的朋友可以参考一下一:JavaScript静态页面值传递之URL篇能过URL进行传值.把要传递的信息接在URL上.Post.htm复制代码 代码如下:function Post(){//单个值 Read.htm?username=baobao;//多全值 Re转载 2017-05-05 22:15:15 · 314 阅读 · 0 评论 -
JS 中 call、apply、bind 那些事
回想起之前的一些面试,几乎每次都会问到一个js中关于call、apply、bind的问题,比如…怎么利用call、apply来求一个数组中最大或者最小值如何利用call、apply来做继承apply、call、bind的区别和主要应用场景虽然网上有很多关于这方面的博客和文章,但还是决定写一篇自己对这方面知识的理解。转载 2017-05-09 17:19:53 · 182 阅读 · 0 评论 -
JavaScript世界万物诞生记
01- 无中生有起初,什么都没有。造物主说:没有东西本身也是一种东西啊,于是就有了null:现在我们要造点儿东西出来。但是没有原料怎么办?有一个声音说:不是有null嘛?另一个声音说:可是null代表无啊。造物主说:那就无中生有吧!于是:JavaScript中的1号对象产生了,不妨把它叫做No. 1。转载 2017-05-09 17:32:02 · 220 阅读 · 0 评论 -
ECMAScript6十大新特性
ES6(ECMAScript2015)的出现,无疑给前端开发人员带来了新的惊喜,它包含了一些很棒的新特性,可以更加方便的实现很多复杂的操作,提高开发人员的效率。 本文主要针对ES6做一个简要介绍。 主要译自:《Top 10 ES6 Features Every Busy JavaScript Developer Must Know》( 传送门)。也许你还不知道ES6是什么,实际上,转载 2017-07-01 22:15:35 · 252 阅读 · 0 评论 -
如何用JS刷新当前页面
本篇文章主要是对JS刷新当前页面的几种方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助reload 方法,该方法强迫浏览器刷新当前页面。语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页。true, 则以 GET 方式,从服务端取最新的页面, 相原创 2017-06-24 23:13:05 · 1810 阅读 · 0 评论 -
JS实现继承的几种方法
1.call(),apply()方法实现继承 call方法的第一个参数的值赋值给类(即方法)中出现的this call方法的第二个参数开始依次赋值给类(即方法)所接受的参数 apply方法的第一个参数和call相同,第二个参数为数组类型,这个数组中的每个元素依次赋值给类(即方法)所接受的参数简单来说就是call(),apply()方法能改变this的指向,我们就是利用它的这个特性来转载 2017-06-25 23:06:35 · 528 阅读 · 0 评论 -
JS你可能还不知道的一些知识点(一)
1、js程序是用Unicode字符集编写的,2、转义字符:反斜线1234function Test(){ var s='you\'re right,it can\'t be a quote'; console.log(s);}3、slice方法:方转载 2017-07-24 22:04:45 · 261 阅读 · 0 评论 -
正则表达式中数量词的贪婪和非贪婪
在使用各种数量词时,正则表达式总是匹配尽可能多的复合规则的字符,知道允许匹配的上限。例如,在使用表达式/bo+/匹配"booooo"时,会得到匹配结果"booooo"而不是匹配"bo"。这种匹配原则称为“贪婪模式”,正则表达式的匹配原则默认为贪婪模式。在贪婪模式下,总是先尝试在整个字符串搜索匹配字符串,如果不存在匹配,则去掉字符串中最后一个字符,然后再次搜索匹配;如果依然不匹配,则继续去掉原创 2017-08-09 18:45:51 · 440 阅读 · 0 评论 -
JavaScript数组对象Array概述
Array对象是JS中常用的对象,通常我们使用Array对象作为一个容器,存储我们想要保存多数据。一、创建一个数组对象那么如何创建一个数组呢?w3c给出的创建语法是new Array();new Array(size);new Array(element0, element1, ..., elementn);但是在实际使用中,我们更常用的其实是var arr=[];二、数组的属原创 2017-04-17 23:08:00 · 392 阅读 · 0 评论