- 博客(125)
- 资源 (10)
- 收藏
- 关注
RSS订阅原创 一眼就懂的 React 调度算法
react 的调度，采用优先级调度（Priority），代码量大且复杂，看了下 fre 中的调度实现（最短剩余时间优先），比较精简且适合快速学习。问题产生：GUI渲染线程与JS引擎是互斥的，所以需要避免 js 长时间占用导致页面绘制卡顿。调度核心：频繁发起一个宏任务，根据事件循环机制避免 js 长时间占用（这里需要 fiber 的架构模式）。代码实现：const queue = []// react中为 5ms，fre中为16ms 是多少目前看无所谓 const threshold .
2021-01-25 15:29:43
683
原创 suspense源码分析
Suspense 的核心概念与 error boundaries 非常相似，error boundaries 在 React 16 中引入，允许在应用程序内的任何位置捕获未捕获的异常，然后在组件树中展示跟错误信息相关的组件。以同样的方式，Suspense 组件从其子节点捕获任何抛出的Promises，不同之处在于对于 Suspense 我们不必使自定义组件充当边界，Suspense 组件就是那个边界；而在 error boundary中，我们需要为边界组件定义(componentDidCatch)方法。-.
2020-09-01 10:22:47
521
原创 React16 diff全面讲解
本文较长，请耐心读完，相信我定有收货，如果有错误欢迎指正。reconcileChildren 这个方法做的事情是对于刚创建的组件，会创建新的子 Fiber 节点，update 组件，将当前组件与该组件在上次更新时对应的 Fiber 节点比较（也就是俗称的 Diff 算法），将比较的结果生成新 Fiber 节点。function reconcileChildren(current, workInProgress, nextChildren, renderExpirationTime) { // 首.
2020-08-09 10:11:37
2344
原创 react实现tree组件
一： 数据量小的结构index.less---------------------li > ul{ max-height: 0; transition: all .2s; overflow: hidden;}li.cur > ul{ max-height: 500px; transition: max-height .4s;}cr...
2019-09-06 15:07:32
5567
原创 js试题整理
洗牌：function shuffle(arr) { let i = arr.length; while (i) { let j = Math.floor(Math.random() * i--); [arr[j], arr[i]] = [arr[i], arr[j]]; }}柯力化：function add() { // ...
2019-09-01 13:08:45
496
原创 js虚拟DOM-DIFF算法实现
test.html:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>虚拟dom</title> </head> <body> <div id="root"></div> </bod...
2019-08-26 01:30:18
1459
4
原创 webpack 热更新源码实现
一、热更新原理服务端：1.启动webpack-dev-server服务器2.创建webpack实例3.创建Server服务器4.添加webpack的done事件回调 编译完成向客户端发送消息（hash和描述文件oldhash.js和oldhash.json）5.创建express应用app6.设置文件系统为内存文件系统7.添加webpack-dev-middleware中间件 ...
2019-08-12 16:24:54
3831
2
原创 实现一个React From组件
简单模拟 antd 的 form 组件实现。先看下如何使用：import React from 'react';import Form from '../components/Form/From';//引用高阶组件@Form.formCreateexport default class FromDemo extends React.Component { handleSubmi...
2019-07-31 18:36:29
1478
原创 vuex源码实现
let Vue;/** * [自定义foreach循环] * @author suzhe * @DateTime 2019-07-28T11:12:17+0800 * @param {[type]} obj [description] * @param {[type]} classback [de...
2019-07-28 17:40:42
271
原创 小程序云api封装
export const app = getApp();const db = app.globalData.dbconst tip = (text) => { wx.showToast({ title: text, 'icon': 'none', duration: 2000 })}//查找export const dbGet = (param)...
2019-07-25 16:30:12
997
原创 react-redux简易实现
通过context传递数据，从provider组建中的props获取state，传给connect 高阶组件，使用高阶组件连接connect.jsimport React, { Component } from 'react'import PropTypes from 'prop-types'export const connect = (mapStateToProps, mapDisp...
2019-07-24 18:46:04
196
原创 react封装form受控组件
页面中多个表单，多个输入框，统一封装处理，formCreate为一个高阶组件import React from 'react';export const formCreate = WrappedComponent => class extends React.Component { constructor(){ super(); this.state={fie...
2019-07-24 11:57:21
1119
原创 redux-saga简易实现
index.js：import { channel } from './channel'//promise判断const isPromise = p => { return typeof p.then == 'function' && typeof p.catch == 'function'}function createSagaMiddelware(...
2019-07-18 17:44:10
317
原创 web component快速使用
Web Components是一个浏览器的新功能，提供了一个面向web包括下面几个方面标准的组件模型。你可以认为Web Components是一个可复用的用户接口部件，属于浏览器的一部分，所以不需要一些额外的例如jQuery或者Dojo之类的工具库。一个存在的Web Components的使用完全不需要写代码，仅仅需要在HTML中加一个import 语句就可以了。Web Compone...
2019-07-12 01:19:48
797
原创 js数组和树结构数据相互转换
数组转树结构采取递归和非递归两种方式，树结构转扁平化数组采取深度优先遍历（递归和非递归两种方式）和广度优先遍历实现。let arr =[ {id:2,name:'部门B',parentId:0}, {id:3,name:'部门C',parentId:1}, {id:1,name:'部门A',parentId:2}, {id:4,name:'部门D',parentI...
2019-07-10 17:06:04
15584
2
原创 vue通信的N种方式
组件通信可以分为父子组件通信、非父子组件通信，可以是数据的传递，也可以是方法的传递，先介绍数据的相互传递，再介绍方法的相互传递。父组件到子组件传递数据：一、通过props，父组件可以传递动态和静态数据。//父组件<template> <div id="app"> //第一种静态数据 <HelloWorld msg="我是父组件的数据"/> ...
2019-06-26 01:43:09
1081
原创 js大文件分片上传
<div class="btn uploadBtn right"> <form enctype="multipart/form-data"> <span>上传文件</span> &...
2019-05-31 16:39:40
2366
原创 js封面图片上传插件
/** * 上传插件 * @param {Object} op */function UploadCover(op){ this.cont = document.getElementsByClassName(op.ele); this.upSrc = op.src; this.formparam = op.formdata; this.init();}UploadCover....
2019-05-31 16:36:38
1213
原创 实现简易的redux
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>redux</title> </head> <body> <div id='count'></div> </body><...
2019-03-28 18:12:41
280
原创 canvas拖尾效果
canvas实现粒子的拖尾效果/** * @Author SuZhe * @DateTime 2019-03-15 * @desc 兼容 requestAnimFrame * @return {[Function]} requestAnimFrame不兼容的浏览器使用定时器代替 */window.requestAnimFrame = (function(){ ...
2019-03-27 10:25:59
1936
原创 最少的代码实现3d轮播图
利用css3d转换，通过css控制和js控制节点的移除增加实现一个简单的轮播图<div class="swiperCont clearx" id="stage"> <div class="list">1</div> <div class="list" style="background: chartreuse;">2</div...
2019-03-22 17:45:30
789
原创 js 中间件
//function Middleware(){// this.cache = [];//}//Middleware.prototype.use = function(fn){//if(typeof fn !== 'function'){// throw 'middleware must be a function';//}//this.cache.push(fn);//retu...
2019-03-13 17:17:26
1117
原创 微信端音频插件
/** * @Author SuZ * @DateTime 2018-08-01 * @desc 微信端音频播放插件（pc、手机） * @param {[Object]} window [window] * @param {[Undefined]} undefined [undefined] * @param {[Jquery]} ...
2018-08-22 11:30:19
1289
原创 下拉刷新上拉加载插件
源码：;(function($,window,undefined){ function ScrollUpLoad() { //返回此对象 return new ScrollUpLoad.prototype.init(); } ScrollUpLoad.prototype = { init: function() { ...
2018-06-28 12:15:37
784
原创 js编辑器插件
使用js实现一款简单的编辑器插件，可以实现文字的编辑，图片的上传操作。/** * 自定义编辑器 * @param {Object} id 编辑区 * @param {Object} control 操作区 */function insertImg(id, control, dataparams, fun){ this.bigBox = document.getEl...
2018-06-13 11:23:48
3363
原创 canvas实现折线图插件
适用于手机端的折线图插件，通过canvas实现。 思路就是得到数据值，时间值，先画出x，y坐标轴，然后均分x轴，将时间点绘制上去，然后根据数据值，再求出x,y坐标点，使用lineTo绘制出连续折线图。注释在代码中。/** * @desc 绘制折线图 * @param {Object} defaultParam 配置参数 * @param {Object} id ...
2018-06-06 17:41:41
2666
原创 canvas绘制进度圆环
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><style>#cavas{..
2018-06-04 18:06:35
2832
原创 js实现全景图预览
&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;m
2018-05-31 17:59:01
9709
原创 快应用开发系列（一）
一、前期环境安装准备： 1、安装nodejshttps://nodejs.org/en/2、安装hap-toolkitnpm install -g hap-toolkit在命令行中执行hap -V会输出版本信息表示hap-toolkit安装成功，如下命令所示：hap -V升级hap updatehap update --force 强制升级3、手机安装快...
2018-05-30 18:38:22
4759
原创 nodejs控制台打印图案
var a = [ "┌─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬───┐".cyan, "│~ │!1│@2│#3│$4│%5│^6│&7│*8│(9│)0│_-│+=│ BacSp│".cyan, "├─┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬──┤".cyan, "│Tab │Q │W │E...
2018-05-30 16:27:38
3867
原创 js无new构建对象
/** * @Author QG * @DateTime 2018-05-22 * @desc 省市联动选择插件 * @version [version] * @param {[Object]} forms [select form对象] * @param {[Object]} JQuery [jq] * @param {[Obje...
2018-05-22 16:26:50
662
1
原创 js搜索 高亮匹配关键字，即时展示相关数据
searchCont:function(el,flag){ var _this = this; //空格替换 el.value = el.value.replace(' ',''); //关键字 var searchVal = $(el).val(); //目前只匹配电话高亮 if(...
2018-05-18 12:14:48
4475
原创 微信小程序 父子组件传值通信
微信小程序父组件往子组件传值： 父：<getCode phone="{{phone}}" bind:myevent="onGetCode"></getCode> 通过phone=”{{phone}}”传向子组件 子：properties: { phone: { // 属性名 type: Number, ...
2018-05-11 22:56:13
52884
7
原创 微信小程序 验证码倒计时组件
实现一个小程序的验证码倒计时组件 <view class='listCode'> <view class='list'> <label>验证码</label> <input type='number' bindinput="bindCode" style='width:200rpx;height:98rpx...
2018-04-21 18:36:00
701
原创 table表格编辑保存插件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>蚁呼后台管理系统</title> <style> .layui-table .layui-bt
2018-04-16 11:19:19
1281
原创 gulp前端项目构架自动化配置
default.js:a//开发过程中 监听文件改变 var gulp = require('gulp');gulp.task('default', ['fileinclude','less','connect','cssmin','watch','minifyjs']);less.js:/** * [gulp description] 配置task * @type {[type]} */va...
2018-04-03 18:39:58
356
原创 手机验证码倒计时组件
function Countdown(ele){ this.dom = document.getElementById(ele); this.getBtn = this.dom.getElementsByClassName('get_code'); this.showTime = this.dom.getElementsByClassName('show_time'); this.co...
2018-03-31 20:06:23
566
原创 js复选框插件
<div class="selectList selectQgClass" id="selectQgClass"> <div class="J_selAll selDataList" style="background: #e5e5e5;"> <span class="J_check check"
2018-03-29 15:53:31
1112
原创 js递归数据处理
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="http://apps.bdimg.com/libs/
2018-03-19 19:56:56
2678
原创 正则获取img的src和其他属性
var reg = /<img src="(.*?)" dataUrl="(.*?)">/ig;var needHtml = html.replace(reg, '$2')div编辑器上传图片：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/D...
2018-03-16 16:38:08
2533
react-native项目
2017-09-27
react项目搭建
2017-09-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人