大空翼 つばさ

相同点// 对象interface User { name: string age: number}type User = { name: string age: number};// 函数interface SetUser { (name: string, age: number): void;}type SetUser = (name: string, age: number): void;继承（extends）与 交叉类型（Intersection Type

官方文档介绍软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。 组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。使用示例ts中泛型就是在编译期间不确定方法使用的类型(广泛之意思)，在方法调用时，指定泛型具体指向类型。// 1 泛型函数// 获取数组中最小值 （数字）funct

symbol 是一种基本数据类型 。Symbol()函数会返回symbol类型的值，该symbol具有暴露内建成员对象的静态属性和暴露全局Symbol注册的静态方法。类似于内建对象类，但作为构造函数来说它并不完整，也不支持 new Symbol()语法。const symbol0 = Symbol(0);const symbol1 = Symbol();const symbol2 = Symbol('');const symbol3 = Symbol('a');const symbol4 = Sy

减少子组件重复渲染：getDerivedStateFromProps只要父组件重新渲染，则不论子组件props是否发生变化，其getDerivedStateFromProps都会被执行，故在getDerivedStateFromProps内将 props 赋值到 state 时，使用的props可能并没有发生变化，导致子组件进行重复渲染。除此之外，在每次setState后getDerivedStateFromProps也会执行，此时getDerivedStateFromProps可能引发state再次

函数组件React中使用函数组件和原生组件有两点区别：函数组件自身fiber没有与之对应的真实DOM，仅作为children的父级，不作为children的DOM容器函数组件的children是通过执行函数返回的，不是从props.children直接获取的示例：// 原生组件 // JSX形式：const App = <h1>title:{props.title}</h1>;const App = React.createElement( "h1", //

requestAnimationFrame屏幕刷新率（通常为） 60Hz 即 1秒60帧，折合1000ms/60，平均每帧约 16.6ms。浏览器无法严格控制每16.6ms执行一帧，而是通过vSync标识符动态控制每帧执行时间，（非阻塞情况下）大约为16.6ms左右。在高刷新率显示设备上每帧时间会缩短。非空闲阶段：前3阶段为js执行阶段，后2阶段为渲染阶段，js执行时间过长将导致渲染阻塞。第4阶段rAF阶段：window.requestAnimationFrame回调函数执行阶段空现阶段：

同级比较React 的diff 算法 对虚拟DOM树（和fiber树）进行分层比较，只比较相同层级节点，忽略跨层级DOM移动操作情形，从而实现一次遍历比较新旧两颗完整虚拟DOM树（和fiber树）。因此 React 官方建议不要进行 DOM 节点跨层级的操作。元素比较React使用下面方式来比较是否组件发生变化，需要应用到真实DOM节点：如果上一次提交更新的老fiber和此次传入的新虚拟DOM元素有相同的type， 则保持当前的真实 DOM 节点，仅使用新的 props 进行更新如果type不同

Virtual DOM（虚拟DOM）：使用js对象表示真实DOM对象，精简真实DOM对象中的原生DOM属性和方法，保留必要属性和方法。虚拟DOM保存在内存中，方便随时调用。对虚拟DOM使用diff算法得出真实DOM对象最小必要操作，减少真实DOM对象实际操作，节省性能开销。// 示例const virtualDom = { key:'A1', tag:'div', children:[{ key:'B1', tag:'div', children:[{ key:'C1',

Performace APIPerformance 接口可以获取到当前页面中与性能相关的信息。它是 High Resolution Time API 的一部分，同时也融合了 Performance Timeline API、Navigation Timing API、 User Timing API 和 Resource Timing API。调用window.performace方法会返回Performance对象，包含以下属性：timeOrigin：性能测试开始的时间戳timing：各项

MessageChannel：通信管道对象，可以实现两端的通信。MessageChannel的onmessage回调属于宏任务。var channel = new MessageChannel();// MessageChannel实例默认具有port1和port2两个对象属性var port1 = channel.port1;var port2 = channel.port2;// MessageChannel实例onmessage事件可以实现监听并绑定回调函数port1.onmessage

由于JS单线程特点，所有任务只能依次执行，无法利用CPU多线程优势，进行计算密集或高延迟任务会造成线程阻塞和UI卡顿。Web Worker可以在JS主线程外创建一个Worker线程来执行JS任务，与主线程互不干扰，减轻主线程负担。由于Worker线程一旦创建成功，即会一直运行，不受主线程打断，容易造成资源浪费，不应过度使用，且当Worker使用完成后应关闭。Web Worker使用是需注意：脚本来源：worker进程中运行的脚本必须来源于网络资源，无法加载本地资源同源限制：worker进程中运行

