- 同构Web应用程序样板 react-devtools - 检查Chrome和Firefox开发人员工具中的React组件层次结构 react-hot-loader - 实时调整React组件 react-loadable...- Reactjs的表单生成器 react-form-builder - React.js的表单生成器 plexus-form - 使用JSON-Schema进行React的动态表单组件 tcomb-form...- 在React中生成复杂,经过验证和扩展的基于JSON的表单 Redux-Autoform - 从元数据中动态创建Redux-Forms uniforms - 一堆React组件和帮助器,可以轻松生成和验证表单...React - React形式 - React中的角状React形式 unform - ReactJS表单库,用于创建不受控制的表单结构,包含嵌套字段,验证等等!...了解Flux 在Flux中哟 React.js架构 - Flux VS Reflux 避免单页应用程序中的事件链 ReactJS和Flux 解构ReactJS的流量 Flux一步一步 实践中的流量 什么是
作者:苏生不惑 来源:苏生不惑 之前已经写过不少Chrome扩展那些我常用的 Chrome 扩展,这里继续推荐那些实用Chrome扩展 ,所谓实用就是能解决实际问题。...简单来说就是打开谷歌的扩展管理页面 chrome://extensions/ ,然后将下载crx文件拖进去,如果提示该扩展程序未列在 Chrome 网上应用店中,并可能是在您不知情的情况下添加的或者程序包无效...先把文件后缀.crx 改成 .rar,然后解压得到一个文件夹,再打开chrome://extensions/ ,点击右上角的开发者模式,就可以看到加载已解压的扩展程序,选择刚才解压好的文件夹,确认新增扩展程序就安装好了...自己摸索几下就会了,上谷歌后安装扩展就不用这么折腾了。 ? 下面是推荐的5个Chrome扩展。...hl=en 截图 ocr 这个扩展让你方便的复制图片/视频/PDF中的文字 https://ocr.space/copyfish ? 打开这篇文章那些我常听的中文播客节目,图片有中文的话先设置语言。
从零实现的Chrome扩展 Chrome扩展是一种可以在Chrome浏览器中添加新功能和修改浏览器行为的软件程序,例如我们常用的TamperMonkey、Proxy SwitchyOmega、AdGuard...那么问题来了,单纯凭借Js是没有办法做到一些能力的,比如拦截请求、修改请求头等等,这些Native的能力单凭Js肯定是做不到的,起码也得上C++直接运行在浏览器代码中才可以,实际上解决这个问题也很简单,...不过我们可以有一些简单的方法,来缓解这个问题,我们在开发扩展的最大的一个问题是需要在更新的时候去手动点击刷新来加载插件,那么针对于这个问题,我们可以借助chrome.runtime.reload()来实现一个简单的插件重新加载能力...Chrome扩展能做的东西实在是太多了,如果不了解或者不开源的话根本不敢安装,因为扩展权限太高可能会造成很严重的例如用户信息泄漏等问题,即使是比如像Firefox那样必须要上传源代码的方式来加强审核,也很难杜绝所有的隐患...此外注册Chrome扩展的开发者价格是5$,注册之后才能在谷歌商店发布扩展。那么首先,我们先在popup中绘制一个界面,用来展示当前的扩展状态,以及提供一些操作按钮。
store是一个类似数据库的存储(或者可以叫做状态树),需要设计自己的数据结构来在状态树中存储自己的数据。 Redux入门 Redux简介 Redux是一个状态集中管理库。...设计State结构 在 Redux 应用中,所有的 state 都被保存在一个单一对象中。在写代码之前我们首先要想清楚这个对象的结构,要用最简单的形式把应用中的state用对象描述出来。...Reducer拆分 这里我们以redux中文文档 中的todo应用为例来说明,在应用的需求中,有添加todo项,设置todo列表的过滤条件等多个action,同理我们就需要写多个reducer来描述状态是怎么改变的...所以接下来,让我们来介绍一个复杂的场景,我们来看看redux是如何应用在大型复杂充满异步事件的场景中的。 ?...在异步操作这块,我们建议使用 redux-saga 中间件来创建更加复杂的异步 action。其中涉及到es6中的Generators可以在文档中查看。
之前已经写过不少Chrome扩展那些我常用的 Chrome 扩展,这里继续推荐那些实用Chrome扩展 ,所谓实用就是能解决实际问题。...简单来说就是打开谷歌的扩展管理页面 chrome://extensions/ ,然后将下载crx文件拖进去,如果提示该扩展程序未列在 Chrome 网上应用店中,并可能是在您不知情的情况下添加的或者程序包无效...先把文件后缀.crx 改成 .rar,然后解压得到一个文件夹,再打开chrome://extensions/ ,点击右上角的开发者模式,就可以看到加载已解压的扩展程序,选择刚才解压好的文件夹,确认新增扩展程序就安装好了...自己摸索几下就会了,上谷歌后安装扩展就不用这么折腾了。 ? 下面是推荐的5个Chrome扩展。...hl=en 截图 ocr 这个扩展让你方便的复制图片/视频/PDF中的文字 https://ocr.space/copyfish ? 打开这篇文章那些我常听的中文播客节目,图片有中文的话先设置语言。
忙活了有一段时间,零零散散的写了一个Chrome扩展。这里发发一篇文章安利一下。 怎样的一个扩展呢 它是一个Gmail 过滤器辅助工具,使用这个扩展可以轻松的创建邮件过滤器。 有图有真相 ?...如何下载 Chrome Store 大中华局域网用户下载地址 为什么写这个扩展 还是那个原因,自己遇到了不爽与痛点。 我是一个重度的Gmail用户,工作的邮箱使用Gmail托管。...创建一个Filter大致的流程是这样的 1.复制过滤规则(通常为邮件地址) 2.点击创建Filter按钮 3.将过滤规则填入Filter条件框中 4.点击创建规则 然而,这实际上是一个重复的步骤...开源么 当然开源,原因如下 个人能力和精力毕竟有限 希望通过社区的力量推动这个扩展持续发展 所以,如果你有想法的话,可以访问这个Github地址 https://github.com/androidyue.../Gmail-Helper-Filter 贡献力量 除了开源贡献代码外,如果你有想法,也可以共享力量,比如 提需求 提bug 分享本文或扩展 捐赠(下面那个红色按钮) 感谢 再次感谢我的御用设计师 大麦
在学习了React之后, 紧跟着而来的就是Redux了~ 在系统性的学习一个东西的时候, 了解其背景、设计以及解决了什么问题都是非常必要的。...(这不能忍,状态如果无法预测以及控制) 那么Redux就是试图让 state 的变化变得可预测。这些限制条件反映在 Redux 的三大原则中。...核心概念 1.Redux使用普通的对象来描述state,这个对象就是Modal。 ? 2.要想更新 state 中的数据,你需要发起一个 action。...: ----定制 connector 的行为 Redux存在的问题(解决的方案)?...与其说缺点,不如说是Redux的优势而造成的不可避免的劣势,问题应该辩证地看~ 纯净。Redux只支持同步,让状态可预测,方便测试。
之前已经写过 那些实用的 Chrome 扩展神器 ,如果你不能上谷歌没法直接安装Chrome扩展,可以使用https://crxdl.com/ 这个网站下载crx文件,然后手动安装。 ?...下面继续推荐几个实用的Chrome扩展神器。 划词翻译 支持谷歌、百度、有道三大翻译和朗读引擎,可以方便的查看、复制和朗读不同引擎的翻译结果,选中文字直接翻译。 ? 也可以翻译英文 ?...可以一键切换为手机、平板电脑、PC浏览器的UserAgent,方便开发者在PC上测试网站,解决网站的兼容性问题。 ?...Chrome扩展地址 https://chrome.google.com/webstore/detail/rooster-for-chrome/pimolnhbniceppehbgmibnbgcnhpkhfh...OBS这类直播软件,就可以把浏览器任何页面直播到B站、斗鱼或者虎牙的直播间里去,假如你有自己的直播间并且也安装了Node.js的话,那么可以安装这个Chrome扩展玩下,适合做无人值守音乐轮播或者电影轮播什么的
之前写过 那些实用的 Chrome 扩展神器 那些实用的 Chrome 扩展神器(二),这里继续分享实用的 Chrome 扩展。 本来安装Chrome扩展很简单。 ?...但由于国内没法上谷歌,淘宝就有了对应的下载Chrome扩展服务,帮忙下载个插件收费20,第一次看到的时候我是震惊的。 ?...chrome://extensions/ 将下载的crx文件拖进去就好了。...utm_source=install 比如这个知乎问题 https://www.zhihu.com/question/25699277,有新的回答及时通知我。 ? 点击监控整个页面。 ?...CPU/内存使用率监控器 在浏览器扩展图标上显示系统 CPU 或内存的使用率。
之前分享过那些我常用的 Chrome 扩展 ,一篇文章内容有限,于是有了后续篇。...Chrome扩展地址 https://chrome.google.com/webstore/detail/%E5%BE%AE%E4%BF%A1%E5%90%8C%E6%AD%A5%E5%8A%A9%E6%...在Chrome浏览器上享受经典的超级马里奥兄弟游戏!...如果不想安装扩展还有个网页版https://www.yikm.net/ Chrome扩展地址 https://chrome.google.com/webstore/detail/super-mario-bros...查看类似网站 这个扩展能让你获得正访问的网站相关的10个类似网站结果,来看看微博类似的有Facebook,baidu。
这次分享几个自己工作这几年下来,平常用的比较多的几个谷歌浏览器的扩展程序。 AdBlock 最受欢迎的 Chrome 扩展,拥有超过 6000 万用户!拦截网页上的广告。...RestLet支持get、post、put、delete、head、options、patch等方法,支持以表单的形式测试接口,以及测试上传附件的接口。...MultiLogin 这是一款能打开多个独立隐身窗口的工具 ,在现在的互联网环境中,大多系统都是已经实现了单点登录了,即一处登录,处处登录,一处注销,处处注销。...当在同一套系统中想要登录多个用户时,通常的情况是打开一个谷歌浏览器的隐身窗口,但是Chrome只支持打开一个独立环境的隐身窗口,如果同时打开多个隐身窗口,cookie等信息是共享的,也可以用360浏览器...最后的最后,这些扩展程序都是自己经常用到的,如果大家也有好用的Chrome插件也可以推荐给我。
Chrome 浏览器扩展神器油猴 请停用以开发者模式运行的扩展程序?搞定谷歌浏览器插件弹窗 上不了谷歌如何安装 Chrome 扩展?...这里再推荐几个有趣/实用的 Chrome 扩展神器,都是我经常使用的。...二管家 这是一个管理扩展的扩展 ,可以获取扩展更新通知并记录拓展历史,自动开启/关闭拓展,根据当前网站获取二管家社区推荐,Chrome 扩展地址 https://chrome.google.com/webstore...• 脱机浏览备份数据 • 将备份数据导出为 Excel 文件 • 将备份数据中的图片上传到 Cloudinary 云存储 • 迁移备份数据到当前豆瓣帐号 点击新建任务,选择备份的项目,我这里选的豆邮...E8%AF%AD/aomdloeklfjnepbopeagobbgclmghgng/ ,通过从网页内容中挑选一些词语翻译成外语,让用户可以根据上下文更好的学习和理解想要学习的外语,可以设定单词难度来学习不同难度的词语
Field组件是redux-form组件库中的核心组件,它位于你的输入框(input)或输入框组件的外一层,将其包装起来从而使输入框能和redux的store直接连接起来。...component中,比如以上的renderField中 2Field组件的name属性和component属性 name属性是Filed组件的名称,也即Field下输入框的名称,它将成为存储form表单数据的...values对象中的属性名:比如?.../api/Props.md/ handleSubmit是处理提交的一个函数,接收三个参数:values(即上文提到的保存表单数据的对象),dispatch和props(传递给自定义表单组件的属性) pristine...是一个布尔型的值,如果表单初始化后尚未输入值,为true,否则为false,当你向表单中第一个输入框中输入值的时候,pristine就由true转为false了 reset是一个函数,调用reset()
1999/xhtml"> PHP获取表单...area数据中的换行问题 1.PHP函数nl2br()是在字符串中的每个新行...(\r\n)之前插入HTML换行符:; 2.Windows下的换行是(\r\n); 3.在记事本中,\r或\n均有换行的功能;
那时候还没有chrome,所以在ff会遇到这个问题,IE下不会。...由于最近很长的时候已经将重心转到flash相关的开发上,所以对于网页中遇到的一些问题,我能不过问都不会去仔细看。...但最近在将游戏接入新浪微博的微游戏的平台时,遇到了一个问题:就是点击游戏内(flash)一个按钮,调用页面中的js函数,这个时候会将swf隐藏(none掉了,因为swf不能设置它的wmode为transparent...--透明,设置后游戏有些模块在操作中会受影响),而当处理完操作后,会再将游戏显示出来(block),然后看到游戏重新加载了,IE下没有发现此问题,chrome百分百重现此问题。...出现此问题的原因,以前查过相关资源,好像是说ff和chrome这一类的浏览器,在加载和渲染flash的时候使用了延后处理的技术,对flash的支持也没有像IE那样好。
2、 AdBlock 最受欢迎的 Chrome 扩展,拥有超过 6000 万用户!拦截网页上的广告。 ?...6、Chromoji - Emoji 在某些系统中并不能显示 Emoji 表情,安装此扩展后就能在浏览器中显示和输入,你也能选择显示 Apple 或 Google 风格的 Emoji。 ?...10、图流 这个厉害了,你是否曾为了看图片,一张一张的点,看完一个系列手都费了,简直痛不欲生,现在,福音来了。 让我们打开知乎问题《平常人可以漂亮到什么程度?》,查看全部答案,开启图流,你会发现。...这里放上我心中的偶像 Linus 的贡献图。 ? 15、Git History 这个扩展可以很炫酷地展示 GitHub 中任意一个文件的历史修改情况。 ? ?...16、Tampermonkey 油猴怕是没有人不知道,它基本上是所有扩展中的佼佼者了。
AdBlock 最受欢迎的 Chrome 扩展,拥有超过 6000 万用户!拦截网页上的广告。 ? 链接:AdBlock 3....图流 这个厉害了,你是否曾为了看图片,一张一张的点,看完一个系列手都费了,简直痛不欲生,现在,福音来了。 让我们打开知乎问题《平常人可以漂亮到什么程度?》,查看全部答案,开启图流,你会发现。 ?...Enhanced Github 这个可以在 GitHub 中显示仓库大小,每个文件的大小,下载链接和复制文件内容的选项。 ? 要是能够支持单文件夹下载那就更好了。...Git History 这个扩展可以很炫酷地展示 GitHub 中任意一个文件的历史修改情况。 ? 链接:Git History 14....Tampermonkey 油猴怕是没有人不知道,它基本上是所有扩展中的佼佼者了。
分享过的扩展有油猴,ocr图片取字,音乐聚合,图片助手,微博图床,视频下载器,翻译,截图,微博备份,微信同步助手,b站助手,豆瓣电影传送门等等,这里继续分享那些好用的 Chrome 扩展。...IDM可以让用户自动下载某些类型的文件,可将文件划分为多个下载点以更快下载,并行出最近的下载,方便访问文件 下载idm软件后会直接安装好Chrome扩展 ? 在扩展程序里开启idm扩展 ?...Chrome扩展地址 https://chrome.google.com/webstore/detail/%E7%9F%A5%E8%AF%86%E6%98%9F%E7%90%83%E5%B0%8F%E5%...hl=zh-CN 捕捉网页截图 捕捉网页截图,编辑并将它们保存为PDF,JPEG,GIF,PNG或BMP;上传,打印,在Photoshop中打开,复制到剪贴板或电子邮件。 ?...它还有对应的油猴扩展 https://greasyfork.org/zh-CN/scripts/378301 京价保 京价宝是一个帮助你自动申请京东价格保护的chrome拓展 https://jjb.im
2、 AdBlock 最受欢迎的 Chrome 扩展,拥有超过 6000 万用户!拦截网页上的广告。...6、Chromoji - Emoji 在某些系统中并不能显示 Emoji 表情,安装此扩展后就能在浏览器中显示和输入,你也能选择显示 Apple 或 Google 风格的 Emoji。...10、图流 这个厉害了,你是否曾为了看图片,一张一张的点,看完一个系列手都费了,简直痛不欲生,现在,福音来了。 让我们打开知乎问题《平常人可以漂亮到什么程度?》,查看全部答案,开启图流,你会发现。...这里放上我心中的偶像 Linus 的贡献图。 15、Git History 这个扩展可以很炫酷地展示 GitHub 中任意一个文件的历史修改情况。...16、Tampermonkey 油猴怕是没有人不知道,它基本上是所有扩展中的佼佼者了。
Google 浏览器 Chrome 是我现在主要使用的浏览器,Chrome 更新到 2.0 之后,除了支持 Greasemonkey 之外,也开始支持扩展。...Gmail Checker 这个扩展可以显示你的 Gmail 中还有多少邮件没有读取。 安装 + 下载源代码。 2....在 Google Reader 中订阅 这个扩展能够让你非常容易和快速使用 Google Reader 订阅当前网页的 Feed。...安装 + 下载源代码 当然对于那些想自己动手写 Chrome 扩展的同学,这里有一个教程教你如何创建一个非常简单的 Chrome 扩展。...目前删除 Chrome 的扩展比较麻烦,需要手工到你的用户数据目录(user data directory )下找到相应的扩展,然后删除它,不过 Chrome 承诺以后会更加容易删除扩展。 ----
领取专属 10元无门槛券
手把手带您无忧上云