<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[smk108的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/smk108</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; smk108]]></copyright><item><title><![CDATA[前端模块化发展过程简述]]></title><link>https://blog.youkuaiyun.com/smk108/article/details/106603939</link><guid>https://blog.youkuaiyun.com/smk108/article/details/106603939</guid><author>smk108</author><pubDate>Sun, 07 Jun 2020 17:18:25 +0800</pubDate><description><![CDATA[注：以上内容来自于最近的一次组内分享，简单介绍了前端模块化发展过程，部分内容和示例参考网络上优秀的博客和技术文章。
]]></description><category></category></item><item><title><![CDATA[mobx系列(四)Mobx定义数据存储]]></title><link>https://blog.youkuaiyun.com/smk108/article/details/103326548</link><guid>https://blog.youkuaiyun.com/smk108/article/details/103326548</guid><author>smk108</author><pubDate>Sat, 30 Nov 2019 17:00:20 +0800</pubDate><description><![CDATA[更新中
]]></description><category></category></item><item><title><![CDATA[leaflet集成google map搜索、支持显示菜单功能的使用及demo]]></title><link>https://blog.youkuaiyun.com/smk108/article/details/102843586</link><guid>https://blog.youkuaiyun.com/smk108/article/details/102843586</guid><author>smk108</author><pubDate>Thu, 31 Oct 2019 18:58:54 +0800</pubDate><description><![CDATA[在《leaflet集成google map搜索、支持显示菜单功能（支持回车选中第一项，自定义菜单）》中简单介绍了为实现支持回车选中第一项，自定义菜单功能对Leaflet-gplaces-autocomplete的修改和React封装，并没有提及如何使用。本篇会通过我实现的一个demo介绍如何使用。

demo
在线地址：https://smk108.github.io/react-leaflet-...]]></description><category></category></item><item><title><![CDATA[使用antd form开发支持动态增减表单项，可选有初始值组件的一种实现方式（三）]]></title><link>https://blog.youkuaiyun.com/smk108/article/details/101784236</link><guid>https://blog.youkuaiyun.com/smk108/article/details/101784236</guid><author>smk108</author><pubDate>Mon, 30 Sep 2019 18:15:58 +0800</pubDate><description><![CDATA[以前我写过《使用antd form开发支持动态增减表单项，可选有初始值组件的一种实现方式》，介绍了一种使用antd form开发支持动态增减表单项的实现方式，为了方便维护和调试，最近抽时间写了一个简单的demo放在了github上，地址为：https://github.com/smk108/dynamic-form-item。
...]]></description><category></category></item><item><title><![CDATA[推荐一款Chrome读写cookie的插件（edit this cookie）]]></title><link>https://blog.youkuaiyun.com/smk108/article/details/100163976</link><guid>https://blog.youkuaiyun.com/smk108/article/details/100163976</guid><author>smk108</author><pubDate>Fri, 30 Aug 2019 18:26:03 +0800</pubDate><description><![CDATA[我们在开发调试中有时候会遇到需要查看、修改或添加cookie的情况，这里推荐针对chrome浏览器的一个很好的cookie管理器-edit this cookie。

在chrome网上应用店或者通过其它方法安装edit this cookie，然后就可以在以下几个位置看到并使用edit this cookie。

1、地址栏右边



2、右键菜单



3、F12调试工具



通常使用地址栏...]]></description><category></category></item><item><title><![CDATA[前端性能优化之js代码压缩（http请求里出现的一个5.5M的js包）]]></title><link>https://blog.youkuaiyun.com/smk108/article/details/97948116</link><guid>https://blog.youkuaiyun.com/smk108/article/details/97948116</guid><author>smk108</author><pubDate>Wed, 31 Jul 2019 19:07:15 +0800</pubDate><description><![CDATA[我在《记一次有点儿复杂的streamsets与自己开发模块集成的过程》里介绍过将streamsets集成到自己项目里的做法，开放出去之后不久就被吐槽页面加载太慢了。因为开发时都是在本地测试，基本都是瞬间加载出来，没有特别关注加载性能问题，上线后发现加载很慢，偶尔还会出现超时导致页面加载失败的情况，查了一下原因，发现竟然有一个5.5M的js包要加载！

