云生流长-CSDN博客

原创防抖和节流的实现

1.防抖（debounce）常见的滚动监听事件，每次滚动都会触发，如此太过浪费性能，要如何优化呢？思路：在第一次触发事件的时候，不是立即执行函数，而是给出一个delay时间值，例如200ms 如果在200ms内没有再次触发该事件，则执行函数如果在200ms内有再次触发事件，则清除当前的计时器，重新开始计时器效果：短时间内大量出发同一事件最终只会执行一次实现：利用...

2019-05-14 15:04:32 5331

原创【React + Storybook】TypeError: Cannot read property 'compilation' of undefined

背景利用create-react-app创建React项目，并搭配使用Storybook + Ant Design（如果想了解Storybook在React中如何使用，可以点击这里），package.json主要信息如下： "dependencies": { "antd": "^3.16.3", "babel-polyfill": "^6.26.0", "mobx"...

2019-04-24 00:17:33 1761

原创【React】Erroe:Cannot find module 'react-scripts/package.json'异常解决方案

背景：使用create-react-app搭建React开发环境后，添加config-overrides.js文件，并修改package.json中对应命令后，执行 npm start // config-overrides.js var path = require('path') const rewireWebpackBundleAnalyzer = require('react-...

2019-02-22 16:05:12 24960 1

最近一次蛋疼的寄快递经历引发了我对企业发展的思考，为什么有的企业可以发展的很好，而为什么有的企业却面临倒闭？ 1.事件经过去婚纱店验收完婚纱照没什么问题后就按厂家包装装回封好，打电话让天天快递的快递员上婚纱店取件，因为当时快递员表示暂时没时间，稍后会过来取。于是我们先行离开，快递员收到物品后有给我报了价，当时有和他确认是打木架保护。但是家里人收到快递的时候根本没有木架，外包装也是原本厂家的包...

2019-01-24 11:25:22 390

原创【Storybook】Storybook在React中的使用

本文将结合自身使用Storybook近半年的感受从：什么是Storybook？为什么要使用Storybook？如何快速使用Storybook？自定义Webpack配置代理设置这几个方面来介绍Storybook 1. 什么是Storybook？ Storybook 是一个使用户能够独立创建组件，并在隔离的开发环境中以交互方式展示组件的工具。简单说就是组件的展示工具。 ...

2019-01-23 19:45:23 5322

原创读《前端迷茫怎么办？——张鑫旭》有感

原本地址最近看到前端大牛张鑫旭发了一篇关于前端经验分享的文章前端迷茫怎么办？，觉得文章中的几个观点我是非常赞同的，结合自身的理解和经验，反思整理如下：观点一：前方的路需要自己去走相信很多人会和我有过相同的经历，当我们因为某件事感到迷茫，看不清前方的路，不知道该往哪儿走，借用大学舍友的一句话就是“很想搞点事情，但又不知从何搞起”的时候，就很希望能有位高人可以出来指点一下，即使是在梦里...

2019-01-17 21:24:55 2546 1

原创【Ant Design】Modal 中Select组件下拉选项随页面滚动与Select框分离异常

背景：使用Ant Design，在Modal组件中使用Select组件，当点击Select组件出现下拉选项后滚动原始页面，出现下拉选项和Select框分离的异常。异常图片：异常代码： <Select> // some <Option></Option> </Select> 问题点： Select组件有个API get...

2018-09-19 20:36:41 9054 2

原创【React】React.Children.only expected to receive a single React element child

背景：React 项目使用Ant Design + Storybook时发报：Uncaught Error: React.Children.only expected to receive a single React element child问题点：异常代码：<Dropdown overlay={menu}> <Rate allowHalf defaultValue...

2018-06-28 17:10:36 22807 6

原创【React】IE 11发报“对象不支持startsWith属性或方法”异常解决方案

背景：React项目中使用了create-react-app 脚手架 + Mobx + Ant Design后Chrome和火狐浏览器运行OK，但IE 11发报对象不支持“startsWith”属性或方法解决方案：安装“babel-polyfill”，并在入口文件中添加 import "babel-polyfill";npm install 之后重新启动便可以在IE 11 中正常显示。...

2018-06-11 14:08:13 8800

原创【Node.js学习笔记】-00 Node.js简介

1.什么是Node.js?Node.js不是JS应用，不是语言，也不是框架，只是JS的运行环境事件驱动，非阻塞I/O，简单说就是每个函数都是异步的，Node.js内部隐藏了非阻塞I/O的具体细节，使得我们可以轻松编写高性能的WEB应用，所以它是轻量且高效的使用npm作为包管理器2.基本原理下图为Node.js早期的架构图。此图简要介绍了Node.js 是基于Chrome V8引擎构建的，由事件循环...

2018-06-05 14:52:15 327

原创【Node.js学习笔记】-01 CommonJS的模块规范

CommonJS的模块定义主要分为：模块定义模块引用模块标识1.模块定义在Node中一个文件就是一个模块，定义好的方法/变量通过挂载在 exports对象上即可作为方法/属性导出供别的模块使用。// 模块定义// math.jsexports.add = function () { var sum = 0; i = 0, args = arguments, ...

2018-06-04 15:22:02 217

原创 Failed prop type: Invalid prop `dataSource` of type `object` supplied to `Table`, expected 异常解决方案

背景： React项目使用Ant Design后发报 Warning: Failed prop type: Invalid prop `dataSource` of type `object` supplied to `Table`, expected `array`. 问题点：传给Table组建dataSource={}属性的值的格式存在异常，dataSource={}属性只能传...

2018-04-18 10:20:19 22727 1

原创【mobx】There are multiple mobx instances active. This might lead to unexpected results异常解决方案

背景： React项目中使用了MoBx之后发报 Error: [mobx] There are multiple mobx instances active. This might lead to unexpected results. See https://github.com/mobxjs/mobx/issues/1082 for details. 问题点：重复引用了多个MoB...

2018-04-12 09:22:28 2357

原创 Ant Design Form表单中getFieldDecorator使用异常总结

背景：在使用Ant Design Form组件时，Form组件提供了一个create方法，使用form.create()(component)处理之后的component 会接收到一个props.form，使用props.form下的一系列方法，便可以很方便的写出具备自动校验功能的表单。代码如下所示： // 使用 Form.create 处理后的表单具有自动收集数据并校验的功能 const S...

2018-04-04 16:47:23 76238 3

原创 AJAX数据模拟之Mock.js

参考文献 1.什么是Mock.js? Mock.js是拦截AJAX请求，并返回请求需要的数据的工具。 2.为什么会有Mock.js? 在前后端分离的开发过程中，在后端接口没完成的情况下可以利用Mock.js提供的随机数据来进行测试。 3.Mock.js的使用？ 3.1 安装mockjs npm install mockjs - -save-dev 3.2...

2017-12-21 11:25:14 1323

原创 React router+ webpack实现JS按需加载

参考文献 1.安装 npm install bundle-loader - -save-dev 2.创建Bundle.js 文件存放路径：src/router/Bundle.js 文件内容： 3.改造路由文件路径：src/router/router.js 文件内容： 4.配置webpack.dev.config.js 文件位置：webp

2017-12-19 17:10:11 1529

原创 Webpack使用

1.什么是Webpack? WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用 2.使用Webpack的前期准备2.1 创建package.json文件创建一个项目文件夹（此处命名为webpack sample project

2017-12-19 15:59:52 321

原创 Ant Design无法引入CSS文件解决方案

方案一：如果要在ant-design中引用常规的CSS，需要在根目录下的.roadhogrc下加入"disableCSSModules": true方案二：在render()函数中以JSON格式定义CSS样式，并在相应标签中通过style={样式变量名}引用样式

2017-12-14 15:11:00 8155 1

转载 JavaScript从原型到原型链

JavaScript从原型到原型链目录 1.构造函数创建对象 2.prototype属性 3. _proto_属性 4. constructo 5.实例和原型 6.原型的原型 7.原型的原型 8.补充虽然学习JavaScript已有一段时间了，但对“JavaScript原型和原型链”的理解还是不够深入，今天有幸在网上看到一篇题为：JavaScript深入之从原型到原型链的博文，阅读后心中豁然开朗

2017-11-06 21:08:02 503

云生流长的博客