chunpu

本文专门记录我再做MVVM时遇到的难点和bug ### 无法触发刷新 场景 ``` html {%raw%}{{tasks.length - activeCount}}{%endraw%} remain ``` 为什么会无法触发呢？触发的条件是属性修改(add, update, delete). 而需要注意的是model仅仅observe自己的属性, 并不会知道嵌套属性的修改. 因此, activeCount修改, h1的内容会轻松的变化, 然而tasks length属性的变化(删除task)却无法触发刷新, 因为length已经属于tasks这个scope的东西了 解决方法: 1. 不再以model作为刷新节点的单位, 只要是属性修改, 全部节点刷新, 这势必带来不必要的性能损失, 我个人非常喜欢model控制一片的概念, 这个方法必然否决...

## 大标题一 ### 中标题一 ### 中标题二 #### 小标题一 #### 小标题二 ## 段落标题编号CSS实现 ### markdown写法 ``` 大标题一 --- ### 中标题一 ### 中标题二 #### 小标题一 #### 小标题二 ``` ### CSS Counter [CSS...

TDD(Test Driven Development) TDD就是**先写测试, 后写程序** 不是每个人都想写测试的, 很大原因是懒 > :confused:我就是开发的, 跑一下看看就知道对不对, 要什么测试, 而且测试就是我写的, 没啥用啊 ### 测试的意义 - 有说服力: 如果测试说测出bug了, 至少我能告诉他, 在这个case下程序是正确的 - 容易接手: 同事要辞职, 我却不能肯定他的代码对不对, 如果有测试就没这么多忧虑了 - 卖相好: 自己写一个项目, 写的明明比别人好, api比人家简洁,...

`MVVM`虽然用到的地方很少, 但对于特定网页应用, 如复杂表单, todo等尤其实用. `MVVM`的概念早就吵的很火了, 根本不需要多解释, 今天我们来试着实现一下一个最基本的mvvm小框架 MVVM最大的功劳在于可以减少大量的dom操作, 因为mvvm框架早就帮你处理好了, 因此, mvvm的速度就在于dom操作的快不快 dom操作快不快, 取决于mvvm操作的dom大小, 粒度越细, 操作越快, 也就是说mvvm应该操作的是不可再分的attribute(nodeType = 2)和text(nodeType = 3)节点 先看一下mvvm一般怎么用的, [我的例子](http://codepen.io/ftft1885/pen/slfhF) ``` html Hello {%raw%}{{name}}{%endraw%}! ``` 这是一个最简单的html, 直接写在dom中, 不是写在script中的那种...

之前写过一篇`I promise, I resolve`, 但我连微博都没发, 因为我自己都觉得很扯淡, 现在看来果然是在扯淡 这里说的Promise是es6 harmony的Promise, 而非那个DOM Promise. 现在的Chrome两种Promise都支持, 但默认为DOM的Promise, 要想打开harmony模式, 还得要在`chrome://flag`中打开harmony (启用实验性 JavaScript) 分辨dom promise和harmony promise的方法就是在dev中输入`Promise(function(){})` 如果报错了说明是dom的promise, 不报错则为harmony的promise 因为dom的promise标准已经被删除, 而harmony的promise既可以在浏览器中用又可以将来在nodejs中用, 我们当然是选harmony的promise啦 现在我们来尝试用100行左右代码实现一下promise的大概功能 首先写出主要的`Promise`函数 ``` javascript function...

最近深受打击，认识的几个菊苣工资都高的吓人，简直膝盖都跪烂了, 何时屌丝才能够钱娶到心爱的妹子啊 之前写网页，都是直接一个inline的style和一个inline的script搞定的 不开玩笑了..模块加载的好处是显而易见的，解决模块依赖的关系，线上联调(加url代理)方便 [AMD](https://github.com/amdjs/amdjs-api/wiki/AMD)就是一个模块加载的方案 AMD全称(Asynchronous Module Definition), 三个单词每个都是关键字，一个是异步，一个是模块，最后是定义 AMD暴露在外的函数只有一个: `define` 用requirejs的可能会说不是`require([], funciton() {xxx})`的么，但我们发现require完全可以改成define，虽然在语义上确实说不大通，我明明是要用这些个库，凭什么让我们用define呢，require才对嘛 但AMD标准就是如此，因此我们在真实环境中也应该用define而不是require define的重载非常多 比如可以直接用来纯依赖 mod1.js ``` javascript define(['./sub-mod1', './sub-mod2', './sub-mod3']) ``` 可以完全不写factory 说到factory可能有人不明白了 这里要说到define函数的三个参数 - `id` 给一个标志，这样别人通过id获取这个模块，而不是通过路径关系获取...

data函数在jQuery中看起来很不起眼, 就像沙滩上一颗平凡的沙子, 但仔细一瞅, 却惊讶的发现data是jQuery中无比重要的一环, 甚至jQuery中各种事件都基于此 --- data在jQuery中有两种 一个是用来存数据的, 对应的对象分别是 - 存储对象: `data_user` - 获取与设置方法: `$.data(el, key, value)` 另一个是用来存事件的, 如click事件那种, 对应的对象分别是 - 存储对象: `data_priv` - 获取与设置方法: `$._data(el, key, value)` `data_user`和`data_priv`, 就如其名,...

注意：本文只为了看一些被墙的文献，18岁以下请主动关闭此页 这里将介绍3种使用国外vps科学上网的方法，分别是`vpn`, `ssh`, `shadowsocks` 首先是vpn翻墙，vpn一般是全局科学上网，不管是iPhone还是Android还是windows都不需要安装任何其他软件就可以翻*墙，对客户端来说是最方便的方案 服务端部署也不麻烦(有了下文的一键脚本后..)，就3步 1 - 下载并运行脚本 ``` sh wget http://soft.yzs.me/pptpd.sh;sh pptpd.sh ``` 2 - 按脚本提示填写ip和网卡 ``` sh Which IP is your server IP: IP:(就是你服务器IP) Please input the...

今天给图片加背景的时候, 突然发现底部总是多出来3px(chrome下) 觉得非常奇怪, 还专门把html拎出来, css全删了还是出现底边, 后来把``都删了, 那条底边才没. 大家告诉我是没有reset css, 但加上margin和padding的重置后依然没用 不只是chrome, firefox有5px的底边, IE也有4px左右的底边, 具体可以看问题的放大版http://codepen.io/ftft1885/pen/CpDwa 问题的原因就是img属于inline元素, inline元素一般都是文字, 而英文的小写字母`y`和`g`底部比别人多出来一段, 因此不管inline元素中有什么, 都会默认为y和g留出底部一段距离, 这段距离和字体大小有关, 比如把字体放大到129px后, 它外层的容易高度已经到了156px 不过知道了img表现同文字一样, 我们就能有很多解决办法 ``` css img { display: block;...

Promise是当今大热, 很多人选择Promise来控制自己的异步流程, Promise甚至还进了下一代标准, 在最新的浏览器(chrome 32, 最新的Firefox)中已经自带 要注意的是Promise目前属于DOM Object, 虽然是es6的标准, 但只要不进v8, nodejs就不可能内置, (还是yield好 Promise的API可以参照[MDN中的文档](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), 以及html5rock中的[这一篇](http://www.html5rocks.com/en/tutorials/es6/promises/) 首先要知道Promise最基本的用法, 把原生的Promise替换掉, 效果还一样就说明大致成功了 ### 最简单的promise用法 ``` javascript new Promise(function(resolve) { setTimeout(function() { resolve('hello') }, 1000) }).then(function(d)...