Javascript
文章平均质量分 56
城南花开ze
技术不止
展开
-
JS 实现自动复制文本到剪切板
一、自动复制剪切板1. 在将文本信息获取后,需要自动复制剪切板,代码如下所示:```jshandleCopyClipboard = (content) => { const inputDom = document.createElement('input'); inputDom.setAttribute('value', content); document.body.appendChild(inputDom); inputDom.select(); document.execCo原创 2022-07-09 11:12:57 · 1881 阅读 · 0 评论 -
前端性能优化之资源传输优化、渲染优化、Web 加载和渲染原理
一、资源传输优化使用压缩 Gzip,如下所示:对传输资源进行体积压缩,可高达 90%配置 Nginx 启用 Gzip启用 Keep Alive,如下所示:一个持久的 TCP 连接,节省了连接创建时间Nginx 默认开启 Keep AliveHTTP 资源缓存,HTTP 缓存是 client、cache、server 之间,提高重复访问时资源加载的速度。HTTP 缓存,如下所示:Cache-Control/ExpriesLast-Modified + If-Modif原创 2022-04-09 10:56:12 · 676 阅读 · 0 评论 -
前端性能优化之资源的压缩与合并和 Webpack 优化
一、资源的压缩与合并对于资源的压缩与合并,如下所示:减少 http 请求数量减少请求资源的大小HTML 压缩,如下所示:使用在线工具进行压缩使用 html-minifier 等 npm 工具CSS 压缩,如下所示:使用在线工具进行压缩使用 clean-css 等 npm 工具JS 压缩与混淆,如下所示:使用在线工具进行压缩使用 Webpack 对 JS 在构建时压缩CSS JS 文件合并,如下所示:若干个小文件无冲突,服务相同的模块优化加原创 2022-04-09 10:52:53 · 762 阅读 · 0 评论 -
前端性能优化之浏览器渲染原理和关键渲染路径、复合线程、图层及优化、JS 开销及优化和 HTML 和 CSS 优化
一、浏览器渲染原理和关键渲染路径浏览器构建渲染树,DOM 树和 CSSDOM 树合成为 Render Tree 渲染树。浏览器的渲染流程,如下所示:JavaScript -> Style -> Layout -> Paint -> Composite。布局与绘制,如下所示:渲染树只包含网页需要的节点布局计算每个节点精确的位置和大写,盒模型绘制是像素化每个节点的过程影响回流的操作,如下所示:添加、删除元素操作 stylesdisplay: none原创 2022-04-09 10:49:15 · 546 阅读 · 0 评论 -
前端性能优化之 Web 性能优化、性能指标和优化目标、RAIL 测量模型和常用的性能测量 APIs
一、Web 性能优化进行 Web 性能优化,因为性能是 Web 网站和应用的支柱,流量、搜索、转换率和用户体验的关系。寻找性能瓶颈,如下所示:了解性能指标,多快才算快利用测量工具和 APIs优化问题,重新测量迭代移动端挑战多,如下所示:设备硬件、网速、屏幕尺寸、交互方式用户更缺少耐心,大于 3 秒加载导致 53% 的跳出率持续增长的移动用户和移动电商业务二、性能指标和优化目标性能优化加载,如下所示:理解加载瀑布图基于 HAR 存储与重建性能信息速度指数 Sp原创 2022-04-09 10:45:57 · 632 阅读 · 0 评论 -
JS 处理 Base64 编码转为上传时的 File 文件流
一、Base64 转 File 文件流在做有关图片需求的时候,需要将 base64 编码,转换成 file 文件流,函数如下所示:base64toFile = (dataurl,filename='file') => { let arr = dataurl.split(','); let mime = arr[0].match(/:(.*?);/)[1]; let suffix = mime.split('/')[1]; let bstr = atob(arr[1]);原创 2022-03-31 23:21:25 · 3331 阅读 · 0 评论 -
手写事件总线函数和 axios 函数
一、事件总线事件总线,如下所示:eventBus,包含所有功能的事件总线对象eventBus.on,绑定事件监听eventBus.emit,分发事件eventBus.off,解绑指定事件名的事件监听,如果没有指定解绑所有事件总线的实现,代码如下所示: export const eventBus = { // 保存类型与回调的容器 callbacks: {}}// 绑定事件eventBus.on = function (type, callback) { //原创 2021-08-22 11:23:33 · 243 阅读 · 0 评论 -
手写实现字符串函数之倒序、判断是否是回文、截取字符串以及事件委托
一、字符串倒序字符串倒序,生成一个倒序的字符串。字符串倒序的实现,代码如下所示:export function reverseString (str) { // 将字符串转为数组 // let arr = str.split(''); let arr = [...str]; // 翻转数组 arr.reverse(); // 将数组拼接成字符串 let s = arr.join(''); return s;}手写函数字符串倒序的应用,代码如下所示://原创 2021-08-22 11:21:34 · 274 阅读 · 0 评论 -
手写实现对象方法之创建新对象、比对对象类型、对象合并、浅拷贝和深拷贝
一、创建新对象创建新对象,通过新的 object 对象。创建新对象的实现,代码如下所示:export function newInstance (Fn, ...args) { // 创建一个新对象 const obj = {}; // 修改函数内部 this 指向新对象并执行 const result = Fn.call(obj, ...args); // 修改新对象的原型对象 obj._proto_ = Fn.prototype; // 返回新对象 return原创 2021-08-22 11:19:24 · 211 阅读 · 0 评论 -
手写实现数组方法之分块、差集、删除数组某些元素和获取数组某些元素
一、数组分块数组分块,将数组拆分成多个 size 长度的区块,每个区块组成小数组,整体成一个二维数组。数组分块的实现,代码如下所示:export function chunk (arr, size=1) { // 判断 if (arr.length === 0) { return []; } // 声明两个变量 let result = []; let tmp = []; // 遍历 arr.forEach(item => { // 判断 t原创 2021-08-22 11:16:44 · 4678 阅读 · 0 评论 -
手写实现数组方法之去重、concat、slice 和 扁平化
一、数组去重数组的去重,有三种方法,如下所示:利用 forEach() 和 indexOf(),本质上是双重遍历,效率差些利用 forEach() + 对象容器,只需一重遍历,效率高些利用 ES6 语法:from + Set 或者 ... + set,编码简洁数组去重的实现,代码如下所示:function unique1 (arr) { // 声明一个空数组 const result = []; // 遍历原始数组 arr.forEach(item => {原创 2021-08-22 11:13:59 · 1049 阅读 · 2 评论 -
手写实现数组方法之 map、reduce、filter、find、findInex、every 和 some
一、map 方法map 方法,返回一个由回调函数的返回值组成的新数组。map 的实现,代码如下所示:export function map(arr, callback) { // 声明一个空的数组 let result = []; // 遍历数组 for(let i=0;i<arr.length;i++) { // 执行回调 result.push(callback(arr[i], i)); } // 返回结果 return result;}原创 2021-08-22 11:11:08 · 675 阅读 · 0 评论 -
手写实现函数方法之 call、apply、bind、节流与防抖
一、call 方法call,语法为 call(fn, obj, ...args),功能为执行 fn,使 this 为 obj,并将后面的 n 个参数传给 fn,等同于函数对象的 call 方法。call 的实现,代码如下所示:export function call (Fn, obj, ...args) { // 判断 if (obj === undefined || obj === null) { obj = globalThis; // 全局对象 } // 为 obj原创 2021-08-22 11:07:42 · 315 阅读 · 0 评论 -
Promise 的手写及自定义封装
一、promise 的手写及自定义封装promise 的自定义封装,then 和 catch 方法,代码如下所示:// 声明构造函数function Promise (executor) { // 添加属性 this.PromiseState = 'pending'; this.PromiseResult = null; // 声明属性 // this.callback = {}; this.callbacks = []; // 保存实例对象的 this 值 con原创 2021-08-08 16:38:09 · 191 阅读 · 0 评论 -
Promise 的关键问题理解及使用
一、promise 的关键问题如何改变 promise 的状态,如下所示:resolve(value): 如果当前是 pending 就会变为 resolvedreject(reason): 如果当前是 pending 就会变为 rejected抛出异常: 如果当前是 pending 就会变为 rejected一个 promise 指定多个成功/失败回调函数, 都会调用吗,如下所示:当 promise 改变为对应状态时都会调用改变 promise 状态和指定回调函数谁先谁后,原创 2021-08-08 16:35:41 · 214 阅读 · 0 评论 -
Promise 的 API 理解与使用
一、promise 的 API 说明Promise 构造函数: Promise (excutor) {},如下所示:executor 函数: 执行器 (resolve, reject) => {}resolve 函数: 内部定义成功时我们调用的函数 value => {}reject 函数: 内部定义失败时我们调用的函数 reason => {}说明: executor会在 Promise 内部立即同步调用,异步操作在执行器中执行Promise.prototype.t原创 2021-08-08 16:34:14 · 1366 阅读 · 0 评论 -
Promise 的理解与使用
一、promise 的理解promise 是什么,如下所示:Promise 是一门新的技术(ES6 规范)Promise 是 JS 中进行异步编程的新解决方案从语法上来说: Promise 是一个构造函数从功能上来说: promise 对象用来封装一个异步操作并可以获取其成功/失败的结果值promise 的状态改变,如下所示:pending 变为 resolvedpending 变为 rejected只有这 2 种, 且一个 promise 对象只能改变一次无论变为成功还原创 2021-08-08 16:32:53 · 261 阅读 · 0 评论 -
axios 源码分析的总结
一、axios 源码分析的总结axios 与 Axios 的关系,如下所示:从语法上来说: axios 不是 Axios 的实例从功能上来说: axios是 Axios 的实例axios 是 Axios.prototype.request 函数 bind() 返回的函数axios 作为对象有 Axios 原型对象上的所有方法, 有 Axios 对象上所有属性instance与 axios 的相同点,如下所示:都是一个能发任意请求的函数: request(config)都有发特定原创 2021-07-25 15:17:37 · 154 阅读 · 0 评论 -
axios 请求取消及其实现过程
一、axios 请求取消axios 请求取消,代码如下所示:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1原创 2021-07-25 14:13:01 · 586 阅读 · 0 评论 -
axios 拦截器及其实现过程
一、axios 拦截器axios 拦截器,代码如下所示:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0原创 2021-07-25 14:11:36 · 1019 阅读 · 0 评论 -
axios 请求发送及其实现过程
一、axios 请求发送axios 请求发送,代码如下所示:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1原创 2021-07-25 14:10:44 · 1043 阅读 · 0 评论 -
axios 的创建实例对象、拦截器和请求取消
一、axios 创建实例对象axios 创建实例对象,代码如下所示:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca原创 2021-07-25 14:08:33 · 362 阅读 · 0 评论 -
axios 的基本使用、其它使用和默认配置
一、axios 的基本使用axios 的基本使用,代码如下所示:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale原创 2021-07-25 14:07:03 · 403 阅读 · 0 评论 -
axios 的理解与使用
一、axios 的理解axios 是什么,如下所示:前端最流行的 ajax 请求库react/vue 官方都推荐使用 axios 发 ajax 请求文档: https://github.com/axios/axiosaxios 特点是什么,如下所示:基于 xhr + promise 的异步 ajax 请求库浏览器端/ node 端都可以使用支持请求/响应拦截器支持请求取消请求/响应数据转换批量发送多个请求axios 常用语法,如下所示:axios(config原创 2021-07-25 13:31:18 · 267 阅读 · 0 评论 -
axios 源码深入分析之 源码实现分析
一、源码实现分析axios 源码目录结构,如下所示:├── /dist/ # 项目输出目录├── /lib/ # 项目源码目录│ ├── /adapters/ # 定义请求的适配器 xhr、http│ │ ├── http.js # 实现http适配器(包装http包)│ │ └── xhr.js # 实现xhr适配器(包原创 2020-06-30 00:34:18 · 365 阅读 · 0 评论 -
axios 源码深入分析之 XHR 和 axios 的理解和使用
一、XHR 的相关内容MDN 文档 :https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest理解 XHR,如下所示:使用 XMLHttpRequest (XHR) 对象可以与服务器交互, 也就是发送 ajax 请求前端可以获取到数据,而无需让整个的页面刷新。这使得 Web 页面可以只更新页面的局部,而不影响用户的操作。区别 ajax 请求与一般 HTTP 请求,如下所示:ajax 请求是一种特别的 http原创 2020-06-28 22:45:01 · 1861 阅读 · 0 评论 -
axios 源码深入分析之 HTTP 和 json-server
一、 HTTP 相关内容前后台交互的基本过程,如下所示:前后应用从浏览器端向服务器发送 HTTP 请求(请求报文)后台服务器接收到请求后, 调度服务器应用处理请求, 向浏览器端返回 HTTP 响应(响应报文)浏览器端接收到响应, 解析显示响应体/调用监视回调HTTP 请求报文,如下:请求行: 请求方式 /url,如下所示:method url GET /product_detail?id=2 POST /login多个请求头: 一个请求头由 name:value 组成, 如 H原创 2020-06-27 21:58:46 · 328 阅读 · 0 评论 -
前端框架面试之 项目设计 和 项目流程
一、项目设计对于组件和状态设计,从数据驱动视图、状态的数据结构设计,React-state、Vue-data,视图中组件结构和拆分。对于 React 实现 TodoList,state 数据结构设计、组件设计组件通讯和结合 redux,如下所示:state 数据结构设计,如下所示:用数据描述所有的内容数据要结构化,易于程序操作,遍历和查找数据要可扩展,以便增加新的功能组件设计的拆分和组合,以及组件通讯,如下所示:从功能上拆分层次尽量让组件原子化容器组件只管理数据,UI 组件原创 2020-06-20 11:03:09 · 546 阅读 · 0 评论 -
前端框架面试之 webpack、babel 和 webpack 的面试真题
一、webpack 和 babel对于 webpack,分为基本配置、高级配置、优化打包效率、优化产出代码、构建流程概述和 babel。对于 webpack 的基本配置,拆分配置和 merge,启动本地服务,处理 ES6,处理样式,处理图片和模块化,代码如下所示:webpack.common.jsconst path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')const { srcPa原创 2020-06-20 09:40:31 · 779 阅读 · 0 评论 -
前端框架面试之 React 的使用、 React 的原理和 React 的面试真题
一、 React 的使用React 的基本知识点,如下所示:JSX 基本使用,变量、表达式、class style、子元素和组件等等,代码如下所示:import React from 'react'import './style.css'import List from '../List'class JSXBaseDemo extends React.Component { constructor(props) { super(props) th原创 2020-06-19 22:17:58 · 506 阅读 · 0 评论 -
前端框架面试之 Vue 面试真题 和 Vue3 相关考点
一、Vue 面试真题v-show 和 v-if 的区别,答案如下所示:v-show 通过 CSS display 控制显示与隐藏v-if 组件真正的渲染和销毁,而不是显示与隐藏频繁切换显示状态用 v-show,否则用 v-if为何在 v-for 中用 key,答案如下所示:必须用 key,且不能是 index 和 randomdiff 算法中通过 tag 和 key 来判断,是否是 sameNode减少渲染次数,提升渲染性能Vue 组件如何通讯,常见的方式,答案如下所示:原创 2020-06-19 18:02:25 · 1351 阅读 · 0 评论 -
前端框架面试之 Vue 的使用 和 Vue 的原理万字长文总结
一、 Vue 的使用vue 基本知识点,如下所示:插值、表达式,指令、动态属性,v-html 会有 XSS 风险,会覆盖子组件,代码如下所示:<template> <div> <p>文本插值 {{message}}</p> <p>JS 表达式 {{ flag ? 'yes' : 'no' }} (只能是表达式,不能是 js 语句)</p> <p :id="d原创 2020-06-19 00:47:54 · 1120 阅读 · 1 评论 -
前端面试锦集之 vue 面试总结
一、 vue 面试题axios 是什么?怎么使用?描述使用它实现登录功能的流程?它与 fetch、ajax 的区别是什么?答案如下:axios 是基于 promise 用于浏览器和 node.js 的一个 http 客户端,主要用于向后台发起请求的,以及在请求中做更多的控制支持 promise,提供了一些并发的方法,提供拦截器,提供支持 CSRF,跨站请求伪造axios 与 fetch 都是基于 promise 的语法,后者默认是使用 callback 的方式。fetch 本质上脱离 xhr原创 2020-06-18 22:30:37 · 279 阅读 · 0 评论 -
前端面试锦集之 react 万字长文面试总结
一、react 面试题redux 中间件的原理的理解,答案如下所示:redux 是一个应用数据流框架,主要是解决了组件间状态共享的问题,原理是集中式管理,主要有三个核心方法,action,store,reducer工作流程是 view 调用 store 的 dispatch 接收 action 传入 store,reducer 进行 state 操作,view 通过 store 提供的 getState 获取最新的数据新增 state,对状态的管理更加明确,通过 redux,流程更加规范了,减原创 2020-06-17 20:00:12 · 453 阅读 · 0 评论 -
前端面试锦集之 node.js 及项目工程化
一、node.js 及项目工程化使用 Node.js 编写代码实现遍历文件夹及所有文件名,代码如下所示:// 实现遍历文件下,获取所有的文件// 这里使用同步的方式比异步的方式简单的多,异步需要回调里面嵌套回调const fs = require('fs')const path = require('path')const readDir = (entry) => { const dirInfo = fs.readdirSync(entry);// [ 'hello', 'te原创 2020-06-17 18:13:18 · 327 阅读 · 0 评论 -
前端面试锦集之基础题总结
一、面试基础题作用域和值类型引用类型的传递,代码如下所示:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //第1题 作用域 var num1 = 55; var num2原创 2020-06-16 22:59:08 · 306 阅读 · 0 评论 -
前端跳槽面试总结之业务能力、团队协作能力、职业竞争力和职业规划
一、业务能力对于业务能力的部分,无论是主动描述,还是被动回答,包括如下几点:我做过什么业务负责的业务有什么业绩使用了什么技术方案突破了什么技术难点遇到了什么问题最大的收获是什么对于以上,进行举例,如下所示:我做过什么业务,独立负责 360数据彩票走势图的开发负责的业务有什么业绩,历时3周完成所有彩种开发,用户量上涨 15%使用了什么技术方案,区别常规 canvas方案,使用 vml + svg 方案突破了什么技术难点,解决了走势图高级绘图板的开发遇到了什么问题,橡皮擦原创 2020-06-14 23:46:04 · 1657 阅读 · 0 评论 -
前端跳槽面试总结之渲染机制、运行机制、页面性能和错误监控
一、渲染机制对于渲染机制,会从 DOCTYPE 及作用、浏览器渲染过程、重排 Reflow、重绘 Repaint和 布局 Layout 这几个方面。对于 DOCTYPE 及作用,DTD 是文档类型定义,是一系列的语法规则,用来定义 XML 或 XHTML 的文件类型。浏览器会使用它来判断文档类型,决定使用何种协议来解析,以及切换浏览器模式。 DOCTYPE 是用来声明文档类型和 DTD 规范的,一个主要的用途是文件的合法性验证。如果文件代码不合法,那么浏览器解析时便会出一些差错。常见的 DOCTY原创 2020-06-14 22:22:13 · 237 阅读 · 0 评论 -
前端跳槽面试总结之递归、波兰式和逆波兰式算法类
一、递归递归,是一种解决问题的方法,它解决问题的各个小部分,直到解决最初的大问题,递归通常涉及到函数的自身调用。递归函数,能够直接调用自身的方法或是函数。同样的,间接的调用自己的函数也是递归函数。每一个递归函数都必须要有边界条件,即不再递归调用的条件(停止点),防止无限递归下去。如果忘记停止递归调用的边界条件,递归调用并不无限的执行下去;浏览器会直接抛出错误,也就是我们所谓的栈溢出错误,每一个浏览器都有自己的上限。递归,实现斐波那契函数,代码如下所示:function fibonacci(nu原创 2020-06-14 16:13:56 · 492 阅读 · 0 评论 -
前端跳槽面试总结之堆栈、队列、链表算法类
一、堆栈堆通常是一个可以被看做一棵树的数组对象,堆总是满足下列性质,如下所示:堆中某个节点的值总是不大于或不小于其父节点的值;堆总是一棵完全二叉树。将根节点最大的堆叫做最大堆或大根堆,根节点最小的堆叫做最小堆或小根堆。常见的堆有二叉堆、斐波那契堆等。堆是在程序运行时,而不是在程序编译时,申请某个大小的内存空间。即动态分配内存,对其访问和对一般内存的访问没有区别。堆是应用程序在运行的时候请求操作系统分配给自己内存,一般是申请/给予的过程。堆是指程序运行时申请的动态内存,而栈只是指一种使用原创 2020-06-14 15:41:21 · 506 阅读 · 0 评论