zz130428的博客

众所周知，jQuery 是一个跨主流浏览器的 JavaScript 库，它封装了 JavaScript 的常用功能代码，简化了 HTML DOM 操作、事件处理、动画设计和 Ajax 交互等任务。jQuery 中的 Ajax 是对 XMLHttpRequest 或 ActiveXObject（IE9以下版本中）的封装，它提供了一种更加方便和强大的方式来与服务器进行数据交换，从而实现在不重新加载整个页面的情况下，对网页进行局部更新。

通过上述示例，我们可以看到Ajax和JSON如何协同工作，以实现无需重新加载页面即可更新网页部分内容的功能。这种技术极大地提高了Web应用程序的用户体验和交互性。随着Web开发技术的不断进步，Ajax和JSON的使用将更加广泛和深入。JSON数据格式易于阅读和编写，同时也易于JavaScript解析。对象，它是浏览器提供的用于与服务器进行通信的API。1、创建XMLHttpRequest对象。2、设置请求的方法、URL和异步标志。3、定义请求完成后的回调函数。

要实现，往上拉，拉到最底部时，显示更多的数字，需要在goods.json文件中配置onReachBottomDistance。onReachBottomDistance的意思是，当拉到距离底部距离多少rpx时开始触发加载更多。滑动加载数据，在js代码中是固定的函数名 onReachBottom。###json中配置###小程序上拉，显示更多数据。重新建个tarbar。

实现样式1、底部容器设置定位，按钮和文本容器利用z-index设计容器层级，并使按钮定位在右下角；2、设置高度=指定隐藏行数*一行文本的高度，此处一行高度为21px，指定两行隐藏，最大高度就为42px；3、设置按钮背景为白色，覆盖在文本上方；

Vue 的单文件组件 (即*.vue文件，英文 Single-File Component，简称SFC) 是一种特殊的文件格式，使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。</style>如你所见，Vue 的单文件组件是网页开发中 HTML、CSS 和 JavaScript 三种语言经典组合的自然延伸。<template><script>和<style>

标签绑定点击事件，我们预期点击按钮时，数据新增一个属性，界面也 新增一行。中做一次强制更新，99.9% 的情况，是你在某个地方做错了事。实现数据响应式的，直接动态添加新属性仍可以实现数据响应式。不允许在已经创建的实例上动态添加新的响应式属性。应创建一个新的对象，合并原对象和混入对象的属性。点击按钮，发现结果不及预期，数据虽然更新了（添加新属性的时候，却无法触发事件属性的拦截。如果为对象添加少量的新属性，可以直接采用。如果需要为新对象添加大量的新属性，则通过。方法，实现新增属性的响应式。

组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，在Vue中每一个.vue文件都可以视为一个组件组件的优势降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单。

继承（inheritance）是面向对象软件技术当中的一个概念。如果一个类别B“继承自”另一个类别A，就把这个B称为“A的子类”，而把A称为“B的父类别”也可以称“A是B的超类”继承的优点继承可以使得子类具有父类别的各种属性和方法，而不需要再次编写相同的代码在子类别继承父类别的同时，可以重新定义某些属性，并重写某些方法，即覆盖父类别的原有属性和方法，使其获得与父类别不同的功能虽然JavaScript并不是真正的面向对象语言，但它天生的灵活性，使应用场景更加丰富

并非指内存在物理上的消失，而是应用程序分配某段内存后，由于设计错误，导致在释放该段内存之前就失去了对该段内存的控制，从而造成了内存的浪费。进入环境的变量所占用的内存就不能释放，当变量离开环境时，则将其标记为“离开环境“然后，它会将所有在上下文中的变量，以及被在上下文中的变量引用的变量的标记去掉。这很麻烦，所以大多数语言提供自动内存管理，减轻程序员的负担，这被称为"垃圾回收机制"随后垃圾回收程序做一次内存清理，销毁带标记的所有值并收回它们的内存。语言中，因为是手动管理内存，内存泄露是经常出现的事情。

AJAX全称(Async Javascript and XML)即异步的JavaScript和XML，是一种创建交互式网页应用的网页开发技术，可以在不重新加载整个网页的情况下，与服务器交换数据，并且更新部分网页Ajax的原理简单来说通过对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面流程图如下：Ajax请求数据流程与“领导想找小李汇报一下工作”类似，上述秘书就相当于对象，领导相当于浏览器，响应数据相当于小李浏览器可以发送HTTP。

