随笔分类 - 动人的JavaScript
摘要：前言 阮大师写入门教程能力一流。 首推它的Redux三篇入门文章。 http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html http://www.ruanyifeng.com/blog/2016
阅读全文
摘要：需求分析 水印效果如下： 除了直观需求，还有非直观需求。 1. 这是个背景图。 2. 文字样式以及文字本身可调整。 对于需求1，需要前端生成图片的能力。 该能力的原理：借用 或者 生成base64编码。 然后就可以很方便地设置背景图了。 对于需求2， 或`svg CSS3`都能实现。 这里使用 ，因
阅读全文
摘要：前言 众所周知，React跟Flux是一对好基友。 其中，市场流行的Flux有Redux，Mobx，Reflux。 其中，用法最简单的是Reflux。 其数据流思路如下： 我们能否再减少其数据流路径？如下： 两个字，可以。 需求分析 1. 集成Actions的功能到Stores。从而拿掉单独的Act
阅读全文
摘要：const的可变性 const用于声明常量。 什么是常量，声明后的值不可更改。 对于值类型，比如string,number等等。const声明确实有效。 对于引用类型，比如array,object。const声明只保证了引用不可更改，但保证不了其内容。 为了保证array和object的内容也不可更
阅读全文
摘要：前言 道生一，一生二，二生三，三生万物。 如果把这三看做顺序，分支，循环， 那么三生万物是指，它们能表达所有计算机程序逻辑。 如今它们有两种书写方式，哪种更优？ 如人饮水，冷暖自知。 分支 存在就是被选择。 大多数分支场景，可用if...else if...else或者switch来实现。 demo
阅读全文
摘要：0.前言 函数式编程拥有更好的，组合性，灵活性，容错性，相比面向对象编程。 函数式编程入门，需理解“纯函数”，“柯里化”，“函数组合”这三个概念。 PS:本篇文章的案例使用ramdajs工具库。 1.纯函数 什么是纯函数？ 相同输入，相同输出，无副作用。 什么是副作用？请看例子。 demo 1 0:
阅读全文
摘要：1.两个示例 示例1 输出为
render 2
componentDidMount 2 示例2 点击后this.state.clicked递增1，而不是递增2。 2.解释
首先介绍React的Transaction。
其源码在React/lib/Transaction.j...
阅读全文
摘要：1.package.json如下 为什么不用babel6.2呢？原因是它插件机制虽好，但是打包太慢了。 所以用回babel5.8，速度可以。 关于^符号就不说了吧。 ^1.2.3 =1.2.3 < 2.0.0 ^0.2.3 =0.2.3 < 0.3.0 ^0.0.3 =0.0.3 < 0.0.4 ^
阅读全文
摘要：H5输出条 需求： 在移动端网页输出调试信息。 包括字符串，数组，对象。 对外提供的接口： 弹出/隐藏输出框；普通，警告，错误...
阅读全文
摘要：封装：var Greeter = (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { ...
阅读全文
摘要：deferred对象 两个对象，一个是promise对象，另一个是deferred对象。 Deferred方法，返回deferred对象。 Deferred里面有then方法，返回promise对象。 ...
阅读全文
摘要：jQuery的DOMready jQuery的DOMready dom ready?
阅读全文
摘要：1.浏览器对script引用的js文件分两步，下载，下载完毕后马上执行；这两步都会阻塞浏览器继续解析。2.加入defer属性，，浏览器会异步加载js，待DOMContentLoaded后顺序执行js。3.预加载js，自定义执行时机。...Click to load alert.js ......4....
阅读全文
摘要：0.加载完页面，解析完所有标签（不包括执行CSS和JS），并如规范中所说的设置 interactive 和执行每个静态的script标签中的JS，然后触发。1.没有js，有css，有img，DOMContentLoaded事件不直接等待CSS文件、图片的加载完成2.有js，没有css，有img，DO...
阅读全文
摘要：/* * HTML5 Sortable jQuery Plugin * http://farhadi.ir/projects/html5sortable * * Copyright 2012, Ali Farhadi * Released under the MIT license. */(fun...
阅读全文
摘要：集合Collections
阅读全文
摘要：1.原型链function SuperType(){ this.property = true;}SuperType.prototype.getSuperValue = function(){ return this.property;};function SubType(){ this.subproperty = false;}//inherit from SuperTypeSubType.prototype = new SuperType();SubType.prototype.getSubValue = function (){ return this.subpr...
阅读全文
摘要：1.最简单的创建对象方法var person = new Object();person.name = "sam wu";person.age = 25;person.job = "frontend engineer";person.sayName = function(){ alert(this.name);};person.sayName();2.工厂模式创建对象function createPerson(name, age, job){ var o = new Object(); o.name = name; o.age = age; o.job
阅读全文