- 博客(29)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 leaflet集成google map搜索、支持显示菜单功能的使用及demo
在《leaflet集成google map搜索、支持显示菜单功能（支持回车选中第一项，自定义菜单）》中简单介绍了为实现支持回车选中第一项，自定义菜单功能对Leaflet-gplaces-autocomplete的修改和React封装，并没有提及如何使用。本篇会通过我实现的一个demo介绍如何使用。demo在线地址：https://smk108.github.io/react-leaflet-...
2019-10-31 18:58:54
1401
3
原创 使用antd form开发支持动态增减表单项，可选有初始值组件的一种实现方式（三）
以前我写过《使用antd form开发支持动态增减表单项，可选有初始值组件的一种实现方式》，介绍了一种使用antd form开发支持动态增减表单项的实现方式，为了方便维护和调试，最近抽时间写了一个简单的demo放在了github上，地址为：https://github.com/smk108/dynamic-form-item。...
2019-09-30 18:15:58
2690
原创 推荐一款Chrome读写cookie的插件（edit this cookie）
我们在开发调试中有时候会遇到需要查看、修改或添加cookie的情况，这里推荐针对chrome浏览器的一个很好的cookie管理器-edit this cookie。在chrome网上应用店或者通过其它方法安装edit this cookie，然后就可以在以下几个位置看到并使用edit this cookie。1、地址栏右边2、右键菜单3、F12调试工具通常使用地址栏...
2019-08-30 18:26:03
12553
3
原创 前端性能优化之js代码压缩（http请求里出现的一个5.5M的js包）
我在《记一次有点儿复杂的streamsets与自己开发模块集成的过程》里介绍过将streamsets集成到自己项目里的做法，开放出去之后不久就被吐槽页面加载太慢了。因为开发时都是在本地测试，基本都是瞬间加载出来，没有特别关注加载性能问题，上线后发现加载很慢，偶尔还会出现超时导致页面加载失败的情况，查了一下原因，发现竟然有一个5.5M的js包要加载！资源包太大经常出现以下问题：1、页面加载慢...
2019-07-31 19:07:15
1179
原创 leaflet集成google map搜索、支持显示菜单功能（支持回车选中第一项，自定义菜单）
我之前参与过一个与地图展示相关的项目，是在react项目中使用leaflet实现的，当时项目中集成了地形、卫星、交通等图层，加入了一些停车场、交通信号灯等数据信息。当时项目中使用的是react-leaflet，但是我们知道leaflet有很多plugins可以使用，但是这些插件很多没有对应的react版本，有些插件也不满足我们的需求，所以在项目中修改了一些插件。Leaflet-gplaces-...
2019-06-28 18:51:01
2766
7
原创 CodeMirror实现自定义提示功能增强版（支持搜索、调用接口查询提示内容）
之前在《CodeMirror实现自定义提示功能》中介绍过CodeMirror实现自定义提示功能的一种实现方式，但是之前的实现有一些局限性，主要是：1、需要提示的内容是从variablePool中读取的，需要先确定variablePool；2、提示的内容需要一个个去选择，不支持搜索功能。本文提供了一种解决上述两个问题的实现方式，不同的主要是handleShowHint这个方法，修改了一些提示逻辑...
2019-05-06 19:18:01
8260
2
原创 mobx系列(七)- mobx开发调试工具
mobx还提供了一个开发调试工具：mobx-react-devtools，下面简单介绍下mobx-react-devtools的使用。1、安装npm install --save-dev mobx-react-devtools2、使用要想使用开发调试工具，需要先导入DevTools组件，然后在代码的某个位置渲染它，如：import React, {Component} fro...
2019-04-29 19:48:59
4465
1
原创 mobx系列(五)-Mobx常见问题及解决方案（2）observable state更新后组件不主动更新问题
在《mobx系列(二)-mobx主要概念》中解释过mobx对什么作出反应，如果对这一部分内容理解不清楚，开发中经常会遇到store中状态更新了，但是组件没有重新渲染的问题。本文简单列举几种情况及解决方法。1、缓存observables 属性并存储在本地这是文档中的一个示例，指的是从 observable 属性中提取数据并存储，这样的数据是不会被追踪的：class User { @...
2019-04-29 19:33:34
12939
5
原创 记一次有点儿复杂的streamsets与自己开发模块集成的过程
最近参与一个项目的开发，leader和产品决定使用开源的streamsets做底层服务和监控页面。除开发产品模块页面外，我还负责streamsets前端的修改和与自己开发模块的集成。经过调研，streamsets前端使用的技术栈和我们公司常用的技术有些出入，并不太方便直接从代码层面合成一个项目，决定在自己项目中使用iframe嵌入streamsets监控、日志等页面。最终整个产品架构图如下...
2019-03-17 16:31:14
3637
15
原创 CodeMirror实现自定义提示功能
我之前在文章《CodeMirror基本使用及实现关键词高亮、自定义主题》中简单介绍了CodeMirror实现自动提示的功能，但是使用的是CodeMirror中封装好的几种指定语法的提示功能，如css、html、js、sql、xml，对应文件如下列表：现在我开发中有需求做自定义语法的自动提示功能，并没有现成的mode可以使用，学习CodeMirror API和上述几个文件的实现方式之后找到了...
2019-02-18 18:57:39
26329
21
原创 CodeMirror:Uncaught TypeError codeMirrorInstance.fromTextArea is not a function
之前在《CodeMirror实现关键词高亮及自定义主题》中简单介绍过react-codeMirror的使用和主题的自定义方式，最近在另外一个webpack打包的React项目中再次使用时遇到题目中比较奇怪的问题，请教了两位同事，终于解决了该问题，特此记录一下排查问题的过程及导致问题的原因。首先说明一下问题，在组件中使用最简单的方式使用react-codeMirror，代码示例如下：imp...
2019-01-25 20:07:00
1958
翻译 我不再使用React.setState的3个原因
从几个月前开始，我在新开发的React组件中不再使用setState。我并没有停止使用局部组件状态，只是不再用React来管理这些state，这是很不错的一个选择。对于React初学者来说，使用setState是比较棘手的。即使是经验丰富的React开发者，在使用React本身的状态管理机制时，也经常会出现一些比较微妙的bug，例如：忘记setState是异步的导致的bug：控制台的输...
2018-12-24 19:32:15
2676
1
原创 mobx系列(三)-在React中使用Mobx
Mobx提供了一个mobx-react包帮助开发者方便地在React中使用Mobx，mobx-react中有observer、Provider、inject几个常用的api。在《mobx系列(二)-mobx主要概念》中我们已经介绍过observer，本文介绍下inject、Provider，以及Mobx如何与React结合使用。1、ProviderProvider是一个React组件，使用...
2018-12-17 18:45:29
7332
3
原创 mobx系列(二)-mobx主要概念
通过《Mobx系列(一)-Mobx简介》我们简单理解了Mobx的基本原理及流程，使用Mobx实现一个响应式的应用，主要分为三个步骤：定义状态并使其可观察（state） 对状态改变的响应（computed、autorun、reaction、observer、when） 改变状态（action）下面从这三个步骤的顺序介绍Mobx的主要概念。（版本为5.X、使用es7装饰器）1、可观察状态...
2018-12-11 19:36:49
3612
2
原创 mobx系列(一)-mobx简介
Mobx是通过函数响应式编程使状态管理变得简单和可扩展的状态管理库。Mobx和Redux一样，采用单向数据流管理状态：通过action改变应用的state，state的改变触发相应ui的更新，如下图所示：Mobx有如下几个主要概念：State：状态，应该是应用依赖的最小状态集，没有任何多余的状态，也不需要通过其他状态计算而来的中间状态；Computed value：计算值，是根据s...
2018-12-03 19:16:50
10622
原创 使用antd form开发支持动态增减表单项，可选有初始值组件的一种实现方式（二）
注：该篇为上一篇《使用antd form开发支持动态增减表单项，可选有初始值组件的一种实现方式（一）》的 解释及使用说明。地址：https://blog.csdn.net/smk108/article/details/84554186该组件实现了从初始状态添加、有初始值的编辑、并一直支持动态增减表单项的功能，组件解释如下：render时有没有初始值之keys的赋值：const {g...
2018-11-26 19:00:38
6328
7
原创 使用antd form开发支持动态增减表单项，可选有初始值组件的一种实现方式（一）
在使用antd form做动态表单开发时，官网有如下示例：当添加表单项后：使用此示例可以实现动态增加、减少表单项的功能，但是当我们编辑以前添加过的form表单时，该如何赋初值，又如何支持新增和编辑使用同一组件，即可以支持没有初值和有初值两种情况。本文分享了一种解决该问题的组件封装方式。组件使用方式：<TagComponenttag={tag}label='tag...
2018-11-26 18:43:23
16949
2
原创 mobx系列(五)-Mobx常见问题及解决方案（1）Mobx使用严格模式
mobx在严格模式下，不允许在 action 外更改任何状态。但是不同版本严格模式的用法不同，3.x、4.x、5.x三个版本下的严格模式用法。1、[email protected]：useStrict(boolean)2、[email protected]：configure({ enforceActions: boolean })迁移说明：https://github.com/mobxjs/mobx/wiki/Migr...
2018-10-19 17:42:44
7059
原创 在react项目中集成angularJS
注：Demo源码地址：https://github.com/smk108/react-angular React和Angular都是主流的前端框架，我参与的前端项目通常都是使用react开发，因为要在自己开发的项目中使用一个由angular开发的开源项目，因此开始尝试两大主流框架的集成。 React文档中讲到了react可以与第三方库整合，是以jQuery 和Backbone为例讲...
2018-07-05 18:29:45
2529
原创 React开发中需要注意的几点内容
1、 所有 React 组件都必须是纯函数，并禁止修改其自身 props 。2、 正确地使用State（状态）。state(状态) 更新可能是异步的，用setState() 代替； state(状态) 更新可能是异步的；// 错误this.setState({ counter: this.state.counter + this.props.increment,}...
2018-07-01 13:29:18
453
原创 React中点击空白位置弹框消失的实现汇总
前端开发中经常使用弹框展示一些信息，如下图所示，点击show弹框显示。如果要实现点击hide及弹框外空白位置弹框消失，并且在点击alert弹框消失的同时响应alert上绑定的事件，要如何实现？1、addEventListener前端js开发中实现上述功能，首选实现方法肯定是使用addEventListener绑定事件，通过不同元素绑定的事件配合实现。但是这种实现方法在Reac...
2018-02-25 13:03:45
11769
原创 CodeMirror基本使用及实现关键词高亮、自定义主题
CodeMirror是一款在线的支持语法高亮的代码编辑器，现在已有封装的react版本（react-codemirror）可以直接使用。Codemirror资源文件中，lib下是放的是核心库和核心css，mode下放的是各种支持语言的语法定义，theme目录下是支持的主题样式。使用codemirror实现在线代码编辑器主要包括的功能是：1、实现自动提示2、 关键词高亮与自定义theme...
2018-01-19 19:25:26
36483
原创 使用quill显示带格式的文本
在富文本编辑器Quill的简单React封装中介绍过quill在react项目中的基本使用，主要方向是文本编辑，即提供一个允许用户书写并设置各种格式或嵌入图片、视频等的文本框。如果现在我们要显示一段文字，并且希望带有各种不同格式（文本编辑器编辑过的），也是可以使用quill实现的。比如有一段文字：Quill是一个免费开源文本API编辑器工具，帮助开发人员解决编辑问题。Quill编辑器旨在通...
2018-01-17 20:48:55
6079
4
原创 Js使用window.parent ,window.top,window.self判断iframe嵌套
参考：http://blog.csdn.net/u012316120/article/details/51595491在应用有iframe，甚至含有多层iframe嵌套的页面中，存在有window.parent,window.top,window.self对象，各个对象的含义介绍如下： window.self功能：是对当前窗口自身的引用。它和window属性是等价的。语法：wi
2017-12-27 19:07:27
7339
原创 完美解决echarts的柱状图和折线图的点击非图表图形元素不会触发事件
在涉及到图标的开发中，相信大家经常会用到echarts，echarts中可以通过on方法添加事件处理函数，可以很方便的实现一些交互。但是直接添加的click事件，只有点击在图形元素上才会触发事件处理函数。本文总结了三种实现方法。
2017-11-08 19:20:22
37720
48
原创 input的onChange、router、table文本超出隐藏（阶段记录）
1、 input的onChange事件为HTML的事件，与所使用的框架无关，都可以响应。一般可使用onChange(val => this.handleChange(val))调用；如果上面没有响应，可以认为onChange响应event事件，可以onChange={e => this.handleChange(val))}使用。2、React router3.x版本中通过Link、Index
2017-10-31 18:07:42
752
原创 富文本编辑器Quill的简单React封装
最近要在React项目中实现富文本编辑器，我在基于不同插件实现多种版本之后，体会到了Quill的强大，决定在项目中使用Quill实现富文本编辑器功能。大多数富文本编辑器都有所见即所得的（指不能进行扩展）的问题，这意味着我们很难或者不可能对其进行自定义满足一些特定的需求。Quill的强大之处在于通过将自身组织成模块，并提供强大的API来构建额外的模块解决扩展的问题，即所有能看到的，不能看到的功能...
2017-07-26 08:27:46
14462
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人