- 博客(45)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 靜下心来--重温正则表达式（一）
关于正则表达式，大家都要这样的经历：看完之后觉得懂了，但是过一段时间就忘记，自己写的时候更是到处查资料。鉴于这种情况，总结了自己关于正则表达式的学习心得，以供大家参考。本文将从正则表达式的基础概念讲起，紧接着总结跟正则表达式相关的一些常用方法，以及正则表达式的匹配方式。1、基础概念 正则表达式（Regular Expression）是一种用来描述规则的表达式，其目的是为了根据特定的规则对字符串匹配，从而实现替换和搜索的功能。正则表达式的匹配其实不外乎两种：匹配字符（匹配内容）和匹配位置（断言匹配
2022-04-29 10:55:33
629
原创 波兰表达式 & 逆波兰表达式
1、概述1.1、什么是波兰表达式先来看看维基百科对于波兰表达式和逆波兰表单的解释：波兰表示法（Polish notation，或波兰记法），是一种逻辑、算术和代数表示方法，其特点是操作符置于操作数的前面，因此也称做前缀表示法。如果操作符的元数（arity）是固定的，则语法上不需要括号仍然能被无歧义地解析。逆波兰表示法（Reverse Polish notation，RPN，或逆波兰记法），是一种是由波兰数学家扬·武卡谢维奇1920年引入的数学表达式形式，在逆波兰记法中，所有操作符置于操作数的后
2021-06-28 19:12:23
16947
原创 Vuex源码分析
1、Vuex 简介及使用1.1 Vuex 简介Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 Vuex 主要由 state、getter、mutation、action 几个部分组成，形成了一个单一状态树 store，对于复杂的业务可以将 store 分隔成模块，每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。state
2020-11-17 14:42:17
288
原创 Redux源码分析(4) - combineReducers和 bindActionCreators
1、前言 combineReducers 和 bindActionCreators 是 Redux 提供的两个辅助函数，即使不使用他们，也能够正常的使用 Redux。 但是如果利用好这两个辅助函数，将会使得你的代码更加易于维护，特别是 combineReducers 。2、combineReducers 在之前的章节中多次提到combineReducers，实际开发中所有 state ...
2020-04-26 11:14:55
452
原创 Redux源码分析(3) - applyMiddleware
1、applyMiddleware 介绍 applyMiddleware 作为 Redux 的核心 api 之一，本质就是在 dispatch 更改 reducer 之前做一些操作，具体的实现其实就对 store 的增强，其中最终是对 store 中的 dispatch 的增强。关于 applyMiddleware 的使用可参考上一章节 Redux源码分析(1) - Redux介绍及使用 ...
2020-04-22 18:00:42
370
原创 Redux源码分析(2) - createStore
1、前言 下边章节中将详细分析源码，源码分析中对于一些边界的判断、类型判断等不做重点分析，主要将分析的重点放在主流程方向上。2、createStore createStore 作为 Redux 的核心 api 之一，其作用是通过 reducer 和 中间件 middleware 构造一个为 store 的数据结构。关于 createStore 的使用可参考上一章节 Redux源码分析(...
2020-04-21 17:37:24
311
原创 Redux源码分析(1) - Redux介绍及使用
1、Redux生态的介绍 关于 Redux 的介绍可以参考: Redux 中文文档。Redux 是 JavaScript 状态容器，提供可预测化的状态管理。通常在 React 中使用 Redux 时，还使用到React-Redux、Redux-Saga。 Redux作为全局的状态管理器，整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存...
2020-04-19 18:32:53
355
原创 基于Taro封装的微信小程序框架
1、基本概述 由京东凹凸团队开源的小程序框架Taro （https://taro.aotu.io/），以及对应UI框架Taro-UI （https://taro-ui.jd.com/#/），是一套遵循 React 语法规范的 多端开发 解决方案。根据官方介绍： 现如今市面上端的形态多种多样，Web、React-Native、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所...
2020-01-16 14:50:09
2042
原创 基于Taro封装的日期时间DateTimePicker组件
不管是微信小程序还是Taro、TaroUI的组件都没有提供日期时间组件。基于Taro、TaroUI封装了日期时间组件DateTimePicke。代码地址：github： https://github.com/zhengchangshun/TaroUI-DateTimePicker1、效果图2、参数说明参数描述是否必传默认initValue传入组件的日期时间初...
2020-01-09 16:15:17
6968
原创 CodeReview效率与成效改善方案
CodeReview的目的是提升代码质量，尽早发现潜在缺陷与BUG，降低修复成本，同时促进团队内部知识共享，帮助更多人更好地理解系统。为有效的的执行codeReview，从以下几点出发:（一） 代码维度1、 基础类语法检测： 推荐使用eslint等工具，避免codeReview过程中过分的关注基础的语法和规范问题，具体的eslint的规则如下。可参考：https://cloud.te...
2019-12-13 15:26:15
376
原创 前端项目接入埋点系统的优化
1、基本概述 根据产品的需求，会针对一些页面做PV/UV的统计。埋点的实质就是向埋点服务器发送请求，埋点服务器埋点的数据做统计。正常情况下，我们需要在埋点的页面里添加埋点代码。而埋点的代码与实际的业务代码，是没有任何关系，往往会造成大量恶心的代码掺杂在业务代码中。 埋点接入时，首先通过script标签，引入埋点的js文件，具体参考对应的埋点系统的api文档。针对具体的场景加入埋单代码，...
2019-11-08 11:05:48
922
原创 基于UmiJs开发移动端的自适应配置方案
在移动端开发过程中，响应式布局是必须要考虑的一个问题。基于UmiJs开发时，使用的组件库是antd-mobile，通过在.umirc.js中添加配置项，及可以通过对于的postCss插件postcss-px-to-viewport解决响应式布局的问题。代码如下：extraPostCSSPlugins: [ require('postcss-flexbugs-fixes'), ...
2019-05-15 13:57:38
6396
1
原创 基于Umi搭建的个人Dva脚手架（五） - 可配置的搜索、弹窗组件封装
1、基本概述 在上一篇博客：基于Umi搭建的个人Dva脚手架（四） - 可配置的表单组件封装中，已经详细介绍了通过配置生成表单组件的方法，在开发中我们不必过分关心view层的编码，可以减少重复代码的编写，提高开发效率。列表搜索和操作类弹窗（新增、修改等）等都会应用到表单元素，因此在已有的可配置的表单组件GenerateForm的基础上进行二次封装，分别封装了可配置的搜索组件ListFilte...
2019-04-17 15:45:04
821
原创 基于Umi搭建的个人Dva脚手架（四） - 可配置的表单组件封装
1、基本概述 项目开发过程中，表单组件是最常用的组件之一，应用场景也多见于列表搜索、简单的新增和编辑弹窗、复杂的新增和编辑页面。Ant design的组件库中Form表单也提供了对应的API可供开发使用，极大的提高的开发速度。 在单独的页面里，我们通常引入Form组件及其对应的表单项组件（例如Input、Select、Checkbox等等）。由于通过Form.create()去处理当前组件...
2019-04-08 17:46:16
920
原创 基于Umi搭建的个人Dva脚手架（三） - 多Layout设计
1、基本概述 在项目开发过程中，通常的企业后台系统会包含头部（Header）、侧边栏（Sider），主体内容（Content）以及底部（Footer）。通常情况下我们会在Layout文件中布局，并对头部、侧边栏、底部封装成对应的组件，而针对主体内容部分，通过路由来控制显示不同的内容。 但是也存在一些页面不需要按照上边的布局方式来展示，例如登录、注册，或者其他类似的页面。 针对上述...
2019-03-18 11:14:39
2001
原创 基于Umi搭建的个人Dva脚手架（二） - HTTP请求的封装
1、基本概述 基于前后端分离的开发模式下，前端通过HTTP请求接口数据是前后端连接的纽带。HTTP协议中规定了GET、POST、PUT、DELETE等请求方式，在通常的业务开发中，最常用的请求方式是GET、POST。被我们熟知的是GET的参数会携带在URL上，POST请求的参数跟随HTTP请求的body传递，关于GET请求和POST的区别，可以自行研究。 在实际开发过程中，HTTP的Hea...
2019-03-11 17:02:11
1354
原创 基于Umi搭建的个人Dva脚手架(一) - 框架说明
1、基本概念阐述 阅读本文前，你需要对react、dva、umi以及ant design的有一定的认识，具体的相关知识都可以参考官方文档。 Umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架，是蚂蚁金服的底层前端框架。具体的可参考官方文档：https://umijs.org/zh/guide/ ， 本质上来讲Umi是一个react的框架。 Dva，也是有蚂蚁金服推出的...
2019-03-07 11:56:08
2519
1
原创 微信小程序踩坑记录
最近开发了一款微信小程序，在开发过程中遇到了一些微信小程序的坑，记录下来，希望对后边开发小程序的同学有点帮助。后期开发过程如果有新的踩坑记录，也会相应的更新在改文档中。1、像素值与单位之间不能有空格 微信小程序的样式存放在.wxss文件，像素单位用rpx，官方文档有如下描述。rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iP...
2018-11-21 17:03:43
623
原创 nginx部署SPA页面
前后端分离开发过程中，前端需要独立发布项目。在当前vue、react等前端主流框架下开发，都是SPA页面，具体的如何发布到web服务器上。如何配nginx规则。直接看配置文件吧，重点部分都含有注释，其他nginx的默认配置指不做处理。主要配置在nginx的 conf/nginx.config文件，如下所示：#user nobody;worker_processes 1;#e...
2018-09-06 16:21:37
5657
原创 基于vue-cli搭建的vue web脚手架
基于vue-cli搭建的vue web脚手架，基本上能否满足一般的业务开发。技术栈 vue + es6 + vue-router + vuex + axios + jsonp + mock代码功能 代码结构：- **components**：主要用于全局组件的封装，通过./index对外暴露，并在入口文件index中实现全局注册；- **fliter**：主...
2018-09-03 16:41:09
269
原创 ant design pro 代码学习(七) ----- 组件封装（登录模块）
以登录模块为例，对ant design pro的组件封装都相关分析。登录模块包含基础组件的封装、组件按模块划分、同类组件通过配置文件生成、跨层级组件直接数据通信等，相对来说还是具有一定的代表性。1、登录模块流程图 首先，全局了解一下登录模块的总体流程。如下图所示。该流程图主要分两部分：1、页面布局；2、组件封装。黄色实线表示页面中组件的引用。下边会对基础组件分析，以及多层级组件直接的...
2018-07-16 16:59:16
12061
4
原创 ant design pro 代码学习(六) ----- 知识点总结2
1 、connect 多个model 以下为redux的API中对connect方法的定义： connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options]) 实际过程中使用最多的是mapStateToProps（另外两个参数暂时不做讨论），如果定义该参数，组件将会监听 Redux store ...
2018-07-10 17:11:32
4236
3
原创 ant design pro 代码学习(五) ----- 知识点总结1
1、React.Children React.Children 是顶层API之一，为处理 this.props.children这个封闭的数据结构提供了有用的工具。 this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ；如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this....
2018-07-04 16:23:14
4100
原创 Node.js爬虫个人博客，并利用Bat自动浏览
通过node.js对个人CSDN博客爬虫，获取个人博客列表，并将改列表内容注入到Bat批处理文件中，实现浏览器自动打开预览。1、安装依赖 npm 安装依赖包request、cheerio — request模块是用来请求网页的 — cherrio是用来分析dom结构的（Nodejs版本的jquery）2、爬虫获取个人CSDN博客列表var cheeri...
2018-07-03 15:31:24
716
原创 ant design pro 代码学习(四) ----- 数据mock
1、.roadhogrc.mock.js roadhog支持mock功能，如需mock 功能，在 .roadhogrc.mock.js 中添加配置即可，在开发环境下启动server时，将开启mock功能；也可以通过配置在开发环境下关闭mock功能。//.roadhogrc.mock.js// 是否禁用代理const noProxy = process.env.NO_PROXY =...
2018-06-29 16:55:19
8230
2
原创 ant design pro 代码学习(三) ----- 菜单数据分析
1、getSelectedMenuKeys 获取选中的菜单的key getSelectedMenuKeys = () => { const {location: {pathname}} = this.props; return getMeunMatchKeys(this.flatMenuKeys, urlToList(pathname)); }; get...
2018-06-26 14:59:38
5637
原创 ant design pro 代码学习(二) ----- 路由数据分析
本章节包含路由信息(common/router)、侧边栏菜单信息(common/menu)、基本路由（一级路由）UserLayout组件，BasicLayout组件、以及侧边栏SiderMenu组件中对数据的处理。主要涉及到以下几个方法，分别逐个分析其功能。 备注：本文中代码部分只截取涉及到的相关代码，完整代码请查看ant design Pro官方代码。1、getMenuData...
2018-06-19 18:16:23
6454
原创 ant design pro 代码学习(一) ----- 路由分析
1、一级路由 const routerData = getRouterData(app); const UserLayout = routerData['/user'].component; const BasicLayout = routerData['/'].component; return ( <LocaleProvider locale={zhCN}&g...
2018-06-13 16:35:11
16181
15
原创 IE8 兼容性问题总结
*IE8 兼容性问题总结* 最近公司的项目要求兼容ie，因为客户需求需要兼容到ie8，接手项目时，技术架构已经形成 ：webpack + gulp+ es6 +jquery 。在兼容ie8过程，遇到过一些问题，总结如下。
2017-10-25 17:19:12
6769
转载 详解forin，Object.keys和Object.getOwnPropertyNames的区别
转载：http://www.cnblogs.com/37sky/articles/5324105.html这三个方法，都可以用来遍历对象，这非常有用，其中后两个都是es5中新增的方法。本文会用到一些es5的对象知识，如果你不了解，可以看一下开头提到的文章，首先我们需要一个父对象。var parent = Object.create(Object.prototype, {
2017-06-27 15:42:36
596
原创 commonJS、AMD、CMD的区别
commonJS、AMD、CMD的区别：1、commonJS：同步加载，应用在服务端，各个模块基本都在服务器本地，所以加载速度比较快。NodeJS应用的就是commonJS标准。通过require引入模块，exports输出模块。2、AMD：异步加载，应用在浏览器，RequireJS就是AMD标准，通过define来引入依赖，当所有依赖模板加载完毕之后，才执行回调。3、
2016-11-10 11:45:53
442
原创 Freemarker和jquery tmpl模板同时引用是冲突解决
Freemarker中获取变量采用${ }的形式，在html渲染之前会对$ { }进行操作。jquery.tmpl.js是一种jquery的模板插件，也会用到${ }的形式，同时使用的过程中会产生冲突，解决方法：方法1 ：将jquery-tmpl的模版放在指令中。这样在freemarker执行过程会，就不会对模板中的部分进行操作；#noparse>script id="lis
2016-10-27 10:57:11
3154
原创 JavaScript高级程序设计学习
1.等于与不全等的区别1.1、等于（==）：比较两个值是否相等，如果两个值类型不一致，会做强制转换；1.2、全等（===）：比较两个值是否相等，但是不会对值得类型做转换。 55 == "55" //返回true，字符串“55”会被转换成数值55； 55 === "55" //返回false，不会做类型转换； 建
2016-08-23 16:31:36
320
原创 Highcharts 学习总结
最近公司项目需要，需要在web页面做一些数据统计，并以折线图的形式展现在前台。选择Highcharts，当然还有其他优秀的表格插件，百度团队开发Echarts，也是很不错的，进入正题。1、highcharts 下载 （1） highcharts官网地址：http://www.highcharts.com/products/highcharts/ 或者也在http://www.hc
2016-08-06 10:49:28
583
转载 前端构建工具gulpjs的使用介绍及技巧
转载地址：http://www.cnblogs.com/2050/p/4198792.htmlgulpjs是一个前端构建工具，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数，API也非常简单，学习起来很容易，而且gulpjs使用的是nodejs中stream来读取和操作数据，其速度更快。如果你还没有使用过前端构建工具，或者觉得gruntjs太难用的话，那就尝试一下gulp吧。
2016-08-01 10:20:29
372
原创 file类型的输入框，样式不可修改的解决方法
1、问题描述 html中file类型的输入框，在上传文件中经常被用到，但是IE浏览器、火狐、chrome中显示的效果不一样，并且还不可以用css样式表的形式更改对应的样式，在设计是，就会存一些问题。 IE中显示： FF中显示： 2、解
2016-06-20 14:16:10
5989
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人