引擎会尝试在当前作用域下去寻找该变量，如果没找到，再到它的上层作用域寻找，以此类推直到找到该变量或是已经到了全局作用域。可见上述代码中在函数内部声明的变量或函数，在函数外部是无法访问的，这说明在函数内部定义的变量或者方法只是函数作用域。词法作用域，又叫静态作用域，变量被创建时就确定好了，而非执行阶段确定的。把作用域比喻成一个建筑，这份建筑代表程序中的嵌套作用域链，第一层代表当前的执行作用域，顶层代表全局作用域。变量的引用会顺着当前楼层进行查找，如果找不到，则会往上一层找，一旦到达顶层，查找的过程都会停止。

Taro 利用 Babel、React、Webpack 等技术，通过封装原生 API 和提供不同的 Polyfill 实现了多端适配，同时也支持复杂的样式表达和自动化导入组件等特性。Taro 是一个多端统一开发框架，可以使用一套代码编译成微信小程序、支付宝小程序、百度智能小程序、字节跳动小程序、QQ 小程序、快应用、H5 等多个平台的应用。：Taro 在运行时对代码进行了一些优化，例如使用字典树实现 JSX 解析、避免使用内置事件监听器、减少对原生 API 的调用等方式来优化性能。

cookieHTTP无状态的，每次请求都要携带cookie,以帮助识别身份服务端也可以向客户端set-cookie,cookie大小4kb默认有跨域限制：不可跨域共享，不可跨域传递cookie（可通过设置withCredential跨域传递cookie）cookie本地存储HTML5之前cookie常被用于本地存储HTML5之后推荐使用localStorage和sessionStorage现代浏览器开始禁止第三方cookie

用于转换结果的函数或数组。因为 JSON.stringify() 序列化时会忽略一些特殊的值，所以不能保证序列化后的字符串还是以特定的顺序出现（数组除外）。Object 对象的 getOwnPropertyNames 方法，获取到对象中的属性名，存到一个数组中，返回数组对象，我们可以通过判断数组的 length 来判断此对象是否为空。深拷贝最粗暴的方式是JSON.parse(JSON.stringify())，这个方式实现深拷贝会因为序列化的诸多特性从而导致诸多的坑点：比如现在我们要说的循环引用问题。

上面的foo函数，当参数为对象的时候才能进行解构，如果没有提供参数的时候，变量x和y就不会生成，从而报错，这里设置默认值避免。如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。参数默认值应该是函数的尾参数，如果不是非尾部的参数设置默认值，实际上这个参数是没发省略的。如果设置了默认值的参数不是尾参数，那么length属性也不再计入后面的参数了。一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域。参数默认值可以与解构赋值的默认值结合起来使用。

Reflect.ownKeys(obj)：返回一个数组，包含对象自身的（不含继承的）所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举。Object.keys(obj)：返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。返回一个对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对的数组。返回自身的（不含继承的）所有可遍历（enumerable）属性的键名的数组。在解构赋值中，未被读取的可遍历的属性，分配到指定的对象上面。

注意：通过扩展运算符实现的是浅拷贝，修改了引用指向的值，会同步反映到新数组。还可以接受第二个参数，用来对每个元素进行处理，将处理后的值放入返回的数组。返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回。参数是一个回调函数，接受三个参数依次为当前的值、当前的位置和原数组。如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。方法的参数写成一个整数，表示想要拉平的层数，默认为1。参数的逆运算，将一个数组转为用逗号分隔的参数序列。当参数只有一个的时候，实际上是指定数组的长度。

返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器。中，则会返回一个可响应的代理，而对源对象直接进行变更仍然是不可响应的。源码位置：src\core\observer\index.js。，但是实现的功能不是太复杂，而使用上面两个又有点繁琐。变更，它和被返回的对象是同一个对象。在非父子组件通信时，可以使用通常的。中，被传入的对象会直接被。翻译过来我们可以理解成。

jQuery等库的源码会将所有的代码都会放在(function(){....})()中，因为放在里面的所有变量，都不会被外泄和暴露，不会污染到外面，不会对其他的库或者 JS 脚本造成影响。这是函数作用域的一个体现。块语句（大括号“｛｝”中间的语句），如 if 和 switch 条件语句或 for 和 while 循环语句，不像函数，它们不会创建一个新的作用域。1、在 Web 浏览器中，全局执行环境被认为是 window 对象，因此所有全局变量和函数都是作为 window 对象的属性和方法创建的。

