学习笔记
文章平均质量分 60
gongshaoxu
前端
展开
-
Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template
发生错误error Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template.然后从Command Line Tools中选择你的Xcode版本,。最后重新pod install,问题解决。原创 2022-10-06 19:00:59 · 1249 阅读 · 1 评论 -
H5路由的pushState(),replaceState()和popstate()用法
history.pushState:是H5的方法,用于向history.state中添加url信息history.replaceState:是H5的方法,用于向history.state中替换url信息popstate:是H5的事件,用于监听go和back事件,history.pushState()或history.replaceState()不会触发popstate事件。...原创 2022-08-30 21:58:47 · 1296 阅读 · 0 评论 -
实现H5路由和Hash路由
主要是监听当点击前进后退键触发的popstate事件以及当发生路由跳转时触发的pushstate事件,这里没有用到replacestate事件。// _bindPopstate方法监听浏览器go()和back()触发的popState事件。相对简单,主要监听hashchange这一个事件,当页面加载时需要监听load事件防止白屏。......原创 2022-08-30 19:26:25 · 635 阅读 · 0 评论 -
数组扁平化和对象格式化
JS中,实现数组扁平化最简单的就是flat()方法,如[1,2,3, [1,2,3, [1,2,3]]].flat(2)即可,2代表的是深度是两层。数组扁平化(普通递归)对象格式化(看看即可)数组扁平化(尾递归)原创 2022-08-18 16:50:04 · 265 阅读 · 0 评论 -
axios如何二次封装
axios`的 API 很友好,你完全可以很轻松地在项目中直接使用。不过随着项目规模增大,如果每发起一次`HTTP`请求,就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作,都需要写一遍这种重复劳动不仅浪费时间,而且让代码变得冗余不堪,难以维护。为了提高我们的代码质量,我们应该在项目中二次封装一下 axios 再使用...原创 2022-08-14 15:40:21 · 10681 阅读 · 1 评论 -
history路由和hash路由的区别
hash模式的实现原理是通过监听hashChange事件来实现的。history.pushState/replaceState不会触发onPopState事件,页面不会刷新,需要手动调用地址变化之后的处理函数,并在处理函数内部决定跳转逻辑;监听popstate事件是为了响应浏览器的前进后退功能。 history模式开发的SPA项目,需要服务器端做额外的配置,否则会出现刷新白屏(链接分享失效)。原因是页面刷新时,浏览器会向服务器真的发出对这个地址的请求,而这个文件资源又不存在,所以就报404。...原创 2022-08-12 16:57:30 · 578 阅读 · 0 评论 -
vue2到vue3有哪些升级
vue2到vue3有哪些升级Vue3.0在架构上相比vue2.x做了升级,性能上得到了很大的提升,Composition API的出现,让组件抽离、逻辑代码复用更加灵活。一、Composition API: 组合API/注入API这里要说到代码的组织方式,传统的网页是html/css/javascript(结构/样式/逻辑)分离。vue/react通过组件化的方式,将联系紧密的结构/样式/逻辑放在一起,有利于代码的维护。Composition api更进一步,着力于JavaScript(逻辑)部分,转载 2022-05-30 10:43:35 · 848 阅读 · 0 评论 -
SSR和CSR的区别
SSR和CSR的区别SSR(Server Side Rendering) :传统的渲染方式,由服务端把渲染的完整的页面吐给客户端。这样减少了一次客户端到服务端的一次http请求,加快相应速度,一般用于首屏的性能优化。CSR(Client Side Rendering):是一种目前流行的渲染方式,它依赖的是运行在客户端的JS,用户首次发送请求只能得到小部分的指引性HTML代码。第二次请求将会请求更多包含HTML字符串的JS文件。简而言之,就是数据拼接HTML字符串这件事放在服务端还是客户端造成了两者区别原创 2022-05-28 21:30:57 · 1992 阅读 · 0 评论 -
vuex4的基本用法
vuex4的基本用法VueX 是一个专门为 Vue.js 应用设计的状态管理构架,统一管理和维护各个vue组件的可变化状态。Vuex五个核心概念:state, getters, mutations, actions, modulesstate:vuex的基本数据,用来存储变量getter:从基本数据(state)派生的数据,相当于state的计算属性mutation:提交更新数据的方法,必须是同步的(异步逻辑在action中写)action:Action 提交的是 mutati原创 2022-05-28 20:45:11 · 2547 阅读 · 0 评论 -
vue3组件通信方式
vue3七种组件通信方式面试题经常会问到vue3组件间的通信方式,下文列举了七种常见的通信方式。propsemitv-modelrefsprovide/injecteventBusVuex4/pinia(vuex5)1. Props方式父组件以数据绑定的形式声明要传递的数据,子组件通过defineProperty()方法创建props对象,即可拿到父组件传来的数据。父组件的template中:<!-- list是我们要传递的数据 --><child-compo原创 2022-05-28 20:21:57 · 11462 阅读 · 4 评论 -
TS基础及面试题
TS基础及面试题基础知识基础类型: number string boolean array objectenum: 枚举type, interface联合类型 | (联合类型一次只能一种类型;而交叉类型每次都是多个类型的合并类型。)交叉类型 & (联合类型一次只能一种类型;而交叉类型每次都是多个类型的合并类型。)typeoftypeof 操作符可以用来获取一个变量声明或对象的类型。function toArray(x: number): Array<n原创 2022-05-19 16:12:55 · 18446 阅读 · 1 评论 -
tsconfig.json中的配置项compileOptions
{ "compilerOptions": { /* 基本选项 */ "target": "es5", // 指定 ECMAScript 目标版本: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT' "module": "commonjs", // 指定使用模块: 'commonjs', 'amd', 'system',原创 2022-05-19 16:07:35 · 449 阅读 · 0 评论 -
JS原型链与继承
JS原型链与继承new是什么 / new的原理 / new时候做了些什么 function Course() {}; const course = new Course();创建了一个空对象,作为返回的对象实例将生成空对象的原型对象指向了构造函数的prototype属性将当前实例对象赋给了内部this执行构造函数的初始化代码原型链一句话概括:JS中每一个对象的__proto__属性都指向构造函数的prototype属性,而构造函数本身就是一原创 2022-05-14 18:28:18 · 88 阅读 · 0 评论 -
webpack打包原理
webpack打包原理webpack打包原理是根据文件间的依赖关系对其进行静态分析,将这些模块按指定规则生成静态资源,当 webpack处理程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块,将所有这些模块打包成一个或多个bundle。看图理解webpack打包流程,如下图所示:读取入口文件;基于 AST(抽象语法树) 分析入口文件,并产出依赖列表;AST (Abstract Syntax Tree)抽象语法树 在计算机科学中,或简称语法树(Syntax tree),是源代码转载 2022-05-03 21:39:37 · 2175 阅读 · 0 评论 -
JS函数式编程
JS函数式编程特点Vue3 React16.8 全面化函数式的推动函数式编程可以使得代码单元相对更加独立 - tree shaking过程更顺畅,更方便做UT减少了对this的依赖,减轻了开发人员对于指向问题的困惑js天生友好函数式:ramda、loadsh概念一种抽象运算过程函数式的函数并非对于过程运算,函数的映射幂等 - 相同的输入始终得到相同的输出纯函数let arr = [1, 2, 3, 4, 5];arr.slice(0, 3); // [1, 2, 3原创 2022-05-03 21:28:18 · 922 阅读 · 0 评论 -
用ts封装一个axios
用ts封装一个axios前置知识axios.create(config) 对axios请求进行二次封装根据指定配置创建一个新的 axios ,也就是每个axios 都有自己的配置新的 axios 只是没有 取消请求 和 批量请求 的方法,其它所有语法都是一致的const instance = axios.create({ baseURL:"http://localhost:3000"})const instance2 = axios.create({ baseURL:"ht原创 2022-05-02 16:58:10 · 1455 阅读 · 0 评论 -
用ts封装一个ajax
用typescript封装一个ajaxinterface IOptions { url: string, type?: "GET" | "POST", data: any, timeout?: number}function formatUrl(obj) { let urlArr = [] for (let key in obj) { urlArr.push(`${key}=${encodeURIComponent(obj[key])}原创 2022-05-02 10:26:21 · 576 阅读 · 0 评论 -
浏览器事件模型
浏览器事件模型浏览器事件模型中的过程主要分为三个阶段:捕获阶段、目标阶段、冒泡阶段。addEventListener的第三个参数, 如果为true,就是代表在捕获阶段执行。如果为false, 就是在冒泡阶段进行window.addEventListener("click", function (e) { console.log("window 捕获", e.target.nodeName, e.currentTarget.nodeName);}, true);window.addEven原创 2022-04-30 19:50:28 · 469 阅读 · 0 评论 -
浏览器对象模型以及常见API
浏览器对象模型常见API 及用法什么是浏览器对象模型BOM :Browser Object Model(浏览器对象模型),浏览器模型提供了独立于内容的、可以与浏览器窗口进行滑动的对象结构,就是浏览器提供的 API其主要对象有:window 对象——BOM 的核心,是 js 访问浏览器的接口,也是 ES 规定的 Global 对象location 对象:提供当前窗口中的加载的文档有关的信息和一些导航功能。既是 window 对象属 性,也是 document 的对象属性navigation 对象原创 2022-04-30 19:49:26 · 286 阅读 · 0 评论 -
如何使用ES6实现一个Promise
一步步实现一个Promise平常用promise的时候, 是通过new关键字来new Promise(), 所以咱们应该用构造函数或者class来实现.class MPromise { constructor() { }}定义三种状态类型const PENDING = 'pending';const FULFILLED = 'fulfilled';const REJECTED = 'rejected';设置初始状态class MPromise {原创 2022-04-20 16:54:40 · 243 阅读 · 0 评论 -
path.resolve()的使用技巧
path.resolve()的使用技巧使用webpack不可避免的用到node的path模块,例如我们在webpack.config.js中做了如下配置:const path = require('path')module.exports = { mode: 'none', entry: './src/index.js', output: { filename: "bundle.js", path: path.resolve(__dirname,原创 2022-04-02 11:41:47 · 1675 阅读 · 0 评论 -
TypeScript入门( 学习笔记)
TypeScript入门( 学习笔记)1. TypeScript简介TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准。TypeScript 很像后端 Java、C#这样的面向对象语言。TypeScript 可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。1.1 JavaScript 与 TypeScript 的区别区别:TypeScript 是 JavaScript 的超集(TypeScript原创 2022-01-21 21:15:50 · 491 阅读 · 0 评论 -
JS模块化(学习笔记)
JS模块化模块化是一个语言膨胀的必经之路 ,它能够帮助开发者拆分和组织代码。模块化的发展情况: 无模块化–>CommonJS规范–>AMD规范–>CMD规范–>ES6模块化1. 无模块化1.1 全局函数模式: 将不同的功能封装成不同的全局函数/** * 全局函数模式: 将不同的功能封装成不同的全局函数 */let msg = 'module1'function foo () { console.log('foo()', msg)}function bar (原创 2022-01-07 21:21:15 · 227 阅读 · 0 评论 -
promise.prototype.then方法
promise.prototype.then方法具体讲解then方法有2个参数,第一个是成功的回调,第二个是失败的回调,then方法会返回一个新的Promise实例,所以可以进行链式调用,并且then方法接收的是成功还是失败可以通过上一个Promise的状态判断。promise.then(onFulfilled, onRejected)参数要求1.1 onFulfilled 必须是函数类型, 如果不是函数, 应该被忽略.1.2 onRejected 必须是函数类型, 如果不是函数, 应该被忽原创 2022-01-06 14:49:37 · 799 阅读 · 0 评论 -
PromiseA+规范及常用方法(学习笔记)
本篇讲述promise的三个状态以及promise基本用法原创 2022-01-06 14:31:49 · 359 阅读 · 0 评论