MongoDB相关分享

发表于 2018-02-23

MongoDB相关分享

以班车系统为例

文档型数据库MongoDB

先简单介绍下文档型数据库是什么。

面向文档的数据库（英语：Document-oriented database）或文档储存，是一种被设计用于储存、检索和管理文档导向信息（也称为“半结构化数据”）的计算机程序。文档导向的数据库是 NoSQL 数据库的一个主要类别，文档导向的数据库的普及程度已经随着 NoSQL 本身被不断使用而有所增长。 ——维基百科

文档型数据库与传统的关系型数据库存在着差异。

关系数据库通常将数据存储在相互独立的表格中，这些表格由程序开发者定义，单独一个的对象可以散布在若干表格中。对于数据库中某单一实例中的一个给定对象，文档数据库存储其所有信息，并且每一个被存储的对象可与任一其它对象不同。这使得将对象映射入数据库简单化，并通常会消除任何类似于对象关系映射的事物。这也使得文档数据库对网络应用有较大价值，因为后者的数据处在不断变化中，而且对于后者来说，部署速度是一个重要问题。

关系型数据库存在ACID原则，即：

阅读全文 »

es6常用特性

发表于 2017-12-12

1、解构赋值

1.1、定义

什么是解构赋值？

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。这种赋值语法极度简洁，同时还比传统的属性访问方法更为清晰。

其中包括：数组，对象的解构赋值，字符串的解构赋值，函数参数的解构赋值

1.2、数组解构

let  test=[1,2,3];

//es5
let first = test[0];
let second = test[1];
let third = test[2];

//es6
 let [first, , third] = test
 //fist//1
 //second//undefined

1.3、对象解构

let obj={ foo: "a", bar: "b" };
//es5
let foo= obj.foo;
let bar= obj.bar;
//es6
let { foo, bar } = obj;
//foo // "a"
//bar // "b"

1.4、字符解构

const [a, b, c, d, e] = 'hello';
console.log("d:", d);//l

let { length } = "string";
console.log("length:", length);//6

1.5、函数解构

//es5
var arr = [1, 2];

function test(a, b) {
  console.log("a:" + a);//1
  console.log("b:" + b);//2
}
test(arr[0], arr[1]);

//es6
var arr1 = [11, 22];

function test1([a, b]) {
  console.log("a:" + a);//11
  console.log("b:" + b);//22
}
test1(arr1);

var obj = { b: 33, a: 44 };

function test2({ a, b }) {
  console.log("a:" + a);//33
  console.log("b:" + b);//44
}
test2(obj);

//用法：

let { floor, pow } = Math;
console.log("a" + pow(3, 3));//9
// 引入库
const {toNumber,trim} = require('lodash');

2、运算符（…）

2.1、定义

（…）用于把一个数组转化为用逗号分隔的参数序列，它常用在不定参数个数时的函数调用，数组合并,替代es5的apply方法，与解构赋值结合，生成新数组等情形。

2.2、可变参数个数的函数调用

function add(...vals) {
  let sum = 0;
  for (let i = 0; i < vals.length; i++) {
    sum += vals[i];
  }
  return sum;
}

let test = [1, 2, 3, 4, 5];
let sum = add(...test);//15

2.3、便捷的数组合并

let arr1 = [1,2];
let arr2 = [5,6];
let newArr = [20];
//es5
newArr = newArr.concat(arr1).concat(arr2); //[20,1,2,5,6]
//es6
newArr = [20,...arr1,...arr2];  //[20,1,2,5,6]

2.4、替代es5的apply方法

//ES5
function f(x, y, z) {}
var args = [0, 1, 2];
f.apply(null, args);
// ES6
let args = [0, 1, 2];
f(...args);

//ES5
Math.max.apply(null, [14, 3, 77])
// ES6
Math.max(...[14, 3, 77])
//等同于Math.max(14, 3, 77);

2.5、与解构赋值结合，生成新数组

1
2
3

const [first, ...rest] = [1, 2, 3];
//first // 1
//rest // [2, 3]

3、箭头函数

3.1、定义

es6使用“箭头”（=>）定义函数。

箭头函数（arrow function），使用的频率非常的高，写法也是非常的简洁和清晰！

3.2、简化回调函数

[1,2,3].map(function (x) {
  return x * x;
});

// es6
[1,2,3].map(x => x * x);
const test = (head, ...tail) => [head, tail];
test(1, 2, 3, 4, 5)// [1,[2,3,4,5]]

//箭头函数取代Function.prototype.bind，不应再用self/_this/that绑定 this
//es5
const self = this;
const boundMethod = function(...params) {
  return method.apply(self, params);
}

// es6
const boundMethod = (...params) => method.apply(this, params);

4、箭头函数

