自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

梅某某

疏影横斜水清浅,暗香浮动月黄昏。

  • 博客(119)
  • 资源 (2)

原创 一一九、Mobx Redux Vuex

MobxRedux相同点统一维护管理应用状态某一状态只有一个可信数据来源-store 状态容器操作更新状态方式统一,并且可控(通常以action方式提供更新状态的途径)将react组件从业务上分为容器组件和展示型组件(视图)不同点函数式和面向对象Redux 更多的是遵循函数式编程思想,而Mobx更多的是从面向对象角度考虑问题Redux提倡函数式代码,如reducer就是一个纯函数.纯函数接受输入,然后输出结果,除此之外不会有任何影响,也包括不会影响接受的参数Mobx更多偏向

2020-09-16 20:56:59 21

原创 一零三、ES6-ES10,JavaScript进阶之路

ES6-ES10 ES6(ES2015)1. Let 和 Const2. 类(Class)3. 箭头函数(Arrow function)4. 函数参数默认值(Function parameter defaults)5. 模板字符串(Template string)6. 解构赋值(Destructuring assignment)7. 模块化(Module)8. 扩展操作符(Spread oper...

2019-12-23 20:30:33 211

原创 一零一、JavaScript的数组操作合集

数组的并集,交集,差集的实现现在有两个数组 arr1 和 arr2let arr1 = [1,2,3,4,4]let arr2 = [3,4,5,6,7]1.数组的并集:let union = new Set([…arr1,…arr2])2.数组的交集let intersect = new Set([…arr1].filter(item => arr2.has(item)...

2019-12-02 11:58:30 152

原创 九六、Javascript十大常用设计模式

Javascript十大常用设计模式一、工厂模式二、单体模式三、模块模式四、代理模式五、职责链模式六、命令模式七、模板方法模式八、策略模式九、发布订阅者模式十、中介者模式一、工厂模式工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。(工厂模式是为了解决多个类似对象声明的问题;也就是为了解决实列化对象产生重复的问题。)优点:能解...

2019-10-19 16:54:36 277

原创 三五、Git上传代码(上传、下载、修改账号、生成SSH公钥)

配置git(第一次用)配置用户名 : git config –global user.name “你的名字或昵称”配置邮箱 : git config –global user.email “你的邮箱”查看配置信息: git config –list一 本地上传1、git初始化一个仓库 命令:git init;2、先把代码添加到暂存区(就相当于放到仓库门口) 命令:git a

2017-06-30 11:32:55 1745

原创 一一八、项目难点总结

网页版Excelweb worker 多线程计算//主线程 main.jsvar worker = new Worker("worker.js");worker.onmessage = function(event){ // 主线程收到子线程的消息};// 主线程向子线程发送消息worker.postMessage({ type: "start", value: 12345});//web worker.jsonmessage = function(even

2020-09-15 11:01:42 61

转载 一一六、React Context(上下文) 作用和使用

ContextContext 通过组件树提供了一个传递数据的方法,从而避免了在每一个层级手动的传递 props 属性。APIReact.createContext:创建一个上下文的容器(组件), defaultValue可以设置共享的默认数据const {Provider, Consumer} = React.createContext(defaultValue);Provider(生产者): 用于生产共享数据的地方,value:放置共享的数据。<Provider value

2020-08-08 10:04:29 138

原创 一一七、react Hooks实现forceUpdate

如果你的render()方法依赖于一些其他的数据,你可以告诉React组件需要通过调用forceUpdate()重新渲染。调用forceUpdate()会导致组件跳过shouldComponentUpdate(),直接调用render()。这将触发组件的正常生命周期方法,包括每个子组件的shouldComponentUpdate()方法。forceUpdate就是重新render。有些变量不在state上,当时你又想达到这个变量更新的时候,刷新render;或者state里的某个变量层次太深,更新的时.

2020-07-27 20:52:22 826

转载 一一五、手写vue3 reactivity

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue3 reacti

2020-07-23 19:12:34 75

转载 一一四、Vue 3 核心原理 -- reactivity实现

vue 3 一个简单的例子<template> <button @click="increment"> Count is: {{ state.count }}, double is: {{ state.double }} </button> <button @click="addOtherCount"> otherCount is: {{ otherCount }}, double is: {{ otherDouble }}

2020-07-23 14:33:07 76

原创 一一三、获取目标月份第一天零点零分零秒的时间戳

//时间戳转换function formatDateTime(inputTime) { let date = new Date(inputTime); let y = date.getFullYear(); let m = date.getMonth() + 1; m = m < 10 ? ('0' + m) : m; let d = date.getDate(); d = d < 10 ? ('0' + d) : d; let h = date.getHours(

2020-07-10 16:50:58 107

原创 一一二、react Hooks 父组件调用子组件方法

子组件// ./hook/Loginimport React, { useState, useImperativeHandle } from 'react';export function Login({ childRef }) { const [ name, setName ] = useState('') const [ email, setEmail ] = useState('') useImperativeHandle(childRef, () => ({ ge

2020-07-09 18:40:23 530

原创 一一一、算法与数据结构

React组件通讯链表链表的创建以及增删改查操作链表链表的创建以及增删改查操作/*======定义结构======*/let node = function(element) { this.element = element this.next = null}let linkedList = function() { this.head = new node('head') this.find = find this.insert = insert this.updat

2020-06-07 21:09:17 82

原创 一一零、前端代码优化

JavaScript判断优化if( falg ){someMethod()}// 优化后if( falg ){ someMethod()}if( code === '202' || code === '203' || code === '204' ){someMethod()}// 优化后if( ['202','203','204'].includes(code) ){someMethod()}

2020-05-13 14:38:13 66

原创 一零九、react常⻅组件优化技术

定制组件的shouldComponentUpdate钩⼦通过shouldComponentUpdate优化组件import React, {Component} from "react";export default class CommentList extends Component { constructor(props) { super(props); th...

2020-04-14 21:59:01 77

原创 一零八、react Hooks

Hook是React16.8⼀个新增项,它可以让你在不编写 class 的情况下使⽤ state 以及其他的 React 特性。Hooks的特点:使你在⽆需修改组件结构的情况下复⽤状态逻辑可将组件中相互关联的部分拆分成更⼩的函数,复杂组件将变得更容易理解更简洁、更易理解的代码状态钩⼦ State HookHookPage.jsuseState返回一对:当前状态值(dat...

2020-04-14 21:41:40 101

原创 一零七、React组件通讯

React组件通讯1 props2 props 升级版3 Provider,Consumer和Context4 EventEmitter5 路由传参6 onRef7 ref8 redux9 MobX10 flux11 hooks12 slot对比redux , mobx和flux对比1 props//子组件import React from "react";import PropTypes...

2020-03-20 19:34:36 84

原创 一零六、原理篇

1 vue或者react render原理(动态渲染)vue //模板 var login = { template: '<h1>这是登录组件</h1>' } // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: {}...

2020-02-19 21:45:57 173

原创 一零五、GraphQL介绍&node中使用

1 GraphQL 介绍接口开发方式RESTful 接口问题GraphQL概述RESTful 和 GraphQL 对比2. GraphQL 快速体验3. GraphQL服务端开发基于Node.js的GraphQL的开发基于apollo-server开发对象类型定义规则对象类型定义与字段基本参数内置类型输入类型数据解析规则详解resolver函数参数用法resolver函数对接数据源4. Grap...

2020-02-06 22:00:51 207

原创 一零四、前端性能优化详解

5-1 前端性能优化介绍根据当今网络上的所有主要浏览器公司的说法,如果每个网站都想要排名靠前,表现良好并确保客户满意,那么每个网站都需要快。毕竟,如果您的网页加载速度很慢,那么您会立即增加客户开始在其他地方搜索信息,而不是坚持下去的风险。这也是为什么很多公司去找专门的技术人员来做SEO(Search Engine Optimization),即搜索引擎优化。 因为,页面的加载会影响到爬虫的爬...

2020-01-19 18:18:06 103

原创 一零二、Vue中自定义emoji表情包

最近有需求要在后台管理支持自定义的emoji输入,记录一下开发过程。1. 表情包命名2. 定义表情包符合3. 编写emoji组件4. 页面中使用5. emoji展示1. 表情包命名表情包数量太多,命名到手抖 推荐使用神器 Everything 2. 定义表情包符合多端使用的话需要统一表情包的符号{ "xdx_001": "[-|xdx_001|-]" ...

2019-12-18 20:12:23 1507 2

转载 一零零、Promise.resolve()详解

Promise.resolve等价于下面的写法有时需要将现有对象转为 Promise 对象,Promise.resolve方法就起到这个作用。Promise.resolve('foo')// 等价于new Promise(resolve => resolve('foo'))Promise.resolve方法的参数分成四种情况。参数是一个 Promise 实例如果参数是 P...

2019-11-28 15:57:56 422

原创 九九、vue组件的依赖注入

子组件可以用this.parent访问父组件的实例,孙子组件可以用this.parent访问父组件的实例,孙子组件可以用this.parent访问父组件的实例,孙子组件可以用this.parent.parent来访问,那曾孙子组件呢,是不是要写很多个parent来访问,那曾孙子组件呢,是不是要写很多个parent来访问,那曾孙子组件呢,是不是要写很多个parent。如果父组件下很多个子孙组件...

2019-11-21 20:04:20 68

原创 九八、vue15种组件通讯(传值)

vue14种组件通讯1. props2. $emit3. vuex4. attrs和listeners5. provide和inject6. children7. $refs8. $root9. .sync10. v-slot11. EventBus12. broadcast和dispatch13. 路由传参14. Vue.observable1. props这个应该非常属性,就是父传子的属...

2019-10-22 11:31:30 101

原创 九七、Vue开发技巧--你不知道的vue

Vue开发技巧--你不知道的vue1.require.context()2.watch2.1常用用法2.2 立即执行2.3 深度监听3. 14种组件通讯3.1 props3.2 $emit3.3 vuex3.4 attrs和listeners3.5 provide和inject3.6 children3.7 $refs3.8 $root3.9 .sync3.10 v-slot3.11 Event...

2019-10-21 20:37:08 159

原创 九五、使用node+koa2+selenium-webdriver爬虫并转存到mysql数据库

问题一:sequelizehttps://www.jianshu.com/p/1cc6b0dcde56问题二:利用sequelize-auto对照数据库自动生成相应的models参考:https://blog.csdn.net/TQFtqf136/article/details/73498733问题三:SequelizeDatabaseError: Unknown column ‘cr...

2019-09-05 16:37:24 94

原创 九四、node+selenium-webdriver爬虫高级

爬虫高级使用Selenium库爬取前端渲染的网页反反爬虫技术Selenium简介官方原文介绍:Selenium automates browsers. That’s it! What you do with that power is entirely up to you. Primarily, it is for automating web applications for t...

2019-09-05 16:36:41 1420

原创 九二、node+cheerio爬虫学习

问题一:sequelizehttps://www.jianshu.com/p/1cc6b0dcde56问题二:利用sequelize-auto对照数据库自动生成相应的models参考:https://blog.csdn.net/TQFtqf136/article/details/73498733问题三:SequelizeDatabaseError: Unknown column ‘cr...

2019-09-03 17:50:55 162

原创 九一、koa2使用简介

第一章 koa入门与使用简介Koa 是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数,Koa 帮你丢弃回调函数,并有力地增强错误处理。 Koa 并没有捆绑任何中间件, 而是提供了一套优雅的方法,帮助您快速而愉快地编写服务端应用程序。新下一代, 超前新的...

2019-09-03 17:44:45 410

原创 九十、vue-cli3中使用sass全局变量

一、编写全局scss变量/src/common/global.csss$c-bg: #FF3259;$c-text-w: #ffffff;$c-text-E: #ECECEC;$c-content-w: 1205PX;$c-content-m: 375px;二、vue.config.js引入全局scssvue.config.jsmodule.exports = { ...

2019-08-12 12:12:21 1498

原创 八九、egg.js进阶

Debug添加 npm scripts 到 package.json:{ "scripts": { "debug": "egg-bin debug" }}egg-bin 会智能选择调试协议,在 8.x 之后版本使用 Inspector Protocol 协议,低版本使用 Legacy Protocol。同时也支持自定义调试参数:egg-bin debug --inps...

2019-08-06 17:55:34 475

转载 八八、egg.js入门简介

Egg是什么?由阿里巴巴团队开源的一套基于koa的应用框架,已经在集团内部服务了大量的nodejs系统。Egg.js 为企业级框架和应用而生,我们希望由 Egg.js 孕育出更多上层框架,帮助开发团队和开发人员降低开发和维护成本。注:Egg.js 缩写为 Egg设计原则Egg 的插件机制有很高的可扩展性,一个插件只做一件事。(比如 Nunjucks 模板封装成了 egg-view...

2019-08-03 18:44:14 716

原创 八七、Node.js事件循环与多进程

nodejs事件循环与多进程why事件循环对于深入理解nodejs异步至关重要fs, net,http,events事件循环是企业面试中的最高频考题之一能驾驭nodejs多进程是一名资深前端工程师的标志介绍了解事件循环的概念学习浏览器中的事件循环机制学习nodejs中的事件循环机制了解多进程,多线程之间的区别学习nodejs中的多进程并使用cluster来开启多进...

2019-08-02 10:08:16 79

原创 八六、Linux 服务器+Nginx服务简介

Linux 服务器Linux是操作系统:Linux作为自由软件和开放源代码软件发展中最著名的例子,背靠社区与商业化的使用,使其得到了广泛的应用与发展。Linux无处不在:世界上500个最快的超级计算机90%以上运行Linux发行版或变种,包括最快的前10名超级计算机运行的都是基于Linux内核的操作系统。Linux也广泛应用在嵌入式系统上,如手机(Mobile Phone)、平板电脑(Ta...

2019-07-24 17:41:14 573

原创 八五、vue进阶之路(Vue.extend,Vue.component,Vue.use)

Vue.extend,Vue.component,Vue.use

2019-06-05 10:47:00 2156

原创 八四、MVVM框架进阶与实现(手动实现一个简易版vue)

MVVM框架介绍M(Model,模型层 ),V(View,视图层),VM(ViewModel,视图模型,V与M连接的桥梁)MVVM框架实现了数据双向绑定当M层数据进行修改时,VM层会监测到变化,并且通知V层进行相应的修改修改V层则会通知M层数据进行修改MVVM框架实现了视图与模型层的相互解耦几种双向数据绑定的方式1 发布-订阅者模式(backbone.js)一般通...

2019-05-14 18:41:35 167

原创 八三、前端自动化-PM2一键部署

PM2一键部署http://pm2.keymetrics.io/PM2是node进程管理工具,可以利用它来简化很多node应用管理的繁琐任务,如性能监控、自动重启、负载均衡等,而且使用非常简单。好处无需通过手工或是ftp的方式把本地代码拷贝到服务器上无需手工启动或是重启远程服务器的Node服务项目的升级及迭代非常方便具有负载均衡功能pm2安装npm i pm2 -g指令...

2019-05-10 16:04:57 290

原创 八二、eslint,stylelint的基本配置使用

代码规范ESLint基本概念官网: https://eslint.org/中文网址: http://eslint.cn/基本概念: javascript代码检测工具,帮助我们统一团队的代码风格 优势: 1、内置很多检查规则,同时支持自定义规则 2、NodeJS开发的,方便安装 可配置的信息: Environments - 指定脚本的运行环境。每种环境都有一组特...

2019-05-10 15:45:24 816

转载 八一、 mpvue-使用介绍(美团团队开发的语法类似 vue的小程序的前端框架)

1. mpvue-介绍mpvue 是美团团队开发的语法类似 Vue.js 的小程序的前端框架官网开发文档1.1. 主要特性主要有以下特性彻底的组件化开发能力:提高代码复用性完整的 Vue.js 开发体验方便的 Vuex 数据管理方案:方便构建复杂应用快捷的 webpack 构建机制:自定义构建策略、开发阶段 hotReload支持使用 npm 外部依赖使用 Vue.js...

2019-05-10 10:45:40 504

原创 八十、Taro使用简介(Taro 是一套遵循 React 语法规范的 多端开发 解决方案---微信/百度/支付宝/字节跳动小程序、H5、React-Native 等)

Taro 是一套遵循 React 语法规范的 多端开发 解决方案。现如今市面上端的形态多种多样,Web、React-Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信/百度/支付宝/字节跳动小程序、H5、React-Native 等)运行的代码。

2019-05-09 10:36:35 1067

Vue源码分析.xmind

Vue源码分析Vue源码分析Vue源码分析Vue源码分析Vue源码分析Vue源码分析Vue源码分析Vue源码分析

2020-03-31

pyCharm、webStorm主题+设置

做为一个程序员,一款漂亮的编译器可以使你的代码赏心悦目 注:引入默认可能是mac的快捷键 需要改成windows或者对应自己顺手的快捷键

2018-07-23

空空如也

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