JavaScript&nodejs

Database/MongoDB/增删查改.md

@@ -0,0 +1,55 @@
+## 1 常用命令行
+
+show dbs显示数据库列表
+
+show collections
+
+
+use dbname创建并切换db
+
+
+db.user.insert({josnstr})向数据表中插入数据
+
+db.user.find()搜索数据表
+
+db.user.drop()删除数据表
+
+db.dropDatabase()删除数据库
+
+## 2 常用查找命令
+
+### 非条件查找
+
+### 单条件查找
+
+### 多条件查找and
+
+### 正则表达式查找
+
+### 查找结果过滤
+
+### 查找结果排序
+.sort()
+
+### 查询前五条数据
+.limit(5)
+
+### 查询10条以后的数据
+skip(10)
+
+### 查询计数
+
+.count()
+
+### 或查询
+.find({$or:{"name":"zhangsan","age":34}})
+
+
+
+## 3 修改数据
+
+db.uer.update({{"age":34},{$set:{"age":50}},multr:true})
+
+
+## 4 remove
+db.user.remove({age:234})

Database/MongoDB/聚合管道.md

@@ -0,0 +1,18 @@
+表的关联查询和聚合统计
+
+
+## 常用操作符
+
+$project 制定显示的列
+
+$match 条件匹配
+
+$limit 限制结果的数量
+
+$skip 跳过文档的数量
+
+$sort 条件排序
+
+$group 条件组合结果
+
+$lookup 引入其他集合的数据

Database/MongoDB/设置索引.md

@@ -0,0 +1,24 @@
+## 创建索引的命名
+
+
+
+db.user.ensureIndex({"tablenanme":1})
+### 获取索引
+db.user.getIndexes()
+
+
+### 删除索引
+db.user.dropIndex({})
+
+### 复合索引
+多个条件组成层次索引
+
+
+### 唯一索引
+（字段不能重复）
+
+## 获取执行时间
+
+db.tablename.find().explain("executionStats")
+
+

JavaScript/10chrome控制台.md

@@ -0,0 +1,19 @@
+### Elements
+
+渲染完成的页面布局。包括HTML元素和布局分析。
+
+### Console
+
+javascript控制台。可以对网页进行操作。可以模拟客户端对服务器发送请求。
+
+通过js向服务器发送请求，可以跳过前端js对请求数据的验证。
+
+### Source
+从服务器端下载的所有文件。包括JS、CSS、HTML以及各种依赖。
+
+### Network
+记录了请求的过程。包括所有类型的Request和Response以及其相关分析。
+
+### Application
+
+主要是应用数据分析。包括储存在本地Chrome自带数据库中的各种数据。本地缓存、cookies、session

JavaScript/1JavaScript数据类型.md

@@ -77,14 +77,14 @@ ll
 o`;//反引号多行字符串
 ```
 
-### 数组（列表）
+### 数组array（列表list，集合set）
 ```
 [1,2,3.14,'hello',null,true];
 new Array(1,2,3);
 var arr =[1,2,3.14,'hello',null,true];
 arr[0];
 ```
-### 对象（字典，集合，键值对）
+### 对象object（Dictionary字典，map映射）
 
 ```
 var person ={
@@ -94,12 +94,24 @@ var person ={
     zipcode:null
 };
 ```
-### 变量
+
+## 4 数据形式
+### 变量定义var
 ```
 var a;//不强调类型
 var b = 1;
 ```
 
+### 常量定义const
+
+const来定义常量
+```
+const PI = 3.14;
+PI = 3; // 某些浏览器不报错，但是无效果！
+PI; // 3.14
+```
+
+
 ## 4 字符串
 
 ### 模板字符串
@@ -127,7 +139,7 @@ s.indexOf('lo');//字符串首次出现的位置。
 s.substring(0,5);//字字符串
 ```
 
-## 数组
+## 5 数组
 
 ### 数组访问与修改
 ```
@@ -205,4 +217,80 @@ delete xiaoming.school; // 删除一个不存在的school属性也不会报错
 + - * / %;//基本运算符
 > < >= <= ==（强制类型转换） ===（包括类型）;//比较运算符
 ! && || ;//逻辑运算符
-```
+& | ~ ^ << >> >>>//位运算符
+typeof//变量类型运算符
+instanceof//对象类型运算符
+```
+
+## 8 Map映射
+### 创建map
+
+```
+var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
+m.get('Michael');
+```
+
+### map使用
+```
+var m = new Map(); // 空Map
+m.set('Adam', 67); // 添加新的key-value
+m.set('Bob', 59);
+m.has('Adam'); // 是否存在key 'Adam': true
+m.get('Adam'); // 67
+m.delete('Adam'); // 删除key 'Adam'
+m.get('Adam'); // undefined
+```
+
+## 9 Set集合
+
+### 创建Set
+单值，值不能重复
+```
+var s1 = new Set(); // 空Set
+var s2 = new Set([1, 2, 3]); // 含1, 2, 3
+```
+
+### 使用Set
+
+```
+s.add(4);
+s.delete(3);
+```
+
+## 10 iterable循环类型
+
+array、map、Set、object都可以通过for of进行循环。但array本身也是对象，也是可以添加新的属性的。
+
+### for-of
+```
+var a = ['A', 'B', 'C'];
+var s = new Set(['A', 'B', 'C']);
+var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
+for (var x of a) { // 遍历Array
+    console.log(x);
+}
+for (var x of s) { // 遍历Set
+    console.log(x);
+}
+for (var x of m) { // 遍历Map
+    console.log(x[0] + '=' + x[1]);
+}
+```
+### foreach
+
+接收一个函数，每次迭代就自动回调该函数
+```
+var s = new Set(['A', 'B', 'C']);
+s.forEach(function (element, sameElement, set) {
+    console.log(element);
+});
+```
+
+
+> 区别复合数据类型
+> * Array 数组，有顺序的单值，单值可重复。
+> * Set 集合，无顺序的单值，值不可以重复。
+> * object对象，无顺序的键值对，键必须是字符串。
+> * Map映射，无顺序的键值对，键可以是任意类型。
+> * iterable，加在其他类型上的特殊方法。
+

JavaScript/2JavaScript程序结构.md

@@ -0,0 +1,133 @@
+## 1 条件判断
+
+### if-else
+```
+var age = 20;
+if (age >= 18) { // 如果age >= 18为true，则执行if语句块
+    alert('adult');
+} else { // 否则执行else语句块
+    alert('teenager');
+}
+//else是可选的
+//如果语句块只有一句话，可以省略大括号。
+```
+
+### if-else可以嵌套
+
+```
+var age = 3;
+if (age >= 18) {
+    alert('adult');
+} else {
+    if (age >= 6) {
+        alert('teenager');
+    } else {
+        alert('kid');
+    }
+}
+
+if (age >= 6) {
+    console.log('teenager');
+} else if (age >= 18) {
+    console.log('adult');
+} else {
+    console.log('kid');
+}
+```
+
+## 2 循环
+
+
+### for循环
+
+```
+var x = 0;
+var i;
+for (i=1; i<=10000; i++) {
+    x = x + i;
+}
+```
+
+### for-in循环
+
+可以循环数组（列表）和对象（字典）
+
+```
+var o = {
+    name: 'Jack',
+    age: 20,
+    city: 'Beijing'
+};
+for (var key in o) {
+    console.log(key); // 'name', 'age', 'city'
+}
+
+var a = ['A', 'B', 'C'];
+for (var i in a) {
+    console.log(i); // '0', '1', '2'
+    console.log(a[i]); // 'A', 'B', 'C'
+}
+```
+
+### while循环
+
+条件循环
+
+```
+var x = 0;
+var n = 99;
+while (n > 0) {
+    x = x + n;
+    n = n - 2;
+}
+```
+
+### do-while循环
+
+```
+var n = 0;
+do {
+    n = n + 1;
+} while (n < 100);
+n; // 100
+```
+
+### foreach循环
+
+### for-of循环
+
+### break语句
+“跳出”循环。
+
+```
+for (i = 0; i < 10; i++) {
+    if (i === 3) { break; }
+    text += "数字是 " + i + "<br>";
+}
+```
+### continue语句
+
+“跳过”循环中的一个迭代。
+
+```
+for (i = 0; i < 10; i++) {
+    if (i === 3) { continue; }
+    text += "数字是 " + i + "<br>";
+} 
+```
+## 3 条件选择
+
+### switch
+Switch case 使用严格比较（===）。
+```
+switch(表达式) {
+     case n:
+        代码块
+        break;
+     case n:
+        代码块
+        break;
+     default:
+        默认代码块
+} 
+```

JavaScript/3JavaScript函数.md