资源包太大经常出现以下问题：

1、页面加载慢...]]></description><category></category></item><item><title><![CDATA[leaflet集成google map搜索、支持显示菜单功能（支持回车选中第一项，自定义菜单）]]></title><link>https://blog.youkuaiyun.com/smk108/article/details/94032034</link><guid>https://blog.youkuaiyun.com/smk108/article/details/94032034</guid><author>smk108</author><pubDate>Fri, 28 Jun 2019 18:51:01 +0800</pubDate><description><![CDATA[我之前参与过一个与地图展示相关的项目，是在react项目中使用leaflet实现的，当时项目中集成了地形、卫星、交通等图层，加入了一些停车场、交通信号灯等数据信息。当时项目中使用的是react-leaflet，但是我们知道leaflet有很多plugins可以使用，但是这些插件很多没有对应的react版本，有些插件也不满足我们的需求，所以在项目中修改了一些插件。

Leaflet-gplaces-...]]></description><category></category></item><item><title><![CDATA[CodeMirror实现自定义提示功能增强版（支持搜索、调用接口查询提示内容）]]></title><link>https://blog.youkuaiyun.com/smk108/article/details/89889348</link><guid>https://blog.youkuaiyun.com/smk108/article/details/89889348</guid><author>smk108</author><pubDate>Mon, 06 May 2019 19:18:01 +0800</pubDate><description><![CDATA[之前在《CodeMirror实现自定义提示功能》中介绍过CodeMirror实现自定义提示功能的一种实现方式，但是之前的实现有一些局限性，主要是：1、需要提示的内容是从variablePool中读取的，需要先确定variablePool；2、提示的内容需要一个个去选择，不支持搜索功能。

本文提供了一种解决上述两个问题的实现方式，不同的主要是handleShowHint这个方法，修改了一些提示逻辑...]]></description><category></category></item><item><title><![CDATA[mobx系列(七)- mobx开发调试工具]]></title><link>https://blog.youkuaiyun.com/smk108/article/details/89681663</link><guid>https://blog.youkuaiyun.com/smk108/article/details/89681663</guid><author>smk108</author><pubDate>Mon, 29 Apr 2019 19:48:59 +0800</pubDate><description><![CDATA[mobx还提供了一个开发调试工具：mobx-react-devtools，下面简单介绍下mobx-react-devtools的使用。

1、安装

npm install --save-dev mobx-react-devtools

2、使用

要想使用开发调试工具，需要先导入DevTools组件，然后在代码的某个位置渲染它，如：


import React, {Component} fro...]]></description><category></category></item><item><title><![CDATA[mobx系列(五)-Mobx常见问题及解决方案（2）observable state更新后组件不主动更新问题]]></title><link>https://blog.youkuaiyun.com/smk108/article/details/89681367</link><guid>https://blog.youkuaiyun.com/smk108/article/details/89681367</guid><author>smk108</author><pubDate>Mon, 29 Apr 2019 19:33:34 +0800</pubDate><description><![CDATA[在《mobx系列(二)-mobx主要概念》中解释过mobx对什么作出反应，如果对这一部分内容理解不清楚，开发中经常会遇到store中状态更新了，但是组件没有重新渲染的问题。本文简单列举几种情况及解决方法。

1、缓存observables 属性并存储在本地

这是文档中的一个示例，指的是从 observable 属性中提取数据并存储，这样的数据是不会被追踪的：


class User {
  @...]]></description><category></category></item><item><title><![CDATA[记一次有点儿复杂的streamsets与自己开发模块集成的过程]]></title><link>https://blog.youkuaiyun.com/smk108/article/details/88620720</link><guid>https://blog.youkuaiyun.com/smk108/article/details/88620720</guid><author>smk108</author><pubDate>Sun, 17 Mar 2019 16:31:14 +0800</pubDate><description><![CDATA[最近参与一个项目的开发，leader和产品决定使用开源的streamsets做底层服务和监控页面。除开发产品模块页面外，我还负责streamsets前端的修改和与自己开发模块的集成。

