js基础
文章平均质量分 56
XK-Frank
这个作者很懒,什么都没留下…
展开
-
postMessage 方法应用
1、子页面向父页面发送消息var parentData = {type: 'passDataBack', data: passData};window.parent.postMessage(parentData, '*');2、父页面向子页面发送消息var data = {type: 'answerResult', data: jsonData.data};$(".courseware_h5 iframe")[0].contentWindow.postMessage(data, '*');3、接原创 2020-09-21 09:40:51 · 1792 阅读 · 0 评论 -
2021年 你要 深入理解浏览器的缓存机制
一、前言缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。对于一个数据请求来说,可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求,或者发起了请求但后端存储的数据和前端一致,那么就没有必要再将数据...原创 2019-10-16 10:01:22 · 172 阅读 · 0 评论 -
设计模式
单例模式总结:1. 单例模式的核心作用是什么?2. 单例模式的常见应用场景?3. 单例模式的优点?4. 常见的主要的单例模式?5. 单例模式如何实现?6. 懒汉式和饿汉式的区别?工厂模式总结:1. 什么是工厂模式?2. 工厂模式的特点?3. 主要基本原则4. 工厂模式分类5. 工厂模式的应用6. 工厂模式用来解决什么问题。代理模式总结设计模式共有23种,他是一...原创 2019-10-16 09:36:05 · 131 阅读 · 0 评论 -
2020 原生js写ajax
//原生js写ajax就像打电话//打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.挺对方说话//ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求(告诉服务器我要什么文件)//4.接收返回值下面是原生js写ajax的具体写法<script>window.onload=function(){ var oBtn = docume...原创 2018-05-02 11:24:14 · 276 阅读 · 0 评论 -
30分钟内学习正则
跳过目录本文目标如何使用本教程正则表达式到底是什么东西?入门测试正则表达式元字符字符转义重复字符类分枝条件反义分组后向引用零宽断言负向零宽断言注释贪婪与懒惰处理选项平衡组/递归匹配还有些什么东西没提到联系作者网上的资源及本文参考文献更新纪录本文目标30分钟内让你明白正则表达式是什么,并对它有一些基本的了解,让你可以在自己的程序或网页里使用它。如何使用本教程最重要的是——请给我30分钟,如果你没有使...原创 2018-05-10 17:36:38 · 382 阅读 · 0 评论 -
js如何往数组Array中添加元素
unshift:将参数添加到原数组开头,并返回数组的长度 [html] view plain copypop:删除原数组最后一项,并返回删除元素的值;如果数组为空则返回undefined [html] view plain copypush:将参数添加到原数组末尾,并返回数组的长度 [html] view plain copyconcat:返回一个新数组,是将参数添加到原数组中构成的 ...原创 2018-04-28 14:39:35 · 44704 阅读 · 0 评论 -
千分位 区分 正则
function numFormat(num) { var res = num.toString().replace(/\d+/, function (n) { // 先提取整数部分 return n.replace(/(\d)(?=(\d{3})+$)/g, function ($1) { ...原创 2018-05-08 10:05:38 · 843 阅读 · 0 评论 -
数组中多条对象去重方式
在数组中都是数字的时候很好去重,例如:var arr=[1,2,2,2,3,4,5,4,5,3,6];可以用两层for循环或者其他方式进行去重在数组中都是对象的时候就需要设置布尔值来进行去重操作,原理也是两层for循环,但是在第一层for循环内需要定义布尔值为true,用来维持一个量,之后在内层for循环中进行比对,如果按照某个条件比对满足的话,布尔值就为false,之后在第一层for循环里第二...原创 2018-05-15 15:19:12 · 473 阅读 · 0 评论 -
JS魔法堂:函数节流(throttle)与函数去抖(debounce)
一、前言 以下场景往往由于事件频繁被触发,因而频繁执行DOM操作、资源加载等重行为,导致UI停顿甚至浏览器崩溃。 1. window对象的resize、scroll事件 2. 拖拽时的mousemove事件 3. 射击游戏中的mousedown、keydown事件 4. 文字输入、自动完成的ke...转载 2018-07-17 09:26:11 · 252 阅读 · 0 评论 -
圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例
题目要求:针对如下DOM结构,编写CSS,实现三栏水平布局,其中left、right分别位于左右两侧,left宽度为200px,right宽度为300px,main处在中间,宽度自适应。要求:允许增加额外的DOM节点,但不能修改现有节点顺序。<div class="container"> <div class="main">main</div> ...原创 2018-08-02 17:22:17 · 184 阅读 · 0 评论 -
QPS/TPS/并发量
我们在日常工作中经常会听到QPS/TPS这些名词,也会经常被别人问起说你的系统吞吐量有多大。这个问题从业务上来讲,可以理解为应用系统每秒钟最大能接受的用户访问量。或者每秒钟最大能处理的请求数; QPS: 每秒钟处理完请求的次数;注意这里是处理完。具体是指发出请求到服务器处理完成功返回结果。可以理解在server中有个counter,每处理一个请求加1,1秒后counter=QPS。 ...原创 2018-09-17 16:00:20 · 1007 阅读 · 0 评论 -
js 数组排序
1. JavaScript的sort()方法var array = [1,4,-8,-3,6,12,9,8];function compare(val1,val2){ return val1-val2;};array.sort(compare);document.write(array);sort()方法按照升序排列数组项,会调用每个数组项的toString()转型方法,...原创 2018-09-14 09:01:44 · 561 阅读 · 0 评论 -
MongoDB(bin目录下)
连接MongoDB(bin目录下)./mongo如果觉得shell里空空的可以输入help,在刷屏的同时大致了解下有哪些方法help现在咱们还没有数据库,咱们创建一个,任性起名:templateuse template咱们确认下,数据库有没有创建成功show dbstemplate 0.078GB如果存在template,就进入,如果没有,在最后保存的时候就会创建template...原创 2018-11-02 10:49:15 · 2583 阅读 · 0 评论 -
前端优化
从建立http连接开始,到页面展示到浏览器里,经历了加载、执行、渲染,重构的几个阶段。将分享下我自己的心得和其他人的优秀经验。加载和执行浏览器是友善的客户端,对同域名并发请求是有数量限制,过去浏览器一般是2个,支持H5的一般是6个;并且服务器端是可以关闭请求。 有朋友不理解,为什么不是并发越多越好?举个例子:百万级的PV,并发数量过大会造成什么样的后果? 由此,所有的优化都是基于这个点和单...原创 2018-11-02 10:55:19 · 484 阅读 · 0 评论 -
Js中的Event Loop(事件循环)机制
前言我们都知道,javascript从诞生之日起就是一门单线程的非阻塞的脚本语言。这是由其最初的用途来决定的:与浏览器交互。单线程意味着,javascript代码在执行的任何时候,都只有一个主线程来处理所有的任务。而非阻塞则是当代码需要进行一项异步任务(无法立刻返回结果,需要花一定时间才能返回的任务,如I/O事件)的时候,主线程会挂起(pending)这个任务,然后在异步任务返回...原创 2019-09-24 14:30:58 · 229 阅读 · 0 评论 -
2021 年 前端面试——设计模式
1、单例模式定义:是保证一个类只有一个实例,并且提供一个访问它的全局访问点。需求:一些对象我们往往只需要一个,比如线程池、全局缓存、浏览器中的window对象、登录浮窗等。优点:1、可以用来划分命名空间,减少全局变量的数量2、可以被实例化,且实例化一次,再次实例化生成的也是第一个实例class CreateUser{ constructo...原创 2019-09-24 16:42:42 · 383 阅读 · 0 评论 -
Mock的好处是什么?
1. 团队可以并行工作有了Mock,前后端人员只需要定义好接口文档就可以开始并行工作,互不影响,只在最后的联调阶段往来密切;后端与后端之间如果有接口耦合,也同样能被Mock解决;测试过程中如果遇到依赖接口没有准备好,同样可以借助Mock;不会出现一个团队等待另一个团队的情况。这样的话,开发自测阶段就可以及早开展,从而发现缺陷的时机也提前了,有利于整个产品质量以及进度的保证。2. 开启TDD模式,即...原创 2018-04-24 12:27:35 · 3750 阅读 · 0 评论 -
forEach()和map()的区别:
相同点:都是循环遍历数组中的每一项forEach和map方法里每次执行匿名函数都支持3个参数,参数分别是item(当前每一项)、index(索引值)、arr(原数组)匿名函数中的this都是指向window只能遍历数组接下来我们看看这两个方法 1.map()方法 map定义和用法: map方法返回一个新的数组,数组中的元素为原始数组调用函数处理后的值。 我的理解就是:原数组进行处理之后对应的一个新...原创 2018-04-19 13:56:22 · 198 阅读 · 0 评论 -
React 常见的面试题
根据记录,问这些问题可能不是深入了解他们在使用 React 方面的经验的最佳方式。http://www.tuicool.com/articles/fqaqqmF之所以标题是《 React 常见的面试题》,其实只是想起一个比《在 React 里面,你可以知道也可以不知道的事, 但是你会发现他们确实很有用》要简单明了的标题而已。http://johannlai.com/2017/04/09/R转载 2017-12-19 18:00:50 · 811 阅读 · 0 评论 -
前端基础进阶(九):详解面向对象、构造函数、原型与原型链
.如果要我总结一下学习前端以来我遇到了哪些瓶颈,那么面向对象一定是第一个毫不犹豫想到的。尽管我现在对于面向对象有了一些的了解,但是当初的那种似懂非懂的痛苦,依然历历在目。为了帮助大家能够更加直观的学习和了解面向对象,我会用尽量简单易懂的描述来展示面向对象的相关知识。并且也准备了一些实用的例子帮助大家更加快速的掌握面向对象的真谛。jQuery的面向对象实现转载 2017-04-28 17:02:23 · 729 阅读 · 0 评论 -
前端基础进阶(十):面向对象实战之封装拖拽对象
终于前面几篇文章,我跟大家分享了JavaScript的一些基础知识,这篇文章,将会进入第一个实战环节:利用前面几章的所涉及到的知识,封装一个拖拽对象。为了能够帮助大家了解更多的方式与进行对比,我会使用三种不同的方式来实现拖拽。不封装对象直接实现;利用原生JavaScript封装拖拽对象;通过扩展jQuery来实现拖拽对象。本文的例子会放置于codepen.io中,供转载 2017-04-28 17:04:34 · 794 阅读 · 0 评论 -
前端基础进阶(十一):详细图解jQuery对象,以及如何扩展jQuery插件
配图与本文无关早几年学习前端,大家都非常热衷于研究jQuery源码。我还记得当初从jQuery源码中学到一星半点应用技巧的时候常会有一种发自内心的惊叹,“原来JavaScript居然可以这样用!”虽然随着前端的发展,另外几种前端框架的崛起,jQuery慢慢变得不再是必须。因此大家对于jQuery的热情低了很多。但是许多从jQuery中学到的技巧用在实际开发中仍然非常好用。简单的转载 2017-04-28 17:05:27 · 512 阅读 · 0 评论 -
前端基础进阶(十二):深入核心,详解事件循环机制
Event LoopJavaScript的学习零散而庞杂,因此很多时候我们学到了一些东西,但是却没办法感受到自己的进步,甚至过了不久,就把学到的东西给忘了。为了解决自己的这个困扰,在学习的过程中,我一直试图在寻找一条核心的线索,只要我根据这条线索,我就能够一点一点的进步。前端基础进阶正是围绕这条线索慢慢展开,而事件循环机制(Event Loop),则是这条线索的最关键的知识点。转载 2017-04-28 17:06:14 · 1203 阅读 · 0 评论 -
前端基础进阶(十三):透彻掌握Promise的使用,读这篇就够了
Promise:高手必备Promise的重要性我认为我没有必要多讲,概括起来说就是必须得掌握,而且还要掌握透彻。这篇文章的开头,主要跟大家分析一下,为什么会有Promise出现。在实际的使用当中,有非常多的应用场景我们不能立即知道应该如何继续往下执行。最重要也是最主要的一个场景就是ajax请求。通俗来说,由于网速的不同,可能你得到返回值的时间也是不同的,这个时候我们就需要等待,转载 2017-04-28 17:07:10 · 1409 阅读 · 0 评论 -
前端基础进阶(十四):es6常用基础合集
ES6基础智商划重点在实际开发中,ES6已经非常普及了。掌握ES6的知识变成了一种必须。尽管我们在使用时仍然需要经过babel编译。ES6彻底改变了前端的编码风格,可以说对于前端的影响非常巨大。值得高兴的是,如果你熟悉ES5,学习ES6并不需要花费太多的时间就可以掌握,因为常用的基础语法并不多,花少量的时间,就可以开始我们的ES6之旅了。这篇文章不会详细的告诉你ES6的转载 2017-04-28 17:08:04 · 1057 阅读 · 0 评论 -
前端基础进阶(一):内存空间详细图解
变量对象与堆内存var a = 20;var b = 'abc';var c = true;var d = { m: 20 }因为JavaScript具有自动垃圾回收机制,所以对于前端开发来说,内存空间并不是一个经常被提及的概念,很容易被大家忽视。特别是很多不是计算机专业的朋友在进入到前端之后,会对内存空间的认知比较模糊,甚至有些人干脆就是一无所知。当然也包转载 2017-04-25 10:09:43 · 738 阅读 · 0 评论 -
前端基础进阶(二):执行上下文详细图解
先随便放张图我们在JS学习初期或者面试的时候常常会遇到考核变量提升的思考题。比如先来一个简单一点的。console.log(a); // 这里会打印出什么?var a = 20;暂时先不管这个例子,我们先引入一个JavaScript中最基础,但同时也是最重要的一个概念执行上下文(Execution Context)。每次当控制器转到可执行代码转载 2017-04-25 15:11:16 · 676 阅读 · 0 评论 -
前端基础进阶(三):变量对象详解
开年之后工作热情一直不是很高,这几天一直处于消极怠工状态。早上不想起床,起床了不想上班。明明放假之前工作热情还一直很高,一直心心念念的想把小程序项目怼出来,结果休假回来之后画风完全不一样了。我感觉自己得了严重了节后综合征。还好撸了几篇文章,勉强表示这一周的时间没有完全浪费。这篇文章要给大家介绍的是变量对象。在JavaScript中,我们肯定不可避免的需要声明变量和函数,可是JS解析器是如何转载 2017-04-25 17:38:28 · 416 阅读 · 0 评论 -
前端基础进阶(四):详细图解作用域链与闭包
攻克闭包难题初学JavaScript的时候,我在学习闭包上,走了很多弯路。而这次重新回过头来对基础知识进行梳理,要讲清楚闭包,也是一个非常大的挑战。闭包有多重要?如果你是初入前端的朋友,我没有办法直观的告诉你闭包在实际开发中的无处不在,但是我可以告诉你,前端面试,必问闭包。面试官们常常用对闭包的了解程度来判定面试者的基础水平,保守估计,10个前端面试者,至少5个都死在闭包上转载 2017-04-27 11:10:42 · 586 阅读 · 0 评论 -
前端基础进阶(五):全方位解读this
~我们在学习JavaScript的过程中,由于对一些概念理解得不是很清楚,但是又想要通过一些方式把它记下来,于是就很容易草率的给这些概念定下一些方便自己记忆的有偏差的结论。危害比较大的是,有的不准确的结论在网上还广为流传。比如对于this指向的理解中,有这样一种说法:谁调用它,this就指向谁。在我刚开始学习this的时候,我是非常相信这句话的。因为在一些情况下,这样理转载 2017-04-27 11:23:23 · 446 阅读 · 0 评论 -
前端基础进阶(六):在chrome开发者工具中观察函数调用栈、作用域链与闭包
配图与本文无关在前端开发中,有一个非常重要的技能,叫做断点调试。在chrome的开发者工具中,通过断点调试,我们能够非常方便的一步一步的观察JavaScript的执行过程,直观感知函数调用栈,作用域链,变量对象,闭包,this等关键信息的变化。因此,断点调试对于快速定位代码错误,快速了解代码的执行过程有着非常重要的作用,这也是我们前端开发者必不可少的一个高级技能。当然如转载 2017-04-27 11:45:20 · 2755 阅读 · 0 评论 -
前端基础进阶(七):函数与函数式编程
函数:菜鸟收割者纵观JavaScript中所有必须需要掌握的重点知识中,函数是我们在初学的时候最容易忽视的一个知识点。在学习的过程中,可能会有很多人、很多文章告诉你面向对象很重要,原型很重要,可是却很少有人告诉你,面向对象中所有的重点难点,几乎都与函数息息相关。包括我之前几篇文章介绍的执行上下文,变量对象,闭包,this等,都是围绕函数来展开。我知道很多人在学习中,很急转载 2017-04-27 14:05:12 · 455 阅读 · 0 评论 -
JavaScript 里有哪些数据类型,解释清楚 null 和 undefined,解释清楚原始数据类型和引用数据类型。比如讲一下 1 和 Number(1)的区别
当讨论JavaScript中的原始数据类型时,大多数人都知道的基本知识,从String,Number到Boolean。这些原始类型相当简单,行为符合常识。但是,本文将更多聚焦独特的原始数据类型Null和Undefined,是什么让他们如此相似,却又似是而非。一、理解Null和Undefined在JavaScript中,null是字面量同时也是语言中的关键字,用来表示无法识别的对象值。换原创 2017-07-22 15:21:44 · 2938 阅读 · 0 评论 -
将一下 prototype 是什么东西,原型链的理解,什么时候用 prototype
prototype prototype是函数对象上面预设的对象属性 1. JS中所有的东西都是对象,每个对象都有prototype这个属性,这个属性是一个对象(object) 2. JS中所有的东西都由Object衍生而来, 即所有东西原型链的终点指向Object.prototype 3. JS中构造函数和实例(对象)之间有微妙的关系,构造函数通过定义prototype来约...原创 2018-04-19 14:05:15 · 1274 阅读 · 0 评论 -
前端基础进阶(八):深入详解函数的柯里化
配图与本文无关柯里化是函数的一个比较高级的应用,想要理解它并不简单。因此我一直在思考应该如何更加表达才能让大家理解起来更加容易。想了很久,决定先抛开柯里化这个概念不管,补充两个重要、但是容易被忽略的知识点。一、补充知识点之函数的隐式转换JavaScript作为一种弱类型语言,它的隐式转换是非常灵活有趣的。当我们没有深入了解隐式转换的时候可能会对一些运算的结果会感动困惑,转载 2017-04-28 17:01:05 · 804 阅读 · 0 评论