自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

前端精髓

前端与移动开发

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

原创 推荐10个优秀GitHub仓库

1、JavaScript 风格指南这个仓库包括 ES5、React、CSS 代码风格指南。它里面的代码片段通过好的和坏的进行对比解释和参考,这将有助于编写更健壮,干净和无错误的代码。https://github.com/airbnb/javascript#table-of-contents2、Node.js 最佳实践https://github.com/goldbergyoni/nodebestpractices/blob/master/README.chinese.md这是对 Node.js

2021-07-12 22:16:18 19

原创 编写声明文件

一般来讲,你组织声明文件的方式取决于库是如何被使用的。 在JavaScript中一个库有很多使用方式,这就需要你书写声明文件去匹配它们。比如使用 declare var 声明变量。 如果变量是只读的,那么可以使用 declare const。 你还可以使用 declare let 如果变量拥有块级作用域。declare var foo: number;现在我们已经按照指南里的步骤写好一个声明文件,是时候把它发布到 npm 了。 有两种主要方式用来发布声明文件到 npm:1、与你的 npm 包捆绑在

2021-07-04 19:58:43 14

原创 AbortController 中止一个或多个 Web请求

AbortController接口表示一个控制器对象,允许你根据需要中止一个或多个 Web请求。你可以使用 AbortController.AbortController() 构造函数创建一个新的 AbortController 。使用AbortSignal 对象可以完成与 DOM 请求的通信。用法介绍1、构造函数AbortController.AbortController()创建一个新的AbortController 对象实例。2、属性AbortController.signal 只读

2021-06-27 22:01:59 42

原创 使用 json-server 作为 mock 数据

通常前端需要 mock API 数据来模拟接口请求,今天介绍一个牛B的 mock 数据的方法,那就是 json-server 这个包,我们可以在 30 秒内得到一个完整的 REST API,零编码。我们只要准备好 JSON 数据就可以了。安装npm install -g json-server创建一个 db.json 文件和准备一些 data 数据。{ "posts": [ { "id": 1, "title": "json-server", "author": "typicode"

2021-06-27 17:53:01 26

原创 rollup配置babel

rollup.config.jsimport babel from "rollup-plugin-babel";import { nodeResolve } from '@rollup/plugin-node-resolve';import commonjs from '@rollup/plugin-commonjs';export default { input: "src/main.js", output: { file: "dist/bundle.cjs.js", //输出

2021-06-14 10:42:20 106 3

原创 chalk.js(node终端样式库)

默认 node 在输出终端的文字都是黑白的,为了使输出不再单调,添加文字背景什么的,改变字体颜色什么的,我们可以使用 chalk.js 这个库。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ziOSkE8o-1623416567140)(https://camo.githubusercontent.com/6b0dc65e5c1d4f1f53aac072b8bb0ef92f7e9cd513bde35cdf609e10ab0d3226/68747470733a2f2f6364

2021-06-11 21:03:04 42

原创 webpack5模块联邦

WHAT(Module Federation 是什么?)Module Federation [ˌfedəˈreɪʃn] 使 JavaScript 应用得以在客户端或服务器上动态运行另一个 bundle 的代码。这其中的关键点是:动态,包含两个含义:1、按需,可以把一个包拆开来加载其中一部分;2、运行时,跑在浏览器而非 node 编译时;另一个 bundle 的代码,之前应用之间做共享是在文件级或 npm 包级 export 成员,现在可以在应用级 export 成员属性。Module Fede

2021-05-30 21:04:22 41 1

原创 Tree Shaking和sideEffects配置

需要将 mode 配置设置成 development,以确定 bundle 不会被压缩:const path = require('path');module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, mode: 'development', optimization: { usedE

2021-05-29 20:28:01 47

原创 webpack5不要再用url-loader了

webpack 最出色的功能之一就是,除了引入 JavaScript,还可以通过 loader 或内置的 Asset Modules 引入任何其他类型的文件。webpack5 新增 Asset Modules 资源模块。资源模块(asset module)是一种模块类型,它允许使用资源文件(字体,图标等)而无需配置额外 loader。在 webpack 5 之前,通常使用:1、raw-loader 将文件导入为字符串。2、url-loader 将文件作为 data URI 内联到 bundle 中

2021-05-22 22:22:27 987 7

原创 在Redux中使用useSelector和useDispatch

如何在redux中使用useSelector和useDispacth来获取数据。我们可以使用mapStateToProps的替代方法useSelector。我们还可以使用mapDispatchToProps的替代方法useuseppatch。之前使用mapStateToProps和mapDispatchToProps的示例。import update_person from './store/actions/personAction';import { connect } from 'react-r

2021-05-07 19:22:15 592

原创 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 18

原创 使用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 36

原创 使用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 39

原创 微信小程序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 261

原创 source-map

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

2021-04-10 11:55:15 51

原创 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 191

原创 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 940

原创 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 861

原创 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 59

原创 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 637

原创 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 173

原创 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 95

原创 接口 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 77

原创 理解TypeScript的泛型

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

2021-03-28 12:52:10 32

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

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

2021-03-27 11:59:31 75

原创 为什么要使用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 91

原创 组件化的缺点

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

2021-02-24 17:43:55 291

原创 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 98

原创 介绍全新的 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 150

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

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

2021-02-10 14:59:08 1738

原创 babel需要这样配置

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

2021-02-07 17:30:36 155

原创 了解 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 74

转载 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 94

原创 纯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 381 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 2329

原创 关于graphql快速入门

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

2021-01-31 12:30:09 71

原创 webpack的chunkFilename详细说明

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

2021-01-25 18:06:50 734 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 550

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

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

2021-01-18 14:45:34 1101

原创 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 245 1

移动端横向picker组件

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

2019-01-05

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

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

空空如也

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

TA关注的人 TA的粉丝

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