@@ -0,0 +1,301 @@
+## 1 定义函数
+
+### 函数
+```JavaScript
+function abs(x) {
+    if (x >= 0) {
+        return x;
+    } else {
+        return -x;
+    }
+}
+
+var abs = function (x) {
+    if (x >= 0) {
+        return x;
+    } else {
+        return -x;
+    }
+};
+
+abs(10);
+```
+
+JavaScript的函数允许传入过多的参数或者过少的参数，也不会影响函数的执行。
+
+### 函数的属性arguments
+> 因为javascript中，函数也被看做对象，所以能给变量赋值。也能有函数的属性。
+
+只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数
+
+```
+function foo(x) {
+    console.log('x = ' + x); // 10
+    for (var i=0; i<arguments.length; i++) {
+        console.log('arg ' + i + ' = ' + arguments[i]); // 10, 20, 30
+    }
+}
+foo(10, 20, 30);
+```
+
+### 函数的属性rest
+
+用来表示可能的多余的参数
+```
+function foo(a, b, ...rest) {
+    console.log('a = ' + a);
+    console.log('b = ' + b);
+    console.log(rest);
+}
+
+foo(1, 2, 3, 4, 5);
+// 结果:
+// a = 1
+// b = 2
+// Array [ 3, 4, 5 ]
+
+foo(1);
+// 结果:
+// a = 1
+// b = undefined
+// Array []
+```
+
+## 2 变量作用域与解构赋值
+
+### 作用范围
+
+* 使用中括号确定一组作用域。只有函数会区分作用域。
+* 作用域内部的变量，只在内部起作用。
+* 不同作用域的相同变量相互独立。
+* 作用域可以嵌套，外部作用域的变量可以在内部作用域使用，反之不可。
+* 作用域可以嵌套，内部作用域的变量可以覆盖外部作用域的变量。
+
+### 变量提升
+
+JavaScript的函数定义有个特点，它会先扫描整个函数体的语句，把所有申明的变量“提升”到函数顶部。
+
+也就是说，你在函数体中变量的声明被提前，但是变量的定义没有提前。
+
+```
+function a(){
+    var x = 1;
+    function b(){
+        console.log(x);//x is undefined
+        var x = 2;
+    } 
+}
+```
+> 因为在函数b中，x的声明提前了，console输出的是，函数b中的x。但是x的定义还在后边，所以x的值是undefined。如果删掉内部的生命，则x是1.
+
+### 全局作用域
+
+不再任何函数体内定义的变量就是全局作用域。
+
+* 默认全局变量window。
+* 顶层寒素的定义也被是为一个全局变量，冰杯绑定到window对象。
+```
+function foo() {
+    alert('foo');
+}
+
+foo(); // 直接调用foo()
+window.foo(); // 通过window.foo()调用
+```
+
+### 名字空间
+
+全局变量会绑定到window上，不同的JavaScript文件如果使用了相同的全局变量，或者定义了相同名字的顶层函数，都会造成命名冲突，并且很难被发现。
+
+减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局变量中。例如：
+```
+// 唯一的全局变量MYAPP:
+var MYAPP = {};
+
+// 其他变量:
+MYAPP.name = 'myapp';
+MYAPP.version = 1.0;
+
+// 其他函数:
+MYAPP.foo = function () {
+    return 'foo';
+};
+
+```
+把自己的代码全部放入唯一的名字空间MYAPP中，会大大减少全局变量冲突的可能。
+
+### 局部作用域
+
+javascript的变量作用域只有函数内部。在for循环语句块中无法定义具有局部作用域变量的。
+
+可以使用let代替var申请块级作用域变量。
+
+
+```
+function foo() {
+    var sum = 0;
+    for (let i=0; i<100; i++) {
+        sum += i;
+    }
+    // SyntaxError:
+    i += 1;
+}
+```
+
+
+### 解构赋值
+
+```
+//数组的结构赋值
+var [x, y, z] = ['hello', 'JavaScript', 'ES6'];
+
+//嵌套数组的结构赋值
+let [x, [y, z]] = ['hello', ['JavaScript', 'ES6']];
+
+//对象的解构赋值
+var person = {
+    name: '小明',
+    age: 20,
+    gender: 'male',
+    passport: 'G-12345678',
+    school: 'No.4 middle school',
+    address: {
+        city: 'Beijing',
+        street: 'No.1 Road',
+        zipcode: '100001'
+    }
+};
+var {name, address: {city="he", zip}} = person;//使用默认赋值
+name; // '小明'
+city; // 'Beijing'
+zip; // undefined, 因为属性名是zipcode而不是zip
+// 注意: address不是变量，而是为了让city和zip获得嵌套的address对象的属性:
+address; // Uncaught ReferenceError: address is not defined
+```
+
+
+
+## 3 变量的引用
+
+* JavaScript中的变量都是引用。所以直接赋值，会将引用传递给另一个变量。应该通过创建新的类型，然后进行值的复制。
+
+```
+a={r:1};
+b=a;
+a.x=5;
+b;//{r:1,x=5}
+```
+
+## 4 箭头函数
+
+### 箭头函数的定义
+```
+x => x*x
+
+(x, y) => x * x + y * y
+
+// 无参数:
+() => 3.14
+
+// 可变参数:
+(x, y, ...rest) => {
+    var i, sum = x + y;
+    for (i=0; i<rest.length; i++) {
+        sum += rest[i];
+    }
+    return sum;
+}
+```
+
+### 箭头函数的this
+
+箭头函数内this指针指向当前词法作用域的对象。指向函数外层的对象。而且this指针无法更高绑定。
+
+```
+var obj = {
+    birth: 1990,
+    getAge: function () {
+        var b = this.birth; // 1990
+        var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
+        return fn();
+    }
+};
+obj.getAge();//25
+```
+
+## 6 generator函数
+
+### generator函数定义
+
+```
+function* foo(x) {
+    yield x + 1;
+    yield x + 2;
+    return x + 3;
+}
+```
+### generator函数调用
+```
+function* fib(max) {
+    var
+        t,
+        a = 0,
+        b = 1,
+        n = 0;
+    while (n < max) {
+        yield a;
+        [a, b] = [b, a + b];
+        n ++;
+    }
+    return;
+}
+```
+
+直接调用调用，仅仅创建了一个generator对象，没有执行函数。不断调用next()方法，可以执行generator函数执行。每次遇到yield返回一次。
+```
+var f = fib(5);//一个generator对象
+f.next(); // {value: 0, done: false}
+f.next(); // {value: 1, done: false}
+f.next(); // {value: 1, done: false}
+f.next(); // {value: 2, done: false}
+f.next(); // {value: 3, done: false}
+f.next(); // {value: undefined, done: true}
+```
+
+利用for of方法访问generator对象。
+
+```
+for (var x of fib(10)) {
+    console.log(x); // 依次输出0, 1, 1, 2, 3, ...
+}
+```
+
+### 特点
+因为generator可以在执行过程中多次返回，所以它看上去就像一个可以记住执行状态的函数，利用这一点，写一个generator就可以实现需要用面向对象才能实现的功能。
+
+generator还有另一个巨大的好处，就是把异步回调代码变成“同步”代码。
+
+
+简单来说，就是一个局部状态变量。
+
+
+
+## 7 装饰器
+
+> （java中称为注解，Python也称为装饰器）
+
+因为JavaScript是脚本语言所有的对象、变量都是动态的。可以随时解绑。可以利用重新绑定的方法，修改原来的函数，为原来的函数添加装饰器。
+```
+//统计函数的执行次数
+var count = 0;
+var oldParseInt = parseInt; // 保存原函数
+
+window.parseInt = function () {
+    count += 1;
+    return oldParseInt.apply(null, arguments); // 调用原函数
+};
+```
+
+
+
+

JavaScript/4JavaScript高阶函数.md

