1.函数防抖（debounce）

连续的调用，停止t后才会执行该动作，若在这t内又调用此动作则将重新计算t

场景案例1：

监听 resize 事件，每缩小（或者放大）一次浏览器，实际上会触发多次，用户玩够了再执行

解决方案：

1
2
3
4
5
6
7
8
9
10
11
12
13

$(function() {
  var foo = debounce(resizeBox, 1000);
  $(window).on('load resize', foo);
});
function resizeBox() {
  var fullWidth = $('body').width(),
    maxWidth = 800;
  if (fullWidth <= maxWidth) {
    $('.full').width(fullWidth);
  } else {
    $('.full').width(maxWidth);
  }
}

场景案例2：

文本输入的验证（连续输入文字后发送 AJAX 请求进行验证，验证最后一次就好）

解决方案：

1
2
3
4
5
6
7
8
9
10

$(function() {
  var foo = debounce(checkInput, 1000);
  $('.input').on('keyup', function() {
    foo();
  });
});
function checkInput() {
  // 替换为异步请求，可减少请求次数
  $('.type').text($('.input').val());
}

2. 函数节流（throttle）

一个不间断的调用，每隔t，执行一次

偶然在项目中看见，感觉是重要的内容，先了解下基本语法，等有空再深入学习。
babel迷之安装 一觉醒来打开webstorm发现装上了Σ(っ °Д °;)っ
File Watcher打开添加babel时programa一栏填写:

$ProjectFileDir$/node_modules/.bin/babel

然后就能自动转码为ES5啦:)

1. 文档转换

Babel的REPL在线编译器，将ES6代码转为ES5代码。
https://babeljs.io/repl/

2. ES6部分特性

1. var声明的内层变量会覆盖外层变量，而let提供块级作用域，变量只在代码块内有效。
2. 当引用第三方库时声明的变量，用const来声明可以避免未来不小心重命名而导致出现bug
3. 引入Class（类）概念，可以通过extends关键字实现继承。（这部分感觉有点像java）
4. arrow function箭头函数的this是继承外层代码块的this`。
5. template string，用反引号来标识起始，用${}来引用变量，而且所有的空格和缩进都会被保留在输出之中.
6. destructuring解构:从数组和对象中提取值，对变量进行赋值。
7. default默认值, rest语法(用Rest操作符以后，args参数就是一个数组了，任何操作数组的方法都可以直接对args使用)

电脑重装了，反正要重新配置环境，不如找个东西边学边装。就决定是你了，ES6！

1. 惯例安装nodejs以及express

1
2
3
4
5

$ npm install express --save
$ npm install body-parser --save
$ npm install cookie-parser --save
$ npm install multer --save
$ npm list express

途中出现第一个问题，npm ERR! extraneous，https://github.com/npm/npm/issues/10004#issuecomment-210710935，快捷方法是重装nodejs后用管理员模式安装>_o
第二个问题 express command not found ，解决方法https://stackoverflow.com/questions/23002448/express-command-not-found

1

npm install -g express-generator

2. gulp
   文档

   1 2 3

   $ touch .babelrc $ touch gulpfile.babel.js

因为使用ES6语法，所以必须创建gulpfile.babel.js文件而不是gulpfile.js

然后又出现了很多问题，我就先去学习了gulp的详细用法，写了三篇文章总结。又学会了使用yeoman工具直接构建项目骨架。详细参见之前的博文。我发现webstorm里也可以直接选择yeoman构建，神器啊。
下面真的开始学习ES6语法了 O_<

参考阮一峰的《ECMAScript 6 入门》

1. let & const

1
2
3
4
5
6
7

function test(){
  for(let i=1;i<3;i++){
    console.log(i);
  }
  console.log(i);
}
test();

1. 块作用域（大括号内）第二个console.log(i)脱离了块作用域，于是只能输出1，2。
2. 严格模式：ES5代码中存在use strict来启动文件采用严格模式，ES6中则强制开启。严格模式中变量未声明则不能引用，会报错。
3. 使用let时不能重复定义变量。
4. 使用const声明的常量不能修改。
5. 第4点注意情况

1
2
3
4
5
6

const PI =3.1415926;   //不能修改
const K ={
  a:1
}
//K指向对象存储的指针，对象可变指针不变。
K.b = 3;

2. 解构赋值

之前对于响应式都是用bootstrap等响应式框架，非常肤浅。就学习了具体的响应式开发相关内容，运用媒体查询写出不同的css布局，锻炼了基本技能，对基础概念也有了新了解。还学习了响应式图片的处理和兼容性处理，也收获良多。

1. 响应式网站

所谓响应式网站，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本，在各种分辨率的设备下都能很好地展示页面效果。

技术要点

flexible grid layout 弹性网格布局
flexible image 弹性图片
media queries 媒体查询

优点和缺点

一套代码适应多终端设备，省人省时省钱，利于SEO。缺点是需要加载更多的样式和脚本资源，造成代码冗余。

实践原则：

制作网站大抵都遵循两个原则：渐近增强(Progressive Enhancement)和优雅降级(Graceful Degradation)，渐近增强是指先制作一个简陋但是兼容各个版本浏览器的网页，然后再添加效果。而优雅降级则刚好相反，直接制作出效果绚烂的兼容主流浏览器的产品，然后根据低版本再做出一些兼容性处理。

实现原理

使用相对单位并配合媒体查询来实现页面，我们只需要根据设计图,将绝对单位px转换为相对单位rem或者em并配合@media即可。

2. 非常规文件

vertical-center
全部从该项目转载，侵删。

仅居中元素定宽高适用：

absolute + 负margin

1
2
3
4
5
6
7
8
9
10

.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

absolute + margin auto

1
2
3
4
5
6
7
8
9
10
11

.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

absolute + calc

1
2
3
4
5
6
7
8

.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

居中元素不定宽高适用：

absolute + transform

什么是You2php?

You2PHP是一个用PHP开发的Youtube流量代理脚本、通过对接谷歌api获取数据，可用来搭建Youtube视频镜像站、可实现长城之内观看Youtube。
详情官网：https://you2php.github.io
免翻墙：https://github.com/You2php/you2php/

简单原理：

我是将You2php部署在000webhost的海外免费虚拟主机上，绑定自己免费域名，再通过cloud flare进行DNS免费加速，实现看油管视频的。000webhost为每个free app提供10G/月的流量，所以还得省点使用。

1. basic-sample-network

basic-sample-network

This is the “Hello World” of Hyperledger Composer samples, which demonstrates the core functionality of Hyperledger Composer by changing the value of an asset.

Participant SampleParticipant

Asset SampleAsset

Transaction SampleTransaction

Event SampleEvent