简单的 JavaScript Reactivity 实现

2018-08-02

通过Object.defineProperty，简单地实现一个具备响应能力的Watcher方法。

const data = { price: 10, quantity: 2 };
let total = 0, target = null;
class Dep {
  constructor() {
    this.listeners = [];
  }
  
  depen() {
    if (target && typeof target === 'function') {
      this.listeners.push(target);
    }
  }
  
  notify() {
    this.listeners.forEach(listener => listener());
  }
};
Object.keys(data).forEach(key => {
  const dep = new Dep();
  let originalValue = data[key];
  
  Object.defineProperty(data, key, {
    get() {
      dep.depen();
      return originalValue;
    },
    set(newVal) {
      originalValue = newVal;
      dep.notify();
    },
  });
});
function Watcher(func) {
  target = func;
  target();
  target = null;
}
Watcher(() => {
  total = data.price * data.quantity;
});
// total => 20
// data.price = 50
// total => 100
// data.quantity = 10
// total => 500

MAC上SSH使用PEM文件登录的方法

2018-02-12

假设你已经得到pem文件。

一、直接登录

1	ssh -i key.pem root@IP

如果出现报错，说明这个问题是文件的权限太大，执行下面的设置：

1	sudo chmod 600 key.pem

然后再执行上面的连接操作就可以。

二、添加pem文件

可以使用ssh-add添加pem文件，如下：

1	ssh-add -k key.pem

添加成功后，即可直接登录：

1	ssh root@IP

但是在电脑重启后，需要重新添加pem文件。

More...

初识 CSS Grid

2018-02-08

一、关于页面布局

在最开始，网页基本都是通过table、float浮动或者position定位进行布局，那是比较单调的年代。随着技术的发展，单调的布局方式已经满足不了需求。接着就有了flexbox，一个专门为响应式页面而设计的布局模式。Flexbox可以很容易地对元素或内容进行排版，并获各大主流浏览器支持，可以说是目前页面布局的首选。

但是，Flexbox还不算是最好的响应式布局方式，它更多的只适合于一维的页面布局，某些布局还需依赖外围元素，下面的例子会说到。而这次说要讲的CSS Grid，将会是最好的响应式布局方式。栅格系统相信很多人都知道，但是它的实现方式，基本都是通过上面所提到的布局方式来生成，而CSS Grid作为原生能力，虽同叫栅格，却又大不相同，它可以轻松应对各种复杂的二维页面布局，用法简单，功能强大。

二、先来一个小例子

有了CSS Grid，我们在开发网页时，页面就像是一块带网格的木板，我们可以随意地在板上贴上模块，并且模块位置可以随意调整，不受元素结构影响。下面将用一个小例子来演示一下。

如下图：

More...

Axios-源码分析

2017-08-25

Axios 可以说是当前 Github 上最受关注的 HTTP 库，目前已经有超过 25k 的 star 数。作为 vue.js 官方推荐的 HTTP 库，必然有着过人之处。

Axios 的主要特性包括：

基于 Promise
支持浏览器和 node.js
可添加拦截器和转换请求和响应数据
请求可以取消
自动转换 JSON 数据
客户端支持防范 XSRF
支持各主流浏览器及 IE8+

对比于 fetch，除了同样支持 Promise API 外，aixos 的确拥有更加丰富的功能，而这次的源码分析也主要是针对‘拦截器’和‘请求取消’。

More...

vi常用命令

2017-06-03

一、命令模式和编辑模式切换

进入vi之后默认是命令模式，按i或者insert以及其他编辑键进入编辑模式，按esc或者crtl+c退出编辑模式。

二、保存命令

按ESC键跳到命令模式，然后：

:w 保存文件但不退出vi
:x 保存文件并退出vi
:w file 将修改另外保存到file中，不退出vi
:w! 强制保存，不退出vi
:wq 保存文件并退出vi
:wq! 强制保存文件，并退出vi
:q 不保存文件，退出vi
:q! 不保存文件，强制退出vi
:e! 放弃所有修改，从上次保存文件开始再编辑

如何编写高效的 CSS 选择符

2017-04-24

大部分人看到下面的这一小段 CSS 代码：

1	#menus > li { font-size: 14px; }

可能都会猜想浏览器会使从左到右匹配上面的规则，我们会想象浏览器先找到唯一的 id 为 menus 的元素，然后把样式应用到其直系子元素 li 元素上。这看起来好像还挺高效的。

但是，事实上，CSS 选择符是从右到左进行匹配的。所以，上面的这条规则并不高效，浏览器必需遍历页面上的每个 li 元素并确定其父元素的 id 是否为 menus。

样式系统从最右边的选择符开始向左匹配规则。只有当前选择符的左边还有其他的选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。 —- 《在 Mozilla UI 中编写高效的 CSS》 David Hyatt

More...

Github上前端项目常见的dot文件

2016-11-14

.gitignore

这个文件的作用就是告诉Git哪些文件不需要添加到版本管理中。

在实际项目中，往往会有很多文件不需要进行版本管理，例如这几个常见的：

1
2
3

.DS_Store
node_modules/
dist/

.gitattributes

这个文件的作用是可以对项目中的个别文件或目录定义不同的合并策略，让Git知道怎样比较非文本文件，在你提交或签出前让 Git 过滤内容。

但是在Github上却有别的用处。在Github的仓库上，咱们都可以看到项目的描述下方会有一条颜色的粗线，不同的颜色代表不同的语言，例如黄色代表javascript。然后在搜索的时候，所显示的项目类型是由占比例最多的文件来决定，这样偶尔会出现JS的项目类型却是HTML，就只因为HTML的文件比JS的多。

More...