@@ -0,0 +1,208 @@
+## 1 高阶函数定义
+
+JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。
+
+```
+function add(x, y, f) {
+    return f(x) + f(y);
+}
+
+x = -5;
+y = 6;
+f = Math.abs;
+f(x) + f(y) ==> Math.abs(-5) + Math.abs(6) ==> 11;
+return 11;
+```
+
+## 2 MapReduce
+
+map:对集合分割运算。
+reduce：对分割运算的结果进行聚合。
+
+### array.map
+map()方法本身可以接受一个函数，作用在数组的每一个元素，并拼接成新的数组。是一个高阶函数。
+
+
+```
+function pow(x) {
+    return x * x;
+}
+var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+var results = arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]
+console.log(results);
+
+var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']
+```
+
+### array.reduce
+
+再看reduce的用法。Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算，其效果就是：
+```
+[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
+```
+
+```
+var arr = [1, 3, 5, 7, 9];
+arr.reduce(function (x, y) {
+    return x + y;
+}); // 25
+```
+
+## 3 filter
+
+### 过滤元素
+把Array的某些元素过滤掉，然后返回剩下的元素
+
+Array的filter()也接收一个函数。filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。
+
+```
+var arr = [1, 2, 4, 5, 6, 9, 10, 15];
+var r = arr.filter(function (x) {
+    return x % 2 !== 0;
+});
+r; // [1, 5, 9, 15]
+```
+
+### 回调函数
+filter()接收的回调函数，其实可以有多个参数。通常我们仅使用第一个参数，表示Array的某个元素。回调函数还可以接收另外两个参数，表示元素的位置和数组本身：
+
+```
+var arr = ['A', 'B', 'C'];
+var r = arr.filter(function (element, index, self) {
+    console.log(element); // 依次打印'A', 'B', 'C'
+    console.log(index); // 依次打印0, 1, 2
+    console.log(self); // self就是变量arr
+    return true;
+});
+```
+
+利用回调函数，除掉重复元素
+
+```
+
+var r,arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
+r = arr.filter(function (element, index, self) {
+    return self.indexOf(element) === index;
+});
+
+```
+
+## 4 sort
+
+默认把所有的元素转换为String进行排序。可以接受比较函数进行排序。
+```
+arr.sort(function (x, y) {
+    if (x < y) {
+        return -1;
+    }
+    if (x > y) {
+        return 1;
+    }
+    return 0;
+});
+console.log(arr); // [1, 2, 10, 20]
+```
+## 5 every
+every()方法可以判断数组的所有元素是否满足测试条件。
+
+```
+var arr = ['Apple', 'pear', 'orange'];
+console.log(arr.every(function (s) {
+    return s.length > 0;
+})); // true, 因为每个元素都满足s.length>0
+
+console.log(arr.every(function (s) {
+    return s.toLowerCase() === s;
+})); // false, 因为不是每个元素都全部是小写
+```
+## 6 find
+find()方法用于查找符合条件的第一个元素，如果找到了，返回这个元素，否则，返回undefined
+
+```
+var arr = ['Apple', 'pear', 'orange'];
+console.log(arr.find(function (s) {
+    return s.toLowerCase() === s;
+})); // 'pear', 因为pear全部是小写
+
+console.log(arr.find(function (s) {
+    return s.toUpperCase() === s;
+})); // undefined, 因为没有全部是大写的元素
+```
+
+## 7 findIndex
+findIndex()和find()类似，也是查找符合条件的第一个元素，不同之处在于findIndex()会返回这个元素的索引，如果没有找到，返回-1：
+
+```
+var arr = ['Apple', 'pear', 'orange'];
+console.log(arr.findIndex(function (s) {
+    return s.toLowerCase() === s;
+})); // 1, 因为'pear'的索引是1
+
+console.log(arr.findIndex(function (s) {
+    return s.toUpperCase() === s;
+})); // -1
+```
+
+## 8 forEach
+forEach()和map()类似，它也把每个元素依次作用于传入的函数，但不会返回新的数组。forEach()常用于遍历数组，因此，传入的函数不需要返回值：
+
+
+```
+var arr = ['Apple', 'pear', 'orange'];
+arr.forEach(console.log); // 依次打印每个元素
+```
+
+## 9 闭包
+> 闭包的出现，可以获取函数内部的变量且变量一直在内存当中.最简单的理解，一个作用域使用了另一个作用域中的变量。比如外层函数通过传参的方式，把某个变量传递给内层函数，就产生了闭包
+> 
+### 函数可以作为返回值实现惰性求值
+高阶函数除了可以接受函数作为参数外，还可以把函数作为结果值返回。
+
+可以通过函数作为返回值，实现懒求值。
+
+```
+function lazy_sum(arr) {
+    var sum = function () {
+        return arr.reduce(function (x, y) {
+            return x + y;
+        });
+    }
+    return sum;
+}
+
+//调用函数f时，才真正计算求和的结果：
+
+f(); // 15
+```
+
+### 函数作为返回值实现循环惰性求值
+> 感觉与Python的生成器yield惰性求值很像，这里介绍了其根本的原理。
+
+
+```
+function count() {
+    var arr = [];
+    for (var i=1; i<=3; i++) {
+        arr.push((function (n) {
+            return function () {
+                return n * n;
+            }
+        })(i));
+    }
+    return arr;
+}
+
+var results = count();
+var f1 = results[0];
+var f2 = results[1];
+var f3 = results[2];
+
+f1(); // 1
+f2(); // 4
+f3(); // 9
+```
+
+## 10 回调函数与多线程异步通信
+
+回调函数就是一个函数，它是在我们启动一个异步任务的时候就告诉它：等你完成了这个任务之后要干什么。这样一来主线程几乎不用关心异步任务的状态了，他自己会善始善终。

JavaScript/5JavaScript异常处理.md

@@ -0,0 +1,22 @@
+## 1 异常处理语句
+
+
+try 语句使您能够测试代码块中的错误。
+
+catch 语句允许您处理错误。
+
+throw 语句允许您创建自定义错误。
+
+finally 使您能够执行代码，在 try 和 catch 之后，无论结果如何。
+
+```
+try {
+     供测试的代码块
+}
+ catch(err) {
+     处理错误的代码块
+} 
+finally {
+     无论 try / catch 结果如何都执行的代码块
+}
+```

JavaScript/6JavaScript对象.md

@@ -0,0 +1,148 @@
+## 1 对象定义
+
+* 在JavaScript中所有事物都是对象。
+* 对象也是一个变量，可以包含任意值。`var car = {type:"Fiat", model:500, color:"white"};`
+
+## 2 对象属性
+
+### 定义
+* 键值对
+
+### 访问
+
+* person.lastName
+* person["lastName"]
+
+
+## 3 对象方法
+
+
+### 对象绑定的函数称为方法
+
+```
+var xiaoming = {
+    name: '小明',
+    birth: 1990,
+    age: function () {
+        var y = new Date().getFullYear();
+        return y - this.birth;
+    }
+};
+
+xiaoming.age; // function xiaoming.age()
+xiaoming.age(); // 今年调用是25,明年调用就变成26了
+```
+
+### this变量
+
+* this指针一直指向当前的对象。
+* 如果是全局对象，this指向window
+* this指向的具体位置，视调用者不同而改变。
+
+```
+function getAge() {
+    var y = new Date().getFullYear();
+    return y - this.birth;
+}
+
+var xiaoming = {
+    name: '小明',
+    birth: 1990,
+    age: getAge
+};
+
+xiaoming.age(); // 25, 正常结果，this指向小明。
+getAge(); // NaN,this指向window
+```
+* 对象的方法中的嵌套方法，this指向不明确（window）。所以，如果在子作用域调用本作用域的内容，定义that进行指针传递。
+```
+var xiaoming = {
+    name: '小明',
+    birth: 1990,
+    age: function () {
+        var that = this; // 在方法内部一开始就捕获this
+        function getAgeFromBirth() {
+            var y = new Date().getFullYear();
+            return y - that.birth; // 用that而不是this
+        }
+        return getAgeFromBirth();
+    }
+};
+
+xiaoming.age(); // 25
+```
+
+### apply()
+使用函数的apply属性，重新定义this指针的指向。
+
+即，将函数应用到某个对象上。
+
+函数本身的apply方法，它接收两个参数，第一个参数就是需要绑定的this变量，第二个参数是Array，表示函数本身的参数。
+
+```
+function getAge() {
+    var y = new Date().getFullYear();
+    return y - this.birth;
+}
+
+var xiaoming = {
+    name: '小明',
+    birth: 1990,
+    age: getAge
+};
+
+xiaoming.age(); // 25
+getAge.apply(xiaoming, []); // 25, this指向xiaoming, 参数为空
+```
+
+### call()
+
+使用函数的call属性，同样可以定义this指针的具体指向。
+
+与apply()类似的方法，唯一区别是apply()把参数打包成Array再传入；call()把参数按顺序传入。
+
+比如调用Math.max(3, 5, 4)，分别用apply()和call()实现如下：
+
+```
+Math.max.apply(null, [3, 5, 4]); // 5
+Math.max.call(null, 3, 5, 4); // 5
+```
+
+## 4 new运算符
+
+### 实例
+new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。
+
+```
+function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+
+const car1 = new Car('Eagle', 'Talon TSi', 1993);
+
+console.log(car1.make);
+// expected output: "Eagle"
+```
+
+### 语法
+
+```
+new constructor([arguments])
+```
+
+### 原理
+
+1. 创建一个空的简单JavaScript对象（即{}）；
+2. 链接该对象（即设置该对象的构造函数）到另一个对象 ；
+3. 将步骤1新创建的对象作为this的上下文 ；
+4. 如果该函数没有返回对象，则返回this。
+
+
+### 步骤
+
+创建一个用户自定义的对象需要两步：
+
+1. 通过编写函数来定义对象类型。
+2. 通过 new 来创建对象实例。

JavaScript/7JavaScript内建对象.md