4.1、定义

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量，可多重嵌套。

4.2、简化回调函数

//es5
let title = "hello world!"
var tpl = '<div>' +
  '<span>' + title + '</span>' +
  '</div>';

//es6
let tpl2 = `<div>
	<span>${title}</span>
</div>`;

let tpl3 = `<div>
	<span>${title+`
	    <span>${title} 2016</span>
	`}</span>
</div>`;

5、export, import

5.1、定义

使用import取代require。
使用export取代module.exports。

5.2、简化回调函数

//es5
const moduleA = require('moduleA');
const func1 = moduleA.func1;
const func2 = moduleA.func2;

// es6
import { func1, func2 } from 'moduleA'; //对象解构


// commonJS的写法
const commons = {
  SUCCESS: '请求成功',
  FAILED: '请求失败'
}
module.exports = commons;

// ES6的写法
const commons = {
  SUCCESS: '请求成功',
  FAILED: '请求失败'
}

export commons

6、for … of

6.1、定义

for…of循环，可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、Generator 对象，以及字符串。

6.2、遍历数组

const arr = ['red', 'green', 'blue'];
for (let v of arr) {
  console.log(v); // red green blue
}
// 对比for-in和for-of：

for (var k in arr) {
  console.log(k);
} // 0 1 2

var engines = new Set(["Gecko", "Webkit", "Webkit"]);
for (var e of engines) {
  console.log(e);
}
// Gecko
// Webkit

var es6 = new Map();
es6.set("edition", 6);
es6.set("standard", "ECMA-262");
for (var [name, value] of es6) {
  console.log(name + ": " + value);
}
//edition: 6
//standard: ECMA-262

6.3、遍历Set 和 Map 结构

let map = new Map().set('a', 1).set('b', 2);
for (let pair of map) {
  console.log(pair);
}
// ['a', 1]
// ['b', 2]

for (let [key, value] of map) {  //数组解构
  console.log(key + ' : ' + value);
}
//a : 1
//b : 2

7、es6代码片段示例：

 const moment = require('moment');
const { pathConfig } = require('../config');

const formatDate = (date) => {
  return moment(date).format('YYYY-MM-DD HH:mm');
};

const getPath =  (picture) => {
  const pathParse = path.parse(picture.path);
  return `${pathConfig.PIC_DIR}${pathParse.dir}/${picture.name}_${pathParse.ext}`;
};
const assignPicture = (picture) => {
  const plain = picture.get({ plain: true});
  const path = getPath(plain);
  return assignIn(plain, {
    path: path,
    created_at: formatDate(picture.created_at),
  });
};
const getResult = (pictureRs) => {
  const assignedResultRows = pictureRs.rows.map(assignPicture);
  return {
    count: pictureRs.count,
    rows: assignedResultRows,
  };
};

8、小结

以上是平时用得比较多的内容，这些语法、新增类型、模块调用等从代码量上、可读性上、操作上给项目带来了不少便利。

随着es6的普及，这些高级语言的特性让写js也越来越顺畅。

9、参考资料

1.ECMAScript 6 入门http://es6.ruanyifeng.com/

2. ES6 扩展运算符 三个点（...）
http://www.jianshu.com/p/86cbabeda999

3. es6的常用语法和优越性https://juejin.im/post/5a08e5c55188252abc5dd96f#heading-2

4. ES6的一些常用特性
https://www.cnblogs.com/MuYunyun/p/6235325.html#_label6

vue虚拟dom

发表于 2017-10-23

本文将结合vue2.0源码向各位介绍下vue virtual dom。

什么是virtual dom

vue2.0和react都引入了virtual dom的概念，virtual dom就是一种在js中模拟dom对象树来优化dom操作的技术或思想。

阅读全文 »

Transitions & Animations

发表于 2017-10-08

我之前也接触过动画，但是平时没怎么用，一段时间不看就又忘了，transition、translate、transform记得头皮发麻。若本篇文章从概念的角度去介绍transition和animation的用法，会显得枯燥冗余，而且网上资料很多，解释比较单一，比较难理解。今天换一种方式，主要从应用的角度去认识transition和animation的用法。

阅读全文 »

浅谈iframe及其跨域通信

发表于 2017-09-13

Iframe元素在IE浏览器横行的时代曾大量的使用，应用场景包括引入公共的导航栏、公共登陆框等一些通用的组件，一些后台管理系统也经常能看到iframe的身影。iframe元素能够创建另外一个文档的内联框架，也就是说它有独立的上下文环境，具备沙箱隔离功能。HTML规范很明确的提到过：如果你需要独立的上下文环境，那么就用iframe，如果不是，那就不要用。

