JS
A-Tione
前端工作人员
展开
-
TypeScript基础知识
前言TS是 JS 的泛型,你可以理解为可以把 TS 当成 JS 来用也没问题,只是TS 比 JS 多了一些额外的用法。TS 的用法TS 有 JS 没有的东西anylet a:any = 'hi'b.nameany没有任何限制,都可以。unknowntype B = {name: string}let a:unknown = JSON.parse('{"name":"tione"}')console.log((b as B).name) // 断言同原创 2021-08-10 20:11:45 · 127 阅读 · 0 评论 -
发送和接收二进制数据(Blob),也就是流
前言可以通过设置一个XMLHttpRequest对象的responseType属性来改变一个从服务器上返回的响应的数据类型。可用的属性值为空字符串 (默认),"arraybuffer", "blob", "document","json" 和 "text".response属性的值会根据responseType属性包含实体主体(entity body)。它可能会是一个ArrayBuffer,Blob,Document,JSON, string,或者为NULL(如果请求未完成或失败)...原创 2021-04-25 15:44:59 · 2813 阅读 · 0 评论 -
node.js与浏览器中的EventLoop事件循环是一样的吗?
什么是EventLoop(事件循环)?这里从2个方向来讨论:node.js 浏览器node.jsnode.js中event loop 分为六个阶段: ┌───────────────────────┐┌─>│ timers ││ └──────────┬────────────┘│ ┌──────────┴───────...原创 2020-03-30 23:29:55 · 179 阅读 · 0 评论 -
Promise 与 async await 面试知识点
Promise的正常用法function xx(){ return new Promise((resolve,reject)=>{ setTimeout(()=>{ resovle('成功的输出') reject('失败输出') },3000) })}xx().then(fn1,...原创 2020-02-26 12:04:45 · 1314 阅读 · 0 评论 -
用TypeScript手写Promise实现源码
TS源码:class Promise2 { state = 'pending' callbacks= [] resolve(result) { setTimeout(()=>{ if (this.state !=='pending') return this.state = 'fulfilled'...原创 2020-02-23 17:14:52 · 669 阅读 · 0 评论 -
手写Function.prototype.bind()函数
源码:支持new 绑定//兼容IE6写法var slice = Array.prototype.slicefunction ieBind(ieThis) { var args = slice.call(arguments, 1) // this就是调用bind的函数 var fn = this function fn2 () { va...原创 2020-02-18 22:33:29 · 268 阅读 · 0 评论 -
手写JS深拷贝
源码:支持拷贝String、Number、Boolean、Null、Undefined、Object(Function、Array、RegExp、Date、环)class deepCloner { constructor() { this.cache = [] } clone(source) { if (source instanc...原创 2020-02-14 11:49:19 · 357 阅读 · 0 评论 -
this变态面试题
let length = 10function fn(){console.log(this.length)}let obj = { length: 5, method(fn){ fn() arguments[0]() }}obj.method(fn, 1) // 输出是什么?错误答案:101为什么不是10和2?...原创 2020-02-12 17:22:17 · 299 阅读 · 0 评论 -
手写eventHub订阅发布模式
TypeScript源码:on:订阅 emit:发布 off:取消class EventHub { private cache: {[key: string]: Array<(data: unknown)=> void>} = {} on(eventName: string, fn: (data: unknown)=> void) { ...原创 2020-02-12 09:40:37 · 461 阅读 · 0 评论 -
手写JavaScript继承
ES 5 写法function Human(name) { this.name = name}Human.prototype.run = function() { console.log('我的名字是'+this.name+',我在奔跑') return undefined}function Man(name) { Human.call(this,n...原创 2020-01-12 17:19:24 · 187 阅读 · 0 评论 -
JS异步操作的流程控制
如果有多个异步操作,就会存在一个流程控制的问题,如何保证代码按照自己想要的流程执行下去。例如:下面是一个异步任务,非常耗时,每次需要1秒才能完成,然后再调用回调函数。function async(arg, callBack) { console.log('参数为:' + arg +' , 1秒后返回结果'); setTimeout(function () { callBack(a...原创 2019-09-27 10:57:42 · 237 阅读 · 0 评论 -
为什么要做组件库?
1.背景介绍前端组件化,这是一个概念,也是一种技术。那么为什么要实现前端组件化?2.知识剖析2.1、传统开发方式效率低以及维护成本高的主要原因在于很多时候是将一个系统做成了整块应用, 而且往往随着业务的增长或者变更,系统的复杂度会呈现指数级的增长, 经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。2.2、 针对此弊端,其实业界...原创 2018-06-06 16:25:42 · 1130 阅读 · 0 评论 -
HTML5的离线储存怎么使用?
1.背景介绍HTML5提供了很多新的功能以及相应的接口,离线存储就是其中的一个,离线存储可以将站点的一些文件存储在本地,在没有网络的时候还是可以访问到以缓存的对应的站点页面,其中这些文件可以包括html,js,css,img等等文件,但其实即使在有网络的时候,浏览器也会优先使用已离线存储的文件,返回一个200(from cache)头。这跟HTTP的缓存使用策略是不同的。它是浏览器自己...原创 2018-06-18 15:23:58 · 309 阅读 · 0 评论 -
JS有哪几种传参方式?
1.背景介绍我们今天讲的传参是指页面之间的数据传递。传统的前端开发中,页面之间是少有参数交互的,甚至没有,而在如今的前端环境下,一个稍微正式点的项目都不可能少了页面间传参,页面的跨越、服务器后台进行数据请求等,都需要一个或多个传参的方法。那么参数在不同的页面间进行传递,一个页面的参数被另一页面使用,如何才能做到不同页面间进行参数传递?在JS中有多种页面传递参数的方法:...原创 2018-07-07 09:46:37 · 7541 阅读 · 0 评论 -
什么是MVC?
MVC是一种设计模式,既是一种代码组织形式又是一种思想,他将系统分为三层:Model 数据,View视图,Controller 控制器。Model数据管理:专门处理数据,包括数据逻辑,数据请求,数据存储。它不对HTML,DOM,CSS以及视图逻辑进行操作,一般多数用于从服务器获取数据和保存数据。View视图:即为用户可见区域,前端view主要负责HTML的渲染。Controller控...原创 2019-07-03 18:07:36 · 1585 阅读 · 1 评论 -
如何理解JS中的作用域与作用域链?
1.背景介绍什么是作用域呢,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期。在JavaScript的中,变量的作用域有全局作用域和局部作用域两种。2.知识剖析1.全局作用域(Global Scope)在代码中任何地方都能访问到的对象拥有全局作用域,一般来说一下几种情形拥有全局作用域:(1)在函数外面定义的变量拥有全局作用域,例如:var ...原创 2018-07-14 19:37:26 · 396 阅读 · 0 评论 -
闭包是什么?
1.背景介绍闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式,就是在一个函数内部创建另一个函数。闭包就是能够读取其他函数内部变量的函数,可以把闭包简单理解成 ‘定义在一个函数内部的函数’先抛开对于两个出处的具体描述,至少两者对于闭包的定义可以简化为:“闭包是一种函数”,而且闭包是一种特殊的函数。以上两个出处涉及到了一些概念(或名词):函数、内部变量、函数内...原创 2018-07-24 09:50:06 · 241 阅读 · 0 评论 -
JSON是什么?如何正确理解?
1.背景介绍什么是JSONJSON (JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAScript (w3c制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。——...原创 2018-08-04 20:47:26 · 67013 阅读 · 8 评论 -
什么是回调函数?
什么是回调函数In computer programming, a callback is a piece of executable code that is passed as an argument to other code, which is expected to call back (execute) the argument at some convenient time [引...转载 2018-08-09 19:49:01 · 13446 阅读 · 1 评论 -
实现一个canvas画板
<canvas>是HTML5新增的元素,可用于通过使用JavaScript中的脚本来绘制图形。例如,它可以用于绘制图形,制作照片,创建动画,甚至可以进行实时视频处理或渲染。——摘自MDN canvas MDNcanvas有许多的API,可以插入图片,可以编写文字,可以处理视频。按照MDN给出的canvasPAI,可以将canvas学的很好,但是前端学习的精髓是用到什么...原创 2019-03-11 11:11:29 · 6848 阅读 · 1 评论 -
原型与原型链如何理解?
首先我们要知道浏览器中有哪些全局对象:ECMAScript 规定全局对象叫做 global,但是浏览器把 window 作为全局对象(浏览器先存在的)window 就是一个哈希表,有很多属性。window 的属性就是全局变量。这些全局变量分为两种:1、是CEMAScript规定的global.parseInt global.parseFloat global.Numbe...原创 2019-03-17 23:07:01 · 242 阅读 · 0 评论 -
Javascript操作DOM常用API总结
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识。基本概念在讲解操作DOM的api之前,首先我们来复习一下一些基本概念,这些概念是掌握api的关键,必须理解它们。Node类型DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现。这个Node接口在JS中是作为No...转载 2019-03-24 11:51:52 · 149 阅读 · 0 评论 -
JS核心之DOM
DOM:Document Object Model(文档对象模型)指文档与对象的一种映射模型文档像树一样,每个树杈节点都是一个对象html元素是根元素,它属于Document对象head,body,meta,title等等这些元素都属于Element对象标题一、标题二、span属于Text对象Node是Document(html)、Element(...原创 2019-04-14 21:49:35 · 227 阅读 · 0 评论 -
实现一个JQuery的API
JQuery可以理解为就是一个函数,通过传入一个节点或者选择器,返回一个新的对象,这个对象有构造好的API,通过调用这个API就可以得到我们想要的操作DOM的结果。而对象中构造好的API本质上是通过封装一个一系列操作原生DOM的方法,而我们只需要从外面调用这个方法名不用具体管封装的源码是如何实现。我们简单的用函数封装两个原生DOM操作的功能,1、getSiblings 获取到所有的兄弟元素;2、...原创 2019-06-08 16:17:34 · 94 阅读 · 0 评论 -
什么是 JSONP?
前言首先我们得先了解JSONP是怎么产生的。最开始跨域请求数据没有现在方便,Ajax直接请求普通文件存在跨域无权限访问的问题,然后聪明的程序员想出了一套非官方的解决办法,程序员发现凡是带有“src”这个属性的标签都拥有跨域的能力,比如<·img>、<·iframe>、<·script>。事实上早期的程序员也是这么干的,最后程序员们发现最好的解决办法就是——...原创 2019-06-18 23:40:34 · 14007 阅读 · 0 评论 -
用JQuery实现一个轮播
HTML<!DOCTYPE html><html><head><script src="//code.jquery.com/jquery-2.1.1.min.js"></script> <meta charset="utf-8"> <title>JS Bin</title></h...原创 2019-06-09 17:23:10 · 359 阅读 · 0 评论 -
DOM中点击事件的区别,事件捕获与冒泡
html<button id='x' onclick="print">A</button><button id='y' onclick="print()">B</button><button id='z' onclick="print.call()">C</button>JSfunction frint() ...原创 2019-06-10 22:21:27 · 567 阅读 · 0 评论 -
什么是Ajax?
2005年,Adaptive Path 公司的Jesse James Garrett 发明了Ajax这个词,用于概括异步加载页面内容的技术。以前,web应用都要涉及大量的页面刷新:用户点击了某个链接,请求发送回服务器,然后服务器根据用户的操作再返回新页面。即便用户看到的知识页面中的一小部分有变化,也要刷新和重新加载整个页面,包括公司标志,导航,头部区域,脚部区域等。使用Ajax就可以做到只更新...原创 2018-12-03 10:01:33 · 129 阅读 · 0 评论 -
JavaScript中的数据类型
我们简要的梳理一下在JavaScript中有哪些数据类型,以及它们的基础用法。js中一共有七种数据类型:stringnumberbooleansymbolnullundefinedobjectStringstring表示字符串,属于基础数据类型,通常用‘ ’或“ ”来表示,例如:‘你好’或者“你好”。允许使用‘’,表示为空字符串,length为0允许使用‘...原创 2019-03-11 11:04:49 · 342 阅读 · 0 评论 -
web页面开发中,在线预览PPT,PDF,Word,Excel等文档的解决办法
简单粗暴的办法:使用微软提供的在线预览模式打开在线文件地址即可。https://view.officeapps.live.com/op/view.aspx?src= + 自己文件的线上地址(需要进行EncodeURI转码)在JS中可以这样写:window.open('https://view.officeapps.live.com/op/view.aspx?src='+encod...原创 2019-06-01 15:56:03 · 12131 阅读 · 3 评论 -
JavaScript中parseInt()函数的基础语法
1.基本用法(只接受一个参数,可以当做第二个参数默认是10):parseInt的返回值只有两种可能,不是一个十进制整数,就是NaN。a.将字符串转为整数。parseInt('123') // 123b.如果字符串头部有空格,空格会被自动去除。parseInt(' 81') // 81c.如果parseInt的参数不是字符串,则会先转为字符串再转换。这个很重要d.字符串转为整数的...转载 2019-03-09 23:14:05 · 223 阅读 · 0 评论 -
常见状态码备忘录
200 OK请求已成功,请求所希望的响应头或数据体将随此响应返回。实际的响应将取决于所使用的请求方法。在GET请求中,响应将包含与请求的资源相对应的实体。在POST请求中,响应将包含描述或操作结果的实体。201 Created请求已经被实现,而且有一个新的资源已经依据请求的需要而建立,且其URI已经随Location头信息返回。假如需要的资源无法及时创建的话,应当返回'202Accepted'...原创 2019-02-20 16:37:09 · 103 阅读 · 0 评论 -
PUT请求与PATCH请求的区别
patch方法用来更新局部资源,这句话我们该如何理解?假设我们有一个UserInfo,里面有userId,userName,userGender等10个字段。可你的编辑功能因为需求,在某个特别的页面里只能修改userName,这时候的更新怎么做?人们通常(为徒省事)把一个包含了修改后userName的完整userInfo对象传给后端,做完整更新。但仔细想想,这种做法感觉有点二,而且真心...原创 2019-02-11 14:07:01 · 3570 阅读 · 4 评论 -
JS中this的指向
1.背景介绍这个关键字是JavaScript中最复杂的机制之一。它是一个很特别的关键字,被自动定义在所有函数的作用域中。这个提供了一种更优雅的方式来隐式“传递”一个对象引用,因此可以将API设计得更加简洁并且易于复用。2.知识剖析这认知误区1指向函数2指向函数作用域// 1 指向函数function fn1 (num) { this.count ++; c...原创 2018-09-01 15:33:59 · 160 阅读 · 0 评论 -
network中的请求信息
1.背景介绍作为一个Web开发人员,日常中与我们开发相关的,就是Chrome的开发者工具。 Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响 应头还有响应内容很有用,特别是在查看Ajax类请求的时候,非常有帮助。 今天就是要简要说说Chrome的开发者工具中Network中header部分。2.知识剖析2.1、先来了解一下HTTP请求的7个步骤1.建立TCP...转载 2018-08-18 20:02:44 · 5418 阅读 · 0 评论 -
JavaScript中的数据转换
今天我们说说数据类型转换的问题,js中有七种类型:number string boolean symbol null undefined object它们之间是如何进行类型转换的呢?任意类型转字符串:String(x)也可以toString()也可以x + ' '任意类型转换数字Number(x)parseInt(x, 10)...原创 2019-03-16 22:57:48 · 166 阅读 · 0 评论