12 2017 档案
摘要：一个最简单的代理例子：index.html中有如下代码 里面访问的是相对地址，但我本地并没有服务器有提供这些api。把以上的路径补全为云服务器上的绝对路径，但是又报CORS错误。 解决办法是配置一个代理。这里通过webpack-dev-server实现，简单的配置文件如下： 接着运行（以当前目录作为
阅读全文
摘要：https://reactjs.org/docs/lists-and-keys.html#keys 以下代码运行会报错：Warning: Each child in an array or iterator should have a unique 'key' prop. 改成这样子，就不会报错了：
阅读全文
摘要：参考 ：译文 编写一个loader https://webpack.github.io/docs/loaders.html 按照loader的返回值可以分为两种： 最左loader：这种loader会返回字符串描述的js模块代码，已经是loader的最终处理结果了，这样的字符串会被添加到webpac
阅读全文
摘要：https://doc.webpack-china.org/contribute/writing-a-loader loader是一个导出了函数的node模块，当资源须要被这个loader所转换的时候，这个函数就会被执行，这个函数可以通过this访问loader api。有三种方式来本地开发和测试l
阅读全文
摘要：参考： http://www.alloyteam.com/2017/05/guide-styled-components/ https://medium.com/styled-components/getting-sassy-with-sass-styled-theme-9a375cfb78e8 h
阅读全文
摘要：https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0 PWA是一些技术的集合。用于消除web与其他客户端之间的差距，最大程序利用现代浏览器的技术，提供一个更像移动应用的网页体验，改善了性能，支持离线，以及能实现一些只有
阅读全文
摘要：受控组件 以上关键的地方在于： state中设置表单的初始状态，当表单设置onChange，onChange中获取合成事件，通过evt.target.value把表单的值通过setState触发渲染，显示到界面上。 受控组件顾名思义，组件的状态受到控制，state与界面上显示的值时刻保持双向绑定。优
阅读全文
摘要：前后端分离 数据直出 以上两者的区别：前者开发效率高，对多终端开发很方便；后者效率高，只请求了一次，就这一次请求的优化，可以大大优化用户的体验（初始数据能尽快显示，减少首屏时间） 服务端渲染 在以上数据直出的基础上，拉取数据之后，就开始在服务端渲染，把渲染后的html返回（后续交互用的js、css等
阅读全文
摘要：http://mp.weixin.qq.com/s/X8bbwYk3SAkDQVIe4CuGrg 1.在构造函数作用域中处理数据，还可以在构造函数中对函数进行定义，调用参数中的数据（私有变量） 优点：不会与实例属性的名字出现冲突 缺点：如果其他成员方法也要访问这个属性，就都要定义在构造函数中，这样就
阅读全文
摘要：Vue和React都使用虚拟dom，React拥有更加丰富的生态系统。 渲染上的区别 React重新渲染的时候会以这个组件为根，将整颗子树进行渲染，手动实现shouldComponentUpdate进行优化，而Vue组件的依赖是在渲染过程中自动追踪的，所以系统能精确知晓哪个组件确实需要被重渲染。你可
阅读全文
摘要：https://github.com/atian25/blog/issues/5 更快地执行digest： 优化watch $scope.$watch(watchExpression, modelChangeCallback) 不在watchExpression中做耗时的操作（dom操作），因为wa
阅读全文
摘要：watchCollection：监听集合元素的变化，而不能监听到集合元素内部的属性变化，只要集合中元素的引用没有发生变化，则认为无变化。用这个api也可以监听普通对象的第一层属性变化。 watch：监听数据有没有发生变化，引用有无发生变化、原始类型数值有无发生变化等。除非指定第三个参数为true，否
阅读全文
摘要：快捷键 修改快捷键 window-》preference-》general-》keys： 查找引用：ctrl+shift+g 覆盖测试：alt+shift+E，T 复制一行：ctrl+alt+down 调试运行：alt+shift+D,T改为： 查找引用：ctrl+g 覆盖测试：ctrl+W 复制一
阅读全文
摘要：无状态组件中没有这些生命周期方法 挂载 初始化props，通过类的静态属性defaultProps或者getDefaultProps函数，初始化的props会与父组件指定的props合并，最后赋值给this.props constructor()，或者getInitialState componen
阅读全文
摘要：默认的渲染行为 初始情况下，组件树中所有组件都进行了虚拟dom的生成（绿色） 接着组件进行setState（红色节点），然后重新生成虚拟dom（蓝色节点），生成的虚拟dom树再与之前的对应节点的虚拟dom进行diff，然后对差异进行应用 针对以上过程可以发现，假如setState没有影响到子组件，或
阅读全文
摘要：https://io-meter.com/2016/09/03/Functional-Go-persist-datastructure-intro/ 持久化的数据结构（Persistent Data Structure） 对这类数据结构进行的任何修改，都会返回一个修改后的备份，而不会影响原来结构中的
阅读全文
摘要：基本的用法就是把一个vue应用中所有的状态都放进store中，然后在computed对象中读取store（这里实际上有两种方式，一是注入store（this.$store.state.xx），二是直接访问全局的store，store.state.xxx） 以上每个状态都需要放到computed中返回
阅读全文
摘要：对象属性的响应规则 运行结果： 可见，vue初始化时创建的getter/setter是递归创建的，不管这个值是否是对象，都会为这个属性创建 getter和setter 方法。有了这些getter和setter方法，直接执行： 以上都是响应式的。 或者直接把msg替换了也是响应式的，因为msg也有对应
阅读全文
摘要：纯粹使用react进行表单校验： 可见为了维持双向绑定，以及校验信息。一个input至少需要3个以上的变量（value + change callback + verify message），表单比较大的话，代码逻辑十分复杂。 redux-form-utils这个库没做好，内部报错了用不了。直接使用
阅读全文
摘要：https://segmentfault.com/a/1190000002447556#articleHeader12 https://developer.mozilla.org/zh-CN/docs/Web/Events/hashchange 事件类型一栏表：https://developer.m
阅读全文
摘要：http://www.ruanyifeng.com/blog/2016/05/react_router.html 路由的切换方式有两种： 两者的关系可以查看这里：http://www.cnblogs.com/hellohello/p/8040289.html 路由组件之间的数据传递，可以认为是页面之
阅读全文
摘要：http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html http://cn.redux.js.org/docs/api/applyMiddleware.html 也参考《深入React技术栈》
阅读全文
摘要：容器型组件（container component） 含有抽象数据而没有业务逻辑的组件 负责管理数据和业务逻辑，不负责 UI 的呈现 带有内部状态 展示型组件（presentational component） 只负责 UI 的呈现 没有状态（即不使用this.state这个变量），一般可以写成无状
阅读全文
摘要：https://facebook.github.io/flux/docs/dispatcher.html#content 首先安装 Dispatcher dispatcher 和 订阅发布模式（pub-sub systems）有两个不同点： 例子 演示第一个不同点： 运行结果： 可见注册的所有回调函
阅读全文
摘要：参考：https://blog.andrewray.me/the-reactjs-controller-view-pattern/ Flux参考：http://www.cnblogs.com/hellohello/p/8024263.html 创造一个顶层组件来管理所有的state，并把这些stat
阅读全文
摘要：参考：https://blog.andrewray.me/flux-for-stupid-people/ http://www.ruanyifeng.com/blog/2016/01/flux.html https://github.com/facebook/flux/tree/master/exa
阅读全文
摘要：参考：https://github.com/youngwind/blog/issues/107 首先回顾以下原生事件的两个方法：event.stopImmediatePropagation 和 event.stopPropagation ，前者可以阻止同一dom上的后续事件的执行以及阻止冒泡，后者仅
阅读全文
摘要：https://github.com/livoras/blog/issues/13 这里简单记录一些要点和理解： 一个dom元素中有许多属性，操作dom是很耗资源的，而操作自定义的js对象是很高效。所以在操作dom之间多加一层“虚拟dom”，建立虚拟dom与dom的关联，把直接操作dom转换为操作虚
阅读全文
摘要：https://github.com/livoras/blog/issues/11 MVC 调用关系如下： Controller(model) ，controller中执行业务逻辑，操作model View(controller,model)，view中绑定dom的交互事件，回调函数中调用contr
阅读全文
摘要：JS事件流机制 一个完整的JS事件流是从window开始，最后回到window的一个过程，事件流被分为三个阶段： (1~5)捕获过程、(5~6)目标过程、(6~10)冒泡过程。 通过addEventListener可以监听冒泡阶段的事件，如果第三个参数指定为true，则监听的是捕获阶段的事件。低版本
阅读全文
摘要：http://www.cnblogs.com/caihg/p/6519422.html 二维数组的扁平化 核心方法是concat。concat方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组 思路是获取二维数组中的单元（一维数组或单个值），将这些单元都concat合并到 [ ]
阅读全文
摘要：基础概念 元素数据之间的共享，使用jquery 的data方法。 通过data-role属性指定元素的role，常用的有：page、header、content、footer，button、listview 组件、控件相关的概念基本都有对应的role可以直接使用 一屏幕只能显示一个page，html
阅读全文
摘要：https://div.io/topic/1092 https://zhuanlan.zhihu.com/p/25216275 关于手机屏幕 普通显示屏：旧手机，iPhone3，在屏幕上能看到物理像素点 高清显示屏（视网膜屏、retina屏幕）：可以把更多的像素点压缩到一块屏幕内，基本看不到物理像素
阅读全文
摘要：子绝父相 https://developer.mozilla.org/zh-CN/docs/Web/CSS/position 利用子绝父相来实现一种比较老的居中方式：1.明确宽度；2.定位左边到容器的中间位置；3.margin-left负值来左移元素的一半，实现元素容器居中 小三角 思路很简单，就是
阅读全文
摘要：参考：http://www.cnblogs.com/dojo-lzz/p/3999013.html 元素转为BFC的条件（任意实现其一即可） 根元素 float的值不为none overflow的值不为visible display的值为inline-block、table-cell、table-c
阅读全文
摘要：参考：http://www.cnblogs.com/StormSpirit/archive/2012/10/24/2736453.html 总结特点 多个并排的table-cell始终等高。 宽度可以根据内容而自动扩展，这和inlineBlock是一样的 最大的宽度就是当前行剩下的宽度，对于这点配合
阅读全文
摘要：默认情况下（行内基线位置 = 行内元素最大高度）： 如果对这个正方形使用 vertival-align：middle。在最大高度的元素上使用负值（middle = - 50% * 元素高度），可以提升基线位置，如下： http://www.cnblogs.com/xueming/archive/20
阅读全文
摘要：https://segmentfault.com/a/1190000002695791 http://www.html5jscss.com/html5-semantics-section.html#0
阅读全文
浙公网安备 33010602011771号