- 博客(37)
- 收藏
- 关注
RSS订阅原创 CentOS云服务器部署http/https服务
0.0.0.0有几个不同的含义，不过当告诉服务器监听了0.0.0.0， 意味着监听每一个可用的网络接口，从服务器进程的角度来看，IP 地址为127.0.0.1 的环回适配器看起来就像机器上的任何其他网络适配器一样，因此被告知监听0.0.0.0的服务器也将接受该接口上的连接。这样，即使80端口被占用，你仍然可以使用 Nginx 来将请求转发到可用的端口上。 因此在实际应用中，一般我们在服务端绑定端口的时候可以选择绑定到0.0.0.0， 这样我的服务访问就可以通过主机的多个ip地址访问我的服务。
2023-10-10 19:07:41
234
原创 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
1324
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
1501
原创 实现H5路由和Hash路由
主要是监听当点击前进后退键触发的popstate事件以及当发生路由跳转时触发的pushstate事件，这里没有用到replacestate事件。// _bindPopstate方法监听浏览器go()和back()触发的popState事件。相对简单，主要监听hashchange这一个事件，当页面加载时需要监听load事件防止白屏。......
2022-08-30 19:26:25
717
原创 数组扁平化和对象格式化
JS中，实现数组扁平化最简单的就是flat()方法，如[1,2,3, [1,2,3, [1,2,3]]].flat(2)即可，2代表的是深度是两层。数组扁平化（普通递归）对象格式化（看看即可）数组扁平化（尾递归）
2022-08-18 16:50:04
409
原创 axios如何二次封装
axios`的 API 很友好，你完全可以很轻松地在项目中直接使用。不过随着项目规模增大，如果每发起一次`HTTP`请求，就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作，都需要写一遍这种重复劳动不仅浪费时间，而且让代码变得冗余不堪，难以维护。为了提高我们的代码质量，我们应该在项目中二次封装一下 axios 再使用...
2022-08-14 15:40:21
11025
1
原创 history路由和hash路由的区别
hash模式的实现原理是通过监听hashChange事件来实现的。history.pushState/replaceState不会触发onPopState事件，页面不会刷新，需要手动调用地址变化之后的处理函数，并在处理函数内部决定跳转逻辑；监听popstate事件是为了响应浏览器的前进后退功能。 history模式开发的SPA项目，需要服务器端做额外的配置，否则会出现刷新白屏（链接分享失效）。原因是页面刷新时，浏览器会向服务器真的发出对这个地址的请求，而这个文件资源又不存在，所以就报404。...
2022-08-12 16:57:30
647
转载 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
934
原创 SSR和CSR的区别
SSR和CSR的区别SSR(Server Side Rendering) ：传统的渲染方式，由服务端把渲染的完整的页面吐给客户端。这样减少了一次客户端到服务端的一次http请求，加快相应速度，一般用于首屏的性能优化。CSR(Client Side Rendering)：是一种目前流行的渲染方式，它依赖的是运行在客户端的JS，用户首次发送请求只能得到小部分的指引性HTML代码。第二次请求将会请求更多包含HTML字符串的JS文件。简而言之，就是数据拼接HTML字符串这件事放在服务端还是客户端造成了两者区别
2022-05-28 21:30:57
2087
原创 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
2610
原创 vue3组件通信方式
vue3七种组件通信方式面试题经常会问到vue3组件间的通信方式，下文列举了七种常见的通信方式。propsemitv-modelrefsprovide/injecteventBusVuex4/pinia(vuex5)1. Props方式父组件以数据绑定的形式声明要传递的数据，子组件通过defineProperty()方法创建props对象，即可拿到父组件传来的数据。父组件的template中：<!-- list是我们要传递的数据 --><child-compo
2022-05-28 20:21:57
11808
4
原创 TS基础及面试题
TS基础及面试题基础知识基础类型: number string boolean array objectenum: 枚举type, interface联合类型 | (联合类型一次只能一种类型；而交叉类型每次都是多个类型的合并类型。)交叉类型 & (联合类型一次只能一种类型；而交叉类型每次都是多个类型的合并类型。)typeoftypeof 操作符可以用来获取一个变量声明或对象的类型。function toArray(x: number): Array<n
2022-05-19 16:12:55
18748
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
502
原创 JS原型链与继承
JS原型链与继承new是什么 / new的原理 / new时候做了些什么 function Course() {}; const course = new Course();创建了一个空对象，作为返回的对象实例将生成空对象的原型对象指向了构造函数的prototype属性将当前实例对象赋给了内部this执行构造函数的初始化代码原型链一句话概括：JS中每一个对象的__proto__属性都指向构造函数的prototype属性，而构造函数本身就是一
2022-05-14 18:28:18
111
转载 webpack打包原理
webpack打包原理webpack打包原理是根据文件间的依赖关系对其进行静态分析，将这些模块按指定规则生成静态资源，当 webpack处理程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，将所有这些模块打包成一个或多个bundle。看图理解webpack打包流程，如下图所示：读取入口文件；基于 AST（抽象语法树） 分析入口文件，并产出依赖列表；AST （Abstract Syntax Tree）抽象语法树 在计算机科学中，或简称语法树（Syntax tree），是源代码
2022-05-03 21:39:37
2237
原创 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
942
原创 用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
1512
原创 用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
706
原创 浏览器事件模型
浏览器事件模型浏览器事件模型中的过程主要分为三个阶段：捕获阶段、目标阶段、冒泡阶段。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
501
原创 浏览器对象模型以及常见API
浏览器对象模型常见API 及用法什么是浏览器对象模型BOM ：Browser Object Model（浏览器对象模型）,浏览器模型提供了独立于内容的、可以与浏览器窗口进行滑动的对象结构，就是浏览器提供的 API其主要对象有：window 对象——BOM 的核心，是 js 访问浏览器的接口，也是 ES 规定的 Global 对象location 对象：提供当前窗口中的加载的文档有关的信息和一些导航功能。既是 window 对象属 性，也是 document 的对象属性navigation 对象
2022-04-30 19:49:26
374
原创 如何使用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
359
原创 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
1732
转载 模块加载：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
902
原创 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
1485
原创 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
1033
原创 防抖和节流的js实现
防抖和节流的js实现防抖：不论连续执行几次，只从最后一次计时，结束后执行要处理的函数。function debounce(fn, delay) { let timer; return function() { let context = this; let args = arguments; clearTimeout(timer); timer = setTimeout(function() { fn
2022-03-14 18:11:23
652
原创 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
1816
原创 浏览器架构
浏览器架构通常意义下，浏览器架构是如下图这样的：用户界面 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。浏览器引擎 用户界面和渲染引擎的桥梁，在用户界面和渲染引擎之间传送指令。浏览器引擎提供了开始加载URL资源 和一些其他高级操作方法，比如：重新加载、前进、后退动作，错误信息、加载进度等。渲染引擎 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
2022-03-05 16:05:55
788
转载 web跨页面通信的几种方式
web跨页面通信的几种方式最近在处理一个weex三端的项目，在weex文档中提到，不同的 Weex 页面使用的是不同的执行环境，即使全局变量也是互相隔离的，官方推荐使用BroadcastChannel 来实现实现跨页面通信。由于移动端safri中BroadcastChannel存在兼容问题，因此决定研究下web跨页面通信的其他方法。参考跨浏览器tab页的通信解决方案尝试跨页面通信的各种姿势1. 使用BroadcastChannel每个页面通过创建一个具有相同频道名称的 BroadcastCh
2022-03-05 10:07:42
1282
2
原创 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
535
原创 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
533
原创 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
268
原创 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
829
原创 prettier常用配置
prettier配置常用的选项{ "bracketSpacing": true, "semi": false, "singleQuote": true, "trailingComma":"none"}
2021-12-20 15:26:55
1468
原创 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
129
原创 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
441
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人