@@ -0,0 +1,127 @@
+# JavaScrip对象
+## 0 对象
+
+### typeof
+在JavaScript一切皆对象。
+
+使用typeof运算符获取对象类型。返回对象类型。
+
+### 包装对象
+
+将基本类型转换为对象类型。
+```
+var n = new Number(123); // 123,生成了新的包装类型
+var b = new Boolean(true); // true,生成了新的包装类型
+var s = new String('str'); // 'str',生成了新的包装类型
+```
+## 1 JavaScript内建对象
+
+### Array对象
+
+Array 对象用于在变量中存储多个值
+### Boolean对象
+
+Boolean 对象用于转换一个不是 Boolean 类型的值转换为 Boolean 类型值 (true 或者false).
+### Date对象
+
+Date 对象用于处理日期与时间。
+### Math对象
+
+Math 对象用于执行数学任务。
+### Number对象
+原始数值的包装对象
+### String对象
+
+处理文本字符串
+### RegExp对象
+
+正则表达式字符串的处理
+### 全局属性、函数
+
+encode、decode系列
+数据类型转换系列
+### Error对象
+在错误发生时，提供了错误的提示信息。
+
+## 2 Browser对象
+
+### window对象
+
+表示浏览器打开的窗口。是默认的全局对象。默认绑定了alert等方法。
+
+### Navigator对象
+
+包含浏览器相关的信息。
+
+### Screen对象
+
+客户端显示屏相关的信息。
+### History对象
+
+包含用户在浏览器中访问过的URL。是window对象的一部分。
+
+### Location对象
+
+包含当前的URL信息。是window对象的一部分。
+### 存储对象
+
+webAPI提供了sessionStorage(会话存储)和localStorage(本地存储)两个对象来对网页的数据进行增删查改操作。
+
+localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
+
+sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
+
+
+## 3 DOM对象
+
+* 文档是一个文档节点
+* 所有的HTML元素是元素节点
+* 所有的HTML属性是属性节点
+* 文本插入到HTML元素是文本节点
+* 注释是注释节点。
+### DOM Document对象
+
+当浏览器载入 HTML 文档, 它就会成为 Document 对象。
+
+Document 对象是 HTML 文档的根节点。
+
+Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
+
+Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问
+### DOM元素对象
+
+元素对象代表着一个 HTML 元素。
+
+元素对象 的 子节点可以是, 可以是元素节点，文本节点，注释节点。
+
+NodeList 对象 代表了节点列表，类似于 HTML元素的子节点集合。
+
+元素可以有属性。属性属于属性节点（查看下一章节）。
+### DOM属性对象
+
+在 HTML DOM 中, Attr 对象 代表一个 HTML 属性。
+
+HTML属性总是属于HTML元素。
+
+在 HTML DOM 中, the NamedNodeMap 对象 表示一个无顺序的节点列表。
+
+我们可通过节点名称来访问 NamedNodeMap 中的节点。
+
+### DOM事件对象
+
+HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。
+
+事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。
+
+### DOMConsole对象
+
+Console 对象提供了访问浏览器调试模式的信息到控制台。
+
+
+### CSS Style Declaration对象
+
+CSSStyleDeclaration 对象表示一个 CSS 属性-值（property-value）对的集合。
+### DOMHTMLCollection
+HTMLCollection 是 HTML 元素的集合。
+
+HTMLCollection 对象类似一个包含 HTML 元素的数组列表。

JavaScript/8JavaScript事件响应.md

@@ -0,0 +1,85 @@
+## 1 常见事件
+
+> 本质上也是一种异步通信的方式。基于回调的异步通信，和基于事件响应机制的异步通信。
+
+### 鼠标事件
+
+* onclick	用户点击了 HTML 元素
+* ondblclick	当用户双击某个对象时调用的事件句柄
+* onmousedown	鼠标按钮被按下。	
+* onmouseenter	当鼠标指针移动到元素上时触发。	
+* onmouseleave	当鼠标指针移出元素时触发	
+* onmousemove	鼠标被移动。	
+* onmouseover	鼠标移到某元素之上。	
+* onmouseout	鼠标从某元素移开。	
+* onmouseup	鼠标按键被松开。
+
+
+### 键盘事件
+
+
+* onkeydown	用户按下键盘按键
+* onkeypress	某个键盘按键被按下并松开。	
+* onkeyup	某个键盘按键被松开。
+### 框架对象事件
+
+* onabort	图像的加载被中断。 ( <object>)	2
+* onbeforeunload	该事件在即将离开页面（刷新或关闭）时触发	2
+* onerror	在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>)	 
+* onhashchange	该事件在当前 URL 的锚部分发生修改时触发。	 
+* onload	一张页面或一幅图像完成加载。	2
+* onpageshow	该事件在用户访问页面时触发	
+* onpagehide	该事件在用户离开当前网页跳转到另外一个页面时触发	
+* onresize	窗口或框架被重新调整大小。	2
+* onscroll	当文档被滚动时发生的事件。	2
+* onunload	用户退出页面。 ( <body> 和 <frameset>)
+
+### 表单事件
+
+* onblur	元素失去焦点时触发	2
+* onchange	该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)	2
+* onfocus	元素获取焦点时触发	2
+* onfocusin	元素即将获取焦点时触发	2
+* onfocusout	元素即将失去焦点时触发	2
+* oninput	元素获取用户输入时触发	3
+* onreset	表单重置时触发	2
+* onsearch	用户向搜索域输入文本时触发 ( <input="search">)	 
+* onselect	用户选取文本时触发 ( <input> 和 <textarea>)	2
+* onsubmit	表单提交时触发
+### 剪贴板事件
+### 打印事件
+### 拖动事件
+
+* ondrag	该事件在元素正在拖动时触发	 
+* ondragend	该事件在用户完成元素的拖动时触发	 
+* ondragenter	该事件在拖动的元素进入放置目标时触发	 
+* ondragleave	该事件在拖动元素离开放置目标时触发	 
+* ondragover	该事件在拖动元素在放置目标上时触发	 
+* ondragstart	该事件在用户开始拖动元素时触发	 
+* ondrop	该事件在拖动元素放置在目标区域时触发* 
+### 多媒体事件
+
+
+### 动画事件
+
+* animationend	该事件在 CSS 动画结束播放时触发	 
+* animationiteration	该事件在 CSS 动画重复播放时触发	 
+* animationstart	该事件在 CSS 动画开始播放时触发
+### 过度事件
+### 其他事件
+
+## 2 
+## 3 事件处理
+
+### 通过HTML事件属性，绑定JS方法
+```
+<button onclick="displayDate()">点这里</button>
+```
+
+### 通过JS给HTML对象添加事件属性，并绑定方法
+
+```
+<script>
+document.getElementById("myBtn").onclick=function(){displayDate()};
+</script>
+```

JavaScript/9JavaScriptJSON.md

@@ -0,0 +1,54 @@
+## 1 JSON 简介
+
+JSON 是存储和传输数据的格式。
+
+JSON 经常在数据从服务器发送到网页时使用。
+
+* JSON 指的是 JavaScript Object Notation
+* JSON 是轻量级的数据交换格式
+* JSON 独立于语言 *
+* JSON 是“自描述的”且易于理解
+
+
+## 2 JSON使用
+### 基本语法
+
+* 数据是名称/值对
+* 数据由逗号分隔
+* 花括号保存对象
+* 方括号保存数组
+### JSONObject
+JSON 数据的书写方式是名称/值对。
+
+名称/值对由（双引号中的）字段名构成，其后是冒号，再其后是值：
+JSON 对象是在花括号内书写的。
+```
+{"firstName":"Bill", "lastName":"Gates"} 
+```
+### JSONArray
+JSON 数组在方括号中书写。
+
+```
+"employees":[
+    {"firstName":"Bill", "lastName":"Gates"}, 
+    {"firstName":"Steve", "lastName":"Jobs"}, 
+    {"firstName":"Alan", "lastName":"Turing"}
+]
+```
+### JSONString
+```
+var text = '{ "employees" : [' +
+'{ "firstName":"Bill" , "lastName":"Gates" },' +
+'{ "firstName":"Steve" , "lastName":"Jobs" },' +
+'{ "firstName":"Alan" , "lastName":"Turing" } ]}';
+```
+### JSONString转换为JavaScript对象
+```
+var obj = JSON.parse(text);
+```
+
+### JavaScript对象转换为JSONString
+
+```
+var myJSON = JSON.stringify(obj);
+```

JavaScript/AJAX/1ajax简介.md

@@ -0,0 +1,18 @@
+## 1 基础
+
+### 简介
+AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
+
+AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
+
+AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
+
+AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
+
+### 原理 
+异步的JavaScript和XML。创建快速动态网页技术。在后台与服务器进行少量的数据交换，实现网页的异步更新。
+
+
+* 使用JS创建XMLHTTPRequest对象，发送HTTPRequest内容。
+* 使用JS处理被返回的数据，更新页面内容。
+

JavaScript/AJAX/2ajax应用.md

