笔记
文章平均质量分 86
Bal炎魔
奋斗的码农
展开
-
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 · 1863 阅读 · 0 评论 -
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 · 522 阅读 · 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 · 679 阅读 · 0 评论 -
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 · 73 阅读 · 0 评论 -
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 · 110 阅读 · 0 评论 -
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 · 163 阅读 · 0 评论 -
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 · 470 阅读 · 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 · 2452 阅读 · 0 评论 -
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 · 430 阅读 · 0 评论 -
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 · 800 阅读 · 0 评论 -
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 · 414 阅读 · 0 评论 -
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 · 392 阅读 · 0 评论 -
Vue进阶之源码阅读(二)虚拟DOM与模板编译
Vue进阶之源码阅读(二)虚拟DOM为什么要使用虚拟 DOM使用虚拟 DOM,可以避免用户直接操作 DOM,开发过程关注在业务代码的实现,不需要关注如 何操作 DOM,从而提高开发效率作为一个中间层可以跨平台,除了 Web 平台外,还支持 SSR、Weex。关于性能方面,在首次渲染的时候肯定不如直接操作 DOM,因为要维护一层额外的虚拟 DOM, 如果后续有频繁操作 DOM 的操作,这个时候可能会有性能的提升,虚拟 DOM 在更新真实 DOM 之前会通过 Diff 算法对比新旧两个虚拟 DOM 树原创 2021-01-27 10:40:51 · 394 阅读 · 0 评论 -
Vuex 数据流管理与 Vue.js 服务端渲染
Vuex 数据流管理与 Vue.js 服务端渲染原创 2021-01-26 18:55:34 · 135 阅读 · 0 评论 -
Vue进阶之源码阅读
Vue进阶之源码阅读阅读方式先宏观了解,看大致目录和结构;带着目标看源码,明确核心功能,要意识到我是谁、我在哪儿、我要做什么;看源码的过程要不求甚解,跳过分支功能;调试其运行过程;...原创 2021-01-13 23:41:34 · 186 阅读 · 0 评论 -
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 · 720 阅读 · 0 评论 -
Vue进阶之响应式原理
Vue进阶之响应式原理数据驱动数据响应式、双向绑定、数据驱动数据响应式数据模型仅仅是普通的 JavaScript 对象,而当我们修改数据时,视图会进行更新,避免了繁琐的 DOM 操作,提高开发效率双向绑定数据改变,视图改变;视图改变,数据也随之改变我们可以使用 v-model 在表单元素上创建双向数据绑定数据驱动是 Vue 最独特的特性之一开发过程中仅需要关注数据本身,不需要关心数据是如何渲染到视图响应式原理的简单演示Vue2.x 利用Object.defineP原创 2020-12-09 18:15:46 · 127 阅读 · 0 评论 -
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 · 489 阅读 · 0 评论 -
前端规范化标准(笔记)
前端规范化标准(笔记)背景规范化标准的主要目的:软件开发需要多人协同开发;不同开发者具有不同的编码习惯,不同的编码风格会增加项目的维护成本;每个项目或者团队都要有明确统一的标准;具体的规范化标准:开发过程中人为编写的产物都需要标准化,像代码、文档、甚至是提交日志;代码的标准化规范最为重要;常见的规范化实现,ESLintESLint统一编码风格,减少错误出现基本使用// 下载安装npm install eslint -D...// 校验文件npx eslint +文件原创 2020-12-01 19:46:08 · 393 阅读 · 0 评论 -
前端模块化开发-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 · 249 阅读 · 0 评论 -
前端模块化开发-Webpack(笔记)
前端模块化开发-Webpack(笔记)原创 2020-11-30 18:52:14 · 168 阅读 · 0 评论 -
前端模块化开发-ESModules(笔记)
前端模块化开发(笔记)背景目前最重要的前端开发范式之一;早期设计的时候没想到前端开发会如今的规模,所要处理的业务也越来越复杂,传统的开发模式已经不满足越来越多和复杂的前端页面;从而出现了,模块化的思想;模块化的演变1、文件划分:最早是通过页面的script标签区分,一个标签就是一个模块,通过全局变量来通信;这种模式的弊端污染全局作用域,变量可以在外部访问和修改;命名容易冲突;无法管理模块间的依赖关系;全靠相互约定来实现,项目规模变大后,容易出问题;2、命名空间方式:每个模块暴露一个全原创 2020-11-25 15:25:32 · 1500 阅读 · 2 评论 -
前端工程化整理(笔记)
前端工程化整理(笔记)原创 2020-11-22 20:11:40 · 213 阅读 · 0 评论 -
笔记之JavaScript的性能优化
JavaScript的性能优化内存管理JavaScript的内存管理是自动的,分配、使用、释放垃圾回收与常见的GC算法JavaScript中的垃圾对象不再被引用时是垃圾对象不能从根上访问到时是垃圾 注意:从全局对象上一直查找,找不到的就是垃圾,也就是不可达对象 GC(垃圾回收的简写)GC 算法是什么GC 是一种机制,垃圾回收器完成具体的工作工作的内容就是查找垃圾释放空间、回收空间算法就是工作时查找和回收所遵循的一些规则常见GC算法引用计数核心:设置引用数,判原创 2020-11-14 22:07:44 · 94 阅读 · 0 评论 -
笔记之TypeScript
TypeScript背景部分语言分类强类型与弱类型: 是否允许随意的隐式类型转化,转为不同是数据类型;静态类型与动态类型:是否允许随意修改变量的类型;JavaScript是弱类型并且也是动态类型语言强类型语言的优势1、错误可以更早的暴露,不必在运行的时候才发现;2、代码更加智能,编码更加准确;3、重构更加牢靠;4、减少不必要的数据类型判断;FlowJavaScript的类型检查器...原创 2020-11-13 18:14:49 · 86 阅读 · 0 评论 -
笔记之 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 · 192 阅读 · 0 评论