浅谈vue双向绑定的代码实现

vue 会把每个实例的data和props都包装成Observer,里面有一个dep实例,包含所有订阅该Observer的watcher。

watcher中的关键参数expOrFn,代表getter,字符串则解析,函数则执行。

初始化的时候,调用get方法,建立订阅关系。还有一个cb参数,代表更新的方法。

Dep类会记录下所有的Watcher,当数据更新的时候,dep会通知所有watcher更新。

watcher访问属性的时候,Dep的静态属性target会指向该watcher,以便在属性的getter中知道是否为watcher的访问。

vm的render方法作为watcher的expOrFn 传入构造函数中。

本质上是一套观察者模式。

移动端布局的三种方法

一、固定高度,宽度自适应

首先设置width=device-width,然后根据320作为满屏尺寸,(320是iphone4和iphone5的理想尺寸),换算设计稿的尺寸。比如设计稿的满屏尺寸为640,其中一个图片的宽度是50px,那么它在实际设置中就应该设置为25px。 其它元素水平方向混合使用定值和百分比,或者使用flex布局。

Read More...

《代码整洁之道》摘记

  1. 我们都曾经瞟一眼自己亲手造成的混乱,决定弃之而不顾,走向新一天。我们都曾经看到自己的烂程序居然能运行,然后断言能运行的烂程序总比什么都没有强。我们都曾经说过有朝一日再回头清理。淡然,在那些日子里,我们都没听过勒布朗法则:稍后等于永不(Later equals never)。
  2. 整洁的代码只做好一件事。
  3. 减少重复代码,提高表达力,提早构建简单抽象。

命名:

  1. 名副其实
  2. 避免误导
  3. 做有意义的区分
  4. 使用读得出来的名称
  5. 使用可搜索的名称

doctype 对 line-height 的影响

前几天写页面的时候,碰到了一个问题,使用 line-height 来使一张图片垂直居中,可是并没有成功。折腾了半天,发现问题出在忘记在页面上设置 doctype
doctype 的作用是声明浏览器应该以哪种文档类型来渲染页面。
<!DOCTYPE html> 表示以 HTML5 来渲染页面,也是目前主流的写法。许多样式和标签在不同的文档类型下都会存在差异,所以写页面千万不能忘记写上 <!DOCTYPE html>