darabiuz的博客

类型声明declare1、概览1.1 declare是什么前提：假如现在有一门用Typescript写的库，想供其他开发人员使用，有两种方式方式1 打包ts源文件（供ts用户使用）和编译后的js文件（供js用户使用）方式2 提供编译后的js文件和供ts用户使用的类型声明后一种方式的优点：所占文件体积较小，十分明确该导入声明，并省去ts进一步编译的时间类型声明定义：万事并不总是如意，代码也不一定都有静态类型类型声明文件的拓展名为 .d.ts, 是为无类型的js代码附加ts类型的一种方式举个栗子：

node环境不支持import，npm作为node的包管理器，不支持直接用import来导入npm里面的包利用webapck或者babel处理一下

import属于esmodule规范的内容，具体的esmodule和commonjs模块规范可以看我的这篇博客2. node环境不支持import举个栗子：目前的目录结构如下：src/a.js:src/b.js现在在node环境下执行，输入命令node a.js，报错：解决方法：方法1：改es6模块的后缀名为.mjs,也就是说，只要脚本文件里面使用了import或者export命令，就必须采用.mjs后缀名，nodejs遇到.mjs文件，就认为是es6模块，默认采用严格模式

1. npm的背景，为什么使用npm1. 社区文化分享源代码讨论问题（issue收集学习资源和网站。互相使用和贡献代码2. 共享代码早期社区、npm没有崛起的年代，通过网址链接共享代码点击jqueny 官网的下载链接，同时 github本身可以通release下载.问题来了当一个网站依赖的代码越来越多，程序员发现