LAMP指Linux+Apache+MySQL/MariaDB+Perl/PHP/Python，是一组常用来搭建动态网站或者服务器的开源软件。它们本身都是各自独立的程序，但是因为常被放在一起使用，拥有了越来越高的兼容度，共同组成了一个强大的Web应用程序平台。软件版本操作的镜像和软件版本如下 ：操作系统：CentOS 7.2 64位 Apache：2.4.23 MySQL：5.7....

JavaScript 里 var a =a ||{} 啥意思？var a;if(a === 0 || a === "" || a === false || a === null || a === undefined) a = {}那句话的定义。还有你这种情况 a 是函数的入口参数吧，代码是这样的对吧function(a){ var a = a || {}}它等价于function(a){

onRef实现父组件调用子组件方法class Child extends Component{ constructor(props){ super(props) this.state = { //声明变量 text: '山有木兮木有枝' } if(props.onRef){ //如果接收到onRef方法 则调用该方法传入子组件this指针 props.onRef(this) } } func =(arg)=>

Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。Objects 和 Maps 类似，它们都允许你按键存取值、删除键、检测一个键是否绑定了值。过去我们一直都把对象当成 Maps 使用，不过 Maps 和 Objects 有一些重要的区别。在下列情况里使用 Map 会是更好的选择：项 目MapObject额外键不包含任何额外键，只包含明确声明的键包含原型链中的键，声明时可能冲突键类型任何类型字符串、Symb

LAMP指Linux+Apache+MySQL/MariaDB+Perl/PHP/Python，是一组常用来搭建动态网站或者服务器的开源软件。它们本身都是各自独立的程序，但是因为常被放在一起使用，拥有了越来越高的兼容度，共同组成了一个强大的Web应用程序平台。软件版本操作系统和软件版本如下 ：CentOS：7.2 64位Apache：2.4.23MySQL：5.7.17PHP：7.0...

typeoftypeof 运算符返回一个用来表示表达式的数据类型的字符串。返回结果：“number” : number“string” : string“boolean” : boolean“object” : array object null“function” : function“undefined” : undifinedinstanceofinstanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototyp

函数的参数默认值设置function f(a){ a = a || '默认值' console.log(a)}ES6function f(a='默认值'){ console.log(a)}

Axios基于XMLHttpRequest对象，使用Promise封装，使用时需要导入axios.js。CDN地址：https://unpkg.com/axios/dist/axios.js，压缩版 https://unpkg.com/axios/dist/axios.min.jsFetch浏览器原生API，使用Promise封装，在尚未支持ES6语法的浏览器中使用时需要导入es...

ES6新增class（类）优化的构造函数的写法：class Obj { constructor (str1){ this.a = str1 } printA (){ console.log(this.a) }}var obj = new Obj('a')obj.printA() // a相当于：function...

发布订阅模式，通过定义一个发布者对象，并建立订阅者对发布者的依赖，实现发布者向订阅者传递数据并执行订阅者指定的回调：var publisher = { callbacks:{}, // 订阅记录存放对象 subscribe:function(name,callback){ // 订阅 this.callbacks[name] ? this.callbacks[...

在JS的function函数体（仅限function函数，不包括箭头函数）内，可以通过argument类数组对象来访问该函数的全部参数：function func(a,b,c){ console.log(a,b,c) console.log(arguments[0],arguments[1],arguments[2]) console.log(arguments.le...

单TCP连接全双工通讯协议WebSocket 允许服务端主动向客户端推送数据。浏览器和服务器只需要完成一次握手，就直接可以创建持久性的连接，并进行双向数据传输。实例var ws = new WebSocket('ws://ws.domain.com',[protocal]); 属性// readyState 连接状态 if(ws.readyState == 0){} // 连接未建立...

是

CSS3 animation简写属性：#test { animation: test 2s linear 1s 1 normal; -webkit-animation: test 2s linear 1s 1 normal;}展开属性：#test { /*动画所使用的 keyframe 名称*/ animation-name: test; /*动画时长*/ ...

H5标准新增的本地存储localStorage已经很熟悉了，但是还有个storage事件监听头一次听说，这个事件可以通过更新localstorage来触发，而且当前在同一个浏览器下打开的所有同源页面都可以监听得到！例如，当前在浏览器中打开了tab1和tab2两个标签页，url分别为www.localhost.com/index.html 和 www.localhost.com/list.htm...

JS在运行时是单线程的，但是浏览器可以拥有多个线程，现代浏览器通常包含以下几个线程：用户界面渲染线程 浏览器事件触发线程 定时器触发器线程 HTTP请求线程 JS引擎线程这四个线程通过与event loop和callback queue配合来实现浏览器的各项工作，下面将简单说明其运行基本机制：当我们从浏览器打开一个页面（此处省略好多字），JS引擎会以单线程形式运行html的scr...

let和const声明在代码块中则都是局部作用域，var只有声明在函数体内才是局部作用域，直接声明变量则始终是全局作用域let和const声明在全局不会变为全局的属性，var声明名在全局会成为全局（window或global）属性let和const不会声明提前，var会声明提前（到所在作用域顶部），var赋值保持原声明位置不变，定义函数会提前（到所在作用域顶部，var声明之后）并赋值l...

v-if分支v-for循环v-if可以用来

记得几年前AngularJS火起来的时候，作为老菜鸟的在下也学习过一波，但是由于NG本身的特点（虽然强大，但是有些过重，而且学习成本不低，对于技术不够雄厚的小公司或小团队来说贸然使用有风险），一直没有真正使用过（真用估计也得载不少坑，说实话真是学得云里雾里）。直到vue出现，让我直接高潮了，于是学习了一波，不得不说确实蛮屌的！由于极易上手，在不到一周时间内已经在项目中使用！关于vuevue...

StringString.match(RegExp)使用一个字符串调用（其原型对象中的）match方法，传入一个正则表达式对象作为参数，返回一个数组。如果正则表达式对象具有g标识符，则返回数组中包含全部匹配结果，否则返回第一次匹配的结果。var str="1 plus 2 equal 3"var res = str.match(/\d/g)console.log(res)//...

cookiesessionStorage localStorage 都可以用于本地存储数据，存储格式都是字符串，都使用域名分隔cookie最大长度为4k每次http请求会携带cookie到服务端过期后自动销毁sessionStorage localStorage最大长度视不同浏览器设置而定，通常为5M左右服务端无法获取sessionStorage当前页面关闭...

在jQuery中，attr()函数和prop()函数都用于设置或获取指定的属性，它们的参数和用法也几乎完全相同。但不得不说的是，这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别。1、操作对象不同很明显，attr和prop分别是单词attribute和property的缩写，并且它们均表示"属性"的意思。不过，在jQuery中，attribute和property却...

监听自定义事件添加自定义事件监听操作和标准js事件监听类似，可直接通过window对象添加，如下：window.addEventListener('customEvent',function(event){ //通过event.detail可获得传递过来的参数内容 ....});触发自定义事件通过mui.fire()方法可触发目标窗口的自定义事件目标webview必须触发load...

在JS中可以使用"=="和"==="来判断两个变量是否相等。"=="只判断两个变量值是否相等，不判断类型是否相等，如果"=="两边的变量类型不同，则会先进行隐式类型转换，尝试将两个变量都转换为"=="左边的类型，再判断值是否相等。"==="则必须两个变量的类型和值全都相等才判定为相等。由于JS中的对象是一个引用类型数据，当使用对象的变量名进行比较时，事实上是在比较两个变量名在栈内存中保

一、什么是例外处理（exception handlers）　　当JavaScript程序在运行中发生了诸如数组索引越界、类型不匹配或者语法错误时，JavaScript解释器就会引发例外处理。ECMAScript定义了六种类型的错误，除此之外，我们可以使用Error对象和throw语句来创建并引发自定义的例外处理信息。二、例外处理技术的优点　　通过运用例外处理技术，我们可以实现用结构化的...

break continuebreak：退出循环。用于for语句、for/in语句、switch语句的循环体内部，在其他地方使用将报错！for(var i=1;i&lt;=10;i++){ if(i==6) break; document.write(i); } //输出结果：12345当i=6的时候，直接退出for这个循环。这个循环将不再被执行！contin...

由于诸如ele.style.display这样的操作只能获取DOM元素的行内样式，所以获取结果可能与实际显示效果不符通过getComputedStyle方法可以用来获取DOM元素实际显示时的样式，具体：let style = window.getComputedStyle(element, [pseudoElt]);getComputedStyle是window全局对象的一个方法，可...

完整写法let f = (a) =&gt; { return a+1}无参数写法let f = () =&gt; { return 1}单个参数简写let f = a =&gt; {  return a+1}直接返回运算结果简写let f = a =&gt; a+1this除了写法不同，箭头函数和function定义函...

全局函数 对象方法this指向当前调用该方法最近的对象（在全局环境即是window或global对象，亦符合此原则）（即动态作用域）function f(){ console.log(this)}f() // windowvar o = { f: function() { console.log(this) }};o.f(); //ovar f =...