- 博客(49)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 团队git流程
前一段时间接触一个新团队时，发现他们因没有”流程”，常发生代码合并困难，或者合并后漏掉几个commit，上线后把别人代码搞坏的情况。由此想探讨一下“流程”问题。两大流程调查时发现阮一峰老师在Git 工作流程一文中已经探讨了3种经典流程，由此了解到几种经典流程的名字：git flow, github flow, 和 gitlab flow。不过我认为git flow不适合多人协作，所以只探讨gi...
2019-11-22 23:56:49
573
原创 我为什么要练习写作
我为什么要练习写作最近开始阅读有关写作的书籍，并尝试一旦有想法就动手写下来的练习。我老公对这种行为非常不解。在他的眼中，这样的文字是硬”挤”出来的，没有任何的意义。而且现在自媒体为了让自己的文章吸引眼球，什么都干，包括造假。让好好的文学蒙羞，让文字变成了哗众取宠的工具，带上了功利的色彩。而我练习写作的动机，也正有迎合当代网络市场的意思，想哪天能够拓展一下主业，不用再做业务狗。于是我们就有了一场短...
2019-10-27 12:31:49
572
原创 用redux dev tools远程调试模式
目录安装修改创建Store代码安装本地redux dev tool服务器启用远程调试在调试一个Chrome插件的时候，第一次用到了Redux DevTools的远程模式，进而了解到React Native的开发朋友们平时都是怎么调试redux store的。使用远程模式，需要App在启用Redux DevTool的基础上，再添加[remote-redux-devtools](https://g...
2019-09-29 23:32:46
885
翻译 译：手把手教你如何写自定义babel代码转换
译：手把手教你如何写自定义babel代码转换今天，我将分享如何一步步写一个自定义babel转换工具。你可以利用这项技术来自动化代码的修改，重构以及生成。什么是babel？Babel 是一个Javascript 编译器，它主要被用于将ECMA Script 2015以上的代码转换成目前或者更老版本浏览器或者环境可以兼容的版本。Babel的代码变换启用了插件系统，这个插件系统可以让任何人基于ba...
2019-09-14 23:50:14
6817
原创 笔记：通过sftp命令行上传文件至Akamai CDN
通过sftp命令行上传文件至Akamai CDN在尝试上传文件到Akamai时顺便学会了一个新linux命令sftp。我做这个上传接口拥有的资源是：我的文件，akamai的域名地址，用户名，已申请并获得权限的公私钥和一个指定的文件夹目录。基于这些条件，我需要知道：如何通过sftp用指定密钥登录Akamai如何通过sftp上传文件通过查询sftp文档，了解到登陆ftp服务器非常简单，只...
2019-09-12 21:56:04
654
原创 在Redux里怎么存数据？论数据标准化
在一个复杂的项目中，我们可以将Redux store看成为客户端的缓存数据库。众所周知数据库的设计大有讲究，需要考虑到数据查找的性能，和可拓展性。作为前端“数据库”的Redux store也是同样的，存放的方式、位置不好会增加bug出现的几率、读写数据的复杂度、维护的成本。那你说我们在数据层已经将数据处理了一遍，前端再加一层处理不是多此一举吗？的确，随着对用户体验的要求越来越高，而支持着这种极...
2019-06-30 23:17:54
3908
1
原创 Hook改变的React Component写法思路(4) - useReducer
其实一开始看到useReducer的时候，还以为它跟react的好伙伴redux有什么关系。然而也就是借鉴了redux的设计模式的状态操作工具而已。目前使用Redux的小伙伴们可能还需要用原来的react-redux提供的connect HOC一段时间。尽管facebook已经在做相关的hook，目前还处于不稳定的状态，使用后果自负（项目地址：https://github.com/faceboo...
2019-05-13 22:19:38
795
原创 Hook改变的React Component写法思路(3) - useContext
首先我们回忆一下React Context API的用法（生产者消费者模式）。创建context对象：// context初始值const INITIAL_VALUE = ‘’;const MyContext = React.createContext(INITIAL_VALUE);划定context使用的范围，管理它的值：function App() { return (...
2019-05-12 17:41:03
1466
原创 Hook改变的React Component写法思路(2) - useCallback和useMemo
文章目录useCallback把匿名回调“存”起来useMemo保存一些计算值useCallback把匿名回调“存”起来在之前版本的文档和大牛的blog中都有提到避免在component render时候声明匿名方法，因为这些匿名方法会被反复重新声明而无法被多次利用。在Class component当中我们通常将回调函数声明为类成员：class MyComponent extends Re...
2019-05-12 15:55:35
4825
1
原创 Hook 改变的 React Component 写法思路(1) - useState和useEffect
Hook 改变的 React Component 写法思路React hook 在酝酿近一年后，终于在16.8稳定版中重磅推出。在此前后FB的Dan大神劳心劳力地几乎每天在Twitter上给大家洗脑宣传。那它究竟跟之前的React应用相比有什么改变？前提是先要理解MemoizeMemoize是贯穿hook用法的一个非常重要的概念，理解它是正确使用hook的基石。Memoize基本上就是把...
2019-04-28 17:10:32
7055
1
原创 关于React + Redux文件目录结构
关于React + Redux文件目录结构初期一种新的方案数据模型只有读取操作读写操作并存只写根据数据模型来组织Redux文件的优点尽量减少单个数据模型的深度初期按照文件内容类型分：-- project/ -- app/ -- assets/ -- icons/ -- components/ -- MyComponent/ -- i...
2019-03-24 12:00:25
1560
原创 Redux + React复杂项目中的依赖选择
Redux + React复杂项目中的依赖选择应用场景中间件的选择，Thunk还是Saga？安装依赖必须的如果使用路由注意钩子的特殊要求调试首先重申一下，我对Redux的定位是客户端数据库。详情可读我上一篇博文：https://mp.csdn.net/postedit/88383902。应用场景这里复杂项目的定义：需要长期维护会不断增加修改新的部件多人协作对客户端轻负担要求高...
2019-03-24 11:49:35
1086
原创 怎么看待Redux
文章目录对于Redux的几点粗俗的理解StateStoreActionReducer除此之外其实就是客户端数据库？最后对于Redux的几点粗俗的理解以下均出于个人理解，查证可能不足，欢迎读者指正。可以说Redux是流行框架React不折不扣的最佳伴侣。React管理显示，贤内助Redux管理数据。除了优雅的设计和高逼格的理论概念，易于上手和为数据管理提供的便利（其实并不一定）深深吸引了前...
2019-03-10 21:06:42
514
原创 ES6写JSDoc的一些经验和实例
ES6写JSDoc的一些经验和实例关于JSDoc和它的基本语法支持，请参考官方文档：http://usejsdoc.org/。虽说官方文档还是比较全的，实际使用中还是需要摸索一下适合自己项目的写法，并考虑最终文档生成工具的支持。例1：Object类型在function中的定义假设我们有个需要Object参数的方法。可以这样写：/** * 把两个数字a和b加起来 * @...
2018-09-10 11:40:36
7761
4
原创 为Git库设置持续集成做自动化测试（TravisCI + Github）
CI - Continuous Integration 也就是持续集成。关于持续即成的概念可参考其他大神的日志：http://www.ruanyifeng.com/blog/2015/09/continuous-integration.html。 随着近年Devops的盛行，市面上CI服务提供商也非常多。比如在这篇文章：https://stackify.com/top-continuous...
2018-08-28 13:02:11
2472
原创 手把手教你为Javascript/Node Github库设置测试覆盖率徽标(Coverage Badge)
# 手把手教你为Javascript/Node Github库设置测试覆盖率徽标(Coverage Badge)怎样让一个Github库变得炫酷起来？很简单，README.MD文件作为库的封面，可以做很多文章。最显眼的应该就是badge（勋章）了。勋章通常位于库标题下方，或是动态生成，或只是静态图片，用来展示库的当前状态简洁明了。不过也不要用太多勋章，这会让库看起来杂乱无章。勋章示例：...
2018-08-27 14:23:51
2191
原创 用Javascript如何拷贝指定文字？
页面上给用户提供一串字符(通常是URL或者分享代码)，然后旁边有个拷贝按钮可以让用户直接点击复制是个很常见的简单的功能．但真的要去做的时候，发现一切并没有我理想当中的那么简单． 浏览器为了确保是用户自己做的操作，复制的内容必须是“选中”的，“可见”的。除此之外，还需要考虑头疼的浏览器兼容问题。“选中”的复制内容选中不光可以通过用户操作，也可以通过JS：用任意HTML，通过Selec
2018-01-14 19:59:42
4653
原创 用JS分析、导出CSV文件
CSV是comma separated values的缩写，现已成为常用的数据文档格式之一。虽说它可以用Excel等表格处理软件打开修改，但它本质上是个纯文本文件，并且格式相当简单：每一行数据为行，每一列数据由分隔符隔开。因此，在分析CSV文件的时候，我会选择将其转为二维数组或一组Object便于处理。而在导出时，则相反地，转为纯文本。说起来很简单，但由于CSV并未标准化，不同软件系统使用的行
2017-11-19 16:30:29
16663
原创 Ember.js的那些坑
用了一年Ember.js，从2.3到2.10，因为数据量大，以及项(xu)目(qiu)的复(bian)杂(tai)性踩了不少坑，感觉再也不会爱了。在把这个锅甩出去之前，小小总结一下，以示后人，知己知彼方能百战百胜。注意，这篇我只吐槽。
2017-04-25 00:14:14
12034
原创 使用Yeoman你必须要知道的
不得不说，这年头写JS程序变得越来越复杂了。虽然大家都为了让写JS变得更简单而创建框架、创建工具，但是感觉已经开始偏离了最初的目的。今天来说说Yeoman，一帮人为了让写AngularJS程序更高端智能而创建的一个工具。可以利用简单的命令行操作帮你初始化一个Angular App，CSS、图片、View和JS应该放哪都帮你决定好了，连复杂的Grunt都帮你配好了。前端同志只要用”grunt serve“就可以预览你的Web App而不用配置Web服务器，用"grunt build"就可以导出经过压缩的CS
2014-09-22 21:42:08
2621
原创 用GruntJS合并、压缩JS文件
长期东忙西忙，却不忙更新自己的博客，缺少输出，甚为惭愧记得我当初刚接触GruntJS的时候对NodeJS一知半解，所以第一次使用花了些时间才熟悉起来。本文希望能帮助朋友们快速入门。为什么要合并、压缩你的JS文件？在开始之前，先重申一下这个问题。因为经常在帮忙改东西的时候看到HTML页面上引用了N个JS，而通常看到这个就知道这人JS写得有多糟糕了。HTML里穿插一堆JS代码的我就不吐槽了
2014-07-07 23:38:23
2164
原创 用jQuery UI做简单九宫格拼图（2）
上一篇中介绍了一个简单的拼图。缺点是图片只要放对位置，就不会再被拖动。现在我们可以把这个拼图的代码稍加修改，给它增加一些难度。（改动的代码我会用注释的方式作为比较和参考。）继续沿用上一篇中的HTML结构，小修CSS：#jigsaw IMG.dropped{ position:absolute !important;}这么做完全是因为jQuery UI会在元素dropped之后自动给元素加上
2014-07-05 21:02:19
1388
原创 Web Responsive Table, 只需CSS使table在手机和平板中完美显示
在做responsive或者手机版页面的时候，经常碰到在手机和平板中会因为长度问题把页面撑大。最近看到一个比较好，比较方便的方法，而且仅仅用CSS 2就可以实现！实例URL：http://dbushell.com/demos/tables/rt_05-01-12.html已经验证支持webkit引擎及firefox，很可惜IE这个混蛋不能改table标签的display属性。慢点看看有没有
2014-04-03 19:15:41
4584
原创 BUG笔记：Win8 IE10下input[type="password"]内字符显示被截取问题
这个BUG发生的截图：这是发生在Windows8 IE10下，type为password的input文本框内输入长串字符后，初次失去焦点的时候会发生的一个BUG。发生BUG的原因是这个文本框上应用的字体为@font-face指定的非web-safe字体。不过我并未使用多个web-safe字体或非web-safe实验来验证这点，IE11也未验证，简单地指定.gt-ie9 inpu
2014-03-27 11:40:50
1436
原创 ［Google Maps API 3］Marker从Clusterer中分离及Marker置于Cluster上一层的解决办法
在Google Maps API的使用中，经常用到Clusterer来避免过密的Marker显示。但仔细看一下Clusterer的设置参数中并没有直接将某些Marker除外的方法，那遇到这样的需求，怎么做呢？以下是我从StackoverFlow上获得的解答，也是实践下来最佳的方法：思路很简单，就是用Clusterer对象提供的方法将Marker从中移除，然后用Marker对象的setMap方法
2014-03-18 22:53:53
2278
原创 BUG笔记：Firefox select选项右侧边框没了
Firefox 的default select在某些情况下右侧边框会消失。截图如下：这个目前为止没有看到有任何解决方案，HACK也没有。。。囧。。。有高人知道吗？
2014-03-04 17:53:09
1949
原创 BUG笔记：Win XP IE8下HTML Parsing Error: Unable to modify the parent container element before the child
［Bug描述］Windows XP IE8的某些版本下页面只显示一部分，其余为空白。IE左下角有惊叹号报错标志，点开后显示字符如下：HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917) Line: 0 Char: 0 Code
2014-03-01 00:12:23
1759
原创 iOS中textbox文本框清除圆角
在iOS、Mac safari中，所有的textbox, select, checkbox都会被强制美化为圆角。但在特殊情况下需要清除圆角时发现iOS中使用以下传统的css无效：border-radius: 0;-webkit-border-radius: 0;然后无奈之下用了以下代码才奏效：-webkit-appearance: none;
2014-02-23 21:53:56
1447
原创 用SCSS需要小心IE对css的几个限制
IE对CSS的限制主要有两个：一个页面中引用的CSS只读前32个一个CSS文件中只读前4095个选择器关于这个问题的文章有很多，我就不细讲了。我想讲的是在用SCSS写CSS的时候非常容易超过这第二个限制。SCSS的继承，MIXIN和其他特性非常好用，我们可能会分成很多个文件，这些文件都互相有关联，但是为了减少浏览器请求文件次数，通常会将多个文件合并压缩成一个文件。那么如果碰
2014-02-16 17:23:57
4317
1
原创 BUG笔记：Android原生浏览器不认负百分数margin致Foundation Orbit往右滑动动画出错
一看这标题就知道无比蛋疼了是不？至少我从来不用安卓自带的浏览器。。。发现这个bug的场景：万恶的Foundation，它的滚动图片插件Orbit在安卓自带浏览器下手指从左往右滑动时动画仍旧表现为从右往左滑动。只有在安卓自带浏览器下会发生哦！罪魁祸首是foundation写这个插件时候用jQuery的css动画从'marginLeft':'-100%'到'marginLeft':'0%'来实
2014-02-14 10:53:14
1850
3
原创 Bug笔记：Google Map第一次缩放位置偏移
这是个让人蛋疼的bug，认真查看Google maps API文档的童鞋们一定不会碰到。我的同事为项目写了个针对map这块的jQuery plugin，然后在项目测试中发现，刚加载完页面时，直接点击map上toolbar的zoom in/out按钮或者用鼠标滚轮对地图进行放大缩小时，位置不知道偏到哪个黑暗的小角落去了。我看了丫代码半天，没发现啥问题，感觉问题是出在center的值不对，可是
2014-02-12 11:11:10
2126
原创 Bug笔记：-webkit-appearance:none导致无法获取checkbox值
这个BUG发生的背景有点复杂。大概就是一个Form表单，要用Validation Plugin验证，Ajax提交。结果发现在Webkit浏览器下无论怎样都阻止这个form在提交的时候刷新整个页面。最后总算抓到元凶是checkbox上的-webkit-appearance:none属性。-webkit-appearance会将webkit浏览器中的元素默认样式去除。checkbox在
2013-01-17 10:51:20
5991
原创 Javascript的Image对象、图像渲染与浏览器内存两三事
最近做的一个页面需要播放大量大尺寸高质量的图片。由于设计要求和限制一千多张图片必须放在同一个页面中切换，在这个过程中发现了许多关于Image对象和浏览器的内存问题，然而网上讨论该问题的文章并不多。希望我这篇东西能给读者一些参考。使用Javascript创建new Image()对象的最主要作用就是实现图片预加载。预加载的实现很简单，百度谷歌一下会有很多相关的文章。其核心说到底也就两句话：
2012-08-25 15:40:22
5459
4
原创 用jQuery UI做简单九宫格拼图
最近在搞一个很复杂的页面，搞得脑子有点疲劳。。。抽空把前段时间用jQuery UI写的一个非常简单的九宫格拼图重新分析一下，转换一下心情。jQuery UI提供了许多非常有用的工具，如draggable、droppable等。这可以让我们用很少的代码实现复杂的功能，并且做到多浏览器兼容。这个九宫格拼图根据需求的不同，我做了两个版本。由于两个版本的JS代码变化还是比较大的，所以我准备分开来讲
2012-07-25 13:53:57
4836
原创 非网页安全字体不再依赖Cufon！CSS @font-face的使用
网页安全字体这个概念前端们应该都清楚，那遇到非网页安全字体为了保证网页在用户电脑中显示不破坏页面整体的设计，通常少量的文字可以用图片来代替，也可以用Javascript的Cufon来画出这个字体。那实际上这些字体都是付费使用的，这两种做法都有可能引发一些侵权的问题，也会在一定程度上拖慢网页的浏览速度。所以现在推荐使用@font-face，通过将字体文件上传到服务器端来保证客户端的显示一致。@f
2012-07-04 11:27:47
2417
原创 设置viewport后Colorbox在iPhone中不能居中显示
如上图，Colorbox(version:1.3.19 + jQuery 1.7.2 )在iPhone浏览器中未能屏幕居中显示。查了半天，发现是由于页面设置了viewport，而Colorbox中使用了$window.width()/$window.height()来获取计算弹出窗口的位置所致。为了适应移动设备，一般我们会设置Viewport（可视区纠正）。即在头中添加如下设置：w
2012-07-04 10:30:25
1360
原创 通过jQuery调用ASP.NET的AJAX
传统上，在ASP.NET页面中实现AJAX的方法是拖放一个ScriptManager控件，并进行一系列的设置和相关编程。但事实上，这并不是理想的解决方案。使用jQuery来调用ASP.NET后台的方法来实现AJAX可以节省至少三次的服务器与客户端之间的通讯连接。要实现通过jQuery的AJAX来调用ASP.NET后台的方法并不复杂，可以通过一个简单的例子来说明。首先，在ASP.NET项目中
2012-06-24 01:41:55
2139
原创 关于浏览器地址栏和标题栏显示的小图标
写这篇文是因为原来我一直觉得这个图标是个很高级的东西啊。。。真的接触了才知道原来只是那么简单。不过这个小小的细节会给网站增色不少哦！ICO图标的制作第一步，简单的ICO图标只需要一张图片，JPG、PNG、GIF都可以。可以用GIF就意味着你还可以做个有动画效果的高级图标O(∩_∩)O，不过不推荐这么做，因为GIF动画文件比较大，会延迟页面加载速度。【注意】图片必须为16px * 16px大
2012-04-28 14:50:38
1941
原创 Magento网店自定义模板初探（4）——Package读取机制
Magento是个很强大的php网店建站系统。它将模块与结构皮肤分离得相当清晰，为建站提供很大的灵活性和定制性。但是这点也造成了它上手困难的缺陷。可以说不看相关文档会觉得一头雾水，除了CSS根本不知道上哪里去改HTML结构和修改模块的位置。我使用的是1.6.2.0版。我在此系列第一篇文章中介绍了Magento的文件夹结构。文中强调base文件夹不能够删除，这是为什么呢？下面就来探讨这个问题。
2012-03-16 16:49:37
1278
OReilly.JavaScript.The.Definitive.Guide.5th.Edition.chm
2014-04-10
jQuery图片滑动插件imgSlideInput 0.0.2
2012-02-05
jQuery图片滑动插件imgSlideInput
2012-02-02
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人