@@ -0,0 +1,64 @@
+## 1 实例
+
+```
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<script>
+function loadXMLDoc()
+{
+	var xmlhttp;
+	if (window.XMLHttpRequest)
+	{
+		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
+		xmlhttp=new XMLHttpRequest();
+	}
+	else
+	{
+		// IE6, IE5 浏览器执行代码
+		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
+	}
+	xmlhttp.onreadystatechange=function()
+	{
+		if (xmlhttp.readyState==4 && xmlhttp.status==200)
+		{
+			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
+		}
+	}
+	xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
+	xmlhttp.send();
+}
+</script>
+</head>
+<body>
+
+<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
+<button type="button" onclick="loadXMLDoc()">修改内容</button>
+
+</body>
+```
+
+## 2 说明
+
+* 创建xmlhttp=new XMLHTTPRequest()对象。（浏览器的内建对象）
+* xmlhttp.open(method,url,async)打开http请求async=true，异步执行。async=false同步执行，JavaScript会等到服务器返回后才执行。
+* xmlhttp.send(string);发送http请求
+* xmlhttp.responseText;返回字符串形式
+* xmlhttp.responseXML;使用XML解析返回值
+
+## 3 事件响应机制
+
+* onreadystatechange:存储函数，当readyState属性改变时，调用该函数（也是回调函数。）
+* readyState，存储有状态。0：请求初始化，1已经建立连接，2请求已接收，3请求处理中，4请求已完成
+* status：200：OK，404：未找到页面。
+
+```
+xmlhttp.onreadystatechange=function()
+{
+    if (xmlhttp.readyState==4 && xmlhttp.status==200)
+    {
+        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
+    }
+}
+```

JavaScript/JavaScript程序结构.md

@@ -1,30 +0,0 @@
-## 1 条件判断
-
-### if-else
-```
-var age = 20;
-if (age >= 18) { // 如果age >= 18为true，则执行if语句块
-    alert('adult');
-} else { // 否则执行else语句块
-    alert('teenager');
-}
-//else是可选的
-//如果语句块只有一句话，可以省略大括号。
-```
-
-### if-else可以嵌套
-
-```
-var age = 3;
-if (age >= 18) {
-    alert('adult');
-} else {
-    if (age >= 6) {
-        alert('teenager');
-    } else {
-        alert('kid');
-    }
-}
-```
-
-

JavaScript/NodeJS/1简介.md

@@ -0,0 +1,88 @@
+## 1 基础
+
+### 为什么
+
+JavaScript是运行在浏览器的脚本。为了能让JavaScript在服务器上运行，执行服务器上的业务逻辑，产生了NodeJS。
+
+### 是什么
+
+Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
+Node.js是一个事件驱动I/O服务端JavaScript环境。
+
+### 优势
+
+* 单线程高并发。通过JS的回调方法，实现了并发。
+* 自带web服务器模块。
+
+
+## 2 helloworld
+
+### server.js
+```
+var http = require('http');
+
+http.createServer(function (request, response) {
+
+    // 发送 HTTP 头部 
+    // HTTP 状态值: 200 : OK
+    // 内容类型: text/plain
+    response.writeHead(200, {'Content-Type': 'text/plain'});
+
+    // 发送响应数据 "Hello World"
+    response.end('Hello World\n');
+}).listen(8888);
+
+// 终端打印如下信息
+console.log('Server running at http://127.0.0.1:8888/');
+```
+
+```
+node server.js
+```
+
+## 3 NPM
+nodeJS的包管理器。
+
+### 安装
+```
+$ npm install <Module Name>
+$ npm uninstall express
+
+npm install express       # 本地安装
+npm install express -g    # 全局安装
+npm install express@1.3.4 # 指定版本安装
+```
+
+### 查看
+```
+npm list -g
+npm ls
+npm search express
+npm info jquery 查看jQuery相关的信息
+```
+
+### 创建
+
+```
+npm init//创建npm模块
+npm adduser//注册npm
+npm publish//发布模块
+```
+
+### 初始化依赖
+```
+npm install
+```
+### package.json
+
+* name - 包名。
+* version - 包的版本号。
+* description - 包的描述。
+* homepage - 包的官网 url 。
+* author - 包的作者姓名。
+* contributors - 包的其他贡献者姓名。
+* dependencies - 依赖包列表。如果依赖包没有安装，npm 会自动将依赖包安装在 node_module 目录下。
+* repository - 包代码存放的地方的类型，可以是 git 或 svn，git 可在 Github 上。
+* main - main 字段指定了程序的主入口文件，require('moduleName') 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js。
+* keywords - 关键字
+

JavaScript/NodeJS/2基础.md

@@ -0,0 +1,79 @@
+## 1交互式解释器
+
+* 读取 - 读取用户输入，解析输入了Javascript 数据结构并存储在内存中。
+* 执行 - 执行输入的数据结构
+* 打印 - 输出结果
+* 循环 - 循环操作以上步骤直到用户两次按下 ctrl-c 按钮退出。
+
+> nodeJS提供了交互式解释器的功能，可以进行基本的运算和调试。
+## 2回调函数
+
+通过回调函数实现了异步编程。
+
+```
+var fs = require("fs");
+
+fs.readFile('input.txt', function (err, data) {
+    if (err) return console.error(err);
+    console.log(data.toString());
+});
+
+console.log("程序执行结束!");
+```
+
+## 3工程构建
+> CommonJS是nodejs的标准。nodejs是commonjs的实现。
+### 包目录构成
+* package.json 包描述文件
+* bin 用于存放二进制文件的目录
+* lib 用于存放JavaScript代码的目录
+* doc 用于存放文档的目录
+### 模块说明
+
+* CommonJS定义，分为系统模块和自定义模块。
+* 系统模块包括http模块、URL模块、FS模块
+* 用户自定义模块把公共的功能抽离成一个单独的js文件。需要通过exports输出，require引入。
+
+```
+exports.outapi=innerfunction;
+const selfmodule = require(".../module.js")
+selfmodule.outapi();
+```
+
+```
+module.exports obj;
+const seflmodule = reuqire(".../module.js")
+```
+
+### node_moudles文件夹说明
+
+* 工程构建过程中，会自动扫描node_modules文件夹下的子文件夹。
+* 如果子文件夹下有index.js，nodejs会自动识别，并做为模块入口。
+* 如果没有index.js，则nodejs无法识别模块入口。
+* 如果有package.json，nodejs会读取配置文件，并识别配置文件中的入口。包描述文件
+
+### package.json说明
+
+* 使用nmp init，初始化一个nodejs模块，生成一个package.json包描述文件。
+* 使用npm install，会自动下载nodejs模块对应的所有依赖。
+```
+{
+  "name": "first",//模块名字
+  "version": "1.0.0",//模块版本号
+   "main": "app.js",//模块入口
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [//模块检索关键词
+    "hello"
+  ],
+  "author": "ykl",//模块作者
+  "license": "ISC"//模块开原证书
+  "dependencies":[
+      //^版本号第一位不变，~前两位不变，*版本号都不变
+  ]
+  "devDependencies":{
+      //dev工具依赖的包。
+  }
+}
+```

JavaScript/NodeJS/5fs模块.md

@@ -0,0 +1 @@
+const fs = re

JavaScript/NodeJS/6异步回调.md

@@ -0,0 +1,86 @@
+> nodejs最著名的地方，可能就是异步回调了吧。通过异步非阻塞的编程方式，通过回调函数，实现了通信。可以实现宏观上的单线程并发。
+
+## ES6新特性
+### let const
+
+let const 都是块作用域。不是函数的作用域。或是对象作用域。
+
+### 模板字符串
+
+```
+name = 'zhangsan'
+age = 10
+console.log(`${name}${age}`)
+```
+
+### 箭头函数
+
+```
+(err,data)={
+
+}
+```
+
+## 2 异步方法获取数据
+
+### 不能通过返回值获取异步方法中的数据
+
+因为return语句执行的时候，内部的运算还没有结束。
+
+### 通过回调函数获取异步方法中的数据
+
+```
+function getData(callback){
+    //异步调用
+    setTimeout(function(){
+        var name = "zhangsan ";
+        callback(name)
+    },1000);
+}
+
+getData(function(aaa){
+    console.log(aaa);
+})
+```
+
+### 通过promise获取异步方法中的数据
+
+promise添加回调方法。p.then调用的时候，复写回调方法。与之前的回调方法很相似。相当于promise代替了之前的getData方法，调用异步方法。
+```
+var p = new Promise(function(resolve,reject){
+    //异步调用
+    setTimeout(function(){
+        var name = "zhangsan ";
+        callback(name)
+    },1000);
+})
+
+p.then(function(data){
+    console.log(data);
+})
+```
+
+### async、await和promise实现异步非阻塞通信
+
+* async，想要同步必须返回promise类型
+* await，等待异步方法执行完成
+* promise,能够作为异步方法标记，await会等被标记为promise的异步方法执行完毕后，获取返回值。
+
+```
+async function test(){
+    return new Promise((resolv,reject)=>{
+        var name = "zhang san "
+        resolve(name);
+    },1000)
+}
+
+async function main(){
+    var data = await test();
+    console.log(data);
+}
+
+main
+```
+
+
+

