- 博客(56)
- 收藏
- 关注
RSS订阅原创 解决 viteprees 中 vp-doc 内置样式影响组件预
当使用作为组件库文档时，会自动引入vitepress的默认主题，其中vp-doc中有大量的html标签样式导致预览组件样式被影响未被覆盖样式的组件，表现出vp-doc中设置的样式，被外部影响，导致组件表现不正确。
2023-10-27 08:00:00
542
原创 网页端跳各种地图链接
百度地图http://api.map.baidu.com/marker?location=40.047669,116.313082&title=故障位置&content=故障位置&output=html高德地图标记点https://m.amap.com/share/index/lnglat=120.72713,31.32147&name=故障位置&output=html导航https://gaode.com/dir?from[name]=起点&
2021-10-13 21:49:08
286
原创 React —— 深入JSX
深入JSX实际上，jsx仅仅只是React.createElement(component,props,...children)函数的语法糖。如下JSX代码：<MyButton color="blue" shadowSize={2}>Click Me</MyButton>会编译为：React.createElement( MyButton, {color:'blue',shadowSize:2}, 'Click Me)如果没有子节点，
2021-02-21 23:32:04
122
原创 React —— 与第三方库协同使用
与第三方库协同React可以用于任何web应用中。它可以被嵌入刀其他应用，且需要足以，其他的应用也可以敲入刀React中。集成带有DOM操作的插件React不理会React自身之外的DOM操作。它根据内部虚拟DOM来决定是否需要更新，而且如果同一个DOM节点被另一个库操作了。React会觉得困惑而且没有办法恢复。这并不意味着React与其他操作DOM的方式不能结合，也不一定结合困难，只不过需要你去关注每个库所做的事情。避免冲突的最简单方式就是防止React组件更新。你可以渲染无需更新的Reac
2021-02-21 23:30:07
483
原创 React —— 高阶组件（HOC）
高阶组件高阶组件（HOC）是React中用于复用组件逻辑的一种高级技巧。HOC自身不是React API的一部分，它是一种基于React的组合特性而形成的设计模式。具体而言，高阶组件是参数为组件，返回值为新组建的函数。const EnhanceComponent = higherOrderComponent(WrappedComponent)组件是将props转化为ui，而高级组件是将组件转化为另一个组件。HOC在React的第三方库中非常常见，例如Redux的connect和Relay的C
2021-01-06 17:47:00
461
原创 React —— 使用Fragments不增DOM节点返回多个子节点
FragmentsReact中的一个常见模式是一个组件返回多个元素。Fragments允许你将字列表分组，而无需向DOM添加额外的子节点。class App extends React.Component{ render(){ return <React.Fragment> <div></div> <div></div> <div>
2021-01-06 17:46:26
410
原创 React —— ref使用分析
ref分析为什么有ref,虽然官方总是不推荐使用这种破坏整体框架的api,但是实际开发,总有一些场景需要直接操作DOM元素,所以有了这个api.但是如果能不使用尽量不使用.破坏了"属性和状态去映射视图",正常流程中的组件属性均有数据映射而来,绑定了ref相当于提供直接修改属性的额外途径,导致属性不可控.破坏了"属性不可变性，单向数据流",增加额外了操作数据的途径,可能改变属性不可变性,让数据的流动不可控.降低了可读性,破坏了整体代码风格和组织结构.虽然,有种种不利,但是在一些场景确实有效并
2021-01-06 17:43:17
520
原创 React —— 使用Refs转发技巧
Refs转发Ref转发是一项将ref自动地通过组件传递到其一子组件的技巧。对于大多数应用中的组件来说，这通常不是必需的。但是其对某些组件，尤其是可重用的组件库是很有用的。转发refs到DOM组件考虑这个渲染原生DOM元素button的FancyButton组件：function FancyButton(props){ return ( <button className="FancyButton"> {props.children}
2021-01-06 17:42:09
348
原创 React —— 使用错误边界进行React错误隔离
错误边界过去，组件内的JavaScript错误会导致React的内部状态被破坏，并且在下一次渲染时产生可能无法追踪的错误。这些错误基本上是因为较早的其他代码（非React组件代码）错误引起的，但是React并没有提供一种在组件中优雅处理这些错误的方式，也无法从错误中恢复。错误边界（Error Boundaries）部分UI的javascript错误不应该导致整个应用崩溃，为了解决这个问题，React16引入了一个新的概念——————错误边界。错误边界是一种React组件，这些组件可以捕获并打印发
2020-12-15 23:51:07
383
原创 React —— 如何通过上下文(context)跨级管理状态
使用context之前的考虑Context主要应用场景在于很多不同层级的组件需要访问同样一些的数据。如果你只是想避免层层传递一些属性，组件组合（component composition）有时候是一个比context更好的方案。 function Parent(){ return <TestChilren name={'子组件name'}> <TestGrandson name={'孙组件name'}></TestGrands
2020-12-13 22:17:05
423
原创 React —— 基于React的思想构建一个应用
React 哲学React 最棒的部分之一是引导我们思考如何构建一个应用。在这篇文档中，我们将会通过React构建一个可搜索产品数据的表格来更深刻的领会React哲学。从设计稿开始假设我们已经有了一个返回JSON的API，以及设计师提供的组件设计稿。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uPjsKVC8-1607868746795)(https://react.docschina.org/static/1071fbcc9eed01fddc115b41e193e
2020-12-13 22:13:16
122
原创 React ——究竟是应该使用组合还是继承？
组合 vs 继承React 有十分强大的组合模式。我们推荐使用组合而非继承来实现组件间的代码重用。包含关系有写组件无法提前知晓它们的子组件的具体内容。在Sidebar（侧边栏）和Dialog（对话框）等展示通用容器（box）的组件中特别容易遇到这种情况。我们们建议这些组件使用一个特殊的childrenprop来将他们的子组件传递到渲染结果中：function FancyBorder(props){ return ( <div className={'FancyBord
2020-12-13 22:12:04
536
原创 React ——优雅的管理状态之“状态提升”
状态提升通常，多个组件需要反映相同的变化数据，这时我们建议将共享状态提升到最近的共同父组件中区，让我们看看它是如何运作的。在本节中，我们将穿件一个用于计算水在给定温度下是否会沸腾的温度计算器。我们将从一个名为boilingVerdict的组件开始，他接受celsius温度座位一个prop，并据此打印出该温度是否足以将水煮沸的结果。function BoilingVerdict (props) { if (props.celsius >= 100) { return &
2020-12-13 22:10:48
278
原创 React —— 从表单认识的受控组件
表单在React里，HTML表单元素的工作方式和其他的DOM的元素有些不用，这是因为表单元素通常会保持一些内部的state，例如这个纯html表单直接收一个名称： <form> <label> 名称： <input type="text" name="name"/> </label> <input type="submit" value="提交"
2020-12-13 22:07:49
209
原创 koa使用静态目录如何支持视屏调节时间进度
koa使用静态目录如何支持视屏调节时间进度背景搭建基于koa的VueSSR的时候，有个功能需要上传下载预览视屏。实现思路，首先设置静态目录（koa-static），上传时直接保存文件到静态目录，预览和下载都通过返回对应静态目录文件的路径进行操作。问题当前端通过video的播放的时候，画面能正常播放，但是令人惊讶的事情发生了，居然不能手动调节进度，无论是拖拽进度条还是点击都无效。过程第一反应是前端设置有问题，但是前端控制只有一个设置control,并没有其余的单独设置。于是猜想是不是视屏有问
2020-12-09 22:28:09
860
3
原创 React —— 列表和Key的重要作用
列表 & Key在JavaScript中如何转化列表。如下代码，我们使用map()函数让数组中的每一项变成双倍，然后我们得到了一个新的列表doubled并打印出来：const numbers=[1,2,3,4,5];const doubled = numbers.map(function(number){ return number * 2})console.log(doubled)代码打印出 [2,4,6,8,10]。在React中，把数组转化为元素列表的过程是相似的。
2020-12-09 22:26:58
145
原创 React —— 如何理解条件渲染
条件渲染在React中，你可以创建不同的组件来封装各种你需要的行为。然后依据应用的不同状态，你可以只渲染对应状态下的部分内容。React中的条件渲染和javaScript中的一样，使用JavaScript运算符if或者条件运算符去创建元素来表现当前的状态，然后让React根据他们来更新UI。function UserGreeting(props) { return <h1>Welcome back!</h1>;}function GuestGreeting(pro
2020-12-09 22:26:28
178
原创 React —— 绑定事件回调
事件处理React元素的事件处理和DOM元素的很相似，但是有一点语法的不同：React事件的命名采用小驼峰式(camelCase)，而不是纯小谢。使用jsx语法时你需要传入一个函数座位事件处理函数，而不是一个字符串。例如，传统的HTML：<button onclick="activateLasers()"> Activate Lasers</button>在React中略微不同：<button onClick={activateLasers}>
2020-11-23 21:57:26
616
原创 React —— 实现一个时钟的例子
实现一个时钟的例子首先我们需要function Tick () { const clock = <div> <h1>Hello, world!</h1> <h2>It is {new Date().toLocaleTimeString()}.</h2> </div> ReactDOM.render( element, document.getE
2020-11-23 21:56:55
1807
原创 React —— JSX和React DOM和浏览器DOM
JSX和React DOM和浏览器DOMJSXJSX 是 JavaScript的语法扩展，用来描述UI应该呈现出它应有交互的本质形式。在UI中需要绑定事件、数据变化时候需要通知到UI，以前渲染数据到UI的，通过JSX能很直观的表示出来。并且JSX的写法打破传统的将标记与逻辑进行分离到这种分离形式，而是将二者同时存放在一个单元组件中，来实现关注点分离，也就是模块化。在JSX中嵌入表达式 const name = 'Josh Perez'; const element = <h
2020-11-23 21:56:21
205
1
原创 React —— 开始一个react应用的两种方式
开始React 是一个用于构建用户界面的 JavaScript 库。诞生之初就是可被逐步采用的，因而你可以按需引入或多或少的 React 特性。不管你是想体验下 React，用它给简单的 HTML 页面增加一点交互，还是要开始一个完全由 React 驱动的复杂应用。直接在网站中使用React.js我们可以像普通库一样，直接在html中用过script标签引入js文件的方式使用。 <script src="https://unpkg.com/react@16/umd/react.dev
2020-11-17 23:18:50
210
原创 逐步搭建gogs+drone自动化---drone篇
drone什么是droneDrone 是一个基于 Docker 的云原生的持续集成/部署工具,能支持四种 git 托管服务（github, gitlab, gogs, gitea) 而 drone-server 预先知晓了对应托管服务的 API，drone 的很多功能比如拉取 git repo list/add webhook to repo 都是通过这些 API 完成的。前期准备首先准备好服务器（也可以本地搭建），其次了解一些基础的docker操作和linux命令。因为此次是基于阿里云服务器进
2020-11-16 23:13:53
1050
原创 逐步搭建gogs+drone自动化---gogs篇
搭建gogs什么是gogsGogs（go git serve）是一款极易搭建的轻量级自助的Git服务，基本能使用到git功能全部都，还有工单系统也挺适合于小团队的，并且市面上最低配置的服务器都能满足系统最低硬件要求。前期准备首先准备好服务器（也可以本地搭建），其次了解一些基础的docker操作和linux命令。因为此次是基于阿里云服务器进行，所以本地搭建不做介绍。服务器： 阿里云（1核2G） centOS 7.7.1908mysql：5.7 （5.7及以上，低版本会产生gogs报错主索引长
2020-11-16 23:13:26
452
原创 TypeScript进阶篇 --- 声明合并
声明合并如果定义了两个相同名字的函数、接口或类，那么他们会合并成一个类型：函数的合并我们可以使用重载定义多个函数类型： function reverse(x: number): number; function reverse(x: string): string; function reverse(x: number | string): number | string { if (typeof x === 'number') { re
2020-11-16 23:09:14
681
原创 TypeScript进阶篇 --- 泛型
泛型泛型（Generics）是指在定义函数，接口或类的时候，不预先指定具体的类型，而在使用的时候，再指定类型的一种特性。简单的例子首先，我们来实现一个createArray，它可以创建一个指定长度的数据，同时将每一项都填充一个默认值： function createArray(length: number, value: any): Array<any> { let result = []; for (let i = 0; i < length
2020-11-16 23:08:16
496
原创 TypeScript进阶篇 --- 类与接口
类与接口接口（Interfaces）可以用于对于[对象的形状]进行描述。这一章介绍接口的另一个用途，对类的一部分行为进行抽象。类实现接口实现（implements）是面向对象中的一个重要概念。一般来讲，一个类智能继承自另一个类，有时间不同类之间可以有一些共有的特性，这时候就可以吧特性提取成接口（interface），用implements关键字来实现。这个特性大大的提高了面向对象的灵活性。举例来说，门是一个类，防盗门是门的子类。如果防盗门有一个报警器的功能，我们可以简单的给防盗门添加一个报警党发，
2020-10-30 19:57:34
132
原创 TypeScript进阶篇 --- 类
类传统方法中，JavaScript通过构造函数实现类的概念，通过原型链实现集成。而在ES6中，我们终于迎来了class。TypeScript 除了实现了所有ES6的类的功能以外，还添加了一些新的用法。类的概念虽然 JavaScript中有类的概念，但是可能大多数 JavaScript程序员并不是非常熟悉类，这里对类相关的概念做一个简单的介绍。类（Class）:定义了一件事物的抽象特点，包含它的属性和方法对象（Object）:类的实例，通过new生成面向对象（OPP）的三大特性：封装、继承、多
2020-10-30 19:55:06
394
原创 TypeScript进阶篇 --- 枚举
枚举枚举（Enum）类型用来取值被限定在一定范围内的场景，比如一周只能偶七天，颜色限定为红绿蓝等。简单的例子枚举使用enum关键字来定义： enum Days { Sun, Mon, Tue, Wed, Thu, Fri, Sat }; console.log(Days["Sun"] === 0); // true console.log(Days["Mon"] === 1); // true console.log(Days["Tue"] === 2); // tru
2020-10-30 19:52:22
642
原创 TypeScript进阶篇 --- 元组
元组数组合并了相同类型的对象，而元组(Tuple)合并了不同类型的对象。元组起源于函数编程语言（如F#），这些语言中会频繁使用元组。简单的例子定义一对值分别为string和number的元组： let tom:[string,number] = ['tom',25]当赋值或者访问一个一直索引的元素时，会得到正确的类型： let tom:[string,number]; tom[0]='1'; tom[1]=24; // tom[3]=1;// 长度为 "2
2020-10-17 12:29:49
997
原创 浅谈javascript注入攻击
前言记录一次防止js注入的项目经历，起因，项目在测试过程中，发现可能存在注入可能，于是拿到代码开始查看，因为现在前后端分离的情况下，需要特殊处理避免XSS攻击（跨站脚本攻击）的情况已经很少了，所以这次情况引起了我的兴趣。介绍什么是javascript注入攻击？简单来说，就是页面上输入的内容中带有可执行的javascript，而你使用这段输入内容的时候，让这段用户提供的代码执行了，也就是你写的代码，执行了非你写的代码，就会导致网页的不可行乃至更严重的安全威胁。传统页面的服务端渲染因为传统页面基本都是
2020-10-17 12:05:55
11773
3
原创 TypeScript进阶篇 --- 类型别名&&字符串字面量类型
类型别名类型别名用来给一个类型起个新名称。简单的例子 type Name = string ; type NameResolver = () => string; type NameOrNameResolver = Name | NameResolver ; function getName(n:NameOrNameResolver):Name{ if(typeof n == 'string'){ return n
2020-10-15 22:45:27
631
原创 TypeScript基础篇 --- 内置对象
内置对象JavaScript中有很多内置对象，他们可以直接在 TypeScript中当做定义好了的类型。内置对象是指根据标准在全局作用域(Global)上存在的对象。这里的标准是指ECMAScript和其他环节(比如DOM)的标准。ECMAScript的内置对象ECMAScript标准提供的内置对象有：Boolean、Error、Date、RegExp等。我们可以是 TypeScript中将变量定义为这些类型： let b:Boolean = new Boolean(1); le
2020-10-14 22:55:15
483
原创 TypeScript基础篇 --- 声明文件
当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能。新语法索引declare var 声明全局变量declare function 申明全局函数declare class 声明全局类declare enum 声明全局枚举类型declare namespace 声明（含有子属性的）全局对象interface和type 声明全局类型export 导出变量export namespace 导出（含有子属性的）对象export default ES5默认导出e
2020-10-13 22:58:22
3746
2
原创 TypeScript基础篇 --- 类型断言
类型断言类型断言（TyPe Assertion）可以用来手动只顶一个值的类型。语法 值 as 类型或 <类型>值在 tsx语法（react的jsx语法的ts版）中必须使用前者，即值 as 类型。形如<Foo>的语法在tsx中表示一个ReactNode，在ts中除了表示类型断言外，也可能表示一个泛型。故建议使用类型断言的时候，统一使用值 as 类型这样的语法。类型断言的用途将一个联合类型断言为其中一个类型之前有提到过，当 TypeScript不确定
2020-10-12 20:29:44
1871
原创 TypeScript基础篇 --- 函数的类型
函数的类型函數申明在 JavaScript中，有两种常见的什么方式————函数声明（Function Declarartion）和函数表达式（Function Expression）。 // 函数声明 function sum(x,y){ return x+y } // 函数表达式 let sum = function (x,y){ return x+y }一个函数有输入和输出，要在 TypeScript中对其进行约束
2020-10-09 23:05:33
493
原创 TypeScript基础篇 --- 数组的类型
数组的类型在 TypeScript中，数组类型有多种定义方式，比较灵活。类型+[方括号]表示 let fibonacci:number[]=[1,2,3];数组的类型中不允许出现其他类型： let fibonacci:number[]=[1,2,"3"];//不能将类型“string”分配给类型“number”。数组的一些方法的参数也会根据数组在定义时约定的类型进行限制: let fibonacci:number[]=[1,2,3]; fibonacci.push
2020-09-23 20:48:43
1600
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人