前端
文章平均质量分 52
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 评论 -
模块加载:ES6、CommonJS、AMD、CMD的区别
模块加载:ES6、CommonJS、AMD、CMD的区别一、运行和编译的概念1、编译包括编译和链接两步。编译:把源代码翻译成机器能识别的代码或者某个中间状态的语言,比如java只有JVM识别的字节码,C#中只有CLR能识别的MSIL。链接:是把编译生成的二进制文件,组合成为一个系统可以执行的可执行文件。运行:把编译出来的可执行文件代码在系统中执行的过程,此时代码被装载到内存中。2、模块的加载ES6、CommonJS、AMD、CMD是模块加载规范。二、CommonJS1、CommonJS介绍转载 2022-03-28 20:47:29 · 836 阅读 · 0 评论 -
MAC终端命令如何把python2改成python3
因为mac自带的python是python2,有的时候用python执行命令的时候老是需要打python3 xxx.py,操作起来很是麻烦。接下来给大家带来如何把默认的python指令默认指向python3(其实就是换了个别名)1.查看当前电脑python版本python -V // 显示2.7.x2.用brew升级pythonbrew update python 3.如果安装成功,去系统目录下回看到两个版本的pythonwhich pythonwhich python34.将系统py原创 2022-03-28 20:01:52 · 1374 阅读 · 0 评论 -
Mac怎么解决:Port xxxx is already in use
Mac怎么解决Port xxxx is already in use// 查看被占用进程的pidsudo lsof -i:8700// 杀死进程sudo kill -9 pid // 在这里我的pid是3894// 再检查一遍sudo lsof -i:8700原创 2022-03-28 19:58:36 · 875 阅读 · 0 评论 -
Database returned an invalid datetime value. Are time zone definitions for your database installed?
Database returned an invalid datetime value. Are time zone definitions for your database installed解决方案:修改settings.py的时区变量。修改前:LANGUAGE_CODE = 'zh-hans'TIME_ZONE = 'Asia/Shanghai'USE_I18N =TrueUSE_L10N =TrueUSE_TZ = True修改后:LANGUAGE_CODE = '原创 2022-03-10 16:36:25 · 1690 阅读 · 0 评论 -
浏览器架构
浏览器架构通常意义下,浏览器架构是如下图这样的:用户界面 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外,其他显示的各个部分都属于用户界面。浏览器引擎 用户界面和渲染引擎的桥梁,在用户界面和渲染引擎之间传送指令。浏览器引擎提供了开始加载URL资源 和一些其他高级操作方法,比如:重新加载、前进、后退动作,错误信息、加载进度等。渲染引擎 负责显示请求的内容。如果请求的内容是 HTML,它就负责解析 HTML 和 CSS 内容,并将解析后的内容显示在屏幕上。原创 2022-03-05 16:05:55 · 759 阅读 · 0 评论 -
display:inline-block去除默认间隙常用方法
display:inline-block去除默认间隙最佳方法方法:使用letter-spacingHTML代码:<div class="space"> <a href="##">AAA</a> <a href="##">BBB</a> <a href="##">CCC</a></div>CSS代码:.space { letter-spacing: -3px;}.s原创 2022-01-28 13:45:54 · 500 阅读 · 0 评论 -
prettier常用配置
prettier配置常用的选项{ "bracketSpacing": true, "semi": false, "singleQuote": true, "trailingComma":"none"}原创 2021-12-20 15:26:55 · 1392 阅读 · 0 评论 -
CSS高级之BFC(块级格式化上下文)详解
BFC(块级格式化上下文)BFC(Block formatting context)直译为"块级格式化上下文"。那些元素会具有BFC的条件不是所有的元素模式都能产生BFC,w3c 规范: 给这些元素添加如下属性可以触发BFC。float属性不为noneposition为absolute或fixeddisplay为 block, list-item, table , inline-block, table-cell, table-caption, flex, inline-flex等原创 2021-05-06 14:27:51 · 111 阅读 · 0 评论 -
CSS:用clearfix一并解决margin-top塌陷与清除浮动
用clearfix一并解决margin-top塌陷与清除浮动问题使用方法:1、复制以下css代码,再加上类名clearfix,即可一并解决margin-top塌陷与清除浮动问题。.clearfix:before,.clearfix:after { content:""; display:table; }.clearfix:after { clear:both;}.clearfix { *zoom:1;}2、给类加上类名clearfix。<div class="bo原创 2021-04-22 14:22:57 · 388 阅读 · 0 评论