weixin_43562354的博客

原创 闭包及其相关整理

一、变量作用域js的作用域：局部变量和全局变量函数内部可以读取全局变量，但是在函数外部无法读取函数内部的局部变量注意点：在函数内部声明变量的时候，一定要使用var命令，如果不是，声明的就是一个全局变量二、从外部读取函数内部的局部变量function f1(){ var num=789; function f2(){ alert(num); } return f2;}v...

原创 如何正确判断this？箭头函数的this是什么？

function foo() { console.log(this.a)}var a = 1foo()const obj = { a: 2, foo: foo}obj.foo()const c = new foo()对于直接调用foo()来说，不管foo函数被放在什么地方，this一定是window；对于obj.foo()来说，谁调用了函数，谁就是this，此...

原创 new的原理

new内部原理：1、创建一个空对象，这个对象继承Func.prototype;2、执行构造函数，并将this指向刚刚创建的新对象；3、返回新函数function _new(){ //拿到传入参数中的第一个参数，即构造函数Func var Func=[].shift.call(arguments); //创建一个空对象obj,并让其继承Func.prototype va...

原创 等价类划分法测试用例

一、基本概念等价类是指程序输入域的子集。思想是：将程序的输入域划分为若干个区域（等价类），并在每个等价类中选择一个具有代表性的元素生成测试用例。这是黑盒测试用例设计方法一）划分等价类1、有效等价类和无效等价类有效等价类是指对于程序的规格来说是合理的，有意义的输入数据构成的集合，可以检验程序是否可以实现规格说明中所规定的功能需求。无效等价类是指对程序的规格说明是不合理的或是没有意义的输入...

原创 数组常用的api

一、向数组添加元素的方法Array.push();在数组的末尾处添加；会改变原有数组，返回值是添加数据后数组的新长度。Array.unshift();在数组的开头处添加，返回值是添加数组后数组的新长度；会改变原有数组splice(index,0,value1,value2,...)向数组的指定index处插入；返回的是被删除的元素；会改变原有数组二、向数组删除元素的方法1.p...

原创 类数组和数组的区别

类数组：1、拥有length属性，其它属性（索引）为非负整数2、不具有数组所具有的的方法；3、类数组是一个普通对象，而真实的数组是Array类型常见的类数组：函数的参数arguments；DOM对象列表（通过document.querySelectorAll）得到的列表；jquery对象（比如$(“div”)）类数组可以转换为数组： Array.from(arrayLike);...

原创 常用linux命令基本使用

ls：查看当前文件夹下的内容pwd：查看当前所在的文件夹cd:切换文件夹touch：如果文件不存在，就新建文件mkdir：创建目录rm：删除指定的文件名、clear：清屏...

原创 Promise的三种状态

Promise的三种状态：pending–进行中fulfilled–成功rejected–失败Promise对象，可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数，只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态resolved（已定型）：1、pending到fulfilled2、pending到rejected即这两种情况发生，状态就凝...

原创 Jsonp跨域原理

callback这个参数，callback参数就是核心所在。首先我们知道，这个get请求已经被发出去了，那么我们如何接口请求回来的数据呢，callback=func则可以帮我们做这件事。<button id="btn">点击</button> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min...

原创 js数组去重

一、set方法参数值：iterator传递的是一个可迭代对象，可以将所有的元素不重复的被添加新的set中。如果不指定此参数或其值为null，则新的set为空。返回值：一个新的Set对象。属性：set.length：属性为0set.prototype：表示Set构造器的原型，可以向所有的Set对象添加新的属性。Set实例：set.prototype.constructor：返回实...

原创 a标签的五个作用

1、超链接2、锚点3、打电话4、发邮件5、协议限定符<a script="javascript(测试)"></a>

原创 css引入样式和权重

引入样式的四种方法：1、行间样式2、页面级css 在head标签中写style标签3、外部css样式 使用link标签4、导入样式<style>@import url("外部样式表的名称");</style>HTML中的代码：ID选择器在文档中使用一次与类不同，有且仅有一次css权重：!import infinity行间样...

原创 秋招前端复习

前端知识点汇总前端知识点是我在准备秋招过程中，看书和经验贴中总结到的一些知识点，不仅面试中经常问到，同时对于自己未来的工作和学习也很重要，也欢迎大家一起补充～一、JavaScript原始值和引用值类型及区别判断数据类型typeof、instanceof、Object.prototype.toString.call()、constructor类数组与数组的区别与转换数组的...

原创 手写promise函数

手写一个promise函数：function Promise(executor) { var self = this; this.status = 'pending'; this.value = undefined; this.reason = undefined; this.onResolvedCallbacks = []; this.onRej...

原创 进程与线程

进程：并发执行程序在执行过程中资源分配和管理的基本单位（资源分配的最小单位）。进程可以理解为一个应用程序的执行过程，应用程序一旦执行，就是一个进程。每个进程都有自己的独立的地址空间，每启动一个进程，系统就会为它分配地址空间，建立数据表来维护代码段、堆代码和数据段。线程：线程执行的最小单位。进程与线程的选择取决条件因为进程是资源分配的基本单位，线程是程序执行的最小单。以及进程与线程之间的健...

原创 ajax工作原理和原生ajax封装

一、Ajax简介Ajax是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。ajax中有个重要概念-----回调函数。先请求数据，只有在状态改变时才会执行接下来的（这个状态包括请求成功和请求失败）二、特点是一种用于创建快速动态网页的技术，对网页的某部分进行更新，不用刷新整个网页。通过在后台与服务器进行少量数据交互，ajax可以使网页实现异步更新。三、工作原理四、aja...

原创 sass和less

less是一种动态语言，对css赋予了动态语言的特性，如变量、继承、运算、函数。既可以在客户端运行，也可以在服务端运行sass是一种动态语言，比css多出好些功能，更容易阅读两者的区别：less是基于js的，是在客户端处理的；sass是基于ruby的，是在服务端处理的关于变量在less和sass中的唯一区别是less用@,sass用$总结一句：CSS预处理器，是通过编程的方式来开发cs...

原创 Echarts中的异步数据加载和更新

异步加载：主要是通过jQery等工具异步获取数据后通过setOption填入数据和配置项就行。// 异步加载数据$.get('data.json').done(function (data) { // 填入数据 myChart.setOption({ xAxis: { data: data.categories }, ...

原创 关于Echarts中使用Canvas和Svg渲染

Canvas：更适合绘制图形元素数量非常大的图表，比如热力图、地理坐标系，也利于实现某些视觉效果。Svg：内存占有更低（适合移动端）、渲染性能高、并且用户使用浏览器内置的缩放功能不会模糊。如何选择哪种渲染器：1、在软硬件环境较好，数据量不大的场景下，都可以使用两种2、在创建很多实例，且浏览器易崩溃的时候，可以使用Svg渲染器进行改善。3、数据量很大、较多交互时，可以使用Canvas渲染...

原创 ajax可以将异步改成同步吗？

$.ajax({ url: '', async: false});这个方式就是将async改为false，就可以将异步改为同步啦

原创 html是如何加载html和css文件

html是超文本标记语言，用户展示文本；css是层叠样式表，用于使页面变得好看浏览器加载html步骤：1、加载html2、解析器解析html3、创建dom树创建css4、解析器解析css将css规则集用于dom树节点5、浏览器展示页面...

原创 高效总结call、apply、bind的异同

转载 this的指向问题

一：纯粹的函数调用var x = 1;function test() {console.log(this.x) //指向window，输出1}test() //这个其实是window.test()的简写此时是window调用的test方法，所以函数体里的this就指向了window。二：作为对象的方法调用function test () {console.log(this.x...

原创 js的作用域与声名提升

js的作用域：1全局作用域：所有函数之外的变量，其作用范围是在整个脚本中2局部作用域：使用var定义在函数内部的变量，其作用范围是整个函数结构，超出函数 {} 花括号的范围则不能使用3块级作用域：ES6声明变量的方式:let / constlet 变量名 = 变量值；const 变量名 = 变量值；PS：注意： 使用const修饰的变量，赋值确定后，不允许再重新赋值。（一般修饰常量或者...

原创 js延迟加载的方式

性能优化的核心思想就是快，可以预先准备数据（如缓存的使用），可以按需获取，可以分段获取等都是常见的优化手段。解题思路：1.defer属性<scriptsrc="file.js" defer></script>浏览器会并行下载 file.js和其它有 defer 属性的script，而不会阻塞页面后续处理。注：所有的defer脚本保证是按顺序依次执行的。2、as...

原创 css可以被继承的属性

css样式表继承指的是，特定的css属性向下传递到后代元素1、字体系列属性font：组合字体2、文本系列属性text-indent：文本缩进text-align：文本水平对齐line-height：行高word-spacing：增加或减少单词间的空白（即字间隔）letter-spacing：增加或减少字符间的空白（字符间距）text-transform：控制文本大小写...

原创 BFC浅析

BFC全称叫做块级格式化上下文，是一个网页的概念。BFC的触发条件：1、浮动元素：float除none之外的值。2、绝对定位元素：position为absolute或是fixed3、display为inline-block、flex、table-cells4、overflow除了visible以外的其他值（hidden、scroll、auto）用到BFC的场景：阻止margin重叠；...

原创 标准盒模型和怪异盒模型

标准盒模型：宽度=width（content）+padding+border+margin怪异盒模型（IE盒模型）：宽度=width（此时包括padding+border）+margin

原创 行内元素、块级元素、行内块元素三者比较

display:inline;转换为行内元素display:block;转换为块状元素display:inline-block;转换为行内块状元素一、行内元素（span、a、select、strong、cite、label、em、br）最常用的是span行内元素特征：1、设置宽高无效2、设置margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间3、不...

原创 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更高的体验

1、精灵图技术产生的目的：很多大型网页在首次加载的时候都需要加载很多的小图片，而考虑到在同一时间，服务器拥堵的情况下，为了解决这一问题，采用了精灵图这一技术来缓解加载时间过长从而影响用户体验的这个问题。2、精灵图技术的本质：所谓精灵图就是把很多的小图片合并到一张较大的图片里，所以在首次加载页面的时候，就不用加载过多的小图片，只需要加载出来将小图片合并起来的那一张大图片也就是精灵图即可，这样在一定...

原创 div+css布局较table布局的优点

div+css：优点：布局灵活、改动灵活缺点：需要考虑平台的兼容性，对制作人员技能要求过高table表格布局：优点：布局简单、快捷、兼容性好缺点：改动不便，需要调整，工作量大...

原创 css3动画的优缺点

优点：1、浏览器可以对动画进行优化2、代码比较简单缺点：1、兼容性不好。2、在动画控制上不够灵活，运行过程较弱，无法附加绑定回调函数，不能在特定的位置上添加回调函数或是绑定回放事件，无进度报告。...

原创 css3的新特性

一、css3的选择器E:last-child 匹配父元素的最后一个子元素EE:nth-child(n) 匹配父元素的第n个子元素EE:nth-last-child(n)匹配父元素的倒数第n个子元素E二、圆角border-radius:15px;三、阴影text-shadow:h-shadow v-shadow blur colorh-shadow：水平位置的阴影（必选）v-s...

原创 HTML语义化标签

一、什么是HTML语义化标签语义化标签，旨在让标签有自己的含义<p>一行文字</p><span>一行文字</span>p标签与span标签都区别之一，p标签的含义是：段落，而span标签没有独特的含义。二、语义化标签的优势1、代码结构清晰，方便阅读，有利于团队合作开发。2、方便其他设备解析以语义的方式来渲染网页。3、有利于搜索引擎优...

原创 HTML5的特点

1、HTML5新元素提供了新的元素来创建更好的页面结构：<aside>定义页面的侧边栏内容<acticle>定义独立的内容区域<details>用于描述文档或文档某个部分的细节<figure>规定独立的流内容<footer>定义section或document的页脚<header>定义了文档的头部区域<n...

原创 常见状态码及意义

200—请求成功304—是对客户端有缓存情况下服务端的一种响应403—服务器已经理解请求，但是拒绝响应它404—请求失败，请求所希望的得到的资源未在服务器上被发现500—服务器遇到了未存遇到的错误，导致它无法完成请求的处理502—作为网关或者代理工作的服务器尝试执行请求时，从上游服务器接收到无效的响应503—由于服务器维护或者过载导致无法处理请求时，这个情况是暂时的504—（网络超时...

原创 长连接与短连接

1、http协议与tcp/ip协议的关系http的长连接和短连接实质上是tcp长连接和短连接。http是应用层协议，在传输层使用tcp层，在网络层使用ip协议。ip协议主要解决网络路由和寻址问题，tcp协议主要解决如何在ip层之上可靠的传递数据，使得网络上接收端收到发送端所发出的所有包，并且顺序发送顺序一致。tcp协议是可靠的、面向连接的。2、如何理解http协议是无状态的？指的是协议对于事...

原创 原型链

总结1.每个函数对象都有一个 prototype 属性，这个属性就是函数的原型对象。2.原型链是JavaScript实现继承的重要方式，原型链的形成是真正是靠__proto__ 而非prototype...

原创 创建对象的几种方式

js的对象就是Object，还有独立于宿主环境的ECMAScript实现提供的内置对象：Array、String、Date、MathObject：对象是属性的无序集合，数组是有序集合创建对象的方法：1、直接量属性：对象的静态体征方法：对象的动态行为一个属性属性名结束后，逗号隔开var stu={ name:keji, eat:function(food){ cons...

原创 css动画

动画是使一种样式逐渐变化为另一种样式的效果；可以改变任意多的样式任意多的次数。@keyframes animationname {keyframes-selector{css:styles;}}0%：表示动画开始的时间100%：表示动画结束的时间animation-timing-function:属性值linear：动画从头到尾的速度是相同的ease：默认。动画一低速开始，然后加快，...