虽然建议上我们应该尽量避免使用iframe，但是某些特殊场景下，iframe还是最好的选择。所以了解清楚iframe对于技术的选型是有帮助的。下面简单介绍下iframe的特性和目前应用的场景，当然后面会介绍最主要的iframe跨域通信。

阅读全文 »

前端模板引擎

发表于 2017-08-23

实现一个基于字符串的模板引擎

一、什么是模板引擎

模板引擎定义为输入模板字符串 + 数据，得到渲染过的字符串。它看起来很神秘，能把十分麻烦的字符串拼接，变成像写html那样直观和简单。

使用模板引擎来替代普通的字符串拼接的优势很明显，首先手写的字符串拼接是很容易出错的，其次是非常的不容易维护，相信如果让你写50行的tpl会是一件很艰难的事情，何况以后还得在上面修修改改，不小心删掉一个+号就能排查半天bug。

而模板引擎能帮我们解决上面列举的所有问题，你所要做的是按照它给的模板语法，像写html一样写tpl，然后扔一串数据给它就行了。简单、直观还容易维护。

我们看个简单的例子：

var data = {
    name: 'lily',
    age: 18
};
var tpl = "my name is <%name%>, I'm <%age%> years old.";

tplEngine(tpl, data);
//"my name is lily, I'm 18 years old."

阅读全文 »

正则浅谈

发表于 2017-08-15

正则浅谈

写在前面

最近工作中经常需要使用正则做字符串校验或片段提取。过去常常是百度一下，略作修改就用在项目中。近来尝试自己写正则表达式，发现正则语法已经忘记得七零八落，许多基础语法混淆不清，遇到复杂的正则更是抓瞎。不得已，将正则语法重新复习了一遍，又有新的收获。温故而知新，与君共勉。

什么是正则

回忆一下，通常情况下我们是如何表述一个字符串的：
以 “010 开头的电话号码”, “夹在HTML 的和中间的内容”, “含有 hello 的字符串”, “负数”, “IP地址”
显而易见，对于这些描述字符串的自然语言计算机是无法理解的。
而正则表达式是一种人和计算机都能轻松处理的约定, 用来描述一类具有某个性质的字符串。确切而言： 正则表达式是一种描述性的语言, 用来概括一类字符串 (或者说一个字符串集合)。当我们定义了某一个正则表达式，其实也就确定了这个正则表达式描述的所有字符串集合。
　　下列是几个最简单的正则表达式：
abc
\\d
\d[abc]

阅读全文 »

闭包

发表于 2017-08-08

说起闭包，它是JavaScript重要的核心技术之一,在面试以及实际应用当中，我们都离不开它们。要理解闭包，首先我们要了解一下执行环境和作用域链这两个重要概念。
一、执行环境
执行环境定义了变量或函数有权访问的其他数据，决定了他们各自的行为。每个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中。执行环境主要包括全局环境和局部环境。

请看下面例子

var color="blue";
function changecolor(){
  var anothercolor="red";
  function swaprcolors(){
    var tempcolor=anothercolor;
    anothercolor=color;
    color=tempcolor;
  }
 swapcolors();
}
changecolor();
1、第一步，首先是全局上下文入栈。
2、全局上下文入栈之后，其中的可执行代码开始执行，直到遇到了changeColor()，changeColor会创建它自己的执行上下文，因此第二步就是changeColor的执行上下文入栈。
3、changeColor的上下文入栈之后，控制器开始执行其中的代码，遇到swapcolors()之后又创建了一个执行上下文。因此第三步是swapcolors的执行上下文入栈。
4、在swapcolors的可执行代码中，再没有遇到其他能生成执行上下文的情况，因此这段代码顺利执行完毕，swapcolors的上下文从栈中弹出。
5、swapcolors的执行上下文弹出之后，继续执行changeColor的代码，也没有再遇到其他执行上下文，顺利执行完毕之后弹出。这样，ECStack中就只剩下全局上下文了。
6、全局上下文在浏览器窗口关闭后出栈。

记住：
1、执行上下文是单线程的
2、执行上下文是同步执行的，只有栈顶的上下文处于执行中，其他上下文需要等待
3、全局上下文只有唯一的一个，它在浏览器关闭时出栈
4、每次某个函数被调用，就会有个新的执行上下文生成

阅读全文 »

Web安全-xss

发表于 2017-08-08

1、XSS的原理

1.1、定义

XSS 全称 Cross Site Scripting ，跨站脚本攻击。恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中的Script代码会被执行，从而达到窃取信息，植入广告等恶意攻击用户的目的。

1.2、网站交互示意图

1.3、攻击原理

XSS Fuzzing（模糊测试）是挖掘漏洞最常用的手段之一。通俗可以把这种方式理解为不断尝试的过程。

阅读全文 »