- 博客(36)
- 收藏
- 关注
RSS订阅原创 fiber
fiber由于render函数递归执行，如果项目变得庞大后，会有卡顿，requestIdleCallback可以利用浏览器的业余时间，把任务分成一个个的小任务，然后利用浏览器空闲时间来做diff，如果当前有任务来了，比如用户的点击或者动画，会先执行，然后空闲后，回到当前任务继续执行未完成的任务；#fiber数据结构fiber遍历过程：自上而下，自左至右；先找子元素 -> 再找兄弟元素 -> 再找父元素；#redux面试相关#redux由以下组件组成：Action：这是一个用来描
2021-05-13 14:44:31
155
原创 j s 实现视频播放
1.具体参数videoBanner：视频封面videoUrl：视频链接地址videoType：视频类型（优酷视频填写iframe）2.实例<div class="视频元素名称" data-bg-original="{{{videoBanner}}}" data-toggle="lazy-loading" data-src="{{videoUrl}}" {{#if(videoType === 'true' || videoType === true)}} data-typ
2021-03-10 16:39:00
201
原创 JS数组reduce()方法详解及高级技巧
reduce 方法对数组中的所有元素调用指定的回调函数。该回调函数的返回值为累积结果，并且此返回值在下一次调用该回调函数时作为参数提供。返回值通过最后一次调用回调函数获得的累积结果。异常当满足下列任一条件时，将引发 TypeError 异常：callbackfn 参数不是函数对象。数组不包含元素，且未提供 initialValue。备注如果提供了 initialValue，则 reduce 方法会对数组中的每个元素调用一次 callbackfn 函数（按升序索引顺序）。如果未提供 in
2021-03-10 16:04:46
1994
原创 js 把dom导出excel文件
js 把dom导出excel文件导入npm install --save xlsx引入import XLSX from 'xlsx';使用export default function download(json, fileName) { const type = 'xlsx'//定义导出文件的格式 var tmpDown;//导出的内容 var tmpdata = json[0]; json.unshift({}); var keyMap = []; //获取keys
2020-12-08 13:11:41
483
原创 地址栏获取url参数及在url后添加参数
地址栏获取url参数及在url后添加参数 const ind = Request('solutionsInd'); let newurl = updateQueryStringParameter(window.location.href, 'solutionsInd', ind); window.history.replaceState({ path: newurl }, '', newurl); function updateQueryString
2020-12-01 14:39:37
3000
原创 关于门户的前端权限控制
关于门户的前端权限控制前沿：我所理解的门户Portal就是一个入口, 可快速整合应用入口，用来统一账号管理、统一认证登录，打破信息孤岛等，做统一的权限管理，也可以实现单点登录 SSO。早期的MVC时代，web应用其实就有通过权限去控制页面、菜单、按钮等的显示和隐藏，只不过呈现方式不同，大多以php和jsp等为主，随着前后端分离后，前端也成了权限控制的扛把子，主要是从以下这几个角度去实现，路由层面、视图层面以及接口层面1.路由层面一般SPA应用结合vue-router和vuex实现完成的一套路由体系，主
2020-12-01 10:58:29
431
原创 防抖函数
防抖函数function debounce(fn, delay) {// 维护一个 timer，用来记录当前执行函数状态let timer = null;return function() {// 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量let context = this;let args = arguments;// 清理掉正在执行的函数，并重新执行clearTimeout(timer);timer = setTimeout(function() {f
2020-12-01 10:39:50
97
原创 节流函数
节流函数function throttle(func, wait, options) {let timeout, context, args, result;let previous = 0;if (!options) options = {};const later = function() {previous = options.leading === false? 0: Date.now();timeout = null;result = func.apply(context, arg
2020-12-01 10:37:30
798
原创 jCountdown倒计时插件jQuery
需要引入的文件：在需要插入倒计时的位置添加以下代码：显示倒计时需要的js代码：$(function(){var b = new Date;var b = -b.getTimezoneOffset() / 60;var i = ‘2015__regexoperators___/02/18 00:00:00’;var config = {timeText: i, //倒计时时间timeZone: b, //时区style: “flip”, //显示的样式，可选值有flip,slide
2020-07-01 12:32:38
408
原创 vue-devtools插件
安装git clone https://github.com/vuejs/vue-devtools下载依赖cd vue-devtoolnpm install修改manifest.json文件vue-devtools\shells\chrome把"persistent":false改成true运行npm run build扩展Chrome插件Chrome浏览器 >...
2019-08-28 14:24:09
130
原创 npm 安装React Devtools调试工具
chrome浏览器进行插件安装。去git上下载react-devtools文件到本地git clone https://github.com/facebook/react-devtools.git进入react-devtools文件夹，用npm安装依赖，这里推荐临时使用淘宝镜像，快速一点。npm install切换分支git checkout v3yarn install或者 ...
2019-08-28 14:23:07
420
原创 for-editor | 一款基于React的Markdown编辑器插件
功能支持简体中文、英语移动端适配实时预览行号、快捷插入标签等教程安装npm install for-editor -S使用import React, { Component } from 'react'import ReactDOM from 'react-dom'import Editor from 'for-editor'class App extends Co...
2019-08-24 14:55:01
1688
原创 Vue 生命周期的钩子函数
生命周期的钩子函数（写在方法的下面，一共有11个）1.vue的整个生命周期的特定时刻，自动调用的函数2.beforeCreate 实例创建之前调用， 数据没有挂载，不能访问数据vue实例初始化的时候就被执行（数据加载之前执行的一个函数，拿不到data里面的数据）3.created 实例创建之后调用,能访问、修改数据，单修改数据不会触发updated函数 在这里可以向服务器请求数据，（也可...
2019-08-23 08:48:41
421
原创 vs code的常用插件
vs code的常用插件名称 功能Auto Close Tag 自动闭合HTML标签Auto Import Typescript 自动import提示Auto Rename Tag 修改HTML标签时，自动修改匹配的标签Beautify css/sass/scss/less css/sass/less格式化Better Comments 编写更加人性化的注释Bookmarks 添加行...
2019-08-22 20:34:06
343
原创 Vue 优缺点
轻量级框架只关注视图层,是一个构建数据的视图集合,大小只有几十kb简单易学国人开发,中文文档,不存在语言障碍,易于理解和学习双向数据绑定保留了angular的特点在数据操作方面更为简单组件化保留了react的优点实现了html的封装和重用,在构建单页面应用方面有着独特的优势视图,数据,结构分离是数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作虚拟...
2019-08-22 20:18:59
2748
原创 Quill-强大的富文本编辑器
Github地址： https://github.com/BingKui/QuillChineseDocquil源码Gitbook地址：https://bingkui.gitbooks.io/quill/content/Quil中文文档npm install [email protected]引入.css 在Vue 可以放在main.js ，在react 放到app在 componentDi...
2019-08-20 14:46:25
7052
原创 react富文本编辑器
首先安装两个插件使用的代码如下import React from 'react'import {Button,Card,Modal} from 'antd'import {Editor} from 'react-draft-wysiwyg'import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'import draftjs f...
2019-08-19 17:08:10
1457
原创 数组 总结
改变原数组的方法删除类型 push pop shift unift splice sort类数组 变为数组获取多个元素 类数组函数形参集合 arguments1、Array.from 方法用于将两类对象转为真正的数组： （1）类似数组的对象（dom 集合和参数arguments） (2)可遍历（iterable）的对象（包括ES6 新增的数据结构Set 和Map）...
2019-08-18 20:41:53
126
原创 linux下安装 node + express
sudo su root #切换到root帐号cd / #进入根目录wget https://nodejs.org/dist/v8.11.4/node-v8.11.4-linux-x64.tar.xz #在根目录下 下载nodejs安装包tar xvf node-v8.11.4-linux-x64.tar.xz #解压mv node-v8.11.4-linux-x64 node-v8....
2019-08-17 11:06:31
514
原创 redux
redux文档地址文档：https://redux.js.org/中文文档：https://www.redux.org.cn/只是一个状态存储，可预测，可以用在express，koa，vue，readuxRedux 是 JavaScript 状态容器，提供可预测化的状态管理安装：通过yarnyarn add reduxyarn add redux-thunkyarn add re...
2019-08-16 10:25:14
209
原创 Git 分布式版本控制系统
分支命名规则1.主分支：master2.CICD： autoDeploy3.开发分支：develop4.功能分支：feature-分支名称/功能名称(例： git checkout -b feature-autoMLlist)5.分支发布：release-日期6.bug 分支修复：bugfix-日期git 项目版本控制：跟踪记录项目开发的过程git是一个开源的分布式版本控制系统，可...
2019-08-16 09:49:44
111
原创 object 的方法
Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。同名属性会替换Object.create(parent, {z : { writable:true, configurable:true, value:“newAdd”} })使用指定的原型对象及其属性去创建一个新的对象Object.defineP...
2019-08-16 09:36:37
256
原创 开发和生产环境的构建配置差异
开发和生产环境的构建配置差异我们在日常的前端开发工作中，一般都会有两套构建环境：一套开发时使用，构建结果用于本地开发调试，不进行代码压缩，打印debug 信息，包含sourcemap 文件；另外一套构建后的结果是直接应用于线上的，即代码都是压缩后，运行时不打印debug信息，静态文件不包括sourcemap 的。有的时候可能还需要多一套测试环境，在运行时 直接进行请求mock 等工作。we...
2019-08-16 09:35:07
965
原创 高阶组件
1.高阶组件:组件间的公用功能抽象（设计模式）2.高阶组件的定义:（1）是一个函数(2)接受一个组件返回一个新的组件作用：组件间的公用功能抽象3.定义一个公共的高阶组件 1.先引入React import React, { Component } from ‘react’2.定义一个函数接受第一个参数(注意:参数的首字母要大写，传入的组件名称)HocComponent第二个参数传过...
2019-08-16 09:00:09
403
原创 react 轮播图
1、yarn add [email protected]、import ReactSwipe from ‘react-swipe’;3、 4、 swipes的配置let opt = { auto: 1000, autoPlay: true, 是否开启自动播放 currentPoint: 1, 初始位置，默认从0即第一个元素开始 distan...
2019-08-16 08:58:14
108
原创 react-router
1.安装npm i react-router-dom跳路由的方法(1).NavLink正在热映state传参同query差不多，只是属性不一样，而且state传的参数是加密的，query传的参数是公开的，在地址栏query方法传参<Link to={{ pathname: ' /user' , query : { day: 'Friday' }}}>获取的方式t...
2019-08-16 07:59:33
122
原创 【网络协议笔记】TCP/UDP 协议整理
概要运输层协议为运行在不同主机上的应用 进程 之间提供了 逻辑通信（logic communica-tion）功能。运输层是在 端系统中 而不是在路由器中实现的。在发送端，运输层将从发送应用程序进程接收到的 报文 转换成运输层分组，称为 报文段（segment）。实现的方法（可能）是将应用报文划分为较小的块，并为每块加上一个 运输层首部 以生成运输层报文段。运输层将报文段传递给网络层，...
2019-08-15 15:51:34
693
原创 Java多线程：彻底搞懂线程池
熟悉Java多线程编程的同学都知道，当我们线程创建过多时，容易引发内存溢出，因此我们就有必要使用线程池的技术了。最近看了一些相关文章，并亲自研究了一下源码，发现有些文章还是有些问题的，所以我也总结了一下，在此奉献给大家。目录1 线程池的优势总体来说，线程池有如下的优势：（1）降低资源消耗。通过重复利用已创建的线程降低线程创建和销毁造成的消耗。（2）提高响应速度。当任务到达时，任务可以不...
2019-08-15 15:08:45
66
原创 网络爬虫
爬虫能干什么搜索引擎抢票、刷票等自动化软件部分破解软件金融等行业数据挖掘、分析数据来源其他爬虫很简单语言的选择两种语言的小demo爬虫也不简单ip、浏览器头(User-Agent)、和cookie限制需登录的验证码限制、参数限制JavaScript渲染/ajax加密网络爬虫的类型: 通用网络爬虫，聚焦网络爬虫，增量式网络爬虫。通用网络爬虫又叫全网爬虫，也就是网络爬虫爬...
2019-08-15 14:57:17
408
原创 Nodejs垃圾回收内存管理实践
Nodejs中的GCNode.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，这是来自 Node.js 官网的一段话，所以 V8 就是 Node.js 中使用的虚拟机，在之后讲解的 Node.js 中的 GC 其实就是在讲 V8 的 GC。Node.js 与 V8 的关系也好比 Java 之于 JVM 的关系，另外 Node.js 之父 Ryan Dahl 在选择...
2019-08-15 14:55:08
1012
原创 React 服务端渲染
服务端渲染的优势在于：由中间层( node端 )为客户端请求初始数据、并由node渲染页面什么是服务器端渲染使用 React 构建客户端应用程序，默认情况下，可以在浏览器中输出 React 组件，进行生成 DOM 和操作 DOM。React 也可以在服务端通过 Node.js 转换成 HTML，直接在浏览器端“呈现”处理好的 HTML 字符串，这个过程可以被认为 “同构”，因为应用程序的大部分...
2019-08-15 14:54:05
298
原创 浏览器缓存机制全攻略
web缓存是指一个web资源（如html页面，图片，js，数据等）存在于web服务器和客户端（浏览器）之间的副本。缓存会根据进来的请求保存输出内容的副本；当下一个请求来到的时候，如果是相同的URL，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向源服务器再次发送请求。比较常见的就是浏览器会缓存访问过网站的网页，当再次访问这个URL地址的时候，如果网页没有更新，就不会再次下载网页，而是直接...
2019-08-15 14:51:08
177
原创 TypeScript
什么是 TypeScriptTypeScript 简称 TS。TypeScript 是 JavaScript 的超集，就是在 JavaScript 上做了一层封装，封装出 TypeScript 的特性，当然最终代码可以编译为 JavaScript。TypeScript作为JavaScript的超集，它的语法更严格,TypeScript能够和JavaScript混合使用TypeScript是一...
2019-08-15 14:29:18
269
原创 Webpack
工作原理概括基本概念在了解Webpack原理前，需要掌握以下几个核心概念，以方便后面的理解：Entry：入口，Webpack执行构建的第一步将从Entry开始，可抽象成输入。Module：模块，在Webpack里一切皆模块，一个模块对应着一个文件。Webpack会从配置的Entry开始递归找出所有依赖的模块。Chunk：代码块，一个Chunk由多个模块组合而成，用于代码合并与分割。Lo...
2019-08-15 14:27:04
122
原创 gulp原理
1.gulp是什么？前端构建工具，gulp是基于Nodejs，自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。流，Node将几乎所有I...
2019-08-15 14:23:53
487
原创 Angular
Angular服务:Angular服务是单例对象，在应用程序的生命周期中只实例化一次。它们包含在应用程序的整个生命周期中维护数据的方法，即数据不会得到刷新，并且一直可用。服务的主要目标是组织和共享业务逻辑、模型或数据，以及具有不同Angular应用程序组件的功能。使用服务的一个例子是将数据从一个控制器传输到另一个定制服务。为什么要用Angular来服务呢?关注点分离是AngularAngu...
2019-08-12 12:02:29
438
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人