JavaScript/NodeJS/7流读写.md

@@ -0,0 +1,5 @@
+## 1 文件读入流fs.createReadStream
+
+## 2 文件写入流fs.createWriteStream
+
+## 3 管道流reStream.pipe(writeStream)

JavaScript/NodeJS/8静态web服务器.md

@@ -0,0 +1,6 @@
+## 1 URL解析
+
+
+## 2 URL路由
+
+ 

JavaScript/NodeJS/9Ejs.md

@@ -0,0 +1,8 @@
+# 文件渲染
+
+页面渲染主要有两种方式，后端渲染和前端渲染。
+
+1. 后端渲染主要在服务器将动态数据，加载到HTML页面，然后返回HTML页面。
+2. 前端渲染主要在客户端（浏览器）上异步请求数据，加载到当前页面，然后返回HTML页面。
+
+后端渲染速度慢，但逻辑简单。前端渲染速度快，响应速度快。

JavaScript/NodeJS/demo/app.js

@@ -0,0 +1,21 @@
+const http = require('http');
+const url = require('url');
+http.createServer(
+    function(request,response){
+        //客户端传递的信息
+        console.log(request.url);
+        //使用URL模块解析url
+        if(request.url!='/favicon.ico'){
+            var userinfo = url.parse(request.url,true).query;
+            console.log(userinfo.name+userinfo.age);
+        }
+
+        //响应客户端的信息
+        response.writeHead(200,{'Content-Type':'text/plain;charset=utf-8'});
+        response.write("你好ddddthis is node js\n")
+
+        //结束客户端响应
+        response.end('hello world');
+    }
+).listen(8081);
+console.log("server runing")

JavaScript/NodeJS/demo/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "first",
+  "version": "1.0.0",
+  "description": "hello",
+  "main": "app.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "hello"
+  ],
+  "author": "ykl",
+  "license": "ISC"
+}

JavaScript/NodeJS/demo/test.js

@@ -0,0 +1,24 @@
+
+
+
+async function run(){
+    var a=1;
+    for(var i=0;i<1000000000;i++){
+        a++;
+    }
+    console.log("run finish");
+    return "run return";
+}
+
+async function run2(){
+    console.log(await run());
+    console.log("run2 finish")
+    return "run2 return";
+}
+
+async function run3(){
+    
+    console.log(await run2());
+    return "run3 return";
+}
+run3();

JavaScript/jQuery/1简介.md

@@ -0,0 +1,68 @@
+## 1 功能
+
+> jquery是js的一个框架。目的是对js的编程方式进行封装，提供了新的编程方法。简化过程。
+
+基本内容：
+* HTML 元素选取
+* HTML 元素操作
+* CSS 操作
+
+事件和动画处理
+* HTML事件处理
+* JavaScript 特效动画
+
+
+* HTML DOM 遍历和修改
+* AJAX
+* Utilities
+
+## 2 引用
+
+
+### 使用本地jquery
+```
+<head>
+<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
+</script>
+</head>
+```
+### 使用CDN
+
+```
+<head>
+<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
+</script>
+</head>
+```
+## 3 CSS选择器
+
+### 元素选择器
+
+```
+$("p")
+```
+
+### #id选择器
+
+```
+$("#test")
+```
+
+### .class 选择器
+
+```
+$(".test")
+```
+
+### 属性选择器
+
+```
+$("[href]")
+```
+
+### 特殊选择器
+
+```
+$("*")	选取所有元素	
+$(this)	选取当前 HTML 元素
+```

JavaScript/jQuery/2事件.md

@@ -0,0 +1,42 @@
+## 1 常见事件
+> jquery对事件进行了重新封装。采取了与原生JS完全不同的事件处理方法。JS是在HTMLDOM元素中个，添加事件属性，将事件属性与事件响应函数绑定的方法，完成事件响应机制。
+
+> jquery，大多数DOM事件都有一个等效的jQuery方法对应。调用jQuery对象的事件函数，传递高阶函数作为参数，用于回调。实现事件响应与主进程的异步通信。
+### 鼠标事件
+
+* click
+* dblclick
+* mouseenter
+* mouseleave
+* hover
+
+### 键盘事件
+
+* keypress
+* keydown
+* keyup
+
+
+### 表单事件
+* submit
+* change
+* focus
+* blur
+
+### 文档/窗口事件
+* load
+* resize
+* scroll
+* unload
+
+## 2 事件处理
+### 事件处理方法
+ 回调函数作为参数进行传递。
+
+```
+("p").click(function(){$(this).hide()});
+```
+### $(document).ready()
+
+在加载完成文档后需要执行的函数。
+

JavaScript/jQuery/3动画.md

@@ -0,0 +1,111 @@
+
+# jQuery效果
+
+## 1 显示和隐藏
+```
+$(selector).hide(speed,callback);
+$(selector).show(speed,callback);
+$(selector).toggle(speed,callback);
+
+$("#hide").click(function(){
+  $("p").hide();
+});
+ 
+$("#show").click(function(){
+  $("p").show();
+});
+
+$("button").click(function(){
+  $("p").toggle();
+});
+```
+
+## 2 淡入淡出
+
+```
+$(selector).fadeIn(speed,callback);
+$(selector).fadeOut(speed,callback);
+$(selector).fadeToggle(speed,callback);
+$(selector).fadeTo(speed,opacity,callback);
+
+$("button").click(function(){
+  $("#div1").fadeIn();
+  $("#div2").fadeIn("slow");
+  $("#div3").fadeIn(3000);
+});
+
+$("button").click(function(){
+  $("#div1").fadeOut();
+  $("#div2").fadeOut("slow");
+  $("#div3").fadeOut(3000);
+});
+
+$("button").click(function(){
+  $("#div1").fadeToggle();
+  $("#div2").fadeToggle("slow");
+  $("#div3").fadeToggle(3000);
+});
+$("button").click(function(){
+  $("#div1").fadeTo("slow",0.15);
+  $("#div2").fadeTo("slow",0.4);
+  $("#div3").fadeTo("slow",0.7);
+});
+```
+## 3 滑动
+
+```
+$(selector).slideDown(speed,callback);
+$(selector).slideUp(speed,callback);
+$(selector).slideToggle(speed,callback);
+
+$("#flip").click(function(){
+  $("#panel").slideDown();
+});
+$("#flip").click(function(){
+  $("#panel").slideUp();
+});
+
+$("#flip").click(function(){
+  $("#panel").slideToggle();
+});
+```
+
+## 4 jquery效果动画
+### 定义
+animate()方法
+* 必需的 params 参数定义形成动画的 CSS 属性。
+* 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
+* 可选的 callback 参数是动画完成后所执行的函数名称。
+```
+$(selector).animate({params},speed,callback);
+```
+
+### 使用
+
+```
+$("button").click(function(){
+  $("div").animate({
+    height:'toggle'
+  });
+});
+```
+
+## 5 停止动画
+```
+$(selector).stop(stopAll,goToEnd);
+
+$("#stop").click(function(){
+  $("#panel").stop();
+});
+```
+
+## 6 jquery动画链
+```
+$("#p1").css("color","red")
+.slideUp(2000)
+.slideDown(2000);
+
+$("#p1").css("color","red")
+  .slideUp(2000)
+  .slideDown(2000);
+```

JavaScript/jQuery/4操作.md

@@ -0,0 +1,110 @@
+
+## 1 获取设置内容的方法
+
+* * text() - 设置或返回所选元素的文本内容
+* * html() - 设置或返回所选元素的内容（包括 HTML 标记）
+* * val() - 设置或返回表单字段的值
+
+```
+$("#btn1").click(function(){
+  alert("Text: " + $("#test").text());
+});
+$("#btn2").click(function(){
+  alert("HTML: " + $("#test").html());
+});
+$("#btn1").click(function(){
+  alert("值为: " + $("#test").val());
+});
+
+$("#btn1").click(function(){
+    $("#test1").text("Hello world!");
+});
+$("#btn2").click(function(){
+    $("#test2").html("<b>Hello world!</b>");
+});
+$("#btn3").click(function(){
+    $("#test3").val("RUNOOB");
+});
+```
+
+## 2 获取设置属性的方法
+attr() 方法用于获取属性值。
+```
+$("button").click(function(){
+  alert($("#runoob").attr("href"));
+});
+
+$("button").click(function(){
+  $("#runoob").attr("href","http://www.runoob.com/jquery");
+});
+```
+jQuery 方法 attr()，也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
+
+```
+$("button").click(function(){
+  $("#runoob").attr("href", function(i,origValue){
+    return origValue + "/jquery"; 
+  });
+});
+```
+
+## 3 添加元素
+
+* append() - 在被选元素的结尾插入内容
+* prepend() - 在被选元素的开头插入内容
+* after() - 在被选元素之后插入内容
+* before() - 在被选元素之前插入内容
+
+```
+$("p").append("追加文本");
+$("p").prepend("在开头追加文本");
+$("img").after("在后面添加文本");
+$("img").before("在前面添加文本");
+```
+
+## 4 删除元素
+
+* remove() - 删除被选元素（及其子元素）
+* empty() - 从被选元素中删除子元素
+```
+$("#div1").remove();
+$("#div1").empty();
+```
+
+
+## 5 CSS设置
+
+* addClass() - 向被选元素添加一个或多个类
+* removeClass() - 从被选元素删除一个或多个类
+* toggleClass() - 对被选元素进行添加/删除类的切换操作
+* css() - 设置或返回样式属性
+
+
+```
+$("button").click(function(){
+  $("h1,h2,p").addClass("blue");
+  $("div").addClass("important");
+});
+
+$("button").click(function(){
+  $("h1,h2,p").removeClass("blue");
+});
+
+$("button").click(function(){
+  $("h1,h2,p").toggleClass("blue");
+});
+
+$("p").css("background-color","yellow");
+```
+
+## 7 尺寸设置
+
+![](image/border.gif)
+
+* width()
+* height()
+* innerWidth()
+* innerHeight()
+* outerWidth()
+* outerHeight()
+