经过调研，streamsets前端使用的技术栈和我们公司常用的技术有些出入，并不太方便直接从代码层面合成一个项目，决定在自己项目中使用iframe嵌入streamsets监控、日志等页面。

最终整个产品架构图如下...]]></description><category></category></item><item><title><![CDATA[CodeMirror实现自定义提示功能]]></title><link>https://blog.youkuaiyun.com/smk108/article/details/87637299</link><guid>https://blog.youkuaiyun.com/smk108/article/details/87637299</guid><author>smk108</author><pubDate>Mon, 18 Feb 2019 18:57:39 +0800</pubDate><description><![CDATA[我之前在文章《CodeMirror基本使用及实现关键词高亮、自定义主题》中简单介绍了CodeMirror实现自动提示的功能，但是使用的是CodeMirror中封装好的几种指定语法的提示功能，如css、html、js、sql、xml，对应文件如下列表：



现在我开发中有需求做自定义语法的自动提示功能，并没有现成的mode可以使用，学习CodeMirror API和上述几个文件的实现方式之后找到了...]]></description><category></category></item><item><title><![CDATA[CodeMirror:Uncaught TypeError codeMirrorInstance.fromTextArea is not a function]]></title><link>https://blog.youkuaiyun.com/smk108/article/details/86651290</link><guid>https://blog.youkuaiyun.com/smk108/article/details/86651290</guid><author>smk108</author><pubDate>Fri, 25 Jan 2019 20:07:00 +0800</pubDate><description><![CDATA[之前在《CodeMirror实现关键词高亮及自定义主题》中简单介绍过react-codeMirror的使用和主题的自定义方式，最近在另外一个webpack打包的React项目中再次使用时遇到题目中比较奇怪的问题，请教了两位同事，终于解决了该问题，特此记录一下排查问题的过程及导致问题的原因。

首先说明一下问题，在组件中使用最简单的方式使用react-codeMirror，代码示例如下：


imp...]]></description><category></category></item><item><title><![CDATA[我不再使用React.setState的3个原因]]></title><link>https://blog.youkuaiyun.com/smk108/article/details/85237838</link><guid>https://blog.youkuaiyun.com/smk108/article/details/85237838</guid><author>smk108</author><pubDate>Mon, 24 Dec 2018 19:32:15 +0800</pubDate><description><![CDATA[从几个月前开始，我在新开发的React组件中不再使用setState。我并没有停止使用局部组件状态，只是不再用React来管理这些state，这是很不错的一个选择。

对于React初学者来说，使用setState是比较棘手的。即使是经验丰富的React开发者，在使用React本身的状态管理机制时，也经常会出现一些比较微妙的bug，例如：



忘记setState是异步的导致的bug：控制台的输...]]></description><category></category></item><item><title><![CDATA[mobx系列(三)-在React中使用Mobx]]></title><link>https://blog.youkuaiyun.com/smk108/article/details/85053903</link><guid>https://blog.youkuaiyun.com/smk108/article/details/85053903</guid><author>smk108</author><pubDate>Mon, 17 Dec 2018 18:45:29 +0800</pubDate><description><![CDATA[Mobx提供了一个mobx-react包帮助开发者方便地在React中使用Mobx，mobx-react中有observer、Provider、inject几个常用的api。在《mobx系列(二)-mobx主要概念》中我们已经介绍过observer，本文介绍下inject、Provider，以及Mobx如何与React结合使用。

1、Provider

