自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

前端精髓

前端与移动开发

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

原创 原型模式

使用构造函数的主要问题,就是每个方法都要在每个实例中重新创建一遍。function Animal () { this.sayName = function () { console.log('动物') }}let dog = new Animal()let cat = new Animal()每个函数都有一个 prototype (原型)属性,这个属性是一个指针,指向...

2019-08-31 21:06:28 61

原创 设计模式之状态模式

状态模式是一种非同寻常的优秀模式,它也许是解决某些需求场景的最好方法。虽然状态模式并不是一种简单到一目了然的模式,但你一旦明白了状态模式的精髓,以后一定会感谢它带给你的无与伦比的好处。状态模式的关键是区分事物内部的状态,事物内部状态的改变往往会带来事物的行为改变。我们来想象一个场景,路口的红绿灯。它有三种状态,可以不断的轮询切换。根据这个交通规则,我们通过代码的形式来描述。class Lig...

2019-08-31 11:46:34 179

原创 node中events实现原理

events称为事件触发器,on() 用于注册监听器, emit() 用于触发事件。用例如下:const EventEmitter = require('events');class MyEmitter extends EventEmitter {}const myEmitter = new MyEmitter();myEmitter.on('event', () => { ...

2019-08-30 15:09:00 234

原创 设计模式之代理模式

代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问。比如我们想要访问Google服务器,但是在中国不能直接访问,需要配置一个单例服务器访问。class Google { get() { return 'google' }}// 通过代理访问googleclass Proxy { constructor () { this.google = new...

2019-08-27 22:41:05 96

原创 useImperativeHandle的使用

你不能在函数组件上使用 ref 属性,因为它们没有实例:import React, { Component } from 'react';function MyFunctionComponent() { return <input />}class Parent extends React.Component { constructor(props) { s...

2019-08-26 15:46:57 3962 1

原创 设计模式之适配器模式

适配器模式的作用是解决兼容问题的。在使用Vue的时候通常使用computed计算属性去处理数据然后再显示到页面中。<body> <div id="root"> <p>{{ name }}</p> <p>{{ upperName }}</p> </div> <script&gt...

2019-08-25 12:04:43 115

原创 设计模式之单例模式

什么是单例模式?只有一个实例(如在浏览器中只有一个window对象)class Window { constructor (name) { this.name = name; } static getInstance () { if (!this.instance) { this.instance = new Window() } ret...

2019-08-24 22:29:27 79

原创 useEffect使用的介绍

如果你熟悉 React class 的生命周期函数,你可以把 useEffect Hook 看做 componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合。实现一个 componentDidMount 的功能function Demo () { useEffect(() => { consol...

2019-08-23 18:27:05 3361

原创 useRef() 比 ref 属性更有用。它可以很方便地保存任何可变值

只在更新时运行 effect这是个比较罕见的使用场景。如果你需要的话,你可以 使用一个可变的 ref 手动存储一个布尔值来表示是首次渲染还是后续渲染,然后在你的 effect 中检查这个标识。(如果你发现自己经常在这么做,你可以为之创建一个自定义 Hook。)function Example () { const [count, setCount] = useState(0); co...

2019-08-23 14:30:18 22730

原创 理解中间件的next怎样调用

app.use((ctx, next) => { console.log(1); next() console.log(2)})app.use((ctx, next) => { console.log(3); next() console.log(4)})app.use((ctx, next) => { console.log(5); ne...

2019-08-20 19:48:19 1504

转载 react生命周期

React生命周期分为3个阶段:挂载,更新,卸载挂载当组件实例被创建并插入 DOM 中时,其生命周期调用顺序如下:constructor()static getDerivedStateFromProps()render()componentDidMount()更新当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下:static get...

2019-08-20 13:08:05 53

原创 vue和react中props变化后修改state

如果只想在 state 更改时重新计算某些数据,比如搜索框案例。vue<template> <div> <input type="text" v-model="filterText"> <ul> <li v-for="item in filteredList" :key="item.id"> ...

2019-08-17 13:25:59 946

原创 vue使用slot分发内容与react使用prop分发内容

vue将 <slot> 元素作为承载分发内容的出口// layout.vue<div class="container"> <main> <slot></slot> </main></div>当组件渲染的时候,<slot></slot> 将会被替换该组件起始标签和...

2019-08-16 14:38:49 477

原创 使用React.Suspense显示loading效果

React.lazy()需要和<React.Suspense>配合使用React.lazy()需要和import()动态引入语法配合使用不能在服务端渲染使用在组件没有加载出来的时候显示loading效果,加载完成之后正常显示。import React from 'react';const OtherComponent = React.lazy(() => impo...

2019-08-15 10:37:18 2022

原创 wepack中loader的分类

loader种类loader分为四类分别是:前置 pre行内 inline普通 normal后置 postRule.enforceenforce 属性会影响 loader 种类。不论是普通的,前置的,后置的 loader。可能的值有:"pre" | "post"module: { rules: [ { test: /\.less$/, ...

2019-08-11 11:14:54 438

原创 理解JavaScript的闭包

基本概念执行环境(execution context,为简单起见,有时也称为“环境”)是JavaScript中最为重要的一个概念。执行环境定义了变量或函数有权访问的其他数据,决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象(variable object),环境中定义的所有变量和函数都保存在这个对象中。虽然我们编写的代码无法访问这个对象,但解析器在处理数据时会在后台使用它。全局执行...

2019-08-08 13:30:08 448

移动端横向picker组件

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

2019-01-05

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

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

空空如也

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

TA关注的人 TA的粉丝

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