JavaScript/jQuery/5遍历.md

@@ -0,0 +1,82 @@
+## 1 定义
+
+与Xpath选择器十分详细。在简介中通过css选择器，能够锁定目标元素。
+
+
+## 2 向上遍历
+
+* parent()
+* parents()
+* parentsUntil()
+
+```
+$(document).ready(function(){
+  $("span").parents("ul");
+});
+
+$(document).ready(function(){
+  $("span").parentsUntil("div");
+});
+```
+
+## 3 向下遍历
+
+* children()
+* find()
+
+```
+$(document).ready(function(){
+  $("div").children();
+});
+
+$(document).ready(function(){
+  $("div").find("span");
+});
+```
+
+## 4 水平遍历
+
+* siblings()
+* next()
+* nextAll()
+* nextUntil()
+* prev()
+* prevAll()
+* prevUntil()
+
+```
+$(document).ready(function(){
+  $("h2").siblings();
+});
+
+$(document).ready(function(){
+  $("h2").next();
+});
+
+$(document).ready(function(){
+  $("h2").nextUntil("h6");
+});
+```
+
+## 5 遍历过滤
+
+* first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
+*  filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
+
+```
+$(document).ready(function(){
+  $("div p").first();
+});
+$(document).ready(function(){
+  $("div p").last();
+});
+$(document).ready(function(){
+  $("p").eq(1);
+});
+$(document).ready(function(){
+  $("p").filter(".url");
+});
+$(document).ready(function(){
+  $("p").not(".url");
+});
+```

JavaScript/jQuery/6ajax.md

@@ -0,0 +1,61 @@
+## 1 load
+
+### load方法
+jQuery load() 方法是简单但强大的 AJAX 方法。
+
+load() 方法从服务器加载数据，并把返回的数据放入被选元素中
+
+```
+$(selector).load(URL,data,callback);
+
+$("#div1").load("demo_test.txt");
+```
+
+### load回调参数
+
+可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
+
+responseTxt - 包含调用成功时的结果内容
+statusTXT - 包含调用的状态
+xhr - 包含 XMLHttpRequest 对象
+
+```
+$("button").click(function(){
+  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
+    if(statusTxt=="success")
+      alert("外部内容加载成功!");
+    if(statusTxt=="error")
+      alert("Error: "+xhr.status+": "+xhr.statusText);
+  });
+});
+```
+
+## 2 GET方法
+GET - 从指定的资源请求数据.GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
+```
+$.get(URL,callback);
+
+$("button").click(function(){
+  $.get("demo_test.php",function(data,status){
+    alert("数据: " + data + "\n状态: " + status);
+  });
+});
+```
+## 3 POST方法
+
+POST - 向指定的资源提交要处理的数据.POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据
+
+```
+$.post(URL,data,callback);
+
+$("button").click(function(){
+    $.post("/try/ajax/demo_test_post.php",
+    {
+        name:"菜鸟教程",
+        url:"http://www.runoob.com"
+    },
+    function(data,status){
+        alert("数据: \n" + data + "\n状态: " + status);
+    });
+});
+```

Spring/Spring MVC/简介.md

@@ -0,0 +1,6 @@
+## 1 简介
+
+MVC：Model+View+Controller(数据模型+视图+控制器)
+三层架构：Presentation tier+Application tier+Data tier（展现层+应用层+数据访问层）
+
+MVC与三层架构不是对应关系。MVC只存在三层架构的展示层。M是数据模型，包含数据对象，叫做Model，用来和V之间进行数据交互和传值。V指的是视图页面，包含JSP、freeMarker、Velocity、Thymeleaf、Tile等；C是控制器。

Spring/Springboot/4注解详解.md

@@ -0,0 +1,53 @@
+## Springboot注解
+
+### @Autowired
+@Autowired顾名思义，就是自动装配，其作用是为了消除代码Java代码里面的getter/setter与bean属性中的property。当然，getter看个人需求，如果私有属性需要对外提供的话，应当予以保留。@Autowired默认按类型匹配的方式，在容器查找匹配的Bean，当有且仅有一个匹配的Bean时，Spring将其注入@Autowired标注的变量中。这里@Autowired注解的意思就是，当Spring发现@Autowired注解时，将自动在代码上下文中找到和其匹配（默认是类型匹配）的Bean，并自动注入到相应的地方去
+
+### @Controller
+修饰class，用来创建处理http请求的对象.用于标注控制层组件(如struts中的action) 
+
+### @RestController
+Spring4之后加入的注解，原来在@Controller中返回json需要@ResponseBody来配合
+
+### @ResponseBody
+默认返回json格式
+
+### @RequestMapping：配置url映射。现在更多的也会直接用以Http Method直接关联的映射注解来定义，比如：GetMapping、PostMapping、DeleteMapping、PutMapping等
+
+
+### @Service
+
+服务层组件，用于标注业务层组件,表示定义一个bean，自动根据bean的类名实例化一个首写字母为小写的bean，例如Chinese实例化为chinese，如果需要自己改名字则:@Service("你自己改的bean名")。   
+
+### @Repository
+
+持久层组件，用于标注数据访问组件，即DAO组件 
+
+### @Component
+
+泛指组件，当组件不好归类的时候，我们可以使用这个注解进行标注。 
+
+## MyBatis注解
+
+## Lombok注解
+
+@Data 注解在类上；提供类所有属性的 getting 和 setting 方法，此外还提供了equals、canEqual、hashCode、toString 方法
+@Setter ：注解在属性上；为属性提供 setting 方法
+@Setter ：注解在属性上；为属性提供 getting 方法
+
+@ToString注解，为使用该注解的类生成一个toString方法，默认的toString格式为：ClassName(fieldName= fieleValue ,fieldName1=fieleValue)。
+@Log4j ：注解在类上；为类提供一个 属性名为log 的 log4j 日志对象
+
+@NoArgsConstructor ：注解在类上；为类提供一个无参的构造方法
+@AllArgsConstructor ：注解在类上；为类提供一个全参的构造方法
+@RequiredArgsConstructor : 生成一个包含 "特定参数" 的构造器，特定参数指的是那些有加上 final 修饰词的变量们
+
+@EqualsAndHashCode：自动生成 equals(Object other) 和 hashcode() 方法，包括所有非静态变量和非 transient 的变量。如果某些变量不想要加进判断，可以透过 exclude 排除，也可以使用 of 指定某些字段
+@Cleanup : 可以关闭流
+@Builder ： 被注解的类加个构造者模式
+@Synchronized ： 加个同步锁
+@SneakyThrows : 等同于try/catch 捕获异常
+@NonNull : 如果给参数加个这个注解 参数为null会抛出空指针异常
+@Value : 注解和@Data类似，区别在于它会把所有成员变量默认定义为private final修饰，并且不会生成set方法。
+
+

Spring/Spring介绍.md

