- 博客(88)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Vue源码解析——响应式篇
文章来源：我的博客概述这里的响应式，是指作为现在 MVVM 主流思想下的前端框架采用的一种数据驱动视图的方案，即对数据监测，来进行相应的 DOM 更新。而 Vue 实现的方案也是比较特别的，其很巧妙的借助 JS 原生的对对象进行监听的 API 来处理，一定程度上提升了性能，但是也有其缺陷的地方。三大框架的区别Angular: 脏数据检测React: Virtual DOM 对比更新Vue: 借助 Object.defineProperty 对对象进行监听，通过数据变化来通知更新小插曲.
2020-12-21 08:28:07
293
原创 vue页面之间的传递
一般我们只会听到使用父子组件之间的传递但是我们还是会遇到页面之间传递的场景，特别是移动端，如你跳转到一个刷选页面，确认后返回到列表页，根据你的刷选条件进行查询那么需要如何处理这种场景？父子页面如果两个页面是父子页面，即子页面路由是嵌套在父页面的children中的，是通过父页面router-view加载出来的1、那么子页面可以通过this.$parent直接调用到父页面实例// 子页面可以通过$parent触发父页面的方法this.$parent.send('child send')// 父
2020-12-03 22:32:07
417
原创 JS控制并发请求数量
原理：使用一个队列维护所有的请求，然后使用async/await或者promise对请求进行控制， 当前面的请求完成就从队列中出队下一个请求class LimitResquest { constructor(limit) { this.limit = limit this.currentSum = 0 this.requests = [] } request (reqFn) { if (!reqFn || !(reqFn instanceof Functi
2020-11-29 16:36:01
3523
2
原创 循环队列的魅力
场景：有一个售票处，大家需要排队购票，但是呢，售票处最多只能容纳100人，后面的人进入售票处排队等候，需要前面买好票的人离开售票处上面的例子可能不够严谨，总之，就是需要保持100个人，前面出去，后面才能进入先进先出，这里我们第一个想到的便是队列数据结构来解决以上问题1、使用shift+push实现class LoopQueue { Queue = [] size = 0 constructor() { this.Queue = []; } getSize() {
2020-08-09 07:52:44
253
原创 Node是如何引入模块的
Node的模块机制基于CommonJS规范，可以通过require来引入模块引入模块的经历过程路径分析文件定位编译执行模块分为核心模块（Node 提供的模块）和文件模块（用户编写的模块）Node 会对引入过的模块进行缓存，且缓存的是编译和执行后的的对象，如果在此使用相同模块，就会直接使用对象，而不是再编译核心模块的缓存检查 优先于 文件模块的缓存检查路径分析require(path)，path 可以分为核心模块，如 http，fs 等直接读取 Node 已经编译好的二进制代码
2020-08-05 08:18:11
1186
1
原创 初识indexedDB
在大部分前端业务场景下，往往cookie，sessionStorage，localStorage等存储方案就能处理大部分问题。但是随着前端出于性能的考虑，以及业务的复杂程度提升，前端就需要一种能够存储大量数据的方案。于是浏览器推出了2种方案：关系型数据库webSQL和非关系型数据库indexedDB由于W3C的规定，导致WebSQL没有称为规范，所以支持性并不是很好。而indexedDB则不同，其天生就是JS的数据结构，所以更加适合作为前端的存储方案。indexedDB的支持情况首先作为
2020-07-16 22:59:40
556
原创 手动搭建vue的webpack配置注意点
官方文档https://vue-loader.vuejs.org/zh/主要是对vue文件的处理，那么首先提供了vue-loader处理，同时官方也提示了必须同时安装vue-template-compiler，因为webpack识别不了模板，还要必须添加插件添加{ test: /.vue$/, loader: "vue-loader",}plugins: [ // 请确保引入这个插件！ new VueLoaderPlugin()]这样模板对于vue文件的.
2020-06-03 18:17:07
239
原创 如何使用docker和gitlab-runner自动化部署node项目
环境：centos7，该部署使用docker in docker的方式，而不是shell流程：首先在centos中根据Dockerfile搭建一个项目的镜像，并生成启动一个对应容器，然后gitlab-runner通过.gitlab-ci.yml下的docker指令，删除原有容器，启动根目录下的Dockerfile指令，将新的内容复制到原先的目录下，再进行新建镜像和启动容器，这样我们访问到的就是...
2020-04-01 21:51:19
2098
1
原创 centos7安装mysql
1.下载并安装MySQL官方的Yum Repositorywget -i -c http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm2.yum安装Repositoryyum -y install mysql57-community-release-el7-10.noarch.rpm...
2020-03-30 09:50:57
132
原创 使用cnpm.org搭建cnpm私服
首先拉取gitlab上的cnpm.org项目,并安装依赖git clone https://github.com/cnpm/cnpmjs.org.git接着需要修改配置文件（非docker部署），进入项目，找到config文件下的index.jsvi ./config/index.js主要设置以下属性// 是否允许所有人发布，false表示只有管理员才能发布，true表示...
2020-03-30 09:50:49
1201
原创 centos7安装nodejs
首先安装wgetyum install -y wget然后拉取官网node资源wget https://nodejs.org/dist/v11.6.0/node-v11.6.0-linux-x64.tar.xz解压xz -d node-v11.6.0-linux-x64.tar.xz tar -xf node-v11.6.0-linux-x64.tar 然后移动...
2020-03-30 09:50:41
167
原创 centos安装docker
1.yum-utils提供yum-config-manager功能，另外两个是devicemapper驱动依赖的yum install -y yum-utils device-mapper-persistent-data lvm22.设置yum源yum-config-manager --add-repo https://download.docker.com/linux/cento...
2020-03-30 09:50:29
220
原创 JS原生使用Canvas截取图片并下载
HTML部分<body> <div class="wrap" onmousedown="handleMouseDown(event)" onmousemove="handleMouseMove(event)" onmouseup="handleMouseUp(event)" > <img...
2020-02-03 00:55:09
1085
原创 Blob，DataURL和File之间的转换
Blob对象是一个不可变、原始数据的类文件对象File对象继承于Blob，并具有支持用户系统上的文件的拓展功能DataURL是Base64编码，可通过window下的btoa，atob方法来分别做编码和解码DataURL转成File对象/** * @param {String} dataurl 传入的文件base64编码 * @param {String} filenam...
2020-01-29 21:50:00
1751
原创 webpack配合ES6模块提升性能优化
import和export是ES6模块化的内容我们可以通过以下的方式来实现懒加载import('xxx.js').then(({default: x1}) => x())比如下面的例子：// add.jsfunction add(a, b) { console.log("a + b",2222)}export default add// index.j...
2020-01-15 23:30:39
418
原创 webpack对同类型文件的不同打包处理
当我们写webpack的rule匹配规则进行打包时，往往会将一种类型的文件使用只一种打包loader方式当有时候我们需要对同一个文件类型进行两种不同方式的打包处理时，我们可以使用到webpack提供的oneOf{ test: /.svg$/, oneOf: [{ resourceQuery: /inline/, use: 'url-load...
2020-01-14 21:20:59
604
原创 react的context
当我们需要使用到一个数据，需要传递多层的时候，props往往显得心累，而我们又不需要引入redux的时候，可以使用react的context首先使用createContext创建一个一个context，它会有两个方法Provider和Consumer,功能如同字义，一个是提供者，就是数据的发起者，一个是消费者，就是数据的接受者createContext生成的Provider对应Cos...
2020-01-08 22:02:32
166
原创 重新认识一下“闭包”
作用域在提闭包前，少不了作用域的概念，因为闭包就是因为作用域引发的。每个函数都有自己的执行环境，当代码在一个环境中执行时，会创建变量对象的一个作用域链，保证执行环境有权访问当前环境所有的变量和函数的有序访问，如果是在全局环境，那就是全局作用域，如果是在局部环境，那就是局部作用域ES6 之前，在 JS 中是没有块状作用域，不像别的语言{}包裹就是一个块状作用域，但是函数是有作用域的，外部的环...
2020-01-05 16:29:32
172
原创 location.hash让路由跳转继续保持在当前页面
场景：单页面应用开发时，有时候我们会遇到，一个页面弹出一个弹框，覆盖了整个屏幕，但是不是一个新页面，一直在同一个页面，并且没有提供返回按钮，那么用户就会点浏览器上的回退按钮，这样就会跳到前一个页面，而你只是想继续在这个页面，只是让它将这个弹框关闭分析：当用户点击浏览器的回退按钮，继续保持在当前页面解决：多加一层路由，既想保持在当前页面，又想加入新的路由，那么只能通过hashRouter的想...
2019-12-27 23:01:58
792
原创 使用requestAnimationFrame来执行动画
一般js动画我们经常使用setTimeout或setInterval来执行函数，但是由于js的执行机制，往往这两个方法会延迟执行。requestAnimationFrame很好的解决了这个问题，它的重绘或回流的时间间隔和浏览器的的刷新评论几乎一致，可以保持在每秒60帧。同时它会将没一帧的DOM操作集中一起执行，节流思想，减少开销。查看以下代码，函数中执行了requestAnimationF...
2019-11-25 17:14:36
355
原创 如何判断文本是否溢出
对于一些文本内容超过包裹层，我们经常会采用省略号的形式取隐藏溢出部分，而这通常只需要通过css就可以解决#single-line { width: 100px; border: 1px solid #333; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}#multi-line { ...
2019-10-26 14:56:54
7078
原创 React.forwardRef让父组件获得子组件的dom
// RefParent.jsimport RefChild from "./RefChild";const textInput = React.createRef();console.log(textInput)const RefParent = () => { return <RefChild ref={textInput}></RefChild>...
2019-10-26 14:19:40
1043
原创 webpack统一配置
所有源码：https://github.com/Dilomen/webpack-setting前言：往往我们下载的依赖包都是用来import导入使用的，但是有些依赖，我们希望通过指令去执行它，比如一些配置文件，如webpack打包文件，这样就可以一次配置，应用多个项目注：以下代码只是做了一些简单的逻辑，一些错误判断都没有做，还有一些配置需要根据自己的项目进行修改首先创建bin和lib文...
2019-09-23 10:18:24
313
原创 react的setState的执行机制
介绍react 中组件本身的状态是通过 state 来维护的，但是 state 不能直接进行修改，必须使用 setState 方法，将修改的 state 和原来的 state 进行比较，组成一个新的 state使用constructor(props) { super(props); this.state = { value: 1 }}compone...
2019-09-19 19:22:02
364
原创 react通过ref执行子组件的事件
场景：一个输入框组件，我要在父组件触发一个事件，来触发输入框组件的focus聚焦父组件handleClick = () => { this.SubInput.handleFocus() } render() { return ( <div> <SubItem ref={ref => this.SubInput ...
2019-09-17 11:48:46
1941
原创 js,ts配置css Modules
在编写代码的时候，经常会出现同名而被覆盖样式的可能，所以添加css Modules可以减少这样的冲突！首先在webpack的配置文件中的rules加上一下代码，这是新的配置方式参考：https://github.com/rails/webpacker/issues/2197#issuecomment-517234086{ test: /\.css$/, exclude: ...
2019-09-14 22:24:02
1641
原创 将ts编写的代码上传到npm
tip：已有ts环境，即安装了typescript依赖，这边不涉及到webpack和各种框架，就只是一个ts的小demo编写tsconfig.js{ "compilerOptions": { "target": "es5", "module": "commonjs", "lib": [], "declaration": true,...
2019-09-08 10:06:27
549
原创 如何使用NODE_ENV来判断当前环境
— 在搭建前端项目时，开发环境和生产环境有时候需要不同的配置，所以就需要有个东西来判断当前环境来选择对应的配置首先在webpack.config.js中的插件plugins配置new Webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV) }})...
2019-09-08 00:23:08
3417
原创 记一次react+ts的环境搭建，并上传到npm
在 github 创建了一个由 react 搭建的 UI 组件库，最初为了方便直接使用了 create-react-app 官方脚手架搭建了项目，虽然方便了，但是显得太臃肿以及不够灵活。因此自己使用 webpack 来重新搭建整个环境项目地址：https://github.com/Dilomen/Dark-Compontent通过 npm install dark-ui -D 指令进行安装...
2019-08-30 20:58:05
1197
原创 react实现简单的toast组件
实现：（这里使用的是tsx，如果是jsx，需要把类型删除）生成一个新的div，添加（append）到document下，然后使用ReactDOM渲染该元素 创建一个Toast的类，因为需要类直接使用方法，所以创建相应的静态方法，直接调用 在方法调用前，清除定时器（如同节流），防止前面的定时器影响到后面弹出的toast的持续时间使用:function handleClick1() {...
2019-07-18 21:43:17
3067
1
原创 关于js对象的复制
两个对象的直接赋值是浅复制，只是将被赋值对象(listB)指向了赋值对象(listA)的地址，所以两者的值都是一样的let listA = {a: 1}let listB = listA如果像以下代码，listA对象的属性指向了listA对象所存储的地址，那么就会出线无限的“嵌套“，由于两个对象指向的地址依旧没有变化，所以两者还是一致的let listA = {next: {}...
2019-07-05 22:56:26
511
原创 react + TypeScript遇到引入withRouter发生报错
在redux + TypeScript的项目时，使用withRouter的时候，报了以下的错误，原因时没有对withRouter所带来的prop下的属性没有进行类型判断解决方案：让自己的接口继承RouteComponentProps即可import {RouteComponentProps, withRouter} from "react-router"interface P...
2019-07-05 17:38:30
3584
1
原创 初试React Hook
什么时候需要用到hook?编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其它转化为 class,现在可以在现有的函数组件中使用 Hook，同时它也简化来一些原先需要生命周期等操作useState：返回一个两个参数的数组，第一个参数是变量，第二个是函数function Test() { const [count, setCount] = useState(...
2019-07-04 10:42:51
203
原创 window.history路由及在react-router-dom中的使用
首先来看history暴露出属性和方法（以下图来自MDN）以及谷歌浏览器的history输出，可以看到History的构造方法和原型对象属性：length 当前窗口的浏览路径数量 scrollRestoration 设置默认的滚动恢复行为, 可选值 "auto" || "manual", 前者进入页面还会停到之前的滚动位置，后者会重置滚动位置到顶端 sta...
2019-07-03 14:41:16
3679
原创 redux命名造成的冲突
一直以为combineReducers({})下的reducer是相互的独立的，但是当我将两个reducer中的action.type设成一样时，相同的type下的state发生了联动（一起）的变化所以为了避免不必要的BUG，还是将type设成唯一的...
2019-06-12 15:51:34
490
原创 redux中如何让一个action的方法触发另一个action的方法
一定要用dispatch包裹，否则不会触发方法return dispatch => {}的代码通过dispatch()将想要触发的方法包裹起来，dispatch检测到方法就会执行它export default handleGet (data) { return dispatch => { axios.get(list).then() ...
2019-06-06 14:29:14
2724
原创 ant design 给表格添加可编辑列，无法取到组件的this值
问题：想为表格实现一列编辑按钮，并且点击按钮会触发相应的事件先写了以下的代码，发现this为undefined，所以无法调用this，也就没法去触发组件下的方法{ title: '操作', dataIndex: '', key: 'x', render: (record, row) => (...
2019-06-05 15:18:05
1367
原创 redux的使用
首先通过createStore()方法创建一个store,作为保存状态的对象import {createStore} from 'redux'const store = createStore(reducers)如果要使用redux调试工具和中间件import {createStore, compose, applyMiddleware} from 'redux'import ...
2019-05-08 14:49:28
158
原创 简化connect写法
通过babel让JS程序支持装饰器Babel >= 7.xnpm install --save-dev @babel/plugin-proposal-decorators{ "plugins": [ ["@babel/plugin-proposal-decorators", { "legacy": true }], ]}babel@6.x 安装插件...
2019-04-25 17:22:26
423
原创 使用webpack搭建react环境
tip:虽然官方提供了create-react-app的方式来创建react项目，但是还是想用用webpack来搭建下，当然create-react-app也是建立在webpack上的，可以使用npm run eject来调取webpack的配置文件首先创建一个空文件夹，然后通过npm init初始化得到一个package.json文件如果不想一个个安装依赖包，直接复制以下的代码到pack...
2019-04-20 21:14:36
309
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人