javascript
hao像飘在外太空
这个作者很懒,什么都没留下…
展开
-
ES6 import 引用文件夹/目录
看redux的时候发现官网的教程里直接import了一个文件夹,我再三确定我没有看错, 是一个 文件夹 (Directory), 它直接 import了一个目录! 这个 文件夹/目录底下还有一个index.js文件。我查了中文、英文、阮一峰、stackoverflow,我靠没查到,我郁闷了我纠结了, 我自己动手测试了下,随便新建了一个文件夹,写了点js,嘿嘿嘿嘿,居然真的可以, js文件只能原创 2016-08-27 18:57:58 · 22384 阅读 · 6 评论 -
对react“组件化”和“依赖倒置”的思考和实践
工作内外大大小小的项目写了很多个, 到了项目后期、2期、3期,代码果然不负众望的全部粘在一起, 然后再开始伟大的重构之路,多次循环这个过程之后,逐渐熟悉了这些会导致corruption的原因, 也开始重新理解 依赖倒置 这个知道又好像不知道的概念。...原创 2018-05-19 12:41:03 · 483 阅读 · 0 评论 -
draft.js:让光标显示在最后面
draft.js 如何实现像原生input组件的focus功能?三个困难:1.点击编辑器的空白处就focus2. focus的时候,光标在最前面,如何把光标移到最后面3.内容切换之后,光标的位置会错乱...原创 2018-05-20 18:37:59 · 3658 阅读 · 1 评论 -
draft.js:如何改变 draft.js 编辑框的高度
问题来由:draft.js的<Editor />组件,实际占位只有一行, 还不接受style和class属性,点击其他地方无法focus,想要输入文字只能点第一行: 如何把它的高度撑开,点击其他空白区域就能输入呢?...原创 2018-05-20 19:03:50 · 1060 阅读 · 0 评论 -
draft.js:不要使用redux来管理editorState
很多业务的实现都对 执行顺序 有要求 即 确保editorState更新完毕,组件渲染完成用setState的回调函数可以确保执行顺序: 先更新,再执行 而redux不能保证更新与执行的先后顺序比如,用redux管理editorState的情况下,...dispatch(someAction) // 改变了store中的editorState,进而导致react重新渲染doSo...原创 2018-05-20 23:50:01 · 905 阅读 · 0 评论 -
draft.js:内容清空之后,光标的位置会错乱
如果<Editor />处于focus的状态, 使用快捷键 清空编辑框内容 (没有失焦), 替换一个空的editorState,这时候再输入内容,光标会出现跑到文字前面去, 以及各种光标错乱的情况解决问题的关键在于 切换内容的时候,让编辑器失去焦点//先拿到ref "domEditor"...this.domEditor.blur原创 2018-05-21 00:05:17 · 1519 阅读 · 1 评论 -
如何更高效的组织代码和组件化 react redux 18年7月
代码 组织 的艺术 逻辑是围绕数据展开的,逻辑的目的也是数据,如果对某一部分数据的操作很密集、很集中, 这就有了最基本的划分组件的需求,那就把这部分数据包装成一个块,托管出去, 整个一块看成是一个点, 当前的逻辑就提高了一个抽象层级, 这个简单的系统就立体了起来,然后顺着数据的流动的方向,意义越来越具体,粒度越来越细, 逐渐向末端的视图组件靠近,这时候,围绕数据,就会有...原创 2018-07-08 08:44:43 · 306 阅读 · 0 评论 -
让代码容易阅读和维护
今天给3个月前的项目拓展功能,尽管自认为自己在组织代码上进步了不少, 但改起3个月前的东西来,让我想起梁静茹的歌,会呼吸的痛这块代码动不了,那块代码也动不了,wtf,这个是干嘛用的?? 最后还是要靠全局搜索今天的主题是:逻辑是对数据的解码1.遥远的呼应、隐藏的规则、晦涩的表达无法,或者暂时无法在代码中表现的, 要写在组件的readme里面,代码自己就会说话,这一部分就...原创 2018-07-08 09:47:48 · 324 阅读 · 0 评论 -
react-router4.0 从零快速上手,4个关键概念
看了好多写react-router的文章,一上来都是和以前有什么不同,和3.0有什么不同,哪里更好了,哪里不好了。搞得跟学术讨论一样,服了各位大神。我就想知道怎么用。教学大纲Router Route执行函数来跳转 获取url参数Router 和 Route 有什么区别 3.执行函数来跳转 4.获取url参数Router 就像 拔高一点 match...原创 2018-07-04 11:01:50 · 658 阅读 · 0 评论 -
react动画 react-transition-group 入门系列
As usual,第一步是npm install --save react-transition-group原创 2018-07-05 10:41:07 · 3946 阅读 · 0 评论 -
javascript sort方法排序失效的原因 可能存在空值
最近碰到一个小问题,data.sort((a,b) => b.create_time - a.create_time)开发过程中不免出现测试数据,缺胳膊少腿的, 有些数据条目没有create_time属性, 这就导致sort排序混乱,为没有create_time属性的数据项设置一个默认值或者直接过滤掉就可以了...原创 2018-07-18 15:08:53 · 5324 阅读 · 0 评论 -
react 使用fetch 上传文件 写法
第一,使用原生input的type=”file”<input type="file" name="file" onChange={this.onChange} style={{display:'none'}} ref={this.inputRef}/>第二,用它的onChange方法获得fi原创 2018-07-12 23:53:42 · 13792 阅读 · 0 评论 -
使用fetch遇到no multipart boundary was found的原因,以及三种content-type
使用form-data来post内容的时候,提示这个错误,使用form-data提交的时候,不要手动设置content-type,chrome会自动生成content-type,而且自动生成的content-type中会带有自动生成boundary另,使用json格式post的时候,content-type要设置成"application/json" ,还有一种content-type...原创 2018-09-19 14:50:55 · 4984 阅读 · 0 评论 -
draft.js : getPlainText 对换行符的修改 (填坑篇)
问题来由:偶然发现 同一个字符串str,传入editorState,再传出来,str.length就变了,逻辑如下:传入text得到新的editorState:const contentState = ContentState.createFromText(inputText) const editorState = EditorState.createWithContent...原创 2018-05-19 12:00:55 · 1536 阅读 · 0 评论 -
draft.js : onChange改装,判断文字内容是否修改
问题来由:draft-js <Editor />组件中的onChange 和 原生组件onchange是不同的, 原生的onchange只有在输入框文字内容变化的时候才触发, 而 draft-js 的onChange只要光标移动就会触发了,然而 后续业务逻辑 并不需要考虑光标的位置变化,解决方式:... onChange(editorState) { ...原创 2018-05-19 11:36:48 · 1501 阅读 · 0 评论 -
移动端 总是点击两次 点击穿透
Augest 17thAugest 16thtouch之后300ms会自动触发click事件,很诡异 全局禁止touch之后的click事件 window.addEventListener("touchstart", function(e){ e.preventDefault();});angular获取DOM元素var element=angular.element(document原创 2016-08-17 10:37:55 · 1117 阅读 · 0 评论 -
解决Cannot find module 'react/addons'
看了这么多,就没有一个讲明白的,就不能说清楚嘛…Add-ons是附加装置\附加软件的意思,Github上addons.md是这样说的现在要使用addons,你需要一个个单独安装, 比如你要使用TestUtils,你需要这么做npm install react-addons-test-utils --save-dev你要使用mixin,你需要这么做npm install react-addons-原创 2016-09-19 10:32:19 · 5239 阅读 · 0 评论 -
ionic后退按钮 有时候出现 有时隐藏
ionic 返回按钮back-nav-button 有时候出现 有时候又不出现之前自己写了返回按钮<button>,我发现有的页面第一次点击进去没问题,后几次再进这个页面就会多出来一个back按钮,貌似是cache在作怪 ui-router在当前加上一个cache:false....state('tab.somepage', { url: '/somepage',原创 2016-08-28 13:18:18 · 1000 阅读 · 0 评论 -
Ionic controller里的代码只能运行一次
Ionic controller里的代码只能运行一次 Ionic说:With the new view caching in Ionic, Controllers are only called when they are recreated or on app start, instead of every page change. 就说之前为什么controller只能激活一次,好烦,有这原创 2016-08-28 13:05:42 · 1677 阅读 · 0 评论 -
react创建组件的3种不同方式的区别 createClass ES6Class Statelessfunction
作者头还是晕的,正在努力写….原创 2016-09-22 11:48:01 · 3172 阅读 · 0 评论 -
babel无法解析es5、jsx
babel import babel-preset原创 2016-08-28 12:47:34 · 1088 阅读 · 0 评论 -
scope上绑定的函数找不到
一直很郁闷controller和directive模糊不清的关系,我想让directive保持独立,尽量和model(Service)没有关系,只是暴露出加载数据和操作状态的api给controller调用这里遇到两个问题在controller里面抓不到directive绑定在scope上的函数因为controller代码的初始化执行是在directive之前的, 即加载的时候先运行control原创 2016-10-03 19:07:27 · 626 阅读 · 0 评论 -
怎么用Coffeescript写函数、回调函数 function in Coffeescript
如果是写匿名函数,可是省去括号-> 1+2+3//得到这个(function() { (function() { return 1 + 2 + 3; });}).call(this);如果是带参数的匿名函数(a,b)->a+b//得到这个(function() { (function(a, b) {原创 2016-08-07 16:54:42 · 1977 阅读 · 0 评论 -
手机键盘 确认按钮 事件 监听 绑定(web移动端)
亲自测试,以下设置可以修改iOS的软键盘的确定按钮[右下角那个]1 标签需要具有 action属性<form action="#">或者<form action>都可以2 一定要设置typetype="search"或者type="text"都可以<form action="#"> <input type="text" /> </form>3 绑定确定按钮的函数$('form').on('sub原创 2016-12-01 16:35:42 · 15474 阅读 · 0 评论 -
javascript 点击保存到剪贴板 react可用,亲测好用
找了我半天,试了各种麻烦的方法,这个简单粗暴而且好用 首先npm install copy-to-clipboard --save使用方法import copy from 'copy-to-clipboard';const oneKeyCopy = (text) => { copy(text); //'我是要复制的内容' alert('成功复制到剪贴板');};原文来自 wyk3原创 2017-06-16 11:23:03 · 3412 阅读 · 0 评论 -
React textarea自适应文字高度伸缩 超简单版
亲测可用const Header = React.createClass({ onEdit(){ //关键是先设置为auto,目的为了重设高度(如果字数减少) this.refs.myTA.style.height = 'auto'; //如果高度不够,再重新设置 if(this.refs.myTA.scrollHeight原创 2017-05-31 13:22:38 · 5679 阅读 · 0 评论 -
web页面上 实现 “点击复制”, 只需要一行代码, 记录一下这个npm包
import copy from ‘copy-to-clipboard’copy(“some content”)原创 2018-01-22 11:22:00 · 7692 阅读 · 1 评论 -
移动端web页面底部输入框(固定元素)(软键盘弹出)解决方案
底部固定的输入框,如图:简单代码如下:&amp;amp;amp;amp;lt;div&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;Header/&amp;amp;amp;amp;gt; // absolute, top:0 &amp;amp;amp;amp;lt;Footer/&amp;amp;amp;amp;gt; // absolute, botto原创 2018-09-19 15:18:25 · 4010 阅读 · 0 评论