- 博客(39)
- 收藏
- 关注
RSS订阅
原创 TweenMax介绍
GreenSock 是一家做 专业级 JavaScript 动画的公司，主要产品就是其下的 GSAP (GreenSock Animation Platform)，配合着 GSPA 开发了很多专业的动画插件。GSAP 是一个强大的 JavaScript 工具集，可以让开发人员开发出高级动画。构建适用于所有主流浏览器的高性能动画。动画化 CSS、SVG、画布、React、Vue、WebGL、颜色、字符串、运动路径、通用对象……任何 JavaScript 可以触及的东西！
2023-05-10 16:41:42
1009
1
转载 资源网站收集
借助 ChatGPT，翻译 i18n 的 JSON 文件，经度还是挺高的，可以使用。谷歌一项研究的演示，可以根据乐曲生成对应的弹奏指法，在网页上再现出来，非常厉害。2、i18n AI 助手。
2023-04-23 15:28:05
119
原创 gitlab-ci尝试 - 自动化部署
gitlab - ci尝试1、Specific Runner自定义ci配置方式1）、需要注意设备参考链接 https://docs.gitlab.com/runner/executors/#selecting-the-executormac、linux系统一般使用 shell，简单2）、安装配置 gitlab-runnerlinux系统，一般使用 二进制文件参考链接 https://docs.gitlab.com/runner/install/linux-manually.html#help-
2022-03-15 14:25:58
1825
原创 网络通讯 TCP协议
网络通讯常见的通讯方式交换机通讯 （局域网）路由器通讯 （链接多个局域网）网络层次模型（OSI）七层模型应用层：用户与网络的接口，协议有：HTTP、FTP、SSH；表示层：数据加密、转换、压缩；会话层：控制网络链接建立与终止；传输层：控制数据传输的可靠性，有：TCP与UDP协议；网络层：确定目标网络，有：IP协议，查找IP地址；数据链路层：确定目标主机，查找MAC地址，ARP寻址协议；物理层：各种物理设备和标准；传输时，自上而下一层一层的封装，之后在一层一层的解封；
2021-11-02 10:20:30
396
原创 Nodejs 解读
Nodejs 解读概念Node.js® 是一个基于 Chrome V8 引擎 的 JavaScript 运行时环境。Nodejs可以做什么轻量级、高性能的 Web 服务前后端 JavaScript 的同构开发便捷高效的前端工程化Nodejs架构Natives modules...
2021-10-19 19:01:02
440
原创 前端 简单数据结构与算法
前端 简单数据结构与算法链表链表是一种有序的数据结构，可以中首、中、尾进行数据存取。相比于数组，数组在内存中占用一段连续的空间，添加、移除会导致后续元素位移，性能开销大。链表特点lianb...
2021-09-06 23:05:25
71
原创 script 标签 async 属性
script 标签 async 属性普通script文档解析的过程中，如果遇到script脚本，就会停止页面的解析进行下载（但是Chrome会做一个优化，如果遇到script脚本，会快速的查看后边有没有需要下载其他资源的，如果有的话，会先下载那些资源，然后再进行下载script所对应的资源，这样能够节省一部分下载的时间 @Update: 2018-08-17）。资源的下载是在解析过程中进行的，虽说script1脚本会很快的加载完毕，但是他前边的script2并没有加载&执行，所以他只能处于一个
2021-08-13 14:18:33
4660
原创 React 之 服务端渲染 SSR
React 之 服务端渲染 SSRNext.js 介绍Next is 是 React 服务端渲染应用框架。用于构建 SEO 友好的 SPA 应用。支持两种预渲染方式，静态生成和服务器端渲染。基于页面的路由系统，路由零配置自动代码拆分。优化页面加载速度支持静态导出，可将应用导出为静态网站内置 CSS-in-JS 库 styled-jsx方案成熟，可用于生产环境，世界许多公司都在使用应用部署简单，拥有专属部署环境 Vercel，也可以部署在其他环境...
2021-07-07 17:58:10
408
原创 React 之 专题（React Hooks、Fomik、CSS-IN-JS、Chakra-UI ）
React 之 专题（React Hooks）1、React Hooks 介绍1.1 React Hooks 是用来做什么的对函数型组件进行增强, 让函数型组件可以存储状态, 可以拥有处理副作用的能力.让开发者在不使用类组件的情况下, 实现相同的功能.1.2 类组件的不足 (Hooks 要解决的问题)缺少逻辑复用机制为了复用逻辑增加无实际渲染效果的组件，增加了组件层级 代码显示十分臃肿增加了调试的难度以及运行效率的降低类组件经常会变得很复杂难以维护将一组相干的业务逻辑拆分到
2021-04-27 10:12:18
432
1
原创 React 之 MobX 5-6
React 之 MobX 5-61.1、MobX简单，可扩展的状态管理库MobX 是由 Mendi, Coinbase, Facebook 开源和众多个人赞助商所赞助的React 和 MobX 是一对强力组合，React 负责渲染应用的状态，MobX 负责管理应用状态供 React 使用1.2、MobX 浏览器支持MobX5 版本运行在任何支持 ES6 proxy 的浏览器，不支持 E11，Node.js6MobX4 可以运行在任何支持 ES5 的浏览器上MobX4 和 5 的 API 是
2021-04-21 18:24:58
615
原创 React 之 Redux
React 之 ReduxReduxJavaScript 状态容器，提供可预测的状态管理核心流程Store: 存储状态的容器，JavaScript对象View: 视图，HTML⻚面Actions: 对象，描述对状态进行怎样的操作Reducers:函数，操作状态并返回新的状态常用api// 创建 Store 状容器const store = Redux.createStore (reducer);// 创建用于处理状态的 reducer 函数function reducer (s
2021-04-20 15:36:53
61
原创 React 之 React Fiber模拟实现
React 之 React Fiber模拟实现1. 开发环境配置1.1 文件夹结构文件 / 文件夹描述src存储源文件dist存储客户端代码打包文件build存储服务端代码打包文件server.js存储服务器端代码webpack.config.server.js服务端 webpack 配置文件webpack.config.client.js客户端 webpack 配置文件babel.config.jsonbabel 配置文件p
2021-04-10 16:32:29
100
原创 React 之 基础使用
React 之 基础使用1. React 介绍React 是一个用于构建用户界面的 JavaScript 库，它只负责应用的视图层，帮助开发人员构建快速且交互式的 web 应用程序。React 使用组件的方式构建用户界面。2. JSX 语法在 React 中使用 JSX 语法描述用户界面，它是一种 JavaScript 语法扩展。在 React 代码执行之前，Babel 会将 JSX 语法转换为标准的 JavaScript API。JSX 语法就是一种语法糖，让开发人员使用更加舒服的代码构建
2021-03-18 17:32:05
150
原创 Vue进阶之 typescript实战项目
Vue进阶之 typescript实战项目1、创建项目，可以直接使用 Vue-cli 创建并选择typescript选项2、开始项目TS中vue组件的定义文档参考 https://cn.vuejs.org/v2/guide/typescript.html1、OptionsAPI定义Vue组件（建议使用此方法）...<script lang="ts">import Vue from 'vue'export default Vue.extend({ data () {
2021-03-14 22:45:29
410
1
原创 Vue进阶之 Vue3.X
Vue进阶之 Vue3.X3.0介绍源码组织方式的变化源码采用 TypeScript 重写，做类型检查；使用 Monorepo 管理项目结构，将每个独立的模块都提起到每个包儿中，在packages；Monorepo 模式，使用同一个项目管理多个的包儿，将不同功能的代码，放入packages中管理，这样可以使得每个功能模块划分明确，依赖也很明确，并且每个功能模块儿都可以单独测试、发布和使用。Composition API （组合式 API）可参考官方文档https://github.com
2021-02-28 22:45:24
2433
原创 Vue进阶之 组件库开发
Vue进阶之 组件库开发重新识$attrs / $listeners$attrs把父组件中非 prop 属性绑定到内部组件 利用 v-bind="$attrs"$listeners把父组件中的 DOM 对象的原生事件绑定到内部组件 利用 v-on="$listeners"父组件...<template> <div> <myinput required placeholder="Enter your username" class="t
2021-02-25 17:02:49
397
原创 Vue - Gridsome使用
Vue - Gridsome使用是什么一个免费、开源、基于Vue.js技术栈的静态网站生成器GitHub 仓库：https://github.com/gridsome/gridsome官网：https://gridsome.org/什么是静态网站生成器静态网站生成器是使用一系列配置、模板以及数据，生成静态 HTML 文件及相关资源的工具这个功能也叫预渲染生成的网站不需要类似 PHP 这样的服务器只需要放到支持静态资源的 Web Server 或 CDN 上即可运行静态网站的好处
2021-02-25 15:24:16
755
原创 Vue进阶之 服务端渲染（ssr）
Vue进阶之 服务端渲染（ssr）Vue.js 服务器端渲染项目构建目录src├── components│ ├── Foo.vue│ ├── Bar.vue│ └── Baz.vue├── App.vue├── app.js # 通用 entry(universal entry)├── entry-client.js # 仅运行于浏览器└── entry-server.js # 仅运行于服务器构建配置需要安装的项目依赖 生产依赖npm i vue vue-ser
2021-02-20 15:38:12
404
原创 Vue进阶之 Nuxt.js 基础
Vue进阶之 Nuxt.js 基础Nuxt.js 介绍官网: https://www.nuxtjs.cn/guideGitHub 仓库: https://github.com/nuxt/nuxt.js案例学习，推荐realworld https://github.com/gothinkster/realworld可以使用你要学习的技术，来实现这个案例，前后端都可以。...
2021-02-10 19:07:17
355
原创 Vue进阶之源码阅读（二）虚拟DOM与模板编译
Vue进阶之源码阅读（二）虚拟DOM为什么要使用虚拟 DOM使用虚拟 DOM，可以避免用户直接操作 DOM，开发过程关注在业务代码的实现，不需要关注如 何操作 DOM，从而提高开发效率作为一个中间层可以跨平台，除了 Web 平台外，还支持 SSR、Weex。关于性能方面，在首次渲染的时候肯定不如直接操作 DOM，因为要维护一层额外的虚拟 DOM， 如果后续有频繁操作 DOM 的操作，这个时候可能会有性能的提升，虚拟 DOM 在更新真实 DOM 之前会通过 Diff 算法对比新旧两个虚拟 DOM 树
2021-01-27 10:40:51
363
原创 Vue进阶之源码阅读
Vue进阶之源码阅读阅读方式先宏观了解，看大致目录和结构；带着目标看源码，明确核心功能，要意识到我是谁、我在哪儿、我要做什么；看源码的过程要不求甚解，跳过分支功能；调试其运行过程；...
2021-01-13 23:41:34
171
原创 Vue进阶之Virtual DOM(虚拟DOM) 实现原理
Vue进阶之Virtual DOM(虚拟DOM) 实现原理Virtual DOM(虚拟 DOM)，是由普通的 JS 对象来描述 DOM 对象，因为不是真实的 DOM 对象，所以叫 Virtual DOM。背景手动操作 DOM 比较麻烦，还需要考虑浏览器兼容性问题，虽然有jQuery 等库简化 DOM 操作，但是随着项目的复杂 DOM 操作复杂提升；为了简化 DOM 的复杂操作于是出现了各种 MVVM 框架，MVVM 框架解决了视图和状态的同步问题 ；为了简化视图的操作我们可以使用模板引擎，但是模
2020-12-11 18:27:28
680
原创 Vue进阶之响应式原理
Vue进阶之响应式原理数据驱动数据响应式、双向绑定、数据驱动数据响应式数据模型仅仅是普通的 JavaScript 对象，而当我们修改数据时，视图会进行更新，避免了繁琐的 DOM 操作，提高开发效率双向绑定数据改变，视图改变；视图改变，数据也随之改变我们可以使用 v-model 在表单元素上创建双向数据绑定数据驱动是 Vue 最独特的特性之一开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图响应式原理的简单演示Vue2.x 利用Object.defineP
2020-12-09 18:15:46
113
原创 Vue进阶之Vue-Router
Vue进阶之Vue-RouterVue-Router的使用1、动态路由： { path: '/home/:id', //配置id参数便可实现动态路由 name: 'home', // 开启 props，会把 URL 中的参数传递给组件 // 在组件中通过 props 来接收 URL 参数 props: true, component: () => import('../views/Home.vue') }组件接受id参数<temp
2020-12-06 17:24:23
463
原创 前端规范化标准（笔记）
前端规范化标准（笔记）背景规范化标准的主要目的：软件开发需要多人协同开发；不同开发者具有不同的编码习惯，不同的编码风格会增加项目的维护成本；每个项目或者团队都要有明确统一的标准；具体的规范化标准：开发过程中人为编写的产物都需要标准化，像代码、文档、甚至是提交日志；代码的标准化规范最为重要；常见的规范化实现，ESLintESLint统一编码风格，减少错误出现基本使用// 下载安装npm install eslint -D...// 校验文件npx eslint +文件
2020-12-01 19:46:08
353
原创 http请求中“Content-Type”参数的问题
前端问题集合1、http请求中“Content-Type”参数的问题；通过axios发送http请求时，请求头的Content-Type: 设为application/x-www-form-urlencoded时，表示请求的参数为url的编码格式，在post请求时，需要已键值对的形式传入 如，key1=val1&key2=val2，这样服务端方能解析到参数，根据axios官网，推荐使用const qs = require('qs');axios.post('/foo', qs.string
2020-12-01 12:07:16
420
1
原创 前端模块化开发-Rollup（笔记）
前端模块化开发-Rollup（笔记）RollupRollup与Webpack类似，都是前端打包工具，但是其更小巧，仅仅是一款ESModules打包器，没有WP那么功能强大。Rollup打包结果非常简洁，就是把我们的各个模块儿的代码，按导入顺序放入一个js中，并且自动Tree Shaking去除冗余代码。rollup.config.js// rollup.config.js// 使用ESM规范导入import json from 'rollup-plugin-json' // json模块im
2020-12-01 11:00:38
229
原创 前端模块化开发-ESModules（笔记）
前端模块化开发（笔记）背景目前最重要的前端开发范式之一；早期设计的时候没想到前端开发会如今的规模，所要处理的业务也越来越复杂，传统的开发模式已经不满足越来越多和复杂的前端页面；从而出现了，模块化的思想；模块化的演变1、文件划分：最早是通过页面的script标签区分，一个标签就是一个模块，通过全局变量来通信；这种模式的弊端污染全局作用域，变量可以在外部访问和修改；命名容易冲突；无法管理模块间的依赖关系；全靠相互约定来实现，项目规模变大后，容易出问题；2、命名空间方式：每个模块暴露一个全
2020-11-25 15:25:32
1335
2
原创 笔记之JavaScript的性能优化
JavaScript的性能优化内存管理JavaScript的内存管理是自动的，分配、使用、释放垃圾回收与常见的GC算法JavaScript中的垃圾对象不再被引用时是垃圾对象不能从根上访问到时是垃圾 注意：从全局对象上一直查找，找不到的就是垃圾，也就是不可达对象 GC(垃圾回收的简写)GC 算法是什么GC 是一种机制，垃圾回收器完成具体的工作工作的内容就是查找垃圾释放空间、回收空间算法就是工作时查找和回收所遵循的一些规则常见GC算法引用计数核心：设置引用数，判
2020-11-14 22:07:44
80
原创 笔记之TypeScript
TypeScript背景部分语言分类强类型与弱类型： 是否允许随意的隐式类型转化，转为不同是数据类型；静态类型与动态类型：是否允许随意修改变量的类型；JavaScript是弱类型并且也是动态类型语言强类型语言的优势1、错误可以更早的暴露，不必在运行的时候才发现；2、代码更加智能，编码更加准确；3、重构更加牢靠；4、减少不必要的数据类型判断；FlowJavaScript的类型检查器...
2020-11-13 18:14:49
78
原创 笔记之 ECMAScript 2015 新特性（ES6）
ECMAScript 2015一般说的ES6泛指ES2015之后的新功能和特性，ES2016、ES2017、ES2018等let和const块级作用域let:let 作用域在块儿中；无变量提升，使用前必须声明；const:声明一个恒量、常量一单声明内存指向不可修改（只读）其他同let数组与对象的解构看代码const arr = [100, 200, 300]const [foo, bar, baz] = arrconsole.log(foo, bar, baz)// 1
2020-11-11 15:52:55
160
原创 笔记之JavaScript 异步编程
背景javascript是一种单线程模式执行的语言，它最早就是运行在浏览器端的脚本语言，用来做页面的交互，而做页面交互就要有很多的DOM操作，DOM操作就最好是单线程的，否则就会有很复杂的多线程同步问题，同一时间多个操作去操作同一个DOM，浏览器就不知道怎么谁操作的了。所以javascript最早就设计成了单线程模式。...
2020-11-07 18:43:40
95
原创 笔记之函数式编程、闭包、纯函数、柯里化
函数式编程背景react， vue3.0 都在转换为函数式编程的思想内容概念思维模式的不同1、函数式编程是对运算过程进行抽象；2、面向对象是对现实世界中的事物进行抽象，通过封装、继承和多态来演示事物之间的联系函数具体指映射关系，同理数学中的函数概念重点：相同的输入要有相同的输出函数在javascript中：函数可以存储在变量中函数可以作为参数函数可以作为返回值高阶函数可以把函数作为参数传递给另一个函数可以把函数作为另一个函数的返回结果意义函数抽象帮助我们屏蔽细
2020-10-30 00:45:32
135
1
原创 笔记之初练手文章
第一章开始记录自己的学习成果，之前学的东西总是忘记，想回忆的时候，也没有当时的笔记，就算有笔记的也是零零散散不知道哪里去找。开通博客也是为了笔记保存的方便，之后会把自己学到的都慢慢记录在这里。加油！！！...
2020-10-28 22:51:34
66
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人