Youzi Blog

Youzi的Blog--开发笔记

JSBridge实现方案

JSBridge 实现方案 本文总结一些 JSBridge（以下简称 JSB）实现方案；JSB 主要是针对 H5 和原生通信的场景。 JSB 为了实现什么目的 通常来说 JSB 应用在 H5 内嵌到原生 webview 的场景，实现 H5 和原生 app 通信；JSB 需要同时实现 H5 调用原生的某些方法，以及原生调用 H5； 原生调用 H5 原生向 H5 页面发送消息，基本原理...

Posted by Youzi on August 31, 2024

react 入门

CSS滚动条的特性 移动端总有这些滚动条的特殊样式，刚好晚上写了一个，现在总结一下。 webkit内核浏览器特有属性 ::-webkit-scrollbar——整个滚动条。 ::-webkit-scrollbar-button——滚动条上的按钮（上下箭头）。 ::-webkit-scrollbar-thumb——滚动条上的滚动滑块。 ::-webkit-scrol...

Posted by Youzi on December 29, 2022

react 入门

react入门笔记 记录学习react的入门笔记。 脚手架 我是从create react app入门的，但是最近发现umi和vue-cli配置比较像； 1 2 3 npm create @umijs/umi-app npm i npm start 工程结构如下： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 │ .editorconfi...

Posted by Youzi on July 10, 2022

前端登录认证相关内容

登录态维护的方式 JWT(json web token) JWT是一种开放的json格式token存储标准，通过签名来校验token的合法性，用JWT保存登录信息，优点在于服务端无需维护登录态，不需要将登录状态保存在第三方存储中，所以JWT是无状态的。但缺点也是由此产生的，token仅在客户端维护，所以无法在服务端清除登录状态。 特点： JWT默认是不加密的，但可以把token...

Posted by Youzi on April 19, 2022

flutter project setup

flutter项目初始化配置 从AS打开项目后，遇到的各种各样的报错，记录一下debug的过程； gradle和JDK版本问题 官网兼容性配置查询：gradle/JDK版本兼容性 在打开项目后，AS会自动拉取依赖，可能会报gradle版本和JDK版本存在不兼容的情况，参考上面的兼容性表格，在路径gradle/wrapper/gradle-wrapper.properties下，修改d...

Posted by Youzi on February 1, 2022

canvas

