前端
关注
分享
扫一扫
wangweiren_get
if you think you can, you can
展开
-
G2直方图大数据情况的处理以及思考
G2直方图大数据情况的处理以及思考先看一下官网的demoG2的官网，[官网链接](https://g2.antv.vision/zh/examples/column/histogram)这里提供一个大量数据的解决方案总结先看一下官网的demoG2的官网，官网链接这里提供一个大量数据的解决方案我们可以直接去更改这个统计结果dv.rows或者如下图代码总结javascript很多东西可以改，没必要墨守成规，规范虽然能解决很多问题，但是不规范的代码，可以创造有意思的东西。...原创 2020-05-19 20:22:16 · 1041 阅读 · 0 评论 -
git hooks的思考及应用
git hooks的思考及应用git hooks的认识概况我们前端怎么使用git hooksgit hooks的认识概况1. 我们先了解git hooks是什么？git hooks是git在特定的重要动作(例如commint, push)执行时候，触发自定义脚本。它是脚本2.git hooks能做什么？既然它是脚本，那么我们就可以用shell， Perl ，Ruby， Python甚至是...原创 2019-12-07 00:13:28 · 512 阅读 · 0 评论 -
react-redux connect源码理解
react-redux connect源码理解version 5.xconnect函数源码version 5.xconnect函数源码// match函数基本技术介绍 (dispatch, options) => (nextState, nextOwnProps) => nextFinalPropsfunction connect( mapStateToProps,...原创 2019-11-07 17:32:00 · 943 阅读 · 0 评论 -
react - redux 源码解读
redux 源码解读redux的所有源码文件如下截图createStore函数combineReducersbindActionCreatorsapplyMiddlewarecompose__DO_NOT_USE__ActionTypesredux的所有源码文件如下截图在index.js 我们可以看到redux总共暴露的接口有以下这些createStorecombineReducers...原创 2019-10-28 15:42:19 · 500 阅读 · 2 评论 -
chrome 浏览器表单自动填充默认样式覆盖
chrome 浏览器表单自动填充默认样式覆盖通过box-shadow覆盖底色使用动画通过box-shadow覆盖底色input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill { box-shadow: 0 0 0 1000px white inset; -webkit-text-fill-col...原创 2019-10-14 09:26:56 · 474 阅读 · 0 评论 -
前端js正则\p的使用, 全局标志g的问题
javascript正则\p的使用正则表达式\p语法元素使用方式参考链接正则表达式\p语法元素元字符含义\p{L}所有字母3\p{N}所有数字，类似于 \d 4[\p{N}\p{L}]所有数字和所有字母，类似于 \w 4\P{L}不是字母，等价于 [^\p{L}]\P{N}不是数字，等价于 [^\p{N}]使用方式var reg1 ...原创 2019-10-14 09:16:06 · 6693 阅读 · 1 评论 -
react jsoneditor 的学习使用
react jsoneditor 的使用npm 的地址具体使用然后发现各种的问题，so 手动修改了一下源代码相关链接npm 的地址地址在这里在npm 上面还有一个效果配图具体使用 import JSONInput from 'react-json-editor-ajrm'; import locale from 'react-json-editor-ajrm/locale/...原创 2019-03-04 15:41:42 · 8198 阅读 · 6 评论 -
极速零配置Web应用打包工具-Parcel了解
极速零配置Web应用打包工具-Parcel了解打包编译速度对比简单介绍[快速开始](https://parceljs.org/getting_started.html)相关链接某一天突然看到一个图。原文地址—从项目的 GitHub 星星数看 2018 年 JavaScript 生态圈so 本着强烈的好奇感了解了一下parcel打包编译速度对比BundlerTime...原创 2019-03-12 15:21:53 · 237 阅读 · 0 评论 -
npm run [command] 命令执行的基本顺序
npm run [command] 命令执行的基本顺序我们可以发现node_modules中有一个.bin的文件夹。里面有一个写命令的软连接，指向的是../[command]/bin/[command].js我们执行npm run [command] 的时候首先会去寻找当期目录下面node_modules/bin/有没有这个命令，有的话直接运行没有的话就会去全局寻找我们也可以在pac...原创 2019-03-12 21:46:27 · 2836 阅读 · 0 评论 -
dva model的effect的不同类型 使用介绍
dva model的watcher，takeLatest，throttle，takeEvery使用介绍官方的一些介绍takeEverytakeLatestthrottle（消抖）watcher参考资料官方的一些介绍effect说明使用说明这几个值是用来干嘛的呢？takeEvery在发起（dispatch）到 Store 并且匹配 pattern 的每一个 action 上派生...原创 2019-04-05 14:25:56 · 3713 阅读 · 0 评论 -
vue-cli开发配置认识
vue-cli开发配置认识git钩子的一些配置babel配置项目默认配置git钩子的一些配置相关链接介绍生效package.json配置"gitHooks": { "pre-commit": "npm run lint" ...xxx},有兴趣的可以去了解一下 yorkie 这个包babel配置在bable.config.js里面module.exp...原创 2019-03-31 22:58:11 · 398 阅读 · 0 评论 -
树形穿梭框的代码实现
树形穿梭框的代码实现效果如下图代码来一波效果如下图代码来一波jsimport React, { Component } from 'react';import { Tree, Checkbox, Button, Input, Icon} from 'antd'import styles from "./TreeSelectTransfer.less"c...原创 2019-03-04 15:09:52 · 13206 阅读 · 28 评论 -
vue简单入门指引
vue简单入门指引渐进式 JavaScript 框架快速入门一个组件的样子参考链接渐进式 JavaScript 框架打开vue的官网, 你上来就能看到这几个字，那么究竟什么叫渐进式呢？查了一下知乎，有这样的回答原文地址每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。比如说，Angular，它两...原创 2019-03-02 17:31:40 · 330 阅读 · 1 评论 -
vue create [project-name]做了什么？
vue create [project-name]做了什么？先看一下vue create生成的logvue 命令的node代码发现用了当前目录上一级/lib/create这个文件，我们接着看一下，发现这个文件做了一系列的判断之后~，然后执行了create方法先看一下vue create生成的logVue CLI v3.4.1? Please pick a preset: default (b...原创 2019-03-05 09:46:01 · 3154 阅读 · 0 评论 -
antd select label 和下拉label不一致实现
antd select label 和下拉label不一致实现正常的形式要实现这种效果呢？代码如下正常的形式要实现这种效果呢？代码如下codepen链接const { Select } = antd;const Option = Select.Option;const children = [];for (let i = 10; i < 36; i++) { ch...原创 2019-02-19 22:59:31 · 4327 阅读 · 6 评论 -
react-drag code学习
react-drag记录/* bound 为限制位置*/'use strict';var React = require('react');var findDOMNode = require('react-dom').findDOMNode;var propTypes = require('prop-types');var createReactClass = require('...原创 2019-02-14 11:19:23 · 698 阅读 · 0 评论 -
umi约定式路由基本了解
umi约定式路由基本了解先来看一下文档介绍看重点 启动 umi dev 后，大家会发现 pages 下多了个 .umi 的目录。这是啥？这是 umi 的临时目录，可以在这里做一些验证，但请不要直接在这里修改代码，umi 重启或者 pages 下的文件修改都会重新生成这个文件夹下的文件。先看一下我们umi dev的时候怎么运行的#!/usr/bin/env nodeconst re...原创 2019-02-18 09:53:08 · 7016 阅读 · 0 评论 -
React componentDidMount 中获取元素高度是准确的吗？
React componentDidMount 中获取高度是准确的吗？`答案肯定是有准确的时候也有不准确的时候啊`使用ref钩子在componentDidMount 中获取div高度的方法不能准确的一些情况子元素是有副作用遍历出来的flex布局一些情况，或者calc计算属性当然这种情况还有很多，欢迎大家补充解决方案1. setTimeout ?2. 不在componentDidMount中获取？...原创 2019-01-31 20:33:29 · 7055 阅读 · 0 评论 -
label for input onClick发生了什么？
label for input onClick发生了什么？测试代码如下测试代码如下html<label for="ipt" id="label_ipt">上传</label><br /><input type="file" id="ipt" />jswindow.onload = function () { functio...原创 2019-03-31 23:11:57 · 246 阅读 · 0 评论 -
React useHooks 了解
React useHooks 了解Basic HooksuseStateuseEffectuseContextAdditional HooksuseReduceruseCallbackuseMemouseRefuseImperativeHandleuseLayoutEffectuseDebugValue相关链接官方Introducing HooksW...原创 2019-04-10 15:00:43 · 721 阅读 · 0 评论 -
react 动态设置 backgroundImage base64图片不显示bug记录
react 动态设置 backgroundImage base64图片不显示bug记录问题：图片格式为base64 如 data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z解决方案先把base64里面的空格转义 img = img.replace(/\s/g, encodeURIComponent('...原创 2019-09-20 11:01:23 · 3669 阅读 · 0 评论 -
Source Map介绍 -浏览器篇
Source Map介绍Source Map介绍浏览器source mapsource map 使用介绍和原理参考链接Source Map介绍在做网站性能优化的时候，我们经常会做js和css代码压缩。但是压缩之 后的代码在调试的时候就会异常困难。source map就是解决问题的一种解决方案浏览器source mapchrome sourcemap功能设置界面source map ...原创 2019-08-22 23:28:21 · 3097 阅读 · 0 评论 -
Source Map介绍 - webpack篇
Source Map介绍 - webpack篇在webpack官网，我们可以看到关于生产sourcemap文件的模式一些介绍。下图production为yes的为只能在生成环境中试用，开发环境中会不省心cssmap生成不使用style-loader使用MiniCssExtractPlugin module: { rules: [ { tes...原创 2019-08-23 14:44:14 · 421 阅读 · 0 评论 -
nodejs 网络爬虫的一些模块记录
使用request模块来get网页的内容使用cheerio模块来提取网页这种的数据使用async模块来简化异步流程控制使用debug模块来显示调试信息使用cron模块来定时执行任务处理uncaughtException异常process.on('uncaughtException', function(err) { console.error('uncaughtException...原创 2019-08-21 23:38:33 · 241 阅读 · 0 评论 -
获取chrome网络请求详情
获取chrome网络请求详情chrome://net-export/ 输入网络日志解析日志文件1. https://netlog-viewer.appspot.com2.把解析工具下载到本地解析文件相关链接chrome://net-export/ 输入网络日志在谷歌浏览器url栏输入chrome://net-export/解析日志文件1. https://netlog-viewer....原创 2019-07-31 15:22:55 · 2573 阅读 · 2 评论 -
browserHistory原理的一些了解
browserHistory原理的一些了解对URL的一些基本认识实现browserhistory用到的关键Apihistory.pushStatehistory.replaceState一个监听事件popstate为什么需要服务端配合参考链接对URL的一些基本认识URL：统一资源定位符 (Uniform Resource Locator, URL)。完整的URL由这几个部分构成：scheme...原创 2019-07-18 09:20:02 · 2984 阅读 · 0 评论 -
promise的一些应用案例
promise的一些应用案例一些简单的使用具体参考 阮一峰老师 Promise 对象const delay = ms => new Promise((resolve) => { setTimeout(resolve, ms)});Promise.all( configList.map(itemConfig => { if (typeof item...原创 2019-07-05 14:18:24 · 1493 阅读 · 0 评论 -
Promise基本认识
Promise基本认识什么是Promise?Promise作用处理回调demo基本使用和Api了解构造函数语法方法原型参考链接什么是Promise?通俗一点就是一种写代码的方式，并且是用来写JavaScript编程中的异步代码的Promise 是javascript异步编程的一种解决方案。 其他的一些异步解决方案为回调函数事件监听发布/订阅从语法上说，Promise是一个对象...原创 2019-07-04 09:42:32 · 325 阅读 · 0 评论 -
react 中组件Modal, Dialog 怎么挂载到body上了的？
react 中组件Modal, Dialog 怎么挂载到body上了的？一些猜想看antd modal的代码如何实现的总结一些猜想因为支持组件式写法 ,肯定是React中一些api，把modal，dialog的元素append到body里面的 function UserDefinedComponent { return ( <div> <Modal_o...原创 2019-06-15 23:27:28 · 5901 阅读 · 0 评论 -
post formdata 415问题 Unsupported Media Type
post formdata 415问题Unsupported Media Typecontent-type 不需要设置删除不必要的自定义请求头今天遇到一个很坑的问题，提交formdata数据的时候，后台竟然给我返回4151状态码，但是用postman去提交这个formdata的时候又是正常的，最后发现是axios设置了accept值引起的原创 2019-05-14 16:41:14 · 5628 阅读 · 3 评论 -
dva Subscriptions 的使用
dva Subscriptions 的使用history例子socket例子keyboard 输入总结history例子subscriptions: { setup({ dispatch, history }) { history.listen(({ pathname }) => { if (pathname === '/users') { ...原创 2019-04-16 17:38:28 · 17484 阅读 · 2 评论 -
PostCSS 入门
PostCSS 入门PostCSS是什么常用插件autoprefixer配置webpack配置postcss其他相关链接PostCSS是什么PostCSS是什么？或许，你会认为它是预处理器、或者后处理器等等。其实，它什么都不是。它可以理解为一种插件系统。GitHub主页上的PostCss介绍为:PostCSS is a tool for transforming styles with J...原创 2019-04-11 14:08:11 · 403 阅读 · 0 评论 -
js实现web贪吃蛇小游戏
js实现web贪吃蛇小游戏效果图见下，效果展示地址首先需要实现游戏系统函数，让蛇和食物去动function System(){ this.timer=null;//定义定时器变量 this.argument=arguments[0];//保存传入的参数 this.flag=0;//计数变量 this.state=true;//系统是否在暂停状态,默认正常 //系统开始...原创 2019-01-31 16:32:58 · 2537 阅读 · 0 评论 -
网易前端大会-小结
网易前端大会-小结megalo 网易考拉小程序解决方案（基于vue语法）支付宝小程序最佳实践NEI mockStore 最近实践？世界是平的吗？如何构建企业级 nodejs 框架Diving into nodejs web framework关于class field 的争议性话题在最后来个图就完结吧，毕竟免费的，很nice!!!megalo 网易考拉小程序解决方案（基于vue语法）个人对...原创 2019-01-20 14:28:34 · 775 阅读 · 1 评论 -
对react setState 的理解
我们翻开react源码（version:16.3.2）, 首先是 setState部分，看到这里接受两个参数partialState (局部状态，限定只有对象和函数可以作为第一个参数), callback Component.prototype.setState = function (partialState, callback) { !(typeof partialState =...原创 2018-05-07 20:12:00 · 1304 阅读 · 0 评论 -
前端处理excel
前端处理excelnpm 包 xlsximport 函数 传入excel文件，shopsData就是excel 的数据import(value){ var fileReader = new FileReader(); fileReader.onload = function(ev) { try { var data = ev.target....原创 2018-09-07 17:56:03 · 647 阅读 · 0 评论 -
关于前端本地开发调试你需要了解的一切，跨域处理
关于前端本地开发你需要了解的一切下面关于前端开发我所有的了解的一些方法（方法无优劣，重要的你的习惯），有：前端发展起源之初的，模版语法（jsp，Nunjuck，PUG，vm等模版语法），jquery静态页面的方式连带后台代码一起跑，（联调一般前后端不分离），前后端一起联调，配置环境差异等。 随着node 的发展 gulp, wepback, grunt 等相继问世，代理的方式，http-...原创 2018-09-09 22:08:52 · 995 阅读 · 1 评论 -
vscode 的一些插件介绍
vscode 的一些插件介绍使用vscode遇到的一些问题 1.缩进 不会统一， 见博客https://segmentfault.com/q/1010000008771415 2.使用Prettier来自动格式化项目的提交代码 3.vscode 无法同时打开多个文件? 怎么设置的?（Window.nativeTabs: true） 4.作为JavaScript开...原创 2018-08-24 16:39:47 · 262 阅读 · 0 评论 -
web worker的了解
如，MDN文档中介绍的那样，使用demo如下 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale原创 2018-05-10 11:36:00 · 220 阅读 · 0 评论 -
前端复制功能
前端复制功能在很多场景我们见到很多一键复制的操作（如下图），最近一个react项目中需要实现一个点击复制的功能，拿出来和道友分享一下。 实现代码 function copyText(value) { document.designMode = 'on'; const input = document.createElement('input'); document...原创 2018-08-15 20:30:20 · 2301 阅读 · 0 评论