枚举的作用是列举类型中包含的各个值，一般用它来管理多个相同系列的常量（即不能被修改的变量），用于状态的判断。这是一种无序的数据结构，把键映射到值上，可以理解为编译时键固定的对象，访问键时，ts将检查指定的键是否存在在web中，比较常见的状态判断有响应状态的判断：const handleResponseStatus = (status: number): void => { switch (status) { case 200: // 请求成功时 // Do someth.

浏览器识别不了require关键字，只需要导入require.js这一个库就好了通过npm install require.js --save安装好这个库会安装到nodemodule目录下取得require.js文件，然后在index.html文件最前端引入即可

1. 用处该方法是用来监测数据类型的一种好方法console.log(Object.prototype.toString.call(undefined)) // [object Undefined]console.log(Object.prototype.toString.call(null)) // [object Null]console.log(Object.prototype.toString.call(new Date())) // [object Date]2. 原理当调用一个方法

1. 什么是XSScross-site-scriping,跨站脚本攻击，为了和css区分，取名为xss通常是在网页里嵌入一段恶意的js代码：让浏览器在渲染dom的时候，意外地执行了恶意的js代码，使得黑客盗取个人信息（通常盗取了新浪微博的账号和密码，还可以试试能不能去登录支付宝qq），执行恶意的操作（比如发恶意帖，删帖，微博关注人，转发未必之类的操作）2. XSS的分类1.Dom类型DOM 型 XSS 的攻击步骤：• 攻击者构造出特殊的 URL，其中包含恶意代码。• 用户打开带有恶意代

1. 客户端渲染需要一个模板文件HTML（搭建好基础的结构，但是还没有数据）在框架vue的created声明周期去请求接口数据，一般是json类型的数据浏览器把数据（图片，文字等内容）插入到模板template当中浏览器渲染类似于淘宝官网，下图中的轮播图，推荐搜索，商品详情肯定是动态数据，那么一定是通过接口来调用的，假如按照传统的客户端渲染模式，基本结构–>请求数据–>浏览器渲染，那么涉及到大量数据的时候，渲染速度是非常慢的2. 优化首屏渲染的方法懒加载压缩http请求体

1. 前提之前博客已经写了关于Cors解决跨域的问题服务器端对于跨域请求的处理流程如下：首先查看http头部有无origin字段；如果没有，或者不允许，直接当成普通请求处理，结束；如果有并且是允许的，那么再看是否是preflight(method=OPTIONS)；如果不是preflight（简单请求），就返回Allow-Origin(必须的)、[Allow-Credentials，Access-Control-Expose-Headers]，并返回正常内容。如果是preflight（预

1. 什么是canvas是h5新增的一个标签，可以通过js在这个标签上绘制各种图案，可以通过js在这个标签上绘制各种图案拥有多种绘制路径、矩阵、原形、字符以及图片的方法1. canvas使用步骤创建一个canvas标签通过js拿到canvas标签从cavas标签中获取到绘图工具通过绘图工具在canvas标签上绘制图形以绘制一条直线为例子4-1. 设置路径的起点4-2. 设置路径的终点4-3. 告知canvas连接这两个点 <script> //

0. 从常见问题引入虚拟dom是什么?如何创建虚拟dom?虚拟dom如何渲染成真是dom?虚拟dom如何patch（patch）虚拟DOM的优势?（性能）Vue中的key到底有什么用，为什么不能用index?Vue中的diff算法实现1. 虚拟dom1. h方法实现virtual dom ，也就是虚拟节点它通过js的Object对象模拟dom中的节点再通过特定的render方法将其渲染成真实的dom节点eg：<div id="wrappe

1. http协议是无状态的协议Http是一个无状态的协议，每一次请求是独立无关联的，服务器是无法识别两次请求是不是同一个客户发送的，比如访问个人博客网站，肯定要登录，那么浏览器端向服务器端发送http请求，并带上账号和密码信息，服务器端对账号密码进行验证，响应给客户端，假如客户端收到登录成功的信息，说明此刻登录完成了，客户进入个人中心页面，又需要向服务器请求个人中心的数据，由于HTTP请求属于是无状态的，第一次请求和第二次请求没有联系，那么服务器端根本就不知道用户是否已经登录了，那更别提怎么返回特定用

1. 浏览器进程1. 浏览器的多进程架构一个好的程序常常被划分为几个相互独立又彼此配合的模块,浏览器也是如此。以 Chrome 为例,它由多个进程组成,每个进程都有自己核心的职责,它们相互配合完成浏览器的整体功能,每个进程中又包含多个线程,一个进程内的多个线程也会协同工作,配合完成所在进程的职责。Chrome 采用多进程架构,其顶层存在一个 Browser process 用以协调浏览器的其它进程。2. 浏览器的主要进程与功能详见下面的思维导图2. 浏览器渲染流程解析 HTML

1.块级作用域js在es5之前是没有块级作用域的，只有全局和函数作用域，这样造成的结果是内层的变量可能会覆盖外层的变量包裹在if里面的变量也会被变量提升for循环的计数器i会被泄漏为全局变量es6之后，let的出现其实为js新增了块级作用域function f1() { let n = 5; if (true) { let n = 10; } console.log(n); // 5 内部的n和外部的n不受影响，互相独立}* 每个作用域里面的变量互相独立不受影响

1. 图片懒加载的背景类似于大型的淘宝商城、京东等网页，设计大量的商品图片信息，如果我们使页面包含的所有图片一次性加载完成，那用户体验很差。目前流行的做法是滚动动态加载，也就是懒加载，显示在屏幕之外的图片默认不加载，随着页面的滚动，图片进入了显示的范围，则触发图片的加载显示这样做的好处，一是页面加载速度快(浏览器进度条和加载转圈很快就结束了，这样用户的体验也比较好)，而是节省流量，因为不可能每一个用户会把页面从上到下滚动完2. 图片懒加载的原理存储图片的真实路径，把图片的真实路径绑定给一个以d

1.js是单线程的单线程是什么同一个事件只能做同一件事情，下一件事情需要等待上一件事执行完毕为什么js是单线程？js作为浏览器脚本语言，用途是与用户互动，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？单线程可以避免复杂性单线程带来的问题和局限性js是单线程语言，浏览器只分配给js一个主线程，用来执行任务（函数），但一次只能执行一个任务，这些任务形成一个任务队列排队等候执行，但前端的某些任务是非常耗时的，比如网

1. 错误代码先上错误代码这里我试图用generator函数加上for…of实现斐波那契数列的求值，但是打印出来的结果不是预期的1 1 2 3 5 8,而是[1,1],[1,1],[1,1]…function* fib(n) { let [prev, curr] = [0, 1] for (let i = 0; i <= n; i++) { yield curr [prev, curr] = [curr, prev + curr] }}

1.定时器的概念介绍关于定时器要记住的最重要的事情是，指定的时间间隔表示何时将定时器的代码添加到队列，而不是何时实际执行代码假设有这样一句代码var btn = document.getElementById("my-btn"); btn.onclick = function(){ setTimeout(function(){ document.getElementById("message").style.visibility = "visible"; }, 250); //其

Vue2的生命周期1.生命周期的定义1.又名:生命周期回调函数、生命周期函数、生命周期钩子2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。4.生命周期函数中的this指向是vm或组件实例对象。2.为什么要有生命周期假如现在想实现这样一个效果:页面一进入，标题"欢迎学习vue"文字的透明度就从1逐渐减小到0，然后再恢复至1，周而往复结构代码： <h2 :style="{ opacity