周末忘记整理这一周所看过和做过的事情了，补上
2016-3-19 ~2016-3-20
报名参加了web开发匠艺训练营，虽然占用了周末的时间，不过对比获得的知识，付出的时间和精力是值得的。
讲师姜志辉从事互联网多年，从软件开发、产品、架构到自己出来开公司、偶尔出来讲课，不仅在编程方面有深厚的功底和见解，在表达和讲课的能力也非常厉害。
在此对这两天讲过的知识点做一个回顾。
JS的渊源
最开始有微软的VBScript,不过这个脚本只应用于微软自己的平台，而谷歌也实现了自己的脚本，则导致了不同浏览器使用不同的脚本，直到ECMA制定了标准，才规范了javascript。
关于库、框架库、框架、架构
之前一直没有搞懂这几个的关系。
库在前端，只知道jquery和undersore是库，他们对底层的东西做了一层封装，为使用者提供了一组API，让使用的人使用更轻松的方法去实现所需要的功能。
框架库是如react这样的，它不仅封装了自己的一些函数，对外提供了一定自己的方法，还实现了MVC模式中的M，但是由于它只实现了一部分，所以使用者不能单纯地使用它来实现web前端，它需要搭配其他框架库来实现。例如facebook使用react + flax，而目前也流行使用react + backbone来实现前端项目。
框架则是已经集成了一套解决方案，如AngularJS，它有自己的一套流程，DOM 模板渲染、MVC的设计模式，直接就可以使用了。
架构相对于其他三个，架构基本不实现任何的功能，它相当于帮你打好一个毛胚房，但是里面的刷漆、家具都要使用者自己去决定，所以它的代码量甚至只有一千多行，backbone算的上一个架构。
关于编程的原则-》模式-》方法-》工具 四个象限
原则
SOLID
KISS
DRY
时刻需要保持不触犯的原则
模式
架构
分析
设计
MVC设计模式
web前端的大部分设计模式，显示交给view、数据交给model、而控制交给controler，对于v和m之间的耦合，可以通过观察者模式、订阅模式来解决，也可以通过模板渲染来解决
关于模板渲染有三种：字符串、DOM、虚拟内存模板
实现（可以找相关的模板库学习）
方法
udd
tdd
这个是重点讲解的，代码的编程流程：
测试驱动-》功能实现-》重构代码
bdd
rdd
fdd
工具
grunt
coffee
webpack
框架的使用
使用框架前首先要理解它的渊源，为什么会出现，创始人为什么要创建它，这样才能了解它适合用在什么地方。
其次，读懂框架的骨架，了解它的思想和设计模式，这里涉及到怎么读，首先要读开放给我们的函数，这里不是指文档，而是源代码中对外的接口和函数，可以模仿着写，也可以直接复制着敲，比单纯地读代码效率要高很多。
设计的层次
对于项目，不同的角色会有不同的角度
结果： 角色
-》
模块、包
-》
对象、类
-》
函数、变量
职责
-》
接口
-》
方法
协作
-》
过程：
TDD（百度这些名词rdd。。。。）
手法：
抽象
封装
多态
关于实践的感想
前端也可以用mocha ，mocha可以用来测试mvc中的m和c，对于v，我们可以安装nodejs模拟浏览器的插件僵尸来实现测试
编程的时候不要考虑我有什么，而是考虑我要什么，一步步跨越过去
不要有工程师思维，要有设计的思维
code
// 圣杯模式：不继承父类contructor，通过中间一个实例来继承父类的prototype，然后将子类的prototype指向该实例
kiss.extend = function(ext) {
var ext_func = function(){};
var F = function() {};
F.prototype = this.prototype;
ext_func.prototype = new F();
ext_func.prototype.constructor = ext_func;
for (var m in ext) {
ext_func.prototype[m] = ext[m];
}
ext_func.prototype.__super__ = this.prototype;
return ext_func;
};
2016-3-21
使用css计数器counter自动生成目录
设计师设计了如下所示的列表图：
一开始的想法是在段落里面加入一个icon类，作为列表开头的数字，实现完后发现了一个问题，一旦出现换行，下一行会出现icon类的下方，不能实现设计师的设计稿。
但是把icon放在p的外面有不符合逻辑，而且写起来很麻烦。
后来想到使用伪元素before，因为before可以在元素添加进去前放一层在其下面，利用这个功能实现提前在段落前加入一个background-image为蓝色气泡的伪元素，然后定位到左上角，再让段落p有一段padding-left，使得每一段p左边都有一个图标，这样就不用在每个p中手动添加一个icon元素
接下来就是使用css3的一个新属性counter，这是css的content新加入的一个值，能够进行简单的加减乘除计数和重置，因此能够用来自动生成目录。这样就不用手动一个个去进伪元素中了。
.counter {
counter-reset: p-counter 0;
//每当遇到counter类就重置计数器
}
.counter p {
counter-increment: 1;
// 每当遇到p元素就自增加1
}
.counter p:before {
content: counter(p-counter);
// 将计数器的值赋给p的伪元素的content
}
这是前一周发现的css新特性，markdown了下来，结果真的用上了，所以多看看一些文章有利于提高自己解决方法的能力。
2016-3-22
第二届前端开发者年度大会总结
之前边听说了这次大会，本来想参加的，因为门票要近五百，当时犹豫了一下，结果就卖光了，是在广州举行的，下次绝对不会再错过了。
这次只能读读人家的笔记了，还是能看到不少干货的
参与者的笔记
- chenbin92-segmentfault
- 知乎上的回答
值得一练，目前只练习了到Exercise11
会上提供的资源
- Functional Programming in Javascript
koa中处理错误
koa中处理错误
第一次听到这个名词，在js中进行异步错误处理是通过回调函数，嵌套过深处理起来也很麻烦，koa貌似可以优雅的处理。
2016-3-24
单例模式的实践
写了一个会弹出对话框的页面，发现多次点击会多次调用弹出对话框的问题，导致一个页面出现多个重复的对话框，正常的解决方法可以有如下几个：
点击一次后马上禁止按钮的点击，直到对话框结束再回复
这个方法应该是最简单的，但是如果那个不是按钮怎么办？解除元素的事件绑定，当对话框结束后再绑定？
这能解决元素不是按钮的问题，但是如果元素有多个的话，那么每次点击都要对多个元素进行解除和绑定，在性能消耗上不值得。
笔者同时遇到了以上两种情况，如果能够拥有一个变量，来保存是否已经有对话框了，用来判断是否可以再创建对话框，如果声明一个全局变量是可以很快解决，但是这样会污染全局，而且容易造成后期维护的不容易和被其他人修改。
为了解决这个问题，便想到了 单例模式 ，笔者通过声明一个自执行函数，在函数里面声明一个局部变量isShow，然后返回一个函数，该函数通过判断局部变量isShow是否为false，如果是，则isShow = true, 创建对话框 ; 如果不是，则不创建，并对对话框做监听，当对话框结束时，将isShow改为false
var showDialog = function() {
var isShow = false;
return function() {
if (isShow == true)
return;
isShow = true;
//创建dialog
createDialog()
// 监听dialog
dialog.on('hidden', funciont(){
isShow = false;
});
}
}
这中模式就是单例模式的一个应用，单例模式还可以用来保存对象，所以可以用来创建自己的代码库。
2016-3-25-2016-3-26
开始研究jquery类库中