自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

前端精髓

前端与移动开发

  • 博客(410)
  • 资源 (1)
  • 论坛 (1)
  • 收藏
  • 关注

原创 vue-ssr

const Vue = require('vue')const server = require('express')()const renderer = require('vue-server-renderer').createRenderer({ template: require('fs').readFileSync('./index.template.html', 'utf-8') // 指定模板})server.get('*', (req, res) => { const

2021-04-26 08:58:57 9

原创 使用Axios Api调用的Vuex完整指南示例

使用vuex,我们可以轻松管理状态。因为如果您的组件需要共享和更新状态,那么就需要它。在本篇文章中,我将为您提供完整的vuex设置,其中包括带有axios调用api获取数据的示例。因此,让我们开始我们的vuex教程。现在,通过在终端中运行以下代码来创建Vue项目:vue create vuex-app现在我们必须安装vuex和axios。所以打开终端并一个接一个地运行两个命令。npm install vuex//thennpm install axios在您的 store 文件夹中,创

2021-04-25 19:40:22 4

原创 使用Axios Api调用的Redux完整指南示例

使用redux,我们可以轻松管理状态。因为如果您的组件需要共享和更新状态,那么就需要它。在本篇文章中,我将为您提供完整的redux设置,其中包括带有axios调用api获取数据的示例。因此,让我们开始我们的redux教程。现在,通过在终端中运行以下代码来创建React项目:npx create-react-app my-app现在我们必须安装redux和react-redux。所以打开终端并一个接一个地运行两个命令。npm install redux//thennpm install re

2021-04-25 19:36:06 6

原创 微信小程序Canvas原有接口不再维护

画布。2.9.0 起支持一套新 Canvas 2D 接口(需指定 type 属性),同时支持同层渲染,原有接口不再维护。<!-- canvas.wxml --><canvas type="2d" id="myCanvas"></canvas>// canvas.jsPage({ onReady() { const query = wx.createSelectorQuery() query.select('#myCanvas')

2021-04-22 19:53:09 12

原创 source-map

eval - 每个模块都使用 eval() 执行,并且都有 //@ sourceURL。此选项会非常快地构建。主要缺点是,由于会映射到转换后的代码,而不是映射到原始代码(没有从 loader 中获取 source map),所以不能正确的显示行数。eval-source-map - 每个模块使用 eval() 执行,并且 source map 转换为 DataUrl 后添加到 eval() 中。初始化 source map 时比较慢,但是会在重新构建时提供比较快的速度,并且生成实际的文件。行数能够正确映射

2021-04-10 11:55:15 27

原创 TS中的infer

假如想在获取数组里的元素类型,在不会infer之前我是这样做的:type Ids = number[];type Names = string[];type Unpacked<T> = T extends Names ? string : T extends Ids ? number : T;type idType = Unpacked<Ids>; // idType 类型为 numbertype nameType = Unpacked<Names>; //

2021-04-04 16:07:59 48

原创 TS中的条件类型(ReturnType)

本偏介绍TS另一种高级类型-条件类型。官方文档:https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types1、条件类型是一种由条件表达式所决定的类型2、条件类型使类型具有了不唯一性,同样增加了语言的灵活性例如:T extends U ? X : Y若类型T可被赋值给类型U,那么结果类型就是X类型,否则就是Y类型。条件类型约束泛型约束的例子:typ

2021-04-04 10:11:41 74

原创 ts中的强制类型转换

先看一个例子:type T = { title: string}type U = { color: string}let result = <T&U>{}result.title = '北京'result.color = 'red'如果我们写了一个空对象,需要给这个对象添加属性,这个时候是会报错的:let result = {}// 报错:提示不存的属性result.title = '北京'这个时候我们需要进行强制类型转换:type T = {

2021-04-03 21:15:42 154

原创 TS类型推论

这节介绍TypeScript里的类型推论。即,类型是在哪里如何被推断的。基础TypeScript里,在有些没有明确指出类型的地方,类型推论会帮助提供类型。如下面的例子let x = 3;变量x的类型被推断为数字。从赋值中推断出来,类型从右向左流动function add (a: number, b: number) { return a + b}let c = add(1,2)通过return关键字推断出返回值类型,这叫底部流出type Sum = (a: numbe.

2021-04-03 12:06:16 18

原创 TS中的unknown类型

我们可以对 any 进行任何操作,不需要检查类型。let value:any;value = ture;value = 1;value.length;没有类型检查就没有意义了,跟写JS一样。很不安全。unknown也可以把任何值赋值给 unknownlet value:any;value = ture;value = 1;但是不能调用属性和方法value.length; // 错误写法如果需要调用属性和方法,那么你可能需要类型断言let value:unknown;va.

2021-04-03 11:08:48 102

原创 TS中的&交叉类型

interface A { name: string; sex: number;}interface B { age: number; sex: number;}type C = A&Blet c:C = { name: 'xxx', age: 18, sex: 1 }既是A的子类型,又是B的子类型,既要满足A又要满足Btype AA = string | number;type BB = string | boolean;type CC = AA &

2021-04-03 10:32:56 40

原创 ts的类型兼容性

你要的我有就可以,没有就不行接口兼容性interface Person1 { name: string}interface Person2 { name: string; age: number;}let obj1: Person1 = { name: 'xxx'}let obj2: Person2 = { name: 'xxx', age: 18}obj2 = obj1 // 错误:无法赋值,因为缺少属性,多了不影响,但是少了属性绝对不行obj1 =

2021-03-31 22:40:00 42

原创 接口 vs 类型别名

类型别名类型别名会给一个类型起个新名字。 类型别名有时和接口很像,但是可以作用于原始值,联合类型,元组以及其它任何你需要手写的类型。type Name = string;type NameResolver = () => string;type NameOrResolver = Name | NameResolver;function getName(n: NameOrResolver): Name { if (typeof n === 'string') { ret

2021-03-29 21:50:06 22

原创 理解TypeScript的泛型

可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。泛型函数// arg 参数类型是一个泛型变量 T,也可以使用不同的泛型参数名function identity<T>(arg: T): T { return arg;}们定义了泛型函数后,可以用两种方法使用。 第一种是,传入所有的参数,包含类型参数:let output = identity<string>("myString"); // type o.

2021-03-28 12:52:10 20

原创 如何在 reducer 之间共享 state?

如何在 reducer 之间共享 state? combineReducers(reducers)reducers (Object): 一个对象,它的值(value)对应不同的 reducer 函数,这些 reducer 函数后面会被合并成一个。随着应用变得越来越复杂,可以考虑将 reducer 函数拆分成多个单独的函数,拆分后的每个函数负责独立管理 state 的一部分。rootReducer = combineReducers({potato: potatoReducer, tomato: .

2021-03-27 11:59:31 23

原创 为什么要使用React-Redux?

通常我们使用 react 开发项目的时候,会把 redux 和 react-redux 库引进来,你是否思考过为什么需要 react-redux 库呢?今天就一起来分析一下这个问题。Redux 本身是一个独立的库,可以与任何 UI 框架一起使用,包括 React,Angular,Vue,Ember 和 vanilla JS。尽管 Redux 和 React 经常一起使用,但它们彼此独立。如果将 Redux 与任何类型的 UI 框架一起使用,通常将使用“UI 绑定”库将 Redux 与 UI 框架绑定在一

2021-03-23 20:18:14 49

原创 组件化的缺点

我不得不说,到目前为止,我在写基于React的项目时感受最痛苦的事情是组件状态过多。状态使组件难以测试在测试有状态组件时,我们需要使组件进入“正确的状态”,以测试其行为。我们还需要处理状态的各种组合(组件可以随时更改)和交互(组件无法控制),并确定要测试的项以及如何进行测试。状态使组件难以推理在组件状态非常多的时候,你看代码的时候必须在精神上加倍努力,用来跟踪发生的一切问题。比如“是否已初始化该状态?”,“如果在此更改此状态会发生什么?”,“还有多少其他地方更改此状态”,“此状态是否存在关联条件?”

2021-02-24 17:43:55 175

原创 D3上手

操作 DOMd3 提供了 d3.select 和 d3.selectAll 两个 API,根据 CSS 选择器来选取 DOM 节点。但是它们返回的并不是真正的 DOM 节点,而是会对 DOM 做一层封装对于 DOM 节点上的一些 API,d3 也提供了对应的镜像版本:下面的代码会在 <svg></svg> 标签中绘制一个圆:<!DOCTYPE html><html lang="zh-cn"><head> <meta cha

2021-02-19 15:29:12 68

原创 介绍全新的 JSX 转换

虽然 React 17 并未包含新特性,但它将提供一个全新版本的 JSX 转换。看看怎么用吧?先看看 React 16 的项目。react 和 react-dom 的版本都是16的。 "react": "^16.8.6", "react-dom": "^16.8.6",import React from 'react'; // 必须引入 Reactimport logo from './logo.svg';import './App.css';function App() {

2021-02-18 20:06:06 104

原创 让Vue文件直接在浏览器中运行

项目背景我非常非常讨厌Webpack,这个东西结构复杂,概念繁多,难以理解,主体与插件设计并不一致,我曾尝试学习,但官方只是教你怎么用,不解释配置底层原理,我不喜欢这种只知表面不知原理的感觉。或者设计者和众多开发者自己也不是完全清楚到底怎么解释原理吧!!!首先说,Vue自创的单文件组件这个太好用了,封着性好,开发组件没什么学习成本,好用!但是,Vue虽然号称“渐进式框架”,但如果【不想】只使用基本语法做点小玩意,【想】使用组件搞Vue开发,却必须依赖Webpack这个复杂的工具,这非常不符合“渐进式框

2021-02-10 14:59:08 870

原创 babel需要这样配置

Babel 是一个编译器(输入源码 => 输出编译后的代码)。就像其他编译器一样,编译过程分为三个阶段:解析、转换和打印输出。Babel的核心功能位于 @babel/core 模块中。安装:npm install --save-dev @babel/core现在,Babel 虽然开箱即用,但是什么动作都不做。它基本上类似于 const babel = code => code; ,将代码解析之后再输出同样的代码。如果想要 Babel 做一些实际的工作,就需要为其添加插件。要将 ES20

2021-02-07 17:30:36 118

原创 了解 babel 的包

核心包(Packages)1、@babel/core 2、@babel/parser3、@babel/traverse4、@babel/generator@babel/core 是Babel编译器本身;它暴露了其中的babel.transform方法:transformedCode = transform(src).code编译器可分为三部分:解析器: @babel/parser代码转换(transformer[s]):通过插件/预设,这些都是使用@babel/traverse遍历AST

2021-02-07 15:34:06 42

转载 babel 的理解

Babel是一个 JavaScript 编译器,准确说是一个source-to-source编译器,通常称为“ transpiler”。这意味着您向 Babel 提供一些 JavaScript 代码,Babel 修改代码,并返回生成新代码。babel在编译时候,会把源代码分为两部分来处理:语法syntax、api。语法syntax比如const、let、模版字符串、扩展运算符等。 api比如Array.includes()等新函数。@babel/corebabel编译器。被拆分三个模块:@babel

2021-02-07 14:57:49 75

原创 纯CSS实现回到顶部的功能

如果你的网站有“返回顶部”按钮,并且已经实现平滑滚动。document.querySelector("#js-scroll-to-top").addEventListener("click", (e) => { e.preventDefault(); window.scroll({ top: 0, left: 0, behavior: "smooth" });});当点击“返回顶部”按钮时,用户会看到一些吸引眼球的内容,并且希望停止滚动,因此当他们再次操作鼠

2021-02-03 19:23:02 125 1

原创 React中StrictMode严格模式

当我们使用 npx create-react-app my-app 创建一个项目的时候。项目中有一段如下所示的代码:ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root'));React.StrictMode 组件是什么?StrictMode 是一个用来检查项目中潜在问题的工具。与 Fragment 一样,S

2021-02-02 11:00:40 424

原创 关于graphql快速入门

GraphQL是什么?一种用于 API 的查询语言,GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述,使得客户端能够准确地获得它需要的数据,而且没有任何冗余,也让 API 更容易地随着时间推移而演进,还能用于构建强大的开发者工具。GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义)。GraphQL 并没有和任何特定数据库或者存储引擎绑定

2021-01-31 12:30:09 58

原创 webpack的chunkFilename详细说明

你知道chunkFilename的作用吗?了解之前,先了解懒加载,动态导入的功能。通常,一个网页会有自身的侧重点:1、假如你在 YouTube 上加载一个视频页面,你更关心的肯定是视频而不是评论。所以,这里视频就比评论重要。2、又比如你在一个新闻网站看一篇文章,你更关心的肯定是文章的文字而不是广告。所以,这里文字就比广告重要。上面的这些情况,都可以通过优先下载最重要的部分,稍后懒加载剩余部分,从而来提升页面首次加载的性能。在 webpack 中,使用 import() 函数即可实现。let btn

2021-01-25 18:06:50 371 1

原创 snowpack 快速开始

先准备一个空目录来创建项目mkdir my-first-snowpackcd my-first-snowpack初始化操作npm init安装依赖npm install --save-dev snowpack创建一个index.html文件<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" c

2021-01-20 19:46:56 318

原创 小程序与普通网页开发的区别

我们平时写的微信小程序,明明只写了一套代码,为什么小程序可以在安卓的微信里面运行,也可以在iOS的微信里面运行呢?我们写的小程序代码是真的h5代码吗?小程序代码是如何实现同时支持安卓和iOS的呢?今天就来探讨一下这个问题。小程序当然不是H5,它也不用html写,使用WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。小程序与普通网页开发的区别:链接微信会将基础组件渲染为原生平台UI组件,意味着每个视图和原生应用都别无二致。.

2021-01-18 14:45:34 606

原创 webpack中library和libraryTarget

library和libraryTarget是配合使用的。libraryTarget:‘var’默认webpack导出都是这样的结构,一个自执行函数的样式。(() => { return { name: 'jack', age: 24, };})();没有赋值操作,所以其他文件没法引用该对象。加了 library和libraryTarget 之后的 webpack 配置:output: { ... library: 'finalModule', libr

2021-01-17 20:52:16 183 1

原创 菜单栏底部线条切换效果(标题滚动居中显示)

要实现的效果是当点击某一个菜单的时候,菜单的底部有一个线条高亮,从上一次的位置切换到点击的位置,而且需要添加动画效果。首先我们的DOM结构是这样的,li 是显示每一个菜单的内容,我们添加了自定义的属性,用来区分在点击的时候具体是点击第几个的位置。线条是通过定位在最底下的。<div class="wrapper"> <ul class="list" id="list"> <li class="item" data-index="0">首页</li&.

2021-01-16 20:19:37 175

原创 webpack5的tree shaking值得了解

什么是 tree shaking?tree shaking 的意思是,webpack 在打包的时候将会剔除掉被没有被使用到的代码达到减小报体积,缩短 http 请求时间,起到一定效果的页面优化。那么我们如何使用 tree shaking 呢?这个功能webpack5已经自带了,让我们来实验一下吧!先初始化项目然后安装依赖。npm init -ynpm install webpack webpack -D然后准备下面的代码结构// a.jsexport default { a: 1}//

2021-01-10 21:43:26 352

原创 生成随机颜色

生成一个随机的颜色:const randomColor = Math.floor(Math.random()*16777215).toString(16);下面是一个完整的用例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0

2021-01-03 21:33:01 294

转载 H5中CSS3动画的性能优化

触发重布局的属性有些节点,当你改变他时,会需要重新布局(这也意味着需要重新计算其他被影响的节点的位置和大小)。这种情况下,被影响的DOM树越大(可见节点),重绘所需要的时间就会越长,而渲染一帧动画的时间也相应变长。所以需要尽力避免这些属性。一些常用的改变时会触发重布局的属性:盒子模型相关属性会触发重布局:widthheightpaddingmargindisplayborder-widthbordermin-height定位属性及浮动也会触发重布局:topbottomle

2020-12-20 21:26:53 103

原创 GitHub Actions

GitHub Actions 是 GitHub 的持续集成服务。通常持续集成是由很多操作组成的,比如抓取代码、执行脚本、登录远程服务器、发布到第三方服务等。GitHub将这些操作称作actions。如果你需要某个 action,不必自己写复杂的脚本,直接引用他人写好的 action 即可,整个持续集成过程,就变成了一个 actions 的组合。GitHub 做了一个官方市场,可以搜索到他人提交的 actions:下面分别从基本概念和发布流程详细说明一下GitHub Actions。基本概念:wo

2020-12-15 10:36:31 224

转载 git分支操作技巧

我从错误的分支拉取了内容,或把内容拉取到了错误的分支。这是另外一种使用 git reflog 情况,找到在这次错误拉(pull)之前 HEAD 的指向。(main)$ git reflogab7555f HEAD@{0}: pull origin wrong-branch: Fast-forwardc5bc55a HEAD@{1}: checkout: checkout message goes here重置分支到你所需的提交(desired commit):$ git reset --ha.

2020-12-13 16:34:30 97

原创 git reset 撤销后找回

假设现在的 git 提交记录有4次,在第二次的时候发生了bug,也就是introduced a bug注释的地方。这个时候我们该如何处理呢?417e4a9 commit 4427d76b commit 31642475 introduced a bug71d3ef7 commit 1来吧,展示!使用 git reset 71d3ef7,干掉后三条 commit 记录,然后剩下一条。71d3ef7 commit 1是命令之后,后三条记录的代码从版本库回到了工作区,然后你工作区也不想要了,直

2020-12-05 22:43:22 188

原创 git撤销操作分析

假设现在的 git 提交记录有4次,在第二次的时候发生了bug,也就是introduced a bug注释的地方。这个时候我们该如何处理呢?417e4a9 commit 4427d76b commit 31642475 introduced a bug71d3ef7 commit 1git revert很重要的一点,revert 是对一次单一的 commit 的撤销,并不是真正意义上的回滚。它不是通过移除项目中一次 commit 后面的所有提交来“回滚”之前的状态。实际上那样的操作在 Git.

2020-12-05 21:21:38 57

原创 git checkout 切 commit

切换分支是 git checkout 最常见的功能,这里不做介绍,今天主要介绍下它在撤销文件改动上的应用。// 放弃单个文件修改,注意不要忘记中间的"--",不写就成了检出分支了git checkout -- filepathname// 放弃所有的文件修改git checkout . 此命令用来放弃掉所有还没有加入到缓存区(就是 git add 命令)的修改。但是此命令不会删除掉刚新建的文件。因为刚新建的文件还没已有加入到 git 的管理系统中。所以对于git是未知的。自己手动删除就好了。

2020-12-05 12:06:36 630

翻译 react 源码概览

React 采用 monorepo 的管理方式。仓库中包含多个独立的包,以便于更改可以一起联调,并且问题只会出现在同一地方。reactReact “Core” 中包含所有全局 React API,比如:1、React.createElement()2、React.Component3、React.ChildrenReact 核心只包含定义组件必要的 API。它不包含协调算法或者其他平台特定的代码。它同时适用于 React DOM 和 React Native 组件。React 核心代码在源码的

2020-11-29 22:15:54 107

移动端横向picker组件

使用vue开发移动端横向滚动的picker组件,不依赖任何框架和库,使用原生JS编写,组件代码约300行,代码难度一般。

2019-01-05

最新版本谷歌浏览器无法显示svg

发表于 2019-04-11 最后回复 2019-04-11

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除