canvas教程 MDN的Canvas教程，十分实用； 绘制方法 canvas仅支持两种形式的图形绘制：矩形和路径； 绘制矩形 canvas提供了三种方法绘制矩形： fillRect(x, y, width, height)，绘制一个填充的矩形； strokeRect(x, y, width, height)，绘制一个矩形的边框； clearRect(x, y, width,...

Posted by Youzi on January 28, 2022

redux

redux 入门 前置概念： 纯函数：同样的输入一定会得到同样的输出； 不能改变参数； 不能调用系统 I/O 的 api； 不能调用Date.now | Math.random等不纯的方法，因为每次都可能得到不同的结果； 中间件：指对封装好的函数进行二次封装改造的一个高阶函数； 一般是为了添加一...

Posted by Youzi on July 30, 2021

滑动-滚动相关

JS中滑动、滚动相关的API 相关API有：onscroll, scrollTop, scrollHeight, window.scroll, window.scrollBy, window.scrollTo onscroll DOM元素的事件，当元素滚动条滚动时，触发的事件；也可以是window, document.body等对象上绑定；值得注意的是，滚动事件一般是作用在设置了ove...

Posted by Youzi on July 22, 2021

v8垃圾回收机制

V8引擎垃圾回收机制 JS执行引擎自带有垃圾回收，且是分片定期执行的，很少需要开发者手动回收；可能在浏览器端不是特别需要注意变量释放等内容；但在nodejs端，运行内存有限（64位系统在1400MB，32位是700MB），所以需要额外关注垃圾回收。 为什么要设置内存限制：首先是因为JS单线程执行机制，导致垃圾回收和代码运行不能处于同个时间段，否则必然造成冲突；其次因为JS垃圾回收是...

Posted by Youzi on June 18, 2021

Vue实例化执行顺序

Vue实例化执行顺序 响应式系统核心的三大类： observe：遍历 data 中的属性，使用 Object.defineProperty 的 get/set 方法对其进行数据劫持； dep：每个属性拥有自己的消息订阅器 dep，用于存放所有订阅了该属性的观察者对象； watcher：观察者（对象），通过 dep 实现对响应属性的监听，监听到结果后，主动触发自己的...

Posted by Youzi on June 16, 2021

Vue响应式

Vue 响应式原理 Vue 的响应式系统，核心有三点：observe, watcher, dep： observe：遍历data中的属性，使用Object.defineProperty的get/set方法对数据进行劫持； dep：每个属性有自身的消息订阅器dep，用于存放所有订阅了该属性的观察者对象； watcher：观察者，通过dep实现对响应属性的监听，监听到结果后，主...

Posted by Youzi on June 15, 2021

Array Api

数组API Q： 数组构造器 数组原型上的方法哪些是纯函数，哪些不是？ 遍历数组的方法有哪些； A 数组构造器 let arr = new Array(length) 字面量方式let arr = [] Array.fr...

Posted by Youzi Blog on May 26, 2021

在JS中实例化Vue的组件

JS 中实例化 Vue 组件 近期在写封装组件的时候，写了 dialog，搜了一下很多开源组件库的很多这类组件都支持直接使用 JS 调用组件，稍微研究了下这些组件的源码，记录一下相关的方法； 本文涉及 Vue2.x 和 3.0 的两种方式，由于 3.0 去掉了很多 api，在写的时候也遇到了一些问题，同步记录一下； JS 调用 Vue 组件的方式 在 JS 文件中，直接引入x...

Posted by Youzi on April 2, 2021

npm/node配置备份

npm / node 全局变量配置 1 2 3 4 5 6 7 8 9 10 11 # 全局npm包路径 prefix=D:\Programs\node_global # 全局npm 缓存路径 cache=D:\Programs\node_cache # npm包下载的路径，设置为淘宝源 registry=https://registry.npm.taobao.org/ # 特殊包单独设置...

Posted by Youzi on April 1, 2021

nodejs学习笔记

前言 记录 nodejs 学习进程。 基础 nodejs是运行在服务端的基于 ChromeV8 引擎服务端脚本语言，这些基础的概念就不谈了，进入正题； 认识全局变量 __filename：当前运行脚本文件所在位置； __dirname：当前运行脚本的目录； process：进程对象； kill：杀进程的函数方法； exit：退出脚本的...

Posted by Youzi on March 28, 2021

Antdv项目优化

antdv-项目打包上的优化 项目使用到的包版本： 注意，在 antdv 的 2.x 版本已经修复了 icon 相关的引入问题； 1 2 3 4 { "ant-design-vue": "^1.7.4", "vue": "^2.6.11" } moment.js 优化 主要参考https://github.com/jmblog/how-to-optimize-mome...

Posted by Youzi Blog on March 26, 2021

Vue项目性能优化（转）

Vue 项目性能优化（转） 原文地址：掘金 - Vue 项目性能优化 — 实践指南（网上最全 / 详细） 前言 优化层面分为以下三个大模块 Vue 代码层面优化； webpack 配置层面优化； 基础的 web 技术层面优化。 代码层面优化 1.1、v-if 和 v-show 区分使用场景 v-if 是 真正 的条件渲染，因为它会确保在切换过程中条件块内的事件监...

Posted by Youzi on March 17, 2021

前端缓存相关知识点

前端缓存 缓存大致分为两大块，一块是强缓存，另一块是协商缓存，是由 HTTP 请求的响应头部的几个字段来确定相关的缓存策略； 缓存机制 由于缓存是由响应头决定的，所以在第一次请求时，浏览器会保存相关字段供后续使用；后续请求该资源的流程图如下： 由流程图可知，缓存分为上述的两类，一类可以不请求服务器直接从本地缓存中获得（称为强缓存），另一类需要请求服务器（称为协商缓存），由服务器判...

Posted by Youzi on March 8, 2021

URL输入到页面渲染

在浏览器中从 URL 输入到页面展现到底发生什么？ 记录该问题的详细解答； 浏览器进程 现代浏览器是多进程的，其子进程分类如下： 主进程：一个，控制页面创建、销毁、网络资源管理、下载等； 插件进程：每种类型的插件对应一个进程，仅当使用时才创建； GPU 进程：最多一个，用于 3D 绘制等； 浏览器渲染进程（浏览器内核）：每个 Tab 对应一个进程，互不影响； 1...

Posted by Youzi on March 8, 2021

移动端路由切换动画

前言 移动端路由切换，组件切换等动画效果，是很常见的需求，在此记录切换动画的代码； 实现思路 在Vue项目中，使用transition内置组件，可以实现很多动画效果，详见：https://v3.cn.vuejs.org/guide/transitions-enterleave.html#%E8%BF%87%E6%B8%A1class； 与vue-router结合时，文档详见：http...

Posted by Youzi on March 2, 2021

FEATURED TAGS
JavaScript webpack 项目配置 面试 npm JS CSS Vue 前端 react
ABOUT ME

写代码的臭弟弟

FRIENDS