自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

susuzhe

前端进阶之路

  • 博客(124)
  • 资源 (9)
  • 论坛 (2)
  • 收藏
  • 关注

原创 suspense源码分析

Suspense 的核心概念与 error boundaries 非常相似,error boundaries 在 React 16 中引入,允许在应用程序内的任何位置捕获未捕获的异常,然后在组件树中展示跟错误信息相关的组件。以同样的方式,Suspense 组件从其子节点捕获任何抛出的Promises,不同之处在于对于 Suspense 我们不必使自定义组件充当边界,Suspense 组件就是那个边界;而在 error boundary中,我们需要为边界组件定义(componentDidCatch)方法。-.

2020-09-01 10:22:47 62

原创 React16 diff全面讲解

本文较长,请耐心读完,相信我定有收货,如果有错误欢迎指正。reconcileChildren 这个方法做的事情是对于刚创建的组件,会创建新的子 Fiber 节点,update 组件,将当前组件与该组件在上次更新时对应的 Fiber 节点比较(也就是俗称的 Diff 算法),将比较的结果生成新 Fiber 节点。function reconcileChildren(current, workInProgress, nextChildren, renderExpirationTime) { // 首.

2020-08-09 10:11:37 206

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

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

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

原创 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 2924 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 636

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

原创 小程序云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 667

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

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

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

原创 web component快速使用

Web Components是一个浏览器的新功能,提供了一个面向web包括下面几个方面标准的组件模型。你可以认为Web Components是一个可复用的用户接口部件,属于浏览器的一部分,所以不需要一些额外的例如jQuery或者Dojo之类的工具库。一个存在的Web Components的使用完全不需要写代码,仅仅需要在HTML中加一个import 语句就可以了。Web Compone...

2019-07-12 01:19:48 304

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

原创 vue通信的N种方式

组件通信可以分为父子组件通信、非父子组件通信,可以是数据的传递,也可以是方法的传递,先介绍数据的相互传递,再介绍方法的相互传递。父组件到子组件传递数据:一、通过props,父组件可以传递动态和静态数据。//父组件<template> <div id="app"> //第一种静态数据 <HelloWorld msg="我是父组件的数据"/> ...

2019-06-26 01:43:09 478

原创 js大文件分片上传

<div class="btn uploadBtn right"> <form enctype="multipart/form-data"> <span>上传文件</span> &...

2019-05-31 16:39:40 1777

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

原创 实现简易的redux

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>redux</title> </head> <body> <div id='count'></div> </body>&lt...

2019-03-28 18:12:41 122

原创 canvas拖尾效果

canvas实现粒子的拖尾效果/** * @Author SuZhe * @DateTime 2019-03-15 * @desc 兼容 requestAnimFrame * @return {[Function]} requestAnimFrame不兼容的浏览器使用定时器代替 */window.requestAnimFrame = (function(){ ...

2019-03-27 10:25:59 1115

原创 最少的代码实现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 379

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

原创 微信端音频插件

/** * @Author SuZ * @DateTime 2018-08-01 * @desc 微信端音频播放插件(pc、手机) * @param {[Object]} window [window] * @param {[Undefined]} undefined [undefined] * @param {[Jquery]} ...

2018-08-22 11:30:19 867

原创 下拉刷新上拉加载插件

源码:;(function($,window,undefined){ function ScrollUpLoad() { //返回此对象 return new ScrollUpLoad.prototype.init(); } ScrollUpLoad.prototype = { init: function() { ...

2018-06-28 12:15:37 563

原创 js编辑器插件

使用js实现一款简单的编辑器插件,可以实现文字的编辑,图片的上传操作。/** * 自定义编辑器 * @param {Object} id 编辑区 * @param {Object} control 操作区 */function insertImg(id, control, dataparams, fun){ this.bigBox = document.getEl...

2018-06-13 11:23:48 2259

原创 canvas实现折线图插件

适用于手机端的折线图插件,通过canvas实现。 思路就是得到数据值,时间值,先画出x,y坐标轴,然后均分x轴,将时间点绘制上去,然后根据数据值,再求出x,y坐标点,使用lineTo绘制出连续折线图。注释在代码中。/** * @desc 绘制折线图 * @param {Object} defaultParam 配置参数 * @param {Object} id ...

2018-06-06 17:41:41 2256

原创 canvas绘制进度圆环

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;style&gt;#cavas{..

2018-06-04 18:06:35 2582

原创 js实现全景图预览

&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt;&amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;utf-8&amp;quot;&amp;amp;gt; &amp;amp;lt;m

2018-05-31 17:59:01 8170

原创 快应用开发系列(一)

一、前期环境安装准备: 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 3583

原创 nodejs控制台打印图案

var a = [ "┌─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬───┐".cyan, "│~ │!1│@2│#3│$4│%5│^6│&amp;7│*8│(9│)0│_-│+=│ BacSp│".cyan, "├─┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬──┤".cyan, "│Tab │Q │W │E...

2018-05-30 16:27:38 2458

原创 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 462 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 3931

原创 微信小程序 父子组件传值通信

微信小程序父组件往子组件传值: 父:&lt;getCode phone="{{phone}}" bind:myevent="onGetCode"&gt;&lt;/getCode&gt; 通过phone=”{{phone}}”传向子组件 子:properties: { phone: { // 属性名 type: Number, ...

2018-05-11 22:56:13 46274 7

原创 微信小程序 验证码倒计时组件

实现一个小程序的验证码倒计时组件 &lt;view class='listCode'&gt; &lt;view class='list'&gt; &lt;label&gt;验证码&lt;/label&gt; &lt;input type='number' bindinput="bindCode" style='width:200rpx;height:98rpx...

2018-04-21 18:36:00 527

原创 table表格编辑保存插件

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;蚁呼后台管理系统&lt;/title&gt; &lt;style&gt; .layui-table .layui-bt

2018-04-16 11:19:19 1026

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

原创 手机验证码倒计时组件

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 492

原创 js复选框插件

&lt;div class="selectList selectQgClass" id="selectQgClass"&gt; &lt;div class="J_selAll selDataList" style="background: #e5e5e5;"&gt; &lt;span class="J_check check"

2018-03-29 15:53:31 810

原创 js递归数据处理

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="http://apps.bdimg.com/libs/

2018-03-19 19:56:56 1709

原创 正则获取img的src和其他属性

var reg = /&lt;img src="(.*?)" dataUrl="(.*?)"&gt;/ig;var needHtml = html.replace(reg, '$2')div编辑器上传图片:&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/D...

2018-03-16 16:38:08 1988

原创 react fetch请求

首先封装get:(get.js)import 'whatwg-fetch'import 'es6-promise'export function get(url) { // var result = fetch('http://www.mockhttp.cn'+url, { //打包apk时候使用 var result = fetch(''+url, { credentails:

2018-01-09 15:32:17 8671

全景图展示

全景图预览,详情跳转,基于threejs的一款插件,可实现坐标标记,跳转场景

2018-06-02

gulp项目配置文件

gulp文件项目配置,生产配置,开发配置,打包,发布。

2018-05-31

js全景图预览

全景图预览,详情跳转,基于threejs的一款插件,可实现坐标标记,跳转场景

2018-05-31

vue2.0搭建的后台管理

使用vue搭建一个后台管理系统,使用了element,实现数据的增删改查,树状结构,面包屑,功能齐全,涉及知识面广泛

2017-09-29

vue邮件系统

使用vue搭建的一个邮件群发系统,功能不全 前期只是为了学习,项目结构全面,使用了vue-cli搭建的,包含vue-router

2017-09-27

react-native项目

react-native项目学习 Android开发 前期进行项目的搭建以及一些api的调用 后续会补上其他的知识点 现在完成了底部导航 页面跳转 传参 fetch请求

2017-09-27

vue后台管理项目

使用vue搭建一个后台管理系统,使用了element,实现数据的增删改查,树状结构,面包屑,功能齐全,涉及知识面广泛

2017-09-27

react项目搭建

此项目包含了 路由配置(嵌套路由) fetch请求接口 redux状态管理 webpack代理设置 蚂蚁金服ant使用 调用h5+手机摄像头功能,绝对物超所值,页面简单 但是架子稳定 涉及的知识全面

2017-09-27

vue2.0项目

使用vue搭建的一个小项目

2017-05-10

video网络加载速度

发表于 2017-05-09 最后回复 2017-05-10

为什么我的博客积分为0了??

发表于 2017-05-04 最后回复 2017-05-04

空空如也

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

TA关注的人 TA的粉丝

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