JavaScript阻塞DOM和CSSOM的构建的情况主要集中在以下两个方面：JavaScript文件被放置在head标签内部当JavaScript文件被放置在head标签内部时，浏览器会先加载JavaScript文件并执行它，然后才会继续解析HTML文档。因此，如果JavaScript文件过大或服务器响应时间过长，就会导致页面一直处于等待状态，进而影响DOM和CSSOM的构建。

obj1里面的o1是obj2 obj2里的fn是foo函数 在obj2里面调用的拿到obj2中的a。无论是否在严格模式下，在全局执行环境中（在任何函数体外部）this 都指向全局对象。换成箭头函数后 this指向当前作用域下的上级作用域的this window。通过构造函数创建了一个新的实例对象 所以当前的this指向新的实例对象。fun是window调用的所以去找全局里面的this.name。在函数内部，this的值取决于函数被调用的方式。上面的f是直接调用的指向undefined。

方法用于判断一个对象是否为数组。通过原型链判断是否具有和数组同一原型链的顶端。所有原始数据类型都能通过该方法判断，具有通用性。属性是否出现在某个实例对象的原型链上。

的参数是一个 CSS 查询语句，表示只对屏幕宽度不超过 700 像素的设备生效。这种方法的优点是简单方便，缺点是不可靠，因为用户可以修改这个字符串，让手机浏览器伪装成桌面浏览器。注意，苹果的 Safari 浏览器和 Firefox 浏览器都不支持这个属性，具体情况可以查看。表示当前设备的指针是不精确的。返回浏览器窗口里面的网页可见部分的宽度，比较适合指定网页在不同宽度下的样式。属性用于获取屏幕的当前方向，只有移动设备才有这个属性，桌面设备会返回。表示所有指针里面，只要有一个指针是不精确的，就符合查询条件。

数组不是以一组连续的区域存储在内存中，而是一种哈希映射的形式。它可以通过多种数据结构来实现，其中一种是链表。基本类型是保存在栈内存中的简单数据段，它们的值都有固定的大小，保存在栈空间，通过按值访问；引用类型是保存在堆内存中的对象，值大小不固定，栈内存中存放的该对象的访问地址指向堆内存中的对象，JavaScript不允许直接访问堆内存中的位置，因此操作对象时，实际操作对象的引用

为了解决 Promise 的问题，async、await 在 ES7 中被提了出来，是目前为止最好的解决方案async、await 函数写起来跟同步函数一样，条件是需要接收 Promise 或原始类型的值。异步编程的最终目标是转换成人类最容易理解的形式。

将目标 DOM 节点绘制到 canvas 画布，然后利用 canvas 相关的 API 以图片形式导出。等库，调用浏览器的 page 对象，基于 page.screenshots 截图并保存到磁盘。将 html 作为 svg 的外联元素，利用 svg 的 API 导出为图片。在后端生成海报，比如可以使用nodeJS，通过。

要回答这个问题得弄明白 ES6 的解构赋值(destructring assignment)语法。可以看到 useState 返回的是一个数组，那么为什么是返回数组而不是返回对象呢？如果在自定义的Hook中遇到了以上几个问题，不妨试试返回 object。返回数组，那么可以顺便对数组中的变量命名，代码看起来也比较干净。搞清楚了解构赋值，那上面的问题就比较好解释了。而如果是对象的话返回的值必须和。中使用一次，想要多次使用。内部实现返回的对象同名，必须得重命名返回值。

可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。从上面测试结果可以发现：传入的不是数组，则直接把参数添加到数组后面，如果传入的是数组，则将数组中的各个项添加到数组中。区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历​​​​​​​。flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

Fiber架构

connect的第三个参数就是用来做这件事。它真正连接 Redux 和 React，它包在我们的容器组件的外一层，它接收上面 Provider 提供的 store 里面的 state 和 dispatch，传给一个构造函数，返回一个对象，以属性形式传给我们的容器组件。componentDidMount时，添加事件this.store.subscribe(this.handleChange)，实现页面交互。接收Redux的store作为props，通过context对象传递给子孙组件上的connect。

随着项目涉及到页面越来越多，功能和业务代码也会随着越多，相应的 的构建时间也会越来越久构建时间与日常开发效率密切相关，当本地开发启动 或者 的时候，如果时间过长，会大大降低工作效率所以，优化 构建速度是十分重要的环节常见的提升构建速度的手段有如下：在使用时，可以通过配置、、属性来匹配文件，接触、规定哪些匹配应用如采用 ES6 的项目为例，在配置 时，可以这样：合理使用 resolve.extensions在开发中会有各种各样的模块依赖，这些模块可能来自于自己编写的代码，也可能来自第三方库，

