- 博客(137)
- 收藏
- 关注
RSS订阅原创 Three.js阴影
使用灯光后，场景中就会产生阴影。物体的背面确实在黑暗中，这称为核心阴影。我们缺少的是落下的阴影，即对象在其他对象上创建阴影。本文主要探索是落下的阴影的相关内容。
2023-08-08 12:46:56
2026
原创 Three.js光源
目录本文我们将研究three.js中的灯光类型和JavaScript中的光源，探索不同的光源设置。我们的目标是全面理解光源设置和类型，比如环境光、半球光、矩形光、方向光、点光源和聚光灯。我们将逐个介绍它们的属性参数和使用方法。
2023-08-07 13:57:02
416
原创 Three.js入门
Three.js 是一个开源的应用级 3D JavaScript 库，可以让开发者在网页上创建 3D 体验。Three.js 屏蔽了 WebGL的底层调用细节，让开发者能更快速的进行3D场景效果的开发。
2023-08-06 13:29:36
205
原创 Swift类型属性底层研究
类型属性本质上是全局变量;类型属性是懒加载的，通过`dispatch_once_f`进行, 确保只会初始化一次，并且是线程安全的;编译器对类型属性和全局变量添加了内存安全的控制，避免了访问的读写冲突，使代码更加安全......
2022-08-29 14:53:29
1006
1
原创 Swift方法mutating关键字的本质
mutating关键字本质是包装了inout关键字，加上mutating关键字后参数值会变成地址传递。类对象是指针，传递的本身就是地址值，所以 mutating关键字对类是透明的，加不加效果都一样。
2022-08-26 12:42:15
914
原创 Swift属性底层探究
开发者没有写`set`和或者`get`的属性就是存储属性，会占用实例对象的内存；编译器默认会为存储属性添加`set`和或者`get`方法，这些方法会被内联和隐藏调试信息，比较难以发现它们的存在；开发者没有写`set`和或者`get`的属性是计算属性，不会会占用实例对象的内存；本质就是几个方法的组合体；添加了属性监听器的存储属性，编译器会在`set`方法中先调用`willSet`方法，然后调用赋值方法，最后再调用`didSet`方法, 监听的本质就是`set`方法中进行了其他方法的调用......
2022-08-25 18:59:55
781
原创 Swift Enum底层探究
枚举变量只占一个字节，如果超过255种情况不应该使用枚举枚举的内存中存储的值依次是0，1，… n-1整数(n为枚举成员的数量)如果枚举变量为nil, 则内存中存储的值是n(n为枚举成员的数量)如果枚举的原始值，则编译器会自动生成计算属性rawValue和初始化方法init?枚举的关联值放在内存的前面，和枚举类型值放在一起存储（关联值的存储长度由最长的那个枚举成员决定）枚举的方法调用会将枚举变量作为参数传入，实现枚举和方法的关联。
2022-08-24 14:18:44
311
原创 ARM64汇编入门
现在iOS设备几乎已经都是ARM64架构，此外，Mac M1芯片的电脑也是基于ARM64架构，本文首先对ARM64汇编做一个简单的介绍，然后通过一个Swift枚举的汇编代码窥探枚举的底层实现逻辑，发现了一个超出意料之外的结果。
2022-08-23 16:06:06
4142
原创 TS进阶之infer
前一篇文章我们有介绍条件类型，这篇文章我们来介绍下非常实用的infer的使用方法案例推断数组(或者元组)最后一个元素的类型使用方法案例推断函数类型的参数使用方法案例推断函数类型的返回值使用方法案例推断Promis......
2022-06-18 22:05:52
403
原创 TS进阶之条件类型
前端开发者对Javascript中的三元表达式应该都很熟悉，利用三元表达式可以很方便实现根据输入值得到不同的输出结果。 TypeScript对类型也提供了类似的语法，和Javascript唯一的区别就是TypeScript操作的是数据类型。几个简单的例子判断类型是否是类型如果是类型得到类型，否则为类型TS进阶之keyof中的例子实现给对象类型添加属性条件类型可复合使用例子如下：获取类型的名称条件类型的分发特性如果对条件类型的分发特性不太熟悉的同学可能会对,等
2022-06-12 13:50:20
1835
5
原创 TS进阶之keyof
刷完了type-challenges的所有简单和中等难度的题目后，对TypeScript的类型操作有了一些新的理解和认识。特此用几篇文章来记录下一些重要的知识点。JavaScript通过获取对象的所有属性键值，而typescript主要关注的是类型操作，通过 操作符可以获取对象中的所有键类型组成的联合类型。为了具体了解操作符的作用，我们通过一些例子来解释下：.........
2022-06-10 08:39:40
15744
4
原创 Vue Router 4 的使用，一篇文章给你讲透彻
Vue 3.X 使用Vue Router 4.x 进行路由配置，本文我们就来研究下如何使用Vue Router 4.x，本文中所有的使用方式都是使用 Composition API的方式。本文通过一步步介绍Vue Router 4.x的使用，来搭建一个简单的博客系统，让你对新版的Vue Router 4.x有一个完整的认识，然后能够非常轻松滴将Vue Router 4.x应用在自己的项目中。项目初始化项目搭建项目使用vite进行创建。npm init vite@latest vue-router-
2022-02-06 19:12:17
11605
5
原创 手写 Vuex 4.x
Vuex是官方提供的状态管理库，为了深入了解它的实现逻辑，本文我们一起来一步步实现它。初始化用法// 1. 引入createStore函数import { createStore } from "vuex";// 2. 通过创建一个新的 store 实例const store = createStore({});// 3. 将 store 实例作为插件安装createApp(App).use(store).mount('#app')模拟实现// 创建一个生成Store的ex
2022-02-01 23:52:16
1012
原创 探究Vue3的keep-alive和动态组件的实现逻辑
keep-alive组件是Vue提供的组件，它可以缓存组件实例，在某些情况下避免了组件的挂载和卸载，在某些场景下非常实用。例如最近我们遇到了一种场景，某个组件上传较大的文件是个耗时的操作，如果上传的时候切换到其他页面内容，组件会被卸载，对应的下载也会被取消。此时可以用keep-alive组件包裹这个组件，在切换到其他页面时该组件仍然可以继续上传文件，切换回来也可以看到上传进度。keep-alive渲染子节点const KeepAliveImpl: ComponentOptions = { nam
2022-01-30 17:20:29
1776
原创 Vue3.0的插槽是如何实现的？
Vue提供了pro可以进行参数的传递，但是有时需要给子组件的模板进行定制化，此时传递参数有时候就不太方便了。 Vue借鉴了Web Components实现了插槽slot。插槽slot通过在父组件中编写DOM，在子组件渲染的时候将这些DOM放置在对应的位置，从而实现内容的分发。使用方法介绍基本使用<Son> <p>父组件传入的内容</p></Son>我们想将一些内容渲染在Son子组件中，我们在组件中间写了一些内容，例如<p>父组件传
2022-01-29 20:26:26
1891
原创 Vue3的双向绑定是如何实现的
Vue的双向绑定是指数据变化能引起界面的变化，界面数据的变化也能驱动数据的改变。这个功能其实和单向数据流规范不一样，所以开始接触Vue的时候非常吸引我的一个功能。我们发现Element UI的表单也有大量使用v-model进行双向绑定。双向绑定 其实 不是所有的元素/组件都支持的，目前Vue支持 input，select, checkbox, radio 和组件 利用 v-model 指令进行 双向绑定。我以前对 双向绑定 这个功能有很大的一个疑惑：就是双向绑定为什么不会造成更新死循环？即 界面变化
2022-01-28 20:45:03
2610
原创 Vue3的事件绑定的实现逻辑是什么
Vue的事件绑定主要是通过v-on指令来实现的，这个指令既可以实现原生事件绑定，例如onclick等。也可以实现组件的自定义事件，从而实现组件的数据通信。本文我们就来分析下Vue的事件处理的逻辑。v-on作用于普通元素用在普通元素上时，只能监听原生 DOM 事件，最多的就是onclick事件了。我们就以onclick事件来分析原理。案例let click = () => { console.log("点击我，很快乐")};<!-- template --><di
2022-01-26 12:44:57
1522
原创 Vue常用的内置指令的底层细节分析
上一篇文章我们知道了指令的实现原理，接下来我们来研究下Vue提供的一些默认指令的实现原理。v-text使用案例<div v-text="'value'"实现逻辑先来看下render函数const _hoisted_1 = ["textContent"]function render(_ctx, _cache) { with (_ctx) { const { toDisplayString: _toDisplayString, openBlock: _openBlock
2022-01-25 20:00:25
608
原创 Vue 3.0 Provide和Inject实现共享数据
Provide和Inject可以在祖(父)组件和子(孙)组件间实现传值。相比prop只能父子之间传值而言，Provide和Inject传值更方便，相比vuex又更轻量。接下来我们就从使用和实现原理两方面来介绍Provide和Inject。Provide和Inject的使用概括: 祖(父)组件中使用一个provide函数来提供数据，而子(孙)组件使用inject函数来获取数据。provide API 的使用我们这里就用官方的例子， 阅读过官方例子的童鞋可以跳过本节。使用前需要先从vue中引用
2022-01-25 09:37:34
880
原创 Vue 3.0 Provide和Inject实现共享数据
Provide和Inject可以在祖(父)组件和子(孙)组件间实现传值。相比prop只能父子之间传值而言，Provide和Inject传值更方便，相比vuex又更轻量。接下来我们就从使用和实现原理两方面来介绍Provide和Inject。Provide和Inject的使用概括: 祖(父)组件中使用一个provide函数来提供数据，而子(孙)组件使用inject函数来获取数据。provide API 的使用我们这里就用官方的例子， 阅读过官方例子的童鞋可以跳过本节。使用前需要先从vue中引用
2022-01-25 09:36:33
593
原创 你知道Vue3指令是如何实现的吗？
Vue 指令 是指 对普通DOM元素进行底层操作的JS对象， 它们会被挂在Element VNode对象上，在Element VNode的一些生命周期中会被调用，从而可以操作Element VNode的底层DOM元素。指令注册指令注册 是指将指令对应的JS代码放置在某些地方，需要使用的时候可以在这些地方进行查找。全局注册全局注册是调用app.directive('指令名称', { 指令代码 }) 来实现的app.directive('pin', (el, binding) => {
2022-01-24 11:46:47
670
原创 手写Promise
Promise是JS进行异步操作的重要API，也是开发基本上绕不开的技术，所以很有必要对其进行深入的了解。本文我们就 一步步手动实现Promise的相关功能。Promise属性和构造函数原生功能Promise对象的属性验证原生Promiselet p = new Promise((resolve, reject) => {});console.log(p);结果：[[Prototype]]: Promise[[PromiseState]]: "pending"[[Prom
2022-01-21 18:54:11
965
原创 Vue3侦听器和异步任务调度, 其中有个神秘角色
侦听器的实现逻辑我们先来看看一个最简单的使用方式(watch的使用方式非常灵活，我们通过简单的使用方式来了解流程)：let disabled = ref(false);let unwatch = watch(disabled, (value, oldValue, oninvalidate) => { console.log(oldValue); console.log(value); nextTick(() => { console.log("hoho");
2022-01-19 13:23:50
1057
原创 Vue 3.0 Teleport的使用和原理分析
Vue3.0 新增了一个Teleport组件，开发者可以使用它将其所在组件模板的部分内容移动到特定的DOM位置，譬如body或者其他任意位置。Vue 2.0要实现对应的功能则需要使用portal-vue三方库，或者使用$el操作DOM等来实现。接下来我们就从使用方式和实现原理两个方面来分别介绍。Teleport组件的使用Teleport组件的使用很简单，把需要移动的内容包起来即可:<teleport :to="#id" :disabled="false"> <div>
2022-01-16 22:11:00
1167
原创 Vue3.0 常用响应式API的使用和原理分析(二)
reactive对传入的类型是有限制的，必须是对象或者数组。对一些基础类型，例如string, number，boolean等不支持，如果要使用reactiveAPI必须将这些基础类型封装成对象，这样显然是不太科学的。因此Vue 3.0提供了refAPI。Ref是一个接口, 它最主要的是有一个value属性可以获取值和赋值。export interface Ref<T = any> { value: T _shallow?: boolean}ref使用场景将数据变为响应式
2021-09-06 20:12:41
3868
2
原创 Vue3.0 常用响应式API的使用和原理分析(一)
前面关于响应式的两篇文章，分别介绍了响应式实现原理和计算属性，本篇文章我们来看看其他响应式API的使用和实现原理。reactive说明：将对象或者数组变为响应式对象主要API之一。使用方式说明：使用reactive将p原始对象转为响应式对象person；使用changeName可以修改响应式对象person的name的值；使用changeChildName可以修改响应式对象person的child的name的值；实现原理请参阅本系列的Vue3.0 响应式实现原理分析的这篇文章
2021-09-04 16:32:18
654
原创 Vue 3.0 计算属性的实现原理分析
我们在上一章节介绍了响应式的原理，本文我们来探讨一下Vue 3.0的计算属性的实现原理。如果没有阅读过上一篇文章，建议请先阅读上一篇文章再来看本文，否则可能会有些迷糊。使用方法我们先来看看计算属性的用法：代码说明：使用computedAPI 定义了一个计算属性computedCounter,它有一个get方法返回的值是counter这个响应式数据的平方，有一个set方法，可以对counter设置值；实现的效果：counter的值变化，computedCounter的值也随之变化。实现逻辑
2021-09-02 20:06:11
514
原创 Vue3.0 响应式实现原理分析
我们知道Vue 2.0是利用Ojbect.defineProperty对对象的已有属性值的读取和修改进行劫持，但是这个API不能监听对象属性的监听和删除，此外为了深度劫持对象的内部属性，必须在初始化的时候对内部属性进行递归调用Ojbect.defineProperty，这就造成了一个性能上的消耗。为了解决这些问题，Vue 3.0利用Proxy重写了响应式逻辑并且优化了相关性能。使用案例我们先来个示例看下Vue 3.0的相应式API的写法：changePerson能改变响应式数据person的值，pe
2021-08-29 14:52:43
1327
2
原创 Vue 3.0 Props的初始化和更新流程的细节分析
Vue.js可以让组件的使用者在组件外部传递props参数，组件拿到这些props的值来实现各种各样的功能。本文我们就来探讨下组件props的初始化和更新流程。在前一篇文章中，我们知道setup函数的第一个参数是props，本文我们就来了解下props是如何初始化和更新的。在开始之前我们先弄清两个概念：Props配置：就是编写组件时写的props属性，描述一个组件的Props的数据类型和默认值等信息。例如组件定义时:props: ['msg']Props数据：是在使用组件时给组件传递的数据。例如组
2021-08-27 20:22:09
2560
原创 揭开Vue3.0 setup函数的神秘面纱
在Vue 3.0的使用中我们可以不使用data、props、methods、computed等Option函数，可以只下在setup函数中进行编写代码逻辑。当然为了和Vue 2.0兼容，也可以继续使用Option函数。先提出两个个问题：setup函数的执行时机是什么？setup函数的返回结果为何与模板的渲染建立联系的？mountComponent 挂载组件const mountComponent: MountComponentFn = ( initialVNode, container
2021-08-26 08:23:42
1127
原创 Vue 3.0组件的更新流程和diff算法详解
上篇文章我们介绍了组件的渲染流程，本篇文章我们来介绍响应式数据变化后组件的更新渲染流程。最后有不看文章的分析总结图。案例为了方便介绍流程，我们这里举一个例子：App组件中有一个Hello组件，并且赋值msg这个prop值给Hello组件；当msg为Vue 3时，App组件中有li标签数组显示vue3.feature,即显示Vue 3的新特性，当msg为Vue 2时则不显示；App组件中有一个按钮切换msg的值。App.vue<template> <HelloWorld
2021-08-13 00:39:37
525
原创 Vue 3.0组件的渲染流程
Vue简单易上手，只需要简单的文档说明就能上手开发。虽然本人也有一直使用Vue 2.0的项目开发经验，以前也只了解一点核心代码逻辑，没有全面阅读过Vue 2.0的源码。Vue 3.0发布后我也有了一些Vue 3.0项目使用经验，顺藤摸瓜来学习下Vue 3.0源码，向高手学习下编码技巧，以便在项目中更加游刃有余。由于Vue 3.0使用了TypeScript进行了重构，所以阅读本系列前需要对TypeScript基础语法有所了解，此外需要了解递归调用和函数柯里化等。Vue 3.0系列文章预估会有30个左右的文
2021-08-08 17:04:22
2107
原创 Vue3和Electron实现桌面端应用
为了方便记录一些个人随笔，我最近用Laravel和Vue 3.0撸了一个博客系统，其中使用到了一个基于 markdown-it 的 markdown 编辑器Vue组件v-md-editor。我感觉用它去编写markdown还是很方便的。后面就有了一个想法，基于此组件用Electron来实现一个markdown桌面端应用，自己平时拿来使用也是个不错的选择。题外话：VS Code就是用Electron开发出来的桌面应用，我现在除了移动端的开发外，其他的都是使用VS Code来开发了，各种插件开发起来真的很方
2021-07-24 21:23:44
1830
12
原创 Flutter异步编程详解
不知道大家有没有一个疑问：Dart是单线程执行，那它是如何实现异步操作的呢？本文将对Dart/Flutter提供的Isolate,Event Loop,Future,async/await等进行异步操作相关的知识点进行分析。Isolate什么是Isolate？An isolate is what all Dart code runs in. It’s like a little space on the machine with its own, private chunk of memory a
2021-05-28 11:12:30
1052
3
原创 Flutter混合开发—Android篇
上篇文章我们介绍了如何将Flutter模块混入iOS项目中，本篇文章我们来介绍下Android项目混入Flutter模块的方法。建议先阅读一下Flutter混合开发—iOS篇，本文中提到的一些与iOS篇中相同的内容就不会再介绍了。现在就进入Flutter和Android进行混合开发的实现过程。搭建Android项目首先我们搭建一个首页为Bottom Navigation Activity的安卓项目，然后修改代码将三个Fragment重命名为HomeFragment，ChannelFragment和M
2021-05-25 13:29:34
521
6
原创 Flutter混合开发—iOS篇
很多情况下用Flutter来编写整个项目是不太现实的。例如公司已经有了成熟的App产品了，去用Flutter去重写整个项目会有很大的工作量和功能上的风险；有时候公司出于谨慎的原因，不可能去冒失的取采用新的技术，可能更愿意去用一些次要的功能部分去试水，如果效果不错才会继续大面积使用。我们可以将Flutter打包成模块(module)整合进入原生的iOS和Android项目中实现上述需求。最开始Flutter只支持单个页面，最近已经开始支持多个Flutter页面，但是正如官方所说的其还是不太稳定，有各种莫名其
2021-05-14 23:58:23
1628
11
原创 Flutter插件开发---Android篇
上一篇文章我们一起来实现了iOS平台的插件开发，本节我们来看看Android平台的插件是如何实现的。本文只会涉及到Android端的代码了，因为Flutter端代码是通用的，不需要修改了。网络设置相关的修改Google从Android P开始要求使用加密连接，如果应用使用的是非加密的明文流量的http网络请求，则会导致该应用无法进行网络请求。本项目中的图片等有使用到http网络请求，需要适配下：在res新建一个xml目录；在xml目录中新建一个network_permission_config
2021-05-11 10:01:35
366
3
原创 Flutter插件开发---iOS篇
Flutter的愿景是一般的开发者只需要开发Flutter代码就能实现跨平台的应用，官方提供了一些插件，也有很多可以可以直接拿来使用的第三方插件。但是现实是现实，例如当遇到定制化的功能时，编写插件是不可避免的。譬如我们有一个自定义协议的蓝牙功能，这个功能在Flutter中就不可能直接拿来使用了，需要编写插件让Flutter进行调用。本文我们将来看看Flutter插件是如何实现的。前言本文我们用Flutter来仿写网易云音乐的播放页面的功能，其中音乐的播放，音乐的暂停，快进，音乐的时长获取，音乐播放的进
2021-05-10 15:17:40
996
原创 Flutter国际化
如果App的用户使用的是不同语言，那进行国际化是必要的。国际化主要包括***文案的国际化***(不同的语言展示不同的文案)和***布局的国际化***(从左到右还是从右到左布局)。不同语言涉及的业务逻辑的差别(eg. 法语跳转到法语对应网站，韩语跳到韩语对应的网页)一般不被归为国际化的内容，属于业务逻辑的范畴。我们公司的产品用户涵盖了欧美、日韩和以色列等国家，每个版本发版前的一个块大的任务就是针对不同的语言进行布局和文案的适配，所以国际化还是很重要的一块内容。案例为了说明如何实现国际化，我们先建一个工程
2021-04-21 22:28:53
768
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人