@@ -0,0 +1,36 @@
+## 简介
+
+Spring是轻量级企业级解决方案，可以基于Java Spring解决Java EE的所有问题。
+
+## 特性
+
+### IOC容器（控制反转）
+通过控制反转，对象在被创建的时候，由一个调控系统内所有对象的外界实体将其所依赖的对象的引用传递给它。也可以说，依赖被注入到对象中。
+
+IoC是一个很大的概念,可以用不同的方式实现。其主要形式有两种：
+依赖查找：容器提供回调接口和上下文条件给组件。EJB和Apache Avalon 都使用这种方式。这样一来，组件就必须使用容器提供的API来查找资源和协作对象，仅有的控制反转只体现在那些回调方法上（也就是上面所说的 类型1）：容器将调用这些回调方法，从而让应用代码获得相关资源。
+依赖注入：组件不做定位查询，只提供普通的Java方法让容器去决定依赖关系。容器全权负责的组件的装配，它会把符合依赖关系的对象通过JavaBean属性或者构造函数传递给需要的对象。通过JavaBean属性注射依赖关系的做法称为设值方法注入(Setter Injection)；将依赖关系作为构造函数参数传入的做法称为构造器注入（Constructor Injection）
+Spring 的 IoC 设计支持以下功能：
+
+依赖注入
+依赖检查
+自动装配
+支持集合
+指定初始化方法和销毁方法
+支持回调某些方法（但是需要实现 Spring 接口，略有侵入）
+
+### AOP
+
+在软件业，AOP为Aspect Oriented Programming的缩写，意为：面向切面编程，通过预编译方式和运行期间动态代理实现程序功能的统一维护的一种技术。AOP是OOP的延续，是软件开发中的一个热点，也是Spring框架中的一个重要内容，是函数式编程的一种衍生范型。利用AOP可以对业务逻辑的各个部分进行隔离，从而使得业务逻辑各部分之间的耦合度降低，提高程序的可重用性，同时提高了开发的效率。
+
+主要功能
+日志记录，性能统计，安全控制，事务处理，异常处理等等。
+主要意图
+将日志记录，性能统计，安全控制，事务处理，异常处理等代码从业务逻辑代码中划分出来，通过对这些行为的分离，我们希望可以将它们独立到非指导业务逻辑的方法中，进而改变这些行为的时候不影响业务逻辑的代码。
+
+AOP是Spring框架面向切面的编程思想，AOP采用一种称为“横切”的技术，将涉及多业务流程的通用功能抽取并单独封装，形成独立的切面，在合适的时机将这些切面横向切入到业务流程指定的位置中。
+
+例如记录日志。
+
+
+AOP存在的目的是为了解耦。AOP可以让一组类共享相同的行为，在OOP只能通过集成类和实现接口，来时代码的耦合性增强，且类集成只能为单继承，阻碍更多行为，添加到一组类上，AOP弥补了OOP的不足

Springboot/4注解详解.md

@@ -1,15 +0,0 @@
-## Springboot注解
-
-
-@Controller：修饰class，用来创建处理http请求的对象
-@RestController：Spring4之后加入的注解，原来在@Controller中返回json需要@ResponseBody来配合
-@ResponseBody，默认返回json格式
-@RequestMapping：配置url映射。现在更多的也会直接用以Http Method直接关联的映射注解来定义，比如：GetMapping、PostMapping、DeleteMapping、PutMapping等
-
-
-## 其他注解
-
-@Data注解可以实现在编译器自动添加set和get函数的效果。该注解是lombok提供的
-@NoArgsConstructor创建无参数构造函数。
-
-

TOOL/VSCode

@@ -0,0 +1,5 @@
+
+
+
+
+

思考/多线程通信和并发的理解.md

@@ -0,0 +1,41 @@
+# 多线程与并发
+
+## 1 补充
+### this指针
+this关键字指向的是当前对象的引用
+
+this 不是指向类。而是在实例化的时候与当前类的实例也就是对象，进行绑定。
+
+### 关于回调
+
+对于Python与JavaScript这种，能够直接传递“函数类型”的参数的语言，回调函数可以作为另外一个函数的参数，进行传递。
+
+在C++和java这种只能传递基本数据类型和构造数据类型的语言中，即函数不作为数据类型的语言中，可以通过传递整个对象的方法，使得被调用者，能够通过调用者对象的指针，进行回调，这也是设计模式的一种。（观察者模式？）
+
+
+关于回调函数的本质理解：当其他程序执行时，能够通过回调函数，转移进程控制权限，给调用者。可以把调用者与被调用者分开。调用者能够显式调用被调用者，同时被调用这能通过回调函数隐式调用调用者。
+
+关于回调函数的本质理解：回调函数在同一个层次内是没有用的，或者说没有必要的。如果一个人，在实现一个层次内部的函数执行权限转移过程中，可以直接进行相互调用，因为本质上，两个部分是完全可知的。但是在不同层次的调用中，例如用户层与系统层中，用户层调用系统层，可以通过显式调用，但是系统层并不会考虑用户层的具体实现，对用户层是不可知的。这个时候，系统层会通过传递来的回调函数，将进程控制权交给用户层。
+
+那么问题来了，直接通过返回值的方式转移进程的控制权限不好吗。在回调的部分通过返回值，区分不同的情况，用户自己选择执行什么样的函数。
+
+首先允许我，在这里将程序简单地分为用户层和系统层。用户层就是程序员编写的代码，系统层就是程序语言提供的外部库、框架、工具等。
+
+关于回调函数的本质理解：回调函数在单线程的编程中也有一定的作用。在之前的疑问中，用户根据返回值调用不同的函数与系统调用回调函数与系统通过回调函数调用用户程序，后者，当回调程序执行完成后控制权依旧交给系统，不必考虑，系统在什么地方中断。在这里涉及一个关键的问题，到底是用户具有主动权还是系统具有主动权。在架构设计中有一个很关键的问题，系统应该提供大量的类、方法等工具，帮助用户实现一个完成的程序，还是系统应该实现主体的程序，在特定情况下调用用户的程序实现局部功能？
+
+关于这个问题的讨论，我想应该牵扯到系统架构相关的很多知识，我觉得有空多读点专业类的书籍还是很有帮助的。理论书籍。要远比自己单纯的了解技术和知识好的多。
+
+我想关于上边的问题，应该可以非常好的区分编程框架与库的区别。比如jQuery就是编程库，它提供了功能。springboot是编程框架，它提供了主体流程，用户只要实现少量的自定义模块，而不需要管理程序的一级一级调用过程。
+
+简单来说，用户只要通过少量的注解，就能将自己的类注册到spring框架当中，用户完成的知识其中的一笑部分补充代码。
+
+简单举例，假如我想要设计一个编程框架，这个框架是想要提供可以复用的功能，还是想完成主要的流程呢？
+
+我之前觉得仿真程序的开发，不好的原因是扩展性、可读性、重用性都十分差，所以，从工程的角度来说，这些代码确实需要重构。
+
+那么通过什么样的方式实现代码重构呢？最终的要的办法是实现模块化，将所有的功能模块化，并提供统一的标准接口，规范命名等。
+
+另一个很重要的内容，是构建新的编程框架。使每一个开发人员都专注于搞算法和逻辑，而不是在无休止的重复尝试。写一堆无用的重复的逻辑代码。
+
+模块化，提供编程的API，实现各种可以重复使用的功能。
+编程框架，编程模型，实现主要的业务流程，作为系统层，用户通过注入的方式，将自己身构建的代码添加到系统流程中。系统通过回调的方式，实现特殊情况的处理。

思考/多线程通信和并发的理解2.md

@@ -0,0 +1,30 @@
+单线程并发
+
+单线程并发，并非真正意义上的单线程。而是只有单一的用户线程。还包括数据库，socket等系统多线程。
+
+
+单个用户线程：对于十万个用户同时访问服务器，有两种方式处理并发。
+
+1. 为每个用户开一个新的用户现场，每个线程内部采用阻塞通信的方式，即同步通信，从数据库中取数据、与服务器通信等，直到得到结果，返回给用户。其中涉及多个用户线程。
+2. 只有一个用户线程，采用非阻塞通信的方式，即异步通信，通过事件驱动的方式实现并发。从数据库中取数据、与服务器通信或与其他进程通信，并不会阻塞线程的执行，每次数据获取完毕，通过事件的方式，调用用户进程，处理得到的数据，返回给用户。其中，只有一个用户进程。
+3. 对于事件驱动的方法：会存在一个事件队列，唯一的用户进程会不断地依次处理队列中的事件。所以不会存在冲突。有两种处理事件的方法：基于监听器的事件处理机制和基于回调的事件处理机制。
+
+
+常见的线程通信：与服务器进行通信socket，与数据库进行通信、与文件读写进程进行通信。
+
+
+前者通过扩展空间的方式，后者通过缩短时间的方式。更快速地执行操作。
+
+## 2 同步与异步 阻塞与非阻塞
+1. 老张把水壶放到火上，立等水开。（同步阻塞）老张觉得自己有点傻
+2. 老张把水壶放到火上，去客厅看电视，时不时去厨房看看水开没有。（同步非阻塞）老张还是觉得自己有点傻，于是变高端了，买了把会响笛的那种水壶。水开之后，能大声发出嘀~~~~的噪音。
+3. 老张把响水壶放到火上，立等水开。（异步阻塞）老张觉得这样傻等意义不大
+4. 老张把响水壶放到火上，去客厅看电视，水壶响之前不再去看它了，响了再去拿壶。（异步非阻塞）
+
+
+
+
+多线程同步阻塞。
+
+单线程异步非阻塞：通过事件响应机制，包括监听器和回调两种方法，实现单线程，异步非阻塞。
+