Jassica

基础基本类型12345678910111213const num: number = 1;const str: string = 'str'const bool: boolean = true// `null` 和 `undefined` 是所有类型的子类型，不指定 `--strictNullChecks`标记 情况下，null和undefined可以赋值给number类型变量const nulls: null = nullconst undefine: undefined = undefinedconst symbols: symbol = Symbol('symbal')const any: any = 'any types' // 不清楚类型的变量（如：用户输入、第三方库），不希望类型检查let unusable: void = undefined; // void类型的变量只能赋予 `undefined` 和 `null` (函数没有返回值时可用) Never 表示永不存在值的类型（抛异常、根本不会有返回值的函数、 ...

1 防抖和节流事件高频触发的场景在JavaScript编程中，如果某个事件在短时间内高频触发，可能就会出现对应的 回调函数 响应速度跟不上调用频率的问题，导致页面延迟，假死或卡顿的现象，函数防抖（debounce） 函数节流（throttle） 就是这类场景下常用的优化手段，来节约系统资源，改善用户体验。 原理 函数防抖（debounce）：一定时间内，只会执行最后一次函数回调 函数节流（throttle）：一定时间内，只执行一次函数回调 函数防抖的适用场景 —— 搜索查询 函数防抖：高频事件触发后，经过一定的时间间隔才会执行函数回调；如果事件在事件间隔内又被触发，则会重新计时，只会执行最后一次的回调函数 1234567891011121314151617181920/** fn [function] 需要防抖的函数* delay [number] 毫秒，防抖期限值*/function debounce(fn, delay) { let timer = null //借助闭包 return function () { console. ...

继承原型链 让一个引用类型继承另一个引用类型的属性和方法 由 Prototype 不断把实例和原型对象联系起来的结构 过程 原型对象通过 constructor 属性指向构造函数 实例通过 Prototype 属性指向原型对象 缺陷 在赋值时，赋给变量的是它在内存中的地址 实例没办法向构造函数传参 继承方式借用构造函数继承 子类型的构造函数中借用父类型的构造函数（为了解决引用类型） 123456789101112131415161718192021function A() { this.name = "a" this.color = ['red', 'green']}function B() { // "借用"就在这里体现 A.call(this)}var b1 = new B()var b2 = new B()console.log(b1.name, b2.name) // a aconsole.log(b1.color, ...

JS的四种异步解决方案：回调函数、Promise、Generator、async/await异步当前代码的执行不影响后面代码执行。当程序运行到异步的代码时，会将该异步代码作为任务放进任务队列，而不是推入主线程的调用栈。等住线程执行完之后，再去任务队列里执行对应的任务。异步操作的优点：不会阻塞后续代码执行 异步应用场景 定时任务：setTimeout、setInterval 网络请求：ajax请求、动态创建img标签的加载 事件监听器：addEventListener 为了解决回调地狱的问题，提出了Promise、async/await、generatorPromise 特点 对象的状态不受外界影响（3种状态） Pending（进行中） Fulfilled（已成功）：resolve()表示 Rejected（已失败）：reject()表示 一旦状态改变就不会再变（两种状态改变：成功或失败） Pending -> Fulfilled Pending -> Rejected 123456789var promise = new Promise( ...

闭包 函数的嵌套 函数内部可以引用外部的变量和参数 变量和参数不会被垃圾回收机制回收 跨域jsonp 只能实现get一种请求 document.domain ➕ iframe 主域相同，子域不同 两个都是通过js 强制设置document.domain为基础主域，就成同域 location.hash ➕ iframe a域与b域相互通信，通过中间页c来实现。三个页面不同域之间利用iframe的location.hash传值，相同域之间直接js访问通信 window.name➕iframe 跨域数据由iframe 的 window.name 从外域传到本地域 postMessage 页面和打开的新窗口的数据传递 多窗口之间消息传递 页面与嵌套 iframe 消息传递 CORS 前端设置是否带 cookie xhr.withCredentials = true nginx反向代理 通过nginx 配置代理服务器 nodejs中间件代理webSocket 协议 非vue：node + express + http-proxy-middleware 搭建proxy 服务器 v ...

服务端渲染概念 SSR：服务端渲染，由服务侧完成页面的DOM结构拼接，发送到浏览器，为其绑定状态与事件，成为完全可交互页面的过程 CSR：客户端渲染，由客户端JS完成页面和数据的拼接，生成DOM结构交由浏览器渲染成页面的过程 SPA：单页面应用，只有一张WEB页面的应用，在导航切换的过程中页面不会刷新，只是局部更新内容。SPA实现的原理采用了CSR，页面中所有内容由JS控制，需要浏览器进行JS解析才能显示 SEO：搜索引擎化，利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名 SSG：预渲染，无需服务器实时动态编译，在构建时针对特定路由简单生成静态HTML文件 SAP 缺点 对SEO不友好，SEO是通过抓去网页源码中的关键字来简历索引库，而SPA源码中没有内容，而是通过js添加进去的，网站就会被搜索引擎直接pass掉了 首屏加载速度慢，页面内容由js拼接，浏览器等待js处理完成后才能渲染真正的DOM 结构，多了一些等待时间 服务端渲染 优点 前端耗时少。后端拼接完HTML，浏览器只需要直接渲染 有利于SEO。后端有完整的HTML页面，爬虫更容易获取信息 无需占用客户端 ...

React 顶层 API组件 React.Component React.PureComponent 仅在props 和 state 简单时使用，在深层数据结构发生变化时调用 forceUpdate() 来确保组件被正确地更新。使用immutable 对象加速嵌套数据的比较 React.memo 只适用函数组件，不适用class组件 仅检查props变化，memo包裹组件并且视线中拥有 useState 或 useContext的hook，发生变化时，仍会重新渲染 12345678910111213 // 默认情况只对复杂对象浅对比function MyComponent(props) { /* 使用 props 渲染 */}function areEqual(prevProps, nextProps) { /* props相等返回true,不相等返回false 与 shouldComponentUpdate 返回值相反（不等于返回true） */}export default React.memo ...

Hook 一些可以在函数组件中使用React state和生命周期等特性的函数 不能在 class 组件中使用 State Hook useState 类似class组件中的 this.setState，但它不会合并 新旧state 在函数调用时保存变量。state中的变量会被React保留 唯一的参数就是初始state 返回值：当前state和更新state的函数 123456789101112131415// 引入Hookimport React, {useState} from 'react';function Example() { // 声明 const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setC ...

代码分割打包 大多数 React 应用都会使用 Webpack、Rollup、Browserify 这类构建工具打包文件 打包是一个将文件引入并合并到一个单独文件的过程，最终形成一个 “bundle” 代码分割 打包器 Rollup Webpack Browserify factor-bundle 能够创建多个包并在运行时动态加载 引入代码分割的最佳方式是动态 import() 1234// Webpack 解析该语法时，会自动进行代码分割import("./math").then(math => { console.log(math.add(16, 26));}); 使用 Babel 时，确保 Babel 能够解析动态 import 语法而不是将其转换。对于这一要求需要 babel-plugin-syntax-dynamic-import 插件 React.lazy React.lazy 函数能像渲染常规组件一样处理动态引入（的组件） 想要在使用服务端渲染的应用中使用，推荐 Loadable Components 这个 ...

hello world1234ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root')); JSX (语法糖)1const element = <h1>Hello, world!</h1>; JSX 仅仅只是 React.createElement(component, props, …children) 函数的语法糖 jsx包含 视图与事件 可嵌入表达式 可包含多个子元素 防止注入攻击：渲染前，输入内容会被转义(字符串) 123const title = response.potentiallyMaliciousInput;// 直接使用是安全的：const element = <h1>{title}</h1>; Babel 把JSX转义成 React.createElement() 函数调用 1234567891011const element = ( ...