Provider是一个React组件，使用...]]></description><category></category></item><item><title><![CDATA[mobx系列(二)-mobx主要概念]]></title><link>https://blog.youkuaiyun.com/smk108/article/details/84960159</link><guid>https://blog.youkuaiyun.com/smk108/article/details/84960159</guid><author>smk108</author><pubDate>Tue, 11 Dec 2018 19:36:49 +0800</pubDate><description><![CDATA[通过《Mobx系列(一)-Mobx简介》我们简单理解了Mobx的基本原理及流程，使用Mobx实现一个响应式的应用，主要分为三个步骤：

定义状态并使其可观察（state）
	对状态改变的响应（computed、autorun、reaction、observer、when）
	改变状态（action）
下面从这三个步骤的顺序介绍Mobx的主要概念。（版本为5.X、使用es7装饰器）

1、可观察状态...]]></description><category></category></item><item><title><![CDATA[mobx系列(一)-mobx简介]]></title><link>https://blog.youkuaiyun.com/smk108/article/details/84777649</link><guid>https://blog.youkuaiyun.com/smk108/article/details/84777649</guid><author>smk108</author><pubDate>Mon, 03 Dec 2018 19:16:50 +0800</pubDate><description><![CDATA[Mobx是通过函数响应式编程使状态管理变得简单和可扩展的状态管理库。Mobx和Redux一样，采用单向数据流管理状态：通过action改变应用的state，state的改变触发相应ui的更新，如下图所示：



Mobx有如下几个主要概念：

State：状态，应该是应用依赖的最小状态集，没有任何多余的状态，也不需要通过其他状态计算而来的中间状态；

Computed value：计算值，是根据s...]]></description><category></category></item><item><title><![CDATA[使用antd form开发支持动态增减表单项，可选有初始值组件的一种实现方式（二）]]></title><link>https://blog.youkuaiyun.com/smk108/article/details/84554386</link><guid>https://blog.youkuaiyun.com/smk108/article/details/84554386</guid><author>smk108</author><pubDate>Mon, 26 Nov 2018 19:00:38 +0800</pubDate><description><![CDATA[注：该篇为上一篇《使用antd form开发支持动态增减表单项，可选有初始值组件的一种实现方式（一）》的 解释及使用说明。

地址：https://blog.youkuaiyun.com/smk108/article/details/84554186

该组件实现了从初始状态添加、有初始值的编辑、并一直支持动态增减表单项的功能，组件解释如下：

render时有没有初始值之keys的赋值：

const {g...]]></description><category></category></item><item><title><![CDATA[使用antd form开发支持动态增减表单项，可选有初始值组件的一种实现方式（一）]]></title><link>https://blog.youkuaiyun.com/smk108/article/details/84554186</link><guid>https://blog.youkuaiyun.com/smk108/article/details/84554186</guid><author>smk108</author><pubDate>Mon, 26 Nov 2018 18:43:23 +0800</pubDate><description><![CDATA[在使用antd form做动态表单开发时，官网有如下示例：



当添加表单项后：



使用此示例可以实现动态增加、减少表单项的功能，但是当我们编辑以前添加过的form表单时，该如何赋初值，又如何支持新增和编辑使用同一组件，即可以支持没有初值和有初值两种情况。本文分享了一种解决该问题的组件封装方式。

组件使用方式：


&lt;TagComponent
tag={tag}
label='tag...]]></description><category></category></item><item><title><![CDATA[mobx系列(五)-Mobx常见问题及解决方案（1）Mobx使用严格模式]]></title><link>https://blog.youkuaiyun.com/smk108/article/details/83185745</link><guid>https://blog.youkuaiyun.com/smk108/article/details/83185745</guid><author>smk108</author><pubDate>Fri, 19 Oct 2018 17:42:44 +0800</pubDate><description><![CDATA[mobx在严格模式下，不允许在 action 外更改任何状态。但是不同版本严格模式的用法不同，3.x、4.x、5.x三个版本下的严格模式用法。

1、mobx@3.x：useStrict(boolean)

2、mobx@4.x：configure({ enforceActions: boolean })

迁移说明：https://github.com/mobxjs/mobx/wiki/Migr...]]></description><category></category></item></channel></rss>