1.传统对象结构Map本质上是一个键值对的集合。和传统对象结构相比，传统对象只能用字符串作为键名，这在使用上造成了很大的限制。上面带代码中，我们创建了一个对象并将一个节点对象作为它的键名，并进行了代码测试，首先验证了获取到的element节点为一个对象，再确定了经过toString方法转化后的结果，以这个值为键名成功的输出了value值objectData。上面的代码证明了传统对象的键名会通过toString方法转化为字符串类型注意：在我们访问对象成员的时，键名有空格时不能采用点访问，例如data.a

hooks中 “奇怪”（其实符合逻辑） 的 “闭包陷阱” 的场景，同时，在许多 react hooks 的文章里，也能看到 useRef 的身影，那么为什么使用 useRef 又能摆脱 这个 “闭包陷阱” ？搞清楚这些问题，将能较大的提升对 react hooks 的理解。react hooks 一出现便受到了许多开发人员的追捧,或许在使用react hooks 的时候遇到 “闭包陷阱” 是每个开发人员在开发的时候都遇到过的事情 (以下react示范demo，均为react 16.8.3 版本)一定遭遇过以

中存在两大数据类型：基本类型数据保存在在栈内存中引用类型数据保存在堆内存中，引用数据类型的变量是一个指向堆内存中实际对象的引用，存在栈中浅拷贝，指的是创建新的数据，这个数据有着原始数据属性值的一份精确拷贝如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址即浅拷贝是拷贝一层，深层次的引用类型则共享内存地址下面简单实现一个浅拷贝在中，存在浅拷贝的现象有：slice()concat()拓展运算符三、深拷贝深拷贝开辟一个新的栈，两个对象的

从上面我们可以看到，同步任务进入主线程，即主执行栈，异步任务进入任务队列，主线程内的任务执行完毕为空，会去任务队列读取对应的任务，推入主线程执行。出现分歧的原因在于异步任务执行顺序，事件队列其实是一个“先进先出”的数据结构，排在前面的事件会优先被主线程读取。宏任务的时间粒度比较大，执行的时间间隔是不能精确控制的，对一些高实时性的需求就不太符合。同步任务：立即执行的任务，同步任务一般会直接进入到主线程中执行。会阻塞下面的代码（即加入微任务队列），先执行。这时候，事件循环，宏任务，微任务的关系如图所示。

判断两个值是否为同一个值，它与==或===两个运算符都不一样，Object.is()不会强制转换两边的值，并且===运算符将数字-0和+0视为相等，而Object.is()则不是，它更加严格。返回一个由一个给定对象的自身可枚举属性组成的数组，这些属性的顺序与手动遍历该对象属性时一致；设置一个指定的对象的原型(即内部[[Prototype]]属性到另一个对象或null。在对象上直接定义个新的属性，或者修改现有的属性，并返回此对象；创建一个新对象，使用现有的对象来提供新创建对象的原型。获取实例的隐式原型(

ES6之前的JavaScript面向对象比较不好理解，涉及到很多知识和思想。ES6增加了class和extends来实现类的封装和继承，但是通过babel转换成ES5之后还是之前的一套逻辑。这里，我打算用四篇文章，来讲解一下关于ES5中面向对象的知识体系，一起学习一下吧！

数组的对象是Array() 1、length属性：获取字符串的长度 2、一维数组 [1,2,3,4,5,5] 二维数组 [1,2,4,4,5,[5,6,7,7,8]] var arr = [1,2,4,4,5,[5,6,7,7,8]]; console.log(arr[1]) console.log(arr[5][1]) 多维数组 [1...

事件有三要素：事件源、事件数据、事件处理程序事件冒泡：当元素嵌套的时候，内部元素激发某个事件后，默认情况下外部元素相应的事件也会跟着依次触发可以加return false;是阻止默认操作onclick: 鼠标单击触发ondblclick: 双击触发onmouseover: 鼠标移动上面触发onmouseout: 鼠标离开时触发onmousemove: 鼠标在上面移动时触发onchange: 只要内容改变触发onblur: 失去焦点时触发onfocus: 获得焦点时..

对象是包括属性与方法的数据类型，JS中大部分类型都是对象String/Number/Math/RegExp/DateOOP 对象是属性和方法的集合即封装； 将复杂功能隐藏在内部，只开放给外部少量方法，更改对象内部的复杂逻辑不会对外部调用造成影响即抽象； 继承是通过代码复用减少冗余代码 根据不同形态的对象产生不同结果即多态 基本声明使用字面量形式声明对象是最简单的方式let obj = { name: '张三', get:function() {.