diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 063b0e4c..00000000 --- a/.gitignore +++ /dev/null @@ -1,7 +0,0 @@ -.DS_Store -Thumbs.db -db.json -*.log -node_modules/ -public/ -.deploy*/ \ No newline at end of file diff --git a/2017/09/01/English-learning/index.html b/2017/09/01/English-learning/index.html new file mode 100644 index 00000000..d372d772 --- /dev/null +++ b/2017/09/01/English-learning/index.html @@ -0,0 +1,663 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 极简英语语法 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

极简英语语法 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +
+

学习英语语法不要求全责别

+
+

常见错误

    +
  • 谓语红线 中式英语
    • +

  • 无主句 悬垂结构（不求理解）

    + +

    纵向比较学习

    • +

  • 主要：主谓宾表补

    +
    +

    it works/it matters/He loves/ 主谓

    +

    I love you(80%)主谓宾

    +

    he is handsome主系表

    +

    I consider you my love 主谓宾补

    +

    I bought her flowers 主谓宾宾

    +
    +
    • +
+
    +

  • 修饰：定状同

    +
    +

    she is a pretty girl 定

    +

    I fell in love with you at first sight 状

    +

    I love you two 同

    +

    要认同自己的文化

    +
    +
    • +
+

主语

    +

  • 动作发出者 名词性内容

    +
    +

    控制自己的情绪 报喜不报忧

    +

    it is impossible to master English in a short time.

    +
    +
    • +
+

谓语

    +

  • 0.5的动词 动作 动词

    +
    • +

  • 及物动词

    +
    +

    He loves you.Such behavior become her 适合

    +
    +
    • +

  • 不及物动词 完整动作 没有作用对象

    +
    +

    I will be waiting for you.

    +
    +
    • +

  • 系动词 不表具体动作

    +
    +

    I’m felling good

    +
    +
    • +

  • silver sucks 银牌很菜鸡（永争第一）

    +

    I suck at/He sucks.

    +
    • +
+

宾语

    +

  • 动作承受者 名词性内容（主语）

    +
    +

    宾语

    +

    He tells a story .She likes shopping.

    +

    I find it hard to tell you.

    +

    双宾语

    +

    Buy you flowers .Give the book you.(Give you the book)

    +

    介宾结构

    +

    Look at you. I am not adept at dating.不擅长约会（I sucks 不擅长）

    +
    +
    • +
+

表语

    +

  • 修饰主语 名词形容类

    +
    +

    I am a Webaholic.

    +

    My dream is to be a cook/singer.

    +

    His hobby is making fun of me.

    +

    I will be right here waiting for you.

    +

    Sichuan cuisine(川菜) tastes good.

    +
    +
    • +
+

补语

    +

  • 补充解释 名词形容词类

    +
    +

    从小事做起

    +

    assignment

    +
    +
    • +
+

同位语

    +

  • 解释 名词内容

    +
    +

    we Chinese love peace.

    +

    I, as a college student.

    +

    I cling to the idea that it’s better to expect nothing than to give everything and then disappointed.从来无所求 所得皆惊喜

    +
    +
    • +
+

定语

    +

  • 修饰名词代词

    +
    +

    前置

    +

    action movie/pop music/pretty girl/shattered glass.(玻璃 无a无es)

    +

    后置

    +

    the girl in front of you/the desire to succeed.

    +

    She is a girl with obsessive-compulsive disorder(OCD 强迫症)

    +

    He who wants to do good knocks at that gate.

    +

    He who loves finds the gate open.

    +

    He who laughs last laughs best.

    +
    +
    • +
+

状语

    +

  • 修饰动词·形容词·句子

    +
    +

    We do chicken right(正确地)

    +

    That’s beautiful Pretty good

    +

    Men eat to live, not live to eat

    +

    To avoid criticism, do noting,say nothing,be nothing

    +

    After becoming president of Purdue University in 2013,Mitch Daniels…

    +

    Taking my time,step by step.

    +
    +
    • +
+

语法长难句应用

选词填空

    +

  • 不认识一般不是答案

    +
    • +

  • 一般不用不常用的意思

    +

    ​

    +
    • +
+ +
+ + + + + + +
+
+ + +
+ + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2017/09/01/JavaScript -Function/index.html b/2017/09/01/JavaScript -Function/index.html new file mode 100644 index 00000000..78088022 --- /dev/null +++ b/2017/09/01/JavaScript -Function/index.html @@ -0,0 +1,574 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + JavaScript 中的函数 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

JavaScript 中的函数 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

函数的 5 种声明方式

    +

  1. 具名函数 function x(){}

    +
    2. +

  2. 匿名函数

    +
    1
    2
    var a
    a = function (){}
    +
    3. +
+ +
    +

  1. 结合1， 2

    +
    1
    var a = function x(){}
    +
    2. +

  2. 构造函数 window.Function('x', 'y', 'return x+y')

    +
    3. +

  3. 箭头函数（语法糖）

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    //1.基本格式
    (x,y) => {
      n = (x * y) / 2
      return n
    }
    //2.如果是直接return
    (x, y) => (x*y) / 2
    //3.只有一个参数可以不加 ()
    x => x*x
    +
    4. +
+

函数的 name 属性

个人的感觉 name 将 JS 的不一致性体现的淋漓尽致，总是出乎你的意料

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function x(){}
undefined
x.name
"x"
var f1 = function (){}
undefined
f1.name
"f1"
var f2 = function f3(){}
undefined
f2.name
"f3"
var f4 = new Function()
undefined
f4.name
"anonymous"
+

函数的本质

函数其实是一种特殊的 Object，可以反复调用该代码块

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var f = function (){}
f.prototype
/**{constructor: ƒ}
constructor:ƒ ()
arguments:null
caller:null
length:0
name:"f"
prototype:{constructor: ƒ}
__proto__:ƒ ()
apply:ƒ apply()
arguments:(...)
bind:ƒ bind()
call:ƒ call()
caller:(...)
constructor:ƒ Function()
length:0
name:""
toString:ƒ toString()
__proto__:Object**/
+

this 与 arguments

在调用函数时大家都会理所当然的使用，f() 类似这样的方式，但是我们还可以用f.call(this, arguments) 这样的方式

+
1
2
3
4
5
6
7
8
9
10
var f = function (x, y){
	return x+y
}
undefined
f(2, 3)
//5
f.call(undefined, 2, 3)
//5
f.call(undefined, 5, 3)
//8
+

this 若为 undefined 一般的话是会被看成 window

+
1
2
3
4
5
6
7
8
9
10
11
12
var f = function (x, y){
	console.log(this)
	console.log(arguments)
}
undefined
f(2, 3)
//VM1021:2 Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
//VM1021:3 Arguments(2) [2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
undefined
f.call(undefined, 2, 3)
//VM1021:2 Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
//VM1021:3 Arguments(2) [2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
+

但在严格模式下就是 undefined

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var f = function (x, y){
	'use strict'
	console.log(this === undefined)
	console.log(arguments)
}
//undefined
f.call(undefined, 2, 3)
//VM1046:3 true
//VM1046:4 Arguments(2) [2, 3, callee: (...), Symbol(Symbol.iterator): ƒ]
//undefined
var f = function (x, y){
	
	console.log(this === window)
	console.log(arguments)
}
//undefined
f.call(undefined, 2, 3)
//VM1081:3 true
//VM1081:4 Arguments(2) [2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
+

变量提升

时刻谨记变量提升四个字，题目会经常在这个地方坑人

+
1
2
3
4
5
6
var a = 2
var f = function(){
  console.log(a)
  var a = 3
}
//请问 log 出什么
+

其实只要记住变量提升那么这道题就会迎刃而解，相当于

+
1
2
3
4
5
6
var a = 2
var f = function(){
  var a
  console.log(a)
  a = 3
}
+

自然就是 undefined, 若有人想的是 2，那可能误以为是

+

其实还与作用域有关系

+
1
2
3
4
5
var a = 2 
var f = function(){
	console.log(a)
}
f()
+

闭包

闭包在我看来就好像 Java 的私有属性，为了防止外部对重要数据的直接修改导致不必要的数据变化自然而然使用的手段，其实就是对变量作用域的灵活应用。

+
1
2
3
4
5
6
7
8
9
10
11
function foo(){
  var local = 1
  function bar(){
    local++
    return local
  }
  return bar
}

var func = foo()
func()
+

参考：

+ + +
+ + + + + + +
+
+ + +
+ + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2017/09/01/JavaScript_1/index.html b/2017/09/01/JavaScript_1/index.html new file mode 100644 index 00000000..4f45cbb1 --- /dev/null +++ b/2017/09/01/JavaScript_1/index.html @@ -0,0 +1,544 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 初探 JavaScript 魅力 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

初探 JavaScript 魅力 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

1. 什么是 JavaScript

使页面能与用户进行交互

+

2. 实现一个例如在是否选择记住密码的时候鼠标移入与移出时的一个 div 的显示与隐藏。

+

需要：

+

鼠标的移入移出(onmouseover, onmouseout)

+

显示隐藏(display: block, none)

+

注意: 我个人的错误代码

1
document.getElementById('div1').style.display = block;

+

此时在浏览器运行会报错，因为浏览器会将 block 看为一个变量而不是字面量，若想将其看成字面量需要在其左右加上 ‘’ 就能解决问题。
用代码解释字面量与变量

1
2
3
4
var num = '123';//num为变量
alert(123);//报错，未定义变量
alert('123');//这里的123就是字面量，提示123
alert(num);//提示123

+

3. 初识函数与变量

变量就好似尚方宝剑代表着皇帝

1
2
3
4
//函数
function function_name(argument){
    //body…
}

+

使用函数的好处就是当发现有大量代码的重用进行观察并组合，同时有不同参数进行传参解决就好

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// oB1.onclick = function toY() {
// 	// body...
// 	oDiv.style.background = "yellow";
// }

// oB2.onclick = function toG() {
// 	// body...
// 	oDiv.style.background = "green";
// }

// oB3.onclick = function toB() {
// 	// body...
// 	oDiv.style.background = "Black";
// }
//长得像，进行观察，进行合并，便于重用，少写代码		---->		函数传参

function setColor(color){
	oDiv.style.background = color;
}

+

4. 实现页面换肤

思路: 用多个 CSS 实现换肤

+

总结: id 可以加在任何标签，甚至能改变 href。HTML 中如何写 JavaScript 就如何写。但有唯一一个例外就是 class 需要写成 className，因为 class 是 JavaScript 中的关键字

+

5. 考虑优先级问题

在用 .style 修改样式我们检查元素可知道不论是获取还是修改都是在操作行间样式。但是写代码会有时修改了 .style 又修改 .className 这时我们可能在两个中有修改了 background 那么 class 的优先级小于 style，但是很有可能我们并不会注意这一点所以建议只使用其中一种，避免 bug 的出现。
参考demo9

+

6. 获取一组元素 getElementsByTagName 实现对一组 div 进行颜色的改变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var aDiv = document.getElementsByTagName('div')
//alert(aDiv.length);
   //aDiv.style.background = 'green';错误的 不会改变颜色
//由于是数组需要遍历来修改样式

for(var i = 0; i < aDiv.length; i++){
	aDiv[i].style.background = 'green';
}

// var j = 0;

// while(j < aDiv.length){
// 	aDiv[j].style.background = 'green';
   // 	j++;
// }
+

7. 用 this 及 index(索引值) 解决问题

1
2
3
4
5
6
7
8
9
10
11
for (var i = 0; i < aBtn.length; i++) {
	aBtn[i].flag = i;//记录当前i
	aBtn[i].onclick = function (){
		for (var i = 0; i < aBtn.length; i++){
			aBtn[i].className = '';
			aDiv[i].style.display = 'none';
		}
		this.className = 'active';
		aDiv[this.flag].style.display = 'block';
	}
}
+
+ +
+ + + + + + +
+
+ + +
+ + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2017/09/01/JavaScript_2/index.html b/2017/09/01/JavaScript_2/index.html new file mode 100644 index 00000000..d6ca9b5d --- /dev/null +++ b/2017/09/01/JavaScript_2/index.html @@ -0,0 +1,549 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + JavaScript 基础 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

JavaScript 基础 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

JavaScript 组成

ECMAScript: 翻译 解释器 ——> 几乎没有兼容问题

+

BOM ——> 没有兼容问题（完全不兼容）

+

DOM ——> 几乎没有兼容问题

+ +

变量的类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var a = 12;
alert(typeof a);	//number

a = '123';
alert(typeof a);	//string

a = true;
alert(typeof a);	//blooean

a = function ();
alert(typeof a);	//function

a = document;
alert(typeof a);	//object

var b;
alert(typeof b);	//undefined
//1.真的未定义
//2.定义了，但是是空的
+

可以看出 JavaScript 很灵活
建议：一个变量应该只存放一种类型的数据

+

类型转换

实现：求和功能
需要：强制类型转换：parseInt() –> 转换整数 parseFloat() –> 转换浮点数

1
2
3
4
5
6
7
//parseInt('12abc');	//12
//parseInt('12abc12');	//12
//parseInt('abc');	//NaN
//parseInt('zxc');	//NaN
//parseInt('abc') == parseInt('zxc');	//flase	NaN 和 NaN 是否相等
//isNaN(parseInt('abc'));	//true
//parseInt(12) + parseInt('abc');	//NaN

+

隐式类型转换

1
2
3
4
5
6
7
8
9
var a = 5;
var b = '5';
alert(a == b);	//true	先转换在比较
alert(a === b);	//false	不转换就比较

var a = '12';
var b = '6';
alert(a + b);	//126	1.字符串连接	2.求和（转换在加）	先简后繁
alert(a - b);	//6	1.数字相减

+

变量的作用域及闭包

局部变量 全局变量
闭包的初步理解

1
2
3
4
5
6
7
8
9
10
//子函数用到了父函数的变量
function aaa(){//父函数
  var a = 12;
  
  function bbb(){//子函数
    alert(a);
  }
  
  bbb();
}

+

命名规范

可读性 规范性
匈牙利命名法
–> 类型前缀 a(Array) b(boolean) fn(function) re(RegExp)…
–> 首字母大写

+

运算符

取模 实现：隔行变色 秒转时间

1
2
3
var s = 180;

alert(parseInt(s/60)+'m '+parseInt(s%60)+'s');

+

流程控制

三元运算符 ?:
break 中断 continue 继续（中断当前）
真： true 非零 非空 document
假： undefined

+

Json

1
2
3
4
5
6
7
8
var json ={a: 12, b: 8, c: 7}
alert(json['a']);	//12
alert(json.a);	//12
alert(json.length);	//undefined

for (var i in json){
	alert(json[i]);//12 8 7
}
+

循环：

+

数组 –> 正常循环

+

Json –> for in

+ +
+ + + + + + +
+
+ + +
+ + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2017/09/05/JavaScript_3/index.html b/2017/09/05/JavaScript_3/index.html new file mode 100644 index 00000000..2b2d18c9 --- /dev/null +++ b/2017/09/05/JavaScript_3/index.html @@ -0,0 +1,599 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 深入 JavaScript | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

深入 JavaScript + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

函数返回值

函数返回值

+

什么是函数返回值

+

函数的执行结果

+

可以没有return

+

一个函数应该只返回一种类型的值

+ +

函数传参

    +
  • 可变参（不定参）：arguments
    • +
+

参数的个数可变，参数数组

+

例子1：求和

+
1
2
3
4
5
6
7
8
9
10
11
function sum(){
		var num = 0;

		for(var i = 0; i < arguments.length; i++){
			num += arguments[i];
		}

		return num;
	}

	alert(sum(1, 9, 8, 9));
+

求所有参数的和

+

例子2：CSS函数

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function css(obj, name, value){
	if(arguments.length == 2)
	{
		return obj.style[name];
	}else{
	obj.style[name] = value;
	}
}

window.onload = function (){
	var oDiv = document.getElementById('div1');

	alert(css(oDiv, 'width'));
	css(oDiv, 'background', 'green');
}
+

判断arguments.length

+

给参数取名，增强可读性

+
    +
  • 取非行间样式(不能用来设置)：
    • +
+

初探 JavaScript 魅力我们就知道 style 只能获取行间样式

+

obj.currentStyle[attr] //但许多不兼容 firefox

+

getComputedStyle(obj,false)[attr]

+
1
2
3
4
5
6
7
8
9
window.onload = function () {
	var oDiv = document.getElementById('div1');
	
	if(oDiv.currentStyle){//IE
		alert(oDiv.currentStyle.width);
	}else{//ff chrome
		alert(getComputedStyle(oDiv,false).width);
	}
}
+

复合样式：background，boder

+

单一样式：width

+

getComputedStyle 只能取单一样式

+

数组基础

数组的使用

+

定义

+

var arr=[12, 5, 8, 9];

+

var arr=new Array(12, 5, 8, 9);

+

没有任何差别，[]的性能略高，因为代码短

+

数组的属性

+

length

+

既可以获取，又可以设置

+

例子：快速清空数组

+
1
2
3
var arr = [1, 2, 4, 5];

arr.length = 0;
+

数组使用原则：数组中应该只存一种类型的变量

+

添加、删除元素

数组的方法

+

添加

+

push(元素)，从尾部添加

+

unshift(元素)，从头部添加

+

删除

+

pop()，从尾部弹出

+

shift()，从头部弹出

+

插入、删除

splice

+
1
2
3
4
5
6
var arr = [1, 2, 3, 4, 5, 6]

arr.splice(2, 3);	//1, 2, 6
arr.splice(2, 0);	//1, 2, 3, 4, 5, 6
arr.splice(2, 0, 'a');	//1, 2, a, 4, 5, 6
arr.splice(2, 1, 'a');	//1, 2, a, 5, 6
+

splice(开始, 长度,元素…)

+

先删除，后插入

+

删除

+

splice(开始,长度)

+

插入

+

splice(开始, 0, 元素…)

+

替换

+

排序、转换

排序

1
2
3
4
5
6
7
8
9
10
// var arr = ['as', 'wer', 'oui']

// alert(arr.sort());	//as,oui,wer
var arr = [1, 11, 98, 65, 5, 6];

//alert(arr.sort());	//1,11,5,6,65,98 比较的字符串

alert(arr.sort(function (n1, n2) {
	return n1 -n2;
}));

+

sort([比较函数])，排序一个数组

+

排序一个字符串数组

+

排序一个数字数组

+

转换类

+

concat(数组2)

+
1
2
3
4
var a =[1, 2, 3];
var b =[1, 2, 3];

alert(a.concat(b));	//1, 2, 3, 1, 2, 3
+

连接两个数组

+

join(分隔符)

+
1
2
3
var a =[1, 2, 3];

alert(a.join('-'));	//1-2-3
+

用分隔符，组合数组元素，生成字符串

+

字符串split

+ +
+ + + + + + +
+
+ + +
+ + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2017/09/05/JavaScript_4/index.html b/2017/09/05/JavaScript_4/index.html new file mode 100644 index 00000000..80056026 --- /dev/null +++ b/2017/09/05/JavaScript_4/index.html @@ -0,0 +1,569 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 定时器的使用 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

定时器的使用 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

开启定时器

setInterval 间隔型
setTimeout 延时型
两种定时器的区别

+ +

停止定时器

clearInterval
clearTimeout

+

数码时钟

获取系统时间

+

Date对象

+

getHours、getMinutes、getSeconds

+

年 getFullYear() 月 getMonth() 日 getDate() 星期 getDay()

+

显示系统时间

+

字符串连接

+

空位补零

+

设置图片路径

+

charAt 方法（兼容问题）

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function toD(time){//空位补零
			if(time < 10)
			{
				time = '0'+time;
			}else{
				time = ''+ time;
			}

			return time;//忘记return
		}

		window.onload = function (){
			var aImg = document.getElementsByTagName('img');			
			function timer(){
				var oD = new Date;
				var str = toD(oD.getHours()) + toD(oD.getMinutes()) + toD(oD.getSeconds());

				for(var i = 0; i < aImg.length; i++){
					//aImg[i].src = "img/"+str[i]+".png";	低版本 IE7 不支持
					aImg[i].src = "img/"+str.charAt(i)+".png";
				}
			}

			timer();
			setInterval(timer, 1000);

		}
+

延时提示框

移入显示，移出隐藏

+

移出延时隐藏

+

简化代码

+

合并两个相同的 mouseover 和 mouseout

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
window,onload = function (){
			var oDiv1 = document.getElementById('div1');
			var oDiv2 = document.getElementById('div2');
			var timer = null;

			oDiv1.onmouseover = oDiv2.onmouseover = function () {
				clearTimeout(timer);
				oDiv2.style.display = 'block';
			}
			oDiv1.onmouseout = oDiv2.onmouseout = function () {
				timer = setTimeout(function(){
					oDiv2.style.display = 'none';
				},500);
			}
		}
+

无缝滚动

效果演示

+

物体运动基础

+

让 Div 移动起来

+

offsetLeft / offsetRight / offsetWidth 的作用

+

用定时器让物体连续移动

+

让 ul 一直向左移动

+

复制 li

+

innerHTML 和+=

+

修改 ul 的 width

+

滚动过界后，重设位置

+

判断过界

+

改变滚动方向

+

修改 speed

+

修改判断条件

+

鼠标移入暂停

+

移入关闭定时器

+

移出重新开启定时器

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
window.onload = function (){
	var oDiv = document.getElementById('div1');
	var oUl = oDiv.getElementsByTagName('ul')[0];
	var oBtn1 = document.getElementById('btn1');
	var oBtn2 = document.getElementById('btn2');
	var aLi = oUl.getElementsByTagName('li');
	var speed = 2;

	oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
	oUl.style.width = aLi.length * aLi[0].offsetWidth +'px';

	function move(){
		if(oUl.offsetLeft <  -oUl.offsetWidth/2){
			oUl.style.left = 0 +'px';
		}
		if(oUl.offsetLeft >  0){
			oUl.style.left = -oUl.offsetWidth/2+'px';
		}
		oUl.style.left = oUl.offsetLeft + speed +'px';
	}

	var timer = setInterval(move,30);

	oDiv.onmouseover = function(){clearInterval(timer);};
	oDiv.onmouseout = function(){timer = setInterval(move,30);};

	oBtn1.onclick = function (){
		speed = 2;
	};

	oBtn2.onclick = function (){
		speed = -2;
	};
+ +
+ + + + + + +
+
+ + +
+ + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2017/09/05/JavaScript_5/index.html b/2017/09/05/JavaScript_5/index.html new file mode 100644 index 00000000..fbdcd987 --- /dev/null +++ b/2017/09/05/JavaScript_5/index.html @@ -0,0 +1,602 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + DOM 操作 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

DOM 操作 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

DOM节点

childNodes nodeType 节点类型 –>3文本节点 –>1元素节点

+

获取子节点

+

children 子节点

+

parentNode 父节点

+ +

例子：点击链接，隐藏整个li

+

offsetParent 获取元素在页面上相对谁定位

+

首尾子节点

+

有兼容性问题 –> nodeType

+

firstChild、firstElementChild

+

lastChild 、lastElementChild

+

兄弟节点

+

有兼容性问题

+

nextSibling、nextElementSibling

+

previousSibling、previousElementSibling

+

操纵元素属性

元素属性操作

+

第一种：oDiv.style.display=“block”;

+

第二种：oDiv.style[“display”]=“block”;

+

第三种：Dom方式

+

DOM方式操作元素属性

+

获取：getAttribute(名称)

+

设置：setAttribute(名称, 值)

+

删除：removeAttribute(名称)

+

DOM元素灵活查找

用className选择元素

+

如何用className选择元素

+

选出所有元素

+

通过className条件筛选

+

封装成函数

+

创建、插入和删除元素

创建DOM元素

+

createElement(标签名) 创建一个节点 document.createElement(‘li’);

+

appendChild(节点) 追加一个节点 父级.apppendChild(子节点)

+

例子：为ul插入li

+

插入元素

+

insertBefore(节点, 原有节点) 在已有元素前插入 oUl.insertBefore(oLi, aLi[0]);

+

例子：倒序插入li

+

删除DOM元素

+

removeChild(节点) 删除一个节点 oUl.removeChild(this.parentNode);

+

例子：删除li

+

文档碎片

文档碎片可以提高DOM操作性能(理论上)

+

文档碎片原理

+

document.createDocumentFragment() //但是现在几乎不用这个 低级浏览器 几乎无用

+

表格应用

tBodies、tHead、tFoot、rows、cells

+
1
2
// alert(aTb.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[0].getElementsByTagName('td')[1].innerHTML);
alert(aTb.tBodies[0].rows[0].cells[1].innerHTML);
+

隔行变色

+

鼠标移入高亮

+

添加、删除一行

+

DOM方法的使用

搜索 —-> 主要是后端

+

版本1：基础版本——字符串比较

+

版本2：忽略大小写——大小写转换

+

版本3：模糊搜索——search的使用

+

版本4：多关键词——split

+

高亮显示、筛选 background / display

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
window.onload =function(){
	var oTb = document.getElementById('table1');
	var oT1 = document.getElementById('text1');
	var oBtn1 = document.getElementById('btn1');

	oBtn1.onclick = function (){
		for(var i = 0; i < oTb.tBodies[0].rows.length; i++){
			var search = oT1.value.toLowerCase();
			var oldText = oTb.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
			var arr = search.split(' ');
			oTb.tBodies[0].rows[i].style.background = '';

			for(var j = 0; j < arr.length; j++){
				if( oldText.search(arr[j]) != -1){
					oTb.tBodies[0].rows[i].style.background = 'green';
				}
			}	
		}
	}
}
+

排序

+

移动Li appendChild(); //1.从原有父级删掉2.添加到新的父级

+

元素排序：转换——排序——插入

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
window.onload =function(){
	var oTb = document.getElementById('table1');
	var oBtn1 = document.getElementById('btn1');

	oBtn1.onclick = function (){
		var arr = [];

		for(var i = 0; i < oTb.tBodies[0].rows.length; i++){
			arr[i] = oTb.tBodies[0].rows[i];
		}

		arr.sort(function (num1, num2){
			var n1 = parseInt(num1.cells[0].innerHTML);
			var n2 = parseInt(num2.cells[0].innerHTML);

			return (n1 - n2);
		});

		for (var i in arr){
			oTb.tBodies[0].appendChild(arr[i]);
		}
	}
	
}
+

表单应用

表单基础知识

+

什么是表单

+

向服务器提交数据，比如：用户注册

+

action 提交到哪里

+

表单事件

+

onsubmit 提交时发生

+

onreset 重置时发生

+

表单内容验证

+

阻止用户输入非法字符 阻止事件

+

输入时、失去焦点时验证 onkeyup、onblur

+

提交时检查 onsubmit

+

后台数据检查

+ +
+ + + + + + +
+
+ + +
+ + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2017/09/05/JavaScript_6/index.html b/2017/09/05/JavaScript_6/index.html new file mode 100644 index 00000000..09df21bd --- /dev/null +++ b/2017/09/05/JavaScript_6/index.html @@ -0,0 +1,612 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + JavaScript 运动 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

JavaScript 运动 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

运动基础

让 Div 运动起来

+

速度——物体运动的快慢

+

运动中的 Bug

+

不会停止 –>临界值问题

+

速度取某些值会无法停止

+

到达位置后再点击还会运动 –> clearInterval()

+

重复点击速度加快

+ +
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
window.onload = function () {
	var oBtn = document.getElementById('btn1');
	var oDiv = document.getElementById('div1');
	var timer = null;

	oBtn.onclick = function (){
		clearInterval(timer);	//保证就1个定时器
		timer = setInterval(function () {
			var speed = 1;
			if(oDiv.offsetLeft > 300){
				clearInterval(timer);
			}
			else{
				oDiv.style.left = oDiv.offsetLeft + speed + 'px';
			}
			
		}, 30);

		
	}
+

运动框架

+

在开始运动时，关闭已有定时器

+

把运动和停止隔开(if / else)

+

运动框架实例

+

例子1：“分享到”侧边栏 –> demo2.html

+

通过目标点，计算速度值

+

例子2：淡入淡出的图片

+

用变量存储透明度 –> demo3.html

+

主要是设置 opcity 并为其赋值

+

缓冲运动

逐渐变慢，最后停止

+

距离越远速度越大

+

速度由距离决定

+

速度 = (目标值-当前值) / 缩放系数

+

例子：缓冲菜单 –> demo4

+

Bug：速度取整 speed > 0 ? Math.ceil(speed) ：Math.floor(speed)

+

跟随页面滚动的缓冲侧边栏

+

潜在问题：目标值不是整数时 parseInt();

+

运动终止条件

匀速运动：距离足够近

+

缓冲运动：两点重合

+

多个物体同时运动

例子：多个 Div，鼠标移入变宽 –> demo5

+

单定时器，存在问题

+

每个 Div 一个定时器

+

多物体运动框架

+

定时器作为物体的属性

+

参数的传递：物体、目标值

+

例子：多个 Div 淡入淡出 –> demo6

+

所有东西都不能公用

+

属性与运动对象绑定：速度、其他属性值（如透明度等）

+

任意值运动框架

offset 属性的 Bug

+

有边框的 Div 变宽

+

用currentStyle / computedStyle(obj, flase)[name] 代替 offset

+

原有运动框架的问题

+

只能让某个值运动起来

+

如果想让其他值运动起来，要修改程序

+

扩展的运动框架 –> demo7

+

运动属性作为参数

+

封装 opacity

+

小数的问题 –> Math.round() 主要是为了适配 IE7

+

图片展示

效果思路

+

两边的按钮——淡入淡出

+

大图下拉——层级、高度变化

+

下方的 li——多物体淡入淡出

+

下方的 Ul——位置计算

+

左右按钮

+

淡入淡出

+

第一个小问题： 鼠标移到按钮上，按钮会消失

+

层级问题

+

按钮和遮罩上都得加上事件

+

下方 Li 效果

+

点击切换大图——选项卡

+

Li 淡入淡出——移入移出

+

Ul 移动——位置计算

+

大图片切换

+

图片层级—— zIndex 一直加1

+

图片下拉效果(运动框架)

+

可以改为淡入淡出

+

加入自动播放

+

和选项卡一样

+

另一个问题：ul 开始的宽度并不够， 需要计算后赋值

+

自己看着敲了一边在默敲一遍，自己的问题还是比较多，细节与思路还是不够。 –> demo9

+

最后运动框架

多个值同时变化

+

setStyle同时设置多个属性

+

参数传递

+

Json的使用

+

for in 遍历属性

+

运用到运动框架

+

检测运动停止

+

标志变量

+

例子：伸缩同时淡入淡出的菜单

+

还有就是链式运动， 依次完成运动，可以参考后面几个 demo

+ +
+ + + + + + +
+
+ + +
+ + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2017/09/10/hello-world/index.html b/2017/09/10/hello-world/index.html index c2181851..1c0d4c57 100644 --- a/2017/09/10/hello-world/index.html +++ b/2017/09/10/hello-world/index.html @@ -1,880 +1,541 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Git简单操作 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

Git简单操作 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -
-

学习于廖雪峰的官方网站

-
-

创建

1
2
3
4
5
git init命令把这个目录变成Git可以管理的仓库
git add <file>告诉Git，把文件添加到仓库
git commit -m <file>告诉Git，把文件提交到仓库
- -

回溯

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
git status 命令可以让我们时刻掌握仓库当前的状态,修改后是否commit等
git diff 可以查看修改的不同地方
git log显示从最近到最远的提交日志
git reset --hard HEAD^上一版本…^^上两版本
cat <file>查看内容
HEAD指向的就是当前版本
git checkout -- file可以丢弃工作区的修改
git reset HEAD file可以把暂存区的修改撤销掉（unstage）
rm <file>命令删除
-

远程操作

1
2
3
4
5
git push origin master  push到服务器
git clone git@github.com:michaelliao/gitskills.git 克隆还可以用
https://github.com/michaelliao/gitskills.git这样的地址
-

分支操作

1
2
3
4
5
6
7
8
9
10
11
12
13
git checkout -b dev	创建一个dev分支
git branch	查看当前分支 会列出所有分支，当前分支前面会标一个*号
git merge dev	把dev分支的工作成果合并到master分支上
切换分支：git checkout <name>
创建+切换分支：git checkout -b <name>
合并某分支到当前分支：git merge <name>
删除分支：git branch -d <name>
- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Git简单操作 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

Git简单操作 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +
+

学习于廖雪峰的官方网站

+
+

创建

1
2
3
4
5
git init命令把这个目录变成Git可以管理的仓库

git add <file>告诉Git，把文件添加到仓库

git commit -m <file>告诉Git，把文件提交到仓库
+ +

回溯

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
git status 命令可以让我们时刻掌握仓库当前的状态,修改后是否commit等

git diff 可以查看修改的不同地方

git log显示从最近到最远的提交日志

git reset --hard HEAD^上一版本…^^上两版本

cat <file>查看内容

HEAD指向的就是当前版本

git checkout -- file可以丢弃工作区的修改

git reset HEAD file可以把暂存区的修改撤销掉（unstage）

rm <file>命令删除
+

远程操作

1
2
3
4
5
git push origin master  push到服务器

git clone git@github.com:michaelliao/gitskills.git 克隆还可以用

https://github.com/michaelliao/gitskills.git这样的地址
+

分支操作

1
2
3
4
5
6
7
8
9
10
11
12
13
git checkout -b dev	创建一个dev分支

git branch	查看当前分支 会列出所有分支，当前分支前面会标一个*号

git merge dev	把dev分支的工作成果合并到master分支上

切换分支：git checkout <name>

创建+切换分支：git checkout -b <name>

合并某分支到当前分支：git merge <name>

删除分支：git branch -d <name>
+ +
+ + + + + + +
+
+ + +
+ + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2017/09/15/my-o/index.html b/2017/09/15/my-o/index.html new file mode 100644 index 00000000..f94966bb --- /dev/null +++ b/2017/09/15/my-o/index.html @@ -0,0 +1,527 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 无题 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

无题 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

我已经将近21岁了，花着父母的钱，却在大学消耗着青春，不是说后不后悔，只是愧疚。今天看了几个大佬的博客，有这么一段

+ +

以前我学了很多知识和很多软件的用法但是无处使用，还有很多相对枯燥的知识我想学但是没有动力去学的，如今这两个问题由于我重回校园，终于一揽子解决了。我的目标绝不是简单通过每门课程的考试拿到学分就好，而是要真正的学会每一门课所讲授的全部知识（甚至包括那些课程参考书里有写但是不讲的部分），然后有所发挥，用真正的研究成果来通过每门课。只有这样才能无愧我的学业、我的人生。

+

刚进大学时对自己的放纵，现在大三了才慢慢开始担心自己的未来，如何才能无愧于自己的人生。我在慢慢开始认识自己，我把自己想的太美好，我对别人要求的太多，眼高手低。我认为课堂没有用，可是乔布斯都说总有一天你会将它们串起来，要相信知识的力量。在这个充满数据的年代，学会取舍，更要学会思考，很多年没有把自己所想的写下来了，我逃避着自己。心中有千言万语但是太久没有表达早已词穷，没事就再写吧。

+

不要急，3天刷270道freecodecamp其实一些并不理解

+

看了好几个Git教程都是走马观花，没有用心去学

+

六级单词也没有好好去背，心浮气躁

+

课也是听不进去

+

给自己一个规划

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2017/09/22/English-learning/index.html b/2017/09/22/English-learning/index.html deleted file mode 100644 index a83c0480..00000000 --- a/2017/09/22/English-learning/index.html +++ /dev/null @@ -1,990 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 极简英语语法 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

极简英语语法 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -
-

学习英语语法不要求全责别

-
-

常见错误

    -
  • 谓语红线 中式英语
    • -

  • 无主句 悬垂结构（不求理解）

    - -

    纵向比较学习

    • -

  • 主要：主谓宾表补

    -
    -

    it works/it matters/He loves/ 主谓

    -

    I love you(80%)主谓宾

    -

    he is handsome主系表

    -

    I consider you my love 主谓宾补

    -

    I bought her flowers 主谓宾宾

    -
    -
    • -
-
    -

  • 修饰：定状同

    -
    -

    she is a pretty girl 定

    -

    I fell in love with you at first sight 状

    -

    I love you two 同

    -

    要认同自己的文化

    -
    -
    • -
-

主语

    -

  • 动作发出者 名词性内容

    -
    -

    控制自己的情绪 报喜不报忧

    -

    it is impossible to master English in a short time.

    -
    -
    • -
-

谓语

    -

  • 0.5的动词 动作 动词

    -
    • -

  • 及物动词

    -
    -

    He loves you.Such behavior become her 适合

    -
    -
    • -

  • 不及物动词 完整动作 没有作用对象

    -
    -

    I will be waiting for you.

    -
    -
    • -

  • 系动词 不表具体动作

    -
    -

    I’m felling good

    -
    -
    • -

  • silver sucks 银牌很菜鸡（永争第一）

    -

    I suck at/He sucks.

    -
    • -
-

宾语

    -

  • 动作承受者 名词性内容（主语）

    -
    -

    宾语

    -

    He tells a story .She likes shopping.

    -

    I find it hard to tell you.

    -

    双宾语

    -

    Buy you flowers .Give the book you.(Give you the book)

    -

    介宾结构

    -

    Look at you. I am not adept at dating.不擅长约会（I sucks 不擅长）

    -
    -
    • -
-

表语

    -

  • 修饰主语 名词形容类

    -
    -

    I am a Webaholic.

    -

    My dream is to be a cook/singer.

    -

    His hobby is making fun of me.

    -

    I will be right here waiting for you.

    -

    Sichuan cuisine(川菜) tastes good.

    -
    -
    • -
-

补语

    -

  • 补充解释 名词形容词类

    -
    -

    从小事做起

    -

    assignment

    -
    -
    • -
-

同位语

    -

  • 解释 名词内容

    -
    -

    we Chinese love peace.

    -

    I, as a college student.

    -

    I cling to the idea that it’s better to expect nothing than to give everything and then disappointed.从来无所求 所得皆惊喜

    -
    -
    • -
-

定语

    -

  • 修饰名词代词

    -
    -

    前置

    -

    action movie/pop music/pretty girl/shattered glass.(玻璃 无a无es)

    -

    后置

    -

    the girl in front of you/the desire to succeed.

    -

    She is a girl with obsessive-compulsive disorder(OCD 强迫症)

    -

    He who wants to do good knocks at that gate.

    -

    He who loves finds the gate open.

    -

    He who laughs last laughs best.

    -
    -
    • -
-

状语

    -

  • 修饰动词·形容词·句子

    -
    -

    We do chicken right(正确地)

    -

    That’s beautiful Pretty good

    -

    Men eat to live, not live to eat

    -

    To avoid criticism, do noting,say nothing,be nothing

    -

    After becoming president of Purdue University in 2013,Mitch Daniels…

    -

    Taking my time,step by step.

    -
    -
    • -
-

语法长难句应用

选词填空

    -

  • 不认识一般不是答案

    -
    • -

  • 一般不用不常用的意思

    -

    ​

    -
    • -
- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/2017/09/23/201170923/index.html b/2017/09/23/201170923/index.html index 658a6082..831c3893 100644 --- a/2017/09/23/201170923/index.html +++ b/2017/09/23/201170923/index.html @@ -1,853 +1,534 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 九月 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

九月 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

-
-

天色已晚，人们都赶在回家的路上，我的一天才刚开始。 营业时间从深夜12点到次日7点，人们称这里为“深夜食堂”。 菜单只有这些，可以随意点其他菜，能做就尽量做，是我的营业方针。你问有没有客人，其实还不少呢。

-
- -

熬夜看了深夜食堂2的电影，感慨良多。
我没有见过真正的生离死别，所以我不知道去珍惜那愿意陪伴在自己身边的人吧，我把最坏的自已留给了她

-
-

重要的是两个人能不能下定决心携手解决问题

-

睡前把脸贴过来小声跟我说谢谢你陪在我身边

-

人就的活得像这风铃声一样清脆

-
-

做人就应该像风钤一般啊，现在是凌晨一点二十二了，九月的第一次这么晚，外面下着雨，肚子咕咕叫，突然想这样的日子真的不多了。也许再也找不
到愿意陪伴我的人了，我已经忘记了爱。

-
-

最近两天昨天与前天都在用hexo+github 搭这个博客，明天做下总结，继续学习。嗯我先睡个懒觉，图书馆坐我背后的小姐姐请不要想我为什么没来

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 九月 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

九月 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

+
+

天色已晚，人们都赶在回家的路上，我的一天才刚开始。 营业时间从深夜12点到次日7点，人们称这里为“深夜食堂”。 菜单只有这些，可以随意点其他菜，能做就尽量做，是我的营业方针。你问有没有客人，其实还不少呢。

+
+ +

熬夜看了深夜食堂2的电影，感慨良多。
我没有见过真正的生离死别，所以我不知道去珍惜那愿意陪伴在自己身边的人吧，我把最坏的自已留给了她

+
+

重要的是两个人能不能下定决心携手解决问题

+

睡前把脸贴过来小声跟我说谢谢你陪在我身边

+

人就的活得像这风铃声一样清脆

+
+

做人就应该像风钤一般啊，现在是凌晨一点二十二了，九月的第一次这么晚，外面下着雨，肚子咕咕叫，突然想这样的日子真的不多了。也许再也找不
到愿意陪伴我的人了，我已经忘记了爱。

+
+

最近两天昨天与前天都在用hexo+github 搭这个博客，明天做下总结，继续学习。嗯我先睡个懒觉，图书馆坐我背后的小姐姐请不要想我为什么没来

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2017/09/23/create-hexo/index.html b/2017/09/23/create-hexo/index.html index e84e7323..c420586c 100644 --- a/2017/09/23/create-hexo/index.html +++ b/2017/09/23/create-hexo/index.html @@ -1,896 +1,542 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 利用Hexo + Github 搭建个人博客 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

利用Hexo + Github 搭建个人博客 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

#

-

利用的资源

-

hexo官方文档

-

spfk教程

-

用以上教程就差不多了

-

提醒一点 在部署后没有报错的前提下，第一次部署的时间有点长，我当时直接刷新发现没反应一直以为有错，很尴尬。

-
- -

推荐的主题

-

Next

-

spfk

-

yilia

-

自己可以慢慢尝试，找自己喜欢的

-
-

后话

-

网上很多教程很多，动动手查一查很快的，我就不写教程了

-

搭建了就要用用，hexo比wp好看很多，花的时间很值

-
- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 利用Hexo + Github 搭建个人博客 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

利用Hexo + Github 搭建个人博客 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

#

+

利用的资源

+

hexo官方文档

+

spfk教程

+

用以上教程就差不多了

+

提醒一点 在部署后没有报错的前提下，第一次部署的时间有点长，我当时直接刷新发现没反应一直以为有错，很尴尬。

+
+ +

推荐的主题

+

Next

+

spfk

+

yilia

+

自己可以慢慢尝试，找自己喜欢的

+
+

后话

+

网上很多教程很多，动动手查一查很快的，我就不写教程了

+

搭建了就要用用，hexo比wp好看很多，花的时间很值

+
+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2017/09/23/my-o/index.html b/2017/09/23/my-o/index.html deleted file mode 100644 index 0872843f..00000000 --- a/2017/09/23/my-o/index.html +++ /dev/null @@ -1,842 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 无题 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

无题 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

我已经将近21岁了，花着父母的钱，却在大学消耗着青春，不是说后不后悔，只是愧疚。今天看了几个大佬的博客，有这么一段

- -

以前我学了很多知识和很多软件的用法但是无处使用，还有很多相对枯燥的知识我想学但是没有动力去学的，如今这两个问题由于我重回校园，终于一揽子解决了。我的目标绝不是简单通过每门课程的考试拿到学分就好，而是要真正的学会每一门课所讲授的全部知识（甚至包括那些课程参考书里有写但是不讲的部分），然后有所发挥，用真正的研究成果来通过每门课。只有这样才能无愧我的学业、我的人生。

-

刚进大学时对自己的放纵，现在大三了才慢慢开始担心自己的未来，如何才能无愧于自己的人生。我在慢慢开始认识自己，我把自己想的太美好，我对别人要求的太多，眼高手低。我认为课堂没有用，可是乔布斯都说总有一天你会将它们串起来，要相信知识的力量。在这个充满数据的年代，学会取舍，更要学会思考，很多年没有把自己所想的写下来了，我逃避着自己。心中有千言万语但是太久没有表达早已词穷，没事就再写吧。

-

不要急，3天刷270道freecodecamp其实一些并不理解

-

看了好几个Git教程都是走马观花，没有用心去学

-

六级单词也没有好好去背，心浮气躁

-

课也是听不进去

-

给自己一个规划

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/2017/09/26/kaocong/index.html b/2017/10/05/kaocong/index.html similarity index 68% rename from 2017/09/26/kaocong/index.html rename to 2017/10/05/kaocong/index.html index 10e00a6a..06d784cf 100644 --- a/2017/09/26/kaocong/index.html +++ b/2017/10/05/kaocong/index.html @@ -1,1101 +1,774 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 考虫长难句 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

考虫长难句 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -
-

每日长难句

-
-

九月

-

9月2

-

【今日长难句】
If left to themselves, such trends will diminish the relative strength of the English language in international education markets as the demand for educational resources in languages, such as Spanish, Arabic or Mandarin grows and international business process outsourcing in other language such as Japanese, French and German, spreads.
【结构解析】

-
    -
  1. If left to themselves 为省略形式，即If these trends are left to themselves, 译为：如果放任不管这些趋势。
    2. -
  2. 句子主干为主谓宾结构，即：such trends/ will diminish /the relative strength of the English language in international education markets; 译为：这些趋势将会削弱英语在国际教育市场上的相对优势。
    3. -
  3. as 引导原因状语从句，译为：因为。该从句主干and连接的两个主谓结构，即the demand /grows /and/ international business process outsourcing spreads，译为：某种需求增长并且国际业务流程外包蔓延。
    4. -
  4. the demand的修饰成分为“for educational resources in languages, such as Spanish, Arabic or Mandarin grows”；international business process outsourcing的修饰成分为“in other language such as Japanese, French and German”。
    【词的处理】
    diminish / diˈminiʃ / vt. 减少
    relative / ˈrelətiv / adj. 相对的
    strength / streŋθ / n. 实力；优势
    outsource / ˈautsɔ:s / vt. 外包
    spread / spred / vi. 传播，蔓延
    【参考译文】
    If left to themselves, such trends will diminish the relative strength of the English language in international education markets as the demand for educational resources in languages, such as Spanish, Arabic or Mandarin grows and international business process outsourcing in other language such as Japanese, French and German, spreads.
    如果对其放任自流，这些趋势将削弱英语在国际教育市场的相对优势，因为对西班牙语、阿拉伯语、汉语普通话等语言的教育资源的需求在增长，同时对日语、法语、德语等其他语言的国际业务流程外包在蔓延。
    5. -
-
-

9月4

-

【今日长难句】
The English language teaching sector directly earns nearly &1.3 billion for the UK in invisible exports and our other education related explores earn up to &10 billion a year more.
【结构解析】

-
    -
  1. 首先，本句为and 连接的并列句。
    2. -
  2. 前句主干为“主谓宾宾补”，依次为The English language teaching sector/ directly earns/nearly &1.3 billion /for the UK ; in invisible exports为状语
    3. -
  3. 后半句主干为主谓宾结构，即：our other education related explores /earn/ up to &10 billion a year more. 其中up to修饰& 10 billion， 表多达100亿英镑。
    【词的处理】
    sector / ˈsektə(r) / n. 领域，行业
    invisiable / inˈvizəbl / adj. 看不见的
    export / ˈekspɔ:t/ n. 出口
    up to 多达
    【参考译文】
    The English language teaching sector directly earns nearly &1.3 billion for the UK in invisible exports and our other education related explores earn up to &10 billion a year more.
    在无形的出口中，英语培训行业为英国直接赚取了将近13亿英镑，而其他与教育相关的出口一年则可以赚多达100亿英镑。
    4. -
-
-

9月8

-

【今日长难句】
The irony of the historian’s craft is that its practitioners always know that their efforts are but contributions to an unending process.
【结构解析】

-
    -

  1. 本句主干为主系表语从句结构，即：The irony of the historian’s craft/ is /that its practitioners always know…

    -
    2. -

  2. that their efforts are but contributions to an unending process 为know 的宾语从句。

    -

    【词的处理】
    irony / ˈairəni / n. 讽刺
    historian / hiˈstɔ:riən / n. 历史学家
    craft / krɑ:ft/ n. 技能；行业
    practitioner / prækˈtiʃənə(r) / n. 专门人才
    contribution / ˌkɔntriˈbju:ʃn/ 贡献
    【参考译文】
    The irony of the historian’s craft is that its practitioners always know that their efforts are but contributions to an unending process.
    历史研究这个行当的讽刺意味在于，从事研究的人一直知道，他们的努力只不过是为永无止境的过程添砖加瓦而已。

    -
    3. -
-
-

9月9

-

【今日长难句】

-

While history once revered its affinity to literature and philosophy, the emerging social sciences seemed to afford greater opportunities for asking new questions and providing rewarding approaches to an understanding of the past.
【结构解析】

-
    -
  1. while 用在句首可以引导让步状语从句，表“尽管”；从句主干为主谓宾结构，即：history/ once revered /its affinity to literature and philosophy，译为：历史学一度崇尚它与文学和哲学的相似之处
    2. -
  2. 句子主干为主系表结构，seem 为系动词，to afford …为表语，即：the emerging social sciences/ seemed/ to afford greater opportunities for asking … and providing …；译为：新兴的社会科学似乎提供了更多机会；由于opportunities 的修饰成分较长，建议单独处理。
    【词的处理】
    revere / riˈviə(r) / vt. 尊敬，崇敬
    affinity / əˈfinəti / n. 喜欢；类同
    emerging / iˈmə:dʒiŋ / adj. 新兴的，正在形成的
    rewarding / riˈwɔ:diŋ/ adj. 有益的；回报较高的
    approach / əˈprəutʃ/ n. 方式，方法
    【参考译文】
    While history once revered its affinity to literature and philosophy, the emerging social sciences seemed to afford greater opportunities for asking new questions and providing rewarding approaches to an understanding of the past.
    尽管历史学一度崇尚它与文学和哲学的相似之处，但新兴的社会科学似乎提供了更多机会，以便人们能够提出新问题，有了解过去的有效途径。
    3. -
-
-

9月10

-

【今日长难句】

-

Social science methodologies had to be adapted to a discipline governed by the primacy of historical sources rather than the imperatives of the contemporary world.
【结构解析】
1.本句主干为被动句，即：Social science methodologies /had to be adapted /to a discipline; 译为：社会科学研究的方法论必须进行改变以适应这样一个学科。

-
    -
  1. governed by the primacy of historical sources 为a discipline 的后置定语；rather than 表“而不是”。
    【词的处理】
    methodology / ˌmeθəˈdɔlədʒi/ n. 方法，原则
    adapt … to… 调整……以适应……
    discipline / ˈdisəplin / n. 纪律；学科
    govern 支配，统治
    primacy / ˈpraiməsi / n. 首要
    source / sɔ:/ 来源；原始资料
    imperative / imˈperətiv / adj. 必要的 n. 必要的事
    【参考译文】
    Social science methodologies had to be adapted to a discipline governed by the primacy of historical sources rather than the imperatives of the contemporary world.
    社会科学研究的方法论必须进行改变以适应这样一个学科，主导该学科的首先是历史资料，而不是当代社会的需要。
    2. -
-
-

9月11

-

【今日长难句】

-

But even more important, it was the farthest that scientists had been able to look into the past, for what they were seeing were the patterns and structures that existed 15 billion years ago.
【结构解析】

-
    -
  1. but even more important 为句子的状语成分
    2. -
  2. 句子主干为主系表结构，即：it /was /the farthest；其中it 指代上文中的a strip of enormous cosmic clouds
    3. -
  3. that 引导定语从句修饰 the farthest
    4. -
  4. for +从句，表原因。从句主干为主系表结构：what they were seeing/ were / the patterns and structures; that existed 15 billion years ago. 为定语从句修饰the patterns and structures.
    【词的处理】
    look into 调查，观察
    pattern / ˈpætn / n. 模式
    【参考译文】
    But even more important, it was the farthest that scientists had been able to look into the past, for what they were seeing were the patterns and structures that existed 15 billion years ago.
    更为重要的是，这是科学家们能够观测到的最遥远的过去的景象，因为他们看到的是150亿年前宇宙云的形状和结构。
    5. -
-
-

9月13

-

【今日长难句】

-

Cobe is designed to see just the biggest structures, but astronomers would like to see much smaller hot spots as well, the seeds of local objects like clusters and superclusters of galaxies. They shouldn’t have long to wait.
【结构解析】

-
    -
  1. 本句主干为but连接的并列句。
    2. -
  2. but之前为被动句，即：Cobe/ is designed; to see just the biggest structures为目的状语；
    3. -
  3. 后半句主干为主谓宾结构，即：astronomers /would like to see /much smaller hot spots as well; all seeds of local objects like clusters and superclusters of galaxies为hot spots 的同位语，解释其具体内容。
    【词的处理】
    astronomer / əˈstrɔnəmə(r) / n. 天文学家
    local / ˈləukl / adj. 地方的；局部的
    object / ˈɔbdʒikt / n. 物体；目标
    cluster / ˈklʌstə(r) / n. 簇；团
    galaxy / ˈɡæləksi / n. 星系
    【参考译文】
    Cobe is designed to see just the biggest structures, but astronomers would like to see much smaller hot spots as well, the seeds of local objects like clusters and superclusters of galaxies. They shouldn’t have long to wait.
    设计Cobe卫星就是要观察这些最大的物体结构，但宇航员还想看到更小的热点，即，像星系中的星团和超星团这样一些局部物体的粒子。看来他们不必等待很长时间。
    4. -
-
-

9月16

-

【今日长难句】

-

Astrophysicists working with ground-based detectors at the South Pole and balloon-borne instruments are closing in on such structures, and may report their findings soon.

-

【结构解析】

-
    -

  1. 句子主干为and连接的两个“主谓宾”结构，即：Astrophysicistsare/ are closing in on /such structures, and/ may report /their findings；

    -
    2. -

  2. working with ground-based detectors at the South Pole and balloon-borne instruments 为主语“Astrophysicists”的后置定语。

    -
    3. -
-

【词的处理】

-

astrophysicist /,æstrəu’fi:zisist/ n. 天体物理学家

-

ground-based adj. 基于陆地的

-

detector / diˈtektə(r) / n. 探测器

-

balloon-borne 球载的

-

close in on sb./sth. 逼近，靠近

-

【参考译文】

-

Astrophysicists working with ground-based detectors at the South Pole and balloon-borne instruments are closing in on such structures, and may report their findings soon.

-

天体物理学家使用南极陆基探测器和球载仪器，正在越来越近地观测这些结构，也许不久会报告他们的观测结果。

-
-

9月16

-

【今日长难句】

-

Inflation says that very early on, the universe expanded in size by more than a trillion trillion trillion trillionfold in much less than a second, propelled by a sort of antigravity.

-

【结构解析】

-
    -

  1. 句子主干为“主谓宾从”结构，即：Inflation/ says/ that … ；其中say 的翻译是是难点，因为主语为inflation(膨胀论)，say译为“认为”较为合适。

    -
    2. -

  2. that 引导的宾语从句中，very early on 为时间状语； 从句主干为主谓结构，即：the universe expanded in size; by more than a trillion trillion trillion trillionfold为表“倍数”的方式状语； in much less than a second 为时间状语；propelled by a sort of antigravity 为v-ed形式的方式状语。

    -
    3. -
-

【词的处理】

-

expand / ikˈspænd / vi. 扩大，增加

-

trillion / ˈtriljən / number. 万亿，兆

-

trillionfold / ˈtriljənfəuld / adj. 亿万倍的

-

propel / prəˈpel / vt. 推动

-

antigravity / ˌæntiˈɡræviti / n. 反重力；反引力

-

【参考译文】

-

Inflation says that very early on, the universe expanded in size by more than a trillion trillion trillion trillionfold in much less than a second, propelled by a sort of antigravity.

-

膨胀说认为，很久以前，在一种反引力的驱动下，宇宙的体积在不到一秒钟内膨胀了无数倍。

-
-

9 月18

-

【今日长难句】

-

Do animals have rights? This is how the question is usually put. It sounds like a useful, ground-clearing way to start.

-

【结构解析】

-

今天的句子，比较简单，好像没啥解析好写的。就这样吧！

-

不不，还是写一个翻译技巧吧。

-

【被动句的翻译】

-

两种方法：一、直译为被动，译为：“这就是通常问题被提出的方式”如果觉得不顺，方法二、被动译为主动，即：“人们通常这样提问。”

-

【词的处理】

-

ground-clearing adj. 全新的

-

【参考译文】

-

Do animals have rights? This is how the question is usually put. It sounds like a useful, ground-clearing way to start.

-

动物有权利吗？人们通常这样提问。这像是一个实用且具创新的提问方式。

-
-

9月19

-

【今日长难句】

-

Actually, it isn’t, because it assumes that there is an agreed account of human rights, which is something the world does not have.

-

【结构解析】

-
    -

  1. 本句中it 指代上文中的问句“Do animals have rights?”

    -
    2. -

  2. assume 一词，指假设，一般为“没有根据”的假设，往往是错误的

    -
    3. -

  3. because 引导原因状语从句，从句主干为it /assumes /that there is an agreed account of human rights; 译为“这种问法假定了人们对于人权有共同的认识”

    -
    4. -

  4. which is something the world does not have 为定语从句，修饰an agreed account of human rights.

    -
    5. -
-

【词的处理】

-

assume / əˈsju:m / vt. 假设，假定

-

agreed / ə’gri:d / adj. 一致的

-

account / əˈkaunt / n. 解释，说明

-

agreed account 共识

-

【参考译文】

-

Actually, it isn’t, because it assumes that there is an agreed account of human rights, which is something the world does not have.

-

事实并非如此，因为这种问法假定了人们对于人权有共同的认识，而这种共识并不存在。

-
-

9月20

-

【今日长难句】

-

On one view of rights, to be sure, it necessarily follows that animals have none. Some philosophers argue that rights exist only within a social contract, as part of an exchange of duties and entitlements.

-

【结构解析】

-
    -
  1. on 表“根据、关于”，on one view of rights，译为“根据对权利的一种看法”。这个“对权利的一种看法”指代什么哪？其实，指的就是下一句的内容“Some philosophers argue that …”
    2. -
-
    -
  1. to be sure 为动词不定式，修饰整句话，译为“诚然”、“确定的是”
    2. -
-
    -
  1. it necessarily follows that animals have none 该句稍微复杂。有人会误认为这个that从句是宾语从句，充当follow的宾语。如果是这样，it指代什么？我们会发现it指代不明。因此，可以推断，it是形式主语，真正的主语是后面的that从句。也就是说，这里的that从句是一个主语从句。因此，该句可原成：“That animals have none /necessarily follows (from this view)”其中from this view省略。 直译为“动物必然没有权利紧随(这种观点)”；显然，这不是人话，意译为：（这种观点认为）必然动物没有权利。
    2. -
-
    -
  1. 第二句中主干为“主谓宾宾从”结构，即：Some philosophers/ argue /that rights exist only within a social contract, “as part of an exchange of duties and entitlements”充当rights 的同位语。
    2. -
-

【词的处理】

-

necessarily / ˌnesəˈserəli / adv. 必然地

-

follow from … 是……的必然结果

-

philosopher / fəˈlɔsəfə(r) / n. 哲学家

-

social contract 社会契约

-

exchange / iksˈtʃeindʒ / n. 交换，交流

-

entitlement / inˈtaitlmənt / n. 资格，应得的（权益）

-

【参考译文】

-

On one view of rights, to be sure, it necessarily follows that animals have none. Some philosophers argue that rights exist only within a social contract, as part of an exchange of duties and entitlements.

-

诚然，根据对权利的一种看法，动物必然没有权利。有些哲学家论证说，权利只存在于社会契约中，是责任与权益交换的一部分。

-
-

9月21

-

【今日长难句】

-

Therefore, animals cannot have rights. The idea of punishing a tiger that kills somebody is absurd, for exactly the same reason, so is the idea that tigers have rights.

-

【结构解析】

-
    -

  1. 首句较为简单，不做分析。二句主干为The idea of punishing a tiger/ is /absurd, so/is/ the idea that …；that kills somebody为定语从句，修a tiger.

    -
    2. -

  2. for exactly the same reason修饰so is the idea that tigers have rights; 其中so is the iedea 为倒装形式，表前后相同的情况；that tigers have rights 为idea 的同位语，解释其内容。

    -
    3. -
-

【词的处理】
absurd / əbˈsə:d / adj. 荒谬的，荒诞的

-

【参考译文】
Therefore, animals cannot have rights. The idea of punishing a tiger that kills somebody is absurd, for exactly the same reason, so is the idea that tigers have rights.
因此动物不可能有权利。惩罚吃人的老虎的想法是荒谬的。同样，认为老虎有权利也是荒谬的。

-
-

9月22

-

【今日长难句】

-

However, this is only one account, and by no means an uncontested one. It denies rights not only to animals but also to some people—for instance, to infants, the mentally incapable and future generations.

-

【结构解析】

-
    -

  1. 首句为and连接的并列句，后半句为省略形式，by no means an uncontested one = by no means is this an uncontested one; 当前后主语一致时即可省略主语和系动词，其中by no means 之后的语序为半倒装（详见下文）。

    -
    2. -

  2. 二句主干为主谓宾，即It denies rights; not only to animals but also to some people为后置定语修饰rights;

    -
    3. -

  3. “—”之后的for instance, to infants, the mentally incapable and future generations是some people 的同位语，解释说明some people 的具体内容。

    -
    4. -
-

【词的处理】

-

account / əˈkaunt / n. 账户；理由；认知理解

-

uncontested / ˌʌnkənˈtestid / adj. 无争议的

-

deny / diˈnai / vt. 否认

-

infant / ˈinfənt / n. 婴幼儿

-

incapable / inˈkeipəbl / adj. 没有能力的

-

generation / ˌdʒenəˈreiʃn / n. 一代人

-

【参考译文】

-

However, this is only one account, and by no means an uncontested one. It denies rights not only to animals but also to some people—for instance, to infants, the mentally incapable and future generations.

-

然而，这只是一种认识，而且是一种有争议的认识。这种认识不仅剥夺了动物的权利，而且也剥夺了某些人的权利，例如婴儿，这些还不会用大脑来思考问题的下一代。

-
-

9月23

-

【昨日回顾】
However, this is only one account, and by no means an uncontested one. It denies rights not only to animals but also to some people—for instance, to infants, the mentally incapable and future generations.
然而，这只是一种认识，而且是一种有争议的认识。这种认识不仅剥夺了动物的权利，而且也剥夺了某些人的权利，例如婴儿，这些还不会用大脑来思考问题的下一代。

-

【今日长难句】
Whether Arab oil flows freely or not，it is clear to everyone that world industry cannot be allowed to depend on so fragile a base.

-

【结构分析】

-
    -
  1. whether …or not 引导让步状语从句
    2. -
  2. 主干为：it is clear to everyone that … 其中，that 从句为真正主语，it 充当形式主语，建议你背诵该表达：人人都清楚。。。。
    3. -
  3. that从句为被动句。
    4. -
-

【词汇重点】
flows freely 自由流动【意译为：源源不断外流】
industry n. 工业
be allowed to 不能
depend on 依赖
fragile 脆弱的

-

【参考译文】
Whether Arab oil flows freely or not，it is clear to everyone that world industry cannot be allowed to depend on so fragile a base.
不管阿拉伯的石油能否源源不断地外流，人人都清楚，再也不能让世界工业依赖于如此脆弱的能源基础。

-

【明日预告】
The supply of oil can be shut off unexpectedly at any time, and in any case, the oil wells will all run dry in thirty years or so at the present rate of use.

-

只要开始，永远不晚
只要行动，就有希望

-
-

9月24

-

【昨日回顾】
Whether Arab oil flows freely or not, it is clear to everyone that world industry cannot be allowed to depend on so fragile a base.
不管阿拉伯的石油能否源源不断地外流，人人都清楚，再也不能让世界工业依赖于如此脆弱的能源基础。
【今日长难句】
The supply of oil can be shut off unexpectedly at any time, and in any case, the oil wells will all run dry in thirty years or so at the present rate of use.
【分子分析】

-
    -
  1. 主干为：…and ….连接的并列句
    2. -
  2. 前半句：the supply of oil can be shut off //unexpectedly //at any time
    3. -
  3. 后半句：in any case,// the oil wells will run dry // in thirty years// or so// at the present rate of use.
    【重难点词汇】
    the supply of oil 石油的供应
    shut off 关闭
    unexpectedly 毫无征兆地
    in any case 在任何情况下
    oil well 油井
    run dry 枯竭
    in thirty years 三十年后
    or so 大约
    at the present rate of use 以现在的使用速度
    【参考译文】
    The supply of oil can be shut off unexpectedly at any time, and in any case, the oil wells will all run dry in thirty years or so at the present rate of use.
    石油供应可能随时会被切断;不管怎样，以目前这种消费速度，只需30年左右，所有的油井都会枯竭。
    【明日预告】
    New sources of energy must be found，and this will take time，but it is not likely to result in any situation that will ever restore that sense of cheap and plentiful energy we have had in the times past.
    4. -
-

Never give up any opportunity to make progress!
Never met but always love u in mind!
不放弃任何一次进步的机会
虽然素未谋面，但真的爱你！

-
-

9月25

-

【昨日回顾】
The supply of oil can be shut off unexpectedly at any time, and in any case, the oil wells will all run dry in thirty years or so at the present rate of use.
石油供应可能随时会被切断;不管怎样，以目前这种消费速度，只需30年左右，油井都会完全枯竭。

-

2
【今日长难句】
New sources of energy must be found，and this will take time，but it is not likely to result in any situation that will ever restore that sense of cheap and plentiful energy we have had in the times past.

-

3
【分子分析】

-
    -
  1. 主干：…, and …, but 连接三个并列句
    2. -
  2. 修饰成分：首先that will ever restore that sense of cheap and plentiful energy 作为定语从句修饰any situation；其次we have had in the times past 为定语从句修饰that sense of cheap and plentiful energy.
    3. -
-

4
【重难点词汇】
sources of energy 能源
this will take time 这需要时间
it is not likely to … 不大可能
result in 导致……出现
restore 重建
in the times past 在过去

-

5
【参考译文】
New sources of energy must be found，and this will take time，but it is not likely to result in any situation that will ever restore that sense of cheap and plentiful energy we have had in the times past.
必须找到新的能源，而且这需要时间;而过去我们感觉到的那种能源廉价而充足的情况将不大可能再出现了。

-

6
【明日预告】
For an indefinite period from here on，mankind is going to advance cautiously，and consider itself lucky that it can advance at all.

-

只要开始，永远不晚
只要行动，就有希望

-
- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 考虫长难句 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

考虫长难句 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +
+

每日长难句

+
+

九月

+

9月2

+

【今日长难句】
If left to themselves, such trends will diminish the relative strength of the English language in international education markets as the demand for educational resources in languages, such as Spanish, Arabic or Mandarin grows and international business process outsourcing in other language such as Japanese, French and German, spreads.
【结构解析】

+
    +
  1. If left to themselves 为省略形式，即If these trends are left to themselves, 译为：如果放任不管这些趋势。
    2. +
  2. 句子主干为主谓宾结构，即：such trends/ will diminish /the relative strength of the English language in international education markets; 译为：这些趋势将会削弱英语在国际教育市场上的相对优势。
    3. +
  3. as 引导原因状语从句，译为：因为。该从句主干and连接的两个主谓结构，即the demand /grows /and/ international business process outsourcing spreads，译为：某种需求增长并且国际业务流程外包蔓延。
    4. +
  4. the demand的修饰成分为“for educational resources in languages, such as Spanish, Arabic or Mandarin grows”；international business process outsourcing的修饰成分为“in other language such as Japanese, French and German”。
    【词的处理】
    diminish / diˈminiʃ / vt. 减少
    relative / ˈrelətiv / adj. 相对的
    strength / streŋθ / n. 实力；优势
    outsource / ˈautsɔ:s / vt. 外包
    spread / spred / vi. 传播，蔓延
    【参考译文】
    If left to themselves, such trends will diminish the relative strength of the English language in international education markets as the demand for educational resources in languages, such as Spanish, Arabic or Mandarin grows and international business process outsourcing in other language such as Japanese, French and German, spreads.
    如果对其放任自流，这些趋势将削弱英语在国际教育市场的相对优势，因为对西班牙语、阿拉伯语、汉语普通话等语言的教育资源的需求在增长，同时对日语、法语、德语等其他语言的国际业务流程外包在蔓延。
    5. +
+
+

9月4

+

【今日长难句】
The English language teaching sector directly earns nearly &1.3 billion for the UK in invisible exports and our other education related explores earn up to &10 billion a year more.
【结构解析】

+
    +
  1. 首先，本句为and 连接的并列句。
    2. +
  2. 前句主干为“主谓宾宾补”，依次为The English language teaching sector/ directly earns/nearly &1.3 billion /for the UK ; in invisible exports为状语
    3. +
  3. 后半句主干为主谓宾结构，即：our other education related explores /earn/ up to &10 billion a year more. 其中up to修饰& 10 billion， 表多达100亿英镑。
    【词的处理】
    sector / ˈsektə(r) / n. 领域，行业
    invisiable / inˈvizəbl / adj. 看不见的
    export / ˈekspɔ:t/ n. 出口
    up to 多达
    【参考译文】
    The English language teaching sector directly earns nearly &1.3 billion for the UK in invisible exports and our other education related explores earn up to &10 billion a year more.
    在无形的出口中，英语培训行业为英国直接赚取了将近13亿英镑，而其他与教育相关的出口一年则可以赚多达100亿英镑。
    4. +
+
+

9月8

+

【今日长难句】
The irony of the historian’s craft is that its practitioners always know that their efforts are but contributions to an unending process.
【结构解析】

+
    +

  1. 本句主干为主系表语从句结构，即：The irony of the historian’s craft/ is /that its practitioners always know…

    +
    2. +

  2. that their efforts are but contributions to an unending process 为know 的宾语从句。

    +

    【词的处理】
    irony / ˈairəni / n. 讽刺
    historian / hiˈstɔ:riən / n. 历史学家
    craft / krɑ:ft/ n. 技能；行业
    practitioner / prækˈtiʃənə(r) / n. 专门人才
    contribution / ˌkɔntriˈbju:ʃn/ 贡献
    【参考译文】
    The irony of the historian’s craft is that its practitioners always know that their efforts are but contributions to an unending process.
    历史研究这个行当的讽刺意味在于，从事研究的人一直知道，他们的努力只不过是为永无止境的过程添砖加瓦而已。

    +
    3. +
+
+

9月9

+

【今日长难句】

+

While history once revered its affinity to literature and philosophy, the emerging social sciences seemed to afford greater opportunities for asking new questions and providing rewarding approaches to an understanding of the past.
【结构解析】

+
    +
  1. while 用在句首可以引导让步状语从句，表“尽管”；从句主干为主谓宾结构，即：history/ once revered /its affinity to literature and philosophy，译为：历史学一度崇尚它与文学和哲学的相似之处
    2. +
  2. 句子主干为主系表结构，seem 为系动词，to afford …为表语，即：the emerging social sciences/ seemed/ to afford greater opportunities for asking … and providing …；译为：新兴的社会科学似乎提供了更多机会；由于opportunities 的修饰成分较长，建议单独处理。
    【词的处理】
    revere / riˈviə(r) / vt. 尊敬，崇敬
    affinity / əˈfinəti / n. 喜欢；类同
    emerging / iˈmə:dʒiŋ / adj. 新兴的，正在形成的
    rewarding / riˈwɔ:diŋ/ adj. 有益的；回报较高的
    approach / əˈprəutʃ/ n. 方式，方法
    【参考译文】
    While history once revered its affinity to literature and philosophy, the emerging social sciences seemed to afford greater opportunities for asking new questions and providing rewarding approaches to an understanding of the past.
    尽管历史学一度崇尚它与文学和哲学的相似之处，但新兴的社会科学似乎提供了更多机会，以便人们能够提出新问题，有了解过去的有效途径。
    3. +
+
+

9月10

+

【今日长难句】

+

Social science methodologies had to be adapted to a discipline governed by the primacy of historical sources rather than the imperatives of the contemporary world.
【结构解析】
1.本句主干为被动句，即：Social science methodologies /had to be adapted /to a discipline; 译为：社会科学研究的方法论必须进行改变以适应这样一个学科。

+
    +
  1. governed by the primacy of historical sources 为a discipline 的后置定语；rather than 表“而不是”。
    【词的处理】
    methodology / ˌmeθəˈdɔlədʒi/ n. 方法，原则
    adapt … to… 调整……以适应……
    discipline / ˈdisəplin / n. 纪律；学科
    govern 支配，统治
    primacy / ˈpraiməsi / n. 首要
    source / sɔ:/ 来源；原始资料
    imperative / imˈperətiv / adj. 必要的 n. 必要的事
    【参考译文】
    Social science methodologies had to be adapted to a discipline governed by the primacy of historical sources rather than the imperatives of the contemporary world.
    社会科学研究的方法论必须进行改变以适应这样一个学科，主导该学科的首先是历史资料，而不是当代社会的需要。
    2. +
+
+

9月11

+

【今日长难句】

+

But even more important, it was the farthest that scientists had been able to look into the past, for what they were seeing were the patterns and structures that existed 15 billion years ago.
【结构解析】

+
    +
  1. but even more important 为句子的状语成分
    2. +
  2. 句子主干为主系表结构，即：it /was /the farthest；其中it 指代上文中的a strip of enormous cosmic clouds
    3. +
  3. that 引导定语从句修饰 the farthest
    4. +
  4. for +从句，表原因。从句主干为主系表结构：what they were seeing/ were / the patterns and structures; that existed 15 billion years ago. 为定语从句修饰the patterns and structures.
    【词的处理】
    look into 调查，观察
    pattern / ˈpætn / n. 模式
    【参考译文】
    But even more important, it was the farthest that scientists had been able to look into the past, for what they were seeing were the patterns and structures that existed 15 billion years ago.
    更为重要的是，这是科学家们能够观测到的最遥远的过去的景象，因为他们看到的是150亿年前宇宙云的形状和结构。
    5. +
+
+

9月13

+

【今日长难句】

+

Cobe is designed to see just the biggest structures, but astronomers would like to see much smaller hot spots as well, the seeds of local objects like clusters and superclusters of galaxies. They shouldn’t have long to wait.
【结构解析】

+
    +
  1. 本句主干为but连接的并列句。
    2. +
  2. but之前为被动句，即：Cobe/ is designed; to see just the biggest structures为目的状语；
    3. +
  3. 后半句主干为主谓宾结构，即：astronomers /would like to see /much smaller hot spots as well; all seeds of local objects like clusters and superclusters of galaxies为hot spots 的同位语，解释其具体内容。
    【词的处理】
    astronomer / əˈstrɔnəmə(r) / n. 天文学家
    local / ˈləukl / adj. 地方的；局部的
    object / ˈɔbdʒikt / n. 物体；目标
    cluster / ˈklʌstə(r) / n. 簇；团
    galaxy / ˈɡæləksi / n. 星系
    【参考译文】
    Cobe is designed to see just the biggest structures, but astronomers would like to see much smaller hot spots as well, the seeds of local objects like clusters and superclusters of galaxies. They shouldn’t have long to wait.
    设计Cobe卫星就是要观察这些最大的物体结构，但宇航员还想看到更小的热点，即，像星系中的星团和超星团这样一些局部物体的粒子。看来他们不必等待很长时间。
    4. +
+
+

9月16

+

【今日长难句】

+

Astrophysicists working with ground-based detectors at the South Pole and balloon-borne instruments are closing in on such structures, and may report their findings soon.

+

【结构解析】

+
    +

  1. 句子主干为and连接的两个“主谓宾”结构，即：Astrophysicistsare/ are closing in on /such structures, and/ may report /their findings；

    +
    2. +

  2. working with ground-based detectors at the South Pole and balloon-borne instruments 为主语“Astrophysicists”的后置定语。

    +
    3. +
+

【词的处理】

+

astrophysicist /,æstrəu’fi:zisist/ n. 天体物理学家

+

ground-based adj. 基于陆地的

+

detector / diˈtektə(r) / n. 探测器

+

balloon-borne 球载的

+

close in on sb./sth. 逼近，靠近

+

【参考译文】

+

Astrophysicists working with ground-based detectors at the South Pole and balloon-borne instruments are closing in on such structures, and may report their findings soon.

+

天体物理学家使用南极陆基探测器和球载仪器，正在越来越近地观测这些结构，也许不久会报告他们的观测结果。

+
+

9月16

+

【今日长难句】

+

Inflation says that very early on, the universe expanded in size by more than a trillion trillion trillion trillionfold in much less than a second, propelled by a sort of antigravity.

+

【结构解析】

+
    +

  1. 句子主干为“主谓宾从”结构，即：Inflation/ says/ that … ；其中say 的翻译是是难点，因为主语为inflation(膨胀论)，say译为“认为”较为合适。

    +
    2. +

  2. that 引导的宾语从句中，very early on 为时间状语； 从句主干为主谓结构，即：the universe expanded in size; by more than a trillion trillion trillion trillionfold为表“倍数”的方式状语； in much less than a second 为时间状语；propelled by a sort of antigravity 为v-ed形式的方式状语。

    +
    3. +
+

【词的处理】

+

expand / ikˈspænd / vi. 扩大，增加

+

trillion / ˈtriljən / number. 万亿，兆

+

trillionfold / ˈtriljənfəuld / adj. 亿万倍的

+

propel / prəˈpel / vt. 推动

+

antigravity / ˌæntiˈɡræviti / n. 反重力；反引力

+

【参考译文】

+

Inflation says that very early on, the universe expanded in size by more than a trillion trillion trillion trillionfold in much less than a second, propelled by a sort of antigravity.

+

膨胀说认为，很久以前，在一种反引力的驱动下，宇宙的体积在不到一秒钟内膨胀了无数倍。

+
+

9 月18

+

【今日长难句】

+

Do animals have rights? This is how the question is usually put. It sounds like a useful, ground-clearing way to start.

+

【结构解析】

+

今天的句子，比较简单，好像没啥解析好写的。就这样吧！

+

不不，还是写一个翻译技巧吧。

+

【被动句的翻译】

+

两种方法：一、直译为被动，译为：“这就是通常问题被提出的方式”如果觉得不顺，方法二、被动译为主动，即：“人们通常这样提问。”

+

【词的处理】

+

ground-clearing adj. 全新的

+

【参考译文】

+

Do animals have rights? This is how the question is usually put. It sounds like a useful, ground-clearing way to start.

+

动物有权利吗？人们通常这样提问。这像是一个实用且具创新的提问方式。

+
+

9月19

+

【今日长难句】

+

Actually, it isn’t, because it assumes that there is an agreed account of human rights, which is something the world does not have.

+

【结构解析】

+
    +

  1. 本句中it 指代上文中的问句“Do animals have rights?”

    +
    2. +

  2. assume 一词，指假设，一般为“没有根据”的假设，往往是错误的

    +
    3. +

  3. because 引导原因状语从句，从句主干为it /assumes /that there is an agreed account of human rights; 译为“这种问法假定了人们对于人权有共同的认识”

    +
    4. +

  4. which is something the world does not have 为定语从句，修饰an agreed account of human rights.

    +
    5. +
+

【词的处理】

+

assume / əˈsju:m / vt. 假设，假定

+

agreed / ə’gri:d / adj. 一致的

+

account / əˈkaunt / n. 解释，说明

+

agreed account 共识

+

【参考译文】

+

Actually, it isn’t, because it assumes that there is an agreed account of human rights, which is something the world does not have.

+

事实并非如此，因为这种问法假定了人们对于人权有共同的认识，而这种共识并不存在。

+
+

9月20

+

【今日长难句】

+

On one view of rights, to be sure, it necessarily follows that animals have none. Some philosophers argue that rights exist only within a social contract, as part of an exchange of duties and entitlements.

+

【结构解析】

+
    +
  1. on 表“根据、关于”，on one view of rights，译为“根据对权利的一种看法”。这个“对权利的一种看法”指代什么哪？其实，指的就是下一句的内容“Some philosophers argue that …”
    2. +
+
    +
  1. to be sure 为动词不定式，修饰整句话，译为“诚然”、“确定的是”
    2. +
+
    +
  1. it necessarily follows that animals have none 该句稍微复杂。有人会误认为这个that从句是宾语从句，充当follow的宾语。如果是这样，it指代什么？我们会发现it指代不明。因此，可以推断，it是形式主语，真正的主语是后面的that从句。也就是说，这里的that从句是一个主语从句。因此，该句可原成：“That animals have none /necessarily follows (from this view)”其中from this view省略。 直译为“动物必然没有权利紧随(这种观点)”；显然，这不是人话，意译为：（这种观点认为）必然动物没有权利。
    2. +
+
    +
  1. 第二句中主干为“主谓宾宾从”结构，即：Some philosophers/ argue /that rights exist only within a social contract, “as part of an exchange of duties and entitlements”充当rights 的同位语。
    2. +
+

【词的处理】

+

necessarily / ˌnesəˈserəli / adv. 必然地

+

follow from … 是……的必然结果

+

philosopher / fəˈlɔsəfə(r) / n. 哲学家

+

social contract 社会契约

+

exchange / iksˈtʃeindʒ / n. 交换，交流

+

entitlement / inˈtaitlmənt / n. 资格，应得的（权益）

+

【参考译文】

+

On one view of rights, to be sure, it necessarily follows that animals have none. Some philosophers argue that rights exist only within a social contract, as part of an exchange of duties and entitlements.

+

诚然，根据对权利的一种看法，动物必然没有权利。有些哲学家论证说，权利只存在于社会契约中，是责任与权益交换的一部分。

+
+

9月21

+

【今日长难句】

+

Therefore, animals cannot have rights. The idea of punishing a tiger that kills somebody is absurd, for exactly the same reason, so is the idea that tigers have rights.

+

【结构解析】

+
    +

  1. 首句较为简单，不做分析。二句主干为The idea of punishing a tiger/ is /absurd, so/is/ the idea that …；that kills somebody为定语从句，修a tiger.

    +
    2. +

  2. for exactly the same reason修饰so is the idea that tigers have rights; 其中so is the iedea 为倒装形式，表前后相同的情况；that tigers have rights 为idea 的同位语，解释其内容。

    +
    3. +
+

【词的处理】
absurd / əbˈsə:d / adj. 荒谬的，荒诞的

+

【参考译文】
Therefore, animals cannot have rights. The idea of punishing a tiger that kills somebody is absurd, for exactly the same reason, so is the idea that tigers have rights.
因此动物不可能有权利。惩罚吃人的老虎的想法是荒谬的。同样，认为老虎有权利也是荒谬的。

+
+

9月22

+

【今日长难句】

+

However, this is only one account, and by no means an uncontested one. It denies rights not only to animals but also to some people—for instance, to infants, the mentally incapable and future generations.

+

【结构解析】

+
    +

  1. 首句为and连接的并列句，后半句为省略形式，by no means an uncontested one = by no means is this an uncontested one; 当前后主语一致时即可省略主语和系动词，其中by no means 之后的语序为半倒装（详见下文）。

    +
    2. +

  2. 二句主干为主谓宾，即It denies rights; not only to animals but also to some people为后置定语修饰rights;

    +
    3. +

  3. “—”之后的for instance, to infants, the mentally incapable and future generations是some people 的同位语，解释说明some people 的具体内容。

    +
    4. +
+

【词的处理】

+

account / əˈkaunt / n. 账户；理由；认知理解

+

uncontested / ˌʌnkənˈtestid / adj. 无争议的

+

deny / diˈnai / vt. 否认

+

infant / ˈinfənt / n. 婴幼儿

+

incapable / inˈkeipəbl / adj. 没有能力的

+

generation / ˌdʒenəˈreiʃn / n. 一代人

+

【参考译文】

+

However, this is only one account, and by no means an uncontested one. It denies rights not only to animals but also to some people—for instance, to infants, the mentally incapable and future generations.

+

然而，这只是一种认识，而且是一种有争议的认识。这种认识不仅剥夺了动物的权利，而且也剥夺了某些人的权利，例如婴儿，这些还不会用大脑来思考问题的下一代。

+
+

9月23

+

【昨日回顾】
However, this is only one account, and by no means an uncontested one. It denies rights not only to animals but also to some people—for instance, to infants, the mentally incapable and future generations.
然而，这只是一种认识，而且是一种有争议的认识。这种认识不仅剥夺了动物的权利，而且也剥夺了某些人的权利，例如婴儿，这些还不会用大脑来思考问题的下一代。

+

【今日长难句】
Whether Arab oil flows freely or not，it is clear to everyone that world industry cannot be allowed to depend on so fragile a base.

+

【结构分析】

+
    +
  1. whether …or not 引导让步状语从句
    2. +
  2. 主干为：it is clear to everyone that … 其中，that 从句为真正主语，it 充当形式主语，建议你背诵该表达：人人都清楚。。。。
    3. +
  3. that从句为被动句。
    4. +
+

【词汇重点】
flows freely 自由流动【意译为：源源不断外流】
industry n. 工业
be allowed to 不能
depend on 依赖
fragile 脆弱的

+

【参考译文】
Whether Arab oil flows freely or not，it is clear to everyone that world industry cannot be allowed to depend on so fragile a base.
不管阿拉伯的石油能否源源不断地外流，人人都清楚，再也不能让世界工业依赖于如此脆弱的能源基础。

+

【明日预告】
The supply of oil can be shut off unexpectedly at any time, and in any case, the oil wells will all run dry in thirty years or so at the present rate of use.

+

只要开始，永远不晚
只要行动，就有希望

+
+

9月24

+

【昨日回顾】
Whether Arab oil flows freely or not, it is clear to everyone that world industry cannot be allowed to depend on so fragile a base.
不管阿拉伯的石油能否源源不断地外流，人人都清楚，再也不能让世界工业依赖于如此脆弱的能源基础。
【今日长难句】
The supply of oil can be shut off unexpectedly at any time, and in any case, the oil wells will all run dry in thirty years or so at the present rate of use.
【分子分析】

+
    +
  1. 主干为：…and ….连接的并列句
    2. +
  2. 前半句：the supply of oil can be shut off //unexpectedly //at any time
    3. +
  3. 后半句：in any case,// the oil wells will run dry // in thirty years// or so// at the present rate of use.
    【重难点词汇】
    the supply of oil 石油的供应
    shut off 关闭
    unexpectedly 毫无征兆地
    in any case 在任何情况下
    oil well 油井
    run dry 枯竭
    in thirty years 三十年后
    or so 大约
    at the present rate of use 以现在的使用速度
    【参考译文】
    The supply of oil can be shut off unexpectedly at any time, and in any case, the oil wells will all run dry in thirty years or so at the present rate of use.
    石油供应可能随时会被切断;不管怎样，以目前这种消费速度，只需30年左右，所有的油井都会枯竭。
    【明日预告】
    New sources of energy must be found，and this will take time，but it is not likely to result in any situation that will ever restore that sense of cheap and plentiful energy we have had in the times past.
    4. +
+

Never give up any opportunity to make progress!
Never met but always love u in mind!
不放弃任何一次进步的机会
虽然素未谋面，但真的爱你！

+
+

9月25

+

【昨日回顾】
The supply of oil can be shut off unexpectedly at any time, and in any case, the oil wells will all run dry in thirty years or so at the present rate of use.
石油供应可能随时会被切断;不管怎样，以目前这种消费速度，只需30年左右，油井都会完全枯竭。

+

2
【今日长难句】
New sources of energy must be found，and this will take time，but it is not likely to result in any situation that will ever restore that sense of cheap and plentiful energy we have had in the times past.

+

3
【分子分析】

+
    +
  1. 主干：…, and …, but 连接三个并列句
    2. +
  2. 修饰成分：首先that will ever restore that sense of cheap and plentiful energy 作为定语从句修饰any situation；其次we have had in the times past 为定语从句修饰that sense of cheap and plentiful energy.
    3. +
+

4
【重难点词汇】
sources of energy 能源
this will take time 这需要时间
it is not likely to … 不大可能
result in 导致……出现
restore 重建
in the times past 在过去

+

5
【参考译文】
New sources of energy must be found，and this will take time，but it is not likely to result in any situation that will ever restore that sense of cheap and plentiful energy we have had in the times past.
必须找到新的能源，而且这需要时间;而过去我们感觉到的那种能源廉价而充足的情况将不大可能再出现了。

+

6
【明日预告】
For an indefinite period from here on，mankind is going to advance cautiously，and consider itself lucky that it can advance at all.

+

只要开始，永远不晚
只要行动，就有希望

+
+ +
+ + + + + + +
+
+ + +
+ + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2017/10/15/yemao/index.html b/2017/10/15/yemao/index.html new file mode 100644 index 00000000..ed5ec40a --- /dev/null +++ b/2017/10/15/yemao/index.html @@ -0,0 +1,558 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 随笔记夜猫子英语 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

随笔记夜猫子英语 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

第一天

American Revolution 独立战争 = American war of independence

+

No representation, no tax 无代表不纳税

+

monarchy 君主制 democracy 民主制

+

the gun of lexington 莱克辛顿的枪声 the beginning of important event

+
+ +

American Civil War 美国南北战争

+

south area – cotton(棉花) – human labor – slaves(奴隶) blacks 黑人 whites

+

north area – industry – no slaves

+

so they started the conflict

+

south area: separate and being independent

+

north area: if you want to be independent, we will beat you

+

《the birth of nation》

+

what is difference between America and yogurt?

+

if you put yogurt for 200 years, it will develop culture.

+

《12 years a slave》

+

第二天

All happy families are happy alike, all unhappy families are unhappy in their own way.

+

All successful people are successful alike, all unsuccessful people are unsuccessful in their own way.

+

diligent(勤奋) Anna Karenina

+
+

It was the best of times, it was the worst of times,
it was the age of wisdom, it was the age of foolishness,
it was the epoch of belief, it was the epoch of incredulity,
it was the season of Light, it was the season of Darkness,
it was the spring of hope, it was the winter of despair,
we had everything before us, we had nothing before us,
we were all going direct to Heaven, we were all going direct the other way.

+

《双城记》Charles dickens

+
+

It is a truth universally acknowledged, that a single man in possessing of a good fortune must be in want of a wife.

+

《Pride and Prejudice》傲慢与偏见 Alliteration(压头韵)

+

Practice makes perfect The Beauty and the Beast

+
+

洛丽塔，我生命之光，我欲念之火。我的罪恶，我的灵魂。 洛一丽一塔：舌尖向上，分三步，从上颚往下轻轻落在牙齿上。洛。丽。塔。

+

第三天

MPAA 美国电影协会 分级：rating

+

Motion Picture Association of America – film rating system

+

territories (领土)

+

Substance abuse (滥用药物) Nudity(裸露程度)

+

G – General Audience

+

PG – Parental Guidance Suggested

+

PG-13 – Parent Strongly Cautioned (under 13)

+

R – Restricted 《Instinct》(本能)

+

NC-17 – Adults Only

+

《eyes wide shut》大开眼界 《blue valentine》

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2017/10/19/yemao/index.html b/2017/10/19/yemao/index.html deleted file mode 100644 index c9e50236..00000000 --- a/2017/10/19/yemao/index.html +++ /dev/null @@ -1,896 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 随笔记夜猫子英语 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

随笔记夜猫子英语 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

第一天

American Revolution 独立战争 = American war of independence

-

No representation, no tax 无代表不纳税

-

monarchy 君主制 democracy 民主制

-

the gun of lexington 莱克辛顿的枪声 the beginning of important event

-
- -

American Civil War 美国南北战争

-

south area – cotton(棉花) – human labor – slaves(奴隶) blacks 黑人 whites

-

north area – industry – no slaves

-

so they started the conflict

-

south area: separate and being independent

-

north area: if you want to be independent, we will beat you

-

《the birth of nation》

-

what is difference between America and yogurt?

-

if you put yogurt for 200 years, it will develop culture.

-

《12 years a slave》

-

第二天

All happy families are happy alike, all unhappy families are unhappy in their own way.

-

All successful people are successful alike, all unsuccessful people are unsuccessful in their own way.

-

diligent(勤奋) Anna Karenina

-
-

It was the best of times, it was the worst of times,
it was the age of wisdom, it was the age of foolishness,
it was the epoch of belief, it was the epoch of incredulity,
it was the season of Light, it was the season of Darkness,
it was the spring of hope, it was the winter of despair,
we had everything before us, we had nothing before us,
we were all going direct to Heaven, we were all going direct the other way.

-

《双城记》Charles dickens

-
-

It is a truth universally acknowledged, that a single man in possessing of a good fortune must be in want of a wife.

-

《Pride and Prejudice》傲慢与偏见 Alliteration(压头韵)

-

Practice makes perfect The Beauty and the Beast

-
-

洛丽塔，我生命之光，我欲念之火。我的罪恶，我的灵魂。 洛一丽一塔：舌尖向上，分三步，从上颚往下轻轻落在牙齿上。洛。丽。塔。

-

第三天

MPAA 美国电影协会 分级：rating

-

Motion Picture Association of America – film rating system

-

territories (领土)

-

Substance abuse (滥用药物) Nudity(裸露程度)

-

G – General Audience

-

PG – Parental Guidance Suggested

-

PG-13 – Parent Strongly Cautioned (under 13)

-

R – Restricted 《Instinct》(本能)

-

NC-17 – Adults Only

-

《eyes wide shut》大开眼界 《blue valentine》

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/2017/10/30/think1030/index.html b/2017/10/30/think1030/index.html new file mode 100644 index 00000000..515a071a --- /dev/null +++ b/2017/10/30/think1030/index.html @@ -0,0 +1,544 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 十月末 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

十月末 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

从九月初学习前端快两个月，我已经确定了自己的这条路。从前端到全栈是我的终级目的，而我在这十个月的目标就是在明年暑假能够去找一家互联网公司实习做前端不论是在成都或深圳。

+
    +
  1. 前两个月，浅学了 Git 的简单操作，用 Hexo 搭建了个人博客，看 W3C 及 MDN 浅学了 HTML 及 CSS，完成了老师的作业（本学期学校选修有 web ）及 IFE 上的微微学院及斌斌学院的前几个小项目还有 MDN 上的部分练手。
    2. +
+
    +
  1. 最近看妙味的视频对敲样式代码有点力不从心，有抵触的心情而不是之前那般激动去解决问题。打算先放 JavaScript 先系统看下 CSS 的书籍，之前脚步似乎大了点，力不从心，去牛客网做相关试题竟然十对三更让我觉得应该好好看看书了。
    2. +
+
    +

  1. 时间规划，效率依然是一个难题。英语，前端，专业，其实本不矛盾，但我总是看看这个又再看看那个。先拟定一个小计划，试行一周下周总结再更改。

    +
      +

    • 每天一练习一篇字

      +
      • +

    • 英语每天两小时 至少背 50 个单词准备六级一次性过

      +
      • +
    • 前端每天至少两小时
      • +
    • 专业课跟着课程走就好
      • +
    +
    2. +
+
    +
  1. 这两个月没有系统的学习知识但是了解了很多其它知识，学会用 Github 然后很幸运从中认识了 stormzhang 知道了 freecodecamp 知道了很多行业中牛逼的人。他们乐于分享及开源精神是我需要学习的，我要走的路还有很多，最近生病了两次（身体真的很重要），还有看了前端的知识框架真的很多，内心似乎在畏惧？我从内心告诉自己一定要 step by step 永不放弃.
    2. +
+
    +
  1. 一定要爱自己的父母及爱自己的人，我永远的避风港，永远支持着你。父母与可能思想不同，言语不同，可是总有那一瞬间你会愧疚自己没有好好爱过她们。我已经辜负了爱过我的人了。
    2. +
+
1
青春只有一次，不在放纵中成长就在坠落中灭亡，不在灭亡中死地而后生，那只有在灭亡中寻找永恒的秘密。
+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2017/11/01/think1030/index.html b/2017/11/01/think1030/index.html deleted file mode 100644 index db406dad..00000000 --- a/2017/11/01/think1030/index.html +++ /dev/null @@ -1,859 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 十月末 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

十月末 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

从九月初学习前端快两个月，我已经确定了自己的这条路。从前端到全栈是我的终级目的，而我在这十个月的目标就是在明年暑假能够去找一家互联网公司实习做前端不论是在成都或深圳。

-
    -
  1. 前两个月，浅学了 Git 的简单操作，用 Hexo 搭建了个人博客，看 W3C 及 MDN 浅学了 HTML 及 CSS，完成了老师的作业（本学期学校选修有 web ）及 IFE 上的微微学院及斌斌学院的前几个小项目还有 MDN 上的部分练手。
    2. -
-
    -
  1. 最近看妙味的视频对敲样式代码有点力不从心，有抵触的心情而不是之前那般激动去解决问题。打算先放 JavaScript 先系统看下 CSS 的书籍，之前脚步似乎大了点，力不从心，去牛客网做相关试题竟然十对三更让我觉得应该好好看看书了。
    2. -
-
    -

  1. 时间规划，效率依然是一个难题。英语，前端，专业，其实本不矛盾，但我总是看看这个又再看看那个。先拟定一个小计划，试行一周下周总结再更改。

    -
      -

    • 每天一练习一篇字

      -
      • -

    • 英语每天两小时 至少背 50 个单词准备六级一次性过

      -
      • -
    • 前端每天至少两小时
      • -
    • 专业课跟着课程走就好
      • -
    -
    2. -
-
    -
  1. 这两个月没有系统的学习知识但是了解了很多其它知识，学会用 Github 然后很幸运从中认识了 stormzhang 知道了 freecodecamp 知道了很多行业中牛逼的人。他们乐于分享及开源精神是我需要学习的，我要走的路还有很多，最近生病了两次（身体真的很重要），还有看了前端的知识框架真的很多，内心似乎在畏惧？我从内心告诉自己一定要 step by step 永不放弃.
    2. -
-
    -
  1. 一定要爱自己的父母及爱自己的人，我永远的避风港，永远支持着你。父母与可能思想不同，言语不同，可是总有那一瞬间你会愧疚自己没有好好爱过她们。我已经辜负了爱过我的人了。
    2. -
-
1
青春只有一次，不在放纵中成长就在坠落中灭亡，不在灭亡中死地而后生，那只有在灭亡中寻找永恒的秘密。
- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/2017/11/25/suibi11last/index.html b/2017/11/25/suibi11last/index.html new file mode 100644 index 00000000..9d32ff83 --- /dev/null +++ b/2017/11/25/suibi11last/index.html @@ -0,0 +1,521 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 11 月末 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

11 月末 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

今天再看了一次阿米尔汗的《地球上的星星》，在三颜色事件后另有一番感慨，你不得不惊叹阿米汗的一流，只要你有爱，你定流泪。真的感谢那些帮助孩子的老师家长还有可爱的孩子。我痛恨那些造谣的人， 永远

+

上个月给自己的任务并没有如期完成，身心浮躁，难以专心，今天给爸妈打电话妈妈说六级不一定要这一次过，可是想来我总是轻易的放过了自己。我知道只有十分努力才能看上去毫不废力，但是我似乎没有找到一个真正的动力，金钱我缺，才气我缺，胸怀我缺，也许我想要的太多，看得过远，感觉毫无希望所以选择放弃了吧。

我似乎难以像电影中伊夏那样有天马行空的美妙神奇的想像力，可是我似乎没有发现到自己的闪光点，真的觉得自己缺乏了一种东西，暂且叫他信仰吧。

期末要到了，我自己最近看到自己的一点焦虑，但是一切要一步一步来，你欠了两年不可能两天还上是吧？人有远虑是好的，咱得相信自己，未来可期，也许那天 all in 对了呢？最近打算翻译 CS 61A 的教材又怀疑能力就再考虑下但是课得好好过一遍 主要是课程的函数式编程思想很明晰还有 recursion 以及 iteration 讲得真棒。好吧也许是以前未好好学习。

+
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2017/12/06/suibi11last/index.html b/2017/12/06/suibi11last/index.html deleted file mode 100644 index cf680710..00000000 --- a/2017/12/06/suibi11last/index.html +++ /dev/null @@ -1,863 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 11 月末 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

11 月末 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

今天再看了一次阿米尔汗的《地球上的星星》，在三颜色事件后另有一番感慨，你不得不惊叹阿米汗的一流，只要你有爱，你定流泪。真的感谢那些帮助孩子的老师家长还有可爱的孩子。我痛恨那些造谣的人， 永远

-

上个月给自己的任务并没有如期完成，身心浮躁，难以专心，今天给爸妈打电话妈妈说六级不一定要这一次过，可是想来我总是轻易的放过了自己。我知道只有十分努力才能看上去毫不废力，但是我似乎没有找到一个真正的动力，金钱我缺，才气我缺，胸怀我缺，也许我想要的太多，看得过远，感觉毫无希望所以选择放弃了吧。

我似乎难以像电影中伊夏那样有天马行空的美妙神奇的想像力，可是我似乎没有发现到自己的闪光点，真的觉得自己缺乏了一种东西，暂且叫他信仰吧。

期末要到了，我自己最近看到自己的一点焦虑，但是一切要一步一步来，你欠了两年不可能两天还上是吧？人有远虑是好的，咱得相信自己，未来可期，也许那天 all in 对了呢？最近打算翻译 CS 61A 的教材又怀疑能力就再考虑下但是课得好好过一遍 主要是课程的函数式编程思想很明晰还有 recursion 以及 iteration 讲得真棒。好吧也许是以前未好好学习。

- -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git "a/2018/02/06/\345\210\235\346\216\242vim/index.html" "b/2018/02/06/\345\210\235\346\216\242vim/index.html" deleted file mode 100644 index d3780a25..00000000 --- "a/2018/02/06/\345\210\235\346\216\242vim/index.html" +++ /dev/null @@ -1,974 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 初探 vim | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

初探 vim - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -
-

教程来自 vimtutor 版本1.7 shell 下直接输入 vimtutor

-
-

先输入 ：set number 显示行号

- -

第一讲

    -

  1. 光标在屏幕文本中的移动既可以用箭头键，也可以使用 hjkl 字母键。

    -
    h (左移)       j (下行)       k (上行)     l (右移)
-
    -

    可以在前面带上数字

    -
    -
    2. -

  2. 欲进入 Vim 编辑器(从命令行提示符)，请输入：vim 文件名 <回车>

    -
    3. -

  3. 欲退出 Vim 编辑器，请输入 :q! <回车> 放弃所有改动。

    -
    或者输入 <ESC>   :wq   <回车> 保存改动。
-
    4. -

  4. 在正常模式下删除光标所在位置的字符，请按： x

    -
    5. -

  5. 欲插入或添加文本，请输入：

    -
    i   输入欲插入文本   <ESC>             在光标前插入文本
-A   输入欲添加文本   <ESC>             在一行后添加文本
-
    6. -
-

特别提示：按下 键会带您回到正常模式或者撤消一个不想输入或部分完整
的命令。

-

第二讲

-

d 代表删除（delete）

-
-
    -
  1. 欲从当前光标删除至下一个单词，请输入：dw
    2. -
  2. 欲从当前光标删除至当前行末尾，请输入：d$
    3. -

  3. 欲删除整行，请输入：dd

    -
    4. -

  4. 欲重复一个动作，请在它前面加上一个数字：2w

    -
    5. -

  5. 在正常模式下修改命令的格式是：

    -
    operator   [number]   motion
-

    其中：
    operator - 操作符，代表要做的事情，比如 d 代表删除
    [number] - 可以附加的数字，代表动作重复的次数
    motion - 动作，代表在所操作的文本上的移动，例如 w 代表单词(word)，

    -
    $ 代表行末等等。
-
    6. -

  6. 欲移动光标到行首，请按数字0键：0

    -
    7. -

  7. 欲撤消以前的操作，请输入：u (小写的u)
    欲撤消在一行中所做的改动，请输入：U (大写的U)
    欲撤消以前的撤消命令，恢复以前的操作结果，请输入：CTRL-R

    -
    8. -
-

第三讲

    -

  1. 要重新置入已经删除的文本内容，请按小写字母 p 键。该操作可以将已删除
    的文本内容置于光标之后。如果最后一次删除的是一个整行，那么该行将置
    于当前光标所在行的下一行。

    -
    2. -

  2. 要替换光标所在位置的字符，请输入小写的 r 和要替换掉原位置字符的新字
    符即可。

    -
    3. -

  3. 更改类命令允许您改变从当前光标所在位置直到动作指示的位置中间的文本>。
    比如输入 ce 可以替换当前光标到单词的末尾的内容；输入 c$ 可以替换当
    前光标到行末的内容。

    -
    4. -

  4. 更改类命令的格式是：

    -
    c   [number]   motion
-
    5. -
-

第四讲

    -

  1. CTRL-G 用于显示当前光标所在位置和文件状态信息。
    G 用于将光标跳转至文件最后一行。
    先敲入一个行号然后输入大写 G 则是将光标移动至该行号代表的行。
    gg 用于将光标跳转至文件第一行。

    -
      -

    1. 输入 / 然后紧随一个字符串是在当前所编辑的文档中正向查找该字符串。
      输入 ? 然后紧随一个字符串则是在当前所编辑的文档中反向查找该字符串。
      完成一次查找之后按 n 键是重复上一次的命令，可在同一方向上查
      找下一个匹配字符串所在；或者按大写 N 向相反方向查找下一匹配字符串所
      在。
      CTRL-O 带您跳转回较旧的位置，CTRL-I 则带您到较新的位置。

      -
      2. -

    2. 如果光标当前位置是括号(、)、[、]、{、}，按 % 会将光标移动到配对的括
      号上。

      -
      3. -

    3. 在一行内替换头一个字符串 old 为新的字符串 new，请输入 :s/old/new
      在一行内替换所有的字符串 old 为新的字符串 new，请输入 :s/old/new/g
      在两行内替换所有的字符串 old 为新的字符串 new，请输入 :#,#s/old/new/g
      在文件内替换所有的字符串 old 为新的字符串 new，请输入 :%s/old/new/g
      进行全文替换时询问用户确认每个替换需添加 c 标志 :%s/old/new/gc

      -
      4. -
    -
    2. -
-

第五讲

    -

  1. :!command 用于执行一个外部命令 command。

    -

    请看一些实际例子：

    -
    (MS-DOS)         (Unix)
- :!dir            :!ls            -  用于显示当前目录的内容。
- :!del FILENAME   :!rm FILENAME   -  用于删除名为 FILENAME 的文
-

    件。

    -
    2. -

  2. :w FILENAME 可将当前 VIM 中正在编辑的文件保存到名为 FILENAME 的文
    件中。

    -
    3. -

  3. v motion :w FILENAME 可将当前编辑文件中可视模式下选中的内容保存到文
    件
    FILENAME 中。

    -
    4. -

  4. :r FILENAME 可提取磁盘文件 FILENAME 并将其插入到当前文件的光标位置
    后面。

    -
    5. -

  5. :r !dir 可以读取 dir 命令的输出并将其放置到当前文件的光标位置后面。

    -
    6. -
-

第六讲

    -

  1. :!command 用于执行一个外部命令 command。

    -

    请看一些实际例子：

    -
    (MS-DOS)         (Unix)
- :!dir            :!ls            -  用于显示当前目录的内容。
- :!del FILENAME   :!rm FILENAME   -  用于删除名为 FILENAME 的文
-

    件。

    -
    2. -

  2. :w FILENAME 可将当前 VIM 中正在编辑的文件保存到名为 FILENAME 的文
    件中。

    -
    3. -

  3. v motion :w FILENAME 可将当前编辑文件中可视模式下选中的内容保存到文
    件
    FILENAME 中。

    -
    4. -

  4. :r FILENAME 可提取磁盘文件 FILENAME 并将其插入到当前文件的光标位置
    后面。

    -
    5. -

  5. :r !dir 可以读取 dir 命令的输出并将其放置到当前文件的光标位置后面。

    -
    6. -
-

第七讲

    -

  1. 输入 :help 或者按 键或 键可以打开帮助窗口。

    -
    2. -

  2. 输入 :help cmd 可以找到关于 cmd 命令的帮助。

    -
    3. -

  3. 输入 CTRL-W CTRL-W 可以使您在窗口之间跳转。

    -
    4. -

  4. 输入 :q 以关闭帮助窗口

    -
    5. -

  5. 您可以创建一个 vimrc 启动脚本文件用来保存您偏好的设置。

    -
    6. -

  6. 当输入 : 命令时，按 CTRL-D 可以查看可能的补全结果。
    按 可以使用一个补全。

    -
    7. -
- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git "a/2018/02/08/HTTP-\345\205\245\351\227\250/index.html" "b/2018/02/08/HTTP-\345\205\245\351\227\250/index.html" deleted file mode 100644 index 7915b3cb..00000000 --- "a/2018/02/08/HTTP-\345\205\245\351\227\250/index.html" +++ /dev/null @@ -1,908 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - HTTP 入门 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

HTTP 入门 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -
-

This is for everyone

-

—Tim Berners-Lee（下文简称为Lee）

-
-

当你习惯了一件事情你每一天都要去用它，若你能去了解他形成的原因的时候你定会感慨创造他的人是如此的了不起进而由衷的崇拜与感激。

- -

历史

Lee 在欧洲核子研究组织上班，发现大家的电脑的系统都不一样，而为了方便大家的通信他想到来制定一种协议来是大家发送的信息在不同的地方得到相同的显示效果。进而有了 HTTP,HTML, 他弄出了第一台服务器，浏览器及第一个网页。并在 2017 获得图灵奖。

-

URL(Uniform Resource Locator)

就是大家常说的网址，有了 URL 我们可以获取想要得到的信息。

-

超文本传输协议（HTTP）的统一资源定位符将从因特网获取信息的五个基本元素包括在一个简单的地址中：

-
    -
  1. 传送协议。（http/https）
    2. -
  2. 层级URL标记符号(为[//],固定不变)
    3. -
  3. 访问资源需要的凭证信息（可省略）
    4. -
  4. 服务器。（通常为域名，有时为IP地址）
    5. -
  5. 端口号。（以数字方式表示，若为HTTP的默认值“:80”可省略）
    6. -
  6. 路径。（以“/”字符区别路径中的每一个目录名称）
    7. -
  7. 查询。（GET模式的窗体参数，以“?”字符为起点，每个参数以“&”隔开，再以“=”分开参数名称与数据，通常以UTF8的URL编码，避开字符冲突的问题）
    8. -
  8. 片段。以“#”字符为起点[2]
    9. -
-

以http://zh.wikipedia.org:80/w/index.php?title=Special:%E9%9A%8F%E6%9C%BA%E9%A1%B5%E9%9D%A2 为例, 其中：

-
    -
  1. http，是协议；
    2. -
  2. zh.wikipedia.org，是服务器；
    3. -
  3. 80，是服务器上的网络端口号；
    4. -
  4. /w/index.php，是路径；
    5. -
  5. ?title=Special:%E9%9A%8F%E6%9C%BA%E9%A1%B5%E9%9D%A2，是询问。
    6. -
-

大多数网页浏览器不要求用户输入网页中“http://”的部分，因为绝大多数网页内容是超文本传输协议文件。同样，“80”是超文本传输协议文件的常用端口号，因此一般也不必写明。一般来说用户只要键入统一资源定位符的一部分（zh.wikipedia.org/wiki/Special:%E9%9A%8F%E6%9C%BA%E9%A1%B5%E9%9D%A2）就可以了。

-

由于超文本传输协议允许服务器将浏览器重定向到另一个网页地址，因此许多服务器允许用户省略网页地址中的部分，比如 www。从技术上来说这样省略后的网页地址实际上是一个不同的网页地址，浏览器本身无法决定这个新地址是否通，服务器必须完成重定向的任务。

-

URN,URI,URL

URI可被视为定位符（URL），名称（URN）或两者兼备。统一资源名（URN）如同一个人的名称，而统一资源定位符（URL）代表一个人的住址。换言之，URN定义某事物的身份，而URL提供查找该事物的方法。(URL 是 URI 最常见的形式)

-

DNS（Domain Name System）

通过 DNS 我们可以获取查询网址的 IP 地址，因为 IP 地址实在是难以记住而网址大多比较容易记忆

-

-

HTTP(HyperText Transfer Protocol)

超文本传输协议在我看来其实就是客户端向服务器发起请求资源，而服务器则应答并返回该资源，为了使资源可用而使用了 HTTP。

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$ curl -v baidu.com  
* Rebuilt URL to: baidu.com/
*   Trying 111.13.101.208...
* TCP_NODELAY set
* Connected to baidu.com (111.13.101.208) port 80 (#0)
> GET / HTTP/1.1
> Host: baidu.com
> User-Agent: curl/7.52.1
> Accept: */*
> 
< HTTP/1.1 200 OK
< Date: Thu, 08 Feb 2018 03:05:13 GMT
< Server: Apache
< Last-Modified: Tue, 12 Jan 2010 13:48:00 GMT
< ETag: "51-47cf7e6ee8400"
< Accept-Ranges: bytes
< Content-Length: 81
< Cache-Control: max-age=86400
< Expires: Fri, 09 Feb 2018 03:05:13 GMT
< Connection: Keep-Alive
< Content-Type: text/html
< 
<html>
<meta http-equiv="refresh" content="0;url=http://www.baidu.com/">
</html>
-

explainshell

-

我们还可以通过 Google 浏览器的 Network 查看

-

面试题

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 注：这题胜在区分度高，知识点覆盖广，再不懂的人，也能答出几句，
 而高手可以根据自己擅长的领域自由发挥，从URL规范、HTTP协议、DNS、CDN、数据库查询、
 到浏览器流式解析、CSS规则构建、layout、paint、onload/domready、JS执行、JS API绑定等等；
 详细版：
1、浏览器会开启一个线程来处理这个请求，对 URL 分析判断如果是 http 协议就按照 Web 方式来处理;
2、调用浏览器内核中的对应方法，比如 WebView 中的 loadUrl 方法;
   3、通过DNS解析获取网址的IP地址，设置 UA 等信息发出第二个GET请求;
4、进行HTTP协议会话，客户端发送报头(请求报头);
   5、进入到web服务器上的 Web Server，如 Apache、Tomcat、Node.JS 等服务器;
   6、进入部署好的后端应用，如 PHP、Java、JavaScript、Python 等，找到对应的请求处理;
7、处理结束回馈报头，此处如果浏览器访问过，缓存上有对应资源，会与服务器最后修改时间对比，一致则返回304;
   8、浏览器开始下载html文档(响应报头，状态码200)，同时使用缓存;
   9、文档树建立，根据标记请求所需指定MIME类型的文件（比如css、js）,同时设置了cookie;
   10、页面开始渲染DOM，JS根据DOM API操作DOM,执行事件绑定等，页面显示完成。
 简洁版：
浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
载入解析到的资源文件，渲染页面，完成。
-
http状态码有那些？分别代表是什么意思？
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
简单版
[
	100  Continue	继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
	200  OK 		正常返回信息
	201  Created  	请求成功并且服务器创建了新的资源
	202  Accepted 	服务器已接受请求，但尚未处理
	301  Moved Permanently  请求的网页已永久移动到新位置。
	302 Found  		临时性重定向。
	303 See Other  	临时性重定向，且总是使用 GET 请求新的 URI。
	304  Not Modified 自从上次请求后，请求的网页未修改过。
	400 Bad Request  服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
	401 Unauthorized 请求未授权。
	403 Forbidden  	禁止访问。
	404 Not Found  	找不到如何与 URI 相匹配的资源。
	500 Internal Server Error  最常见的服务器端错误。
	503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。
]
 完整版
 1**(信息类)：表示接收到请求并且继续处理
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
 2**(响应成功)：表示动作被成功接收、理解和接受
200——表明该请求被成功地完成，所请求的资源发送回客户端
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到，但返回信息为空
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求
 3**(重定向类)：为了完成指定的动作，必须接受进一步处理
300——请求的资源可在多处得到
301——本网页被永久性转移到另一个URL
302——请求的网页被转移到一个新的地址，但客户访问仍继续通过原始URL地址，重定向，新的URL会在response中的Location中返回，浏览器将会使用新的URL发出新的Request。
303——建议客户访问其他URL或访问方式
304——自从上次请求后，请求的网页未修改过，服务器返回此响应时，不会返回网页内容，代表上次的文档已经被缓存了，还可以继续使用
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码，现行版本中不再使用
307——申明请求的资源临时性删除
 4**(客户端错误类)：请求包含错误语法或不能正确执行
400——客户端请求有语法错误，不能被服务器所理解
401——请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用
HTTP 401.1 - 未授权：登录失败
　　HTTP 401.2 - 未授权：服务器配置问题导致登录失败
　　HTTP 401.3 - ACL 禁止访问资源
　　HTTP 401.4 - 未授权：授权被筛选器拒绝
HTTP 401.5 - 未授权：ISAPI 或 CGI 授权失败
402——保留有效ChargeTo头响应
403——禁止访问，服务器收到请求，但是拒绝提供服务
HTTP 403.1 禁止访问：禁止可执行访问
　　HTTP 403.2 - 禁止访问：禁止读访问
　　HTTP 403.3 - 禁止访问：禁止写访问
　　HTTP 403.4 - 禁止访问：要求 SSL
　　HTTP 403.5 - 禁止访问：要求 SSL 128
　　HTTP 403.6 - 禁止访问：IP 地址被拒绝
　　HTTP 403.7 - 禁止访问：要求客户证书
　　HTTP 403.8 - 禁止访问：禁止站点访问
　　HTTP 403.9 - 禁止访问：连接的用户过多
　　HTTP 403.10 - 禁止访问：配置无效
　　HTTP 403.11 - 禁止访问：密码更改
　　HTTP 403.12 - 禁止访问：映射器拒绝访问
　　HTTP 403.13 - 禁止访问：客户证书已被吊销
　　HTTP 403.15 - 禁止访问：客户访问许可过多
　　HTTP 403.16 - 禁止访问：客户证书不可信或者无效
HTTP 403.17 - 禁止访问：客户证书已经到期或者尚未生效
404——一个404错误表明可连接服务器，但服务器无法取得所请求的网页，请求资源不存在。eg：输入了错误的URL
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖，请求资源不可访问
407——类似401，用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态，请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求长。
 5**(服务端错误类)：服务器不能正确执行一个正确的请求
HTTP 500 - 服务器遇到错误，无法完成请求
　　HTTP 500.100 - 内部服务器错误 - ASP 错误
　　HTTP 500-11 服务器关闭
　　HTTP 500-12 应用程序重新启动
　　HTTP 500-13 - 服务器太忙
　　HTTP 500-14 - 应用程序无效
　　HTTP 500-15 - 不允许请求 global.asa
　　Error 501 - 未实现
 HTTP 502 - 网关错误
 HTTP 503：由于超载或停机维护，服务器目前无法使用，一段时间后可能恢复正常
-

文章只是随便说说，定有不对之处，谅解。

-

参考：

- - - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/2018/02/12/bboc/index.html b/2018/02/12/bboc/index.html index ad7f3cc9..ee84d4c6 100644 --- a/2018/02/12/bboc/index.html +++ b/2018/02/12/bboc/index.html @@ -1,893 +1,539 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - BBOC | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

BBOC - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -
-

BBOC=Best Boy Of China。

-

这篇文章是曾博在2011年刚去美国写的。

-

当年，他还是BBOC，还会浪漫的给自己写信，

-
- -

我想简短的问问你，身体还好么，这么长的时间，空下来的时候都干些什么呢，有没有读到很有感触的书，有没有想到一些提笔要写的事？时间就是时间，不分里面外面，都很值钱。

-

人是心理动物，孤单和寂寞都是可以调控的。要想在孤单的环境里做到不寂寞，那是一种境界。物质上的满足随风即逝，心里的坚毅却牢不可摧。我希望你能一直有个向上积极的心态，找到自己在囹圄里的意义。

-

生命里任何的事物发生，或者说没有意义，或者说有意义，完全取决于解读的当事人。若你解读成有意义，那么一切都可为你所用，推进你直到完结人生。生命本身是否有意义，则是另一个饶有趣味的话题。你可以选择有意义，也可以选择没有意义。若为前者，那么你能获得精神上的寄托，你会有精神上的渴望，这种渴望是甚难腐朽的，像一壶水，常取常新，源源不断，让你保持心灵的满足，这样既得一种快乐； 若是后者，你则会转向物质上的索取和欲望，所谓花花世界，他们是“世俗”的刺激。你从中获得的快乐稍纵即逝，而倘若你这次得到了满足，你愈加会越不知足，索取的贪念越来越大，若是不加羁绊，则不知其终，祸害无穷。

-

精神上的空虚，甚至停滞不前，对人造成的损害是巨大的。心中无源，有身也为死水。我常常听说很多大人，或爱好书法，或爱好旅游，或爱好电子产品，都是有一种让人心旷神怡的精神追求。而谈到你，我则往往会说，他的爱好，“都是牌乐麻将罢”。外人或许会流露出对这种生活的羡慕，我却担心其中暗藏的腐朽。这腐朽不是政治上的腐朽，是精神上的腐朽。精神上的腐朽，消磨人的意志，愚钝人的体能。人的一生，就是参悟人生本身的历程，而你们半途而废。对照年轻时的气宇轩昂，这十几年来你的内心，可能都让自己羞颜。不论你过去的功劳多大，生命从来，就没有一个可以让人放松休息，坐享其成的年代。学习如逆水行舟，不进则退；生命更甚，不进则亡。倘若这样看似闲适、自由的享受生活继续下去，精神上的颓废，心泉的枯萎，完完全全成为世俗的奴隶，最后被他的刽子手亲自摧毁，也是料想之中，理所之当然。

-

因此这样一个打击，或者说变故，来的是必然。是给你一个机会去反思，去想想生命本身，去想想自己的快乐，幸福，平静，安详，究竟来自何方。是来自权利，物质，其他人，还是自己纯净的精神。它来的不早，它来的反而迟了，就好像地震，小的地震没能释放能量，积聚多年，最后而来的就是毁灭性的大震。

-

你吃了很多苦。我们很心疼，但我觉得不必过于忧心。人都是适应性极强的动物，你能慢慢适应。通俗点说，潮涨潮落，风水轮流转，人生总有起伏，能适应优越，难道就不能适应艰苦？从精神的条件来说，外在的物质条件都是次要的，暂时的，从属的，你若能有一颗抵制纵欲，清新向上的精神，你就能克服所谓困难，生机不断。

-

对于将来的安排，我也听说了。至于是悲观还是乐观，我觉得完全取决于人。多少伟人的家中没有变故，多少伟大的民族没有经历过磨难？变故，磨难，失败，都是由自己的精神上的松懈引至的。因闭关锁国，盲目自大，中国几近灭国；但终究没灭，而痛改前非，现在又是生机勃勃。你们错在不能居安思危，错在放纵自己的物欲，错在侥幸懈怠，错在放弃了人生和精神上孜孜不倦的追求。因此招致祸变，是生命给你的警钟，他对你们提出改变的要求。

-

人的生命有长短，生命不是靠长短来衡量，更不是靠在有限生命中的物质，而应当靠你的精神境界来衡量。我有个很好的同学，数年前在美国车祸去世了。他的好有口皆碑，虽然他的生命短暂，但他能永远活在我们心中。追求精神，追求那些永恒的东西，比追求这些世俗，昙花一现的东西有效，划算的多。古人早就看破这一点，因此他们才有严于律己，宽于待人的谚俗，因此他们才有手留余香的想象，因此他们才有修身齐家治国平天下的理想。

-

这种理想，我想你肯定有过。但伴随着你事业的上升，你没能坚持。你侥幸的认为生命会放过你的怠慢，但她已经用生动的一课告诉了你：这不是运气，也不是你的倒霉，每个人都一样。家家有一本难念的经，每个人的光环背后都有痛楚，而只要那些真正有精神寄托和追求的人，才能笑到最后。

-

因此你受难的时间长短，真的不重要。何时能结束，也不重要。重要的事你有没有用这同等重要的时间，去想那些更加重要的事。我们以后还有很多时间，我也希望能收到你的回信，继续谈一些将来，而不是责备的话题。但我想这样的责备是必要的，是我的责任。有责改之，无则加勉。这不但是写给你的，也是写给我自己的，我们都要共同加勉。我现在的生活很好，倘若我真有此信中所写如此的觉悟，我想我也可以让你放心。

-

最后祝，新年快乐

1
曾博 2011年1月9日，于美国

-

你=未来，Best Boy of China

- -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + BBOC | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

BBOC + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +
+

BBOC=Best Boy Of China。

+

这篇文章是曾博在2011年刚去美国写的。

+

当年，他还是BBOC，还会浪漫的给自己写信，

+
+ +

我想简短的问问你，身体还好么，这么长的时间，空下来的时候都干些什么呢，有没有读到很有感触的书，有没有想到一些提笔要写的事？时间就是时间，不分里面外面，都很值钱。

+

人是心理动物，孤单和寂寞都是可以调控的。要想在孤单的环境里做到不寂寞，那是一种境界。物质上的满足随风即逝，心里的坚毅却牢不可摧。我希望你能一直有个向上积极的心态，找到自己在囹圄里的意义。

+

生命里任何的事物发生，或者说没有意义，或者说有意义，完全取决于解读的当事人。若你解读成有意义，那么一切都可为你所用，推进你直到完结人生。生命本身是否有意义，则是另一个饶有趣味的话题。你可以选择有意义，也可以选择没有意义。若为前者，那么你能获得精神上的寄托，你会有精神上的渴望，这种渴望是甚难腐朽的，像一壶水，常取常新，源源不断，让你保持心灵的满足，这样既得一种快乐； 若是后者，你则会转向物质上的索取和欲望，所谓花花世界，他们是“世俗”的刺激。你从中获得的快乐稍纵即逝，而倘若你这次得到了满足，你愈加会越不知足，索取的贪念越来越大，若是不加羁绊，则不知其终，祸害无穷。

+

精神上的空虚，甚至停滞不前，对人造成的损害是巨大的。心中无源，有身也为死水。我常常听说很多大人，或爱好书法，或爱好旅游，或爱好电子产品，都是有一种让人心旷神怡的精神追求。而谈到你，我则往往会说，他的爱好，“都是牌乐麻将罢”。外人或许会流露出对这种生活的羡慕，我却担心其中暗藏的腐朽。这腐朽不是政治上的腐朽，是精神上的腐朽。精神上的腐朽，消磨人的意志，愚钝人的体能。人的一生，就是参悟人生本身的历程，而你们半途而废。对照年轻时的气宇轩昂，这十几年来你的内心，可能都让自己羞颜。不论你过去的功劳多大，生命从来，就没有一个可以让人放松休息，坐享其成的年代。学习如逆水行舟，不进则退；生命更甚，不进则亡。倘若这样看似闲适、自由的享受生活继续下去，精神上的颓废，心泉的枯萎，完完全全成为世俗的奴隶，最后被他的刽子手亲自摧毁，也是料想之中，理所之当然。

+

因此这样一个打击，或者说变故，来的是必然。是给你一个机会去反思，去想想生命本身，去想想自己的快乐，幸福，平静，安详，究竟来自何方。是来自权利，物质，其他人，还是自己纯净的精神。它来的不早，它来的反而迟了，就好像地震，小的地震没能释放能量，积聚多年，最后而来的就是毁灭性的大震。

+

你吃了很多苦。我们很心疼，但我觉得不必过于忧心。人都是适应性极强的动物，你能慢慢适应。通俗点说，潮涨潮落，风水轮流转，人生总有起伏，能适应优越，难道就不能适应艰苦？从精神的条件来说，外在的物质条件都是次要的，暂时的，从属的，你若能有一颗抵制纵欲，清新向上的精神，你就能克服所谓困难，生机不断。

+

对于将来的安排，我也听说了。至于是悲观还是乐观，我觉得完全取决于人。多少伟人的家中没有变故，多少伟大的民族没有经历过磨难？变故，磨难，失败，都是由自己的精神上的松懈引至的。因闭关锁国，盲目自大，中国几近灭国；但终究没灭，而痛改前非，现在又是生机勃勃。你们错在不能居安思危，错在放纵自己的物欲，错在侥幸懈怠，错在放弃了人生和精神上孜孜不倦的追求。因此招致祸变，是生命给你的警钟，他对你们提出改变的要求。

+

人的生命有长短，生命不是靠长短来衡量，更不是靠在有限生命中的物质，而应当靠你的精神境界来衡量。我有个很好的同学，数年前在美国车祸去世了。他的好有口皆碑，虽然他的生命短暂，但他能永远活在我们心中。追求精神，追求那些永恒的东西，比追求这些世俗，昙花一现的东西有效，划算的多。古人早就看破这一点，因此他们才有严于律己，宽于待人的谚俗，因此他们才有手留余香的想象，因此他们才有修身齐家治国平天下的理想。

+

这种理想，我想你肯定有过。但伴随着你事业的上升，你没能坚持。你侥幸的认为生命会放过你的怠慢，但她已经用生动的一课告诉了你：这不是运气，也不是你的倒霉，每个人都一样。家家有一本难念的经，每个人的光环背后都有痛楚，而只要那些真正有精神寄托和追求的人，才能笑到最后。

+

因此你受难的时间长短，真的不重要。何时能结束，也不重要。重要的事你有没有用这同等重要的时间，去想那些更加重要的事。我们以后还有很多时间，我也希望能收到你的回信，继续谈一些将来，而不是责备的话题。但我想这样的责备是必要的，是我的责任。有责改之，无则加勉。这不但是写给你的，也是写给我自己的，我们都要共同加勉。我现在的生活很好，倘若我真有此信中所写如此的觉悟，我想我也可以让你放心。

+

最后祝，新年快乐

1
曾博 2011年1月9日，于美国

+

你=未来，Best Boy of China

+
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/2018/02/22/\345\274\200\345\220\257 Deepin/index.html" "b/2018/02/22/\345\274\200\345\220\257 Deepin/index.html" index 1ef871be..2d08926c 100644 --- "a/2018/02/22/\345\274\200\345\220\257 Deepin/index.html" +++ "b/2018/02/22/\345\274\200\345\220\257 Deepin/index.html" @@ -1,888 +1,534 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 开启 deepin | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

开启 deepin - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

Linux 这个系统从平常角度来看总有一种高大上的感觉，但是你放下脚步去了解你会发现他也很平常并非高高在上。Deepin 系统也非常的适合国人使用，也非常漂亮，个人觉得比 Ubuntu 好使好看。安装双系统简直是无脑安装真的好。官网的教程很详尽了就自己看吧。

-

- -

系统的快捷键都能在设置中找到很方便

-

-

vim

说道 Linux 就不得不提的神之编辑器 vim 把自带教程 vimtotur 看一遍就可以简单使用了

- -

zsh

更好用 shell，当然 Bash 也是不错。

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 开启 deepin | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

开启 deepin + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

Linux 这个系统从平常角度来看总有一种高大上的感觉，但是你放下脚步去了解你会发现他也很平常并非高高在上。Deepin 系统也非常的适合国人使用，也非常漂亮，个人觉得比 Ubuntu 好使好看。安装双系统简直是无脑安装真的好。官网的教程很详尽了就自己看吧。

+

+ +

系统的快捷键都能在设置中找到很方便

+

+

vim

说道 Linux 就不得不提的神之编辑器 vim 把自带教程 vimtotur 看一遍就可以简单使用了

+ +

zsh

更好用 shell，当然 Bash 也是不错。

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2018/03/02/nav/index.html b/2018/03/02/nav/index.html index db9abae5..0ad3e7b3 100644 --- a/2018/03/02/nav/index.html +++ b/2018/03/02/nav/index.html @@ -1,905 +1,562 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 一个导航网站 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

一个导航网站 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

由简单无门槛 js 实现一个触发按键跳转网页的导航网站，效果预览

-

- -

数据结构

我们都知道工欲善其事，必先利其器，所以选择好数据结构再来进行编程是很有必要的。由于是一个键盘按键对应一个网站，我们很快就会想到 key:value 所以我用对象来存储。

-
1
2
3
4
5
6
7
8
9
10
11
12
hash = {
    q: 'qq.com', 
    w: 'w3cplus.com', 
    e: 'edx.org.com', 
    t: 'cloud.tencent.com', 
    a: 'alloyteam.com', 
    y: 'youtube.com', 
    i: 'iconfont.cn', 
    o: 'opera.com', 
    z: 'zhangxinxu.com', 
  //...
}
-

生成键盘

想到键盘比较多，我就没有写键盘的 HTML 而是改用 JS 自动生成，把要用的三排键想成三个数组存储，可以用对象也可以是二维数组。

-
1
2
3
4
5
6
var keys = {
    0: ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p',],
    1: ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l',],
    2: ['z', 'x', 'c', 'v', 'b', 'n', 'm',],
    length: 3,
}
-

根据获取到的 keys[][] 的字母来显示键值，遍历该对象进行键盘生成

- -
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function creatButton(id) {
    var oBtn = tag('button')
    oBtn.id = id
    oBtn.textContent = 'E'
    oBtn.onclick = function (e) {
      //修该键盘的对应网址
    }
    return oBtn
}
function generateKeyboard(keys, hash) {
    for (var i = 0; i < keys.length; i++) {
        var oDiv = tag('div')
        document.getElementById('main').appendChild(oDiv)
        for (var j = 0; j < keys[i].length; j++) {
            var oKbd = tag('kbd')
            var oBtn = creatButton(keys[i][j])
            var oImg = createImage(hash[keys[i][j]])
            oKbd.textContent = keys[i][j]
            oKbd.className = 'key'
            oDiv.appendChild(oKbd)
            oKbd.appendChild(oImg)
            oKbd.appendChild(oBtn)
        }
    }
}
-

监听键盘

其实实现该项目最主要的其实就是监听用户按下的键盘，需要做一下监听的范围是 document ，然后就打开相应的网站，不太懂可以先 console.log(e) 可以看一下控制台。

- -
1
2
3
4
5
6
7
8
9
document.onkeypress = function (e) {
    website = hash[e.key]
    //location.href = 'https://' + website
    if (website) {
        window.open('http://' + website, '_blank')
    } else {
        alert('亲， 你还没有编辑呢')
    }
}
-

存储用户的改变

用户可以对其的键盘进行网站的改变，也就是对 hash 进行修改，而我们需要对其修改进行保存以防丢失

- -
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
oBtn.onclick = function (e) {
    value = prompt('你想用 ' + (e.target.id) + ' 代表的网址:')
    hash[e.target.id] = value
    if (value != null) {
        setLocalStorage('myWebsite')
        e.target.previousSibling.src = 'http://' + value + '/favicon.ico'
        e.target.previousSibling.onerror = function (e) {
            e.target.src = './favicon.ico'
        }
    }
}
function getLocalStorage(e) {
    return JSON.parse(localStorage.getItem(e || 'null'))
}
function setLocalStorage(e) {
    return localStorage.setItem(e, JSON.stringify(hash))
}
-

###

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 一个导航网站 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

一个导航网站 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

由简单无门槛 js 实现一个触发按键跳转网页的导航网站，效果预览

+

+ +

数据结构

我们都知道工欲善其事，必先利其器，所以选择好数据结构再来进行编程是很有必要的。由于是一个键盘按键对应一个网站，我们很快就会想到 key:value 所以我用对象来存储。

+
1
2
3
4
5
6
7
8
9
10
11
12
hash = {
    q: 'qq.com', 
    w: 'w3cplus.com', 
    e: 'edx.org.com', 
    t: 'cloud.tencent.com', 
    a: 'alloyteam.com', 
    y: 'youtube.com', 
    i: 'iconfont.cn', 
    o: 'opera.com', 
    z: 'zhangxinxu.com', 
  //...
}
+

生成键盘

想到键盘比较多，我就没有写键盘的 HTML 而是改用 JS 自动生成，把要用的三排键想成三个数组存储，可以用对象也可以是二维数组。

+
1
2
3
4
5
6
var keys = {
    0: ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p',],
    1: ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l',],
    2: ['z', 'x', 'c', 'v', 'b', 'n', 'm',],
    length: 3,
}
+

根据获取到的 keys[][] 的字母来显示键值，遍历该对象进行键盘生成

+ +
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function creatButton(id) {
    var oBtn = tag('button')
    oBtn.id = id
    oBtn.textContent = 'E'

    oBtn.onclick = function (e) {
      //修该键盘的对应网址
    }
    return oBtn
}

function generateKeyboard(keys, hash) {
    for (var i = 0; i < keys.length; i++) {
        var oDiv = tag('div')
        document.getElementById('main').appendChild(oDiv)

        for (var j = 0; j < keys[i].length; j++) {
            var oKbd = tag('kbd')
            var oBtn = creatButton(keys[i][j])
            var oImg = createImage(hash[keys[i][j]])

            oKbd.textContent = keys[i][j]
            oKbd.className = 'key'

            oDiv.appendChild(oKbd)
            oKbd.appendChild(oImg)
            oKbd.appendChild(oBtn)

        }
    }
}
+

监听键盘

其实实现该项目最主要的其实就是监听用户按下的键盘，需要做一下监听的范围是 document ，然后就打开相应的网站，不太懂可以先 console.log(e) 可以看一下控制台。

+ +
1
2
3
4
5
6
7
8
9
document.onkeypress = function (e) {
    website = hash[e.key]
    //location.href = 'https://' + website
    if (website) {
        window.open('http://' + website, '_blank')
    } else {
        alert('亲， 你还没有编辑呢')
    }
}
+

存储用户的改变

用户可以对其的键盘进行网站的改变，也就是对 hash 进行修改，而我们需要对其修改进行保存以防丢失

+ +
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
oBtn.onclick = function (e) {
    value = prompt('你想用 ' + (e.target.id) + ' 代表的网址:')
    hash[e.target.id] = value
    if (value != null) {
        setLocalStorage('myWebsite')
        e.target.previousSibling.src = 'http://' + value + '/favicon.ico'
        e.target.previousSibling.onerror = function (e) {
            e.target.src = './favicon.ico'
        }
    }
}

function getLocalStorage(e) {
    return JSON.parse(localStorage.getItem(e || 'null'))
}

function setLocalStorage(e) {
    return localStorage.setItem(e, JSON.stringify(hash))
}
+

###

+ +
+ + + + + + +
+
+ + +
+ + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2018/03/05/JSdata/index.html b/2018/03/05/JSdata/index.html new file mode 100644 index 00000000..103b2e92 --- /dev/null +++ b/2018/03/05/JSdata/index.html @@ -0,0 +1,577 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 浅谈 JS 数据 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

浅谈 JS 数据 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

JS 中数据类型有七种　number null undefined string boolean object symbol(es6) 今天就来看看他们的一些平常会用到的东西

+

JavaScript 历史

+
+ +

这七种不包括 Array Funtion 这两种其实就是　object

+

注意事项

#####１．number

+
    +
  • 八进制: 011 (es5新增　0o11　语法)
    • +
+
２．string
    +

  • 多行代码

    +
    1
    2
    3
    4
    5
    6
    7
    8
     var s = '12345' +
                 '67890' // 无回车符号
     或
     var s = `12345
     67890` // 含回车符号
     //其实还可以但不推荐,因为若在\后面有' '就会报错且不易发现
     var longString = 'Long \
    string';
    +
    • +
+
３．undefined 与 null

就连 JS 之父都说这是他当初没有设计好的地方

+

不过一般情况下会对一个未赋值的对象，就用 null

+

对于不是对象的数据类型没有赋值，就是 undefined

+

typeof 操作符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
typeof String
//"function"
typeof 'hello'
//"string"
typeof 1
//"number"
typeof true
//"boolean"
typeof {}
//"object"
typeof null
//"object"
var a = null
//undefined
typeof a
//"object"
var b = Symbol()
//undefined
typeof b
//"symbol"
+

需要注意的就是 null 和 function, function并不是一个类型

+

数据转换

可以说在 code 的世界中有很大一部分的事情就是在将数据的格式进行转换

+
任意类型转 String

有三种 String() .toString() 与最方便的 ''+1/true...

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
String(1)
//"1"
String({})
//"[object Object]"
String({
key: '99',
})
//"[object Object]"
(1).toString()
//"1"
1 + ''
//"1"
null + ''
//"null"
undefined + ''
//"undefined"
+

需要注意的是 null/undefined 是没有 toString() 方法的，会报错

+
任意类型转数字
    +
  1. Number(x)
    2. +
  2. parseInt(x, 10) MDN
    3. +
  3. parseFloat(x) MDN
    4. +
  4. x - 0
    5. +
  5. +x
    6. +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var a = '1'
//undefined
Number(a)
//1
parseInt(a)
//1
parseInt(a, 10)
//1
parseFloat(a)
//1
a - 0
//1
+a
//1
+
任意类型转布尔
    +
  1. Boolean(x)
    2. +
  2. !!x
    3. +
  3. 五个 Falsy 值nul undefined NaN '' 0
    4. +
+

面试题

1
2
3
4
var a = 1
var b = a
b = 2
请问 a 显示是几？
+
1
2
3
4
var a = {name: 'a'}
var b = a
b = {name: 'b'}
请问现在 a.name 是多少？
+
1
2
3
4
var a = {name: 'a'}
var b = a
b.name = 'b'
请问现在 a.name 是多少？
+
1
2
3
4
var a = {name: 'a'}
var b = a
b = null
请问现在 a 是什么？
+

主要是画内存图，分清楚 Heap 和 Stack ，像复杂类型一般都是放到 Stack中的比如对象。

+

垃圾回收

JavaScript 的 gc 个人觉得与Java 是很像的，至少表面上看都是当不被引用的时候就会被当做垃圾然后就会等待垃圾车的到来。

+

深复制与浅复制

这是一个浅拷贝的例子

+
1
2
3
4
var a = {name: 'frank'}
var b = a
b.name = 'b'
a.name === 'b' // true
+

因为我们对 b 操作后，a 也变了

+

什么是深拷贝了，就是对 Heap 内存进行完全的拷贝。

+
1
2
3
4
var a = {name: 'frank'}
var b = deepClone(a) // deepClone 还不知道怎么实现
b.name = 'b'
a.name === 'a' // true
+
+ + + + + + +
+
+ + +
+ + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2018/03/05/JSobject/index.html b/2018/03/05/JSobject/index.html new file mode 100644 index 00000000..c99089cf --- /dev/null +++ b/2018/03/05/JSobject/index.html @@ -0,0 +1,578 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + JS　里面的对象 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

JS　里面的对象 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

全局对象 window

ECMAScript 规定全局对象叫做 global，但是浏览器把 window 作为全局对象（浏览器先存在的）

+

window 就是一个哈希表，有很多属性。

+ +

window 的属性就是全局变量。

+

这些全局变量分为两种：

+
    +
  1. 一种是 ECMAScript 规定的
      +
    • global.parseInt
      • +
    • global.parseFloat
      • +
    • global.Number
      • +
    • global.String
      • +
    • global.Boolean
      • +
    • global.Object
      • +
    +
    2. +
  2. 一种是浏览器自己加的属性
      +
    • window.alert
      • +
    • window.prompt
      • +
    • window.comfirm
      • +
    • window.console.log
      • +
    • window.console.dir
      • +
    • window.document
      • +
    • window.document.createElement
      • +
    • window.document.getElementById
      • +
    +
    3. +
+

所有 API 都可以在 MDN 里找到详细的资料。

+

今天我们学习第一种全局变量。

+

全局函数

    +

  1. Number
    var n = new Number(1) 创建一个 Number 对象
    1 与 new Number(1) 的区别是什么？

    +
    1
    2
    3
    var n = 2
    var n.xxx = 2
    console.log(n.xxx)//undefined
    +
    2. +

  2. String
    var s = new String(‘hello’) 创建一个 String 对象
    ‘hello’ 与 new String(‘hello’) 的区别是什么？看内存图

    +
    3. +

  3. Boolean
    var b = new Boolean(true) 创建一个 Boolean 对象
    true 与 new Boolean(true) 的区别是什么？看内存图

    +
    1
    2
    3
    4
    var f1 = false
    var f2 = new Boolean(false)
    if(f1){console.log(f1)}
    if(f2){console.log(f2)}//f2
    +
    4. +

  4. Object
    var o1 = {}
    var o2 = new Object()
    o1 和 o2 没区别

    +
    5. +
+

公用的属性藏在哪

所有对象都有 toString 和 valueOf 属性，那么我们是否有必要给每个对象一个 toString 和 valueOf 呢？

+

明显不需要。

+

JS 的做法是把 toString 和 valueOf 放在一个对象里（暂且叫做公用属性组成的对象）

+

然后让每一个对象的 __proto__ 存储这个「公用属性组成的对象」的地址。

+ +
+ + + + + + +
+
+ + +
+ + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/2018/03/05/JavaScript-\345\216\237\345\236\213\351\223\276/index.html" "b/2018/03/05/JavaScript-\345\216\237\345\236\213\351\223\276/index.html" new file mode 100644 index 00000000..74c510e0 --- /dev/null +++ "b/2018/03/05/JavaScript-\345\216\237\345\236\213\351\223\276/index.html" @@ -0,0 +1,529 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + JavaScript 原型链 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

JavaScript 原型链 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +


+
1
2
3
4
5
6
7
8
9
10
11
12
13
function Person(name){
  this.name = name
}

Person.prototype.say = 'fuck prototype'

var one = new Person('小三')
var two = new Person('小吴')

one.name
one.say
two.name
two.say
+

看图可知

+
1
2
3
4
5
6
7
8
9
10
one.__proto__ === Person.prototype
Person.prototype.__proto__ === Object.prototype

Person.__proto__ === Function.prototype
Function.__proto__ === Function.prototype
Object.__proto__ === Function.prototype

Function.prototype.__proto__ === Object.prototype

Object.prototype.__proto__ === null
+

总结

+
    +
  • 当 new 一个函数的时候会创建一个对象，被创建对象.__proto__ === 函数.prototype
    • +
  • 一切函数都是由 Function 这个函数创建的，被创建函数.__proto__ === Function.prototype
    • +
  • 一切函数的原型对象都是由 Object 这个函数创建的，Object.prototype === 一切函数.prototype.__proto__
    • +
+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2018/03/11/JavaScript_1/index.html b/2018/03/11/JavaScript_1/index.html deleted file mode 100644 index c3f8ca79..00000000 --- a/2018/03/11/JavaScript_1/index.html +++ /dev/null @@ -1,875 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 初探 JavaScript 魅力 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

初探 JavaScript 魅力 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

1. 什么是 JavaScript

使页面能与用户进行交互

-

2. 实现一个例如在是否选择记住密码的时候鼠标移入与移出时的一个 div 的显示与隐藏。

-

需要：

-

鼠标的移入移出(onmouseover, onmouseout)

-

显示隐藏(display: block, none)

-

注意: 我个人的错误代码

1
document.getElementById('div1').style.display = block;

-

此时在浏览器运行会报错，因为浏览器会将 block 看为一个变量而不是字面量，若想将其看成字面量需要在其左右加上 ‘’ 就能解决问题。
用代码解释字面量与变量

1
2
3
4
var num = '123';//num为变量
alert(123);//报错，未定义变量
alert('123');//这里的123就是字面量，提示123
alert(num);//提示123

-

3. 初识函数与变量

变量就好似尚方宝剑代表着皇帝

1
2
3
4
//函数
function function_name(argument){
    //body…
}

-

使用函数的好处就是当发现有大量代码的重用进行观察并组合，同时有不同参数进行传参解决就好

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// oB1.onclick = function toY() {
// 	// body...
// 	oDiv.style.background = "yellow";
// }
// oB2.onclick = function toG() {
// 	// body...
// 	oDiv.style.background = "green";
// }
// oB3.onclick = function toB() {
// 	// body...
// 	oDiv.style.background = "Black";
// }
//长得像，进行观察，进行合并，便于重用，少写代码		---->		函数传参
function setColor(color){
	oDiv.style.background = color;
}

-

4. 实现页面换肤

思路: 用多个 CSS 实现换肤

-

总结: id 可以加在任何标签，甚至能改变 href。HTML 中如何写 JavaScript 就如何写。但有唯一一个例外就是 class 需要写成 className，因为 class 是 JavaScript 中的关键字

-

5. 考虑优先级问题

在用 .style 修改样式我们检查元素可知道不论是获取还是修改都是在操作行间样式。但是写代码会有时修改了 .style 又修改 .className 这时我们可能在两个中有修改了 background 那么 class 的优先级小于 style，但是很有可能我们并不会注意这一点所以建议只使用其中一种，避免 bug 的出现。
参考demo9

-

6. 获取一组元素 getElementsByTagName 实现对一组 div 进行颜色的改变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var aDiv = document.getElementsByTagName('div')
//alert(aDiv.length);
   //aDiv.style.background = 'green';错误的 不会改变颜色
//由于是数组需要遍历来修改样式
for(var i = 0; i < aDiv.length; i++){
	aDiv[i].style.background = 'green';
}
// var j = 0;
// while(j < aDiv.length){
// 	aDiv[j].style.background = 'green';
   // 	j++;
// }
-

7. 用 this 及 index(索引值) 解决问题

1
2
3
4
5
6
7
8
9
10
11
for (var i = 0; i < aBtn.length; i++) {
	aBtn[i].flag = i;//记录当前i
	aBtn[i].onclick = function (){
		for (var i = 0; i < aBtn.length; i++){
			aBtn[i].className = '';
			aDiv[i].style.display = 'none';
		}
		this.className = 'active';
		aDiv[this.flag].style.display = 'block';
	}
}
-
- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/2018/03/11/JavaScript_2/index.html b/2018/03/11/JavaScript_2/index.html deleted file mode 100644 index 353856e5..00000000 --- a/2018/03/11/JavaScript_2/index.html +++ /dev/null @@ -1,876 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - JavaScript 基础 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

JavaScript 基础 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

JavaScript 组成

ECMAScript: 翻译 解释器 ——> 几乎没有兼容问题

-

BOM ——> 没有兼容问题（完全不兼容）

-

DOM ——> 几乎没有兼容问题

- -

变量的类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var a = 12;
alert(typeof a);	//number
a = '123';
alert(typeof a);	//string
a = true;
alert(typeof a);	//blooean
a = function ();
alert(typeof a);	//function
a = document;
alert(typeof a);	//object
var b;
alert(typeof b);	//undefined
//1.真的未定义
//2.定义了，但是是空的
-

可以看出 JavaScript 很灵活
建议：一个变量应该只存放一种类型的数据

-

类型转换

实现：求和功能
需要：强制类型转换：parseInt() –> 转换整数 parseFloat() –> 转换浮点数

1
2
3
4
5
6
7
//parseInt('12abc');	//12
//parseInt('12abc12');	//12
//parseInt('abc');	//NaN
//parseInt('zxc');	//NaN
//parseInt('abc') == parseInt('zxc');	//flase	NaN 和 NaN 是否相等
//isNaN(parseInt('abc'));	//true
//parseInt(12) + parseInt('abc');	//NaN

-

隐式类型转换

1
2
3
4
5
6
7
8
9
var a = 5;
var b = '5';
alert(a == b);	//true	先转换在比较
alert(a === b);	//false	不转换就比较
var a = '12';
var b = '6';
alert(a + b);	//126	1.字符串连接	2.求和（转换在加）	先简后繁
alert(a - b);	//6	1.数字相减

-

变量的作用域及闭包

局部变量 全局变量
闭包的初步理解

1
2
3
4
5
6
7
8
9
10
//子函数用到了父函数的变量
function aaa(){//父函数
  var a = 12;
  
  function bbb(){//子函数
    alert(a);
  }
  
  bbb();
}

-

命名规范

可读性 规范性
匈牙利命名法
–> 类型前缀 a(Array) b(boolean) fn(function) re(RegExp)…
–> 首字母大写

-

运算符

取模 实现：隔行变色 秒转时间

1
2
3
var s = 180;
alert(parseInt(s/60)+'m '+parseInt(s%60)+'s');

-

流程控制

三元运算符 ?:
break 中断 continue 继续（中断当前）
真： true 非零 非空 document
假： undefined

-

Json

1
2
3
4
5
6
7
8
var json ={a: 12, b: 8, c: 7}
alert(json['a']);	//12
alert(json.a);	//12
alert(json.length);	//undefined
for (var i in json){
	alert(json[i]);//12 8 7
}
-

循环：

-

数组 –> 正常循环

-

Json –> for in

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/2018/03/11/JavaScript_3/index.html b/2018/03/11/JavaScript_3/index.html deleted file mode 100644 index 0664b52c..00000000 --- a/2018/03/11/JavaScript_3/index.html +++ /dev/null @@ -1,926 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 深入 JavaScript | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

深入 JavaScript - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

函数返回值

函数返回值

-

什么是函数返回值

-

函数的执行结果

-

可以没有return

-

一个函数应该只返回一种类型的值

- -

函数传参

    -
  • 可变参（不定参）：arguments
    • -
-

参数的个数可变，参数数组

-

例子1：求和

-
1
2
3
4
5
6
7
8
9
10
11
function sum(){
		var num = 0;
		for(var i = 0; i < arguments.length; i++){
			num += arguments[i];
		}
		return num;
	}
	alert(sum(1, 9, 8, 9));
-

求所有参数的和

-

例子2：CSS函数

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function css(obj, name, value){
	if(arguments.length == 2)
	{
		return obj.style[name];
	}else{
	obj.style[name] = value;
	}
}
window.onload = function (){
	var oDiv = document.getElementById('div1');
	alert(css(oDiv, 'width'));
	css(oDiv, 'background', 'green');
}
-

判断arguments.length

-

给参数取名，增强可读性

-
    -
  • 取非行间样式(不能用来设置)：
    • -
-

初探 JavaScript 魅力我们就知道 style 只能获取行间样式

-

obj.currentStyle[attr] //但许多不兼容 firefox

-

getComputedStyle(obj,false)[attr]

-
1
2
3
4
5
6
7
8
9
window.onload = function () {
	var oDiv = document.getElementById('div1');
	
	if(oDiv.currentStyle){//IE
		alert(oDiv.currentStyle.width);
	}else{//ff chrome
		alert(getComputedStyle(oDiv,false).width);
	}
}
-

复合样式：background，boder

-

单一样式：width

-

getComputedStyle 只能取单一样式

-

数组基础

数组的使用

-

定义

-

var arr=[12, 5, 8, 9];

-

var arr=new Array(12, 5, 8, 9);

-

没有任何差别，[]的性能略高，因为代码短

-

数组的属性

-

length

-

既可以获取，又可以设置

-

例子：快速清空数组

-
1
2
3
var arr = [1, 2, 4, 5];
arr.length = 0;
-

数组使用原则：数组中应该只存一种类型的变量

-

添加、删除元素

数组的方法

-

添加

-

push(元素)，从尾部添加

-

unshift(元素)，从头部添加

-

删除

-

pop()，从尾部弹出

-

shift()，从头部弹出

-

插入、删除

splice

-
1
2
3
4
5
6
var arr = [1, 2, 3, 4, 5, 6]
arr.splice(2, 3);	//1, 2, 6
arr.splice(2, 0);	//1, 2, 3, 4, 5, 6
arr.splice(2, 0, 'a');	//1, 2, a, 4, 5, 6
arr.splice(2, 1, 'a');	//1, 2, a, 5, 6
-

splice(开始, 长度,元素…)

-

先删除，后插入

-

删除

-

splice(开始,长度)

-

插入

-

splice(开始, 0, 元素…)

-

替换

-

排序、转换

排序

1
2
3
4
5
6
7
8
9
10
// var arr = ['as', 'wer', 'oui']
// alert(arr.sort());	//as,oui,wer
var arr = [1, 11, 98, 65, 5, 6];
//alert(arr.sort());	//1,11,5,6,65,98 比较的字符串
alert(arr.sort(function (n1, n2) {
	return n1 -n2;
}));

-

sort([比较函数])，排序一个数组

-

排序一个字符串数组

-

排序一个数字数组

-

转换类

-

concat(数组2)

-
1
2
3
4
var a =[1, 2, 3];
var b =[1, 2, 3];
alert(a.concat(b));	//1, 2, 3, 1, 2, 3
-

连接两个数组

-

join(分隔符)

-
1
2
3
var a =[1, 2, 3];
alert(a.join('-'));	//1-2-3
-

用分隔符，组合数组元素，生成字符串

-

字符串split

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/2018/03/11/JavaScript_4/index.html b/2018/03/11/JavaScript_4/index.html deleted file mode 100644 index c04016a4..00000000 --- a/2018/03/11/JavaScript_4/index.html +++ /dev/null @@ -1,896 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 定时器的使用 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

定时器的使用 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

开启定时器

setInterval 间隔型
setTimeout 延时型
两种定时器的区别

- -

停止定时器

clearInterval
clearTimeout

-

数码时钟

获取系统时间

-

Date对象

-

getHours、getMinutes、getSeconds

-

年 getFullYear() 月 getMonth() 日 getDate() 星期 getDay()

-

显示系统时间

-

字符串连接

-

空位补零

-

设置图片路径

-

charAt 方法（兼容问题）

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function toD(time){//空位补零
			if(time < 10)
			{
				time = '0'+time;
			}else{
				time = ''+ time;
			}
			return time;//忘记return
		}
		window.onload = function (){
			var aImg = document.getElementsByTagName('img');			
			function timer(){
				var oD = new Date;
				var str = toD(oD.getHours()) + toD(oD.getMinutes()) + toD(oD.getSeconds());
				for(var i = 0; i < aImg.length; i++){
					//aImg[i].src = "img/"+str[i]+".png";	低版本 IE7 不支持
					aImg[i].src = "img/"+str.charAt(i)+".png";
				}
			}
			timer();
			setInterval(timer, 1000);
		}
-

延时提示框

移入显示，移出隐藏

-

移出延时隐藏

-

简化代码

-

合并两个相同的 mouseover 和 mouseout

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
window,onload = function (){
			var oDiv1 = document.getElementById('div1');
			var oDiv2 = document.getElementById('div2');
			var timer = null;
			oDiv1.onmouseover = oDiv2.onmouseover = function () {
				clearTimeout(timer);
				oDiv2.style.display = 'block';
			}
			oDiv1.onmouseout = oDiv2.onmouseout = function () {
				timer = setTimeout(function(){
					oDiv2.style.display = 'none';
				},500);
			}
		}
-

无缝滚动

效果演示

-

物体运动基础

-

让 Div 移动起来

-

offsetLeft / offsetRight / offsetWidth 的作用

-

用定时器让物体连续移动

-

让 ul 一直向左移动

-

复制 li

-

innerHTML 和+=

-

修改 ul 的 width

-

滚动过界后，重设位置

-

判断过界

-

改变滚动方向

-

修改 speed

-

修改判断条件

-

鼠标移入暂停

-

移入关闭定时器

-

移出重新开启定时器

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
window.onload = function (){
	var oDiv = document.getElementById('div1');
	var oUl = oDiv.getElementsByTagName('ul')[0];
	var oBtn1 = document.getElementById('btn1');
	var oBtn2 = document.getElementById('btn2');
	var aLi = oUl.getElementsByTagName('li');
	var speed = 2;
	oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
	oUl.style.width = aLi.length * aLi[0].offsetWidth +'px';
	function move(){
		if(oUl.offsetLeft <  -oUl.offsetWidth/2){
			oUl.style.left = 0 +'px';
		}
		if(oUl.offsetLeft >  0){
			oUl.style.left = -oUl.offsetWidth/2+'px';
		}
		oUl.style.left = oUl.offsetLeft + speed +'px';
	}
	var timer = setInterval(move,30);
	oDiv.onmouseover = function(){clearInterval(timer);};
	oDiv.onmouseout = function(){timer = setInterval(move,30);};
	oBtn1.onclick = function (){
		speed = 2;
	};
	oBtn2.onclick = function (){
		speed = -2;
	};
- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/2018/03/11/JavaScript_5/index.html b/2018/03/11/JavaScript_5/index.html deleted file mode 100644 index e9e7c561..00000000 --- a/2018/03/11/JavaScript_5/index.html +++ /dev/null @@ -1,929 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - DOM 操作 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

DOM 操作 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

DOM节点

childNodes nodeType 节点类型 –>3文本节点 –>1元素节点

-

获取子节点

-

children 子节点

-

parentNode 父节点

- -

例子：点击链接，隐藏整个li

-

offsetParent 获取元素在页面上相对谁定位

-

首尾子节点

-

有兼容性问题 –> nodeType

-

firstChild、firstElementChild

-

lastChild 、lastElementChild

-

兄弟节点

-

有兼容性问题

-

nextSibling、nextElementSibling

-

previousSibling、previousElementSibling

-

操纵元素属性

元素属性操作

-

第一种：oDiv.style.display=“block”;

-

第二种：oDiv.style[“display”]=“block”;

-

第三种：Dom方式

-

DOM方式操作元素属性

-

获取：getAttribute(名称)

-

设置：setAttribute(名称, 值)

-

删除：removeAttribute(名称)

-

DOM元素灵活查找

用className选择元素

-

如何用className选择元素

-

选出所有元素

-

通过className条件筛选

-

封装成函数

-

创建、插入和删除元素

创建DOM元素

-

createElement(标签名) 创建一个节点 document.createElement(‘li’);

-

appendChild(节点) 追加一个节点 父级.apppendChild(子节点)

-

例子：为ul插入li

-

插入元素

-

insertBefore(节点, 原有节点) 在已有元素前插入 oUl.insertBefore(oLi, aLi[0]);

-

例子：倒序插入li

-

删除DOM元素

-

removeChild(节点) 删除一个节点 oUl.removeChild(this.parentNode);

-

例子：删除li

-

文档碎片

文档碎片可以提高DOM操作性能(理论上)

-

文档碎片原理

-

document.createDocumentFragment() //但是现在几乎不用这个 低级浏览器 几乎无用

-

表格应用

tBodies、tHead、tFoot、rows、cells

-
1
2
// alert(aTb.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[0].getElementsByTagName('td')[1].innerHTML);
alert(aTb.tBodies[0].rows[0].cells[1].innerHTML);
-

隔行变色

-

鼠标移入高亮

-

添加、删除一行

-

DOM方法的使用

搜索 —-> 主要是后端

-

版本1：基础版本——字符串比较

-

版本2：忽略大小写——大小写转换

-

版本3：模糊搜索——search的使用

-

版本4：多关键词——split

-

高亮显示、筛选 background / display

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
window.onload =function(){
	var oTb = document.getElementById('table1');
	var oT1 = document.getElementById('text1');
	var oBtn1 = document.getElementById('btn1');
	oBtn1.onclick = function (){
		for(var i = 0; i < oTb.tBodies[0].rows.length; i++){
			var search = oT1.value.toLowerCase();
			var oldText = oTb.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
			var arr = search.split(' ');
			oTb.tBodies[0].rows[i].style.background = '';
			for(var j = 0; j < arr.length; j++){
				if( oldText.search(arr[j]) != -1){
					oTb.tBodies[0].rows[i].style.background = 'green';
				}
			}	
		}
	}
}
-

排序

-

移动Li appendChild(); //1.从原有父级删掉2.添加到新的父级

-

元素排序：转换——排序——插入

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
window.onload =function(){
	var oTb = document.getElementById('table1');
	var oBtn1 = document.getElementById('btn1');
	oBtn1.onclick = function (){
		var arr = [];
		for(var i = 0; i < oTb.tBodies[0].rows.length; i++){
			arr[i] = oTb.tBodies[0].rows[i];
		}
		arr.sort(function (num1, num2){
			var n1 = parseInt(num1.cells[0].innerHTML);
			var n2 = parseInt(num2.cells[0].innerHTML);
			return (n1 - n2);
		});
		for (var i in arr){
			oTb.tBodies[0].appendChild(arr[i]);
		}
	}
	
}
-

表单应用

表单基础知识

-

什么是表单

-

向服务器提交数据，比如：用户注册

-

action 提交到哪里

-

表单事件

-

onsubmit 提交时发生

-

onreset 重置时发生

-

表单内容验证

-

阻止用户输入非法字符 阻止事件

-

输入时、失去焦点时验证 onkeyup、onblur

-

提交时检查 onsubmit

-

后台数据检查

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/2018/03/11/JavaScript_6/index.html b/2018/03/11/JavaScript_6/index.html deleted file mode 100644 index 21975741..00000000 --- a/2018/03/11/JavaScript_6/index.html +++ /dev/null @@ -1,939 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - JavaScript 运动 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

JavaScript 运动 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

运动基础

让 Div 运动起来

-

速度——物体运动的快慢

-

运动中的 Bug

-

不会停止 –>临界值问题

-

速度取某些值会无法停止

-

到达位置后再点击还会运动 –> clearInterval()

-

重复点击速度加快

- -
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
window.onload = function () {
	var oBtn = document.getElementById('btn1');
	var oDiv = document.getElementById('div1');
	var timer = null;
	oBtn.onclick = function (){
		clearInterval(timer);	//保证就1个定时器
		timer = setInterval(function () {
			var speed = 1;
			if(oDiv.offsetLeft > 300){
				clearInterval(timer);
			}
			else{
				oDiv.style.left = oDiv.offsetLeft + speed + 'px';
			}
			
		}, 30);
		
	}
-

运动框架

-

在开始运动时，关闭已有定时器

-

把运动和停止隔开(if / else)

-

运动框架实例

-

例子1：“分享到”侧边栏 –> demo2.html

-

通过目标点，计算速度值

-

例子2：淡入淡出的图片

-

用变量存储透明度 –> demo3.html

-

主要是设置 opcity 并为其赋值

-

缓冲运动

逐渐变慢，最后停止

-

距离越远速度越大

-

速度由距离决定

-

速度 = (目标值-当前值) / 缩放系数

-

例子：缓冲菜单 –> demo4

-

Bug：速度取整 speed > 0 ? Math.ceil(speed) ：Math.floor(speed)

-

跟随页面滚动的缓冲侧边栏

-

潜在问题：目标值不是整数时 parseInt();

-

运动终止条件

匀速运动：距离足够近

-

缓冲运动：两点重合

-

多个物体同时运动

例子：多个 Div，鼠标移入变宽 –> demo5

-

单定时器，存在问题

-

每个 Div 一个定时器

-

多物体运动框架

-

定时器作为物体的属性

-

参数的传递：物体、目标值

-

例子：多个 Div 淡入淡出 –> demo6

-

所有东西都不能公用

-

属性与运动对象绑定：速度、其他属性值（如透明度等）

-

任意值运动框架

offset 属性的 Bug

-

有边框的 Div 变宽

-

用currentStyle / computedStyle(obj, flase)[name] 代替 offset

-

原有运动框架的问题

-

只能让某个值运动起来

-

如果想让其他值运动起来，要修改程序

-

扩展的运动框架 –> demo7

-

运动属性作为参数

-

封装 opacity

-

小数的问题 –> Math.round() 主要是为了适配 IE7

-

图片展示

效果思路

-

两边的按钮——淡入淡出

-

大图下拉——层级、高度变化

-

下方的 li——多物体淡入淡出

-

下方的 Ul——位置计算

-

左右按钮

-

淡入淡出

-

第一个小问题： 鼠标移到按钮上，按钮会消失

-

层级问题

-

按钮和遮罩上都得加上事件

-

下方 Li 效果

-

点击切换大图——选项卡

-

Li 淡入淡出——移入移出

-

Ul 移动——位置计算

-

大图片切换

-

图片层级—— zIndex 一直加1

-

图片下拉效果(运动框架)

-

可以改为淡入淡出

-

加入自动播放

-

和选项卡一样

-

另一个问题：ul 开始的宽度并不够， 需要计算后赋值

-

自己看着敲了一边在默敲一遍，自己的问题还是比较多，细节与思路还是不够。 –> demo9

-

最后运动框架

多个值同时变化

-

setStyle同时设置多个属性

-

参数传递

-

Json的使用

-

for in 遍历属性

-

运用到运动框架

-

检测运动停止

-

标志变量

-

例子：伸缩同时淡入淡出的菜单

-

还有就是链式运动， 依次完成运动，可以参考后面几个 demo

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/2018/03/16/closure/index.html b/2018/03/16/closure/index.html index 0c8cf11c..91be4751 100644 --- a/2018/03/16/closure/index.html +++ b/2018/03/16/closure/index.html @@ -1,904 +1,550 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 啥是闭包 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

啥是闭包 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

闭包这个名词可能是在还没了解计算机领域常常听见的，那就可以说他是一个比较常用到的一种技巧而被圈外的人所知道，仅仅是名字比较高深但其实认真一看也不过是「函数」和「函数内部能访问到的变量」（也叫环境）的总和，就是一个闭包。

- -
-

在计算机科学中，闭包（英语：Closure），又称词法闭包（Lexical Closure）或函数闭包（function closures），是引用了自由变量的函数。这个被引用的自由变量将和这个函数一同存在，即使已经离开了创造它的环境也不例外。所以，有另一种说法认为闭包是由函数和与其相关的引用环境组合而成的实体。闭包在运行时可以有多个实例，不同的引用环境和相同的函数组合可以产生不同的实例。（wiki）

-
-

说实话闭包这个名词看上去高大上，其实有很多的人在不知道这个概念的时候就已经悄悄的使用过了而且还可能是经常使用，只是不知道大家把这样的方法叫做闭包。

-

闭包就好是一种巧妙的设计，程序员为了方便调用而使用的，它通过分析上下文，来简化用户的调用，让用户在不知晓的情况下，达到他的目的。在程序语言中，闭包就是一种语法糖，它以很自然的形式，把我们的目的和我们的目的所涉及的资源全给自动打包在一起，以某种自然、尽量不让人误解的方式让人来使用。

-
1
2
3
4
5
6
7
8
9
10
11
12
//常见闭包代码
function init(){
  var x = 20
  function printX(){
    x--
    console.log(x)
  }
  return printX
}
var fun = init()
fun()
-

闭包从 MDN 上可以看到很多的用法但是我个人看来最常用的是为了隐藏变量（私有化），使用闭包这个手段是非常方便的。

-
    -
  1. 就是函数作用域的简单调用，内部函数可以访问函数外的变量。
    2. -
  2. 函数当做值来赋值，当作参数传给别的函数，也可以把函数当作一个值 return
    3. -
-

参考资料

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 啥是闭包 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

啥是闭包 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

闭包这个名词可能是在还没了解计算机领域常常听见的，那就可以说他是一个比较常用到的一种技巧而被圈外的人所知道，仅仅是名字比较高深但其实认真一看也不过是「函数」和「函数内部能访问到的变量」（也叫环境）的总和，就是一个闭包。

+ +
+

在计算机科学中，闭包（英语：Closure），又称词法闭包（Lexical Closure）或函数闭包（function closures），是引用了自由变量的函数。这个被引用的自由变量将和这个函数一同存在，即使已经离开了创造它的环境也不例外。所以，有另一种说法认为闭包是由函数和与其相关的引用环境组合而成的实体。闭包在运行时可以有多个实例，不同的引用环境和相同的函数组合可以产生不同的实例。（wiki）

+
+

说实话闭包这个名词看上去高大上，其实有很多的人在不知道这个概念的时候就已经悄悄的使用过了而且还可能是经常使用，只是不知道大家把这样的方法叫做闭包。

+

闭包就好是一种巧妙的设计，程序员为了方便调用而使用的，它通过分析上下文，来简化用户的调用，让用户在不知晓的情况下，达到他的目的。在程序语言中，闭包就是一种语法糖，它以很自然的形式，把我们的目的和我们的目的所涉及的资源全给自动打包在一起，以某种自然、尽量不让人误解的方式让人来使用。

+
1
2
3
4
5
6
7
8
9
10
11
12
//常见闭包代码
function init(){
  var x = 20
  function printX(){
    x--
    console.log(x)
  }
  return printX
}

var fun = init()
fun()
+

闭包从 MDN 上可以看到很多的用法但是我个人看来最常用的是为了隐藏变量（私有化），使用闭包这个手段是非常方便的。

+
    +
  1. 就是函数作用域的简单调用，内部函数可以访问函数外的变量。
    2. +
  2. 函数当做值来赋值，当作参数传给别的函数，也可以把函数当作一个值 return
    3. +
+

参考资料

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2018/03/18/css-tricks01/index.html b/2018/03/18/css-tricks01/index.html index 8fc42b9e..0174ca66 100644 --- a/2018/03/18/css-tricks01/index.html +++ b/2018/03/18/css-tricks01/index.html @@ -1,884 +1,530 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - CSS 文字对齐 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

CSS 文字对齐 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

在进行制作表单的时候为了使得让中文更加的顺眼可能会有让不同长度的文字左右对齐的需求就像这样

- -

HTML

先将文字放好

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div>
    <span>姓名</span><br>
    <span>联系方式</span>
  </div>
  
</body>
</html>
-

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
div {
  border: 1px solid green;
}
span {
  border: 1px solid red;
  width: 5em;
  display: inline-block;
  
  text-align: justify;
  overflow: hidden;
  line-height: 20px;
  height: 20px;
}
span::after {
  content: '';
  width: 100%;
  display: inline-block;
}
-

就可以得到上图的样式，就可以将 border 删掉了。其实 CSS 感觉只要是将方法记住，而其中的道理的话就真的要好好的去记忆文档。

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + CSS 文字对齐 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

CSS 文字对齐 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

在进行制作表单的时候为了使得让中文更加的顺眼可能会有让不同长度的文字左右对齐的需求就像这样

+ +

HTML

先将文字放好

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div>
    <span>姓名</span><br>
    <span>联系方式</span>
  </div>
  
</body>
</html>
+

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
div {
  border: 1px solid green;
}

span {
  border: 1px solid red;
  width: 5em;
  display: inline-block;
  
  text-align: justify;
  overflow: hidden;
  line-height: 20px;
  height: 20px;
}

span::after {
  content: '';
  width: 100%;
  display: inline-block;
}
+

就可以得到上图的样式，就可以将 border 删掉了。其实 CSS 感觉只要是将方法记住，而其中的道理的话就真的要好好的去记忆文档。

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2018/03/18/jQuery-first/index.html b/2018/03/18/jQuery-first/index.html new file mode 100644 index 00000000..667d1a9c --- /dev/null +++ b/2018/03/18/jQuery-first/index.html @@ -0,0 +1,550 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 初探 jQuery | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

初探 jQuery + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

jQuery 可以说是大部分网站都会使用到的库了 builtwith

今天从简单的地方入手去模拟 jQuery 的实现，但还不是真的实现原理，但是可以帮助我们去理解学习 jQuery ，其实程序员都是害怕麻烦的，有这么多的库就是为了让自己尽可能的少打代码，所以就将完成复杂过程的代码封装起来，在下一次用的时候只需要给出参数就能复用之前的代码使得自己不去干重复而无意义的事情，但是呢作为初学者直接就去使用 jQuery 看上去并无大碍，但一般就不会看到他最本质的东西。所以模拟来实现一个jQuery

+ +

需求

1
2
3
4
5
6
window.jQuery = ???
window.$ = jQuery

var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi
+

分析

    +
  1. $('div') 可以看出我们需要出入一个参数（jQuery 会自动判断为选择器还是节点）
    2. +
  2. 我们需要在该函数封装两个方法addClass() setText()
    3. +
  3. 考虑到 div 可能不止一个需要用一个对象来保存多个节点
    4. +
+

jQuery 函数

根据传入参数的类型来判断如何初始化节点对象

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
window.jQuery = function(node){
  let nodes = {}//声明一个空对象节点
  if(typeof node === 'string'){
    let arr = document.querySelectorAll(node)
    for(let i = 0; i < arr.length; i++){
        nodes[i] = arr[i]
      }
      nodes.length = arr.length
  }else if(typeof node === 'Node'){
    nodes[0] = node
    nodes.length = 1
  }
  
  return nodes
}

window.$ = jQuery//给他弄一个名字让大家都不会弄重的名字
+

addClass() 函数

使用 classList.add()

+
1
2
3
4
5
6
7
nodes.addClass = function(style){
    if(typeof style === 'string'){
      for(let i =0; i < nodes.length; i++){
        nodes[i].classList.add(style)
      }
    }
  }
+

setText() 函数

更改 textContext 属性

+
1
2
3
4
5
nodes.setText = function(message){
  for(let i =0; i < nodes.length; i++){
      nodes[i].textContent = message
    }
}
+

效果

+

小结

其实 jQuery 也就是一个对象，只是他单独封装他的属性与方法，将 DOM 的方法与属性隐藏得更深了一点，使用起来更方便更强大，兼容性更强。

+

思考

+
1
2
> <div id=x></div>
>
+
+
+
1
2
3
> var div = document.getElementById('x')
> var div = ('#x')
>
+
+
+

请说出 div 和 $div 的联系和区别。

+
+

document.getElementById()返回的是 DOM 对象，而 $() 返回的是 jQuery 对象
div 和 $div 的联系是：
只要 $(div)就可以把 div变成$div
两种转换方式将一个jQuery对象转换成 DOM 对象：[index]和.get(index);
只要 $div[0] 与 $div.get(0) 就能$div 变成 div
div 和 $div 的区别是：
div 的属性和方法有appendChild(),cloneNode(),contains(),hasChildNodes(),insertBefore(),isEqualNode(),isSameNode(),removeChild(),replaceChild(),normalize()
$div 的 属性和方法有 add,addBack,addClass,after,ajaxComplete,ajaxError,ajaxSend,ajaxStart,ajaxStop,ajaxSuccess,andSelf,animate,append,appendTo...

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2018/03/21/JSdata/index.html b/2018/03/21/JSdata/index.html deleted file mode 100644 index eb93fdca..00000000 --- a/2018/03/21/JSdata/index.html +++ /dev/null @@ -1,904 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 浅谈 JS 数据 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

浅谈 JS 数据 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

JS 中数据类型有七种　number null undefined string boolean object symbol(es6) 今天就来看看他们的一些平常会用到的东西

-

JavaScript 历史

-
- -

这七种不包括 Array Funtion 这两种其实就是　object

-

注意事项

#####１．number

-
    -
  • 八进制: 011 (es5新增　0o11　语法)
    • -
-
２．string
    -

  • 多行代码

    -
    1
    2
    3
    4
    5
    6
    7
    8
     var s = '12345' +
                 '67890' // 无回车符号
     或
     var s = `12345
     67890` // 含回车符号
     //其实还可以但不推荐,因为若在\后面有' '就会报错且不易发现
     var longString = 'Long \
    string';
    -
    • -
-
３．undefined 与 null

就连 JS 之父都说这是他当初没有设计好的地方

-

不过一般情况下会对一个未赋值的对象，就用 null

-

对于不是对象的数据类型没有赋值，就是 undefined

-

typeof 操作符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
typeof String
//"function"
typeof 'hello'
//"string"
typeof 1
//"number"
typeof true
//"boolean"
typeof {}
//"object"
typeof null
//"object"
var a = null
//undefined
typeof a
//"object"
var b = Symbol()
//undefined
typeof b
//"symbol"
-

需要注意的就是 null 和 function, function并不是一个类型

-

数据转换

可以说在 code 的世界中有很大一部分的事情就是在将数据的格式进行转换

-
任意类型转 String

有三种 String() .toString() 与最方便的 ''+1/true...

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
String(1)
//"1"
String({})
//"[object Object]"
String({
key: '99',
})
//"[object Object]"
(1).toString()
//"1"
1 + ''
//"1"
null + ''
//"null"
undefined + ''
//"undefined"
-

需要注意的是 null/undefined 是没有 toString() 方法的，会报错

-
任意类型转数字
    -
  1. Number(x)
    2. -
  2. parseInt(x, 10) MDN
    3. -
  3. parseFloat(x) MDN
    4. -
  4. x - 0
    5. -
  5. +x
    6. -
-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var a = '1'
//undefined
Number(a)
//1
parseInt(a)
//1
parseInt(a, 10)
//1
parseFloat(a)
//1
a - 0
//1
+a
//1
-
任意类型转布尔
    -
  1. Boolean(x)
    2. -
  2. !!x
    3. -
  3. 五个 Falsy 值nul undefined NaN '' 0
    4. -
-

面试题

1
2
3
4
var a = 1
var b = a
b = 2
请问 a 显示是几？
-
1
2
3
4
var a = {name: 'a'}
var b = a
b = {name: 'b'}
请问现在 a.name 是多少？
-
1
2
3
4
var a = {name: 'a'}
var b = a
b.name = 'b'
请问现在 a.name 是多少？
-
1
2
3
4
var a = {name: 'a'}
var b = a
b = null
请问现在 a 是什么？
-

主要是画内存图，分清楚 Heap 和 Stack ，像复杂类型一般都是放到 Stack中的比如对象。

-

垃圾回收

JavaScript 的 gc 个人觉得与Java 是很像的，至少表面上看都是当不被引用的时候就会被当做垃圾然后就会等待垃圾车的到来。

-

深复制与浅复制

这是一个浅拷贝的例子

-
1
2
3
4
var a = {name: 'frank'}
var b = a
b.name = 'b'
a.name === 'b' // true
-

因为我们对 b 操作后，a 也变了

-

什么是深拷贝了，就是对 Heap 内存进行完全的拷贝。

-
1
2
3
4
var a = {name: 'frank'}
var b = deepClone(a) // deepClone 还不知道怎么实现
b.name = 'b'
a.name === 'a' // true
- -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/2018/03/21/JSobject/index.html b/2018/03/21/JSobject/index.html deleted file mode 100644 index dec86ce7..00000000 --- a/2018/03/21/JSobject/index.html +++ /dev/null @@ -1,905 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - JS　里面的对象 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

JS　里面的对象 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

全局对象 window

ECMAScript 规定全局对象叫做 global，但是浏览器把 window 作为全局对象（浏览器先存在的）

-

window 就是一个哈希表，有很多属性。

- -

window 的属性就是全局变量。

-

这些全局变量分为两种：

-
    -
  1. 一种是 ECMAScript 规定的
      -
    • global.parseInt
      • -
    • global.parseFloat
      • -
    • global.Number
      • -
    • global.String
      • -
    • global.Boolean
      • -
    • global.Object
      • -
    -
    2. -
  2. 一种是浏览器自己加的属性
      -
    • window.alert
      • -
    • window.prompt
      • -
    • window.comfirm
      • -
    • window.console.log
      • -
    • window.console.dir
      • -
    • window.document
      • -
    • window.document.createElement
      • -
    • window.document.getElementById
      • -
    -
    3. -
-

所有 API 都可以在 MDN 里找到详细的资料。

-

今天我们学习第一种全局变量。

-

全局函数

    -

  1. Number
    var n = new Number(1) 创建一个 Number 对象
    1 与 new Number(1) 的区别是什么？

    -
    1
    2
    3
    var n = 2
    var n.xxx = 2
    console.log(n.xxx)//undefined
    -
    2. -

  2. String
    var s = new String(‘hello’) 创建一个 String 对象
    ‘hello’ 与 new String(‘hello’) 的区别是什么？看内存图

    -
    3. -

  3. Boolean
    var b = new Boolean(true) 创建一个 Boolean 对象
    true 与 new Boolean(true) 的区别是什么？看内存图

    -
    1
    2
    3
    4
    var f1 = false
    var f2 = new Boolean(false)
    if(f1){console.log(f1)}
    if(f2){console.log(f2)}//f2
    -
    4. -

  4. Object
    var o1 = {}
    var o2 = new Object()
    o1 和 o2 没区别

    -
    5. -
-

公用的属性藏在哪

所有对象都有 toString 和 valueOf 属性，那么我们是否有必要给每个对象一个 toString 和 valueOf 呢？

-

明显不需要。

-

JS 的做法是把 toString 和 valueOf 放在一个对象里（暂且叫做公用属性组成的对象）

-

然后让每一个对象的 __proto__ 存储这个「公用属性组成的对象」的地址。

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/2018/03/21/JavaScript -Function/index.html b/2018/03/21/JavaScript -Function/index.html deleted file mode 100644 index b610b128..00000000 --- a/2018/03/21/JavaScript -Function/index.html +++ /dev/null @@ -1,901 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - JavaScript 中的函数 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

JavaScript 中的函数 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

函数的 5 种声明方式

    -

  1. 具名函数 function x(){}

    -
    2. -

  2. 匿名函数

    -
    1
    2
    var a
    a = function (){}
    -
    3. -
- -
    -

  1. 结合1， 2

    -
    1
    var a = function x(){}
    -
    2. -

  2. 构造函数 window.Function('x', 'y', 'return x+y')

    -
    3. -

  3. 箭头函数（语法糖）

    -
    1
    2
    3
    4
    5
    6
    7
    8
    9
    //1.基本格式
    (x,y) => {
      n = (x * y) / 2
      return n
    }
    //2.如果是直接return
    (x, y) => (x*y) / 2
    //3.只有一个参数可以不加 ()
    x => x*x
    -
    4. -
-

函数的 name 属性

个人的感觉 name 将 JS 的不一致性体现的淋漓尽致，总是出乎你的意料

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function x(){}
undefined
x.name
"x"
var f1 = function (){}
undefined
f1.name
"f1"
var f2 = function f3(){}
undefined
f2.name
"f3"
var f4 = new Function()
undefined
f4.name
"anonymous"
-

函数的本质

函数其实是一种特殊的 Object，可以反复调用该代码块

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var f = function (){}
f.prototype
/**{constructor: ƒ}
constructor:ƒ ()
arguments:null
caller:null
length:0
name:"f"
prototype:{constructor: ƒ}
__proto__:ƒ ()
apply:ƒ apply()
arguments:(...)
bind:ƒ bind()
call:ƒ call()
caller:(...)
constructor:ƒ Function()
length:0
name:""
toString:ƒ toString()
__proto__:Object**/
-

this 与 arguments

在调用函数时大家都会理所当然的使用，f() 类似这样的方式，但是我们还可以用f.call(this, arguments) 这样的方式

-
1
2
3
4
5
6
7
8
9
10
var f = function (x, y){
	return x+y
}
undefined
f(2, 3)
//5
f.call(undefined, 2, 3)
//5
f.call(undefined, 5, 3)
//8
-

this 若为 undefined 一般的话是会被看成 window

-
1
2
3
4
5
6
7
8
9
10
11
12
var f = function (x, y){
	console.log(this)
	console.log(arguments)
}
undefined
f(2, 3)
//VM1021:2 Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
//VM1021:3 Arguments(2) [2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
undefined
f.call(undefined, 2, 3)
//VM1021:2 Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
//VM1021:3 Arguments(2) [2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
-

但在严格模式下就是 undefined

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var f = function (x, y){
	'use strict'
	console.log(this === undefined)
	console.log(arguments)
}
//undefined
f.call(undefined, 2, 3)
//VM1046:3 true
//VM1046:4 Arguments(2) [2, 3, callee: (...), Symbol(Symbol.iterator): ƒ]
//undefined
var f = function (x, y){
	
	console.log(this === window)
	console.log(arguments)
}
//undefined
f.call(undefined, 2, 3)
//VM1081:3 true
//VM1081:4 Arguments(2) [2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
-

变量提升

时刻谨记变量提升四个字，题目会经常在这个地方坑人

-
1
2
3
4
5
6
var a = 2
var f = function(){
  console.log(a)
  var a = 3
}
//请问 log 出什么
-

其实只要记住变量提升那么这道题就会迎刃而解，相当于

-
1
2
3
4
5
6
var a = 2
var f = function(){
  var a
  console.log(a)
  a = 3
}
-

自然就是 undefined, 若有人想的是 2，那可能误以为是

-

其实还与作用域有关系

-
1
2
3
4
5
var a = 2 
var f = function(){
	console.log(a)
}
f()
-

闭包

闭包在我看来就好像 Java 的私有属性，为了防止外部对重要数据的直接修改导致不必要的数据变化自然而然使用的手段，其实就是对变量作用域的灵活应用。

-
1
2
3
4
5
6
7
8
9
10
11
function foo(){
  var local = 1
  function bar(){
    local++
    return local
  }
  return bar
}
var func = foo()
func()
-

参考：

- - - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git "a/2018/03/22/\351\235\242\345\220\221\345\257\271\350\261\241\347\250\213\345\272\217\350\256\276\350\256\241\357\274\210\344\270\200\357\274\211/index.html" "b/2018/03/22/\351\235\242\345\220\221\345\257\271\350\261\241\347\250\213\345\272\217\350\256\276\350\256\241\357\274\210\344\270\200\357\274\211/index.html" new file mode 100644 index 00000000..2df0b5f3 --- /dev/null +++ "b/2018/03/22/\351\235\242\345\220\221\345\257\271\350\261\241\347\250\213\345\272\217\350\256\276\350\256\241\357\274\210\344\270\200\357\274\211/index.html" @@ -0,0 +1,569 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 面向对象程序设计 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

面向对象程序设计 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

昨天去知道创宇面试的时候面试官当时提了这样的问题，你对对象的属性了解有哪些,当场我说了知道 Enumerable Value Writable 然后说就记得这些了。但是面试官当时就又问那如果想知道我改变了对象中的值应该如何呢？当时我就想到了 MVVM 可当时却没有与 get set联系到一起,当时就只能尬聊了。

+

深入响应式原理

+

回去后把很久之前看过的《JavaScript高级程序设计》第 6 张重新看了遍。才发现原来自己把很多基础的东西都忘了。

+ +

理解对象

对象的属性类型

    +
  • 数据属性
    [[Configurable]] [[Enumerable]] [[Writable]] [[Value]]
    • +
  • 访问器属性
    [[Get]] [[Set]] [[Configurable]] [[Enumerable]]
    访问器属性必须通过 Object.defineProperty() 来进行定义
    定义多个属性使用 Object.defineProperties()
    Vue 的响应式就离不开访问器属性，但是 Object.defineProperty() 这东西又支持的 IE9+，IE8部分支持这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。
    如何监听 js 中变量的变化?
    读取属性的特性使用 Object.getOwnPropertyDescriptor()
    • +
+

创建对象

工厂模式

1
2
3
4
5
6
7
8
9
10
11
function creatPerson(name, age){
  var a = new Object()
  a.name = name
  a.age = age
  return a
  a.say(){
    alert(hi)
  }
}
var p1 = creatPerson('aa', 10)
var p2 = creatPerson('bb', 20)
+
    +
  • 解决了多个对象相似的问题
    • +
  • 未解决怎样知道对象的类型
    • +
  • say（）这个方法没必要每个人都使用不一样的地址
    • +
+

构造函数模式

1
2
3
4
5
6
7
8
9
function Person(name, age){
	this.name = name
	this.age = age
	this.sayName(){
      alert(this.name)
	}
}
var p1 = new Person('aa', 10)
var p2 = new Person('bb', 20)
+
    +
  • 主要问题是每一方法都要每个实例上重新创建一边
    • +
+

原型模式

1
2
3
4
5
6
7
8
9
function Person(){}
Person.prototype.name = 'aa'
Person.prototype.age = 10
Person.prototype.sayName() = function(){
  alert(this.name)
}

var p1 = new Person()
p1.sayName()
+
    +
  • 这样就解决了之前的每一方法都要每个实例上重新创建一便但是若要改变 name 那所有实例的名字都将改变
    • +
+

理解原型对象

无论什么时候，只要创建一个新函数就会根据一组特定的规则为该函数创建一个 prototype 属性，这个属性指向函数的原型对象。在默认情况下所有原型对象都会获得一个 constructor 属性，这个属性是一个指向 prototype 属性所在函数的指针。

+

虽然所有实现中都无法访问[[Prototype]]，可以用 isPrototypeOf() 以及 Object.getPrototypeOf()

+

hasOwnProperty()可以检测一个属性是否存在于实例中

+

Object.keys() 可以取得对象上可枚举的实例属性

+

Object.getOwnPropertyNames() 可以取得对象上所有实例属性包含不可枚举

+

更简单的原型语法

使用对象字面量来重写原型对象

+
1
2
3
4
5
6
7
8
9
function Person(){}
Person.prototype = {
  //constructor: Person,
  name: 'aa',
  age：10，
  sayName: function(){
  alert(this.name)
}
}
+
    +
  • 确实是更方便，但是有一个问题，constructor 属性不再指向 Person 了，我们使用的语法本质上完全重置了 prototype 对象，所以 constructor 属性也就变成了新对象的 constructor 属性（指向 Object）当然我们可以特意设回适当的值(但这又会改变[[Enumerable]], 使用 Object.defineProperty()设置)
    • +
+

组合使用构造函数模式和原型模式

1
2
3
4
5
6
7
8
9
10
11
12
13
function Person(name, age){
  this.name = name
  this.age = age
}
Person.prototype = {
  constructor: Person
  sayName: function(){
  alert(this.name)
}
}

var p1 = new Person('aa', 10)
var p2 = new Person('bb', 20)
+
    +
  • 使用最广泛，认同度最高
    • +
+

动态原型模式

1
2
3
4
5
6
7
8
9
function Person(name, age){
  this.name = name
  this.age = age
  if(typeof this.sayName != 'function'){
    Person.prototype.sayName = function(){
      alert(this.name)
    } 
  }
}
+

寄生构造函数模式

很像工厂模式与构造函数模式

+
1
2
3
4
5
6
7
8
9
10
function Person(name, age){
  var a = new Object()
  a.name = name 
  a.age = age
  a.sayName = function(){
    alert(his.name)
  }
  return a
}
var p1 = new Person('aa', 10)
+
    +
  • 返回的对象与构造函数或则与构造函数的原型属性没有联系，也就是说，构造函数返回的对象与在构造函数外部创建的对象没有什么不同。
    • +
+

稳妥构造函数模式

指没有公共属性，其方法也不引用 this

+
1
2
3
4
5
6
7
8
9
10
11
12
function Person(name, age){
  var a = new Object()
  this.name = name
  this.age = age
  a.sayName = function(){
    alert(name)
  }
  return a
}

var p1 = Person('aa', 10)
p1.sayName()
+
    +
  • 这种模式除了 p1.sayName() 可以访问到 name 其他方式都不行
    • +
+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/2018/03/26/\345\270\203\345\261\200\347\232\204\345\245\227\350\267\257/index.html" "b/2018/03/26/\345\270\203\345\261\200\347\232\204\345\245\227\350\267\257/index.html" index e36f921e..c4960d2b 100644 --- "a/2018/03/26/\345\270\203\345\261\200\347\232\204\345\245\227\350\267\257/index.html" +++ "b/2018/03/26/\345\270\203\345\261\200\347\232\204\345\245\227\350\267\257/index.html" @@ -1,914 +1,560 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 布局的套路 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

布局的套路 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

原则

兼容 IE8 float
其他 flex

-
    -
  • 不到万不得已，不要写死 width 和 height
    • -
  • 尽量用高级语法，如 calc、flex
    • -
  • 如果是 IE，就全部写死
    • -
-

口诀

    -
  1. float
      -
    1. 儿子全加 float: left （right）
      2. -
    2. 老子加 .clearfix
      3. -
    -
    2. -
  2. flex
      -
    1. 老子加 display: flex
      2. -
    2. 老子加 justify-content: space-between;
      3. -
    -
    3. -
- -
1
2
3
4
5
6
7
8
.clearfix:after{
    content: '';
    display: block;
    clear: both;
}
.clearfix{
    zoom: 1;
}<!--IE6-->
-

float 平均布局

1
2
3
4
5
6
7
8
9
10
<div class="super clearfix">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.super{
  width: 860px;
  background: green;
  margin: 0 auto;
}
.child{
  width: 200px;
  height: 200px;
  background: #eee;
  float: left;
  margin: 10px;
}
.clearfix::after{
  content: '';
  display: block;
  clear: both;
}
.child:nth-child(4n+1){
  margin-left: 0;
}
.child:nth-child(4n){
  margin-right: 0;
}
-

但是 ie 并没有完全支持 nth-child 所以还能多加一个 div 来包裹

-
1
2
3
4
5
6
7
8
9
10
11
12
<div class="super">
  <div class="superchild clearfix">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>
-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.super{
  width: 860px;
  background: green;
  margin: 0 auto;
}
.child{
  width: 200px;
  height: 200px;
  background: #eee;
  float: left;
  margin: 10px;
}
.clearfix::after{
  content: '';
  display: block;
  clear: both;
}
.superchild {
  margin-left: -10px;
  margin-right: -10px;
}
-

flex 平均布局

1
2
3
4
5
6
7
8
9
10
<div class="super">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>
-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.super{
  width: 860px;
  background: green;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.child{
  width: 200px;
  height: 200px;
  background: #eee;
  margin: 10px 0;
}
-

但如果最后一行不是一行该有个数少了几个看上去就很难看，这时候若果要有和之前一样的效果就换回 float， 或类似第二种

-
1
2
3
4
5
6
7
8
9
10
11
12
<div class="super">
  <div class="superchild">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>
-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.super{
  width: 860px;
  background: green;
  margin: 0 auto;
}
.superchild{
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
}
.child{
  width: 200px;
  height: 200px;
  margin: 10px;
  background: #eee;
}
-

但是到了手机端的话要记得 overflow： hidden

-

图片可以使用 background： url（）

-

background-size：cover

-

使用 calc

用了 flex 那就可以不写死 width

-

可以这样 不过要注意 calc() 使用算术符号前后要空格

-
1
width：calc（25% - 20px）
-

一般不要将 class 命名 为 .ad 可能会被当做广告给屏蔽。

-

做了布局的 div 就不要在上面干别的事，另再加其他的 div

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 布局的套路 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

布局的套路 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

原则

兼容 IE8 float
其他 flex

+
    +
  • 不到万不得已，不要写死 width 和 height
    • +
  • 尽量用高级语法，如 calc、flex
    • +
  • 如果是 IE，就全部写死
    • +
+

口诀

    +
  1. float
      +
    1. 儿子全加 float: left （right）
      2. +
    2. 老子加 .clearfix
      3. +
    +
    2. +
  2. flex
      +
    1. 老子加 display: flex
      2. +
    2. 老子加 justify-content: space-between;
      3. +
    +
    3. +
+ +
1
2
3
4
5
6
7
8
.clearfix:after{
    content: '';
    display: block;
    clear: both;
}
.clearfix{
    zoom: 1;
}<!--IE6-->
+

float 平均布局

1
2
3
4
5
6
7
8
9
10
<div class="super clearfix">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.super{
  width: 860px;
  background: green;
  margin: 0 auto;
}

.child{
  width: 200px;
  height: 200px;
  background: #eee;
  float: left;
  margin: 10px;
}

.clearfix::after{
  content: '';
  display: block;
  clear: both;
}

.child:nth-child(4n+1){
  margin-left: 0;
}
.child:nth-child(4n){
  margin-right: 0;
}
+

但是 ie 并没有完全支持 nth-child 所以还能多加一个 div 来包裹

+
1
2
3
4
5
6
7
8
9
10
11
12
<div class="super">
  <div class="superchild clearfix">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.super{
  width: 860px;
  background: green;
  margin: 0 auto;
}

.child{
  width: 200px;
  height: 200px;
  background: #eee;
  float: left;
  margin: 10px;
}

.clearfix::after{
  content: '';
  display: block;
  clear: both;
}

.superchild {
  margin-left: -10px;
  margin-right: -10px;
}
+

flex 平均布局

1
2
3
4
5
6
7
8
9
10
<div class="super">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.super{
  width: 860px;
  background: green;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.child{
  width: 200px;
  height: 200px;
  background: #eee;
  margin: 10px 0;
}
+

但如果最后一行不是一行该有个数少了几个看上去就很难看，这时候若果要有和之前一样的效果就换回 float， 或类似第二种

+
1
2
3
4
5
6
7
8
9
10
11
12
<div class="super">
  <div class="superchild">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.super{
  width: 860px;
  background: green;
  margin: 0 auto;
}
.superchild{
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
}

.child{
  width: 200px;
  height: 200px;
  margin: 10px;
  background: #eee;
}
+

但是到了手机端的话要记得 overflow： hidden

+

图片可以使用 background： url（）

+

background-size：cover

+

使用 calc

用了 flex 那就可以不写死 width

+

可以这样 不过要注意 calc() 使用算术符号前后要空格

+
1
width：calc（25% - 20px）
+

一般不要将 class 命名 为 .ad 可能会被当做广告给屏蔽。

+

做了布局的 div 就不要在上面干别的事，另再加其他的 div

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/2018/04/13/\345\210\235\346\216\242-mvc/index.html" "b/2018/04/13/\345\210\235\346\216\242-mvc/index.html" deleted file mode 100644 index 79b948cf..00000000 --- "a/2018/04/13/\345\210\235\346\216\242-mvc/index.html" +++ /dev/null @@ -1,874 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 初探 MVC | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

初探 MVC - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -
-

MVC模式（Model–view–controller）是软件工程中的一种软件架构模式，把软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）。

-

MVC模式最早由Trygve Reenskaug在1978年提出[1]，是施乐帕罗奥多研究中心（Xerox PARC）在20世纪80年代为程序语言Smalltalk发明的一种软件架构。MVC模式的目的是实现一种动态的程序设计，使后续对程序的修改和扩展简化，并且使程序某一部分的重复利用成为可能。除此之外，此模式通过对复杂度的简化，使程序结构更加直观。软件系统通过对自身基本部分分离的同时也赋予了各个基本部分应有的功能。专业人员可以通过自身的专长分组：

-
    -
  • 控制器（Controller）- 负责转发请求，对请求进行处理。
    • -
  • 视图（View） - 界面设计人员进行图形界面设计。
    • -
  • 模型（Model） - 程序员编写程序应有的功能（实现算法等等）、数据库专家进行数据管理和数据库设计(可以实现具体的功能)。
    • -
-
-

总结一下：

简单来说 MVC 是一种代码设计模式，将代码分成三个部分，使得你的代码容易被理解

-
    -
  1. Controller 监听 Model 变化，Model 一变，Controller 就会去更新 View。
    2. -
  2. Controller 监听用户交互，用户点了提交或修改按钮，Controller 就要去更新 Model。
    3. -
- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git "a/2018/04/22/XMLHttpRequest \345\257\271\350\261\241/index.html" "b/2018/04/22/XMLHttpRequest \345\257\271\350\261\241/index.html" index f2d789ff..e13cc725 100644 --- "a/2018/04/22/XMLHttpRequest \345\257\271\350\261\241/index.html" +++ "b/2018/04/22/XMLHttpRequest \345\257\271\350\261\241/index.html" @@ -1,948 +1,594 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - AJAX | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

AJAX - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

正是由于 AJAX 的出现才导致前端的快速发展，异步 JavaScript 和 XML，不过经过发展现在不再使用 XML 而使用 JSON 这门轻量级数据语言。

-

XMLHttpRequest 对象

1
let request = new XMLHttpRequest()
- -

XMLHttpRequest 实例的属性

readyState
-
    -
  • 0，对应常量UNSENT，表示XMLHttpRequest实例已经生成，但是open()方法还没有被调用。
    • -
  • 1，对应常量OPENED，表示send()方法还没有被调用，仍然可以使用setRequestHeader()，设定HTTP请求的头信息。
    • -
  • 2，对应常量HEADERS_RECEIVED，表示send()方法已经执行，并且头信息和状态码已经收到。
    • -
  • 3，对应常量LOADING，表示正在接收服务器传来的body部分的数据，如果responseType属性是text或者空字符串，responseText就会包含已经收到的部分信息。
    • -
  • 4，对应常量DONE，表示服务器数据已经完全接收，或者本次接收已经失败了
    • -
-
-
onreaadystatechange
-

onreadystatechange属性指向一个回调函数，当readystatechange事件发生的时候，这个回调函数就会调用，并且XMLHttpRequest实例的readyState属性也会发生变化。

-

另外，如果使用abort()方法，终止XMLHttpRequest请求，onreadystatechange回调函数也会被调用。

-
-
response

response 属性为只读

-
responseType

指定服务器返回的数据类型

-
-

“”：字符串（默认值）

-

“arraybuffer”：ArrayBuffer对象

-

“blob”：Blob对象

-

“document”：Document对象

-

“json”：JSON对象

-

“text”：字符串

-
-

text类型适合大多数情况，而且直接处理文本也比较方便，document类型适合返回XML文档的情况，blob类型适合读取二进制数据，比如图片文件。

-
responseText

返回从服务器接收到的字符串，属性只读，若请求不成功或数据不完整，属性等于 null

-
responseXML

接受 Document 对象

-
status

表示请求到的状态码

-
-

200, OK，访问正常

-

301, Moved Permanently，永久移动

-

302, Move temporarily，暂时移动

-

304, Not Modified，未修改

-

307, Temporary Redirect，暂时重定向

-

401, Unauthorized，未授权

-

403, Forbidden，禁止访问

-

404, Not Found，未发现指定网址

-

500, Internal Server Error，服务器发生错误

-
-
statusText

返回一个字符串，包含整个状态信息，就比如 200 OK

-
timeout

表示一段时间后，若请求没有结果，就自动终止，若为 0 就表示你没有时间限制

-
事件监听接口
-

XMLHttpRequest第一版，只能对onreadystatechange这一个事件指定回调函数。该事件对所有情况作出响应。 XMLHttpRequest第二版允许对更多的事件指定回调函数。

-

onloadstart 请求发出

-

onprogress 正在发送和加载数据

-

onabort 请求被中止，比如用户调用了abort()方法

-

onerror 请求失败

-

onload 请求成功完成

-

ontimeout 用户指定的时限到期，请求还未完成

-

onloadend 请求完成，不管成果或失败

-

注意，如果发生网络错误（比如服务器无法连通），onerror事件无法获取报错信息，所以只能显示报错。

-
-
withCredentials

表示跨域请求，用户信息（比如Cookie和认证的HTTP头信息）是否会包含在请求之中，默认为 false。

-

XMLHttpRequest 实例的方法

abort()

用来终止已经发出的HTTP请求

-
getAllResponseHeaders()

方法返回服务器发来的所有HTTP头信息。格式为字符串，每个头信息之间使用CRLF分隔，如果没有受到服务器回应，该属性返回null

-
getResponseHeader()

方法返回HTTP头信息指定字段的值，如果还没有收到服务器回应或者指定字段不存在，则该属性为null

-
open()

对象的open方法用于指定发送HTTP请求的参数，它的使用格式如下，一共可以接受五个参数

-
-

method：表示HTTP动词，比如“GET”、“POST”、“PUT”和“DELETE”。

-

url: 表示请求发送的网址。

-

async: 格式为布尔值，默认为true，表示请求是否为异步。如果设为false，则send()方法只有等到收到服务器返回的结果，才会有返回值。

-

user：表示用于认证的用户名，默认为空字符串。

-

password：表示用于认证的密码，默认为空字符串。

-
-
send()

方法用于实际发出HTTP请求。如果不带参数，就表示HTTP请求只包含头信息，也就是只有一个URL，典型例子就是GET请求；如果带有参数，就表示除了头信息，还带有包含具体数据的信息体，典型例子就是POST请求。

-
setRequestHeader()

方法用于设置HTTP头信息。该方法必须在open()之后、send()之前调用。如果该方法多次调用，设定同一个字段，则每一次调用的值会被合并成一个单一的值发送。

-
overrideMimeType()

该方法用来指定服务器返回数据的MIME类型。该方法必须在send()之前调用。

-

传统上，如果希望从服务器取回二进制数据，就要使用这个方法，人为将数据类型伪装成文本数据。

-

XMLHttpRequest实例的事件

readyStateChange

readyState 属性的值发生改变，就会触发 readyStateChange 事件

-
progress

上传文件时，XMLHTTPRequest对象的upload属性有一个progress，会不断返回上传的进度。

-
load error abort loadend

load事件表示服务器传来的数据接收完毕，error事件表示请求出错，abort事件表示请求被中断。abort、load和error这三个事件，会伴随一个loadend事件，表示请求结束，但不知道其是否成功。

-

原生 JS 写 AJAX

1
2
3
4
5
6
7
8
9
10
11
let xhr = new XMLHttpReauest()
xhr.open('post', 'http://baidu.com')
xhr.send()
xhr.onreadystatchange = () => {
    if(xhr.readyState === 4) {
        if(xhr.status >= 200 && xhr.status < 400){
            let string = xhr.responseText
            let object = window.JSON.parse(string)
        }
    }
}
- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + AJAX | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

AJAX + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

正是由于 AJAX 的出现才导致前端的快速发展，异步 JavaScript 和 XML，不过经过发展现在不再使用 XML 而使用 JSON 这门轻量级数据语言。

+

XMLHttpRequest 对象

1
let request = new XMLHttpRequest()
+ +

XMLHttpRequest 实例的属性

readyState
+
    +
  • 0，对应常量UNSENT，表示XMLHttpRequest实例已经生成，但是open()方法还没有被调用。
    • +
  • 1，对应常量OPENED，表示send()方法还没有被调用，仍然可以使用setRequestHeader()，设定HTTP请求的头信息。
    • +
  • 2，对应常量HEADERS_RECEIVED，表示send()方法已经执行，并且头信息和状态码已经收到。
    • +
  • 3，对应常量LOADING，表示正在接收服务器传来的body部分的数据，如果responseType属性是text或者空字符串，responseText就会包含已经收到的部分信息。
    • +
  • 4，对应常量DONE，表示服务器数据已经完全接收，或者本次接收已经失败了
    • +
+
+
onreaadystatechange
+

onreadystatechange属性指向一个回调函数，当readystatechange事件发生的时候，这个回调函数就会调用，并且XMLHttpRequest实例的readyState属性也会发生变化。

+

另外，如果使用abort()方法，终止XMLHttpRequest请求，onreadystatechange回调函数也会被调用。

+
+
response

response 属性为只读

+
responseType

指定服务器返回的数据类型

+
+

“”：字符串（默认值）

+

“arraybuffer”：ArrayBuffer对象

+

“blob”：Blob对象

+

“document”：Document对象

+

“json”：JSON对象

+

“text”：字符串

+
+

text类型适合大多数情况，而且直接处理文本也比较方便，document类型适合返回XML文档的情况，blob类型适合读取二进制数据，比如图片文件。

+
responseText

返回从服务器接收到的字符串，属性只读，若请求不成功或数据不完整，属性等于 null

+
responseXML

接受 Document 对象

+
status

表示请求到的状态码

+
+

200, OK，访问正常

+

301, Moved Permanently，永久移动

+

302, Move temporarily，暂时移动

+

304, Not Modified，未修改

+

307, Temporary Redirect，暂时重定向

+

401, Unauthorized，未授权

+

403, Forbidden，禁止访问

+

404, Not Found，未发现指定网址

+

500, Internal Server Error，服务器发生错误

+
+
statusText

返回一个字符串，包含整个状态信息，就比如 200 OK

+
timeout

表示一段时间后，若请求没有结果，就自动终止，若为 0 就表示你没有时间限制

+
事件监听接口
+

XMLHttpRequest第一版，只能对onreadystatechange这一个事件指定回调函数。该事件对所有情况作出响应。 XMLHttpRequest第二版允许对更多的事件指定回调函数。

+

onloadstart 请求发出

+

onprogress 正在发送和加载数据

+

onabort 请求被中止，比如用户调用了abort()方法

+

onerror 请求失败

+

onload 请求成功完成

+

ontimeout 用户指定的时限到期，请求还未完成

+

onloadend 请求完成，不管成果或失败

+

注意，如果发生网络错误（比如服务器无法连通），onerror事件无法获取报错信息，所以只能显示报错。

+
+
withCredentials

表示跨域请求，用户信息（比如Cookie和认证的HTTP头信息）是否会包含在请求之中，默认为 false。

+

XMLHttpRequest 实例的方法

abort()

用来终止已经发出的HTTP请求

+
getAllResponseHeaders()

方法返回服务器发来的所有HTTP头信息。格式为字符串，每个头信息之间使用CRLF分隔，如果没有受到服务器回应，该属性返回null

+
getResponseHeader()

方法返回HTTP头信息指定字段的值，如果还没有收到服务器回应或者指定字段不存在，则该属性为null

+
open()

对象的open方法用于指定发送HTTP请求的参数，它的使用格式如下，一共可以接受五个参数

+
+

method：表示HTTP动词，比如“GET”、“POST”、“PUT”和“DELETE”。

+

url: 表示请求发送的网址。

+

async: 格式为布尔值，默认为true，表示请求是否为异步。如果设为false，则send()方法只有等到收到服务器返回的结果，才会有返回值。

+

user：表示用于认证的用户名，默认为空字符串。

+

password：表示用于认证的密码，默认为空字符串。

+
+
send()

方法用于实际发出HTTP请求。如果不带参数，就表示HTTP请求只包含头信息，也就是只有一个URL，典型例子就是GET请求；如果带有参数，就表示除了头信息，还带有包含具体数据的信息体，典型例子就是POST请求。

+
setRequestHeader()

方法用于设置HTTP头信息。该方法必须在open()之后、send()之前调用。如果该方法多次调用，设定同一个字段，则每一次调用的值会被合并成一个单一的值发送。

+
overrideMimeType()

该方法用来指定服务器返回数据的MIME类型。该方法必须在send()之前调用。

+

传统上，如果希望从服务器取回二进制数据，就要使用这个方法，人为将数据类型伪装成文本数据。

+

XMLHttpRequest实例的事件

readyStateChange

readyState 属性的值发生改变，就会触发 readyStateChange 事件

+
progress

上传文件时，XMLHTTPRequest对象的upload属性有一个progress，会不断返回上传的进度。

+
load error abort loadend

load事件表示服务器传来的数据接收完毕，error事件表示请求出错，abort事件表示请求被中断。abort、load和error这三个事件，会伴随一个loadend事件，表示请求结束，但不知道其是否成功。

+

原生 JS 写 AJAX

1
2
3
4
5
6
7
8
9
10
11
let xhr = new XMLHttpReauest()
xhr.open('post', 'http://baidu.com')
xhr.send()
xhr.onreadystatchange = () => {
    if(xhr.readyState === 4) {
        if(xhr.status >= 200 && xhr.status < 400){
            let string = xhr.responseText
            let object = window.JSON.parse(string)
        }
    }
}
+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2018/04/24/myCanvas/index.html b/2018/04/24/myCanvas/index.html index 5fcb1672..96347307 100644 --- a/2018/04/24/myCanvas/index.html +++ b/2018/04/24/myCanvas/index.html @@ -1,909 +1,566 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 在线画板的制作 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

在线画板的制作 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

并不需要过多的 JS 基础就可以实现，尽管代码看起来很不尽人意但是能够完成需要的功能使用者并不关心你的实现方式。预览

- - -

模拟方式

我们最开始的是检测用户的行为，是否按下鼠标左键，当用户按着左键开始移动的时候就开始划线，当用户松开左键那么就不划线，所以需要一个变量来表示是否按下鼠标。并且监听点的点的位置。

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var canvas = document.getElementById('canvas')//获取画板位置
var ctx = canvas.getContext('2d')
var using = false
canvas.onmouseclick = function (e){
  var x = e.clientX
  var y = e.clientY
  //oldpoint
  using = true
  //draw circle()
}
canvas.onmousemove = function (e){
  var x = e.clientX
  var y = e.clientY
  //newpoint
  if(using){
    //draw circle()
    //draw line()
    //oldpoint = newpoint
  }else{
    
  }
}
canvas.onmouseup = function (){
  using = false
}
-

划线

划线是画板最基本的功能，我们可以通过 Canvas MDN 很快的找到我们需要的 API 。但是我们会发现光画点的时候若快速移动就会有地方断开这是 js 并不会高速检测用户行为对于高速的我可以将其两点连线。这就需要我们记录旧的点和新的点，并且要及时更新点。封装一下，可以方便以后改变其颜色与粗细。

-
    -
  • 划线
    • -
-
1
2
3
4
5
6
7
8
9
function drawLine(x1, y1, x2, y2, color, radius) {
    ctx.beginPath();
    ctx.strokeStyle = color
    ctx.moveTo(x1, y1) // 起点
    ctx.lineWidth = 2 * radius
    ctx.lineTo(x2, y2) // 终点
    ctx.stroke()
    ctx.closePath()
}
-
    -
  • 画圆
    • -
-
1
2
3
4
5
6
function drawCircle(x, y, r, color) {
    ctx.beginPath()
    ctx.fillStyle = color
    ctx.arc(x, y, r, 0, 360)
    ctx.fill()
}
-

橡皮擦

对于橡皮擦这个功能我用的clearRect(x, y, width, height)来实现的，但是使用的效果只能在慢速下，快速依然会断断续续，个人的另一个思路就是用画与背景色相同颜色的线来解决该问题。同时我们需要一个值来记录是用橡皮还是画笔。判断在鼠标移动时是应该画画还是擦除。给出两个图标来给用户选择是 paint 还是 clear。

-

颜色与粗细

个人就做的比较粗略，用了两组 list，并且使用 fixed 定位。点击加入 active，代码就比较恶心了。要是这个变得比较好看就需要花更多的功夫来调试我们的 css 了。我只是完成了小部分功能还有很多可以改进的地方。

-

清屏

加入一个图标，其实清屏就是把整个屏幕都覆盖掉。

-
1
2
3
clear.onclick = function () {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
}
-

保存

用 Google 搜索 js canvas save image as image

-

可以在 stackoverflow 看到

-
1
2
3
4
5
download.onclick = function () {
    var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");  
    // here is the most important part because if you dont replace you will get a DOM 18 exception.
    window.location.href = image;
}
-

移动端兼容

为了防止页面缩放

-
1
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-

鼠标兼容，检测是否 onmousetouch 是否为 undefined

-
1
2
3
4
5
if(ontouch !== undefined){
  //canvas.ontouchstart()
}else{
  //canvs.onmouseve()
}
-

触点兼容，手机由于是多点触控，触点就单独封装为一个数组，我们只需要console.log(e) 就可以发现在 touchs 数组下就有 clientX 与 clientY

-

总结

画板的制作可以说是对 canvas 的使用的一种熟悉，同时可应用一些简单的 js。是很不错的上手简单项目，但是想要更好的使用体验还是需要自己不断的学习。

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 在线画板的制作 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

在线画板的制作 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

并不需要过多的 JS 基础就可以实现，尽管代码看起来很不尽人意但是能够完成需要的功能使用者并不关心你的实现方式。预览

+ + +

模拟方式

我们最开始的是检测用户的行为，是否按下鼠标左键，当用户按着左键开始移动的时候就开始划线，当用户松开左键那么就不划线，所以需要一个变量来表示是否按下鼠标。并且监听点的点的位置。

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var canvas = document.getElementById('canvas')//获取画板位置
var ctx = canvas.getContext('2d')
var using = false
canvas.onmouseclick = function (e){
  var x = e.clientX
  var y = e.clientY
  //oldpoint
  using = true
  //draw circle()
}
canvas.onmousemove = function (e){
  var x = e.clientX
  var y = e.clientY
  //newpoint
  if(using){
    //draw circle()
    //draw line()
    //oldpoint = newpoint
  }else{
    
  }
}
canvas.onmouseup = function (){
  using = false
}
+

划线

划线是画板最基本的功能，我们可以通过 Canvas MDN 很快的找到我们需要的 API 。但是我们会发现光画点的时候若快速移动就会有地方断开这是 js 并不会高速检测用户行为对于高速的我可以将其两点连线。这就需要我们记录旧的点和新的点，并且要及时更新点。封装一下，可以方便以后改变其颜色与粗细。

+
    +
  • 划线
    • +
+
1
2
3
4
5
6
7
8
9
function drawLine(x1, y1, x2, y2, color, radius) {
    ctx.beginPath();
    ctx.strokeStyle = color
    ctx.moveTo(x1, y1) // 起点
    ctx.lineWidth = 2 * radius
    ctx.lineTo(x2, y2) // 终点
    ctx.stroke()
    ctx.closePath()
}
+
    +
  • 画圆
    • +
+
1
2
3
4
5
6
function drawCircle(x, y, r, color) {
    ctx.beginPath()
    ctx.fillStyle = color
    ctx.arc(x, y, r, 0, 360)
    ctx.fill()
}
+

橡皮擦

对于橡皮擦这个功能我用的clearRect(x, y, width, height)来实现的，但是使用的效果只能在慢速下，快速依然会断断续续，个人的另一个思路就是用画与背景色相同颜色的线来解决该问题。同时我们需要一个值来记录是用橡皮还是画笔。判断在鼠标移动时是应该画画还是擦除。给出两个图标来给用户选择是 paint 还是 clear。

+

颜色与粗细

个人就做的比较粗略，用了两组 list，并且使用 fixed 定位。点击加入 active，代码就比较恶心了。要是这个变得比较好看就需要花更多的功夫来调试我们的 css 了。我只是完成了小部分功能还有很多可以改进的地方。

+

清屏

加入一个图标，其实清屏就是把整个屏幕都覆盖掉。

+
1
2
3
clear.onclick = function () {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
}
+

保存

用 Google 搜索 js canvas save image as image

+

可以在 stackoverflow 看到

+
1
2
3
4
5
download.onclick = function () {
    var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");  
    // here is the most important part because if you dont replace you will get a DOM 18 exception.
    window.location.href = image;
}
+

移动端兼容

为了防止页面缩放

+
1
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+

鼠标兼容，检测是否 onmousetouch 是否为 undefined

+
1
2
3
4
5
if(ontouch !== undefined){
  //canvas.ontouchstart()
}else{
  //canvs.onmouseve()
}
+

触点兼容，手机由于是多点触控，触点就单独封装为一个数组，我们只需要console.log(e) 就可以发现在 touchs 数组下就有 clientX 与 clientY

+

总结

画板的制作可以说是对 canvas 的使用的一种熟悉，同时可应用一些简单的 js。是很不错的上手简单项目，但是想要更好的使用体验还是需要自己不断的学习。

+ +
+ + + + + + +
+
+ + +
+ + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2018/04/28/jscallapply/index.html b/2018/04/28/jscallapply/index.html index 98a3346b..ae73b5b6 100644 --- a/2018/04/28/jscallapply/index.html +++ b/2018/04/28/jscallapply/index.html @@ -1,912 +1,558 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 简聊 JavaScript call apply 与 bind | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

简聊 JavaScript call apply 与 bind - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

语法

1
2
3
4
5
6
7
function.call(thisArg, arg1, arg2, ...)//在fun函数运行时指定的this值。需要注意的是，指定的this值并不一定是该函数执行时真正的this值，如果这个函数处于非严格模式下，则指定为null和undefined的this值会自动指向全局对象(浏览器中就是window对象)，同时值为原始值(数字，字符串，布尔值)的this会指向该原始值的自动包装对象。
func.apply(thisArg, [argsArray])//同上
fun.bind(thisArg[, arg1[, arg2[, ...]]])
//thisArg当绑定函数被调用时，该参数会作为原函数运行时的 this 指向。当使用new 操作符调用绑定函数时，该参数无效。
- -

call 与 apply

从语法上就可以看出出两个是比较相似的

-
    -
  • 都可以来改变函数的this对象的指向
    • -
  • 不过一个是依次传入参数值，一个传入一个数组
    • -
-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function people() {}
people.prototype = {
    who: 'i',
    say: function() {
        console.log(this.who + ' love you');
    }
}
var ali = new people;
ali.say();//i love you
lisi = {
	who: 'lisi'
}
ali.say.call(lisi)//lisi love you
ali.say.apply(lisi)//lisi love you
ali.say.call(ali)//i love you
-

所以，可以看出 call 和 apply 是为了动态改变 this 而出现的，当一个 object 没有某个方法，但是其他的有，我们可以借助call或apply用其它对象的方法来操作。

-
1
2
3
4
5
6
7
var a = function (x, y){
	return x + y
}
undefined
a.call(this, 1, 2)//3
a.call(undefined, 1, 2)//3
a.apply(this, [1, 2])//3
-

JavaScript 中，某个函数的参数数量是不固定的，因此要说适用条件的话，当你的参数是明确知道数量时用 call 。而不确定的时候用 apply，然后把参数 push 进数组传递进去。当参数数量不确定时，函数内部也可以通过 arguments 这个数组来遍历所有的参数。

-

bind

-

bind() 函数会创建一个新函数（称为绑定函数），新函数与被调函数（绑定函数的目标函数）具有相同的函数体（在 ECMAScript 5 规范中内置的call属性）。当新函数被调用时 this 值绑定到 bind() 的第一个参数，该参数不能被重写。绑定函数被调用时，bind() 也接受预设的参数提供给原函数。一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器。提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。(mdn)

-
-

觉得 mdn 上的例子很好了就直接抄下来

-
1
2
3
4
5
6
7
8
9
10
11
this.x = 9
var modle = {
  x: 81,
  getX: function(){return this.x}
}
modle.getX()//返回 81
var newX = modle.getX
newX()//9,this 指向全局
//创建新函数，将this绑定到modle对象
var nextX = newX.bind(modle)
nextX()//81
-

可以看到bind并不是立即执行的

-

三者比较

1
2
3
4
5
6
7
8
9
10
11
var obj = {
    x: 8,
};
var foo = {
    getX: function() {
        return this.x;
    }
}
console.log(foo.getX.bind(obj)());  //8
console.log(foo.getX.call(obj));    //8
console.log(foo.getX.apply(obj));   //8
-
    -
  • apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；
    • -
  • apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；
    • -
  • apply 、 call 、bind 三者都可以利用后续参数传参；
    • -
  • bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用 。
    • -
-

面试题

定义一个 log 方法，让它可以代理 console.log 方法

-
1
2
3
4
5
6
7
8
//常见方式
function log(msg)　{
  console.log(msg);
}
//apply
function log(){
  console.log.apply(this, arguments)
}
-
参考
- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 简聊 JavaScript call apply 与 bind | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

简聊 JavaScript call apply 与 bind + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

语法

1
2
3
4
5
6
7
function.call(thisArg, arg1, arg2, ...)//在fun函数运行时指定的this值。需要注意的是，指定的this值并不一定是该函数执行时真正的this值，如果这个函数处于非严格模式下，则指定为null和undefined的this值会自动指向全局对象(浏览器中就是window对象)，同时值为原始值(数字，字符串，布尔值)的this会指向该原始值的自动包装对象。

func.apply(thisArg, [argsArray])//同上

fun.bind(thisArg[, arg1[, arg2[, ...]]])

//thisArg当绑定函数被调用时，该参数会作为原函数运行时的 this 指向。当使用new 操作符调用绑定函数时，该参数无效。
+ +

call 与 apply

从语法上就可以看出出两个是比较相似的

+
    +
  • 都可以来改变函数的this对象的指向
    • +
  • 不过一个是依次传入参数值，一个传入一个数组
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function people() {}
people.prototype = {
    who: 'i',
    say: function() {
        console.log(this.who + ' love you');
    }
}
var ali = new people;
ali.say();//i love you
lisi = {
	who: 'lisi'
}
ali.say.call(lisi)//lisi love you
ali.say.apply(lisi)//lisi love you
ali.say.call(ali)//i love you
+

所以，可以看出 call 和 apply 是为了动态改变 this 而出现的，当一个 object 没有某个方法，但是其他的有，我们可以借助call或apply用其它对象的方法来操作。

+
1
2
3
4
5
6
7
var a = function (x, y){
	return x + y
}
undefined
a.call(this, 1, 2)//3
a.call(undefined, 1, 2)//3
a.apply(this, [1, 2])//3
+

JavaScript 中，某个函数的参数数量是不固定的，因此要说适用条件的话，当你的参数是明确知道数量时用 call 。而不确定的时候用 apply，然后把参数 push 进数组传递进去。当参数数量不确定时，函数内部也可以通过 arguments 这个数组来遍历所有的参数。

+

bind

+

bind() 函数会创建一个新函数（称为绑定函数），新函数与被调函数（绑定函数的目标函数）具有相同的函数体（在 ECMAScript 5 规范中内置的call属性）。当新函数被调用时 this 值绑定到 bind() 的第一个参数，该参数不能被重写。绑定函数被调用时，bind() 也接受预设的参数提供给原函数。一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器。提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。(mdn)

+
+

觉得 mdn 上的例子很好了就直接抄下来

+
1
2
3
4
5
6
7
8
9
10
11
this.x = 9
var modle = {
  x: 81,
  getX: function(){return this.x}
}
modle.getX()//返回 81
var newX = modle.getX
newX()//9,this 指向全局
//创建新函数，将this绑定到modle对象
var nextX = newX.bind(modle)
nextX()//81
+

可以看到bind并不是立即执行的

+

三者比较

1
2
3
4
5
6
7
8
9
10
11
var obj = {
    x: 8,
};
var foo = {
    getX: function() {
        return this.x;
    }
}
console.log(foo.getX.bind(obj)());  //8
console.log(foo.getX.call(obj));    //8
console.log(foo.getX.apply(obj));   //8
+
    +
  • apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；
    • +
  • apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；
    • +
  • apply 、 call 、bind 三者都可以利用后续参数传参；
    • +
  • bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用 。
    • +
+

面试题

定义一个 log 方法，让它可以代理 console.log 方法

+
1
2
3
4
5
6
7
8
//常见方式
function log(msg)　{
  console.log(msg);
}
//apply
function log(){
  console.log.apply(this, arguments)
}
+
参考
+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2018/04/29/Whats-JSONP/index.html b/2018/04/29/Whats-JSONP/index.html new file mode 100644 index 00000000..b3ae7aee --- /dev/null +++ b/2018/04/29/Whats-JSONP/index.html @@ -0,0 +1,552 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + What's JSONP | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

What's JSONP + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

wiki 上解释到 JSONP is JSON with padding

其实个人看来啥也没说啊。stackoverflow上还是有不错的解释。我在这里会解释我看来的 JSONP

+ +

现有两个人想进行数据交互，他们是

+

请求方：网站1的前端程序员（浏览器）

+

响应方：网站2的后端程序猿（服务器）

+

JSONP 就是为解决服务器与客服端跨源（网站1到网站2）通信，简单实用

+
    +

  1. 请求方动态创建 script， src 指向响应方，传递查询参数 ?callback=xxx

    +
    2. +

  2. 响应方根据查询参数 callback, 构造出

    +

    xxx.call(undefined, ‘msg’)

    +

    xxx(‘msg’)这样的响应

    +
    3. +

  3. 浏览器接到响应就会去执行 xxx(‘msg’)

    +
    4. +

  4. 请求方就知道了他要的数据了

    +
    5. +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
button.addEventListener('click', (e) => {
  let script = document.creatElement('script')//动态script
  let functionName = 'marsorsun' + parseInt(Math.radom()*1000000, 10)//函数名随机
  window[functionName] = function(){
    amount.innerText = amount.innerText - 1
  }
  script.src = '/pay?callback=' + functionName
  document.body.appendChild(script)
  script.onload = function(e){//success
    e.currentTarget.remove()//从页面中移除<script>
    delete window[functionName]//干掉随机数
  }
  script.onerror = function() {
    e.currentTarget.remove()
  }
})
+
1
2
3
4
5
6
7
8
9
10
11
//后端代码
if(path === '/pay'){
  let amount = fs.readFileSync('./db', 'utf8')//db中就一个数100
  amount--
  fs.writeFileSync('./db', amount)
  response.setHeader('Content-type', 'application/javascript')
  response.write(`
	${callback}.call('undefined', 'success')
`)
  response.end()
}
+
1
2
3
4
5
6
7
8
9
10
11
12
//jQuery 直接简单到你看不懂
$.ajax({
 url: "http://jack.com:8002/pay",
 dataType: "jsonp",
 success: function( response ) {
     if(response === 'success'){
     amount.innerText = amount.innerText - 1
     }
 }
 })

 $.jsonp()
+

参考：

+ + +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2018/05/01/box-sizing/index.html b/2018/05/01/box-sizing/index.html index b7610552..742f7be9 100644 --- a/2018/05/01/box-sizing/index.html +++ b/2018/05/01/box-sizing/index.html @@ -1,855 +1,524 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - box-sizing | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

box-sizing - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

盒模型这东西绝对算得上是 web 领域的高频词汇啦

-

这东西两个值，之前是三个

-

content-box（默认）标准盒模型

-

border-box: width = border + padding +(内容的) width

-

参考

-

前端工程师手册

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + box-sizing | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

box-sizing + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

盒模型这东西绝对算得上是 web 领域的高频词汇啦

+

这东西两个值，之前是三个

+

content-box（默认）标准盒模型

+

border-box: width = border + padding +(内容的) width

+

参考

+

前端工程师手册

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2018/05/17/stacking-content/index.html b/2018/05/17/stacking-content/index.html index 047538d3..58e0fc8f 100644 --- a/2018/05/17/stacking-content/index.html +++ b/2018/05/17/stacking-content/index.html @@ -1,904 +1,550 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 堆叠顺序 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

堆叠顺序 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

就好像一个div他的background的颜色是会在border下面的，可以通过设置rgba来验证

-
    -
  1. background
    2. -
  2. boder
    3. -
  3. 块级
    4. -
  4. 浮动
    5. -
  5. 内联
    6. -
  6. z-index: 0（定位才有效）
    7. -
  7. z-index(+)
    8. -
- -

堆叠上下文

只要满足以下的条件

-
-
    -
  • 根元素 (HTML),
    • -
  • z-index 值不为 “auto”的 绝对/相对定位，
    • -
  • 一个 z-index 值不为 “auto”的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
    • -
  • opacity 属性值小于 1 的元素（参考 the specification for opacity），
    • -
  • transform 属性值不为 “none”的元素，
    • -
  • mix-blend-mode 属性值不为 “normal”的元素，
    • -
  • filter值不为“none”的元素，
    • -
  • perspective值不为“none”的元素，
    • -
  • isolation 属性被设置为 “isolate”的元素，
    • -
  • position: fixed
    • -
  • 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考 这篇文章）
    • -
  • -webkit-overflow-scrolling 属性被设置 “touch”的元素
    • -
-
-

MDN stacking content

-

张鑫旭

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 堆叠顺序 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

堆叠顺序 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

就好像一个div他的background的颜色是会在border下面的，可以通过设置rgba来验证

+
    +
  1. background
    2. +
  2. boder
    3. +
  3. 块级
    4. +
  4. 浮动
    5. +
  5. 内联
    6. +
  6. z-index: 0（定位才有效）
    7. +
  7. z-index(+)
    8. +
+ +

堆叠上下文

只要满足以下的条件

+
+
    +
  • 根元素 (HTML),
    • +
  • z-index 值不为 “auto”的 绝对/相对定位，
    • +
  • 一个 z-index 值不为 “auto”的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
    • +
  • opacity 属性值小于 1 的元素（参考 the specification for opacity），
    • +
  • transform 属性值不为 “none”的元素，
    • +
  • mix-blend-mode 属性值不为 “normal”的元素，
    • +
  • filter值不为“none”的元素，
    • +
  • perspective值不为“none”的元素，
    • +
  • isolation 属性被设置为 “isolate”的元素，
    • +
  • position: fixed
    • +
  • 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考 这篇文章）
    • +
  • -webkit-overflow-scrolling 属性被设置 “touch”的元素
    • +
+
+

MDN stacking content

+

张鑫旭

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2018/05/20/jQuery-first/index.html b/2018/05/20/jQuery-first/index.html deleted file mode 100644 index 7e5aa394..00000000 --- a/2018/05/20/jQuery-first/index.html +++ /dev/null @@ -1,890 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 初探 jQuery | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

初探 jQuery - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

jQuery 可以说是大部分网站都会使用到的库了 builtwith

今天从简单的地方入手去模拟 jQuery 的实现，但还不是真的实现原理，但是可以帮助我们去理解学习 jQuery ，其实程序员都是害怕麻烦的，有这么多的库就是为了让自己尽可能的少打代码，所以就将完成复杂过程的代码封装起来，在下一次用的时候只需要给出参数就能复用之前的代码使得自己不去干重复而无意义的事情，但是呢作为初学者直接就去使用 jQuery 看上去并无大碍，但一般就不会看到他最本质的东西。所以模拟来实现一个jQuery

- -

需求

1
2
3
4
5
6
window.jQuery = ???
window.$ = jQuery
var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi
-

分析

    -
  1. $('div') 可以看出我们需要出入一个参数（jQuery 会自动判断为选择器还是节点）
    2. -
  2. 我们需要在该函数封装两个方法addClass() setText()
    3. -
  3. 考虑到 div 可能不止一个需要用一个对象来保存多个节点
    4. -
-

jQuery 函数

根据传入参数的类型来判断如何初始化节点对象

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
window.jQuery = function(node){
  let nodes = {}//声明一个空对象节点
  if(typeof node === 'string'){
    let arr = document.querySelectorAll(node)
    for(let i = 0; i < arr.length; i++){
        nodes[i] = arr[i]
      }
      nodes.length = arr.length
  }else if(typeof node === 'Node'){
    nodes[0] = node
    nodes.length = 1
  }
  
  return nodes
}
window.$ = jQuery//给他弄一个名字让大家都不会弄重的名字
-

addClass() 函数

使用 classList.add()

-
1
2
3
4
5
6
7
nodes.addClass = function(style){
    if(typeof style === 'string'){
      for(let i =0; i < nodes.length; i++){
        nodes[i].classList.add(style)
      }
    }
  }
-

setText() 函数

更改 textContext 属性

-
1
2
3
4
5
nodes.setText = function(message){
  for(let i =0; i < nodes.length; i++){
      nodes[i].textContent = message
    }
}
-

效果

-

小结

其实 jQuery 也就是一个对象，只是他单独封装他的属性与方法，将 DOM 的方法与属性隐藏得更深了一点，使用起来更方便更强大，兼容性更强。

-

思考

-
1
2
> <div id=x></div>
>
-
-

>

-
-
1
2
3
> var div = document.getElementById('x')
> var div = ('#x')
>
-
-

>

-
-

请说出 div 和 $div 的联系和区别。

-
-

document.getElementById()返回的是 DOM 对象，而 $() 返回的是 jQuery 对象
div 和 $div 的联系是：
只要 $(div)就可以把 div变成$div
两种转换方式将一个jQuery对象转换成 DOM 对象：[index]和.get(index);
只要 $div[0] 与 $div.get(0) 就能$div 变成 div
div 和 $div 的区别是：
div 的属性和方法有appendChild(),cloneNode(),contains(),hasChildNodes(),insertBefore(),isEqualNode(),isSameNode(),removeChild(),replaceChild(),normalize()
$div 的 属性和方法有 add,addBack,addClass,after,ajaxComplete,ajaxError,ajaxSend,ajaxStart,ajaxStop,ajaxSuccess,andSelf,animate,append,appendTo...

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git "a/2018/05/27/\347\247\273\345\212\250\347\253\257\345\246\202\344\275\225\351\200\202\351\205\215\357\274\210\345\223\215\345\272\224\345\274\217\357\274\211/index.html" "b/2018/05/27/\347\247\273\345\212\250\347\253\257\345\246\202\344\275\225\351\200\202\351\205\215\357\274\210\345\223\215\345\272\224\345\274\217\357\274\211/index.html" index c9108cb7..83b78918 100644 --- "a/2018/05/27/\347\247\273\345\212\250\347\253\257\345\246\202\344\275\225\351\200\202\351\205\215\357\274\210\345\223\215\345\272\224\345\274\217\357\274\211/index.html" +++ "b/2018/05/27/\347\247\273\345\212\250\347\253\257\345\246\202\344\275\225\351\200\202\351\205\215\357\274\210\345\223\215\345\272\224\345\274\217\357\274\211/index.html" @@ -1,908 +1,554 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 移动端如何适配（响应式） | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

移动端如何适配（响应式） - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

meta viewport

使用此标签就是为了告诉浏览器你别给我乱缩放，按我的标准来。

-
1
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0" >
-

viewport mata标签的每一对name/value都是一条指令。总共有6条指令：

- -
    -
  • width： 用来设置layout viewport的宽度.
    • -
  • initial-scale： 用来设置页面的初始缩放值以及layout viewport的宽度。
    • -
  • minimum-scale： 用来设置允许的最小缩放值(例如，用户可以缩小至什么程度)。
    • -
  • maximum-scale： 用来设置允许的最大缩放值(例如，用户可以放大至什么程度)。
    • -
  • height： 期望用于设置layout viewport的高度。但一直没被支持。
    • -
  • user-scalable： 当设置为no时，则禁止用户进行缩放。
    • -
-

媒体查询

同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。就比如

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}
-

根据不同设备的宽度来进行 css 的选择，但是看各大网站选择响应式布局的其实是不多的，在新闻和博客上的应用要较多一点，应该是选择 css 不如直接重写一个。

-

动态 REM

MDN 上写道

-
-

这个单位代表根元素的 font-size 大小（例如 <html> 元素的font-size）。

-
-

个人总结：rem 大小看的是在<html>的 font-size（root em）， 而 em 大小看的是在所处标签的 font-size，两者没啥必然联系，一个 em 的大小一般就是一个字的大小或则是M的大小。

-

动态 REM 是在移动端才会用到的，我们希望我们的设计稿在不同分辨率的移动设备上得到的展示效果是一样的。那么就要求我们使用的 <length> 可以自动识别设备宽度并进行缩放。一般的做法就是引入一段 javaScript 这样子来获取设备的宽度并进行对 <html> 的 font-size 的设置

-
1
2
3
4
5
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script>
    var pageWidth = window.innerWidth
    document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
</script>
-

这个时候我们再去使用 1rem 他就代表整个页面的宽度，他会根据不同的页面宽度来调整自己的值，这样设计稿就不会失真了。

-

参考资料

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 移动端如何适配（响应式） | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

移动端如何适配（响应式） + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

meta viewport

使用此标签就是为了告诉浏览器你别给我乱缩放，按我的标准来。

+
1
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0" >
+

viewport mata标签的每一对name/value都是一条指令。总共有6条指令：

+ +
    +
  • width： 用来设置layout viewport的宽度.
    • +
  • initial-scale： 用来设置页面的初始缩放值以及layout viewport的宽度。
    • +
  • minimum-scale： 用来设置允许的最小缩放值(例如，用户可以缩小至什么程度)。
    • +
  • maximum-scale： 用来设置允许的最大缩放值(例如，用户可以放大至什么程度)。
    • +
  • height： 期望用于设置layout viewport的高度。但一直没被支持。
    • +
  • user-scalable： 当设置为no时，则禁止用户进行缩放。
    • +
+

媒体查询

同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。就比如

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}
+

根据不同设备的宽度来进行 css 的选择，但是看各大网站选择响应式布局的其实是不多的，在新闻和博客上的应用要较多一点，应该是选择 css 不如直接重写一个。

+

动态 REM

MDN 上写道

+
+

这个单位代表根元素的 font-size 大小（例如 <html> 元素的font-size）。

+
+

个人总结：rem 大小看的是在<html>的 font-size（root em）， 而 em 大小看的是在所处标签的 font-size，两者没啥必然联系，一个 em 的大小一般就是一个字的大小或则是M的大小。

+

动态 REM 是在移动端才会用到的，我们希望我们的设计稿在不同分辨率的移动设备上得到的展示效果是一样的。那么就要求我们使用的 <length> 可以自动识别设备宽度并进行缩放。一般的做法就是引入一段 javaScript 这样子来获取设备的宽度并进行对 <html> 的 font-size 的设置

+
1
2
3
4
5
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script>
    var pageWidth = window.innerWidth
    document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
</script>
+

这个时候我们再去使用 1rem 他就代表整个页面的宽度，他会根据不同的页面宽度来调整自己的值，这样设计稿就不会失真了。

+

参考资料

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/2018/06/01/webpack-\345\210\235\350\257\206/index.html" "b/2018/06/01/webpack-\345\210\235\350\257\206/index.html" index ec0ed5a0..3371119f 100644 --- "a/2018/06/01/webpack-\345\210\235\350\257\206/index.html" +++ "b/2018/06/01/webpack-\345\210\235\350\257\206/index.html" @@ -1,897 +1,543 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - webpack 初识 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

webpack 初识 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

为啥要用 webpack

sass

为了更快更方便的编写 css 代码你是有可能使用 sass 等等，但是很明显的你不可能在 html 中直接的应用 sass，你必使用进行了转译才可以啊。

-
1
node-sass input output
-

但是每一次更改都要重新转译很麻烦，所以一般就是

-
1
node-sass input output -w
-

以上 intput output 都是原文件地址。

- -

注意点：我是在 linux 系统上的，大家按照官网做就好，但是你要知道这是一个玄学。

-

babel

有了 babel 你可以畅快的敲代码而不管 ie 是否兼容，babel 会帮你完成的。

-
1
./node_modules/.bin/babel src -d lib
-

src 原地址 lib 目的地址，对 shell 不熟悉的我懵逼了几分钟，要花点时间看看 shell 了。

-

为了自动化的编程当然要监视是否进行了更改啊

-
1
./node_modules/.bin/babel src -d lib -w
-

不过当时是有问题的，通过 google 在 stackoverflow 解决

-

好了看到这两个小东西是不是感觉自己的时间会大大减少啊，小吊的样子，但是如果开很多的监视窗口是不是会觉得很烦啊

-

这个时候就有了 webpack 当然他前面还有 gulp 等自动化工具，可惜屎了，我想想webpack 这个玄学的东西很有可能也后不久了。

-

webpack

玄学的东西

-

别看中文文档，至少你的看看英文的再看中文有没有大的区别，至少我看的时候差别不是一般的大。

-

然后就可以 google 搜索 webpack sass/babel 你就会得到 sass loader 和 babel loader 按着 github 官方文档走没啥问题的。

-

每次 webpack 会自动帮你完成之前你要自己完成的步骤，你可以这样

-
1
npx webpack -w
-

如果你看到 bundle.js 中的代码为一行是因为 webpack 4 的模式默认为生产者模式，你只要改成开发者模式即可。

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + webpack 初识 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

webpack 初识 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

为啥要用 webpack

sass

为了更快更方便的编写 css 代码你是有可能使用 sass 等等，但是很明显的你不可能在 html 中直接的应用 sass，你必使用进行了转译才可以啊。

+
1
node-sass input output
+

但是每一次更改都要重新转译很麻烦，所以一般就是

+
1
node-sass input output -w
+

以上 intput output 都是原文件地址。

+ +

注意点：我是在 linux 系统上的，大家按照官网做就好，但是你要知道这是一个玄学。

+

babel

有了 babel 你可以畅快的敲代码而不管 ie 是否兼容，babel 会帮你完成的。

+
1
./node_modules/.bin/babel src -d lib
+

src 原地址 lib 目的地址，对 shell 不熟悉的我懵逼了几分钟，要花点时间看看 shell 了。

+

为了自动化的编程当然要监视是否进行了更改啊

+
1
./node_modules/.bin/babel src -d lib -w
+

不过当时是有问题的，通过 google 在 stackoverflow 解决

+

好了看到这两个小东西是不是感觉自己的时间会大大减少啊，小吊的样子，但是如果开很多的监视窗口是不是会觉得很烦啊

+

这个时候就有了 webpack 当然他前面还有 gulp 等自动化工具，可惜屎了，我想想webpack 这个玄学的东西很有可能也后不久了。

+

webpack

玄学的东西

+

别看中文文档，至少你的看看英文的再看中文有没有大的区别，至少我看的时候差别不是一般的大。

+

然后就可以 google 搜索 webpack sass/babel 你就会得到 sass loader 和 babel loader 按着 github 官方文档走没啥问题的。

+

每次 webpack 会自动帮你完成之前你要自己完成的步骤，你可以这样

+
1
npx webpack -w
+

如果你看到 bundle.js 中的代码为一行是因为 webpack 4 的模式默认为生产者模式，你只要改成开发者模式即可。

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/2018/06/05/Vue-\345\237\272\347\241\200\346\226\207\346\241\243/index.html" "b/2018/06/05/Vue-\345\237\272\347\241\200\346\226\207\346\241\243/index.html" new file mode 100644 index 00000000..a22faa14 --- /dev/null +++ "b/2018/06/05/Vue-\345\237\272\347\241\200\346\226\207\346\241\243/index.html" @@ -0,0 +1,559 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Vue 基础文档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

Vue 基础文档 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

Vue 实例

创建一个 Vue 实例

1
2
3
var vm = new Vue({
  // 选项
})
+

数据与方法

Object.freeze()

Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化

+ +
1
2
3
4
5
<div id="app">
  <p>{{ foo }}</p>
  <!-- 这里的 `foo` 不会更新！ -->
  <button v-on:click="foo = 'baz'">Change it</button>
</div>
+
1
2
3
4
5
6
7
8
9
10
var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})
+

实例生命周期钩子

生命周期钩子就好像是为了方便在不同的阶段中选择一个阶段去干该干的事

+

有 created、mounted、updated 和 destroyed等。

+
+

生命周期钩子的 this 上下文指向调用它的 Vue 实例,所以不要在选项属性上或回调上使用箭头函数

+
+

+

模板语法

也可以不使用，直接用 render()

+

文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值

+

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。

+

原始 HTML

1
2
3
4
<div id="app">
 <p>Using mustaches: {{ rawHtml }}</p>
 <p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>
+
1
2
3
4
5
6
new Vue({
  el: '#app',
  data: {
    rawHtml: '<span style="color:red">Hello Vue.js!</span>'
  }
})
+
+

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

+
+

特性

1
2
3
<div id="app">
 <button v-bind:disabled="isButtonDisabled">Button</button>
</div>
+
1
2
3
4
5
6
new Vue({
  el: '#app',
  data: {
  	isButtonDisabled: undefined,
  }
})
+

指令

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 特性

+

另一个例子是 v-on 指令，它用于监听 DOM 事件

+

.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

+
1
2
3
4
5
6
7
8
9
10
11
<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>
+

计算属性缓存 vs 方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }，
  methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}
})
+

同名的函数是不可以的，开始的时候他会直接找到methods中的函数，就不会找到，computed的同名函数，这是要注意的。

+

不同的是计算属性是基于它们的依赖进行缓存的

+

计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

+

我对侦听器的了解感觉还不够

+

Class 与 Style 绑定

表达式结果的类型除了字符串之外，还可以是对象或数组。

+

组件基础

组件是可复用的 Vue 实例，且带有一个名字

+
1
2
3
4
5
6
7
8
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
+

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。

+

data 必须是一个函数

+
1
2
3
4
5
data: function () {
  return {
    count: 0
  }
}
+
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/2018/06/12/\347\275\221\346\230\223\344\272\221\351\237\263\344\271\220\351\241\271\347\233\256\350\270\251\345\235\221\344\270\216\345\245\227\350\267\257/index.html" "b/2018/06/12/\347\275\221\346\230\223\344\272\221\351\237\263\344\271\220\351\241\271\347\233\256\350\270\251\345\235\221\344\270\216\345\245\227\350\267\257/index.html" index a23c0836..f9a948c7 100644 --- "a/2018/06/12/\347\275\221\346\230\223\344\272\221\351\237\263\344\271\220\351\241\271\347\233\256\350\270\251\345\235\221\344\270\216\345\245\227\350\267\257/index.html" +++ "b/2018/06/12/\347\275\221\346\230\223\344\272\221\351\237\263\344\271\220\351\241\271\347\233\256\350\270\251\345\235\221\344\270\216\345\245\227\350\267\257/index.html" @@ -1,897 +1,543 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 网易云音乐项目踩坑与套路 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

网易云音乐项目踩坑与套路 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

只是记录自己在写网易云的项目自己遇到的一些坑与使用到的一些小套路

-

MVC

把代码敲两遍，数十次 mvc，你会明白他的强大。

-

在编写admin.html使用了 MVC 模式使得代码更加的清晰和简单而强大

- -
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
  let view = {
    el: '#selector',
    template: `html`,
    render(data){
      $(this.el).html(this.template)
    }
  },
  let moudel = {
  	data: {},      
  }
  let controller = {
  	view: null,
    moudel: null,
    init(view, moudel){
      view = this.view
      moudel = this.moudel
      this.view.render(this.moudel.data)
      this.bindEvent()
    },
    bindEvent(){}，
  }
  controller.init(view, moudel)
}
-

浅拷贝与深拷贝

之前感觉这东东的概念啥的并不难，可是是个坑，我很久才发现，在admin.html上传歌曲后没事，但是上传第二首发现之前哪一首歌的名字在屏幕上与现在这一首的名字相同，debug后才发现了这一段代码

1
Object.assign(this.object, ...attributes)

-

Object.assign这个方法是个坑啊，这方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。

-

所以说我改成

-
1
this.data = {id, ...attribute}
-

就好了，但你可能说这他么不一样吗?哈哈地址不一样的,我当时也想了很久,我在后面代码传出去了this.data, 可是在使用Object.assign()并不会改变this.data的地址,而现在这方法是让它指向另一块地址,这样就不会导致第二次修改而导致第一次的值改变。

-

感觉就是最好不用 Object.assign()

-

不过我选择了另一方法，在使用 this.data时对其进行深拷贝这样就不会是一个地址了

-
1
let data = JSON.Parse(JSON.Stringify(this.model.data))
-

发布与订阅模式

为了实现传说中的低耦合高内聚，其实是为了各个模块中的数据能进行方便交互而暴露出一个小口子，定于的时候告知到调用的函数名，要发布的时候使用回调就可以了。

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
window.eventHub = {
  events:{
    //事件名
    人明日报：[],
    光明日报：[],
  },
  //订阅
  on(eventName, fn){
    if(this.events[eventName] === undefined){
      this.events[eventName] === []
    }
    this.events[eventName].push(fn)
  },
  //发布
  emit(eventName, data){
    fnList = this.events[eventName]
    fnList.map((fn)=>{
      fn.call(undefined, data)
    })
  },
}
-

字母的错?

说实在JavaScript感觉特坑啊, 有时候你打错了参数,不好意思连浏览器都可能不给你报错,你只有一步一步的去debug,可以说真的要。今天是被它虐得死去活来的。说实在这与自己思路不够清晰有关。

-

流程图

刚刚开始敲代码的时候，老师就说过画流程图的重要性，可是一直我都是不以为然，可适当代码的量上去了以后就发现自己脑袋中的栈不够用了，不知道前几部干了啥，后几部该咋走，后来用百度脑图把思路先想好在慢慢来感觉条理清晰很多。先想好要干啥在开始干。

-

为何不能两次上传

第二次自己写这个项目的时候， 将之前的上传区域与创建新歌曲的 mvc 写在了一起，没有分开写，
后来发现歌曲上传一次后就不能再上传，刷新页面后又能上传一次，但是我没发现这重要的一点，一直以为是七牛 sdk 有问题。后来静静思考，是每一次上传后就不能再上传了，肯定是上传后的问题。我后来发现我每次 subit 表单以后都 render() 了 可是每 render() 应该再次调用 qiniuinit() 函数，这样来问题就引刃而解。

-

jquery on(‘click’) 失效

在制作音乐播放页面的时候去监听页面，一直发现监听无效，辗转多次都未发现原因，后来换了一个元素来进行事件委托就可以，仔细想应该是在对图片应用时的对委托元素的display与visibity进行了修改。

-

display：none 还是 visibility: hidden

隐藏一个元素可以通过把display属性设置为”none”，或把visibility属性设置为”hidden”。但是请注意，这两种方法会产生不同的结果。

-

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。所以当她再次显现的时候就不会影想布局感觉用这个会好很多。

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 网易云音乐项目踩坑与套路 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

网易云音乐项目踩坑与套路 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

只是记录自己在写网易云的项目自己遇到的一些坑与使用到的一些小套路

+

MVC

把代码敲两遍，数十次 mvc，你会明白他的强大。

+

在编写admin.html使用了 MVC 模式使得代码更加的清晰和简单而强大

+ +
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
  let view = {
    el: '#selector',
    template: `html`,
    render(data){
      $(this.el).html(this.template)
    }
  },
  let moudel = {
  	data: {},      
  }
  let controller = {
  	view: null,
    moudel: null,
    init(view, moudel){
      view = this.view
      moudel = this.moudel
      this.view.render(this.moudel.data)
      this.bindEvent()
    },
    bindEvent(){}，
  }
  controller.init(view, moudel)
}
+

浅拷贝与深拷贝

之前感觉这东东的概念啥的并不难，可是是个坑，我很久才发现，在admin.html上传歌曲后没事，但是上传第二首发现之前哪一首歌的名字在屏幕上与现在这一首的名字相同，debug后才发现了这一段代码

1
Object.assign(this.object, ...attributes)

+

Object.assign这个方法是个坑啊，这方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。

+

所以说我改成

+
1
this.data = {id, ...attribute}
+

就好了，但你可能说这他么不一样吗?哈哈地址不一样的,我当时也想了很久,我在后面代码传出去了this.data, 可是在使用Object.assign()并不会改变this.data的地址,而现在这方法是让它指向另一块地址,这样就不会导致第二次修改而导致第一次的值改变。

+

感觉就是最好不用 Object.assign()

+

不过我选择了另一方法，在使用 this.data时对其进行深拷贝这样就不会是一个地址了

+
1
let data = JSON.Parse(JSON.Stringify(this.model.data))
+

发布与订阅模式

为了实现传说中的低耦合高内聚，其实是为了各个模块中的数据能进行方便交互而暴露出一个小口子，定于的时候告知到调用的函数名，要发布的时候使用回调就可以了。

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
window.eventHub = {
  events:{
    //事件名
    人明日报：[],
    光明日报：[],
  },
  //订阅
  on(eventName, fn){
    if(this.events[eventName] === undefined){
      this.events[eventName] === []
    }
    this.events[eventName].push(fn)
  },
  //发布
  emit(eventName, data){
    fnList = this.events[eventName]
    fnList.map((fn)=>{
      fn.call(undefined, data)
    })
  },
}
+

字母的错?

说实在JavaScript感觉特坑啊, 有时候你打错了参数,不好意思连浏览器都可能不给你报错,你只有一步一步的去debug,可以说真的要。今天是被它虐得死去活来的。说实在这与自己思路不够清晰有关。

+

流程图

刚刚开始敲代码的时候，老师就说过画流程图的重要性，可是一直我都是不以为然，可适当代码的量上去了以后就发现自己脑袋中的栈不够用了，不知道前几部干了啥，后几部该咋走，后来用百度脑图把思路先想好在慢慢来感觉条理清晰很多。先想好要干啥在开始干。

+

为何不能两次上传

第二次自己写这个项目的时候， 将之前的上传区域与创建新歌曲的 mvc 写在了一起，没有分开写，
后来发现歌曲上传一次后就不能再上传，刷新页面后又能上传一次，但是我没发现这重要的一点，一直以为是七牛 sdk 有问题。后来静静思考，是每一次上传后就不能再上传了，肯定是上传后的问题。我后来发现我每次 subit 表单以后都 render() 了 可是每 render() 应该再次调用 qiniuinit() 函数，这样来问题就引刃而解。

+

jquery on(‘click’) 失效

在制作音乐播放页面的时候去监听页面，一直发现监听无效，辗转多次都未发现原因，后来换了一个元素来进行事件委托就可以，仔细想应该是在对图片应用时的对委托元素的display与visibity进行了修改。

+

display：none 还是 visibility: hidden

隐藏一个元素可以通过把display属性设置为”none”，或把visibility属性设置为”hidden”。但是请注意，这两种方法会产生不同的结果。

+

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。所以当她再次显现的时候就不会影想布局感觉用这个会好很多。

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2018/06/13/cssroad/index.html b/2018/06/13/cssroad/index.html index 4c1f114c..b1faeccd 100644 --- a/2018/06/13/cssroad/index.html +++ b/2018/06/13/cssroad/index.html @@ -1,870 +1,539 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - CSS 套路 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

CSS 套路 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

CSS 总是会出现我们意想不到的结果，在这里记录一些会用到的小技巧来加深自己的记忆与理解。

- -
    -

  • 浮动过后在父级加 clearfix

    -
    1
    2
    3
    4
    5
    .clearfix {
    	clear:both;
    	content: '';
    	display:block;
    }
    -
    • -

  • 一般不写宽高

    -
    • -

  • 写宽的话多用 max-width 以便自适应

    -
    • -

  • margin可能导致撑出去(a 比 div 高)，用display：block

    -
    • -

  • 多写一个 div 来设置 margin可以防止 width 变宽

    -
    • -

  • 对于绝对定位子集position：absolute，那么记得给父级一个position：relative

    -
    • -

  • css 三角形

    -
    1
    2
    3
    4
    5
    .triangle {
      border: 10px solid black;
      boder-top-color:red;
    }
    /*就可以看到三角形，可以设置某一边的宽，把颜色变透明来得到想要的三角形*/
    -

    ​

    -
    • -
- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + CSS 套路 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

CSS 套路 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

CSS 总是会出现我们意想不到的结果，在这里记录一些会用到的小技巧来加深自己的记忆与理解。

+ +
    +

  • 浮动过后在父级加 clearfix

    +
    1
    2
    3
    4
    5
    .clearfix {
    	clear:both;
    	content: '';
    	display:block;
    }
    +
    • +

  • 一般不写宽高

    +
    • +

  • 写宽的话多用 max-width 以便自适应

    +
    • +

  • margin可能导致撑出去(a 比 div 高)，用display：block

    +
    • +

  • 多写一个 div 来设置 margin可以防止 width 变宽

    +
    • +

  • 对于绝对定位子集position：absolute，那么记得给父级一个position：relative

    +
    • +

  • css 三角形

    +
    1
    2
    3
    4
    5
    .triangle {
      border: 10px solid black;
      boder-top-color:red;
    }
    /*就可以看到三角形，可以设置某一边的宽，把颜色变透明来得到想要的三角形*/
    +

    ​

    +
    • +
+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/2018/06/17/Vue\347\273\204\344\273\266\351\200\232\344\277\241/index.html" "b/2018/06/17/Vue\347\273\204\344\273\266\351\200\232\344\277\241/index.html" index 5b45caa2..496fa3a0 100644 --- "a/2018/06/17/Vue\347\273\204\344\273\266\351\200\232\344\277\241/index.html" +++ "b/2018/06/17/Vue\347\273\204\344\273\266\351\200\232\344\277\241/index.html" @@ -1,899 +1,545 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Vue组件通信 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

Vue组件通信 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -
    -
  1. 父子组件
    2. -
  2. 爷孙组件
    3. -
  3. 兄弟组件
    4. -
-

从这三个方面来分析一下 vue 的组件通信

-

父子通信

父亲给儿子一个数据，儿子通过 props

-

儿子通过 $emit() 子向父传递信息，有点像发布订阅模式

- -
1
2
3
4
5
6
7
8
<div id="app">
  <hr>
  <button @click="dadcall=!dadcall">爸爸</button>
  <div v-if="soncall">{{message}}</div>
  <hr>
<son @call-dad="soncall=!soncall" :eat="eat" :dadcall="dadcall"></son>
</div>
-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Vue.component('son',{
    props: ['eat', 'dadcall'],
	template:`
    <div>
    <button @click="$emit('call-dad')">儿子</button>
    <div v-if="dadcall">{{eat}}</div>
    </div>`,
})
new Vue({
  el: '#app',
  data: {
    message: '别抽烟',
    eat:"吃饭",
    soncall:false,
    dadcall:false,
  }
})
-

预览链接

-

通过 Prop 向子组件传递数据

-

通过事件向父级组件发送消息

-

爷孙通信

1
2
3
4
5
6
<div id="app">
  <button @click="yeye=!yeye" >爷爷</button>
  <hr>
  <dad :sleep="sleep" :yeye="yeye" @call="yeye=!yeye"></dad>
</div>
-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
Vue.component('son',{
  props: ['yeye','sleep'],
  template:`
    <div>
      <button @click="$emit('call')">儿子</button>
      <div v-if="yeye">{{sleep}}</div>
    </div>`,
})
Vue.component('dad',{
  props: ['sleep', 'yeye'],
  template:`
  <div>
    <button @click="dad=!dad">爸爸</button>
    <div v-if="yeye">{{sleep}}</div>
    <div v-if="son">{{message}}</div>
    <hr>
    <son :sleep="sleep" :yeye="yeye" @call="$emit('call')"></son>
  </div>`,
})
new Vue({
  el: '#app',
  data: {
    message: '抽烟',
    sleep:"睡觉",
    son:false,
    dad:false,
    yeye:false,
  }
})
-

例子不是很好,但是通过调试可以很好的得出

-

父组件只能通知子组件而不能通知到子组件其自身的子组件,同样的其自身的子组件也只能通知其父组件而不能通知其父组件的父组件.爷孙组件的通信只能通过父组件作为一个枢纽来进行信息的交换

-

兄弟组件

通过上面的介绍你当然可以此想到兄弟间该如何通信,让他们在同一父组件下,通过父组件为枢纽来进行数据交换

-

组件名的大小写

写代码的时候常常在 template 使用驼峰式命名法导致一直渲染不出却没有报错

-

定义组件名的方式有两种：

-

使用 kebab-case
当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 。

-

使用 PascalCase
当使用 PascalCase (驼峰式命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 和 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Vue组件通信 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

Vue组件通信 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +
    +
  1. 父子组件
    2. +
  2. 爷孙组件
    3. +
  3. 兄弟组件
    4. +
+

从这三个方面来分析一下 vue 的组件通信

+

父子通信

父亲给儿子一个数据，儿子通过 props

+

儿子通过 $emit() 子向父传递信息，有点像发布订阅模式

+ +
1
2
3
4
5
6
7
8
<div id="app">
  <hr>
  <button @click="dadcall=!dadcall">爸爸</button>
  <div v-if="soncall">{{message}}</div>
  <hr>
<son @call-dad="soncall=!soncall" :eat="eat" :dadcall="dadcall"></son>

</div>
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Vue.component('son',{
    props: ['eat', 'dadcall'],
	template:`
    <div>
    <button @click="$emit('call-dad')">儿子</button>
    <div v-if="dadcall">{{eat}}</div>
    </div>`,
})

new Vue({
  el: '#app',
  data: {
    message: '别抽烟',
    eat:"吃饭",
    soncall:false,
    dadcall:false,
  }
})
+

预览链接

+

通过 Prop 向子组件传递数据

+

通过事件向父级组件发送消息

+

爷孙通信

1
2
3
4
5
6
<div id="app">
  <button @click="yeye=!yeye" >爷爷</button>
  <hr>
  <dad :sleep="sleep" :yeye="yeye" @call="yeye=!yeye"></dad>

</div>
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
Vue.component('son',{
  props: ['yeye','sleep'],
  template:`
    <div>
      <button @click="$emit('call')">儿子</button>
      <div v-if="yeye">{{sleep}}</div>
    </div>`,
})

Vue.component('dad',{
  props: ['sleep', 'yeye'],
  template:`
  <div>
    <button @click="dad=!dad">爸爸</button>
    <div v-if="yeye">{{sleep}}</div>
    <div v-if="son">{{message}}</div>
    <hr>
    <son :sleep="sleep" :yeye="yeye" @call="$emit('call')"></son>
  </div>`,
})


new Vue({
  el: '#app',
  data: {
    message: '抽烟',
    sleep:"睡觉",
    son:false,
    dad:false,
    yeye:false,
  }
})
+

例子不是很好,但是通过调试可以很好的得出

+

父组件只能通知子组件而不能通知到子组件其自身的子组件,同样的其自身的子组件也只能通知其父组件而不能通知其父组件的父组件.爷孙组件的通信只能通过父组件作为一个枢纽来进行信息的交换

+

兄弟组件

通过上面的介绍你当然可以此想到兄弟间该如何通信,让他们在同一父组件下,通过父组件为枢纽来进行数据交换

+

组件名的大小写

写代码的时候常常在 template 使用驼峰式命名法导致一直渲染不出却没有报错

+

定义组件名的方式有两种：

+

使用 kebab-case
当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 。

+

使用 PascalCase
当使用 PascalCase (驼峰式命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 和 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2018/07/01/es6-promise/index.html b/2018/07/01/es6-promise/index.html new file mode 100644 index 00000000..d8ec5c7e --- /dev/null +++ b/2018/07/01/es6-promise/index.html @@ -0,0 +1,542 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 回看 promise | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

回看 promise + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

callback

一个函数在另一个函数中调用

+
1
2
3
4
5
function fn1(){}
function fn2(fn){fn()}
fn2(fn1)//这就是回调
//call a function
//callback a function
+ +

回调地狱

回调的嵌套多余 5 层的时候，你就会发现看不懂了…

+
1
2
3
4
5
6
7
8
9
10
11
12
writeCode('', css1, () => {
  creatPaper(() => {
    writeCode(css1, css2, () => {
      writeMarkdown(md, () => {
        writeCode(css1+css2, css3, () => {
          document.querySelector('#paper .content').innerHTML = marked(md);
          console.log('over')
        })
      })      
    })
  })
})
+

这是我在我的一个项目中使用的代码，可读性为负

+

忒酸爽

+

为了解决回调地狱，以及在不同的库使用回调的方式是未知的需要去记

+

所以就来了 Promise

+

Promise

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function get(){
  return new Promise(function(resolve, reject){
    resolve('zhaoyang')
  })
}

function print(info){
  return new Promise(function(resolve, reject){
    console.log(info)
    resolve()
  })
}

function getanother(){
  return new Promise(function(resolve, reject){
    resolve('bamax')
  })
}

get().then(print).then(getanother).then(print)
+

promise 三大金刚 then resolve reject

+

AJAX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function ajax(url, onsuccess, onerror){
  return new Promise((resolve, reject) =>{
    let xhr = new XMLHttpRequest()
    xhr.open('Get', url, true)
    xhr.onload() = function(){
      resolve(this.responseText)
    }
    xhr.onerror =()=>{reject('err')}
  })
}
function log(name, password){
  return ajax('/log',{name, passname})
}
log('sb','sbsbsb').then(ret=>{
  
}).catch()
+

Generator

ES6 提供的异步编程解决方案

+

阮一峰

+

感觉自己还不能很好地讲出来

+

yield next()

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/2018/07/20/\347\237\245\351\201\223\345\210\233\345\256\207\347\254\224\350\257\225\351\242\230/index.html" "b/2018/07/20/\347\237\245\351\201\223\345\210\233\345\256\207\347\254\224\350\257\225\351\242\230/index.html" index 1b574941..67e0b595 100644 --- "a/2018/07/20/\347\237\245\351\201\223\345\210\233\345\256\207\347\254\224\350\257\225\351\242\230/index.html" +++ "b/2018/07/20/\347\237\245\351\201\223\345\210\233\345\256\207\347\254\224\350\257\225\351\242\230/index.html" @@ -1,891 +1,537 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 知道创宇笔试题 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

知道创宇笔试题 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

js 原型链 对数组进行复制并反转

[2.3.5] —>
[2，3，5，5，3，2]

-
1
2
3
4
5
Array.prototype.copyReverse = function(){
  let self = this
  let rev = self.slice(0).reverse()//拷贝并反转
  return self.concat(rev)
}
- -

css 文本超长使用…

1
2
overflow:hidden;
text-overflow:ellipsis;
-

字符串，每个单词首字母大写

1
'ni hao a'.replace(/^\w|\s\w/g,v => v.toUpperCase())
-

cookie 是 session 的基石

-

cookie 存放在客服端,伴随每次请求而发送给服务器

-

session 存放在服务器, session id 是通过 cookie 发送给服务器的

-

304是？

Not Modified

-

自从上次请求后，请求的网页未修改过，服务器返回此响应时，不会返回网页内容，代表上次的文档已经被缓存了，还可以继续使用

-

五种看不见 div 方法 用 css 实现

    -
  • opcity: 0
    • -
  • diplay: block
    • -
  • visibility: none
    • -
  • 父元素 宽或高 给 0
    • -
  • 相对定位使其偏离出屏幕
    • -
-

reactjs 组件通信

10个 Linux 操作简单解释

5个 git 操作简单解释

- -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 知道创宇笔试题 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

知道创宇笔试题 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

js 原型链 对数组进行复制并反转

[2.3.5] —>
[2，3，5，5，3，2]

+
1
2
3
4
5
Array.prototype.copyReverse = function(){
  let self = this
  let rev = self.slice(0).reverse()//拷贝并反转
  return self.concat(rev)
}
+ +

css 文本超长使用…

1
2
overflow:hidden;
text-overflow:ellipsis;
+

字符串，每个单词首字母大写

1
'ni hao a'.replace(/^\w|\s\w/g,v => v.toUpperCase())
+

cookie 是 session 的基石

+

cookie 存放在客服端,伴随每次请求而发送给服务器

+

session 存放在服务器, session id 是通过 cookie 发送给服务器的

+

304是？

Not Modified

+

自从上次请求后，请求的网页未修改过，服务器返回此响应时，不会返回网页内容，代表上次的文档已经被缓存了，还可以继续使用

+

五种看不见 div 方法 用 css 实现

    +
  • opcity: 0
    • +
  • diplay: block
    • +
  • visibility: none
    • +
  • 父元素 宽或高 给 0
    • +
  • 相对定位使其偏离出屏幕
    • +
+

reactjs 组件通信

10个 Linux 操作简单解释

5个 git 操作简单解释

+
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2018/08/01/Awesome-resume/index.html b/2018/08/01/Awesome-resume/index.html new file mode 100644 index 00000000..77987054 --- /dev/null +++ b/2018/08/01/Awesome-resume/index.html @@ -0,0 +1,544 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Awesome resume | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

Awesome resume + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +
+

预览

+
+

这个项目灵感来自 strml.net 不过它的源码不是很懂但是知道大概思路我们可以用纯 js 来实现，代码实现是简单的，可是能想出这样灵感的人是令人敬佩的。

+

代码写在页面上

代码出现在页面上肯定是用 js 修改 html

+

在 js 中准备好代码 string

+ +

由于代码是一个字一个字的出现的，肯定时会用到 setInterval

+

每一次多取 string 一个字母

+
1
2
3
4
5
6
7
8
9
10
11
12
function writeCode(code){
  let n = 0
  let domCode = document.querySlecelt('.xxx')
  let timer = srtInterval(() => {
    domCode.innerHTML = code.substring(0, n)
    if(n === code.length){
      clearInterval(timer)
    }
    n++
  }, 30)
  
}
+

代码高亮

css 仿造 html 一样加在 style 标签中（中文使用注释）

+

我们当然不需要自己去词法分析（其实是我做不来），网上有现成的

+

使用 Prism

+

根据官网使用就好哈，下载的时候记得勾选 markdown 后面需要

+

Prism 其实是在关键词周围加上 span 标签，而我们应该如何制造一种我们加高亮的假象呢？当然就是先将样式提前修改后面再加上就好了。

+

后面在代码优化就可以得到

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function writeCode(precode, code, callback) {
  let pcode = precode || ''
  let Domcode = document.querySelector('#code')
  let n = 0
  let timer = setInterval(() => {
    Domcode.innerHTML = Prism.highlight(pcode + code.substring(0, n), Prism.languages.css, 'css');
    styleTag.innerHTML = result = pcode + code.substring(0, n)
    let now = code.substring(n + 1, n)
    pressKey(now);
    Domcode.scrollTop = Domcode.scrollHeight
    if (n === code.length) {
      window.clearInterval(timer)
      callback && callback.call()
    }
    n++
  }, 30)
}
+

HTML –> markdown

当然我们也没必要自己去写

+

markedjs

+

依然是按着官网走就好

+

CALLBACK

1
2
3
4
5
6
7
8
9
10
11
12
writeCode('', css1, () => {
  creatPaper(() => {
    writeCode(css1, css2, () => {
      writeMarkdown(md, () => {
        writeCode(css1+css2, css3, () => {
          document.querySelector('#paper .content').innerHTML = marked(md);
          console.log('over')
        })
      })      
    })
  })
})
+

由于最近看了回调，所以就在这一次使用了。

+

不过一般还是不要这样写，至少我实现知道咋回事过段时间这就是天书了hahahahaha

+

下次用 Promise 改改？

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2018/08/03/Awesome-resume/index.html b/2018/08/03/Awesome-resume/index.html deleted file mode 100644 index 30a32f0a..00000000 --- a/2018/08/03/Awesome-resume/index.html +++ /dev/null @@ -1,882 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Awesome resume | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

Awesome resume - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -
-

预览

-
-

这个项目灵感来自 strml.net 不过它的源码不是很懂但是知道大概思路我们可以用纯 js 来实现，代码实现是简单的，可是能想出这样灵感的人是令人敬佩的。

-

代码写在页面上

代码出现在页面上肯定是用 js 修改 html

-

在 js 中准备好代码 string

- -

由于代码是一个字一个字的出现的，肯定时会用到 setInterval

-

每一次多取 string 一个字母

-
1
2
3
4
5
6
7
8
9
10
11
12
function writeCode(code){
  let n = 0
  let domCode = document.querySlecelt('.xxx')
  let timer = srtInterval(() => {
    domCode.innerHTML = code.substring(0, n)
    if(n === code.length){
      clearInterval(timer)
    }
    n++
  }, 30)
  
}
-

代码高亮

css 仿造 html 一样加在 style 标签中（中文使用注释）

-

我们当然不需要自己去词法分析（其实是我做不来），网上有现成的

-

使用 Prism

-

根据官网使用就好哈，下载的时候记得勾选 markdown 后面需要

-

Prism 其实是在关键词周围加上 span 标签，而我们应该如何制造一种我们加高亮的假象呢？当然就是先将样式提前修改后面再加上就好了。

-

后面在代码优化就可以得到

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function writeCode(precode, code, callback) {
  let pcode = precode || ''
  let Domcode = document.querySelector('#code')
  let n = 0
  let timer = setInterval(() => {
    Domcode.innerHTML = Prism.highlight(pcode + code.substring(0, n), Prism.languages.css, 'css');
    styleTag.innerHTML = result = pcode + code.substring(0, n)
    let now = code.substring(n + 1, n)
    pressKey(now);
    Domcode.scrollTop = Domcode.scrollHeight
    if (n === code.length) {
      window.clearInterval(timer)
      callback && callback.call()
    }
    n++
  }, 30)
}
-

HTML –> markdown

当然我们也没必要自己去写

-

markedjs

-

依然是按着官网走就好

-

CALLBACK

1
2
3
4
5
6
7
8
9
10
11
12
writeCode('', css1, () => {
  creatPaper(() => {
    writeCode(css1, css2, () => {
      writeMarkdown(md, () => {
        writeCode(css1+css2, css3, () => {
          document.querySelector('#paper .content').innerHTML = marked(md);
          console.log('over')
        })
      })      
    })
  })
})
-

由于最近看了回调，所以就在这一次使用了。

-

不过一般还是不要这样写，至少我实现知道咋回事过段时间这就是天书了hahahahaha

-

下次用 Promise 改改？

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git "a/2018/08/03/JavaScript-\345\216\237\345\236\213\351\223\276/index.html" "b/2018/08/03/JavaScript-\345\216\237\345\236\213\351\223\276/index.html" deleted file mode 100644 index 55e3020d..00000000 --- "a/2018/08/03/JavaScript-\345\216\237\345\236\213\351\223\276/index.html" +++ /dev/null @@ -1,844 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - JavaScript 原型链 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

JavaScript 原型链 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -


-
1
2
3
4
5
6
7
8
9
10
11
12
13
function Person(name){
  this.name = name
}
Person.prototype.say = 'fuck prototype'
var one = new Person('小三')
var two = new Person('小吴')
one.name
one.say
two.name
two.say
-

看图可知

-
1
2
3
4
5
6
7
8
9
10
one.__proto__ === Person.prototype
Person.prototype.__proto__ === Object.prototype
Person.__proto__ === Function.prototype
Function.__proto__ === Function.prototype
Object.__proto__ === Function.prototype
Function.prototype.__proto__ === Object.prototype
Object.prototype.__proto__ === null
-

总结

-
    -
  • 当 new 一个函数的时候会创建一个对象，被创建对象.__proto__ === 函数.prototype
    • -
  • 一切函数都是由 Function 这个函数创建的，被创建函数.__proto__ === Function.prototype
    • -
  • 一切函数的原型对象都是由 Object 这个函数创建的，Object.prototype === 一切函数.prototype.__proto__
    • -
- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git "a/2018/08/03/Vue-\345\237\272\347\241\200\346\226\207\346\241\243/index.html" "b/2018/08/03/Vue-\345\237\272\347\241\200\346\226\207\346\241\243/index.html" deleted file mode 100644 index a3fa17fe..00000000 --- "a/2018/08/03/Vue-\345\237\272\347\241\200\346\226\207\346\241\243/index.html" +++ /dev/null @@ -1,897 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Vue 基础文档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

Vue 基础文档 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

Vue 实例

创建一个 Vue 实例

1
2
3
var vm = new Vue({
  // 选项
})
-

数据与方法

Object.freeze()

Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化

- -
1
2
3
4
5
<div id="app">
  <p>{{ foo }}</p>
  <!-- 这里的 `foo` 不会更新！ -->
  <button v-on:click="foo = 'baz'">Change it</button>
</div>
-
1
2
3
4
5
6
7
8
9
10
var obj = {
  foo: 'bar'
}
Object.freeze(obj)
new Vue({
  el: '#app',
  data: obj
})
-

实例生命周期钩子

生命周期钩子就好像是为了方便在不同的阶段中选择一个阶段去干该干的事

-

有 created、mounted、updated 和 destroyed等。

-
-

生命周期钩子的 this 上下文指向调用它的 Vue 实例,所以不要在选项属性上或回调上使用箭头函数

-
-

-

模板语法

也可以不使用，直接用 render()

-

文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值

-

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。

-

原始 HTML

1
2
3
4
<div id="app">
 <p>Using mustaches: {{ rawHtml }}</p>
 <p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>
-
1
2
3
4
5
6
new Vue({
  el: '#app',
  data: {
    rawHtml: '<span style="color:red">Hello Vue.js!</span>'
  }
})
-
-

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

-
-

特性

1
2
3
<div id="app">
 <button v-bind:disabled="isButtonDisabled">Button</button>
</div>
-
1
2
3
4
5
6
new Vue({
  el: '#app',
  data: {
  	isButtonDisabled: undefined,
  }
})
-

指令

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 特性

-

另一个例子是 v-on 指令，它用于监听 DOM 事件

-

.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

-
1
2
3
4
5
6
7
8
9
10
11
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
-

计算属性缓存 vs 方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }，
  methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}
})
-

同名的函数是不可以的，开始的时候他会直接找到methods中的函数，就不会找到，computed的同名函数，这是要注意的。

-

不同的是计算属性是基于它们的依赖进行缓存的

-

计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

-

我对侦听器的了解感觉还不够

-

Class 与 Style 绑定

表达式结果的类型除了字符串之外，还可以是对象或数组。

-

组件基础

组件是可复用的 Vue 实例，且带有一个名字

-
1
2
3
4
5
6
7
8
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
-

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。

-

data 必须是一个函数

-
1
2
3
4
5
data: function () {
  return {
    count: 0
  }
}
- -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/2018/08/03/es6-promise/index.html b/2018/08/03/es6-promise/index.html deleted file mode 100644 index 816a5e67..00000000 --- a/2018/08/03/es6-promise/index.html +++ /dev/null @@ -1,880 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 回看 promise | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

回看 promise - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

callback

一个函数在另一个函数中调用

-
1
2
3
4
5
function fn1(){}
function fn2(fn){fn()}
fn2(fn1)//这就是回调
//call a function
//callback a function
- -

回调地狱

回调的嵌套多余 5 层的时候，你就会发现看不懂了…

-
1
2
3
4
5
6
7
8
9
10
11
12
writeCode('', css1, () => {
  creatPaper(() => {
    writeCode(css1, css2, () => {
      writeMarkdown(md, () => {
        writeCode(css1+css2, css3, () => {
          document.querySelector('#paper .content').innerHTML = marked(md);
          console.log('over')
        })
      })      
    })
  })
})
-

这是我在我的一个项目中使用的代码，可读性为负

-

忒酸爽

-

为了解决回调地狱，以及在不同的库使用回调的方式是未知的需要去记

-

所以就来了 Promise

-

Promise

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function get(){
  return new Promise(function(resolve, reject){
    resolve('zhaoyang')
  })
}
function print(info){
  return new Promise(function(resolve, reject){
    console.log(info)
    resolve()
  })
}
function getanother(){
  return new Promise(function(resolve, reject){
    resolve('bamax')
  })
}
get().then(print).then(getanother).then(print)
-

promise 三大金刚 then resolve reject

-

AJAX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function ajax(url, onsuccess, onerror){
  return new Promise((resolve, reject) =>{
    let xhr = new XMLHttpRequest()
    xhr.open('Get', url, true)
    xhr.onload() = function(){
      resolve(this.responseText)
    }
    xhr.onerror =()=>{reject('err')}
  })
}
function log(name, password){
  return ajax('/log',{name, passname})
}
log('sb','sbsbsb').then(ret=>{
  
}).catch()
-

Generator

ES6 提供的异步编程解决方案

-

阮一峰

-

感觉自己还不能很好地讲出来

-

yield next()

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git "a/2018/08/03/\345\217\202\346\225\260\345\244\204\347\220\206&\350\247\243\346\236\204\350\265\213\345\200\274/index.html" "b/2018/08/03/\345\217\202\346\225\260\345\244\204\347\220\206&\350\247\243\346\236\204\350\265\213\345\200\274/index.html" deleted file mode 100644 index 66c8c974..00000000 --- "a/2018/08/03/\345\217\202\346\225\260\345\244\204\347\220\206&\350\247\243\346\236\204\350\265\213\345\200\274/index.html" +++ /dev/null @@ -1,872 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 参数处理&解构赋值 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

参数处理&解构赋值 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

函数默认参数

与 Python 的区别 http://effbot.org/zone/default-values.htm
剩余参数

-

参数变为数组

Array.prototype.slice.call(arguments,2)
Array.from(arguments).slice(2)
function fn (a,b, …c){}
展开操作

- -

[…iterableObj] = [1, 3, 5, 7, 9];
[0, 2, …iterableObj, 4, 6, 8];

-

解构赋值

[a, b] = [b, a]

-

[] () 前最好加;

-

[a, b, …rest] = [10, 20, 30, 40, 50]
let {name, age} = frank
[a=5, b=7] = [1];
[a, b] = f()
[a, , b] = f();
{p: foo, q: bar} = o
let {a = 10, b = 5} = {a: 3};
let {a:aa = 10, b:bb = 5} = {a: 3};

-

对象浅拷贝

1
2
3
4
5
6
7
{
	let objA = {name: {a: 'x'}}
    let objB = Object.assign({}, objA)
    console.log(objB)
	objB.name.a = 'b'
  	console.log(objA.name)
}//b
-

对象合并
MDN 上更多的例子

-

对象属性加强

obj = { x, y }
obj = {[“baz” + quux() ]: 42}
函数属性可以缩写

-

新的字符串

多行字符串
字符串里插入变量（插值）
函数接字符串

-

fn${name} 是一个 ${person}
styled-component 就是用的这个语法

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git "a/2018/08/03/\345\233\236\347\234\213-JS-\346\225\260\346\215\256\347\261\273\345\236\213/index.html" "b/2018/08/03/\345\233\236\347\234\213-JS-\346\225\260\346\215\256\347\261\273\345\236\213/index.html" deleted file mode 100644 index 2a7f9b1d..00000000 --- "a/2018/08/03/\345\233\236\347\234\213-JS-\346\225\260\346\215\256\347\261\273\345\236\213/index.html" +++ /dev/null @@ -1,904 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 回看 JS 数据类型 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

回看 JS 数据类型 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

JS 数据类型不多，加上 es6 的 Symbol 有 7 种，我之前也写了关于 JavaScript 有关数据类型的文章个人觉得当时的总结还不够完善，记忆也不够深刻。前不久重新看了《 JavaScript 高级程序设计》的第三章，决定再次整理下。

-

数据类型

Undefined, Null, Number, String, Boolean, Objecct, Symbol

- -

typeof 操作符

两个特殊
“object” –> null
“function” –> 如果这个值是个函数
一个未被声明的变量也是可以 typeof 值为 undefined

-

undefined 与 null

undefined 派生于 null undefined == null

-

存在逻辑关系，但用法不同

-

对于一个变量不存在显示的将其赋值为 undefined

-

保存对象的变量还未真正的保存对象，就应该明确保存为 null

-

boolean

5 个 falsy 值

-

‘’ undefined null 0 NaN

-

Number

注意：八进制

-

八进制第一位必须是 0，如果字面量超过 7，那么前导 0 就会被忽略，后面的数值将会当做十进制解析。

-

浮点数值

浮点数会存在舍入误差，这是基于 IEEE754 数值的的浮点计算通病。

-

所以不要

-
1
2
3
4
5
6
if(0.1 + 0.2 == 0.3){
  console.log('hi')
}else{
  cosole.log(0)
}
//0
-

数值范围

Number.MIN_VALUE Number_MAX_VALUE 大多数的浏览器实现了超过就会变为对应的正负 Infinity

-

NaN

1
2
3
NaN == NaN//false
isNaN(NaN)//true
isNaN(true)//flase true --> 1
-

数值转换

Number() parseInt() parseFloat() 还可以用 +/- 等符号

-

boolean true 1 false 0

-

undefined NaN

-

null 0

-

number 原来的数就是了

-

string

-
    -
  • 只包含数字（包括正负号）转换为十进制（忽略前导 0）
    • -
  • 包含有效浮点数格式 对应的浮点数（忽略前导 0）
    • -
  • 包含有效十六进制格式 转换为同等大小的十进制
    • -
  • ‘’ 0
    • -
  • 其他 NaN
    • -
-

object valuof() NaN –> toString()

-

注意

在使用 parseInt() es3 与 es5 有分歧，未消除这困惑，可以为函数提供第二个参数。如果知道要解析的是八进制，就把 8 作为第二个参数。

-
1
var num = parseInt('066', 8)
-

string

字符一旦创建就不可更改，要改变摸个变量保存的字符串首先要销毁原来的字符串，然后用另一个包含新值的字符串填充该变量。

-

toString()方法 与 转型函数String()

-

转型函数 可以 null undefined

-

object

    -
  • constructor
    • -
  • hasOwnProperty()
    • -
  • isPrototypeOf()
    • -
  • toLocaleString()
    • -
  • toString
    • -
  • valueOf()
    • -
- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git "a/2018/08/03/\347\231\273\345\275\225\344\270\216\346\263\250\345\206\214/index.html" "b/2018/08/03/\347\231\273\345\275\225\344\270\216\346\263\250\345\206\214/index.html" deleted file mode 100644 index 3e2aba60..00000000 --- "a/2018/08/03/\347\231\273\345\275\225\344\270\216\346\263\250\345\206\214/index.html" +++ /dev/null @@ -1,878 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 登录与注册 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

登录与注册 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

路由

后端必需验证，curl 直接发请求绕过前端。

-

Cookie 就好像游乐园的通行证

-
    -
  • 服务器通过 Set-Cookie 响应头设置Cookie
    • -
  • 浏览器得到 Cookie 后，每次请求都会带上 Cookie
    • -
  • 服务器读到 Cookie 就知道登录用户是谁
    • -
-

Cookie 可以做假

-

http only

-

Cookie 有有效期

-
-

Cookie的缺陷

    -
  1. Cookie会被附加在每个HTTP请求中，所以无形中增加了流量。
    2. -
  2. 由于在HTTP请求中的Cookie是明文传递的，所以安全性成问题，除非用HTTPS。
    3. -
  3. Cookie的大小限制在4KB左右，对于复杂的存储需求来说是不够用的。[3]
    4. -
-
-

HTTP 缓存

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git "a/2018/08/12/\345\274\272\347\274\223\345\255\230\344\270\216\345\215\217\345\225\206\347\274\223\345\255\230/index.html" "b/2018/08/12/\345\274\272\347\274\223\345\255\230\344\270\216\345\215\217\345\225\206\347\274\223\345\255\230/index.html" index c7670f81..016b801e 100644 --- "a/2018/08/12/\345\274\272\347\274\223\345\255\230\344\270\216\345\215\217\345\225\206\347\274\223\345\255\230/index.html" +++ "b/2018/08/12/\345\274\272\347\274\223\345\255\230\344\270\216\345\215\217\345\225\206\347\274\223\345\255\230/index.html" @@ -1,887 +1,545 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 强缓存与协商缓存 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

强缓存与协商缓存 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

多益网络的前端岗位的笔试有一道题让我解释下 强缓存与协商缓存是什么 看到这题就迷糊了对于这两个概念完全的一无所知啊，总是搞些高端的名词，让人摸不到方向只好下来搜索一下了。
浏览器缓存做的好可以使得用户的体验得到不错的提升，卓越的优化可以说能够给企业带来更棒的业绩，而浏览器缓存就包括基本两项那就是强缓存与协商缓存。

-

基本认识

    -
  • 缓存肯定是在浏览器发起过请求才会有的，而服务器再给你资源的时候打了标记，这些标记是你到时候选择何种缓存的依据。
    • -
  • 强缓存是在加载资源时找到上次服务器的标志与现在时间进行对比，如果资源未过期那么直接读取本地缓存资源（这就是强缓存），过期则需要向服务器发起请求。这样就避免了浏览器每一次加载资源都要向服务器发起请求减轻的服务器的负载，且从本地加载提升了用户体验。
    • -
  • 协商缓存就是当你向服务器发起请求时要带上上一次服务器给你的标记，拿着标记与服务器现在的资源的标记进行对比，如果对比发现为改变则返回 304，浏览器于是从本地缓存中读取资源（这就是协商缓存），如果发生改变则向浏览器发送新资源。
    • -
-

强缓存原理

好了我们已经了解何为强缓存了，那我们是如何去实现的呢？

-

如果我们打开开发者工具，看 network 可以看到很多 status 为 200 的 size 为 (from cache) 其实这就是强缓存。其实强缓存是利用了 Expired 与 Cache-Control 这两个 HTTP 响应头来实现的（也就是之前所说的标记）

-
    -
  • Expired 记录的是过期的格里尼治时间 HTTP1.0
    • -
  • Cache-Control 中有 max-age 记录从开始发送资源到资源过期的秒数 HTTP1.1
    • -
-

而在资源加载时先从缓存中找，找到后看看现在时间与标记进行对比。在过期前就能过命中缓存。当两个标记都存在在的时候，看 max-age。

-

协商缓存原理

我们经常也能看到 304(not modified) 那他是如何实现的呢？

-

通过对比浏览器发来的标记与自己本身的标记进行对比有两对标记

-

[Last-Modified与If-Modified-Since]及[ETag与If-None-Match]

-

两两配对就能表示服务器的资源也没有发生改变可以放心使用浏览器的本地缓存，一旦浏览器接收到 304 的响应就会从缓存中来加载资源。

-

参考及扩展

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 强缓存与协商缓存 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

强缓存与协商缓存 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

多益网络的前端岗位的笔试有一道题让我解释下 强缓存与协商缓存是什么 看到这题就迷糊了对于这两个概念完全的一无所知啊，总是搞些高端的名词，让人摸不到方向只好下来搜索一下了。
浏览器缓存做的好可以使得用户的体验得到不错的提升，卓越的优化可以说能够给企业带来更棒的业绩，而浏览器缓存就包括基本两项那就是强缓存与协商缓存。

+

基本认识

    +
  • 缓存肯定是在浏览器发起过请求才会有的，而服务器再给你资源的时候打了标记，这些标记是你到时候选择何种缓存的依据。
    • +
  • 强缓存是在加载资源时找到上次服务器的标志与现在时间进行对比，如果资源未过期那么直接读取本地缓存资源（这就是强缓存），过期则需要向服务器发起请求。这样就避免了浏览器每一次加载资源都要向服务器发起请求减轻的服务器的负载，且从本地加载提升了用户体验。
    • +
  • 协商缓存就是当你向服务器发起请求时要带上上一次服务器给你的标记，拿着标记与服务器现在的资源的标记进行对比，如果对比发现为改变则返回 304，浏览器于是从本地缓存中读取资源（这就是协商缓存），如果发生改变则向浏览器发送新资源。
    • +
+

强缓存原理

好了我们已经了解何为强缓存了，那我们是如何去实现的呢？

+

如果我们打开开发者工具，看 network 可以看到很多 status 为 200 的 size 为 (from cache) 其实这就是强缓存。其实强缓存是利用了 Expired 与 Cache-Control 这两个 HTTP 响应头来实现的（也就是之前所说的标记）

+
    +
  • Expired 记录的是过期的格里尼治时间 HTTP1.0
    • +
  • Cache-Control 中有 max-age 记录从开始发送资源到资源过期的秒数 HTTP1.1
    • +
+

而在资源加载时先从缓存中找，找到后看看现在时间与标记进行对比。在过期前就能过命中缓存。当两个标记都存在在的时候，看 max-age。

+

协商缓存原理

我们经常也能看到 304(not modified) 那他是如何实现的呢？

+

通过对比浏览器发来的标记与自己本身的标记进行对比有两对标记

+

[Last-Modified与If-Modified-Since]及[ETag与If-None-Match]

+

两两配对就能表示服务器的资源也没有发生改变可以放心使用浏览器的本地缓存，一旦浏览器接收到 304 的响应就会从缓存中来加载资源。

+

参考及扩展

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/2018/08/13/JSONP-\345\210\260\345\272\225\346\230\257\344\273\200\344\271\210\344\270\234\350\245\277/index.html" "b/2018/08/13/JSONP-\345\210\260\345\272\225\346\230\257\344\273\200\344\271\210\344\270\234\350\245\277/index.html" index 013812a8..4a55e8cc 100644 --- "a/2018/08/13/JSONP-\345\210\260\345\272\225\346\230\257\344\273\200\344\271\210\344\270\234\350\245\277/index.html" +++ "b/2018/08/13/JSONP-\345\210\260\345\272\225\346\230\257\344\273\200\344\271\210\344\270\234\350\245\277/index.html" @@ -1,888 +1,550 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - JSONP 到底是什么东西 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

JSONP 到底是什么东西 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -


前几个月的时候我写了一篇博客来描述 What's JSONP 现在回去看当时写的东西可真是一坨…，怪不得面试的时候人家深入问的时候就开始支支吾吾了，动态创建 <script>，只能 POST 等也许你都知道可是他的来龙去脉你都了解了么?

- -

浏览器同源政策及其规避方法

-

阮一峰老师可以说将很多的内容都汇总在一起了，把整个跨域的问题都很广阔的讲了一遍，把阮一峰老师的 JSONP 看完了以后似懂非懂啊，知道那么一回事可是到的是咋样的心中却没有底。

-

简单的服务器与浏览器交流

    -
  • node.js
    • -
  • index.html
    • -
  • amount.txt
    • -
-

服务器会根据浏览器的请求来返回 index.html 该文件含有从 amount.txt 中读到的数据(糖果数目)。用户在浏览器上每点击一次吃一颗糖果浏览器会发出一个 POST 请求，服务器就会将 amount.txt 中的数据减 1。这样用户更改了数据在下一次请求的时候就能得到正确的数据。我么回来看一下代码。

-

node.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
var http = require('http')
var fs = require('fs')
var url = require('url')
var port = 8080
var server = http.createServer(function (request, response) {
  //查询路径分析
  var parsedUrl = url.parse(request.url, true)
  var pathWithQuery = request.url
  var queryString = ''
  if (pathWithQuery.indexOf('?') >= 0) {
    queryString = pathWithQuery.substring(pathWithQuery.indexOf('?'))
  }
  var path = parsedUrl.pathname
  var query = parsedUrl.query
  var method = request.method
  //路由
  if (path === '/') {
    var string = fs.readFileSync('./index.html', 'utf8')
    var data = fs.readFileSync('./amount.txt', 'utf8')
    string = string.replace('{{amount}}', data)
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write(string)
    response.end()
  } else if (path === '/pay' && method.toUpperCase() === 'POST') {
    var data = fs.readFileSync('./amount.txt', 'utf8')
    var nd = data - 1
    fs.writeFileSync('./amount.txt',nd)
    response.end()
  } else {
    response.statusCode = 404
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write('404')
    response.end()
  }
})
server.listen(port)
console.log('监听 ' + 'http://localhost:' + port)
-

index.html

1
2
3
4
5
6
<body>
  <h1>还剩{{amount}}颗糖</h1>
  <form action="/pay" method="post">
    <input type="submit" value="吃一颗">
  </form>
</body>
-

amount.txt

1
1000
-

图片 Ping

上一个简单的服务器与浏览器的交流可以简单地理解他们是如何运行的，但是有一个弱点那就是每一次的请求后需要刷新页面才能看到正确的数据。那该如何是好呢?我们都知道像 <img> <link> <script> 等这些标签都是带有 src 会向服务器发起 GET 请求的那我们能不能在这上面做文章呢?

-

让我们来看下代码

-

node.js

1
2
3
4
5
6
7
8
9
else if (path === '/pay') {
    var data = fs.readFileSync('./amount.txt', 'utf8')
    var nd = data - 1
    fs.writeFileSync('./amount.txt', nd)
    response.setHeader('Content-Type', 'image/jpg')
    response.statusCode = 200
    response.write(fs.readFileSync('./cap.jpg'))
    response.end()
  }
-

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
  <h1>还剩<span id="amount">{{amount}}</span>颗糖</h1>
  <button id="button">吃一颗</button>
</body>
<script>
  button.addEventListener('click', (e)=>{
    let img = document.createElement('img')
    img.src = '/pay'
    img.onload = function(){
      alert('吃了一颗')
      amount.innerText -= 1
    }
    img.onerror = function () {
      alert('没吃到')
      
    }
  })
</script>
-

这样就实现了无刷新且更改了服务器上的数据，可是每一次你都返回图片就很揪心，多浪费对吧，所也就有了 JSONP

-

JSONP

我们动态创建一个 <script> 并把让他放到 <body> 中，我们在服务器中返回 application/javascript 并写上我们要给的东西，代码如下

-

node.js

1
2
3
4
5
6
7
8
9
else if (path === '/pay') {
    var data = fs.readFileSync('./amount.txt', 'utf8')
    var nd = data - 1
    fs.writeFileSync('./amount.txt', nd)
    response.setHeader('Content-Type', 'application/javascript')
    response.statusCode = 200
    response.write("alert('又在吃糖')")
    response.end()
  }
-

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
  button.addEventListener('click', (e)=>{
    let js = document.createElement('script')
    js.src = '/pay'
    document.body.appendChild(js)
    js.onload = function(){
      alert('吃了一颗')
      amount.innerText -= 1
    }
    js.onerror = function () {
      alert('没吃到')
    }
  })
</script>
-

先说下跨域，为何能跨域呢？因为在 script.src 是可以去请求别的网站上的资源的(防盗链就另外说)，所以说使用 GET 不安全。既然可以访问任意 src 就是可以跨域了啥。

-

这样我们就往成了一个很不错的浏览器与服务器交互但是还有问题啊，后端对于前端了解的太多了，前后端耦合性太大，服务器如果要这样去关心浏览器要干啥他不得忙的一批对吧，那应该何去解决呢？

-

node.js

1
2
3
4
5
6
7
8
9
10
if(path === '/pay'){
  let amount = fs.readFileSync('./amount.txt', 'utf8')
  amount--
  fs.writeFileSync('./db', amount)
  response.setHeader('Content-type', 'application/javascript')
  response.write(`
	${query.callback}.call('undefined', 'success')
`)
  response.end()
}
-

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
button.addEventListener(button.addEve 'click', (e) => {
  let script = document.creatElement('script')//动态script
  let functionName = 'marsorsun' + parseInt(Math.radom()*1000000, 10)//函数名随机
  window[functionName] = function(){
    amount.innerText = amount.innerText - 1
  }
  script.src = '/pay?callback=' + functionName
  document.body.appendChild(script)
  script.onload = function(e){//success
    e.currentTarget.remove()//从页面中移除<script>
    delete window[functionName]//干掉随机数
  }
  script.onerror = function() {
    e.currentTarget.remove()
  }
})
<script>
-

可以看下《JavaScript高级程序设计》P587 配合我的后台代码看就可也理解了。

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + JSONP 到底是什么东西 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

JSONP 到底是什么东西 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +


前几个月的时候我写了一篇博客来描述 What's JSONP 现在回去看当时写的东西可真是一坨…，怪不得面试的时候人家深入问的时候就开始支支吾吾了，动态创建 <script>，只能 POST 等也许你都知道可是他的来龙去脉你都了解了么?

+ +

浏览器同源政策及其规避方法

+

阮一峰老师可以说将很多的内容都汇总在一起了，把整个跨域的问题都很广阔的讲了一遍，把阮一峰老师的 JSONP 看完了以后似懂非懂啊，知道那么一回事可是到的是咋样的心中却没有底。

+

简单的服务器与浏览器交流

    +
  • node.js
    • +
  • index.html
    • +
  • amount.txt
    • +
+

服务器会根据浏览器的请求来返回 index.html 该文件含有从 amount.txt 中读到的数据(糖果数目)。用户在浏览器上每点击一次吃一颗糖果浏览器会发出一个 POST 请求，服务器就会将 amount.txt 中的数据减 1。这样用户更改了数据在下一次请求的时候就能得到正确的数据。我么回来看一下代码。

+

node.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
var http = require('http')
var fs = require('fs')
var url = require('url')

var port = 8080
var server = http.createServer(function (request, response) {
  //查询路径分析
  var parsedUrl = url.parse(request.url, true)
  var pathWithQuery = request.url
  var queryString = ''
  if (pathWithQuery.indexOf('?') >= 0) {
    queryString = pathWithQuery.substring(pathWithQuery.indexOf('?'))
  }
  var path = parsedUrl.pathname
  var query = parsedUrl.query
  var method = request.method
  //路由
  if (path === '/') {
    var string = fs.readFileSync('./index.html', 'utf8')
    var data = fs.readFileSync('./amount.txt', 'utf8')
    string = string.replace('{{amount}}', data)
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write(string)

    response.end()
  } else if (path === '/pay' && method.toUpperCase() === 'POST') {
    var data = fs.readFileSync('./amount.txt', 'utf8')
    var nd = data - 1
    fs.writeFileSync('./amount.txt',nd)
    response.end()
  } else {
    response.statusCode = 404
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write('404')
    response.end()
  }
})

server.listen(port)
console.log('监听 ' + 'http://localhost:' + port)
+

index.html

1
2
3
4
5
6
<body>
  <h1>还剩{{amount}}颗糖</h1>
  <form action="/pay" method="post">
    <input type="submit" value="吃一颗">
  </form>
</body>
+

amount.txt

1
1000
+

图片 Ping

上一个简单的服务器与浏览器的交流可以简单地理解他们是如何运行的，但是有一个弱点那就是每一次的请求后需要刷新页面才能看到正确的数据。那该如何是好呢?我们都知道像 <img> <link> <script> 等这些标签都是带有 src 会向服务器发起 GET 请求的那我们能不能在这上面做文章呢?

+

让我们来看下代码

+

node.js

1
2
3
4
5
6
7
8
9
else if (path === '/pay') {
    var data = fs.readFileSync('./amount.txt', 'utf8')
    var nd = data - 1
    fs.writeFileSync('./amount.txt', nd)
    response.setHeader('Content-Type', 'image/jpg')
    response.statusCode = 200
    response.write(fs.readFileSync('./cap.jpg'))
    response.end()
  }
+

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
  <h1>还剩<span id="amount">{{amount}}</span>颗糖</h1>
  <button id="button">吃一颗</button>
</body>
<script>
  button.addEventListener('click', (e)=>{
    let img = document.createElement('img')
    img.src = '/pay'
    img.onload = function(){
      alert('吃了一颗')
      amount.innerText -= 1
    }
    img.onerror = function () {
      alert('没吃到')
      
    }
  })
</script>
+

这样就实现了无刷新且更改了服务器上的数据，可是每一次你都返回图片就很揪心，多浪费对吧，所也就有了 JSONP

+

JSONP

我们动态创建一个 <script> 并把让他放到 <body> 中，我们在服务器中返回 application/javascript 并写上我们要给的东西，代码如下

+

node.js

1
2
3
4
5
6
7
8
9
else if (path === '/pay') {
    var data = fs.readFileSync('./amount.txt', 'utf8')
    var nd = data - 1
    fs.writeFileSync('./amount.txt', nd)
    response.setHeader('Content-Type', 'application/javascript')
    response.statusCode = 200
    response.write("alert('又在吃糖')")
    response.end()
  }
+

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
  button.addEventListener('click', (e)=>{
    let js = document.createElement('script')
    js.src = '/pay'
    document.body.appendChild(js)
    js.onload = function(){
      alert('吃了一颗')
      amount.innerText -= 1
    }
    js.onerror = function () {
      alert('没吃到')
    }
  })
</script>
+

先说下跨域，为何能跨域呢？因为在 script.src 是可以去请求别的网站上的资源的(防盗链就另外说)，所以说使用 GET 不安全。既然可以访问任意 src 就是可以跨域了啥。

+

这样我们就往成了一个很不错的浏览器与服务器交互但是还有问题啊，后端对于前端了解的太多了，前后端耦合性太大，服务器如果要这样去关心浏览器要干啥他不得忙的一批对吧，那应该何去解决呢？

+

node.js

1
2
3
4
5
6
7
8
9
10
if(path === '/pay'){
  let amount = fs.readFileSync('./amount.txt', 'utf8')
  amount--
  fs.writeFileSync('./db', amount)
  response.setHeader('Content-type', 'application/javascript')
  response.write(`
	${query.callback}.call('undefined', 'success')
`)
  response.end()
}
+

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
button.addEventListener(button.addEve 'click', (e) => {
  let script = document.creatElement('script')//动态script
  let functionName = 'marsorsun' + parseInt(Math.radom()*1000000, 10)//函数名随机
  window[functionName] = function(){
    amount.innerText = amount.innerText - 1
  }
  script.src = '/pay?callback=' + functionName
  document.body.appendChild(script)
  script.onload = function(e){//success
    e.currentTarget.remove()//从页面中移除<script>
    delete window[functionName]//干掉随机数
  }
  script.onerror = function() {
    e.currentTarget.remove()
  }
})
<script>
+

可以看下《JavaScript高级程序设计》P587 配合我的后台代码看就可也理解了。

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/2018/09/01/HTTP-\345\205\245\351\227\250/index.html" "b/2018/09/01/HTTP-\345\205\245\351\227\250/index.html" new file mode 100644 index 00000000..ea7f16fc --- /dev/null +++ "b/2018/09/01/HTTP-\345\205\245\351\227\250/index.html" @@ -0,0 +1,570 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + HTTP 入门 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

HTTP 入门 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +
+

This is for everyone

+

—Tim Berners-Lee（下文简称为Lee）

+
+

当你习惯了一件事情你每一天都要去用它，若你能去了解他形成的原因的时候你定会感慨创造他的人是如此的了不起进而由衷的崇拜与感激。

+ +

历史

Lee 在欧洲核子研究组织上班，发现大家的电脑的系统都不一样，而为了方便大家的通信他想到来制定一种协议来是大家发送的信息在不同的地方得到相同的显示效果。进而有了 HTTP,HTML, 他弄出了第一台服务器，浏览器及第一个网页。并在 2017 获得图灵奖。

+

URL(Uniform Resource Locator)

就是大家常说的网址，有了 URL 我们可以获取想要得到的信息。

+

超文本传输协议（HTTP）的统一资源定位符将从因特网获取信息的五个基本元素包括在一个简单的地址中：

+
    +
  1. 传送协议。（http/https）
    2. +
  2. 层级URL标记符号(为[//],固定不变)
    3. +
  3. 访问资源需要的凭证信息（可省略）
    4. +
  4. 服务器。（通常为域名，有时为IP地址）
    5. +
  5. 端口号。（以数字方式表示，若为HTTP的默认值“:80”可省略）
    6. +
  6. 路径。（以“/”字符区别路径中的每一个目录名称）
    7. +
  7. 查询。（GET模式的窗体参数，以“?”字符为起点，每个参数以“&”隔开，再以“=”分开参数名称与数据，通常以UTF8的URL编码，避开字符冲突的问题）
    8. +
  8. 片段。以“#”字符为起点[2]
    9. +
+

以http://zh.wikipedia.org:80/w/index.php?title=Special:%E9%9A%8F%E6%9C%BA%E9%A1%B5%E9%9D%A2 为例, 其中：

+
    +
  1. http，是协议；
    2. +
  2. zh.wikipedia.org，是服务器；
    3. +
  3. 80，是服务器上的网络端口号；
    4. +
  4. /w/index.php，是路径；
    5. +
  5. ?title=Special:%E9%9A%8F%E6%9C%BA%E9%A1%B5%E9%9D%A2，是询问。
    6. +
+

大多数网页浏览器不要求用户输入网页中“http://”的部分，因为绝大多数网页内容是超文本传输协议文件。同样，“80”是超文本传输协议文件的常用端口号，因此一般也不必写明。一般来说用户只要键入统一资源定位符的一部分（zh.wikipedia.org/wiki/Special:%E9%9A%8F%E6%9C%BA%E9%A1%B5%E9%9D%A2）就可以了。

+

由于超文本传输协议允许服务器将浏览器重定向到另一个网页地址，因此许多服务器允许用户省略网页地址中的部分，比如 www。从技术上来说这样省略后的网页地址实际上是一个不同的网页地址，浏览器本身无法决定这个新地址是否通，服务器必须完成重定向的任务。

+

URN,URI,URL

URI可被视为定位符（URL），名称（URN）或两者兼备。统一资源名（URN）如同一个人的名称，而统一资源定位符（URL）代表一个人的住址。换言之，URN定义某事物的身份，而URL提供查找该事物的方法。(URL 是 URI 最常见的形式)

+

DNS（Domain Name System）

通过 DNS 我们可以获取查询网址的 IP 地址，因为 IP 地址实在是难以记住而网址大多比较容易记忆

+

+

HTTP(HyperText Transfer Protocol)

超文本传输协议在我看来其实就是客户端向服务器发起请求资源，而服务器则应答并返回该资源，为了使资源可用而使用了 HTTP。

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$ curl -v baidu.com  
* Rebuilt URL to: baidu.com/
*   Trying 111.13.101.208...
* TCP_NODELAY set
* Connected to baidu.com (111.13.101.208) port 80 (#0)
> GET / HTTP/1.1
> Host: baidu.com
> User-Agent: curl/7.52.1
> Accept: */*
> 
< HTTP/1.1 200 OK
< Date: Thu, 08 Feb 2018 03:05:13 GMT
< Server: Apache
< Last-Modified: Tue, 12 Jan 2010 13:48:00 GMT
< ETag: "51-47cf7e6ee8400"
< Accept-Ranges: bytes
< Content-Length: 81
< Cache-Control: max-age=86400
< Expires: Fri, 09 Feb 2018 03:05:13 GMT
< Connection: Keep-Alive
< Content-Type: text/html
< 
<html>
<meta http-equiv="refresh" content="0;url=http://www.baidu.com/">
</html>
+

explainshell

+

我们还可以通过 Google 浏览器的 Network 查看

+

面试题

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 注：这题胜在区分度高，知识点覆盖广，再不懂的人，也能答出几句，
 而高手可以根据自己擅长的领域自由发挥，从URL规范、HTTP协议、DNS、CDN、数据库查询、
 到浏览器流式解析、CSS规则构建、layout、paint、onload/domready、JS执行、JS API绑定等等；

 详细版：
1、浏览器会开启一个线程来处理这个请求，对 URL 分析判断如果是 http 协议就按照 Web 方式来处理;
2、调用浏览器内核中的对应方法，比如 WebView 中的 loadUrl 方法;
   3、通过DNS解析获取网址的IP地址，设置 UA 等信息发出第二个GET请求;
4、进行HTTP协议会话，客户端发送报头(请求报头);
   5、进入到web服务器上的 Web Server，如 Apache、Tomcat、Node.JS 等服务器;
   6、进入部署好的后端应用，如 PHP、Java、JavaScript、Python 等，找到对应的请求处理;
7、处理结束回馈报头，此处如果浏览器访问过，缓存上有对应资源，会与服务器最后修改时间对比，一致则返回304;
   8、浏览器开始下载html文档(响应报头，状态码200)，同时使用缓存;
   9、文档树建立，根据标记请求所需指定MIME类型的文件（比如css、js）,同时设置了cookie;
   10、页面开始渲染DOM，JS根据DOM API操作DOM,执行事件绑定等，页面显示完成。

 简洁版：
浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
载入解析到的资源文件，渲染页面，完成。
+
http状态码有那些？分别代表是什么意思？
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
简单版
[
	100  Continue	继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
	200  OK 		正常返回信息
	201  Created  	请求成功并且服务器创建了新的资源
	202  Accepted 	服务器已接受请求，但尚未处理
	301  Moved Permanently  请求的网页已永久移动到新位置。
	302 Found  		临时性重定向。
	303 See Other  	临时性重定向，且总是使用 GET 请求新的 URI。
	304  Not Modified 自从上次请求后，请求的网页未修改过。

	400 Bad Request  服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
	401 Unauthorized 请求未授权。
	403 Forbidden  	禁止访问。
	404 Not Found  	找不到如何与 URI 相匹配的资源。

	500 Internal Server Error  最常见的服务器端错误。
	503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。
]

 完整版
 1**(信息类)：表示接收到请求并且继续处理
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本

 2**(响应成功)：表示动作被成功接收、理解和接受
200——表明该请求被成功地完成，所请求的资源发送回客户端
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到，但返回信息为空
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求

 3**(重定向类)：为了完成指定的动作，必须接受进一步处理
300——请求的资源可在多处得到
301——本网页被永久性转移到另一个URL
302——请求的网页被转移到一个新的地址，但客户访问仍继续通过原始URL地址，重定向，新的URL会在response中的Location中返回，浏览器将会使用新的URL发出新的Request。
303——建议客户访问其他URL或访问方式
304——自从上次请求后，请求的网页未修改过，服务器返回此响应时，不会返回网页内容，代表上次的文档已经被缓存了，还可以继续使用
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码，现行版本中不再使用
307——申明请求的资源临时性删除

 4**(客户端错误类)：请求包含错误语法或不能正确执行
400——客户端请求有语法错误，不能被服务器所理解
401——请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用
HTTP 401.1 - 未授权：登录失败
　　HTTP 401.2 - 未授权：服务器配置问题导致登录失败
　　HTTP 401.3 - ACL 禁止访问资源
　　HTTP 401.4 - 未授权：授权被筛选器拒绝
HTTP 401.5 - 未授权：ISAPI 或 CGI 授权失败
402——保留有效ChargeTo头响应
403——禁止访问，服务器收到请求，但是拒绝提供服务
HTTP 403.1 禁止访问：禁止可执行访问
　　HTTP 403.2 - 禁止访问：禁止读访问
　　HTTP 403.3 - 禁止访问：禁止写访问
　　HTTP 403.4 - 禁止访问：要求 SSL
　　HTTP 403.5 - 禁止访问：要求 SSL 128
　　HTTP 403.6 - 禁止访问：IP 地址被拒绝
　　HTTP 403.7 - 禁止访问：要求客户证书
　　HTTP 403.8 - 禁止访问：禁止站点访问
　　HTTP 403.9 - 禁止访问：连接的用户过多
　　HTTP 403.10 - 禁止访问：配置无效
　　HTTP 403.11 - 禁止访问：密码更改
　　HTTP 403.12 - 禁止访问：映射器拒绝访问
　　HTTP 403.13 - 禁止访问：客户证书已被吊销
　　HTTP 403.15 - 禁止访问：客户访问许可过多
　　HTTP 403.16 - 禁止访问：客户证书不可信或者无效
HTTP 403.17 - 禁止访问：客户证书已经到期或者尚未生效
404——一个404错误表明可连接服务器，但服务器无法取得所请求的网页，请求资源不存在。eg：输入了错误的URL
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖，请求资源不可访问
407——类似401，用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态，请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求长。

 5**(服务端错误类)：服务器不能正确执行一个正确的请求
HTTP 500 - 服务器遇到错误，无法完成请求
　　HTTP 500.100 - 内部服务器错误 - ASP 错误
　　HTTP 500-11 服务器关闭
　　HTTP 500-12 应用程序重新启动
　　HTTP 500-13 - 服务器太忙
　　HTTP 500-14 - 应用程序无效
　　HTTP 500-15 - 不允许请求 global.asa
　　Error 501 - 未实现
 HTTP 502 - 网关错误
 HTTP 503：由于超载或停机维护，服务器目前无法使用，一段时间后可能恢复正常
+

文章只是随便说说，定有不对之处，谅解。

+

参考：

+ + +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/2018/09/01/\345\211\215\347\253\257 Linux \351\207\215\350\243\205/index.html" "b/2018/09/01/\345\211\215\347\253\257 Linux \351\207\215\350\243\205/index.html" index 959f799a..c3526954 100644 --- "a/2018/09/01/\345\211\215\347\253\257 Linux \351\207\215\350\243\205/index.html" +++ "b/2018/09/01/\345\211\215\347\253\257 Linux \351\207\215\350\243\205/index.html" @@ -1,877 +1,535 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 前端 Linux 重装 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

前端 Linux 重装 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

前不久升级 deepin 然后 GG 了，所以写下来以免以后不用再去搜索

-

科学上网

1
sudo apt-get install python-pip; sudo pip install shadowsocks;
- -

配置 ~/.ssconf.json

1
2
3
4
5
6
7
8
9
10
{
    "server":"",
    "server_port":,
    "local_address": "127.0.0.1",
    "local_port":1080,
    "password":"",
    "timeout":300,
    "method":"aes-256-cfb",
    "fast_open": false
}
-
1
sudo sed -i 's/_cleanup/_reset/g' /usr/local/lib/python2.7/dist-packages/shadowsocks/crypto/openssl.py
-

使用 sslocal -c ~/.ssconf.json 开启代理，其中 ~/.ssconf.json 是配置文件的路径。嫌长的话使用 alias

-

命令行代理

命令行也走代理，你需要安装 proxychians-ng

- 
1
2
3
4
5
6
7
8
9
sudo apt install git
git clone https://github.com/rofl0r/proxychains-ng.git  //克隆到本地计算机
cd proxychains-ng   
sudo ./configure             
sudo make 
sudo make install
sudo cp ./src/proxychains.conf /etc/proxychians.conf 
cd ..   
sudo rm -rf proxychains-ng
-

创建 proxychains-ng 的配置文件，如果你不知道创建在哪，就创建在 ~/.proxychains.conf（用 touch ~/.proxychains.conf 即可创建文件），内容如下

-
1
2
3
4
5
6
7
8
9
strict_chain
quiet_mode
proxy_dns 
remote_dns_subnet 224
tcp_read_time_out 15000
tcp_connect_time_out 8000
[ProxyList]
socks5     127.0.0.1 1080
-

在 ~/.bashrc 里添加一句 alias pc=’proxychains4 -f ~/.proxychains.conf’，保存

-

oh my shell

1
2
3
sudo apt-get install zsh
chsh -s /bin/zsh
wget https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh -O - | sh
-

node

nvm 安装

-
1
2
3
4
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
source ~/.nvm/nvm.sh
nvm install node 
nvm use node
-

更改 .zshrc

1
2
export NVM_DIR="/home/YOURUSERNAME/.nvm"#改成你的用户名
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"  # This loads nvm
- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 前端 Linux 重装 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

前端 Linux 重装 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

前不久升级 deepin 然后 GG 了，所以写下来以免以后不用再去搜索

+

科学上网

1
sudo apt-get install python-pip; sudo pip install shadowsocks;
+ +

配置 ~/.ssconf.json

1
2
3
4
5
6
7
8
9
10
{
    "server":"",
    "server_port":,
    "local_address": "127.0.0.1",
    "local_port":1080,
    "password":"",
    "timeout":300,
    "method":"aes-256-cfb",
    "fast_open": false
}
+
1
sudo sed -i 's/_cleanup/_reset/g' /usr/local/lib/python2.7/dist-packages/shadowsocks/crypto/openssl.py
+

使用 sslocal -c ~/.ssconf.json 开启代理，其中 ~/.ssconf.json 是配置文件的路径。嫌长的话使用 alias

+

命令行代理

命令行也走代理，你需要安装 proxychians-ng

+ 
1
2
3
4
5
6
7
8
9
sudo apt install git
git clone https://github.com/rofl0r/proxychains-ng.git  //克隆到本地计算机
cd proxychains-ng   
sudo ./configure             
sudo make 
sudo make install
sudo cp ./src/proxychains.conf /etc/proxychians.conf 
cd ..   
sudo rm -rf proxychains-ng
+

创建 proxychains-ng 的配置文件，如果你不知道创建在哪，就创建在 ~/.proxychains.conf（用 touch ~/.proxychains.conf 即可创建文件），内容如下

+
1
2
3
4
5
6
7
8
9
strict_chain
quiet_mode
proxy_dns 

remote_dns_subnet 224
tcp_read_time_out 15000
tcp_connect_time_out 8000
[ProxyList]
socks5     127.0.0.1 1080
+

在 ~/.bashrc 里添加一句 alias pc=’proxychains4 -f ~/.proxychains.conf’，保存

+

oh my shell

1
2
3
sudo apt-get install zsh
chsh -s /bin/zsh
wget https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh -O - | sh
+

node

nvm 安装

+
1
2
3
4
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
source ~/.nvm/nvm.sh
nvm install node 
nvm use node
+

更改 .zshrc

1
2
export NVM_DIR="/home/YOURUSERNAME/.nvm"#改成你的用户名
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"  # This loads nvm
+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/2018/09/01/\345\233\236\347\234\213-JS-\346\225\260\346\215\256\347\261\273\345\236\213/index.html" "b/2018/09/01/\345\233\236\347\234\213-JS-\346\225\260\346\215\256\347\261\273\345\236\213/index.html" new file mode 100644 index 00000000..669afb45 --- /dev/null +++ "b/2018/09/01/\345\233\236\347\234\213-JS-\346\225\260\346\215\256\347\261\273\345\236\213/index.html" @@ -0,0 +1,566 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 回看 JS 数据类型 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

回看 JS 数据类型 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

JS 数据类型不多，加上 es6 的 Symbol 有 7 种，我之前也写了关于 JavaScript 有关数据类型的文章个人觉得当时的总结还不够完善，记忆也不够深刻。前不久重新看了《 JavaScript 高级程序设计》的第三章，决定再次整理下。

+

数据类型

Undefined, Null, Number, String, Boolean, Objecct, Symbol

+ +

typeof 操作符

两个特殊
“object” –> null
“function” –> 如果这个值是个函数
一个未被声明的变量也是可以 typeof 值为 undefined

+

undefined 与 null

undefined 派生于 null undefined == null

+

存在逻辑关系，但用法不同

+

对于一个变量不存在显示的将其赋值为 undefined

+

保存对象的变量还未真正的保存对象，就应该明确保存为 null

+

boolean

5 个 falsy 值

+

‘’ undefined null 0 NaN

+

Number

注意：八进制

+

八进制第一位必须是 0，如果字面量超过 7，那么前导 0 就会被忽略，后面的数值将会当做十进制解析。

+

浮点数值

浮点数会存在舍入误差，这是基于 IEEE754 数值的的浮点计算通病。

+

所以不要

+
1
2
3
4
5
6
if(0.1 + 0.2 == 0.3){
  console.log('hi')
}else{
  cosole.log(0)
}
//0
+

数值范围

Number.MIN_VALUE Number_MAX_VALUE 大多数的浏览器实现了超过就会变为对应的正负 Infinity

+

NaN

1
2
3
NaN == NaN//false
isNaN(NaN)//true
isNaN(true)//flase true --> 1
+

数值转换

Number() parseInt() parseFloat() 还可以用 +/- 等符号

+

boolean true 1 false 0

+

undefined NaN

+

null 0

+

number 原来的数就是了

+

string

+
    +
  • 只包含数字（包括正负号）转换为十进制（忽略前导 0）
    • +
  • 包含有效浮点数格式 对应的浮点数（忽略前导 0）
    • +
  • 包含有效十六进制格式 转换为同等大小的十进制
    • +
  • ‘’ 0
    • +
  • 其他 NaN
    • +
+

object valuof() NaN –> toString()

+

注意

在使用 parseInt() es3 与 es5 有分歧，未消除这困惑，可以为函数提供第二个参数。如果知道要解析的是八进制，就把 8 作为第二个参数。

+
1
var num = parseInt('066', 8)
+

string

字符一旦创建就不可更改，要改变摸个变量保存的字符串首先要销毁原来的字符串，然后用另一个包含新值的字符串填充该变量。

+

toString()方法 与 转型函数String()

+

转型函数 可以 null undefined

+

object

    +
  • constructor
    • +
  • hasOwnProperty()
    • +
  • isPrototypeOf()
    • +
  • toLocaleString()
    • +
  • toString
    • +
  • valueOf()
    • +
+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2018/09/02/201892-Vim(1)/index.html b/2018/09/02/201892-Vim(1)/index.html index 1e1ffbdb..b892776a 100644 --- a/2018/09/02/201892-Vim(1)/index.html +++ b/2018/09/02/201892-Vim(1)/index.html @@ -1,874 +1,543 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Vim(1) | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

Vim(1) - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

删除是会经常用到的

-
    -

  • dd 删除一行

    -

    ndd 删除 n 行

    -
    • -
-

蛮烦的时候就是使用可视来删除，今天看到了一个更好的方法

-
    -
  • dt> 删除到 > 为止
    • -
-

可视块操作

-
    -
  • ^→ 到行头
    • -
  • <C-v> → 开始块操作
    • -
  • <C-d> → 向下移动 (你也可以使用hjkl来移动光标，或是使用%，或是别的)
    • -
  • I-- [ESC] → I是插入，插入“–”，按ESC键来为每一行生效。
    • -
-

- - - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Vim(1) | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

Vim(1) + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

删除是会经常用到的

+
    +

  • dd 删除一行

    +

    ndd 删除 n 行

    +
    • +
+

蛮烦的时候就是使用可视来删除，今天看到了一个更好的方法

+
    +
  • dt> 删除到 > 为止
    • +
+

可视块操作

+
    +
  • ^→ 到行头
    • +
  • <C-v> → 开始块操作
    • +
  • <C-d> → 向下移动 (你也可以使用hjkl来移动光标，或是使用%，或是别的)
    • +
  • I-- [ESC] → I是插入，插入“–”，按ESC键来为每一行生效。
    • +
+

+ + +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/2018/09/02/\346\257\217\344\270\252\347\250\213\345\272\217\345\221\230\351\203\275\345\272\224\350\257\245\347\237\245\351\201\223\347\232\204\346\234\200\345\237\272\346\234\254\347\232\204\344\270\234\350\245\277/index.html" "b/2018/09/02/\346\257\217\344\270\252\347\250\213\345\272\217\345\221\230\351\203\275\345\272\224\350\257\245\347\237\245\351\201\223\347\232\204\346\234\200\345\237\272\346\234\254\347\232\204\344\270\234\350\245\277/index.html" index 19fd4ac0..099bc429 100644 --- "a/2018/09/02/\346\257\217\344\270\252\347\250\213\345\272\217\345\221\230\351\203\275\345\272\224\350\257\245\347\237\245\351\201\223\347\232\204\346\234\200\345\237\272\346\234\254\347\232\204\344\270\234\350\245\277/index.html" +++ "b/2018/09/02/\346\257\217\344\270\252\347\250\213\345\272\217\345\221\230\351\203\275\345\272\224\350\257\245\347\237\245\351\201\223\347\232\204\346\234\200\345\237\272\346\234\254\347\232\204\344\270\234\350\245\277/index.html" @@ -1,947 +1,616 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 每个程序员都应该知道的最基本的东西 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

每个程序员都应该知道的最基本的东西 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -
    -

  1. Bad architecture causes more problems than bad code.

    -

    垃圾的代码结构将比垃圾代码产生更多的问题

    -
    2. -

  2. You will spend more time thinking than coding.

    -

    你将花更多的时间来思考而不是敲代吗

    -
    3. -

  3. The best opportunity to get paid more is when you’re negotiating salary before getting hired.

    -

    获得更高薪水的绝佳机会是在你被雇佣前的谈判

    -
    4. -

  4. People skills determine your success more than technical skills.

    -

    人的技能决定了你的成功而不是技术技能。

    -
    5. -

  5. Users will find impressive and bizarre ways to solve their own problems.

    -

    用户将找到印象深刻且奇怪的方式来解决他们的问题

    -
    6. -
- -
    -

  1. Commit code more often.

    -

    及时提交你的代码

    -
    2. -

  2. Always work in feature branches.

    -

    在特定的分支上工作

    -
    3. -

  3. Basic UNIX skills are helpful, but not required.

    -

    基本 UNIX 技能会很有帮助但不是必需

    -
    4. -

  4. Learning VIM or EMACS will change your world.

    -

    学习 VIM 或者 EMACS 将改变你的世界

    -
    5. -

  5. All estimates are lies and “good estimates” are bigger lies.

    -

    估计是不存在的，而最好的估计就是搞传销

    -
    6. -
- -
    -

  1. 80% of programmers are barely capable of doing their job.

    -

    80%的程序员无法独立完成自己的工作

    -
    2. -

  2. Businesses exist to make money, not to make code.

    -

    企业的存在是为了赚钱而不是敲代码

    -
    3. -

  3. Software exists to solve problems, it’s not art.

    -

    软件的存在是为了解决问题而不是为了艺术

    -
    4. -

  4. Agile is a trap. You can’t avoid it.

    -

    快速是个陷阱你无法避免

    -
    5. -

  5. 80% of programmers never invest in improving their skills and never learn outside of work.

    -

    80%的程序员从来不投资与提高技能也不再工作外学习

    -
    6. -

  6. Your boss believes you are replaceable.

    -

    你的老板相信你是可替代的

    -
    7. -

  7. Work is a job, not a family, not a church, not a religion. You do it to get paid.

    -

    工作是个职业，不是家庭，不是教堂，不是信仰。你这样只是为了得到报酬

    -
    8. -

  8. Company culture is often used as a trick to pay you less money.

    -

    公司文化常常是想你支付更少钱的一种伎俩

    -
    9. -

  9. The best programmers are always building things.

    -

    最棒的程序员常常是在构建东西

    -
    10. -

  10. Your IDE doesn’t matter.

    -

    你使用的 IDE 无关紧要

    -
    11. -

  11. The language you use doesn’t matter.

    -

    你使用的编程语言无关紧要

    -
    12. -

  12. The framework you use doesn’t matter.

    -

    你使用的框架无关紧要

    -
    13. -

  13. All technology arguments boil down to children fighting over which toy to play with.

    -

    所有的技术论点就好像儿童互相争夺玩具

    -
    14. -

  14. You probably won’t get rich by winning the startup lottery.

    -

    创业不大可能让你致富

    -
    15. -

  15. Make friends with QA testers, they will make your life better.

    -

    多与测试人员交朋友这将使得你的生活更精彩

    -
    16. -

  16. Always know how your business makes money, that determines who gets paid what.

    -

    始终知道你的公司如何赚钱，这取决人们为了什么而付费

    -
    17. -

  17. If you want to feel important as a software developer, work at a tech company.

    -

    如果你想作为软件人员而感到自己的价值，为科技公司工作

    -
    18. -

  18. People will always prioritize new features over refactoring legacy code.

    -

    人们将优先考虑新功能而不是去重构遗留的代码

    -
    19. -

  19. Sometimes a train wreck has to happen for anyone to care about the brakes.

    -

    有时火车残骸必须发生在任何人关心制动器上。

    -
    20. -
- - - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 每个程序员都应该知道的最基本的东西 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

每个程序员都应该知道的最基本的东西 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +
    +

  1. Bad architecture causes more problems than bad code.

    +

    垃圾的代码结构将比垃圾代码产生更多的问题

    +
    2. +

  2. You will spend more time thinking than coding.

    +

    你将花更多的时间来思考而不是敲代吗

    +
    3. +

  3. The best opportunity to get paid more is when you’re negotiating salary before getting hired.

    +

    获得更高薪水的绝佳机会是在你被雇佣前的谈判

    +
    4. +

  4. People skills determine your success more than technical skills.

    +

    人的技能决定了你的成功而不是技术技能。

    +
    5. +

  5. Users will find impressive and bizarre ways to solve their own problems.

    +

    用户将找到印象深刻且奇怪的方式来解决他们的问题

    +
    6. +
+ +
    +

  1. Commit code more often.

    +

    及时提交你的代码

    +
    2. +

  2. Always work in feature branches.

    +

    在特定的分支上工作

    +
    3. +

  3. Basic UNIX skills are helpful, but not required.

    +

    基本 UNIX 技能会很有帮助但不是必需

    +
    4. +

  4. Learning VIM or EMACS will change your world.

    +

    学习 VIM 或者 EMACS 将改变你的世界

    +
    5. +

  5. All estimates are lies and “good estimates” are bigger lies.

    +

    估计是不存在的，而最好的估计就是搞传销

    +
    6. +
+ +
    +

  1. 80% of programmers are barely capable of doing their job.

    +

    80%的程序员无法独立完成自己的工作

    +
    2. +

  2. Businesses exist to make money, not to make code.

    +

    企业的存在是为了赚钱而不是敲代码

    +
    3. +

  3. Software exists to solve problems, it’s not art.

    +

    软件的存在是为了解决问题而不是为了艺术

    +
    4. +

  4. Agile is a trap. You can’t avoid it.

    +

    快速是个陷阱你无法避免

    +
    5. +

  5. 80% of programmers never invest in improving their skills and never learn outside of work.

    +

    80%的程序员从来不投资与提高技能也不再工作外学习

    +
    6. +

  6. Your boss believes you are replaceable.

    +

    你的老板相信你是可替代的

    +
    7. +

  7. Work is a job, not a family, not a church, not a religion. You do it to get paid.

    +

    工作是个职业，不是家庭，不是教堂，不是信仰。你这样只是为了得到报酬

    +
    8. +

  8. Company culture is often used as a trick to pay you less money.

    +

    公司文化常常是想你支付更少钱的一种伎俩

    +
    9. +

  9. The best programmers are always building things.

    +

    最棒的程序员常常是在构建东西

    +
    10. +

  10. Your IDE doesn’t matter.

    +

    你使用的 IDE 无关紧要

    +
    11. +

  11. The language you use doesn’t matter.

    +

    你使用的编程语言无关紧要

    +
    12. +

  12. The framework you use doesn’t matter.

    +

    你使用的框架无关紧要

    +
    13. +

  13. All technology arguments boil down to children fighting over which toy to play with.

    +

    所有的技术论点就好像儿童互相争夺玩具

    +
    14. +

  14. You probably won’t get rich by winning the startup lottery.

    +

    创业不大可能让你致富

    +
    15. +

  15. Make friends with QA testers, they will make your life better.

    +

    多与测试人员交朋友这将使得你的生活更精彩

    +
    16. +

  16. Always know how your business makes money, that determines who gets paid what.

    +

    始终知道你的公司如何赚钱，这取决人们为了什么而付费

    +
    17. +

  17. If you want to feel important as a software developer, work at a tech company.

    +

    如果你想作为软件人员而感到自己的价值，为科技公司工作

    +
    18. +

  18. People will always prioritize new features over refactoring legacy code.

    +

    人们将优先考虑新功能而不是去重构遗留的代码

    +
    19. +

  19. Sometimes a train wreck has to happen for anyone to care about the brakes.

    +

    有时火车残骸必须发生在任何人关心制动器上。

    +
    20. +
+ + +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2018/09/03/201893-props/index.html b/2018/09/03/201893-props/index.html deleted file mode 100644 index fc399e3d..00000000 --- a/2018/09/03/201893-props/index.html +++ /dev/null @@ -1,839 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - props | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

props - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - - - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git "a/2018/09/04/2018094-Zori-\344\270\255\347\232\204-Grid/index.html" "b/2018/09/04/2018094-Zori-\344\270\255\347\232\204-Grid/index.html" index 1687d002..26437531 100644 --- "a/2018/09/04/2018094-Zori-\344\270\255\347\232\204-Grid/index.html" +++ "b/2018/09/04/2018094-Zori-\344\270\255\347\232\204-Grid/index.html" @@ -1,886 +1,532 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Zori 中的 Grid | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

Zori 中的 Grid - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

需求

实现一个 Vue 中能使用的栅栏网格，总计每行为 24 份，用户可选择每一列所占份数，左边间隔（可以没有），以及可显示输入每一份之间的间隔（可以没有）。

- -

实现

组件

用两个组件 col.vue 以及 row.col 表示列以及行

-

col.vue

用户再输入标签时带上数据 span 以及 offset 代表份数及左边间隔，使用 props 传入，间隔更具传入的数据用 scss 进行更改样式

-
1
2
3
4
5
6
$class-prefix: span-;
@for $n from 1 through 24{
    &.#{$class-prefix}#{$n}{
        width: ($n/24)*100%;
    }
}
-

本来样式最开始的时候我是写在 template 上的，但是一旦数据增加上去的话可读性就送到了影响，就放到 script 中，由于 span 及 offset 是在组件中是会改变的于是使用计算属性，同时我使用了 ES6 结构赋值。

-

row.vue

行组件代码是比列组件是要少上不少的但是有一个难点，所以理解上是比列组件要复杂点的。

-

之前有一个需求是可以输入每一块的间隔，由于这个间隔对于每一个行组件中的列组件是一样的，所以我们没必要写在列组件上而是写在行组件上就好了，就好像事件代理一样。但是我们应该如何通过行组件告知列组件他们的间隔（gutter）呢？

-

这就要用到生命周期 mounted ，mounted 是在 created 之后的，产生后挂载。所以我们可以在他们挂载后将 gutter 传给他们的子组件

-
1
2
3
4
5
mounted(){
    this.$children.foreach((vm)=>{
        vm.gutter = this.gutter
    })
}
- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Zori 中的 Grid | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

Zori 中的 Grid + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

需求

实现一个 Vue 中能使用的栅栏网格，总计每行为 24 份，用户可选择每一列所占份数，左边间隔（可以没有），以及可显示输入每一份之间的间隔（可以没有）。

+ +

实现

组件

用两个组件 col.vue 以及 row.col 表示列以及行

+

col.vue

用户再输入标签时带上数据 span 以及 offset 代表份数及左边间隔，使用 props 传入，间隔更具传入的数据用 scss 进行更改样式

+
1
2
3
4
5
6
$class-prefix: span-;
@for $n from 1 through 24{
    &.#{$class-prefix}#{$n}{
        width: ($n/24)*100%;
    }
}
+

本来样式最开始的时候我是写在 template 上的，但是一旦数据增加上去的话可读性就送到了影响，就放到 script 中，由于 span 及 offset 是在组件中是会改变的于是使用计算属性，同时我使用了 ES6 结构赋值。

+

row.vue

行组件代码是比列组件是要少上不少的但是有一个难点，所以理解上是比列组件要复杂点的。

+

之前有一个需求是可以输入每一块的间隔，由于这个间隔对于每一个行组件中的列组件是一样的，所以我们没必要写在列组件上而是写在行组件上就好了，就好像事件代理一样。但是我们应该如何通过行组件告知列组件他们的间隔（gutter）呢？

+

这就要用到生命周期 mounted ，mounted 是在 created 之后的，产生后挂载。所以我们可以在他们挂载后将 gutter 传给他们的子组件

+
1
2
3
4
5
mounted(){
    this.$children.foreach((vm)=>{
        vm.gutter = this.gutter
    })
}
+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2018/09/04/201894-Vim(2)/index.html b/2018/09/04/201894-Vim(2)/index.html index 143a2a65..b10981b1 100644 --- a/2018/09/04/201894-Vim(2)/index.html +++ b/2018/09/04/201894-Vim(2)/index.html @@ -1,857 +1,538 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Vim(2) | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

Vim(2) - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

跳转是会经常用到的

-
    -

  • NG 跳到第 n 行

    -

    gg 第 1 行

    -

    G 最后一行

    -
    • -

  • w e 下一个单词头/尾

    -
    • -

  • b ge 上一个单词头/尾

    -
    • -
-
    -
  • % : 匹配括号移动，包括 (, {, [. （陈皓注：你需要把光标先移到括号上）
    • -
  • * 和 #: 匹配光标当前所在的单词，移动光标到下一个（或上一个）匹配单词（*是下一个，#是上一个）
    • -
- - - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Vim(2) | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

Vim(2) + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

跳转是会经常用到的

+
    +

  • NG 跳到第 n 行

    +

    gg 第 1 行

    +

    G 最后一行

    +
    • +

  • w e 下一个单词头/尾

    +
    • +

  • b ge 上一个单词头/尾

    +
    • +
+
    +
  • % : 匹配括号移动，包括 (, {, [. （陈皓注：你需要把光标先移到括号上）
    • +
  • * 和 #: 匹配光标当前所在的单词，移动光标到下一个（或上一个）匹配单词（*是下一个，#是上一个）
    • +
+ + +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/2018/09/09/\345\210\235\346\216\242-mvc/index.html" "b/2018/09/09/\345\210\235\346\216\242-mvc/index.html" new file mode 100644 index 00000000..5adbcd4c --- /dev/null +++ "b/2018/09/09/\345\210\235\346\216\242-mvc/index.html" @@ -0,0 +1,536 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 初探 MVC | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

初探 MVC + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +
+

MVC模式（Model–view–controller）是软件工程中的一种软件架构模式，把软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）。

+

MVC模式最早由Trygve Reenskaug在1978年提出[1]，是施乐帕罗奥多研究中心（Xerox PARC）在20世纪80年代为程序语言Smalltalk发明的一种软件架构。MVC模式的目的是实现一种动态的程序设计，使后续对程序的修改和扩展简化，并且使程序某一部分的重复利用成为可能。除此之外，此模式通过对复杂度的简化，使程序结构更加直观。软件系统通过对自身基本部分分离的同时也赋予了各个基本部分应有的功能。专业人员可以通过自身的专长分组：

+
    +
  • 控制器（Controller）- 负责转发请求，对请求进行处理。
    • +
  • 视图（View） - 界面设计人员进行图形界面设计。
    • +
  • 模型（Model） - 程序员编写程序应有的功能（实现算法等等）、数据库专家进行数据管理和数据库设计(可以实现具体的功能)。
    • +
+
+

总结一下：

简单来说 MVC 是一种代码设计模式，将代码分成三个部分，使得你的代码容易被理解

+
    +
  1. Controller 监听 Model 变化，Model 一变，Controller 就会去更新 View。
    2. +
  2. Controller 监听用户交互，用户点了提交或修改按钮，Controller 就要去更新 Model。
    3. +
+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/2018/09/09/\345\210\235\346\216\242vim/index.html" "b/2018/09/09/\345\210\235\346\216\242vim/index.html" new file mode 100644 index 00000000..14264d8d --- /dev/null +++ "b/2018/09/09/\345\210\235\346\216\242vim/index.html" @@ -0,0 +1,636 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 初探 vim | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

初探 vim + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +
+

教程来自 vimtutor 版本1.7 shell 下直接输入 vimtutor

+
+

先输入 ：set number 显示行号

+ +

第一讲

    +

  1. 光标在屏幕文本中的移动既可以用箭头键，也可以使用 hjkl 字母键。

    +
    h (左移)       j (下行)       k (上行)     l (右移)
+
    +

    可以在前面带上数字

    +
    +
    2. +

  2. 欲进入 Vim 编辑器(从命令行提示符)，请输入：vim 文件名 <回车>

    +
    3. +

  3. 欲退出 Vim 编辑器，请输入 :q! <回车> 放弃所有改动。

    +
    或者输入 <ESC>   :wq   <回车> 保存改动。
+
    4. +

  4. 在正常模式下删除光标所在位置的字符，请按： x

    +
    5. +

  5. 欲插入或添加文本，请输入：

    +
    i   输入欲插入文本   <ESC>             在光标前插入文本
+A   输入欲添加文本   <ESC>             在一行后添加文本
+
    6. +
+

特别提示：按下 键会带您回到正常模式或者撤消一个不想输入或部分完整
的命令。

+

第二讲

+

d 代表删除（delete）

+
+
    +
  1. 欲从当前光标删除至下一个单词，请输入：dw
    2. +
  2. 欲从当前光标删除至当前行末尾，请输入：d$
    3. +

  3. 欲删除整行，请输入：dd

    +
    4. +

  4. 欲重复一个动作，请在它前面加上一个数字：2w

    +
    5. +

  5. 在正常模式下修改命令的格式是：

    +
    operator   [number]   motion
+

    其中：
    operator - 操作符，代表要做的事情，比如 d 代表删除
    [number] - 可以附加的数字，代表动作重复的次数
    motion - 动作，代表在所操作的文本上的移动，例如 w 代表单词(word)，

    +
    $ 代表行末等等。
+
    6. +

  6. 欲移动光标到行首，请按数字0键：0

    +
    7. +

  7. 欲撤消以前的操作，请输入：u (小写的u)
    欲撤消在一行中所做的改动，请输入：U (大写的U)
    欲撤消以前的撤消命令，恢复以前的操作结果，请输入：CTRL-R

    +
    8. +
+

第三讲

    +

  1. 要重新置入已经删除的文本内容，请按小写字母 p 键。该操作可以将已删除
    的文本内容置于光标之后。如果最后一次删除的是一个整行，那么该行将置
    于当前光标所在行的下一行。

    +
    2. +

  2. 要替换光标所在位置的字符，请输入小写的 r 和要替换掉原位置字符的新字
    符即可。

    +
    3. +

  3. 更改类命令允许您改变从当前光标所在位置直到动作指示的位置中间的文本>。
    比如输入 ce 可以替换当前光标到单词的末尾的内容；输入 c$ 可以替换当
    前光标到行末的内容。

    +
    4. +

  4. 更改类命令的格式是：

    +
    c   [number]   motion
+
    5. +
+

第四讲

    +

  1. CTRL-G 用于显示当前光标所在位置和文件状态信息。
    G 用于将光标跳转至文件最后一行。
    先敲入一个行号然后输入大写 G 则是将光标移动至该行号代表的行。
    gg 用于将光标跳转至文件第一行。

    +
      +

    1. 输入 / 然后紧随一个字符串是在当前所编辑的文档中正向查找该字符串。
      输入 ? 然后紧随一个字符串则是在当前所编辑的文档中反向查找该字符串。
      完成一次查找之后按 n 键是重复上一次的命令，可在同一方向上查
      找下一个匹配字符串所在；或者按大写 N 向相反方向查找下一匹配字符串所
      在。
      CTRL-O 带您跳转回较旧的位置，CTRL-I 则带您到较新的位置。

      +
      2. +

    2. 如果光标当前位置是括号(、)、[、]、{、}，按 % 会将光标移动到配对的括
      号上。

      +
      3. +

    3. 在一行内替换头一个字符串 old 为新的字符串 new，请输入 :s/old/new
      在一行内替换所有的字符串 old 为新的字符串 new，请输入 :s/old/new/g
      在两行内替换所有的字符串 old 为新的字符串 new，请输入 :#,#s/old/new/g
      在文件内替换所有的字符串 old 为新的字符串 new，请输入 :%s/old/new/g
      进行全文替换时询问用户确认每个替换需添加 c 标志 :%s/old/new/gc

      +
      4. +
    +
    2. +
+

第五讲

    +

  1. :!command 用于执行一个外部命令 command。

    +

    请看一些实际例子：

    +
    (MS-DOS)         (Unix)
+ :!dir            :!ls            -  用于显示当前目录的内容。
+ :!del FILENAME   :!rm FILENAME   -  用于删除名为 FILENAME 的文
+

    件。

    +
    2. +

  2. :w FILENAME 可将当前 VIM 中正在编辑的文件保存到名为 FILENAME 的文
    件中。

    +
    3. +

  3. v motion :w FILENAME 可将当前编辑文件中可视模式下选中的内容保存到文
    件
    FILENAME 中。

    +
    4. +

  4. :r FILENAME 可提取磁盘文件 FILENAME 并将其插入到当前文件的光标位置
    后面。

    +
    5. +

  5. :r !dir 可以读取 dir 命令的输出并将其放置到当前文件的光标位置后面。

    +
    6. +
+

第六讲

    +

  1. :!command 用于执行一个外部命令 command。

    +

    请看一些实际例子：

    +
    (MS-DOS)         (Unix)
+ :!dir            :!ls            -  用于显示当前目录的内容。
+ :!del FILENAME   :!rm FILENAME   -  用于删除名为 FILENAME 的文
+

    件。

    +
    2. +

  2. :w FILENAME 可将当前 VIM 中正在编辑的文件保存到名为 FILENAME 的文
    件中。

    +
    3. +

  3. v motion :w FILENAME 可将当前编辑文件中可视模式下选中的内容保存到文
    件
    FILENAME 中。

    +
    4. +

  4. :r FILENAME 可提取磁盘文件 FILENAME 并将其插入到当前文件的光标位置
    后面。

    +
    5. +

  5. :r !dir 可以读取 dir 命令的输出并将其放置到当前文件的光标位置后面。

    +
    6. +
+

第七讲

    +

  1. 输入 :help 或者按 键或 键可以打开帮助窗口。

    +
    2. +

  2. 输入 :help cmd 可以找到关于 cmd 命令的帮助。

    +
    3. +

  3. 输入 CTRL-W CTRL-W 可以使您在窗口之间跳转。

    +
    4. +

  4. 输入 :q 以关闭帮助窗口

    +
    5. +

  5. 您可以创建一个 vimrc 启动脚本文件用来保存您偏好的设置。

    +
    6. +

  6. 当输入 : 命令时，按 CTRL-D 可以查看可能的补全结果。
    按 可以使用一个补全。

    +
    7. +
+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/2018/09/09/\345\217\202\346\225\260\345\244\204\347\220\206&\350\247\243\346\236\204\350\265\213\345\200\274/index.html" "b/2018/09/09/\345\217\202\346\225\260\345\244\204\347\220\206&\350\247\243\346\236\204\350\265\213\345\200\274/index.html" new file mode 100644 index 00000000..376a3e50 --- /dev/null +++ "b/2018/09/09/\345\217\202\346\225\260\345\244\204\347\220\206&\350\247\243\346\236\204\350\265\213\345\200\274/index.html" @@ -0,0 +1,534 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 参数处理&解构赋值 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

参数处理&解构赋值 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

函数默认参数

与 Python 的区别 http://effbot.org/zone/default-values.htm
剩余参数

+

参数变为数组

Array.prototype.slice.call(arguments,2)
Array.from(arguments).slice(2)
function fn (a,b, …c){}
展开操作

+ +

[…iterableObj] = [1, 3, 5, 7, 9];
[0, 2, …iterableObj, 4, 6, 8];

+

解构赋值

[a, b] = [b, a]

+

[] () 前最好加;

+

[a, b, …rest] = [10, 20, 30, 40, 50]
let {name, age} = frank
[a=5, b=7] = [1];
[a, b] = f()
[a, , b] = f();
{p: foo, q: bar} = o
let {a = 10, b = 5} = {a: 3};
let {a:aa = 10, b:bb = 5} = {a: 3};

+

对象浅拷贝

1
2
3
4
5
6
7
{
	let objA = {name: {a: 'x'}}
    let objB = Object.assign({}, objA)
    console.log(objB)
	objB.name.a = 'b'
  	console.log(objA.name)
}//b
+

对象合并
MDN 上更多的例子

+

对象属性加强

obj = { x, y }
obj = {[“baz” + quux() ]: 42}
函数属性可以缩写

+

新的字符串

多行字符串
字符串里插入变量（插值）
函数接字符串

+

fn${name} 是一个 ${person}
styled-component 就是用的这个语法

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/2018/09/09/\347\231\273\345\275\225\344\270\216\346\263\250\345\206\214/index.html" "b/2018/09/09/\347\231\273\345\275\225\344\270\216\346\263\250\345\206\214/index.html" new file mode 100644 index 00000000..640c3971 --- /dev/null +++ "b/2018/09/09/\347\231\273\345\275\225\344\270\216\346\263\250\345\206\214/index.html" @@ -0,0 +1,540 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 登录与注册 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

登录与注册 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

路由

后端必需验证，curl 直接发请求绕过前端。

+

Cookie 就好像游乐园的通行证

+
    +
  • 服务器通过 Set-Cookie 响应头设置Cookie
    • +
  • 浏览器得到 Cookie 后，每次请求都会带上 Cookie
    • +
  • 服务器读到 Cookie 就知道登录用户是谁
    • +
+

Cookie 可以做假

+

http only

+

Cookie 有有效期

+
+

Cookie的缺陷

    +
  1. Cookie会被附加在每个HTTP请求中，所以无形中增加了流量。
    2. +
  2. 由于在HTTP请求中的Cookie是明文传递的，所以安全性成问题，除非用HTTPS。
    3. +
  3. Cookie的大小限制在4KB左右，对于复杂的存储需求来说是不够用的。[3]
    4. +
+
+

HTTP 缓存

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/2018/10/10/20181010-\346\226\260\346\265\252\345\211\215\347\253\257\346\240\241\346\213\233\351\235\242\350\257\225/index.html" "b/2018/10/10/20181010-\346\226\260\346\265\252\345\211\215\347\253\257\346\240\241\346\213\233\351\235\242\350\257\225/index.html" index 6d0b7383..3745111d 100644 --- "a/2018/10/10/20181010-\346\226\260\346\265\252\345\211\215\347\253\257\346\240\241\346\213\233\351\235\242\350\257\225/index.html" +++ "b/2018/10/10/20181010-\346\226\260\346\265\252\345\211\215\347\253\257\346\240\241\346\213\233\351\235\242\350\257\225/index.html" @@ -1,883 +1,564 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 新浪前端校招面试 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

新浪前端校招面试 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

把国庆玩完又开始我的佛系面试，我的心还在玩耍可是却不得不面试因为我还没 offer。。。想想就想继续玩下去

-
    -

  • 自我介绍
    每次都会问的，想想我这个垃圾二本渣渣能介绍啥，说一分钟搞定

    -
    • -

  • 面试官看着我的简历就开始问面试中最牛逼的问题 “你做的这些项目给你印象最深的的哪一个，中间遇到的那些问题让你记忆犹新”

    -

    这问题真的玄学，我也只能硬着头皮上说的是自己做的第一个项目，实现方法以及途中的问题及感想然后面试官也更具我的说辞进行进一步的问答，如你的 mvc 结构是如何去实现

    -
    • -

  • 你现在回看自己的第一个项目你觉得有什么地方是可以优化的

    -
    • -

  • 你当初做 node 的项目的原因

    -
    • -

  • 为啥用 express 不用 koa

    -
    • -

  • 对 express 中间件的了解

    -
    • -

  • csrf 是啥该如何避免

    -
    • -

  • 啥是 W3C, 拿着我网上做的笔试题又开始问了一些问题

    -
    • -

  • vue 中兄弟组件该如何通信

    -
    • -

  • 最近有看啥最近在做啥

    -

    开始扯淡，聊了下我比较喜欢阮一峰，说了些前端八卦，大概就这时候我就和他说了下知道微博有做 pwa 之类的然后面试官就打开的 pixel 中的微博 pwa 开始问了

    -
    • -

  • 在 pwa 多条数据流在滑动能直接显示而不刷新，点开信息也是能够不刷新就直接显示该如何去实现

    -
    • -

  • 当用户滑动了很多条的信息请问对于那些信息该如何去处理而不影响用户的体验

    -
    • -

  • 当我们将划过的区域用什么样的方法来能达到最好的体验（小号的资源最少） 一个 div 来撑 magin-top transform

    -
    • -

  • pwa 微博中下拉刷新应该若何实现

    -
    • -

  • pc 端微博若果做下拉刷新该如何实现

    -

    谈了大概一个多小时开始 hr 面

    -
    • -

  • 自我介绍

    -
    • -

  • 为何选这个职业

    -
    • -

  • 你的职业规划

    -
    • -

  • 你的问题

    -
    • -
-

然后回家等消息

-

我回去路上一搜面试官是新浪微博 html5 的 team leader。微博的 pwa 就是他一手倒弄出来的，我。。。这样的大神我能说啥请收下我的膝盖。

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 新浪前端校招面试 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

新浪前端校招面试 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

把国庆玩完又开始我的佛系面试，我的心还在玩耍可是却不得不面试因为我还没 offer。。。想想就想继续玩下去

+
    +

  • 自我介绍
    每次都会问的，想想我这个垃圾二本渣渣能介绍啥，说一分钟搞定

    +
    • +

  • 面试官看着我的简历就开始问面试中最牛逼的问题 “你做的这些项目给你印象最深的的哪一个，中间遇到的那些问题让你记忆犹新”

    +

    这问题真的玄学，我也只能硬着头皮上说的是自己做的第一个项目，实现方法以及途中的问题及感想然后面试官也更具我的说辞进行进一步的问答，如你的 mvc 结构是如何去实现

    +
    • +

  • 你现在回看自己的第一个项目你觉得有什么地方是可以优化的

    +
    • +

  • 你当初做 node 的项目的原因

    +
    • +

  • 为啥用 express 不用 koa

    +
    • +

  • 对 express 中间件的了解

    +
    • +

  • csrf 是啥该如何避免

    +
    • +

  • 啥是 W3C, 拿着我网上做的笔试题又开始问了一些问题

    +
    • +

  • vue 中兄弟组件该如何通信

    +
    • +

  • 最近有看啥最近在做啥

    +

    开始扯淡，聊了下我比较喜欢阮一峰，说了些前端八卦，大概就这时候我就和他说了下知道微博有做 pwa 之类的然后面试官就打开的 pixel 中的微博 pwa 开始问了

    +
    • +

  • 在 pwa 多条数据流在滑动能直接显示而不刷新，点开信息也是能够不刷新就直接显示该如何去实现

    +
    • +

  • 当用户滑动了很多条的信息请问对于那些信息该如何去处理而不影响用户的体验

    +
    • +

  • 当我们将划过的区域用什么样的方法来能达到最好的体验（小号的资源最少） 一个 div 来撑 magin-top transform

    +
    • +

  • pwa 微博中下拉刷新应该若何实现

    +
    • +

  • pc 端微博若果做下拉刷新该如何实现

    +

    谈了大概一个多小时开始 hr 面

    +
    • +

  • 自我介绍

    +
    • +

  • 为何选这个职业

    +
    • +

  • 你的职业规划

    +
    • +

  • 你的问题

    +
    • +
+

然后回家等消息

+

我回去路上一搜面试官是新浪微博 html5 的 team leader。微博的 pwa 就是他一手倒弄出来的，我。。。这样的大神我能说啥请收下我的膝盖。

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/2018/10/12/20181012-\345\256\211\345\205\250\345\210\244\346\226\255\346\225\260\346\215\256\347\261\273\345\236\213/index.html" "b/2018/10/12/20181012-\345\256\211\345\205\250\345\210\244\346\226\255\346\225\260\346\215\256\347\261\273\345\236\213/index.html" index 4e6a9551..4975af58 100644 --- "a/2018/10/12/20181012-\345\256\211\345\205\250\345\210\244\346\226\255\346\225\260\346\215\256\347\261\273\345\236\213/index.html" +++ "b/2018/10/12/20181012-\345\256\211\345\205\250\345\210\244\346\226\255\346\225\260\346\215\256\347\261\273\345\236\213/index.html" @@ -1,848 +1,529 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 安全判断数据类型 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

安全判断数据类型 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

-

之前在《高程》里面有一章节提到了安全判断数据类型，唯一弱点是没有改变 Object.prototype.toString() 没有被修改过。之前自己看的时候也是做了笔记的可是今天笔试的时候就想不到如何使用这个方法去实现了，编写下记录哈。

-

题目是判别简单类型(Number, String)，数组，函数，对象，null，NaN（我也很好奇为啥算上 NaN(Number) 没有 undefined，那我自己写就考虑上哈）

- -
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function whichType(type){
    if(Number.isNaN(type) === true){
        return 'NaN'
    }else if(Object.prototype.toString.call(type) === '[object Number]'){
        return 'Number'
    }else if(Object.prototype.toString.call(type) === '[object String]'){
        return 'String'
    }else if(Object.prototype.toString.call(type) === '[object Array]'){
        return 'Array'
    }else if(Object.prototype.toString.call(type) === '[object Function]'){
        return 'Function'
    }else if(Object.prototype.toString.call(type) === '[object null]'){
        return 'null'
    }else if(Object.prototype.toString.call(type) === '[object Undefined]'){
        return 'undefined'
    }else if(Object.prototype.toString.call(type) === '[object Object]'){
        return 'Object'
    }
    return 'i dont know'
}
-

说实在代码惨不忍睹，改必须改

-
1
2
3
4
5
6
function whichType(type){
    if(Number.isNaN(type) === true){
        return 'NaN'
    }
    return Object.prototype.toString.call(type).match(/\w+/g)[1]
}
-

这样看起来是人写的了

-

恩恩就这样吧。

-
1
2
3
function whichType(type){
    return Number.isNaN(type) === true ? 'NaN' : Object.prototype.toString.call(type).match(/\w+/g)[1]
}
- -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 安全判断数据类型 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

安全判断数据类型 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

+

之前在《高程》里面有一章节提到了安全判断数据类型，唯一弱点是没有改变 Object.prototype.toString() 没有被修改过。之前自己看的时候也是做了笔记的可是今天笔试的时候就想不到如何使用这个方法去实现了，编写下记录哈。

+

题目是判别简单类型(Number, String)，数组，函数，对象，null，NaN（我也很好奇为啥算上 NaN(Number) 没有 undefined，那我自己写就考虑上哈）

+ +
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function whichType(type){
    if(Number.isNaN(type) === true){
        return 'NaN'
    }else if(Object.prototype.toString.call(type) === '[object Number]'){
        return 'Number'
    }else if(Object.prototype.toString.call(type) === '[object String]'){
        return 'String'
    }else if(Object.prototype.toString.call(type) === '[object Array]'){
        return 'Array'
    }else if(Object.prototype.toString.call(type) === '[object Function]'){
        return 'Function'
    }else if(Object.prototype.toString.call(type) === '[object null]'){
        return 'null'
    }else if(Object.prototype.toString.call(type) === '[object Undefined]'){
        return 'undefined'
    }else if(Object.prototype.toString.call(type) === '[object Object]'){
        return 'Object'
    }
    return 'i dont know'
}
+

说实在代码惨不忍睹，改必须改

+
1
2
3
4
5
6
function whichType(type){
    if(Number.isNaN(type) === true){
        return 'NaN'
    }
    return Object.prototype.toString.call(type).match(/\w+/g)[1]
}
+

这样看起来是人写的了

+

恩恩就这样吧。

+
1
2
3
function whichType(type){
    return Number.isNaN(type) === true ? 'NaN' : Object.prototype.toString.call(type).match(/\w+/g)[1]
}
+
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/2018/10/17/\345\215\203\344\275\215\347\254\246/index.html" "b/2018/10/17/\345\215\203\344\275\215\347\254\246/index.html" index 283d4c8e..8eda5eef 100644 --- "a/2018/10/17/\345\215\203\344\275\215\347\254\246/index.html" +++ "b/2018/10/17/\345\215\203\344\275\215\347\254\246/index.html" @@ -1,849 +1,530 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 千位符 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

千位符 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

千位符这样的需求是非常常见的，我一般的处理方式就是 number.toLocaleString()

-

但是如果用正则我们应该如何来编写代码呢？

-

半小时正则表达式

-
1
123456789 --> 123,456,789
- -

我们希望从各位开始每三个前加一个 , 但是如果在最前那么就不加，这里面用的难点的就是零宽断言，其他的就是数字与符号的匹配。

-
1
2
3
function format(num){
    return num && num.toString().replace(/(?=(?!^)(\d{3})+$)/g, ',')
}
-

这样就完成了对整数的千位符处理。如果有小数点的话该如何处理？

-
1
2
3
function formatFloat(num){
    return num && num.toString().replace(/\d+/g, m => m.replace(/(?=(?!^)(\d{3})+$)/g,','))
}
-

先将小数点前的匹配出来进行处理就好。

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 千位符 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

千位符 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

千位符这样的需求是非常常见的，我一般的处理方式就是 number.toLocaleString()

+

但是如果用正则我们应该如何来编写代码呢？

+

半小时正则表达式

+
1
123456789 --> 123,456,789
+ +

我们希望从各位开始每三个前加一个 , 但是如果在最前那么就不加，这里面用的难点的就是零宽断言，其他的就是数字与符号的匹配。

+
1
2
3
function format(num){
    return num && num.toString().replace(/(?=(?!^)(\d{3})+$)/g, ',')
}
+

这样就完成了对整数的千位符处理。如果有小数点的话该如何处理？

+
1
2
3
function formatFloat(num){
    return num && num.toString().replace(/\d+/g, m => m.replace(/(?=(?!^)(\d{3})+$)/g,','))
}
+

先将小数点前的匹配出来进行处理就好。

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/2018/10/27/Array-\347\261\273\345\236\213/index.html" "b/2018/10/27/Array-\347\261\273\345\236\213/index.html" index 8817a40b..3dda49a4 100644 --- "a/2018/10/27/Array-\347\261\273\345\236\213/index.html" +++ "b/2018/10/27/Array-\347\261\273\345\236\213/index.html" @@ -1,925 +1,583 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Array 类型 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

Array 类型 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

-

Array 恐怕是除了 Object 外在 JavaScript 中最常用的类型了。

- -

创建数组

1
2
3
var arr0 = new Array()
var arr1 = new Array(20)//length 为 20
var arr2 = new Array('a', 'b', 'c')//包含三个字符串的数组
-

给构造函数一个值也是可以创建数组的，但有点复杂，如果是数值，会按照该数值创建给定项数的数组，其他类型参数则是会创建包含该值的只有一项的数组，这看起来有点小尴尬但是在 ES6 中就解决了这个问题。

-

其次还可以省略 new 操作符

-

另外一种是我们更加常用的数组字面量表示法，

-
1
2
var arr0 = ['1', '2', '3']
var arr1 = [, ,] //不要在最后加 , 这样会创建 2 个或 3 个 项的数组
-
    -
  • 注意： 数组的 length 属性他不是只读的，因此我们可以通过改变 length 来改变数组
    • -
-
1
2
3
var arr = ['1', '2', '3'] 
arr.length = 2
alert(arr[2])//undefined
-

利用 length 属性可以方便的从数组末尾添加与删除

-

检测数组

1
2
3
4
5
6
7
8
9
function isArray(obj){
    return Object.prototype.toString.call(obj) === '[Object Array]'
}
---
if(arr instanceof Array){
   // 
}
---
Array.isArray()
-

改变数组方法

    -
  • 栈方法 push() pop()
    • -
  • 队列方法 shift() unshift()
    • -
  • 重排序方法 sort() reverse()
    • -
  • 操作方法 splice()
    • -
  • 位置方法 indexOf() lastIndexOf()
    • -
  • 迭代方法 every() filter() forEach() map() some()
    • -
  • 归并方法 reduce()
    • -
-

不改变数组方法

    -
  • 操作方法 concat() slice()
    • -
  • 转换方法 toSring() valueof() toLocaleString() join()
    • -
-

ES6 数组的扩展

扩展运输算符（ … ）

1
2
console.log(...[1, 2, 3])// 1 2 3
console.log(1, ...[1, 2])// 1 2 3
-

由于扩展运算符可以展开数组

-
1
2
3
4
\\ ES5
Math.max.apply(undefined, [1, 2, 3])
\\ ES6
Math.max(...[1, 2, 3])
-

合并数组

-
1
2
3
4
\\ ES5
[1, 2].concat(more)
\\ ES6
[1, 2, ...more]
-

与解构赋值相结合

-
1
2
3
const [first, ...last] = [1, 2, 3, 4]
first // 1
last // [2, 3, 4]
-

字符串

-
1
[...'he'] // ['h', 'e']
-

Array.from()

1
2
3
4
5
6
7
8
9
10
let arrlike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
}
// ES5
var arr1 = [].slice.call(arrlick) // ['a', 'b', 'c']
// ES6
let arr2 = Array.from(arrlike) // ['a', 'b', 'c']
-

将两类对象：类似数组的对象与可遍历对象转为真正的数组

-

Array.of()

1
2
Array.of(1, 2, 3) // [1, , 2, 3]
Array.of(3) // [3]
-

弥补数组构造函数的不足

-

copyWithin()

Array.prototype.copyWithin(target, start = 0, end = this.length)

-
    -
  • target(必选)：从该位置开始替换
    • -
  • start(可选)：从该位置开始读数据，默认为0，负数表示倒数
    • -
  • end(可选)：到该位置停止，默认为数组长度，负数为倒数
    • -
  • 三个数为数值，不是则自动转化为数值
    • -
-
1
[1, 2, 3, 4, 5].copyWithin(0, 3) // [5, 4, 3, 4, 5]
-

find() findIndex()

1
2
[1, 2, 3, -5].find(n => n < 0) // -5
[1, 2, 3, -5].findIndex(n => n < 0) // 3
-

可以发现 NaN 弥补了 indexof 的不足

-

fill()

1
2
[1, 2, 3].fill(7) // [7, 7, 7]
[1, 2, 3].fill(7, 1, 2) // [1, 7, 3]
-

用来填充非常方便

-

entries() keys() values()

对键值对，键名，键值的遍历

-

includes

1
[1, NaN, 3].includes(NaN) // true
-

参考：

-
    -

  • 《JavaScript高级程序设计》

    -
    • -

  • ES6 标准入门》

    -
    • -
- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Array 类型 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

Array 类型 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

+

Array 恐怕是除了 Object 外在 JavaScript 中最常用的类型了。

+ +

创建数组

1
2
3
var arr0 = new Array()
var arr1 = new Array(20)//length 为 20
var arr2 = new Array('a', 'b', 'c')//包含三个字符串的数组
+

给构造函数一个值也是可以创建数组的，但有点复杂，如果是数值，会按照该数值创建给定项数的数组，其他类型参数则是会创建包含该值的只有一项的数组，这看起来有点小尴尬但是在 ES6 中就解决了这个问题。

+

其次还可以省略 new 操作符

+

另外一种是我们更加常用的数组字面量表示法，

+
1
2
var arr0 = ['1', '2', '3']
var arr1 = [, ,] //不要在最后加 , 这样会创建 2 个或 3 个 项的数组
+
    +
  • 注意： 数组的 length 属性他不是只读的，因此我们可以通过改变 length 来改变数组
    • +
+
1
2
3
var arr = ['1', '2', '3'] 
arr.length = 2
alert(arr[2])//undefined
+

利用 length 属性可以方便的从数组末尾添加与删除

+

检测数组

1
2
3
4
5
6
7
8
9
function isArray(obj){
    return Object.prototype.toString.call(obj) === '[Object Array]'
}
---
if(arr instanceof Array){
   // 
}
---
Array.isArray()
+

改变数组方法

    +
  • 栈方法 push() pop()
    • +
  • 队列方法 shift() unshift()
    • +
  • 重排序方法 sort() reverse()
    • +
  • 操作方法 splice()
    • +
  • 位置方法 indexOf() lastIndexOf()
    • +
  • 迭代方法 every() filter() forEach() map() some()
    • +
  • 归并方法 reduce()
    • +
+

不改变数组方法

    +
  • 操作方法 concat() slice()
    • +
  • 转换方法 toSring() valueof() toLocaleString() join()
    • +
+

ES6 数组的扩展

扩展运输算符（ … ）

1
2
console.log(...[1, 2, 3])// 1 2 3
console.log(1, ...[1, 2])// 1 2 3
+

由于扩展运算符可以展开数组

+
1
2
3
4
\\ ES5
Math.max.apply(undefined, [1, 2, 3])
\\ ES6
Math.max(...[1, 2, 3])
+

合并数组

+
1
2
3
4
\\ ES5
[1, 2].concat(more)
\\ ES6
[1, 2, ...more]
+

与解构赋值相结合

+
1
2
3
const [first, ...last] = [1, 2, 3, 4]
first // 1
last // [2, 3, 4]
+

字符串

+
1
[...'he'] // ['h', 'e']
+

Array.from()

1
2
3
4
5
6
7
8
9
10
let arrlike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
}
// ES5
var arr1 = [].slice.call(arrlick) // ['a', 'b', 'c']
// ES6
let arr2 = Array.from(arrlike) // ['a', 'b', 'c']
+

将两类对象：类似数组的对象与可遍历对象转为真正的数组

+

Array.of()

1
2
Array.of(1, 2, 3) // [1, , 2, 3]
Array.of(3) // [3]
+

弥补数组构造函数的不足

+

copyWithin()

Array.prototype.copyWithin(target, start = 0, end = this.length)

+
    +
  • target(必选)：从该位置开始替换
    • +
  • start(可选)：从该位置开始读数据，默认为0，负数表示倒数
    • +
  • end(可选)：到该位置停止，默认为数组长度，负数为倒数
    • +
  • 三个数为数值，不是则自动转化为数值
    • +
+
1
[1, 2, 3, 4, 5].copyWithin(0, 3) // [5, 4, 3, 4, 5]
+

find() findIndex()

1
2
[1, 2, 3, -5].find(n => n < 0) // -5
[1, 2, 3, -5].findIndex(n => n < 0) // 3
+

可以发现 NaN 弥补了 indexof 的不足

+

fill()

1
2
[1, 2, 3].fill(7) // [7, 7, 7]
[1, 2, 3].fill(7, 1, 2) // [1, 7, 3]
+

用来填充非常方便

+

entries() keys() values()

对键值对，键名，键值的遍历

+

includes

1
[1, NaN, 3].includes(NaN) // true
+

参考：

+
    +

  • 《JavaScript高级程序设计》

    +
    • +

  • ES6 标准入门》

    +
    • +
+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/2018/10/30/20181030-\345\211\215\347\253\257\347\256\200\345\215\225\345\270\270\347\224\250\347\256\227\346\263\225\357\274\210\344\270\200\357\274\211/index.html" "b/2018/10/30/20181030-\345\211\215\347\253\257\347\256\200\345\215\225\345\270\270\347\224\250\347\256\227\346\263\225\357\274\210\344\270\200\357\274\211/index.html" index befcbcfe..d3ae4b94 100644 --- "a/2018/10/30/20181030-\345\211\215\347\253\257\347\256\200\345\215\225\345\270\270\347\224\250\347\256\227\346\263\225\357\274\210\344\270\200\357\274\211/index.html" +++ "b/2018/10/30/20181030-\345\211\215\347\253\257\347\256\200\345\215\225\345\270\270\347\224\250\347\256\227\346\263\225\357\274\210\344\270\200\357\274\211/index.html" @@ -1,883 +1,541 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 前端简单常用算法（一） | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

前端简单常用算法（一） - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

-

记录一些在前端会常用到的一些简单函数

-

处理 url 得到需要查询的东西

- -

解析 URL 为一个对象

1
2
3
4
5
6
7
8
9
let url = 'http://www.domain.com/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&enabled';
parseParam(url)
/* 结果
{ user: 'anonymous',
  id: [ 123, 456 ], // 重复出现的 key 要组装成数组，能被转成数字的就转成数字类型
  city: '北京', // 中文需解码
  enabled: true, // 未指定值得 key 约定为 true
}
*/
-

获取到查询参数

按道理一般是 location.search.slice(1)

-

但是本题给出 url 所以选择正则

-
1
2
/.+\?(.+)$/.exec(url)[1]
//user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&enabled'
-

处理查询参数为对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function parseParam(url){
    let search = /.+\?(.+)$/.exec(url)[1]
    let hash = {}
    let kvs = search.split('&')
    kvs.forEach(kv => {
        if(/=/.test(kv)){
            let [key, val] = kv.split('=')
            val = decodeURIComponent(val)//解码
            val = /^\d+$/.test(val) ? ~~val : val//若全为数字则将其有字符串转换为数字
            if(hash.hasOwnProperty(key)){
                hash[key] = [].concat(hash[key],val)
            }else{
                hash[key] = val
            }
        }else{
            hash[kv] = true
        }
    })
    return hash
}
-
    -

  • 正则

    -
    • -

  • hasOwnProperty()

    -
    • -

  • ~~

    -
    • -
- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 前端简单常用算法（一） | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

前端简单常用算法（一） + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

+

记录一些在前端会常用到的一些简单函数

+

处理 url 得到需要查询的东西

+ +

解析 URL 为一个对象

1
2
3
4
5
6
7
8
9
let url = 'http://www.domain.com/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&enabled';
parseParam(url)
/* 结果
{ user: 'anonymous',
  id: [ 123, 456 ], // 重复出现的 key 要组装成数组，能被转成数字的就转成数字类型
  city: '北京', // 中文需解码
  enabled: true, // 未指定值得 key 约定为 true
}
*/
+

获取到查询参数

按道理一般是 location.search.slice(1)

+

但是本题给出 url 所以选择正则

+
1
2
/.+\?(.+)$/.exec(url)[1]
//user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&enabled'
+

处理查询参数为对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function parseParam(url){
    let search = /.+\?(.+)$/.exec(url)[1]
    let hash = {}
    let kvs = search.split('&')
    kvs.forEach(kv => {
        if(/=/.test(kv)){
            let [key, val] = kv.split('=')
            val = decodeURIComponent(val)//解码
            val = /^\d+$/.test(val) ? ~~val : val//若全为数字则将其有字符串转换为数字
            if(hash.hasOwnProperty(key)){
                hash[key] = [].concat(hash[key],val)
            }else{
                hash[key] = val
            }
        }else{
            hash[kv] = true
        }
    })
    return hash
}
+
    +

  • 正则

    +
    • +

  • hasOwnProperty()

    +
    • +

  • ~~

    +
    • +
+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/2019/01/15/brewInstall\357\274\232/index.html" "b/2019/01/15/brewInstall\357\274\232/index.html" index c2089e54..6ac2b25f 100644 --- "a/2019/01/15/brewInstall\357\274\232/index.html" +++ "b/2019/01/15/brewInstall\357\274\232/index.html" @@ -1,882 +1,528 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - linux 下 python 版本管理 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

linux 下 python 版本管理 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

StartFragment 安装 Mac 包管理软件 brew：

1
sh -c "$(curl -fsSL https://raw.githubusercontent.com/Linuxbrew/install/master/install.sh)"
-

bash 报错

-
1
Warning: /home/linuxbrew/.linuxbrew/bin is not in your PATH.
-

参看安装文档还需要

-
1
2
3
4
test -d ~/.linuxbrew && eval $(~/.linuxbrew/bin/brew shellenv)
test -d /home/linuxbrew/.linuxbrew && eval $(/home/linuxbrew/.linuxbrew/bin/brew shellenv)
test -r ~/.bash_profile && echo "eval \$($(brew --prefix)/bin/brew shellenv)" >>~/.bash_profile
echo "eval \$($(brew --prefix)/bin/brew shellenv)" >>~/.profile
-

1550561657989

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + linux 下 python 版本管理 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

linux 下 python 版本管理 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

StartFragment 安装 Mac 包管理软件 brew：

1
sh -c "$(curl -fsSL https://raw.githubusercontent.com/Linuxbrew/install/master/install.sh)"
+

bash 报错

+
1
Warning: /home/linuxbrew/.linuxbrew/bin is not in your PATH.
+

参看安装文档还需要

+
1
2
3
4
test -d ~/.linuxbrew && eval $(~/.linuxbrew/bin/brew shellenv)
test -d /home/linuxbrew/.linuxbrew && eval $(/home/linuxbrew/.linuxbrew/bin/brew shellenv)
test -r ~/.bash_profile && echo "eval \$($(brew --prefix)/bin/brew shellenv)" >>~/.bash_profile
echo "eval \$($(brew --prefix)/bin/brew shellenv)" >>~/.profile
+

1550561657989

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2019/01/15/pyenv/index.html b/2019/01/15/pyenv/index.html index 3ab5c6e0..9aae6f92 100644 --- a/2019/01/15/pyenv/index.html +++ b/2019/01/15/pyenv/index.html @@ -1,876 +1,545 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - linux 下 python 版本管理 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

linux 下 python 版本管理 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

-

由于马上要做毕业设计，而我的毕设与 python 有关，然后我的 deepin 系统对于 python 的版本管理不够方便，于是使用了pyenv

- -
    -
  • 最好看官网的教程
    • -
-
1
2
3
4
5
6
7
8
curl https://pyenv.run | zsh
pyenv update
echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.zshrc
echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.zshrc
echo -e 'if command -v pyenv 1>/dev/null 2>&1; then\n  eval "$(pyenv init -)"\nfi' >> ~/.zshrc
exec "$SHELL"
-

这样就算 OK 了

-

安装

-
1
pyenv install x.x.x
-

查看

-
1
pyenv versions
-

切换

-
1
pyenv global x.x.x
-

这是正常的过程，但是我中间还是出了些错误

- - - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + linux 下 python 版本管理 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

linux 下 python 版本管理 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

+

由于马上要做毕业设计，而我的毕设与 python 有关，然后我的 deepin 系统对于 python 的版本管理不够方便，于是使用了pyenv

+ +
    +
  • 最好看官网的教程
    • +
+
1
2
3
4
5
6
7
8
curl https://pyenv.run | zsh

pyenv update

echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.zshrc
echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.zshrc
echo -e 'if command -v pyenv 1>/dev/null 2>&1; then\n  eval "$(pyenv init -)"\nfi' >> ~/.zshrc
exec "$SHELL"
+

这样就算 OK 了

+

安装

+
1
pyenv install x.x.x
+

查看

+
1
pyenv versions
+

切换

+
1
pyenv global x.x.x
+

这是正常的过程，但是我中间还是出了些错误

+ + +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2019/01/19/AnyProxy/index.html b/2019/01/19/AnyProxy/index.html index ebab7e96..f765617c 100644 --- a/2019/01/19/AnyProxy/index.html +++ b/2019/01/19/AnyProxy/index.html @@ -1,848 +1,529 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - AnyProxy 上手 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

AnyProxy 上手 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

-

由于要爬取微信上的文章列表，但因为微信公众号的封闭性，微信公众平台并没有对外提供 Web 端入口，只能通过手机客户端接收、查看公众号文章，所以，为了窥探到公众号背后的网络请求，我们需要借以代理工具的辅助。

- -

HTTP代理工具又称为抓包工具，主流的抓包工具 Windows 平台有 Fiddler，macOS 有 Charles，阿里开源了一款工具叫 AnyProxy。它们的基本原理都是类似的，就是通过在手机客户端设置好代理IP和端口，客户端所有的 HTTP、HTTPS 请求就会经过代理工具，在代理工具中就可以清晰地看到每个请求的细节，然后可以分析出每个请求是如何构造的，弄清楚这些之后，我们就可以用 Python 模拟发起请求，进而得到我们想要的数据。

-

使用的方法官方文档都写的很明白

-

值得记录下来的是我们是要用手机来进行微信公众号的访问，用电脑来进行抓包，所以要保证手机与笔记本在同一个局域网下，比如连在同一个局域网下，我是用一个手机开 wifi，电脑一另一台手机连接该 wifi

-

当电脑 127.0.0.1:8002 手机 电脑局域网ip：8002 显示一样的内容说明是在同一局域网内了。

-

把证书装进手机，不然会不被认可

-

修改手机的代理与端口为电脑的局域网 IP 及 8001

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + AnyProxy 上手 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

AnyProxy 上手 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

+

由于要爬取微信上的文章列表，但因为微信公众号的封闭性，微信公众平台并没有对外提供 Web 端入口，只能通过手机客户端接收、查看公众号文章，所以，为了窥探到公众号背后的网络请求，我们需要借以代理工具的辅助。

+ +

HTTP代理工具又称为抓包工具，主流的抓包工具 Windows 平台有 Fiddler，macOS 有 Charles，阿里开源了一款工具叫 AnyProxy。它们的基本原理都是类似的，就是通过在手机客户端设置好代理IP和端口，客户端所有的 HTTP、HTTPS 请求就会经过代理工具，在代理工具中就可以清晰地看到每个请求的细节，然后可以分析出每个请求是如何构造的，弄清楚这些之后，我们就可以用 Python 模拟发起请求，进而得到我们想要的数据。

+

使用的方法官方文档都写的很明白

+

值得记录下来的是我们是要用手机来进行微信公众号的访问，用电脑来进行抓包，所以要保证手机与笔记本在同一个局域网下，比如连在同一个局域网下，我是用一个手机开 wifi，电脑一另一台手机连接该 wifi

+

当电脑 127.0.0.1:8002 手机 电脑局域网ip：8002 显示一样的内容说明是在同一局域网内了。

+

把证书装进手机，不然会不被认可

+

修改手机的代理与端口为电脑的局域网 IP 及 8001

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2019/01/19/AnyProxy1/index.html b/2019/01/19/AnyProxy1/index.html index b60e6520..9feb9ebf 100644 --- a/2019/01/19/AnyProxy1/index.html +++ b/2019/01/19/AnyProxy1/index.html @@ -1,862 +1,531 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - AnyProxy 上手 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

AnyProxy 上手 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

-

上一篇我浅显的介绍了 anyproxy，但是为了获取到请求头的数据我得打开 127.0.0.1:8002 去筛选后去复制他的请求头，一两次无所谓，可是这里面的一些东西是会过期的，我该如何解放我自己呢，当时我自己写爬微信的东西就是 ctrl+c/v 看了 weixin_crawler 下 proxy.js 才有了头绪。其实在 官方文档 都写的很明白，但是自己并没去更深的了解。

- -

其实主要局势使用 anyproxy 提供的二次开发 rule 模块。定义自己的处理逻辑。

-

开始的时候就有一个 hash

-
1
2
3
4
5
6
var interest_url = {
    "load_more": "https://mp.weixin.qq.com/mp/profile_ext?action=getmsg", //更多历史消息
    "getappmsgext": "https://mp.weixin.qq.com/mp/getappmsgext?", //阅读消息
    "appmsg_comment": "https://mp.weixin.qq.com/mp/appmsg_comment?action=getcomment", //评论信息
    "content": "https://mp.weixin.qq.com/s?", //文章正文html
}
-

他们的用处注释已经很清楚了，其实就是先去点击微信然后看他发出了那些请求得到了什么分析出链接用处，阅读消息个人觉得是最有用的，点赞，阅读量等很有价值。

-

作者在存储 redis 时设置了过期时间。

-

其他的代码都很好理解，就是自己打的时候肯定还要不停的修改，可以说作者 js 还是玩的很不错。

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + AnyProxy 上手 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

AnyProxy 上手 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

+

上一篇我浅显的介绍了 anyproxy，但是为了获取到请求头的数据我得打开 127.0.0.1:8002 去筛选后去复制他的请求头，一两次无所谓，可是这里面的一些东西是会过期的，我该如何解放我自己呢，当时我自己写爬微信的东西就是 ctrl+c/v 看了 weixin_crawler 下 proxy.js 才有了头绪。其实在 官方文档 都写的很明白，但是自己并没去更深的了解。

+ +

其实主要局势使用 anyproxy 提供的二次开发 rule 模块。定义自己的处理逻辑。

+

开始的时候就有一个 hash

+
1
2
3
4
5
6
var interest_url = {
    "load_more": "https://mp.weixin.qq.com/mp/profile_ext?action=getmsg", //更多历史消息
    "getappmsgext": "https://mp.weixin.qq.com/mp/getappmsgext?", //阅读消息
    "appmsg_comment": "https://mp.weixin.qq.com/mp/appmsg_comment?action=getcomment", //评论信息
    "content": "https://mp.weixin.qq.com/s?", //文章正文html
}
+

他们的用处注释已经很清楚了，其实就是先去点击微信然后看他发出了那些请求得到了什么分析出链接用处，阅读消息个人觉得是最有用的，点赞，阅读量等很有价值。

+

作者在存储 redis 时设置了过期时间。

+

其他的代码都很好理解，就是自己打的时候肯定还要不停的修改，可以说作者 js 还是玩的很不错。

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2019/02/19/newt/index.html b/2019/02/19/newt/index.html index 799fabc5..ddb981e9 100644 --- a/2019/02/19/newt/index.html +++ b/2019/02/19/newt/index.html @@ -1,875 +1,544 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 新的旅途 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

新的旅途 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

-

很久都没有写一篇随笔了，常常被外界所引导，被各种信息流所干扰，却没有去真真的审视自己，拷问自己所想要的到底是什么。

-

今天是入职微博实习的第一天，巍峰真的像一位亲切的大哥哥对我们这两个新人给出了非常多的有意义的建议忠告以及期望。我写这篇随笔的时候很后悔当时没有拿笔把他话给记下来，真的很多，尽管有一些零碎但是真的是很有参考的价值。

-
-

希望是像钻石一样珍贵的东西
《流浪地球》

-
- -
    -

  1. 海量的访问量要求对自己的代码足够的健全，低耦合，对自己的代码负责就是对用户负责

    -

    我们是工程师，工程师可以自嘲为码农但绝对不是码农，工程师在我看来就好似手艺人（Craftsman），像飞行器（aircraft）都是由词根 craft 组成的，手艺手艺那不是简单的重复去干一件事而是把一件事做到极致。技术就好比艺术。

    -
    2. -

  2. 把视野看的更宽

    -

    我们的工作是前端但是我们的，但是个人的事业不要局限于前端。要学会与其他的业务搭得上话，关注产品，商业，后端，测试，运维，视觉ui。能看到业务上的问题并提出来，接不接受是一回事说不说是你的事。当然前期主要是做好分内的事，纵向深入。越到后面要横向的拓展，多领域的去看问题。

    -
    3. -

  3. 言行要谨慎

    -

    工作区要注意不要被人抓住把柄，一楼该放松就好好放松。

    -
    4. -

  4. 熟悉属于自己的产品

    -

    你自己的产品自己都不用那么谁会去用，去熟悉他了解透他会利于自己对于业务的熟悉

    -
    5. -

  5. 在大学刚刚出来这几年多看看书，不要落下英语，看英语文档获取一手资料。

    -
    6. -
-

还有很多建议我这小脑子都。。。哎，熟能生巧，多加油，寒冬，更需要实实在在的干，说得好不如做的好，做得好不如做得好说的也好，多花时间吧。

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 新的旅途 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

新的旅途 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

+

很久都没有写一篇随笔了，常常被外界所引导，被各种信息流所干扰，却没有去真真的审视自己，拷问自己所想要的到底是什么。

+

今天是入职微博实习的第一天，巍峰真的像一位亲切的大哥哥对我们这两个新人给出了非常多的有意义的建议忠告以及期望。我写这篇随笔的时候很后悔当时没有拿笔把他话给记下来，真的很多，尽管有一些零碎但是真的是很有参考的价值。

+
+

希望是像钻石一样珍贵的东西
《流浪地球》

+
+ +
    +

  1. 海量的访问量要求对自己的代码足够的健全，低耦合，对自己的代码负责就是对用户负责

    +

    我们是工程师，工程师可以自嘲为码农但绝对不是码农，工程师在我看来就好似手艺人（Craftsman），像飞行器（aircraft）都是由词根 craft 组成的，手艺手艺那不是简单的重复去干一件事而是把一件事做到极致。技术就好比艺术。

    +
    2. +

  2. 把视野看的更宽

    +

    我们的工作是前端但是我们的，但是个人的事业不要局限于前端。要学会与其他的业务搭得上话，关注产品，商业，后端，测试，运维，视觉ui。能看到业务上的问题并提出来，接不接受是一回事说不说是你的事。当然前期主要是做好分内的事，纵向深入。越到后面要横向的拓展，多领域的去看问题。

    +
    3. +

  3. 言行要谨慎

    +

    工作区要注意不要被人抓住把柄，一楼该放松就好好放松。

    +
    4. +

  4. 熟悉属于自己的产品

    +

    你自己的产品自己都不用那么谁会去用，去熟悉他了解透他会利于自己对于业务的熟悉

    +
    5. +

  5. 在大学刚刚出来这几年多看看书，不要落下英语，看英语文档获取一手资料。

    +
    6. +
+

还有很多建议我这小脑子都。。。哎，熟能生巧，多加油，寒冬，更需要实实在在的干，说得好不如做的好，做得好不如做得好说的也好，多花时间吧。

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/2019/02/27/vue\344\275\277\347\224\250rem\345\256\236\347\216\260 \347\247\273\345\212\250\347\253\257\345\261\217\345\271\225\351\200\202\351\205\215/index.html" "b/2019/02/27/vue\344\275\277\347\224\250rem\345\256\236\347\216\260 \347\247\273\345\212\250\347\253\257\345\261\217\345\271\225\351\200\202\351\205\215/index.html" index f9a963ee..4d429155 100644 --- "a/2019/02/27/vue\344\275\277\347\224\250rem\345\256\236\347\216\260 \347\247\273\345\212\250\347\253\257\345\261\217\345\271\225\351\200\202\351\205\215/index.html" +++ "b/2019/02/27/vue\344\275\277\347\224\250rem\345\256\236\347\216\260 \347\247\273\345\212\250\347\253\257\345\261\217\345\271\225\351\200\202\351\205\215/index.html" @@ -1,915 +1,561 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 第二周知识记录 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

第二周知识记录 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

webkit-text-size-adjust: none 已经对桌面 chrome 无效

-

中文版Chrome浏览器不支持12px以下字体的解决方案

-

vue使用rem实现 移动端屏幕适配

-

vscode 配置

vutur 插件会自动修改 ‘ 为 ” 修改其配置可以杜绝

-

setting–>extensions–>vutur

-

format html –> js-beautiful-html

-

frmat js –> vscode-typescript

-

这几天使用 vscode 感觉写代码及其难受，每次打完一行代码回车本来缩进是对的但是就一小会儿它自动就跳到了行头，毫无体验感。然后没办法一个插件一个插件得看发现罪魁祸首是 EditorConfig for VS Code

-
1
2
3
4
5
6
indent_style
indent_size
tab_width
end_of_line (on save)
insert_final_newline (on save)
trim_trailing_whitespace (on save)<--保存时修剪尾随空格
-

其实主要是我的 vscode 使用了自动保存，所以就。。。然后修改为切换窗体保存就好了。

- -

一些样式解决方案

第一次对设计稿并不熟习所以坑是比较多的

-

一般使用使用 视网膜@2X 这样会比较好因为 iphone6/7/8 宽都为 375px 而我们的设计稿一般是 750px 的。使用其数据配合动态 rem 能够适配绝大多数的手机。

-

当使用 fixed 布局时注意其已经脱离了正常文档流，控制其宽度为固定值能减少 bug 出现。

-

最好不要去设置高，能用 margin 或 padding 撑起来就行

-

当使用像 white-space 的样式时可能由于 margin padding 导致 bug 使用 div 嵌套包裹.

-

postcss 由于它是一个计算属性，它也适用于 :class 的 object/array 语法：

-
1
2
3
4
5
6
7
8
9
10
<template>
  <div>
    <p :class="{ [$style.red]: isRed }">
      Am I red?
    </p>
    <p :class="[$style.red, $style.bold]">
      Red and bold
    </p>
  </div>
</template>
-

一些 js 问题

vue 动态绑定 img src 属性时需要注意该路径使用原文件的相对路径会发生错误，使用 require(src) 解决问题

-

vue复制到剪切板功能 vue-clipboard2

-

JavaScript复制内容到剪贴板

-

当一个 vue 组件绑定了多个值的时候最好用一个对象来包含这些值，以免一个组件绑定了很多值，影响维护

-

写一个 toast 组件

希望能够通过 this.$toast('msg') 的方式来创建，使用插件

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//pulgin.js
import Toast from './components/fin/toast.vue';
export default {
  install(v) {
    const Vue = v;
    Vue.prototype.$toast = (msg, toastOptions) => {
      // 在 Vue 中 创建 dom 节点
      const Constructor = Vue.extend(Toast);
      const toast = new Constructor({
        propsData: toastOptions
      });
      // solts 要在 mount 前面不然 msg 不显示
      toast.$slots.default = msg;
      toast.$mount();
      document.body.appendChild(toast.$el);
    };
  },
};
-

toast 创建后需要自动的销毁

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
export default {
  name: 'toast',
  props: {
    autoClose: { type: Boolean, default: true },
    closeDelay: { type: [Number, String], default: 2 },
    enableHtml: { type: Boolean, default: false },
  },
  mounted() {
    this.updateStyles();
    if (this.autoClose) { setTimeout(() => { this.close(); }, this.closeDelay * 1000); }
  },
  methods: {
    updateStyles() {
      this.$nextTick(() => {
        if (!this.autoClose) {
          this.$refs.line.style.height =
            `${this.$refs.toast.getBoundingClientRect().height}px`;
        }
      });
    },
    close() {
      this.$el.remove();
      this.$destroy();
    },
  },
};
-

滚播消息使用 vue 自带进入/离开 & 列表过渡

tranfrom 在 chrome 有可能下导致抖动及字体模糊

-

scroll 穿透解决

当遮罩层出现时，记录当前文档在垂直方向已滚动的像素值，改动根节点样式 overflow:hidden, height: 100vh, 当关闭遮罩层时恢复样式并将屏幕滑动到之前记录的值。这是比较有效的方案，其他的方案试过都会有一定的 bug，如果当遮罩层里没有滚动使用 @touchmove.prevent 也还是不错，但是在本次 demo 中还有一个滚动所以使用这个还是比较好的。

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
export default {
  data: function () {
    return {
      pageScrollYoffset: 0, // 保存滚动条位置
    };
  },
  methods: {
    getScrollTop() { // 获取滚动条位置
      this.pageScrollYoffset = window.pageYOffset;
    },
  },
  watch: {
    showRule(newVal) {
      this.getScrollTop();
      if (newVal === true) {
        const cssStr = 'overflow-y: hidden; height: 100vh;';
        document.body.style.cssText = cssStr;
      } else {
        const cssStr = 'overflow-y: auto; height: auto;';
        document.body.style.cssText = cssStr;
      }
      this.$root.$el.scrollTop = this.pageScrollYoffset;
    }
  },
};
-

mdn 上写道

-

pageYOffset 属性是 scrollY 属性的别名：

-
1
window.pageYOffset == window.scrollY; // 总是返回 true
-

为了跨浏览器兼容，请使用 window.pageYOffset 代替 window.scrollY。另外，旧版本IE（<9）两个属性都不支持，必须使用其他的非标准属性。完整的兼容性代码如下：

-
1
2
3
4
5
var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
-

团队代码样式规范

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
display//展现类
position//定位类
top right bottom left
z-index
width//结构类
height
margin
padding
background
borde
overflow
text-align//文本结构类
line-height
font-size//文本类
font-weight
color
transform//变形和动画
transition
-

vim

-

全选ggvG

-

全选复制ggyg

-

适配问题

-

vue router 使用

-

flex 导致渐变

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 第二周知识记录 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

第二周知识记录 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

webkit-text-size-adjust: none 已经对桌面 chrome 无效

+

中文版Chrome浏览器不支持12px以下字体的解决方案

+

vue使用rem实现 移动端屏幕适配

+

vscode 配置

vutur 插件会自动修改 ‘ 为 ” 修改其配置可以杜绝

+

setting–>extensions–>vutur

+

format html –> js-beautiful-html

+

frmat js –> vscode-typescript

+

这几天使用 vscode 感觉写代码及其难受，每次打完一行代码回车本来缩进是对的但是就一小会儿它自动就跳到了行头，毫无体验感。然后没办法一个插件一个插件得看发现罪魁祸首是 EditorConfig for VS Code

+
1
2
3
4
5
6
indent_style
indent_size
tab_width
end_of_line (on save)
insert_final_newline (on save)
trim_trailing_whitespace (on save)<--保存时修剪尾随空格
+

其实主要是我的 vscode 使用了自动保存，所以就。。。然后修改为切换窗体保存就好了。

+ +

一些样式解决方案

第一次对设计稿并不熟习所以坑是比较多的

+

一般使用使用 视网膜@2X 这样会比较好因为 iphone6/7/8 宽都为 375px 而我们的设计稿一般是 750px 的。使用其数据配合动态 rem 能够适配绝大多数的手机。

+

当使用 fixed 布局时注意其已经脱离了正常文档流，控制其宽度为固定值能减少 bug 出现。

+

最好不要去设置高，能用 margin 或 padding 撑起来就行

+

当使用像 white-space 的样式时可能由于 margin padding 导致 bug 使用 div 嵌套包裹.

+

postcss 由于它是一个计算属性，它也适用于 :class 的 object/array 语法：

+
1
2
3
4
5
6
7
8
9
10
<template>
  <div>
    <p :class="{ [$style.red]: isRed }">
      Am I red?
    </p>
    <p :class="[$style.red, $style.bold]">
      Red and bold
    </p>
  </div>
</template>
+

一些 js 问题

vue 动态绑定 img src 属性时需要注意该路径使用原文件的相对路径会发生错误，使用 require(src) 解决问题

+

vue复制到剪切板功能 vue-clipboard2

+

JavaScript复制内容到剪贴板

+

当一个 vue 组件绑定了多个值的时候最好用一个对象来包含这些值，以免一个组件绑定了很多值，影响维护

+

写一个 toast 组件

希望能够通过 this.$toast('msg') 的方式来创建，使用插件

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//pulgin.js
import Toast from './components/fin/toast.vue';

export default {
  install(v) {
    const Vue = v;
    Vue.prototype.$toast = (msg, toastOptions) => {
      // 在 Vue 中 创建 dom 节点
      const Constructor = Vue.extend(Toast);
      const toast = new Constructor({
        propsData: toastOptions
      });
      // solts 要在 mount 前面不然 msg 不显示
      toast.$slots.default = msg;
      toast.$mount();
      document.body.appendChild(toast.$el);
    };
  },
};
+

toast 创建后需要自动的销毁

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
export default {
  name: 'toast',
  props: {
    autoClose: { type: Boolean, default: true },
    closeDelay: { type: [Number, String], default: 2 },
    enableHtml: { type: Boolean, default: false },
  },
  mounted() {
    this.updateStyles();
    if (this.autoClose) { setTimeout(() => { this.close(); }, this.closeDelay * 1000); }
  },
  methods: {
    updateStyles() {
      this.$nextTick(() => {
        if (!this.autoClose) {
          this.$refs.line.style.height =
            `${this.$refs.toast.getBoundingClientRect().height}px`;
        }
      });
    },
    close() {
      this.$el.remove();
      this.$destroy();
    },
  },
};
+

滚播消息使用 vue 自带进入/离开 & 列表过渡

tranfrom 在 chrome 有可能下导致抖动及字体模糊

+

scroll 穿透解决

当遮罩层出现时，记录当前文档在垂直方向已滚动的像素值，改动根节点样式 overflow:hidden, height: 100vh, 当关闭遮罩层时恢复样式并将屏幕滑动到之前记录的值。这是比较有效的方案，其他的方案试过都会有一定的 bug，如果当遮罩层里没有滚动使用 `@touchmove.prevent` 也还是不错，但是在本次 demo 中还有一个滚动所以使用这个还是比较好的。

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
export default {
  data: function () {
    return {
      pageScrollYoffset: 0, // 保存滚动条位置
    };
  },
  methods: {
    getScrollTop() { // 获取滚动条位置
      this.pageScrollYoffset = window.pageYOffset;
    },
  },
  watch: {
    showRule(newVal) {
      this.getScrollTop();
      if (newVal === true) {
        const cssStr = 'overflow-y: hidden; height: 100vh;';
        document.body.style.cssText = cssStr;
      } else {
        const cssStr = 'overflow-y: auto; height: auto;';
        document.body.style.cssText = cssStr;
      }
      this.$root.$el.scrollTop = this.pageScrollYoffset;
    }
  },
};
+

mdn 上写道

+

pageYOffset 属性是 scrollY 属性的别名：

+
1
window.pageYOffset == window.scrollY; // 总是返回 true
+

为了跨浏览器兼容，请使用 window.pageYOffset 代替 window.scrollY。另外，旧版本IE（<9）两个属性都不支持，必须使用其他的非标准属性。完整的兼容性代码如下：

+
1
2
3
4
5
var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");

var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
+

团队代码样式规范

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
display//展现类
position//定位类
top right bottom left
z-index
width//结构类
height
margin
padding
background
borde
overflow
text-align//文本结构类
line-height
font-size//文本类
font-weight
color
transform//变形和动画
transition
+

vim

+

全选ggvG

+

全选复制ggyg

+

适配问题

+

vue router 使用

+

flex 导致渐变

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/2019/03/07/\347\254\254\344\270\211\345\221\250/index.html" "b/2019/03/07/\347\254\254\344\270\211\345\221\250/index.html" index e969ba16..52f3769f 100644 --- "a/2019/03/07/\347\254\254\344\270\211\345\221\250/index.html" +++ "b/2019/03/07/\347\254\254\344\270\211\345\221\250/index.html" @@ -1,920 +1,566 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 第三周知识记录 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

第三周知识记录 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

倒计时的优化

-
1
new Date(0) //Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间)
-

一直以为是 00:00:00

-

无限下拉加载组件

判断下拉组件是否出现在可视窗口

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
eleInView(element) {
      const {
        top,
        right,
        bottom,
        left,
        width,
        height
      } = element.getBoundingClientRect();
      const intersection = {
        t: bottom,
        r: window.innerWidth - left,
        //减去 footer 的高
        b: window.innerHeight - top - 44,
        l: right
      };
      return (
        intersection.t > 0 &&
        intersection.r > 0 &&
        intersection.b > 0 &&
        intersection.l > 0
      );
}
-

getBoundingClientRect() 该方法返回元素的大小及其相对于视口的位置。

- -

由于我们有一个 footer 组件高 44 将其减去，若为正数这代表出现在视口，此时代表需要去服务器获取更多的数据，但是一个组件他是不会知道他将去那里获取数据的，所以我们将他获取的数据的方法从父组件传递过来

-
1
2
3
4
5
6
props: {
    handler: {
      type: Function,
      required: true
    }
}
-

在下拉组件出现在视口时，执行 handler()

-

对响应式原理更加熟悉

实习队友提出的问题当时也没有反应过来，后面一问发现最开始给的是空对象就想到了，由于 js 的一些原因，Vue 不能检测到对象属性的添加或删除。

-

同时在数组也是有一些限制的

-
    -
  1. 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
    2. -
  2. 当你修改数组的长度时，例如：vm.items.length = newLength
    3. -
-

生命周期钩子

对生命周期还是没有熟练的记忆，对于在适合的时候使用适合的钩子还是不够熟练，需要多想多用

-

beforeCreate 与 created

-

Firefox Experiments I Would Have Liked to Try

-

关于九宫格抽奖组件的调研

iphone X 适配

面對iPhone X，Web設計師需要知道的幾個CSS屬性

-

iPhone X的Web设计

-
1
<meta name="viewport" content="viewport-fit=cover">
-

这样就能全覆盖，而不留下白色安全区，但是有的东西会被异形屏所遮盖。safe-area-inset-*来保证边界

-
1
2
3
4
constant(safe-area-inset-top)
constant(safe-area-inset-right)
constant(safe-area-inset-bottom)
constant(safe-area-inset-left)
-

使用 ref 去获取样式是只能获取直接写在元素本上上的 <div style="">

-

视网膜屏 1px 兼容性

用 CSS 定义 1px 的实线边框，在 window.devicePixelRatio=2 的屏幕上会显示成 2px，在 window.devicePixelRatio=3 的屏幕上会显示成 3px，明明希望是极细的线条，到 Retina 屏上却变得粗大丑陋。这是因为 CSS 中的 px 单位定义的是逻辑像素值，而实际显示的效果会以物理像素呈现，Retina 屏幕的物理像素值和逻辑像素值不同就造成了这种差异。

-

可以动态 rem

-

ios

-
    -
  • 设置 border-width: 0.5px
    • -
-
1
2
3
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {    .border { border: 0.5px solid #999 }}
@media screen and (-webkit-min-device-pixel-ratio: 3) {    .border { border: 0.333333px solid #999 }}
-

遗憾的是 只有iOS 8+ 支持 0.5px

-
    -
  • scale
    • -
-

对于devicePixelRatio >= 2的设备，在需要加边线的元素上使用after伪元素，尺寸设置为1px,然后使用transform:scale进行缩小0.5倍操作：

- -

Transitions vs Animations

-

CSS animation和transition的性能探究

-

使用 CSS transitions

-

使用 CSS 动画

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 第三周知识记录 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

第三周知识记录 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

倒计时的优化

+
1
new Date(0) //Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间)
+

一直以为是 00:00:00

+

无限下拉加载组件

判断下拉组件是否出现在可视窗口

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
eleInView(element) {
      const {
        top,
        right,
        bottom,
        left,
        width,
        height
      } = element.getBoundingClientRect();

      const intersection = {
        t: bottom,
        r: window.innerWidth - left,
        //减去 footer 的高
        b: window.innerHeight - top - 44,
        l: right
      };

      return (
        intersection.t > 0 &&
        intersection.r > 0 &&
        intersection.b > 0 &&
        intersection.l > 0
      );
}
+

getBoundingClientRect() 该方法返回元素的大小及其相对于视口的位置。

+ +

由于我们有一个 footer 组件高 44 将其减去，若为正数这代表出现在视口，此时代表需要去服务器获取更多的数据，但是一个组件他是不会知道他将去那里获取数据的，所以我们将他获取的数据的方法从父组件传递过来

+
1
2
3
4
5
6
props: {
    handler: {
      type: Function,
      required: true
    }
}
+

在下拉组件出现在视口时，执行 handler()

+

对响应式原理更加熟悉

实习队友提出的问题当时也没有反应过来，后面一问发现最开始给的是空对象就想到了，由于 js 的一些原因，Vue 不能检测到对象属性的添加或删除。

+

同时在数组也是有一些限制的

+
    +
  1. 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
    2. +
  2. 当你修改数组的长度时，例如：vm.items.length = newLength
    3. +
+

生命周期钩子

对生命周期还是没有熟练的记忆，对于在适合的时候使用适合的钩子还是不够熟练，需要多想多用

+

beforeCreate 与 created

+

Firefox Experiments I Would Have Liked to Try

+

关于九宫格抽奖组件的调研

iphone X 适配

面對iPhone X，Web設計師需要知道的幾個CSS屬性

+

iPhone X的Web设计

+
1
<meta name="viewport" content="viewport-fit=cover">
+

这样就能全覆盖，而不留下白色安全区，但是有的东西会被异形屏所遮盖。safe-area-inset-*来保证边界

+
1
2
3
4
constant(safe-area-inset-top)
constant(safe-area-inset-right)
constant(safe-area-inset-bottom)
constant(safe-area-inset-left)
+

使用 ref 去获取样式是只能获取直接写在元素本上上的 <div style="">

+

视网膜屏 1px 兼容性

用 CSS 定义 1px 的实线边框，在 window.devicePixelRatio=2 的屏幕上会显示成 2px，在 window.devicePixelRatio=3 的屏幕上会显示成 3px，明明希望是极细的线条，到 Retina 屏上却变得粗大丑陋。这是因为 CSS 中的 px 单位定义的是逻辑像素值，而实际显示的效果会以物理像素呈现，Retina 屏幕的物理像素值和逻辑像素值不同就造成了这种差异。

+

可以动态 rem

+

ios

+
    +
  • 设置 border-width: 0.5px
    • +
+
1
2
3
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {    .border { border: 0.5px solid #999 }}
@media screen and (-webkit-min-device-pixel-ratio: 3) {    .border { border: 0.333333px solid #999 }}
+

遗憾的是 只有iOS 8+ 支持 0.5px

+
    +
  • scale
    • +
+

对于devicePixelRatio >= 2的设备，在需要加边线的元素上使用after伪元素，尺寸设置为1px,然后使用transform:scale进行缩小0.5倍操作：

+ +

Transitions vs Animations

+

CSS animation和transition的性能探究

+

使用 CSS transitions

+

使用 CSS 动画

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2019/03/10/invite/index.html b/2019/03/10/invite/index.html index e0c2ff7b..b30b07e2 100644 --- a/2019/03/10/invite/index.html +++ b/2019/03/10/invite/index.html @@ -1,940 +1,586 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 邀请老铁项目总结 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

邀请老铁项目总结 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

vscode 的基本配置

尽管自己大多数的时候是在使用 vscode 敲代码，但是对于其的配置没有过比较深的认识，带我的小姐姐很贴心地给了我很好的参考资料

-

能让你开发效率翻倍的 VSCode 插件配置（上）

-

能让你开发效率翻倍的 VSCode 插件配置（中）

-

在里面最喜欢的就是 Settings Sync，基于 gist，可以备份我们的一些配置，插件，当我们换了个环境也能快速的搭建我们自己喜欢的敲代码的环境。

-

由于自己对于一些插件的不熟悉，就踩了坑。由于不了解 EditorConfig for VS Code 而自己又在项目中添加了 .editorconfig，且自己使用了 vscode 的自动保存功能，导致代码刚刚敲完停顿一下就自动换行了，了解了 insert_final_newline (on save) 这句的意义修改 vscode 自动保存的机制就完美避开了。

-

不过自己还是需要更多地了解 Microsoft Visual Studio Code 中文手册

-

Vue 项目的搭建

大概秋招过后对于前端的知识就开始比较懈怠了，vue cli3 出来后都没有去尝试过，当时搭项目还是用的 vue cli2 照着 taskcenter 项目进行的配置。其实项目是能跑的，就是其中一些插件没有使用过，导致出了些问题，而自己对于其中的与案例并不了解所以糊里糊涂的。 主要知识点是 css 相关的

- -

刚开始使用 CSS module 就把自己放在坑里了。还问了带我的小姐姐我是不是哪里写错了，小姐姐看了代码说我是个天坑，我将好好地 module 写成了 moudle 当时还感觉自己拼的没问题，感到尴尬，所以说敲代码还是要细心，不过有个插件在这种时候就很有用，Code Spell Checker 对于我这种英语烂的人，会提醒我是不是这个单词拼错了，很是方便。项目使用 动态 rem 而我用不想用 sass 用函数来解决，使用 postcss 很自然的搜索到了 postcss-pxtorem，而我当时直接将 vue cli2 下的 .postcssrc.js 迁移到 vue-cli3 下直接使用，发现没有效果（但是官网说的是能用 postcss-load-config 可能是我少了啥吧），后面看换成在根创建 vue.config.js

-
1
2
3
4
5
6
7
8
9
10
11
module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require("postcss-pxtorem")({
                        // 把px单位换算成rem单位
                        rootValue: 16, // 换算的基数(设计图750的根字体为32)
                        selectorBlackList: ["weui", "mu"], // 忽略转换正则匹配项
                        propList: ["*"]
                        //......
-

还有一种就是直接在 package.json 搜索 postcss 在其插件下添加要使用的插件后 npm i

-

Vue 知识点

深入响应式原理

官方文档中这一节应该是最最重要的，之前也是看了很多遍，但是自己其实了解的并不深入所以嘿嘿嘿忘光光。自己之前写的 面向对象程序设计 中写了

-

对象的属性类型

-
    -
  • 数据属性
    [[Configurable]] [[Enumerable]] [[Writable]] [[Value]]
    • -
  • 访问器属性
    [[Get]] [[Set]] [[Configurable]] [[Enumerable]]
    访问器属性必须通过 Object.defineProperty() 来进行定义
    定义多个属性使用 Object.defineProperties()
    Vue 的响应式就离不开访问器属性，但是 Object.defineProperty() 这东西又支持的 IE9+，IE8部分支持这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。
    如何监听 js 中变量的变化?
    读取属性的特性使用 Object.getOwnPropertyDescriptor()
    • -
-
-

那天一起实习的问我为啥她给对象赋值而 Vue 并没有检测到，当时也没有一下反应过来，直到看到一个空对象

-
-

Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上。

-
-

顺便注意 Vue 中 Array 不能检测到数组修改 length，以及用索引来设置一个项。

-

实例生命周期钩子

对生命周期的了解不够，当时我做滚播的时候需要去获取文本的宽度，而我用的是 beforeCreate 以至于报错，在后面我使用 json-server 来 mock 数据时又再一次使用了 beforeCreate 而一般是使用 created 比较好。 created 钩子可以用来在一个实例被创建之后执行代码。

-

进入/离开 & 列表过渡

写滚播组件小姐姐鼓励让我用更多的方法去实现，开始没有使用 Vue 提供的 transition 封装组件，而是使用 refs 去获取宽高做一个垂直水平的不定长的数据无缝滚播，当时代码个人觉得使用 method 在 JavaScript 中去控制了 CSS 耦合性较高，后面看别人开源项目的代码改成使用 computed 绑定 style 来解决。后面自己也使用了 transition-group 实现了较为相同的效果。不过后面小姐姐让我试试 push shift 来实现，然后我就踩坑了。按照官方文档写的样式动出来的效果让我怀疑了人生不值得啊。

-
1
2
3
4
5
6
7
8
9
10
11
.lists {
  width: 154px;
}
.list-enter {
  transition: 2s ease;
  transform: translateY(100%);
}
.list-leave-to {
  transition: 2s ease;
  transform: translateY(-100%);
}
-

效果：

-

-

这不行啊，照着官方弄出来的样子列表的排序过渡

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.lists {
  width: 154px;
  transition: 2s ease;
}
.list-enter {
  transform: translateY(100%);
}
.list-leave-to {
  transform: translateY(-100%);
}
.list-leave-active {
  position: absolute;
}
-

改成这样就好了，我也是不知道咋说了。但是仍然有问题

-

-

到顶了应该往上往下是如何想的亲，我明明设置了你出去的时候可是 translateY(-100%) 你为啥不听话？？？后面想他可能是到头了

-
1
2
const a = this.currArr.shift();
this.currArr.push(a);
-

就好像轮播图他到顶的时候你不给他个假数据他是会一下越到开始，那个他填个假数据? 不过我使用了 setTimeout 让 push 延迟执行，就能运行了。

-

一些细节

    -
  • 模板语言一般能使用 v-text 就不用双括号
    • -
  • v-for 的 key 不要给 item，说不定他哪天变成了 object 了呢。
    • -
  • 不使用相对路径，用 '@/'
    • -
  • 数据能放 data 就放 data 与函数解耦
    • -
-

CSS

css 的知识点一直是蛮多，需要自己多用，判断不同的环境下使用什么样的解决方案才是最优的，css 是前端的一个石头需要下功夫。最近在项目上去学习了如何适配 iphone x 这样的异形屏，在视网膜屏下如何去实现 1px 以及兼容问题。同时自己对于浏览器的一些机制不够了解也踩了些坑，比如 chrome pc 上默认最小字号为 12px等等，对 css 的继承弄的也不是很清晰了CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends。使用 iconfont 当时就有一个坑，我想改变 svg 的颜色，但是用 fill：color 没有用，查资料才知道要先去色才能使用 fill。

-

代码规范

自己以前都是自己写自己的代码，对于可读性是毫不关心的，命名如何简单如何来，恩，反正我自己的代码我自己都不想看。实习才认识到代码可读性的重要，代码语义化，去 github 看别人好的开源代码命名都是非常的清晰明了的，这样有助于维护，至少你没有让来看你代码的人去猜测你到底写的是啥，接手你代码的人不会骂你妈妈。团队中样式代码的顺序

-
-

展示类–定位类–结构类–文本结构类–文本类–动画变形

-
- -

感觉自己写的 CSS 还要好好规范，自己以前写代码尽管知道 mixin 但是对于自己的代码分析不够清晰，也没有想着去用像

-
1
2
3
diplay： flex；
jiustify-content：center；
align-items： center；
-

宁愿自己写上个几十遍也不用 mixin，这些习惯都是要尽快改的，用着 postcss 这样的工程化语言不减少机械的工作我用他干嘛。之前尽管也了解 resetcss 及 normalize，这段时间自己着去也尝试用了。

-

JavaScript 的编程规范，由于是团队合作，写的是上线项目，不像是平常怎么方便怎么来，代码更加严格是对自己负责也是对项目负责，好的编码习惯真的很重要，不然打开命令行，eslint 全线飘红，真的难受。

- -

总结

这次的 demo 让我更加贴近一个真正的上线项目他将经过的流程，会使用到的方法，问题如何解决，如何规避。同时也看到自身很多的不足，基础的知识慢慢在忘记，新的知识又不够了解，要走的路要学习的东西还有很多，希望自己不要浮躁，实在一点的同时能够快速成长汲取知识。对于拿到设计稿来做自己是比较生疏的，不够了解流程，对于如何与设计师交流，对于设计稿中的不合理的地方要敢于质疑，实现成本较高的时候用较为容易的方案替代，以及对于颜色要永远相信自己的眼睛，因为导出的时候可能出错，对于我这种不会欣赏的人我觉得未来有必要了解 UI/UX 设计。自己对于时间的把控还不够，不能估计出自己实现一个项目要花多长时间，这是在实习中应该尽快解决的问题。在平时的实践中，要多尝试，多去用没有使用过的东西，开阔眼界的同时，说不定哪天吹牛逼就用上了呢？尽管每一次开始用新东西的时候都有一堆坑在等着你，但是发现问题解决问题是一种很有成就感的事，前提是你解决了。。。写代码是件容易的事，但是写的明了简洁，可维护，可扩展是需要我多多实践以及思考的。如何将复杂的东西简单化，重复的事情不重做（Don’t Repeat Yourself），这些东西是我知道却还没能做到的也是需要加强的。非常感谢带我的小姐姐这些天的悉心指导，小姐姐真的很细心也很机智，很多我想不到的解决方案她都能很快给我指一条清晰的路，很愧疚的是让她看了我那肮脏的代码，严重怀疑我代码加重了她的病情。

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 邀请老铁项目总结 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

邀请老铁项目总结 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

vscode 的基本配置

尽管自己大多数的时候是在使用 vscode 敲代码，但是对于其的配置没有过比较深的认识，带我的小姐姐很贴心地给了我很好的参考资料

+

能让你开发效率翻倍的 VSCode 插件配置（上）

+

能让你开发效率翻倍的 VSCode 插件配置（中）

+

在里面最喜欢的就是 Settings Sync，基于 gist，可以备份我们的一些配置，插件，当我们换了个环境也能快速的搭建我们自己喜欢的敲代码的环境。

+

由于自己对于一些插件的不熟悉，就踩了坑。由于不了解 EditorConfig for VS Code 而自己又在项目中添加了 .editorconfig，且自己使用了 vscode 的自动保存功能，导致代码刚刚敲完停顿一下就自动换行了，了解了 insert_final_newline (on save) 这句的意义修改 vscode 自动保存的机制就完美避开了。

+

不过自己还是需要更多地了解 Microsoft Visual Studio Code 中文手册

+

Vue 项目的搭建

大概秋招过后对于前端的知识就开始比较懈怠了，vue cli3 出来后都没有去尝试过，当时搭项目还是用的 vue cli2 照着 taskcenter 项目进行的配置。其实项目是能跑的，就是其中一些插件没有使用过，导致出了些问题，而自己对于其中的与案例并不了解所以糊里糊涂的。 主要知识点是 css 相关的

+ +

刚开始使用 CSS module 就把自己放在坑里了。还问了带我的小姐姐我是不是哪里写错了，小姐姐看了代码说我是个天坑，我将好好地 module 写成了 moudle 当时还感觉自己拼的没问题，感到尴尬，所以说敲代码还是要细心，不过有个插件在这种时候就很有用，Code Spell Checker 对于我这种英语烂的人，会提醒我是不是这个单词拼错了，很是方便。项目使用 动态 rem 而我用不想用 sass 用函数来解决，使用 postcss 很自然的搜索到了 postcss-pxtorem，而我当时直接将 vue cli2 下的 .postcssrc.js 迁移到 vue-cli3 下直接使用，发现没有效果（但是官网说的是能用 postcss-load-config 可能是我少了啥吧），后面看换成在根创建 vue.config.js

+
1
2
3
4
5
6
7
8
9
10
11
module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require("postcss-pxtorem")({
                        // 把px单位换算成rem单位
                        rootValue: 16, // 换算的基数(设计图750的根字体为32)
                        selectorBlackList: ["weui", "mu"], // 忽略转换正则匹配项
                        propList: ["*"]
                        //......
+

还有一种就是直接在 package.json 搜索 postcss 在其插件下添加要使用的插件后 npm i

+

Vue 知识点

深入响应式原理

官方文档中这一节应该是最最重要的，之前也是看了很多遍，但是自己其实了解的并不深入所以嘿嘿嘿忘光光。自己之前写的 面向对象程序设计 中写了

+

对象的属性类型

+
    +
  • 数据属性
    [[Configurable]] [[Enumerable]] [[Writable]] [[Value]]
    • +
  • 访问器属性
    [[Get]] [[Set]] [[Configurable]] [[Enumerable]]
    访问器属性必须通过 Object.defineProperty() 来进行定义
    定义多个属性使用 Object.defineProperties()
    Vue 的响应式就离不开访问器属性，但是 Object.defineProperty() 这东西又支持的 IE9+，IE8部分支持这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。
    如何监听 js 中变量的变化?
    读取属性的特性使用 Object.getOwnPropertyDescriptor()
    • +
+
+

那天一起实习的问我为啥她给对象赋值而 Vue 并没有检测到，当时也没有一下反应过来，直到看到一个空对象

+
+

Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上。

+
+

顺便注意 Vue 中 Array 不能检测到数组修改 length，以及用索引来设置一个项。

+

实例生命周期钩子

对生命周期的了解不够，当时我做滚播的时候需要去获取文本的宽度，而我用的是 beforeCreate 以至于报错，在后面我使用 json-server 来 mock 数据时又再一次使用了 beforeCreate 而一般是使用 created 比较好。 created 钩子可以用来在一个实例被创建之后执行代码。

+

进入/离开 & 列表过渡

写滚播组件小姐姐鼓励让我用更多的方法去实现，开始没有使用 Vue 提供的 transition 封装组件，而是使用 refs 去获取宽高做一个垂直水平的不定长的数据无缝滚播，当时代码个人觉得使用 method 在 JavaScript 中去控制了 CSS 耦合性较高，后面看别人开源项目的代码改成使用 computed 绑定 style 来解决。后面自己也使用了 transition-group 实现了较为相同的效果。不过后面小姐姐让我试试 push shift 来实现，然后我就踩坑了。按照官方文档写的样式动出来的效果让我怀疑了人生不值得啊。

+
1
2
3
4
5
6
7
8
9
10
11
.lists {
  width: 154px;
}
.list-enter {
  transition: 2s ease;
  transform: translateY(100%);
}
.list-leave-to {
  transition: 2s ease;
  transform: translateY(-100%);
}
+

效果：

+

+

这不行啊，照着官方弄出来的样子列表的排序过渡

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.lists {
  width: 154px;
  transition: 2s ease;
}

.list-enter {
  transform: translateY(100%);
}
.list-leave-to {
  transform: translateY(-100%);
}

.list-leave-active {
  position: absolute;
}
+

改成这样就好了，我也是不知道咋说了。但是仍然有问题

+

+

到顶了应该往上往下是如何想的亲，我明明设置了你出去的时候可是 translateY(-100%) 你为啥不听话？？？后面想他可能是到头了

+
1
2
const a = this.currArr.shift();
this.currArr.push(a);
+

就好像轮播图他到顶的时候你不给他个假数据他是会一下越到开始，那个他填个假数据? 不过我使用了 setTimeout 让 push 延迟执行，就能运行了。

+

一些细节

    +
  • 模板语言一般能使用 v-text 就不用双括号
    • +
  • v-for 的 key 不要给 item，说不定他哪天变成了 object 了呢。
    • +
  • 不使用相对路径，用 '@/'
    • +
  • 数据能放 data 就放 data 与函数解耦
    • +
+

CSS

css 的知识点一直是蛮多，需要自己多用，判断不同的环境下使用什么样的解决方案才是最优的，css 是前端的一个石头需要下功夫。最近在项目上去学习了如何适配 iphone x 这样的异形屏，在视网膜屏下如何去实现 1px 以及兼容问题。同时自己对于浏览器的一些机制不够了解也踩了些坑，比如 chrome pc 上默认最小字号为 12px等等，对 css 的继承弄的也不是很清晰了CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends。使用 iconfont 当时就有一个坑，我想改变 svg 的颜色，但是用 fill：color 没有用，查资料才知道要先去色才能使用 fill。

+

代码规范

自己以前都是自己写自己的代码，对于可读性是毫不关心的，命名如何简单如何来，恩，反正我自己的代码我自己都不想看。实习才认识到代码可读性的重要，代码语义化，去 github 看别人好的开源代码命名都是非常的清晰明了的，这样有助于维护，至少你没有让来看你代码的人去猜测你到底写的是啥，接手你代码的人不会骂你妈妈。团队中样式代码的顺序

+
+

展示类–定位类–结构类–文本结构类–文本类–动画变形

+
+ +

感觉自己写的 CSS 还要好好规范，自己以前写代码尽管知道 mixin 但是对于自己的代码分析不够清晰，也没有想着去用像

+
1
2
3
diplay： flex；
jiustify-content：center；
align-items： center；
+

宁愿自己写上个几十遍也不用 mixin，这些习惯都是要尽快改的，用着 postcss 这样的工程化语言不减少机械的工作我用他干嘛。之前尽管也了解 resetcss 及 normalize，这段时间自己着去也尝试用了。

+

JavaScript 的编程规范，由于是团队合作，写的是上线项目，不像是平常怎么方便怎么来，代码更加严格是对自己负责也是对项目负责，好的编码习惯真的很重要，不然打开命令行，eslint 全线飘红，真的难受。

+ +

总结

这次的 demo 让我更加贴近一个真正的上线项目他将经过的流程，会使用到的方法，问题如何解决，如何规避。同时也看到自身很多的不足，基础的知识慢慢在忘记，新的知识又不够了解，要走的路要学习的东西还有很多，希望自己不要浮躁，实在一点的同时能够快速成长汲取知识。对于拿到设计稿来做自己是比较生疏的，不够了解流程，对于如何与设计师交流，对于设计稿中的不合理的地方要敢于质疑，实现成本较高的时候用较为容易的方案替代，以及对于颜色要永远相信自己的眼睛，因为导出的时候可能出错，对于我这种不会欣赏的人我觉得未来有必要了解 UI/UX 设计。自己对于时间的把控还不够，不能估计出自己实现一个项目要花多长时间，这是在实习中应该尽快解决的问题。在平时的实践中，要多尝试，多去用没有使用过的东西，开阔眼界的同时，说不定哪天吹牛逼就用上了呢？尽管每一次开始用新东西的时候都有一堆坑在等着你，但是发现问题解决问题是一种很有成就感的事，前提是你解决了。。。写代码是件容易的事，但是写的明了简洁，可维护，可扩展是需要我多多实践以及思考的。如何将复杂的东西简单化，重复的事情不重做（Don’t Repeat Yourself），这些东西是我知道却还没能做到的也是需要加强的。非常感谢带我的小姐姐这些天的悉心指导，小姐姐真的很细心也很机智，很多我想不到的解决方案她都能很快给我指一条清晰的路，很愧疚的是让她看了我那肮脏的代码，严重怀疑我代码加重了她的病情。

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2019/03/10/socket/index.html b/2019/03/10/socket/index.html index dfc4338c..5a21a402 100644 --- a/2019/03/10/socket/index.html +++ b/2019/03/10/socket/index.html @@ -1,845 +1,526 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - flask vue socket | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

flask vue socket - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

-

昨天做 flask 后端与 vue 前端使用 socket 进行一个数据通信。一开始打开 8080 端口就报 cors 错的错，

-

查资料使用 flask-cors 解决。难受的是后面使用 vue-socket，其实已经能用了，可是我想用下他 vuex 的集成功能，顺便可以在这个项目上熟悉下 vuex，然后就变成了一个天坑。

-

-

这个可爱的官方文档给的东西也是给全了的，我肯定照着他敲啊。可是。。。可是他先用了 vue-socket 在介绍如何使用 vuex 集成，我很自然而然的将 vuex 放在了 vue-socket 后面导致用起来没反应，后面先将 vuex 申明成 store 再来 vue.use(VueSocketIO) 就能用了，而我在这个地方停留了一个多小时。。。难受香菇。。。。

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + flask vue socket | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

flask vue socket + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

+

昨天做 flask 后端与 vue 前端使用 socket 进行一个数据通信。一开始打开 8080 端口就报 cors 错的错，

+

查资料使用 flask-cors 解决。难受的是后面使用 vue-socket，其实已经能用了，可是我想用下他 vuex 的集成功能，顺便可以在这个项目上熟悉下 vuex，然后就变成了一个天坑。

+

+

这个可爱的官方文档给的东西也是给全了的，我肯定照着他敲啊。可是。。。可是他先用了 vue-socket 在介绍如何使用 vuex 集成，我很自然而然的将 vuex 放在了 vue-socket 后面导致用起来没反应，后面先将 vuex 申明成 store 再来 vue.use(VueSocketIO) 就能用了，而我在这个地方停留了一个多小时。。。难受香菇。。。。

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/2019/03/15/Retina\344\270\2131px\347\232\204\350\247\243\345\206\263\346\226\271\346\241\210/index.html" "b/2019/03/15/Retina\344\270\2131px\347\232\204\350\247\243\345\206\263\346\226\271\346\241\210/index.html" index 97ef00a6..2805637d 100644 --- "a/2019/03/15/Retina\344\270\2131px\347\232\204\350\247\243\345\206\263\346\226\271\346\241\210/index.html" +++ "b/2019/03/15/Retina\344\270\2131px\347\232\204\350\247\243\345\206\263\346\226\271\346\241\210/index.html" @@ -1,860 +1,541 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Retina 下 1px 的解决方案 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

Retina 下 1px 的解决方案 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

移动端适配一直是前端必须解决的问题，使用动态 rem 或者是根据 vw 进行 px 转换可以对局大部分现有机型适配，但是视网膜屏下的细线需要进行另外一些适配，不然 1px 会看起来更粗，因为像素被拆分，这样是不友好滴，看大漠从 2015 年到 2018 年的移动端适配过程你可以看到这孩子不容易啊。。。

- -

视网膜New iPad与普通分辨率iPad页面的兼容处理 （张鑫旭）

-

下面是大漠的对于移动端适配的方案及思考

-

使用Flexible实现手淘H5页面的终端适配

-

再聊移动端页面的适配

-

再谈Retina下1px的解决方案

-

如何在Vue项目中使用vw实现移动端适配

-

同时自己看了下自己公司移动端的画面，ios 系统在不同的 window.devicePixelRatio 下 1 对应的是 1px，2 对应的是 .5px， 3 对应出的是 0.359375px。

-
1
2
3
4
5
6
7
8
9
10
11
.f-weibo.card9 {
    border-bottom: 1px solid #e6e6e6
}
.iosx3 .f-weibo.card9 {
    border-bottom: .36px solid #e6e6e6
}
.iosx2 .f-weibo.card9 {
    border-bottom: .5px solid #e6e6e6
}
-

使用 javascript 做 useragent 检测实用类名，不过这是对 ios 8+ 以上才有的适配

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
    !function(e) {
        var a, i = navigator.userAgent.toLowerCase(), n = document.documentElement, t = parseInt(n.clientWidth);
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent) || i.indexOf("like mac os x") > 0) {
            var s = /os [\d._]*/gi
              , o = i.match(s);
            a = (o + "").replace(/[^0-9|_.]/gi, "").replace(/_/gi, ".")
        }
        var r = a + "";
        "undefined" != r && r.length > 0 && (a = parseInt(r),
        a >= 8 && (375 == t || 667 == t || 320 == t || 568 == t || 480 == t) ? n.className = "iosx2" : (a >= 8 && 414 == t || 736 == t) && (n.className = "iosx3")),
        /(Android)/i.test(navigator.userAgent) && (n.className = "android")
    }(window);
</script>
-

其中公司的一个 ui 组件中写道（也就是使用 meta 标签来进行修改）

-

在 Android端采取的 viewport 缩放的方式实现Hairline，这个或许会引发一些问题，比如你必须在业务中使用非 px 单位 。根据微博客户端特性预制了背景以及组件比例适配关系，这个也许你不需要。这些都可以在option中设置，例如：

-
1
Vue.use(xxxUI, { hairline: false, weibo: false });
-

xxxUI css 提供了一些常用的混合方法，方便开发时代码简化。base目录中的mixins.css是样式混合集。每个.vue文件中，调用global.css中包含了这个混合集，可以直接使用已提供的混合。

-

后面再看了下移动端对于安卓的一些适配，咋眼一看，都是 1px，嘿嘿嘿，原来这么轻松可以不适配，仔细一看我错了

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.m-panel {
    border-top-width: 1px;
    border-right-width: 0;
    border-bottom-width: 1px;
    border-left-width: 0;
    border-color: #e6e6e6;
    border-style: solid;
    background: #fff
}
.android .m-panel {
    border-top-width: 1px;
    border-right-width: 0;
    border-bottom-width: 1px;
    border-left-width: 0;
    border-color: transparent;
    border-style: solid;
    -o-border-image: url(data:image/svg+xml;utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%226%22%20height=%226%22%20viewBox=%220%200%206%206%22%3E%3Cpath%20fill=%22none%22%20stroke=%22silver%22%20stroke-width=%22.5%22%20stroke-miterlimit=%2210%22%20d=%22M.3.3h5.5v5.5H.3z%22/%3E%3C/svg%3E) 2 repeat;
    border-image: url(data:image/svg+xml;utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%226%22%20height=%226%22%20viewBox=%220%200%206%206%22%3E%3Cpath%20fill=%22none%22%20stroke=%22silver%22%20stroke-width=%22.5%22%20stroke-miterlimit=%2210%22%20d=%22M.3.3h5.5v5.5H.3z%22/%3E%3C/svg%3E) 2 repeat;
}
-

对于安卓的适配使用了 border-image 用 svg 来进行适配

-

postcss-write-svg 配合这个插件使用 postcss 写 1px 非常方便但是对于圆角的不能使用该方法解决

-

我自己在使用的时候直线都是使用 postcss-write-svg 来实现，而对于圆角，使用 device-pixel-ratio 来对视网膜屏进行筛选并用伪类对需要的进行 transform

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Retina 下 1px 的解决方案 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

Retina 下 1px 的解决方案 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

移动端适配一直是前端必须解决的问题，使用动态 rem 或者是根据 vw 进行 px 转换可以对局大部分现有机型适配，但是视网膜屏下的细线需要进行另外一些适配，不然 1px 会看起来更粗，因为像素被拆分，这样是不友好滴，看大漠从 2015 年到 2018 年的移动端适配过程你可以看到这孩子不容易啊。。。

+ +

视网膜New iPad与普通分辨率iPad页面的兼容处理 （张鑫旭）

+

下面是大漠的对于移动端适配的方案及思考

+

使用Flexible实现手淘H5页面的终端适配

+

再聊移动端页面的适配

+

再谈Retina下1px的解决方案

+

如何在Vue项目中使用vw实现移动端适配

+

同时自己看了下自己公司移动端的画面，ios 系统在不同的 window.devicePixelRatio 下 1 对应的是 1px，2 对应的是 .5px， 3 对应出的是 0.359375px。

+
1
2
3
4
5
6
7
8
9
10
11
.f-weibo.card9 {
    border-bottom: 1px solid #e6e6e6
}

.iosx3 .f-weibo.card9 {
    border-bottom: .36px solid #e6e6e6
}

.iosx2 .f-weibo.card9 {
    border-bottom: .5px solid #e6e6e6
}
+

使用 javascript 做 useragent 检测实用类名，不过这是对 ios 8+ 以上才有的适配

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
    !function(e) {
        var a, i = navigator.userAgent.toLowerCase(), n = document.documentElement, t = parseInt(n.clientWidth);
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent) || i.indexOf("like mac os x") > 0) {
            var s = /os [\d._]*/gi
              , o = i.match(s);
            a = (o + "").replace(/[^0-9|_.]/gi, "").replace(/_/gi, ".")
        }
        var r = a + "";
        "undefined" != r && r.length > 0 && (a = parseInt(r),
        a >= 8 && (375 == t || 667 == t || 320 == t || 568 == t || 480 == t) ? n.className = "iosx2" : (a >= 8 && 414 == t || 736 == t) && (n.className = "iosx3")),
        /(Android)/i.test(navigator.userAgent) && (n.className = "android")
    }(window);
</script>
+

其中公司的一个 ui 组件中写道（也就是使用 meta 标签来进行修改）

+

在 Android端采取的 viewport 缩放的方式实现Hairline，这个或许会引发一些问题，比如你必须在业务中使用非 px 单位 。根据微博客户端特性预制了背景以及组件比例适配关系，这个也许你不需要。这些都可以在option中设置，例如：

+
1
Vue.use(xxxUI, { hairline: false, weibo: false });
+

xxxUI css 提供了一些常用的混合方法，方便开发时代码简化。base目录中的mixins.css是样式混合集。每个.vue文件中，调用global.css中包含了这个混合集，可以直接使用已提供的混合。

+

后面再看了下移动端对于安卓的一些适配，咋眼一看，都是 1px，嘿嘿嘿，原来这么轻松可以不适配，仔细一看我错了

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.m-panel {
    border-top-width: 1px;
    border-right-width: 0;
    border-bottom-width: 1px;
    border-left-width: 0;
    border-color: #e6e6e6;
    border-style: solid;
    background: #fff
}

.android .m-panel {
    border-top-width: 1px;
    border-right-width: 0;
    border-bottom-width: 1px;
    border-left-width: 0;
    border-color: transparent;
    border-style: solid;
    -o-border-image: url(data:image/svg+xml;utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%226%22%20height=%226%22%20viewBox=%220%200%206%206%22%3E%3Cpath%20fill=%22none%22%20stroke=%22silver%22%20stroke-width=%22.5%22%20stroke-miterlimit=%2210%22%20d=%22M.3.3h5.5v5.5H.3z%22/%3E%3C/svg%3E) 2 repeat;
    border-image: url(data:image/svg+xml;utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%226%22%20height=%226%22%20viewBox=%220%200%206%206%22%3E%3Cpath%20fill=%22none%22%20stroke=%22silver%22%20stroke-width=%22.5%22%20stroke-miterlimit=%2210%22%20d=%22M.3.3h5.5v5.5H.3z%22/%3E%3C/svg%3E) 2 repeat;
}
+

对于安卓的适配使用了 border-image 用 svg 来进行适配

+

postcss-write-svg 配合这个插件使用 postcss 写 1px 非常方便但是对于圆角的不能使用该方法解决

+

我自己在使用的时候直线都是使用 postcss-write-svg 来实现，而对于圆角，使用 device-pixel-ratio 来对视网膜屏进行筛选并用伪类对需要的进行 transform

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2019/03/21/five/index.html b/2019/03/21/five/index.html index 638b48c9..d66c9b18 100644 --- a/2019/03/21/five/index.html +++ b/2019/03/21/five/index.html @@ -1,875 +1,556 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 第五周 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

第五周 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

新的项目使用 vue cli3 搭建，适配选折的是根据 vw 进行适配，写还是写 px 只是使用了 postcss 的相关插件

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  "postcss": {
    "plugins": {
      "postcss-import": {},
      "postcss-mixins": {},
      "postcss-aspect-ratio-mini": {},title:  flask vue socket
date: 2019/03/10
tags:	
	- 项目
      "postcss-write-svg": {},
      "postcss-cssnext": {},
      "postcss-px-to-viewport": {
        "viewportWidth": 375,
        "viewportHeight": 667,
        "unitPrecision": 3,
        "selectorBlackList": [
          ".ignore",
          ".hairlines"
        ],
        "minPixelValue": 1,
        "mediaQuery": false
      }
    }
  },
- -

最主要的就是 postcss-px-to-viewport，使用插件有两个坑，第一个是使用的 postcss-write-svg 将其写在了 postcss-mixins 的前面哎

-

报错是 Cannot read property ‘forEach’ of undefined 等一大窜当时就蒙了，这是啥报错，我当时感觉自己啥都没有干啊，就只是添加了一个插件就报错，删除这个插件了就没事，一度觉得是别人的插件有问题，幻想着可以提 issue。。。后面想到在之前使用 vue-socket 由于使用顺序而导致踩坑想到是一部是插件使用是的顺序问题，果然将其放在 postcss-mixins 后问题完美解决。

-

第二个是 postcss-url 自己当时搭建项目是参考了大漠的 如何在Vue项目中使用vw实现移动端适配 于是和自然是用了这个插件，但是当时并不知道他会干嘛。于是我就与之前在一样在 css 中使用 url 便出现了问题，

-

-

平常这样写是能够渲染出来的，可是现在去 chrome 看会看到一片空白，看样式

-

-

当时就尝试着把双引号去

-

-

发现可以了渲染出图片当时就没有去管了，后面回想起来就觉得很奇怪，当时也没想到是 postcss 插件的问题，觉得是在 vue build 中 cli2 与 cli3 有啥区别，就在项目全局搜索了 png/url 等一些东西就发现了 postcss-url 这个东西把它删掉就算是解决了。

-

background-size

-

-

对于小于 12px 的字体很自然的在 chrome 浏览器不再变小，这是 chrome 默认的（可以更改的）。但是在 chrome 该如何适配呢？首选当然是使用 transform。（zoom 依旧会受到 12px 的限制）

-

-

可以看到蓝色区域莫名的多出来了，这是因为scale只能引起重绘，而没有引起重排，所以页面外元素布局是不会改变，自身的样式会重新绘制。那要如何才让他不占位置？脱离文档流。

-

-

这样看似乎解决了这个问题？来我们把字加长点

-

-

这好像不太对劲，添上 white-space: no-wrap

-

-

似乎解决，但是如果再次加长就。。。

-

-

感觉这是能想到最后的了，一般这么小的字是不可能超过一行的，字太小对于用户不友好。当字太小的时候不要选择去实现它，让我们拿着刀区找设计师就对了。。。

-

vue ast

-

vnode数据结构

-

解析vue2.0的diff算法

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 第五周 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

第五周 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

新的项目使用 vue cli3 搭建，适配选折的是根据 vw 进行适配，写还是写 px 只是使用了 postcss 的相关插件

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  "postcss": {
    "plugins": {
      "postcss-import": {},
      "postcss-mixins": {},
      "postcss-aspect-ratio-mini": {},title:  flask vue socket
date: 2019/03/10
tags:	
	- 项目
      "postcss-write-svg": {},
      "postcss-cssnext": {},
      "postcss-px-to-viewport": {
        "viewportWidth": 375,
        "viewportHeight": 667,
        "unitPrecision": 3,
        "selectorBlackList": [
          ".ignore",
          ".hairlines"
        ],
        "minPixelValue": 1,
        "mediaQuery": false
      }
    }
  },
+ +

最主要的就是 postcss-px-to-viewport，使用插件有两个坑，第一个是使用的 postcss-write-svg 将其写在了 postcss-mixins 的前面哎

+

报错是 Cannot read property ‘forEach’ of undefined 等一大窜当时就蒙了，这是啥报错，我当时感觉自己啥都没有干啊，就只是添加了一个插件就报错，删除这个插件了就没事，一度觉得是别人的插件有问题，幻想着可以提 issue。。。后面想到在之前使用 vue-socket 由于使用顺序而导致踩坑想到是一部是插件使用是的顺序问题，果然将其放在 postcss-mixins 后问题完美解决。

+

第二个是 postcss-url 自己当时搭建项目是参考了大漠的 如何在Vue项目中使用vw实现移动端适配 于是和自然是用了这个插件，但是当时并不知道他会干嘛。于是我就与之前在一样在 css 中使用 url 便出现了问题，

+

+

平常这样写是能够渲染出来的，可是现在去 chrome 看会看到一片空白，看样式

+

+

当时就尝试着把双引号去

+

+

发现可以了渲染出图片当时就没有去管了，后面回想起来就觉得很奇怪，当时也没想到是 postcss 插件的问题，觉得是在 vue build 中 cli2 与 cli3 有啥区别，就在项目全局搜索了 png/url 等一些东西就发现了 postcss-url 这个东西把它删掉就算是解决了。

+

background-size

+

+

对于小于 12px 的字体很自然的在 chrome 浏览器不再变小，这是 chrome 默认的（可以更改的）。但是在 chrome 该如何适配呢？首选当然是使用 transform。（zoom 依旧会受到 12px 的限制）

+

+

可以看到蓝色区域莫名的多出来了，这是因为scale只能引起重绘，而没有引起重排，所以页面外元素布局是不会改变，自身的样式会重新绘制。那要如何才让他不占位置？脱离文档流。

+

+

这样看似乎解决了这个问题？来我们把字加长点

+

+

这好像不太对劲，添上 white-space: no-wrap

+

+

似乎解决，但是如果再次加长就。。。

+

+

感觉这是能想到最后的了，一般这么小的字是不可能超过一行的，字太小对于用户不友好。当字太小的时候不要选择去实现它，让我们拿着刀区找设计师就对了。。。

+

vue ast

+

vnode数据结构

+

解析vue2.0的diff算法

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/2019/03/22/\344\270\244\344\270\252\351\201\227\347\225\231\345\210\206\346\224\257/index.html" "b/2019/03/22/\344\270\244\344\270\252\351\201\227\347\225\231\345\210\206\346\224\257/index.html" new file mode 100644 index 00000000..77c5c1ae --- /dev/null +++ "b/2019/03/22/\344\270\244\344\270\252\351\201\227\347\225\231\345\210\206\346\224\257/index.html" @@ -0,0 +1,567 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + qrcode 分支 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

qrcode 分支 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

需求:私信拉粉丝群 功能已实现但设计稿不详

+

card2 判断是否为为未加群逻辑

card2 都是解析连接的

+

先判断该链接是否为群

+

//判断是否是群链 群连接 weibo.com/p/230491${群id}

+

为群再使用群id获取群成员列表遍历是否在该群中，不在该群便弹出二维码。

+

添加了 modal4

主要是二维码的模态框

+

​ * 二维码配置

+

​ * 详情见 https://github.com/davidshimjs/qrcodejs

+

​ * npm i qrcodejs2 https://www.npmjs.com/package/qrcodejs2

+

vux 添加

qrcode: ‘’, *//群二维码

+
1
2
3
4
5
6
7
//操作二维码(qrcode)
exqrcode(state, val) {
	state.qrcode = val;
},
emptyqrcode(state) {
	state.qrcode = null;
},
+

sync_double 分支

需求：新消息提醒联动

+

1、群消息免打扰

+

1-1 群消息免打扰功能，Web和App进行设置两边数据同步。【完成1】

+

1-2 右键出现气泡，气泡第一条：“查看群资料”，点击打开群信息弹窗，第二条：“群消息免打扰”/“打开群消息通知”，第三条“删除对话”，和线上逻辑一致。【完成1】

+

1-3 若点击“查看群资料”，回默认切换至当前聊天室，然后打开当前群的群资料弹窗。【完成1】

+

1-4 设置为“群消息免打扰”后，userlist第二条栏目显示规则：

+

[x条未读]+最新的一条消息+橙点（没有未读时显示免打扰icon【此icon还未使用最新设计稿icon】）【完成0.8】

+

2、群消息免打扰功能【调整icon位置及大小未作】【完成0】

+

3、群标题文案

+

3-1 群标题文案位置左移，UI上需要调整。【完成1】

+

3-2 鼠标碰到当前区域，鼠标变成手指icon。【完成1】

+

4、原关闭该群提醒功能【完成0】

+

双端消息同步

屏蔽消息状态码不在 pc/mobile 分开，都是用 mobile 的状态码

+

所以第一次渲染 chatlist 时所拿取的信息的是 mobile 的

+
1
2
3
4
export const getchatlist = obj => { 
 //获取聊天列表 special_source 标记请求来源 默认为 0 手机端 3
	return axios.get(`/webim/2/direct_messages/contacts.json?special_source=3`, obj).then(res => res.data);
};
+

手机端修改

一旦手机端修改是否屏蔽的状态会有下推

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
else if (type == 'groupchat_remind_settings') { //群消息免打扰双端同步
    let {
        list,
        i
    } = this.listHandle(cometdMsg.gid);
    this.$store.commit('update' + list, { //更改chatlist  此时不置顶联系人
        notTop: true,
        i,
        param: {
            remindSetting: cometdMsg.settings.mobile
        }
    });
    this.cgProcessPoll(); //结束当前消息处理
}
+

根据其id判断在列表的位置并修改屏蔽状态

+

pc 端修改

一旦pc修改需要通知移动端修改

+
1
2
3
4
5
6
export const setnotice = obj => { //更改用户私信群设置
	return axios.post(`/webim/2/notice_center/discussion_group/set_push_settings.json`, qs.stringify(obj)).then(res => res.data);
	//	return axios.post(`/webim/groupchat/update_user_settings.json`, qs.stringify(obj)).then(res => res.data);
};
//switch	 提醒设置，1：关闭；2：打开；3：屏蔽
//call_from pc:表示更改PC端私信群提醒设置 mobile 手机端
+

所以全局搜 setnotice 修改参数就好了

+

查看群/个人资料

若点击“查看群资料”，默认切换至当前聊天室，然后打开当前群的群资料弹窗。

+

当前是否选折了查看的的用户

+
    +

  • 已选折正常逻辑

    +
    1
    2
    this.$parent.$refs.cardcontaininfo.curView = "modal2")//群
    this.showUserInfo(0, 3)//人
    +
    • +

  • 未选折需要先选择同时注意时机问题

    +
      +

    • 群没事，由于群是根据存储在 vux selectid 进行渲染而在选折时就已经修改了 selectid

      +
      • +

    • 个人用户就需要注意时机问题，不然可能导致查看的资料是之前选取那个人的 usercardinfo，由于会重新渲染 message.vue, 而showUserInfo（） 的显示信息是根据 usercardinfo 获取的，但是 usercardinfo 的修改并不是一修改 slectedid 就会改变的，他的促发条件是聊天记录。这个时候我用的 eventbus

      +
      1
      2
      3
      this.$store.commit('fillusercardinfo', other);
      Bus.$emit('newUserCard');
      //一旦修改 usercardinfo 代表着可以去展示用户资料了
      • +
    +
    • +
+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2019/03/29/six/index.html b/2019/03/29/six/index.html index 183969b7..c3f82d74 100644 --- a/2019/03/29/six/index.html +++ b/2019/03/29/six/index.html @@ -1,955 +1,611 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 第六周随笔 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

第六周随笔 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

拼图验证组件实现

最开始对于该组件的计划是

-
-

第一天

    -
  • canvas 画线切图进行 x 轴偏移(记录 x )
    • -
  • 用户 touchstart touchend 时间差以及 x 轴位移量进行校验
    • -
  • 三次失败后刷新图片
    • -
-

第二天

    -
  • 在上一次切图的 y 轴上再次切同一形状的图产生混淆增加校验难度（注意 x 轴避免重合）
    • -
  • 用户自刷新
    • -
  • 用户关闭
    • -
  • 移动端以及 pc 的适配
    • -
-

未考虑

    -
  • 人机识别机制
    • -
  • 前端校验安全问题
    • -
-
- -

后面在实现的过程中发现这个时间计划还是没有达到，达到上面的效果差不多是 3 天，加上后面的优化以及移动端调试花了 近 5 天。

-
-

问题发现并解决：

-
    -
  • canvas 图片模糊
    • -
  • 滑动条优化
    • -
  • 滑动后状态提示
    • -
  • 检测 y 轴变化(人机识别)
    • -
  • 刷新过快问题
    • -
-
-

canvas 宽高设置

一开始就在这里踩坑了。。。图片模糊到自己不愿看

-

后面重新看了下 mdn Canvas的基本用法

-

在使用 canvas 的时候，需要设置画布的大小，要使用的是 canvas 的 width 与 height 属性，而不是设置 canvas 的 style 或者CSS样式中的 width 与 height 。

-

因为在绘制的过程中画布内容的实际大小是根据 canvas 的 width 与 height 属性设置的，而 style 或者CSS设置的width 与 height 只是简单的对画布进行缩放。

-

所以在写代码是使用了

-
1
2
3
4
for (let key in this.$refs) {
    this.$refs[key].width = this.inView.width;
    this.$refs[key].height = this.inView.height;
}
-

拼图的绘制

实现有凸起有缺口的拼图形状，使用 canvas 绘制圆弧。绘制出形状，再填充，后裁剪，再偏移就可以得到，一个离开原始位置的拼图块。这里使用多个 canvas 来实现一个图像的样子来使复杂的东西简单化 使用多层画布去画一个复杂的场景

-
1
2
3
4
5
6
7
8
9
10
11
// 画布 底层
this.ctx.drawImage(img, 0, 0, this.inView.width, this.inView.height);
// 切拼图层
this.drawArc(this.twoCtx, this.clipX, this.blockY, 'clip');
this.twoCtx.drawImage(img, 0, 0, this.inView.width, this.inView.height);
// 画两个假拼图块
this.drawArc(this.thrCtx, this.clipX, this.blockY, 'fill');
this.drawArc(this.thrCtx, this.trickX, this.blockY, 'fill');
// 画移动块层
const ImageData = this.twoCtx.getImageData(this.clipX - 1, this.blockY - 2, this.puzzle.width, this.puzzle.height);
this.fouCtx.putImageData(ImageData, 0, this.blockY - 2);
-

使用 css transition 并且使用 CSS module 会遇到问题

当在 module 中写带上 transition name 的样式会自动加上前缀，这样写的样式就没有用，于是将 transition 样式放在了 index.html 中（感觉并不是很好的方法）

-

使用 element.getBoundingClientRect() 获取对于视窗的参数

getBoundingClientRect() 会返回 DOMRect 的对象，当时直接使用 Object.assign 进行拷贝得到了 undefined

-

搜索可以看到 Why are properties of this object (DOMRect) inaccessible to standard Javascript functions?

-
-

Object.assign and Object.keys are working with own enumerable properties. DOMRectproperties are inherited from DOMRectPrototype and cannot be accessed by those methods.

-
-

当时下面建议使用 lodash。。。以及

-
-

Based on this answer, 7vujy0f0hy found the acceptable solution:

-
1
2
3
4
5
6
> var ownify = input => 
>                Object.keys(Object.getPrototypeOf(input)).reduce((output,key) => 
>                  Object.assign(output, {[key]: input[key]}), Object.assign({}, input));
> 
> test(ownify(el.getBoundingClientRect())); /* apparently works! */
>
-
-

>

-
-

(Although it iterates only over one level of inheritance, attributes from deeper levels will be still missing)

-
-

我尝试第二个方法，由于其仅迭代一个级别的继承，丢失不少的属性于是放弃。

-

参考 stackoverflow 使用了 toJSON() 得以解决。How best to convert a ClientRect / DomRect into a plain Object

-

过几天再回来看我发现使用 toJSON() 并不明智，使用该方法在 chrome 上没有问题，但是当使用移动端 uc 夸克等浏览器会报错

-
1
this.$refs.canvasFir.getBoundingClientRect().toJSON() is not a function
-

当时就无助，相当无助，咋还没这方法了。。。于是查看了下 stackoverflow 写得很清楚。。。

-
-

Warning: non-standard behavior (doesn’t work in Firefox < 62, including ESR 60 and possibly other browsers other than Chrome)

-
-
1
JSON.stringify(this.$refs.canvasFir.getBoundingClientRect()) //{}
-

返回一个空也是没谁了，后面没办法就将 getBoundingClientRect() 进行封装了一下

-
1
2
3
4
getBoundingClientRect(element) {
	const { top, right, bottom, left, width, height, x, y } = element.getBoundingClientRect();
	return { top, right, bottom, left, width, height, x, y }
},
-

pc 与移动端兼容 touchmove 与 onmousmove

mdn 写到

-
-

onmousemove 属性用来获取或设置当前元素的mousemove事件的事件处理函数

-
1
2
>element.onmousemove = event handling code
>
-
-

>

-
-

当用户在当前元素上移动鼠标时会触发 mousemove 事件

-
-

如果鼠标移出元素将放弃监听，而 touchmove 则不是这样，所以在 pc 使用鼠标的监听的位置要慎重选择

-

移动端调试

移动端调试痛点？——送你五款前端开发利器

-

尝试了一下以下两种方法，并看了下 mac 与 ios （可惜手上没有）

-

vConsole

-

chrome + andriod 谷歌官方文档

-

在调试的过程中发现，chrome 使用该项目没有啥问题，但是使用 uc 等浏览器会发现，左右滑动拼图块将触发浏览器自带的下一页/上一页的情况

-

于是在组件的监听处加了 @touchmove.prevent 发现在夸克浏览器能解决该问题而在 uc 上仍然存在，后面再添加 @touchstart.prevent 就能避免，删掉 @touchmove.prevent 测发现可以不需要他，猜测他们的上一页与下一页是基于 touchmove 的吧。

-

刷新

这种会出现请求的，应该出考虑大量请求下会出现的问题，太快会影响用户体验同时对于后端也不够友好。

-

签到优化

上周做这个项目说实在没有对自己负责，自己是不够认真的，有很多问题，出现了没解决，同时不确定的需求没有去问，对于细节的把控不到位，整体感觉比较浮躁，东西很糟糕。这是自己需要花时间去调整，将手上的每一个东西动作到不仅仅是能用就行，而是说他能够给用户一个好的体验，这时需要花时间的，还需要自己去反思自己在工作上时候的态度，如何对自己负责对项目负责。

-
    -
  • 自动签到金币动画优化
    • -
-

之前仅仅是一个 360 的图片自旋转，效果比较糟糕。

-

学习逐帧动画，并自己使用 ps 对多张图片进行拼接。How to Use steps() in CSS Animations

-
1
2
3
4
5
6
animation: rolls 2s steps(8, start) 1 reverse;
@keyframes rolls {
  to {
    background-position: 0 bottom;
  }
}
-
    -
  • 签到条不同签到状态颜色优化
    • -
  • 全部兑换功能实现
    • -
  • 提现页实现
    • -
- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 第六周随笔 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

第六周随笔 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

拼图验证组件实现

最开始对于该组件的计划是

+
+

第一天

    +
  • canvas 画线切图进行 x 轴偏移(记录 x )
    • +
  • 用户 touchstart touchend 时间差以及 x 轴位移量进行校验
    • +
  • 三次失败后刷新图片
    • +
+

第二天

    +
  • 在上一次切图的 y 轴上再次切同一形状的图产生混淆增加校验难度（注意 x 轴避免重合）
    • +
  • 用户自刷新
    • +
  • 用户关闭
    • +
  • 移动端以及 pc 的适配
    • +
+

未考虑

    +
  • 人机识别机制
    • +
  • 前端校验安全问题
    • +
+
+ +

后面在实现的过程中发现这个时间计划还是没有达到，达到上面的效果差不多是 3 天，加上后面的优化以及移动端调试花了 近 5 天。

+
+

问题发现并解决：

+
    +
  • canvas 图片模糊
    • +
  • 滑动条优化
    • +
  • 滑动后状态提示
    • +
  • 检测 y 轴变化(人机识别)
    • +
  • 刷新过快问题
    • +
+
+

canvas 宽高设置

一开始就在这里踩坑了。。。图片模糊到自己不愿看

+

后面重新看了下 mdn Canvas的基本用法

+

在使用 canvas 的时候，需要设置画布的大小，要使用的是 canvas 的 width 与 height 属性，而不是设置 canvas 的 style 或者CSS样式中的 width 与 height 。

+

因为在绘制的过程中画布内容的实际大小是根据 canvas 的 width 与 height 属性设置的，而 style 或者CSS设置的width 与 height 只是简单的对画布进行缩放。

+

所以在写代码是使用了

+
1
2
3
4
for (let key in this.$refs) {
    this.$refs[key].width = this.inView.width;
    this.$refs[key].height = this.inView.height;
}
+

拼图的绘制

实现有凸起有缺口的拼图形状，使用 canvas 绘制圆弧。绘制出形状，再填充，后裁剪，再偏移就可以得到，一个离开原始位置的拼图块。这里使用多个 canvas 来实现一个图像的样子来使复杂的东西简单化 使用多层画布去画一个复杂的场景

+
1
2
3
4
5
6
7
8
9
10
11
// 画布 底层
this.ctx.drawImage(img, 0, 0, this.inView.width, this.inView.height);
// 切拼图层
this.drawArc(this.twoCtx, this.clipX, this.blockY, 'clip');
this.twoCtx.drawImage(img, 0, 0, this.inView.width, this.inView.height);
// 画两个假拼图块
this.drawArc(this.thrCtx, this.clipX, this.blockY, 'fill');
this.drawArc(this.thrCtx, this.trickX, this.blockY, 'fill');
// 画移动块层
const ImageData = this.twoCtx.getImageData(this.clipX - 1, this.blockY - 2, this.puzzle.width, this.puzzle.height);
this.fouCtx.putImageData(ImageData, 0, this.blockY - 2);
+

使用 css transition 并且使用 CSS module 会遇到问题

当在 module 中写带上 transition name 的样式会自动加上前缀，这样写的样式就没有用，于是将 transition 样式放在了 index.html 中（感觉并不是很好的方法）

+

使用 element.getBoundingClientRect() 获取对于视窗的参数

getBoundingClientRect() 会返回 DOMRect 的对象，当时直接使用 Object.assign 进行拷贝得到了 undefined

+

搜索可以看到 Why are properties of this object (DOMRect) inaccessible to standard Javascript functions?

+
+

Object.assign and Object.keys are working with own enumerable properties. DOMRectproperties are inherited from DOMRectPrototype and cannot be accessed by those methods.

+
+

当时下面建议使用 lodash。。。以及

+
+

Based on this answer, 7vujy0f0hy found the acceptable solution:

+
1
2
3
4
5
6
> var ownify = input => 
>                Object.keys(Object.getPrototypeOf(input)).reduce((output,key) => 
>                  Object.assign(output, {[key]: input[key]}), Object.assign({}, input));
> 
> test(ownify(el.getBoundingClientRect())); /* apparently works! */
>
+
+
+

(Although it iterates only over one level of inheritance, attributes from deeper levels will be still missing)

+
+

我尝试第二个方法，由于其仅迭代一个级别的继承，丢失不少的属性于是放弃。

+

参考 stackoverflow 使用了 toJSON() 得以解决。How best to convert a ClientRect / DomRect into a plain Object

+

过几天再回来看我发现使用 toJSON() 并不明智，使用该方法在 chrome 上没有问题，但是当使用移动端 uc 夸克等浏览器会报错

+
1
this.$refs.canvasFir.getBoundingClientRect().toJSON() is not a function
+

当时就无助，相当无助，咋还没这方法了。。。于是查看了下 stackoverflow 写得很清楚。。。

+
+

Warning: non-standard behavior (doesn’t work in Firefox < 62, including ESR 60 and possibly other browsers other than Chrome)

+
+
1
JSON.stringify(this.$refs.canvasFir.getBoundingClientRect()) //{}
+

返回一个空也是没谁了，后面没办法就将 getBoundingClientRect() 进行封装了一下

+
1
2
3
4
getBoundingClientRect(element) {
	const { top, right, bottom, left, width, height, x, y } = element.getBoundingClientRect();
	return { top, right, bottom, left, width, height, x, y }
},
+

pc 与移动端兼容 touchmove 与 onmousmove

mdn 写到

+
+

onmousemove 属性用来获取或设置当前元素的mousemove事件的事件处理函数

+
1
2
>element.onmousemove = event handling code
>
+
+
+

当用户在当前元素上移动鼠标时会触发 mousemove 事件

+
+

如果鼠标移出元素将放弃监听，而 touchmove 则不是这样，所以在 pc 使用鼠标的监听的位置要慎重选择

+

移动端调试

移动端调试痛点？——送你五款前端开发利器

+

尝试了一下以下两种方法，并看了下 mac 与 ios （可惜手上没有）

+

vConsole

+

chrome + andriod 谷歌官方文档

+

在调试的过程中发现，chrome 使用该项目没有啥问题，但是使用 uc 等浏览器会发现，左右滑动拼图块将触发浏览器自带的下一页/上一页的情况

+

于是在组件的监听处加了 `@touchmove.prevent发现在夸克浏览器能解决该问题而在 uc 上仍然存在，后面再添加@touchstart.prevent就能避免，删掉@touchmove.prevent` 测发现可以不需要他，猜测他们的上一页与下一页是基于 touchmove 的吧。

+

刷新

这种会出现请求的，应该出考虑大量请求下会出现的问题，太快会影响用户体验同时对于后端也不够友好。

+

签到优化

上周做这个项目说实在没有对自己负责，自己是不够认真的，有很多问题，出现了没解决，同时不确定的需求没有去问，对于细节的把控不到位，整体感觉比较浮躁，东西很糟糕。这是自己需要花时间去调整，将手上的每一个东西动作到不仅仅是能用就行，而是说他能够给用户一个好的体验，这时需要花时间的，还需要自己去反思自己在工作上时候的态度，如何对自己负责对项目负责。

+
    +
  • 自动签到金币动画优化
    • +
+

之前仅仅是一个 360 的图片自旋转，效果比较糟糕。

+

学习逐帧动画，并自己使用 ps 对多张图片进行拼接。How to Use steps() in CSS Animations

+
1
2
3
4
5
6
animation: rolls 2s steps(8, start) 1 reverse;
@keyframes rolls {
  to {
    background-position: 0 bottom;
  }
}
+
    +
  • 签到条不同签到状态颜色优化
    • +
  • 全部兑换功能实现
    • +
  • 提现页实现
    • +
+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2019/04/04/seven/index.html b/2019/04/04/seven/index.html index 129261ba..7be982b9 100644 --- a/2019/04/04/seven/index.html +++ b/2019/04/04/seven/index.html @@ -1,892 +1,550 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 第七周随笔 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

第七周随笔 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -
    -
  • 实现波浪效果
    • -
-

纯 CSS 实现波浪效果！

-

codepen wave 椭圆实现

-

codepen wave canvas实现

-

codepen wave 1vw实现

-

自己尝试使用 canvas 去画贝塞尔曲线来画波浪的形状，还是比较麻烦的，但是这样做出来的更加的精美但是也比较消耗性能，其实还有一些会选择使用图片而不是去画贝塞尔曲线。

-

而使用椭圆实现其实是对方形添加 border-radius 并让其进行 360deg 旋转，遮挡大部分以达到波浪滚动的视觉错觉，这个方法会比较快捷。

-

- -

codepen 还有很多有意思的实现方法

-
    -

  • Chrome 跨域 disable-web-security 关闭安全策略

    -

    这个是查看 wechat 项目当时在 package.json 发现的语句 open -a "Google Chrome" --args --disable-web-security --user-data-dir 可是在 windows/linux 运行都无效，搜索发现的

    -
    • -
-

mac

1
//chrome 浏览器 open -a "Google Chrome" --args --disable-web-security  --user-data-dir
-

win10

快捷方式属性目标后添加成这样就好

-
1
"C:\Users\UserName\AppData\Local\Google\Chrome\Application\chrome.exe" --args --disable-web-security --user-data-dir
-
    -

  • wechat 项目交接

    -

    wechat 项目的交接使我看到，当一个项目交接时的一些需要准备的东西，如何去梳理自己做的项目，熟悉别人项目是应该关注的点在何处。看到这样一个比较大的前端项目感到自己还要加油学啊。。。

    -
    • -

  • onmousewheel 在 firefox 无效以及如何知晓鼠标滚轮是向上还是向下的解决方案

    -
    • -
-

The onmousewheel event of JavaScript

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 第七周随笔 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

第七周随笔 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +
    +
  • 实现波浪效果
    • +
+

纯 CSS 实现波浪效果！

+

codepen wave 椭圆实现

+

codepen wave canvas实现

+

codepen wave 1vw实现

+

自己尝试使用 canvas 去画贝塞尔曲线来画波浪的形状，还是比较麻烦的，但是这样做出来的更加的精美但是也比较消耗性能，其实还有一些会选择使用图片而不是去画贝塞尔曲线。

+

而使用椭圆实现其实是对方形添加 border-radius 并让其进行 360deg 旋转，遮挡大部分以达到波浪滚动的视觉错觉，这个方法会比较快捷。

+

+ +

codepen 还有很多有意思的实现方法

+
    +

  • Chrome 跨域 disable-web-security 关闭安全策略

    +

    这个是查看 wechat 项目当时在 package.json 发现的语句 open -a "Google Chrome" --args --disable-web-security --user-data-dir 可是在 windows/linux 运行都无效，搜索发现的

    +
    • +
+

mac

1
//chrome 浏览器 open -a "Google Chrome" --args --disable-web-security  --user-data-dir
+

win10

快捷方式属性目标后添加成这样就好

+
1
"C:\Users\UserName\AppData\Local\Google\Chrome\Application\chrome.exe" --args --disable-web-security --user-data-dir
+
    +

  • wechat 项目交接

    +

    wechat 项目的交接使我看到，当一个项目交接时的一些需要准备的东西，如何去梳理自己做的项目，熟悉别人项目是应该关注的点在何处。看到这样一个比较大的前端项目感到自己还要加油学啊。。。

    +
    • +

  • onmousewheel 在 firefox 无效以及如何知晓鼠标滚轮是向上还是向下的解决方案

    +
    • +
+

The onmousewheel event of JavaScript

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2019/04/12/eight/index.html b/2019/04/12/eight/index.html index 097043fa..7e261fb3 100644 --- a/2019/04/12/eight/index.html +++ b/2019/04/12/eight/index.html @@ -1,848 +1,529 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 第八周随笔 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

第八周随笔 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

css中background-color:transparent与opacity:0有什么区别？

-

circle ripple

-

滚轮兼容

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function addMouseWheelHandler(){
    var prefix = '';
    var _addEventListener;
    if (window.addEventListener){
        _addEventListener = "addEventListener";
    }else{
        _addEventListener = "attachEvent";
        prefix = 'on';
    }
     // detect available wheel event
    var support = 'onwheel' in document.createElement('div') ? 'wheel' : // Modern browsers support "wheel"
              document.onmousewheel !== undefined ? 'mousewheel' : // Webkit and IE support at least "mousewheel"
              'DOMMouseScroll'; // let's assume that remaining browsers are older Firefox
    if(support == 'DOMMouseScroll'){
        document[ _addEventListener ](prefix + 'MozMousePixelScroll', MouseWheelHandler, false);
    }
    //handle MozMousePixelScroll in older Firefox
    else{
        document[ _addEventListener ](prefix + support, MouseWheelHandler, false);
    }
}
- -

JS滚轮事件(mousewheel/DOMMouseScroll)了解

-

pc 的触控板为了用户滑动后看着更加优雅有一个惯性。win10 这个时间大概在 2s 左右, 但是我只想他只滑动一次，这个东西个人尝试 prevent 并没有啥用。本来就是滚动（使用鼠标滚动常常也会一次就触发好几次 mousewheel），对于这个我开始使用的节流（在一段时间内某时间只能被触发一次，），大概一秒能触发一次对用户还是比较友好地，但是当使用触控板我不得不将时间拉到 2s 甚至更多这是我不愿意的，这对用户来说很不流畅，怎么办，使用防抖动（在一个时间间隔内这一事件被多次触发只当作触发一次，这与节流有啥区别呢？在该时间段内再次触发会导致计时器时间重置，也就是说如果你一直在规定的时间段内触发那么该函数只会执行一次）

-

实例解析防抖动（Debouncing）和节流阀（Throttling)

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//鼠标滚轮滑动逻辑
wheel(e) {
  const changeScroll = () => {
    const sd = e.wheelDelta || -e.detail;
    if (sd > 0) {
      this.listUp();
    } else {
      this.listDown();
    }
  };
  this.immediate(changeScroll, 500);
},
//防抖动
immediate(func, wait) {
  if (this.scrollActive) {
    func();
  }
  this.scrollActive = false;
  clearTimeout(this.timer);
  this.timer = setTimeout(() => {
    this.scrollActive = true;
  }, wait);
},
-

由于希望在执行滚动的时候就立即执行向上/下翻页，于是加入一个 srcollActive, 并在等待时间超过后修改 scrollActive 的值这样就能完成对电脑触摸板的一个兼容。

-

plupload get start demo

-
1
2
3
4
5
6
7
8
9
10
11
12
/public/js/index.html
<script type="text/javascript" alt="plupload.full.min.js">
<script>
/src/assets/js/createfileuploader.js
//主要配置 config 在此文件
var fileUploader = new plupload.Uploader(config);
fileUploader.init();
/src/mixin/fileupload.js
//混入文件于 text.vue
- -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 第八周随笔 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

第八周随笔 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

css中background-color:transparent与opacity:0有什么区别？

+

circle ripple

+

滚轮兼容

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function addMouseWheelHandler(){
    var prefix = '';
    var _addEventListener;

    if (window.addEventListener){
        _addEventListener = "addEventListener";
    }else{
        _addEventListener = "attachEvent";
        prefix = 'on';
    }

     // detect available wheel event
    var support = 'onwheel' in document.createElement('div') ? 'wheel' : // Modern browsers support "wheel"
              document.onmousewheel !== undefined ? 'mousewheel' : // Webkit and IE support at least "mousewheel"
              'DOMMouseScroll'; // let's assume that remaining browsers are older Firefox


    if(support == 'DOMMouseScroll'){
        document[ _addEventListener ](prefix + 'MozMousePixelScroll', MouseWheelHandler, false);
    }

    //handle MozMousePixelScroll in older Firefox
    else{
        document[ _addEventListener ](prefix + support, MouseWheelHandler, false);
    }
}
+ +

JS滚轮事件(mousewheel/DOMMouseScroll)了解

+

pc 的触控板为了用户滑动后看着更加优雅有一个惯性。win10 这个时间大概在 2s 左右, 但是我只想他只滑动一次，这个东西个人尝试 prevent 并没有啥用。本来就是滚动（使用鼠标滚动常常也会一次就触发好几次 mousewheel），对于这个我开始使用的节流（在一段时间内某时间只能被触发一次，），大概一秒能触发一次对用户还是比较友好地，但是当使用触控板我不得不将时间拉到 2s 甚至更多这是我不愿意的，这对用户来说很不流畅，怎么办，使用防抖动（在一个时间间隔内这一事件被多次触发只当作触发一次，这与节流有啥区别呢？在该时间段内再次触发会导致计时器时间重置，也就是说如果你一直在规定的时间段内触发那么该函数只会执行一次）

+

实例解析防抖动（Debouncing）和节流阀（Throttling)

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//鼠标滚轮滑动逻辑
wheel(e) {
  const changeScroll = () => {
    const sd = e.wheelDelta || -e.detail;
    if (sd > 0) {
      this.listUp();
    } else {
      this.listDown();
    }
  };
  this.immediate(changeScroll, 500);
},
//防抖动
immediate(func, wait) {
  if (this.scrollActive) {
    func();
  }
  this.scrollActive = false;
  clearTimeout(this.timer);
  this.timer = setTimeout(() => {
    this.scrollActive = true;
  }, wait);
},
+

由于希望在执行滚动的时候就立即执行向上/下翻页，于是加入一个 srcollActive, 并在等待时间超过后修改 scrollActive 的值这样就能完成对电脑触摸板的一个兼容。

+

plupload get start demo

+
1
2
3
4
5
6
7
8
9
10
11
12
/public/js/index.html

<script type="text/javascript" alt="plupload.full.min.js">
<script>

/src/assets/js/createfileuploader.js
//主要配置 config 在此文件
var fileUploader = new plupload.Uploader(config);
fileUploader.init();

/src/mixin/fileupload.js
//混入文件于 text.vue
+
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2019/04/19/Whats-JSONP/index.html b/2019/04/19/Whats-JSONP/index.html deleted file mode 100644 index 1ee0b7ab..00000000 --- a/2019/04/19/Whats-JSONP/index.html +++ /dev/null @@ -1,906 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - What's JSONP | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

What's JSONP - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

wiki 上解释到 JSONP is JSON with padding

其实个人看来啥也没说啊。stackoverflow上还是有不错的解释。我在这里会解释我看来的 JSONP

- -

现有两个人想进行数据交互，他们是

-

请求方：网站1的前端程序员（浏览器）

-

响应方：网站2的后端程序猿（服务器）

-

JSONP 就是为解决服务器与客服端跨源（网站1到网站2）通信，简单实用

-
    -

  1. 请求方动态创建 script， src 指向响应方，传递查询参数 ?callback=xxx

    -
    2. -

  2. 响应方根据查询参数 callback, 构造出

    -

    xxx.call(undefined, ‘msg’)

    -

    xxx(‘msg’)这样的响应

    -
    3. -

  3. 浏览器接到响应就会去执行 xxx(‘msg’)

    -
    4. -

  4. 请求方就知道了他要的数据了

    -
    5. -
-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
button.addEventListener('click', (e) => {
  let script = document.creatElement('script')//动态script
  let functionName = 'marsorsun' + parseInt(Math.radom()*1000000, 10)//函数名随机
  window[functionName] = function(){
    amount.innerText = amount.innerText - 1
  }
  script.src = '/pay?callback=' + functionName
  document.body.appendChild(script)
  script.onload = function(e){//success
    e.currentTarget.remove()//从页面中移除<script>
    delete window[functionName]//干掉随机数
  }
  script.onerror = function() {
    e.currentTarget.remove()
  }
})
-
1
2
3
4
5
6
7
8
9
10
11
//后端代码
if(path === '/pay'){
  let amount = fs.readFileSync('./db', 'utf8')//db中就一个数100
  amount--
  fs.writeFileSync('./db', amount)
  response.setHeader('Content-type', 'application/javascript')
  response.write(`
	${callback}.call('undefined', 'success')
`)
  response.end()
}
-
1
2
3
4
5
6
7
8
9
10
11
12
//jQuery 直接简单到你看不懂
$.ajax({
 url: "http://jack.com:8002/pay",
 dataType: "jsonp",
 success: function( response ) {
     if(response === 'success'){
     amount.innerText = amount.innerText - 1
     }
 }
 })
 $.jsonp()
-

参考：

- - - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git "a/2019/04/19/\347\216\257\345\242\203\345\217\230\351\207\217\345\222\214\346\250\241\345\274\217/index.html" "b/2019/04/19/\347\216\257\345\242\203\345\217\230\351\207\217\345\222\214\346\250\241\345\274\217/index.html" index 7fa2abce..d14d3cd3 100644 --- "a/2019/04/19/\347\216\257\345\242\203\345\217\230\351\207\217\345\222\214\346\250\241\345\274\217/index.html" +++ "b/2019/04/19/\347\216\257\345\242\203\345\217\230\351\207\217\345\222\214\346\250\241\345\274\217/index.html" @@ -1,921 +1,579 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 第九周随笔 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

第九周随笔 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

-

.sync 修饰符

看 happy-scroll 源码的时候看到了 .sync 修饰符，没有用过所以看了下，它是在 vue 2.3.0+ 新增的，主要是解决使用 props 传值后子组件在使用了 emit 来进行 “双向绑定” ，但是父组件与子组件都没有明显的修改痕迹而不利于代码可读性。但是这样写的话可读性会好一些，在子组建中

-
1
<div @click="$emit('update:num', num+1)">click {{num}}</div>
-

再父组件中

-
1
<child :num="num" @update:num="num = $event"></child>
-

这样看起来就简单明了的，可是父组件书写是比较麻烦的，于是就有了这个我没有使用过的修饰符

- 
1
<child :num.sync="num"></child>
-

现在父组件这样写就能达到相同的效果了。

- -

mixins

pcweibochat 大量使用了 mixins 开始不是很懂，后面看了下文档个人觉得比较需要记录下的是选项合并，当遇到同名的时候并不是谁代替谁而是合并

-
-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
> var mixin = {
>   data: function () {
>     return {
>       message: 'hello',
>       foo: 'abc'
>     }
>   }
> }
> 
> new Vue({
>   mixins: [mixin],
>   data: function () {
>     return {
>       message: 'goodbye',
>       bar: 'def'
>     }
>   },
>   created: function () {
>     console.log(this.$data)
>     // => { message: "goodbye", foo: "abc", bar: "def" }
>   }
> })
>
-
-

环境变量和模式

-

模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：

-
    -
  • development 模式用于 vue-cli-service serve
    • -
  • production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
    • -
  • test 模式用于 vue-cli-service test:unit
    • -
-

你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如，如果你想要在构建命令中使用开发环境变量，请在你的 package.json 脚本中加入：

-
1
2
> "dev-build": "vue-cli-service build --mode development",
>
-
-

自从使用 vue cli 后自己对于 webpack 就没有去了解了，觉得是一个打包工具，了解下就好了，可是最近 pcweibochat 测试环境进行迁移，就触及到了知识盲区，感觉 webpack 的一些东西还是要好好地看看整理整理。

-

24 个实例入门并掌握「Webpack4」(一)

-

webpack 相关

-
1
2
3
"dev": "cross-env NODE_ENV=dev vue-cli-service serve",
"build": "cross-env console_FLAG=1 vue-cli-service build",
"test": "cross-env vue-cli-service build --mode test",
-

cross-env cross-env使得您可以拥有一个命令，而无需担心为平台正确设置或使用环境变量。

-
1
2
3
4
5
6
7
8
9
devServer: {
    open: process.platform === 'darwin',
    host: '',
    port: 8092,
    hotOnly: false,
    disableHostCheck: true,
    before: app => {},
    proxy: 'https://ppppppp'
},
-

process.platform 属性返回字符串，标识Node.js进程运行其上的操作系统平台。

-

devServer

-
-

在每次编译代码时，手动运行 npm run build 会显得很麻烦。

-

webpack 提供几种可选方式，帮助你在代码发生变化后自动编译代码：

-
    -
  1. webpack watch mode(webpack 观察模式)
    2. -
  2. webpack-dev-server
    3. -
  3. webpack-dev-middleware
    4. -
-
-

UglifyJS Webpack Plugin

-

了解 jsbridge

来公司很久了，不是会听到 jsbridge 这个名词，但是并不知道到是啥东东比较尴尬。。。

-

看看 移动混合开发中的 JSBridge 算是有了一个比较初步的认识，其实就是 web 端如何实现去调取原生的一些接口的，就比如我们要在 h5 唤起客服端就可以使用 jsbridge 来进行实现。 callapp-lib

-

之前的服务器被强了，但是有别人的代理就将就用着，可是上不了 telegram中午的时间抽空重新搭了下 vpp

-
1
wget -N --no-check-certificate https://raw.githubusercontent.com/ToyoDAdoubi/doubi/master/ssr.sh && chmod +x ssr.sh && bash ssr.sh
-

之前 telegram 一直看不了现在不担心，看了下对于 100000 的 group 的消息处理尤其是 web 端的

-

telegram group 排行

-

审美 VS 科学 —— 用科学定义设计

-

下推逻辑整理

-

xmind

-

msgsync: 自己从其他非webim客户端发的消息 （个人发送 非群组）

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
dm_isRemind: 0
ext:
dm_type: 1
send_from: "msg"
__proto__: Object
info:
comment: ""
content: "youtube"
dm_type: 1
dmid: "4362388403274607"
fromuid: 2502739550
media_type: 0
receiver_box_type: 2
resource: ""
time: 1555557907000
__proto__: Object
items: Array(1)
0: (8) [2502739550, "youtube", 1555557907000, "", "", Array(0), "4362388403274607", 0]
length: 1
__proto__: Array(0)
push_did: "1555557907412"
type: "msgsync"
__proto__: Object
-
-

每一周的时间都很快

-

​ –鲁迅​

-
- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 第九周随笔 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

第九周随笔 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

+

.sync 修饰符

看 happy-scroll 源码的时候看到了 .sync 修饰符，没有用过所以看了下，它是在 vue 2.3.0+ 新增的，主要是解决使用 props 传值后子组件在使用了 emit 来进行 “双向绑定” ，但是父组件与子组件都没有明显的修改痕迹而不利于代码可读性。但是这样写的话可读性会好一些，在子组建中

+
1
<div @click="$emit('update:num', num+1)">click {{num}}</div>
+

再父组件中

+
1
<child :num="num" @update:num="num = $event"></child>
+

这样看起来就简单明了的，可是父组件书写是比较麻烦的，于是就有了这个我没有使用过的修饰符

+ 
1
<child :num.sync="num"></child>
+

现在父组件这样写就能达到相同的效果了。

+ +

mixins

pcweibochat 大量使用了 mixins 开始不是很懂，后面看了下文档个人觉得比较需要记录下的是选项合并，当遇到同名的时候并不是谁代替谁而是合并

+
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
> var mixin = {
>   data: function () {
>     return {
>       message: 'hello',
>       foo: 'abc'
>     }
>   }
> }
> 
> new Vue({
>   mixins: [mixin],
>   data: function () {
>     return {
>       message: 'goodbye',
>       bar: 'def'
>     }
>   },
>   created: function () {
>     console.log(this.$data)
>     // => { message: "goodbye", foo: "abc", bar: "def" }
>   }
> })
>
+
+

环境变量和模式

+

模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：

+
    +
  • development 模式用于 vue-cli-service serve
    • +
  • production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
    • +
  • test 模式用于 vue-cli-service test:unit
    • +
+

你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如，如果你想要在构建命令中使用开发环境变量，请在你的 package.json 脚本中加入：

+
1
2
> "dev-build": "vue-cli-service build --mode development",
>
+
+

自从使用 vue cli 后自己对于 webpack 就没有去了解了，觉得是一个打包工具，了解下就好了，可是最近 pcweibochat 测试环境进行迁移，就触及到了知识盲区，感觉 webpack 的一些东西还是要好好地看看整理整理。

+

24 个实例入门并掌握「Webpack4」(一)

+

webpack 相关

+
1
2
3
"dev": "cross-env NODE_ENV=dev vue-cli-service serve",
"build": "cross-env console_FLAG=1 vue-cli-service build",
"test": "cross-env vue-cli-service build --mode test",
+

cross-env cross-env使得您可以拥有一个命令，而无需担心为平台正确设置或使用环境变量。

+
1
2
3
4
5
6
7
8
9
devServer: {
    open: process.platform === 'darwin',
    host: '',
    port: 8092,
    hotOnly: false,
    disableHostCheck: true,
    before: app => {},
    proxy: 'https://ppppppp'
},
+

process.platform 属性返回字符串，标识Node.js进程运行其上的操作系统平台。

+

devServer

+
+

在每次编译代码时，手动运行 npm run build 会显得很麻烦。

+

webpack 提供几种可选方式，帮助你在代码发生变化后自动编译代码：

+
    +
  1. webpack watch mode(webpack 观察模式)
    2. +
  2. webpack-dev-server
    3. +
  3. webpack-dev-middleware
    4. +
+
+

UglifyJS Webpack Plugin

+

了解 jsbridge

来公司很久了，不是会听到 jsbridge 这个名词，但是并不知道到是啥东东比较尴尬。。。

+

看看 移动混合开发中的 JSBridge 算是有了一个比较初步的认识，其实就是 web 端如何实现去调取原生的一些接口的，就比如我们要在 h5 唤起客服端就可以使用 jsbridge 来进行实现。 callapp-lib

+

之前的服务器被强了，但是有别人的代理就将就用着，可是上不了 telegram中午的时间抽空重新搭了下 vpp

+
1
wget -N --no-check-certificate https://raw.githubusercontent.com/ToyoDAdoubi/doubi/master/ssr.sh && chmod +x ssr.sh && bash ssr.sh
+

之前 telegram 一直看不了现在不担心，看了下对于 100000 的 group 的消息处理尤其是 web 端的

+

telegram group 排行

+

审美 VS 科学 —— 用科学定义设计

+

下推逻辑整理

+

xmind

+

msgsync: 自己从其他非webim客户端发的消息 （个人发送 非群组）

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
dm_isRemind: 0
ext:
dm_type: 1
send_from: "msg"
__proto__: Object
info:
comment: ""
content: "youtube"
dm_type: 1
dmid: "4362388403274607"
fromuid: 2502739550
media_type: 0
receiver_box_type: 2
resource: ""
time: 1555557907000
__proto__: Object
items: Array(1)
0: (8) [2502739550, "youtube", 1555557907000, "", "", Array(0), "4362388403274607", 0]
length: 1
__proto__: Array(0)
push_did: "1555557907412"
type: "msgsync"
__proto__: Object
+
+

每一周的时间都很快

+

​ –鲁迅​

+
+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/2019/04/19/\351\235\242\345\220\221\345\257\271\350\261\241\347\250\213\345\272\217\350\256\276\350\256\241\357\274\210\344\270\200\357\274\211/index.html" "b/2019/04/19/\351\235\242\345\220\221\345\257\271\350\261\241\347\250\213\345\272\217\350\256\276\350\256\241\357\274\210\344\270\200\357\274\211/index.html" deleted file mode 100644 index 33177279..00000000 --- "a/2019/04/19/\351\235\242\345\220\221\345\257\271\350\261\241\347\250\213\345\272\217\350\256\276\350\256\241\357\274\210\344\270\200\357\274\211/index.html" +++ /dev/null @@ -1,923 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 面向对象程序设计 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

面向对象程序设计 - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

昨天去知道创宇面试的时候面试官当时提了这样的问题，你对对象的属性了解有哪些,当场我说了知道 Enumerable Value Writable 然后说就记得这些了。但是面试官当时就又问那如果想知道我改变了对象中的值应该如何呢？当时我就想到了 MVVM 可当时却没有与 get set联系到一起,当时就只能尬聊了。

-

深入响应式原理

-

回去后把很久之前看过的《JavaScript高级程序设计》第 6 张重新看了遍。才发现原来自己把很多基础的东西都忘了。

- -

理解对象

对象的属性类型

    -
  • 数据属性
    [[Configurable]] [[Enumerable]] [[Writable]] [[Value]]
    • -
  • 访问器属性
    [[Get]] [[Set]] [[Configurable]] [[Enumerable]]
    访问器属性必须通过 Object.defineProperty() 来进行定义
    定义多个属性使用 Object.defineProperties()
    Vue 的响应式就离不开访问器属性，但是 Object.defineProperty() 这东西又支持的 IE9+，IE8部分支持这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。
    如何监听 js 中变量的变化?
    读取属性的特性使用 Object.getOwnPropertyDescriptor()
    • -
-

创建对象

工厂模式

1
2
3
4
5
6
7
8
9
10
11
function creatPerson(name, age){
  var a = new Object()
  a.name = name
  a.age = age
  return a
  a.say(){
    alert(hi)
  }
}
var p1 = creatPerson('aa', 10)
var p2 = creatPerson('bb', 20)
-
    -
  • 解决了多个对象相似的问题
    • -
  • 未解决怎样知道对象的类型
    • -
  • say（）这个方法没必要每个人都使用不一样的地址
    • -
-

构造函数模式

1
2
3
4
5
6
7
8
9
function Person(name, age){
	this.name = name
	this.age = age
	this.sayName(){
      alert(this.name)
	}
}
var p1 = new Person('aa', 10)
var p2 = new Person('bb', 20)
-
    -
  • 主要问题是每一方法都要每个实例上重新创建一边
    • -
-

原型模式

1
2
3
4
5
6
7
8
9
function Person(){}
Person.prototype.name = 'aa'
Person.prototype.age = 10
Person.prototype.sayName() = function(){
  alert(this.name)
}
var p1 = new Person()
p1.sayName()
-
    -
  • 这样就解决了之前的每一方法都要每个实例上重新创建一便但是若要改变 name 那所有实例的名字都将改变
    • -
-

理解原型对象

无论什么时候，只要创建一个新函数就会根据一组特定的规则为该函数创建一个 prototype 属性，这个属性指向函数的原型对象。在默认情况下所有原型对象都会获得一个 constructor 属性，这个属性是一个指向 prototype 属性所在函数的指针。

-

虽然所有实现中都无法访问[[Prototype]]，可以用 isPrototypeOf() 以及 Object.getPrototypeOf()

-

hasOwnProperty()可以检测一个属性是否存在于实例中

-

Object.keys() 可以取得对象上可枚举的实例属性

-

Object.getOwnPropertyNames() 可以取得对象上所有实例属性包含不可枚举

-

更简单的原型语法

使用对象字面量来重写原型对象

-
1
2
3
4
5
6
7
8
9
function Person(){}
Person.prototype = {
  //constructor: Person,
  name: 'aa',
  age：10，
  sayName: function(){
  alert(this.name)
}
}
-
    -
  • 确实是更方便，但是有一个问题，constructor 属性不再指向 Person 了，我们使用的语法本质上完全重置了 prototype 对象，所以 constructor 属性也就变成了新对象的 constructor 属性（指向 Object）当然我们可以特意设回适当的值(但这又会改变[[Enumerable]], 使用 Object.defineProperty()设置)
    • -
-

组合使用构造函数模式和原型模式

1
2
3
4
5
6
7
8
9
10
11
12
13
function Person(name, age){
  this.name = name
  this.age = age
}
Person.prototype = {
  constructor: Person
  sayName: function(){
  alert(this.name)
}
}
var p1 = new Person('aa', 10)
var p2 = new Person('bb', 20)
-
    -
  • 使用最广泛，认同度最高
    • -
-

动态原型模式

1
2
3
4
5
6
7
8
9
function Person(name, age){
  this.name = name
  this.age = age
  if(typeof this.sayName != 'function'){
    Person.prototype.sayName = function(){
      alert(this.name)
    } 
  }
}
-

寄生构造函数模式

很像工厂模式与构造函数模式

-
1
2
3
4
5
6
7
8
9
10
function Person(name, age){
  var a = new Object()
  a.name = name 
  a.age = age
  a.sayName = function(){
    alert(his.name)
  }
  return a
}
var p1 = new Person('aa', 10)
-
    -
  • 返回的对象与构造函数或则与构造函数的原型属性没有联系，也就是说，构造函数返回的对象与在构造函数外部创建的对象没有什么不同。
    • -
-

稳妥构造函数模式

指没有公共属性，其方法也不引用 this

-
1
2
3
4
5
6
7
8
9
10
11
12
function Person(name, age){
  var a = new Object()
  this.name = name
  this.age = age
  a.sayName = function(){
    alert(name)
  }
  return a
}
var p1 = Person('aa', 10)
p1.sayName()
-
    -
  • 这种模式除了 p1.sayName() 可以访问到 name 其他方式都不行
    • -
- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/2019/05/09/arts/index.html b/2019/05/09/arts/index.html index b2e46fa4..9c56243e 100644 --- a/2019/05/09/arts/index.html +++ b/2019/05/09/arts/index.html @@ -1,915 +1,573 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 终？ | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

终？ - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

-

时日如飞，三个月的时间即将而至，我的实习也到了尾声。

-

这段时间很快，比我刚开始想象的快多了，我也如愿以偿的逃离了想逃离的东西。

-

没有鸡汤 just for fun

- -

二维码

二维码的生成细节和原理

-

【科普文】二维码的[生成]和[扫码]

-

两个思考：

-

为啥几乎都是黑白色的

-

二维码中间有图片为啥还能用

-

fontface 小图标

看到 fontfamily：”wbficonregular” !important; ？？？黑人问号脸，这是啥啊

-

font-face

-

vue 事件修饰符

修饰符是可以串联的

-
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
-

Git 工作流

Git协同工作流

这段时间写的线上代码多了些，对 git 使用也有了一个更深的了解

-

中心式协同工作流

-

这应该是自己一个人敲代码的时候最常使用的方式了，他就像 svn 一样

-
    -
  • git pull origin master 先同步远程代码
    • -
  • 修改后 git commit
    • -
  • git push origin master 到远程这样其他同学就可以看到你的代码了
    • -
-

但是第三不在多人合作下是有可能 push 失败，因为别人提交了，你需要 git pull

-
    -
  • 先把本地提交的代码放在一边
    • -
  • 下载服务器的改动
    • -
  • 把之前的改动与新的改动一个个 commit
    • -
-

有冲突你必须先解决冲突

-

功能分支协同工作流

上面的方法是可行的，可是这几天写代码我也是感到了痛苦。如果项目的人再多一点我觉得很有可能是要出问题的。对代码的干扰相当严重。因此有了功能分支，像我就把新需求群二维码就拉了一个 qrcode

-
    -
  • git checkout -b qrcode
    • -
  • 共同开发这个功能的程序员就在这分支工作，add，commit
    • -
  • git push -u orgin qrcode
    • -
  • git pull –rebase 其他程序员来拿到分支的代码
    • -
-

我觉得开发的时候能提交就尽快提交，不然太久可能冲突就太多了。。。

-

GitFlow 协同工作流

在不停开发新代码的同时，维护线上代码中

-
    -
  • 我们需要一个分支是干净的，可以发布代码，是可以发布到生产环境的
    • -
-

我之前有一个分支就是可以直接到测试环境的，然后写代码就一直在那个分支写，后面只上部分功能的时候就傻了。自己手里就没有了一个可以发布代码的测试环境。。。管理好代码的一致性还是非常重要的

-

-

我只是希望我是右边。。。对 git 的理解还是太浅了。。。

-

代码规范

当拿到 webchat 提交几次代码我就深深体会到代码团队规范多么重要，之前的还把 eslint 禁用了。。。

-

计划

ARTS 每周完成一次

-

（Algorithm）一个 leetcode 的算法题

-

（Review）阅读并点评至少一篇英文技术文章

-

（Technique）学习至少一个技术技巧

-

（Share ）分享一篇有观点和思考的技术文章

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 终？ | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

终？ + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

+

时日如飞，三个月的时间即将而至，我的实习也到了尾声。

+

这段时间很快，比我刚开始想象的快多了，我也如愿以偿的逃离了想逃离的东西。

+

没有鸡汤 just for fun

+ +

二维码

二维码的生成细节和原理

+

【科普文】二维码的[生成]和[扫码]

+

两个思考：

+

为啥几乎都是黑白色的

+

二维码中间有图片为啥还能用

+

fontface 小图标

看到 fontfamily：”wbficonregular” !important; ？？？黑人问号脸，这是啥啊

+

font-face

+

vue 事件修饰符

修饰符是可以串联的

+
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
+

Git 工作流

Git协同工作流

这段时间写的线上代码多了些，对 git 使用也有了一个更深的了解

+

中心式协同工作流

+

这应该是自己一个人敲代码的时候最常使用的方式了，他就像 svn 一样

+
    +
  • git pull origin master 先同步远程代码
    • +
  • 修改后 git commit
    • +
  • git push origin master 到远程这样其他同学就可以看到你的代码了
    • +
+

但是第三不在多人合作下是有可能 push 失败，因为别人提交了，你需要 git pull

+
    +
  • 先把本地提交的代码放在一边
    • +
  • 下载服务器的改动
    • +
  • 把之前的改动与新的改动一个个 commit
    • +
+

有冲突你必须先解决冲突

+

功能分支协同工作流

上面的方法是可行的，可是这几天写代码我也是感到了痛苦。如果项目的人再多一点我觉得很有可能是要出问题的。对代码的干扰相当严重。因此有了功能分支，像我就把新需求群二维码就拉了一个 qrcode

+
    +
  • git checkout -b qrcode
    • +
  • 共同开发这个功能的程序员就在这分支工作，add，commit
    • +
  • git push -u orgin qrcode
    • +
  • git pull –rebase 其他程序员来拿到分支的代码
    • +
+

我觉得开发的时候能提交就尽快提交，不然太久可能冲突就太多了。。。

+

GitFlow 协同工作流

在不停开发新代码的同时，维护线上代码中

+
    +
  • 我们需要一个分支是干净的，可以发布代码，是可以发布到生产环境的
    • +
+

我之前有一个分支就是可以直接到测试环境的，然后写代码就一直在那个分支写，后面只上部分功能的时候就傻了。自己手里就没有了一个可以发布代码的测试环境。。。管理好代码的一致性还是非常重要的

+

+

我只是希望我是右边。。。对 git 的理解还是太浅了。。。

+

代码规范

当拿到 webchat 提交几次代码我就深深体会到代码团队规范多么重要，之前的还把 eslint 禁用了。。。

+

计划

ARTS 每周完成一次

+

（Algorithm）一个 leetcode 的算法题

+

（Review）阅读并点评至少一篇英文技术文章

+

（Technique）学习至少一个技术技巧

+

（Share ）分享一篇有观点和思考的技术文章

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/2019/05/10/\344\270\244\344\270\252\351\201\227\347\225\231\345\210\206\346\224\257/index.html" "b/2019/05/10/\344\270\244\344\270\252\351\201\227\347\225\231\345\210\206\346\224\257/index.html" deleted file mode 100644 index 3c308cba..00000000 --- "a/2019/05/10/\344\270\244\344\270\252\351\201\227\347\225\231\345\210\206\346\224\257/index.html" +++ /dev/null @@ -1,898 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

- - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

qrcode 分支

需求:私信拉粉丝群 功能已实现但设计稿不详

-

card2 判断是否为为未加群逻辑

card2 都是解析连接的

-

先判断该链接是否为群

-

//判断是否是群链 群连接 weibo.com/p/230491${群id}

-

为群再使用群id获取群成员列表遍历是否在该群中，不在该群便弹出二维码。

-

添加了 modal4

主要是二维码的模态框

-

​ * 二维码配置

-

​ * 详情见 https://github.com/davidshimjs/qrcodejs

-

​ * npm i qrcodejs2 https://www.npmjs.com/package/qrcodejs2

-

vux 添加

qrcode: ‘’, *//群二维码

-
1
2
3
4
5
6
7
//操作二维码(qrcode)
exqrcode(state, val) {
	state.qrcode = val;
},
emptyqrcode(state) {
	state.qrcode = null;
},
-

sync_double 分支

需求：新消息提醒联动

-

1、群消息免打扰

-

1-1 群消息免打扰功能，Web和App进行设置两边数据同步。【完成1】

-

1-2 右键出现气泡，气泡第一条：“查看群资料”，点击打开群信息弹窗，第二条：“群消息免打扰”/“打开群消息通知”，第三条“删除对话”，和线上逻辑一致。【完成1】

-

1-3 若点击“查看群资料”，回默认切换至当前聊天室，然后打开当前群的群资料弹窗。【完成1】

-

1-4 设置为“群消息免打扰”后，userlist第二条栏目显示规则：

-

[x条未读]+最新的一条消息+橙点（没有未读时显示免打扰icon【此icon还未使用最新设计稿icon】）【完成0.8】

-

2、群消息免打扰功能【调整icon位置及大小未作】【完成0】

-

3、群标题文案

-

3-1 群标题文案位置左移，UI上需要调整。【完成1】

-

3-2 鼠标碰到当前区域，鼠标变成手指icon。【完成1】

-

4、原关闭该群提醒功能【完成0】

-

双端消息同步

屏蔽消息状态码不在 pc/mobile 分开，都是用 mobile 的状态码

-

所以第一次渲染 chatlist 时所拿取的信息的是 mobile 的

-
1
2
3
4
export const getchatlist = obj => { 
 //获取聊天列表 special_source 标记请求来源 默认为 0 手机端 3
	return axios.get(`/webim/2/direct_messages/contacts.json?special_source=3`, obj).then(res => res.data);
};
-

手机端修改

一旦手机端修改是否屏蔽的状态会有下推

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
else if (type == 'groupchat_remind_settings') { //群消息免打扰双端同步
    let {
        list,
        i
    } = this.listHandle(cometdMsg.gid);
    this.$store.commit('update' + list, { //更改chatlist  此时不置顶联系人
        notTop: true,
        i,
        param: {
            remindSetting: cometdMsg.settings.mobile
        }
    });
    this.cgProcessPoll(); //结束当前消息处理
}
-

根据其id判断在列表的位置并修改屏蔽状态

-

pc 端修改

一旦pc修改需要通知移动端修改

-
1
2
3
4
5
6
export const setnotice = obj => { //更改用户私信群设置
	return axios.post(`/webim/2/notice_center/discussion_group/set_push_settings.json`, qs.stringify(obj)).then(res => res.data);
	//	return axios.post(`/webim/groupchat/update_user_settings.json`, qs.stringify(obj)).then(res => res.data);
};
//switch	 提醒设置，1：关闭；2：打开；3：屏蔽
//call_from pc:表示更改PC端私信群提醒设置 mobile 手机端
-

所以全局搜 setnotice 修改参数就好了

-

查看群/个人资料

若点击“查看群资料”，默认切换至当前聊天室，然后打开当前群的群资料弹窗。

-

当前是否选折了查看的的用户

-
    -

  • 已选折正常逻辑

    -
    1
    2
    this.$parent.$refs.cardcontaininfo.curView = "modal2")//群
    this.showUserInfo(0, 3)//人
    -
    • -

  • 未选折需要先选择同时注意时机问题

    -
      -

    • 群没事，由于群是根据存储在 vux selectid 进行渲染而在选折时就已经修改了 selectid

      -
      • -

    • 个人用户就需要注意时机问题，不然可能导致查看的资料是之前选取那个人的 usercardinfo，由于会重新渲染 message.vue, 而showUserInfo（） 的显示信息是根据 usercardinfo 获取的，但是 usercardinfo 的修改并不是一修改 slectedid 就会改变的，他的促发条件是聊天记录。这个时候我用的 eventbus

      -
      1
      2
      3
      this.$store.commit('fillusercardinfo', other);
      Bus.$emit('newUserCard');
      //一旦修改 usercardinfo 代表着可以去展示用户资料了
      • -
    -
    • -
- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - - -
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git "a/2019/05/19/Arts\357\274\210\344\270\200\357\274\211/index.html" "b/2019/05/19/Arts\357\274\210\344\270\200\357\274\211/index.html" index dc05e86a..7ca5e950 100644 --- "a/2019/05/19/Arts\357\274\210\344\270\200\357\274\211/index.html" +++ "b/2019/05/19/Arts\357\274\210\344\270\200\357\274\211/index.html" @@ -1,942 +1,604 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Arts（一） | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

Arts（一） - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - -

-

Algorithm

Add Two Numbers、

-

Review

Virtual DOM is pure overhead

-

Virtual DOM is pure overhead

Let’s retire the ‘virtual DOM is fast’ myth once and for all

-

虚拟DOM是纯粹的开销

-

让我们一劳永逸地退出“虚拟DOM是快的”的神话

- -

If you’ve used JavaScript frameworks in the last few years, you’ve probably heard the phrase ‘the virtual DOM is fast’, often said to mean that it’s faster than the real DOM. It’s a surprisingly resilient meme — for example people have asked how Svelte can be fast when it doesn’t use a virtual DOM.

-

It’s time to take a closer look.

-

如果在过去几年里使用过 Javascript 框架，那么你可能已经听过 “虚拟 DOM 是快速的” 这一说法了，通常被认为着他比真正的 DOM 更快。这是一种令人惊讶的 meme——例如人们会问为啥 Svelte（一种前端框架）能够快而不使用虚拟 DOM

-

What is the virtual DOM?

In many frameworks, you build an app by creating render() functions, like this simple Reactcomponent:

-
1
2
3
4
5
6
7
function HelloMessage(props) {
  return (
    <div className="greeting">
      Hello {props.name}
    </div>
  );
}
-

You can do the same thing without JSX…

-
1
2
3
4
5
6
7
8
function HelloMessage(props) {
  return React.createElement(
    'div',
    { className: 'greeting' },
    'Hello ',
    props.name
  );
}
-

…but the result is the same — an object representing how the page should now look. That object is the virtual DOM. Every time your app’s state updates (for example when the name prop changes), you create a new one. The framework’s job is to reconcile the new one against the old one, to figure out what changes are necessary and apply them to the real DOM.

-

什么是虚拟 DOM

在许多的框架，你可以使用 render() 函数来构建应用，比如简单的 react 组件

-
1
2
3
4
5
6
7
function HelloMessage(props) {
  return (
    <div className="greeting">
      Hello {props.name}
    </div>
  );
}
-

你也可以不使用 JSX 达到目的

-
1
2
3
4
5
6
7
8
function HelloMessage(props) {
  return React.createElement(
    'div',
    { className: 'greeting' },
    'Hello ',
    props.name
  );
}
-

但他们结果是一样的——是一个对象表示页面该如何去渲染。这个对象就是虚拟 DOM。每一次你页面状态进行更新（比如当 props 中的 name 发生改变），你都需要重新渲染。框架的工作就是找到新旧之间真正有必要去改变的地方并应用在真实 DOM 上。

-

How did the meme start?

Misunderstood claims about virtual DOM performance date back to the launch of React. In Rethinking Best Practices, a seminal 2013 talk by former React core team member Pete Hunt, we learned the following:

-
-

This is actually extremely fast, primarily because most DOM operations tend to be slow. There’s been a lot of performance work on the DOM, but most DOM operations tend to drop frames.

-
-

meme 是如何开始的

对虚拟 DOM 的性能误解可以追溯到 React。 在 Rethinking Best Practices 中，前React核心团队成员Pete Hunt在2013年的开创性讲话中，我们学到了以下内容：

-
-

这实际上非常快，主要是因为大多数 DOM 操作往往很慢。DOM 上有很多性能工作，但大多数 DOM 操作都会丢帧。

-
-

But hang on a minute! The virtual DOM operations are in addition to the eventual operations on the real DOM. The only way it could be faster is if we were comparing it to a less efficient framework (there were plenty to go around back in 2013!), or arguing against a straw man — that the alternative is to do something no-one actually does:

-
1
2
3
onEveryStateChange(() => {
  document.body.innerHTML = renderMyApp();
});
-

但是等一下！虚拟 DOM 操作是对真实 DOM 上的最终操作的补充。它可能更快的唯一方法是，如果我们将它与一个效率较低的框架进行比较（2013年还有很多这样的框架），或者反对一个稻草人 ——一种选择做一些没有人实际做的事情：

-
1
2
3
onEveryStateChange(() => {
  document.body.innerHTML = renderMyApp();
});
-

Pete clarifies soon after…

-
-

React is not magic. Just like you can drop into assembler with C and beat the C compiler, you can drop into raw DOM operations and DOM API calls and beat React if you wanted to. However, using C or Java or JavaScript is an order of magnitude performance improvement because you don’t have to worry…about the specifics of the platform. With React you can build applications without even thinking about performance and the default state is fast.

-
-

…but that’s not the part that stuck.

-

Pete 很快就澄清了

-
-

React 并不神奇。就像你可以使用 C 进入汇编程序并击败 C 编译器一样，如果你愿意，你可以放入原始 DOM 操作和 DOM API 调用并击败 React。但是，使用 C 或 Java 或 JavaScript 是一个数量级的性能提升，因为您不必担心…框架的细节。使用 React，您甚至可以在不考虑性能的情况下构建应用程序，并且默认状态很快。

-
-

…..但那不是卡住的部分。

-

So… is the virtual DOM slow?

Not exactly. It’s more like ‘the virtual DOM is usually fast enough’, but with certain caveats.

-

The original promise of React was that you could re-render your entire app on every single state change without worrying about performance. In practice, I don’t think that’s turned out to be accurate. If it was, there’d be no need for optimisations like shouldComponentUpdate (which is a way of telling React when it can safely skip a component).

-

Even with shouldComponentUpdate, updating your entire app’s virtual DOM in one go is a lot of work. A while back, the React team introduced something called React Fiber which allows the update to be broken into smaller chunks. This means (among other things) that updates don’t block the main thread for long periods of time, though it doesn’t reduce the total amount of work or the time an update takes.

-

所以，虚拟 DOM 是慢的？

不完全是。它更像是“虚拟DOM通常足够快”，但有一些注意事项。

-

React的最初承诺是，您可以在每次状态更改时重新呈现整个应用程序，而无需担心性能。在实践中，我认为这不是准确的。如果是的话，就不需要像 shouldComponentUpdate 这样的优化（这是一种告诉 React 什么时候可以安全跳过组件的方法）。

-

即使使用 shouldComponentUpdate，一次性更新整个应用程序的虚拟DOM也需要做很多工作。不久前，React 团队推出了一种叫做 React Fiber 的东西，它允许将更新分解成更小的块。这意味着（除其他外）更新不会长时间阻塞主线程，尽管它不会减少工作总量或更新所需的时间。

-

Where does the overhead come from?

Most obviously, diffing isn’t free. You can’t apply changes to the real DOM without first comparing the new virtual DOM with the previous snapshot. To take the earlier HelloMessage example, suppose the name prop changed from ‘world’ to ‘everybody’.

-
    -
  1. Both snapshots contain a single element. In both cases it’s a <div>, which means we can keep the same DOM node
    2. -
  2. We enumerate all the attributes on the old <div> and the new one to see if any need to be changed, added or removed. In both cases we have a single attribute — a classNamewith a value of "greeting"
    3. -
  3. Descending into the element, we see that the text has changed, so we’ll need to update the real DOM
    4. -
-

Of these three steps, only the third has value in this case, since — as is the case in the vast majority of updates — the basic structure of the app is unchanged. It would be much more efficient if we could skip straight to step 3:

-
1
2
3
if (changed.name) {
  text.data = name;
}
-

(This is almost exactly the update code that Svelte generates. Unlike traditional UI frameworks, Svelte is a compiler that knows at build time how things could change in your app, rather than waiting to do the work at run time.)

-

开销来自哪里？

最明显的是，diffing isn’t free。如果不先将新虚拟 DOM与 之前的快照进行比较，则无法对真实DOM应用更改。要采用早期的 HelloMessage 示例，假设名称prop从 “world” 更改为 “everybody”。

-
    -
  1. 两个快照都包含一个元素。在这两种情况下，它都是 <div>，这意味着我们可以保持相同的 DOM 节点
    2. -
  2. 我们枚举旧 <div> 和新的属性上的所有属性，以查看是否需要更改，添加或删除任何属性。
    3. -
  3. 在这两种情况下，我们都有一个属性一个 className，其值为 “greeting” 下降到元素，我们看到文本已经改变，所以我们需要更新真正的 DOM
    4. -
-

在这三个步骤中，只有第三个步骤在这种情况下具有价值，因为 - 绝大多数更新中的情况 - 应用程序的基本结构不变。如果我们可以直接跳到第3步，那将会更有效率。

-

这几乎就是 Svelte 生成的更新代码。与传统的UI框架不同，Svelte 是一个编译器，它在构建时知道应用程序中的内容如何变化，而不是等待在运行时进行工作。

-

It’s not just the diffing though

The diffing algorithms used by React and other virtual DOM frameworks are fast. Arguably, the greater overhead is in the components themselves. You wouldn’t write code like this…

-
1
2
3
4
5
6
7
function StrawManComponent(props) {
  const value = expensivelyCalculateValue(props.foo);
  return (
    <p>the value is {value}</p>
  );
}
-

…because you’d be carelessly recalculating value on every update, regardless of whether props.foohad changed. But it’s extremely common to do unnecessary computation and allocation in ways that seem much more benign:

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function MoreRealisticComponent(props) {
  const [selected, setSelected] = useState(null);
  return (
    <div>
      <p>Selected {selected ? selected.name : 'nothing'}</p>
      <ul>
        {props.items.map(item =>
          <li>
            <button onClick={() => setSelected(item)}>
              {item.name}
            </button>
          </li>
        )}
      </ul>
    </div>
  );
}
-

Here, we’re generating a new array of virtual <li> elements — each with their own inline event handler — on every state change, regardless of whether props.items has changed. Unless you’re unhealthily obsessed with performance, you’re not going to optimise that. There’s no point. It’s plenty fast enough. But you know what would be even faster? Not doing that.

-

这不仅仅是差异

React 和其他虚拟 DOM 框架使用的差异算法很快。可以说，组件本身的开销更大。你不会写这样的代码……

-
1
2
3
4
5
6
7
function StrawManComponent(props) {
  const value = expensivelyCalculateValue(props.foo);
  return (
    <p>the value is {value}</p>
  );
}
-

因为无论 props.foo 是否已更改，您都会在每次更新时不小心重新计算值。但是以不同的方式进行不必要的计算和分配是非常常见的：

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function MoreRealisticComponent(props) {
  const [selected, setSelected] = useState(null);
  return (
    <div>
      <p>Selected {selected ? selected.name : 'nothing'}</p>
      <ul>
        {props.items.map(item =>
          <li>
            <button onClick={() => setSelected(item)}>
              {item.name}
            </button>
          </li>
        )}
      </ul>
    </div>
  );
}
-

在这里，无论 props.items 是否发生了变化，我们都会在每次状态更改时生成一个新的虚拟 <li> 元素数组 - 每个元素都有自己的内联事件处理程序。除非你不熟悉性能，否则你不会优化它。毫无意义。它足够快。但你知道什么会更快吗？不这样做。

-

The danger of defaulting to doing unnecessary work, even if that work is trivial, is that your app will eventually succumb to ‘death by a thousand cuts’ with no clear bottleneck to aim at once it’s time to optimise.

-

Svelte is explicitly designed to prevent you from ending up in that situation.

-

做不必要的工作默认是危险的，即使这项工作是微不足道的，你的应用程序最终会屈服于“千人减少死亡”，没有明确的瓶颈，无法一次性瞄准优化。Svelte 明确旨在防止您在这种情况下结束。

-

Why do frameworks use the virtual DOM then?

It’s important to understand that virtual DOM isn’t a feature. It’s a means to an end, the end being declarative, state-driven UI development. Virtual DOM is valuable because it allows you to build apps without thinking about state transitions, with performance that is generally good enough. That means less buggy code, and more time spent on creative tasks instead of tedious ones.

-

But it turns out that we can achieve a similar programming model without using virtual DOM — and that’s where Svelte comes in.

-

为什么框架会使用虚拟 DOM 呢？

了解虚拟 DOM 不是一项特性非常重要。它是达到目的的手段，最终是声明性的，由状态驱动的 UI 开发。虚拟 DOM 很有价值，因为它允许您在不考虑状态转换的情况下构建应用程序，其性能通常足够好。这意味着更少的错误代码，更多的时间花在创造性任务而不是乏味的任务上。但事实证明，我们可以在不使用虚拟 DOM 的情况下实现类似的编程模型 - 这就是 Svelte 的用武之地。

-

Technique

Share

《Don’t make me think》读书笔记

- - -
- - - - - - - - - - -
-
-
棒棒糖
- - -
- -
- - - - -
- -
- - - -
- - - - - - - -
-
- - - -
- - - -
- -
-
- - - - -
-
- - - -
- - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Arts（一） | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

Arts（一） + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

+

Algorithm

Add Two Numbers、

+

Review

Virtual DOM is pure overhead

+

Virtual DOM is pure overhead

Let’s retire the ‘virtual DOM is fast’ myth once and for all

+

虚拟DOM是纯粹的开销

+

让我们一劳永逸地退出“虚拟DOM是快的”的神话

+ +

If you’ve used JavaScript frameworks in the last few years, you’ve probably heard the phrase ‘the virtual DOM is fast’, often said to mean that it’s faster than the real DOM. It’s a surprisingly resilient meme — for example people have asked how Svelte can be fast when it doesn’t use a virtual DOM.

+

It’s time to take a closer look.

+

如果在过去几年里使用过 Javascript 框架，那么你可能已经听过 “虚拟 DOM 是快速的” 这一说法了，通常被认为着他比真正的 DOM 更快。这是一种令人惊讶的 meme——例如人们会问为啥 Svelte（一种前端框架）能够快而不使用虚拟 DOM

+

What is the virtual DOM?

In many frameworks, you build an app by creating render() functions, like this simple Reactcomponent:

+
1
2
3
4
5
6
7
function HelloMessage(props) {
  return (
    <div className="greeting">
      Hello {props.name}
    </div>
  );
}
+

You can do the same thing without JSX…

+
1
2
3
4
5
6
7
8
function HelloMessage(props) {
  return React.createElement(
    'div',
    { className: 'greeting' },
    'Hello ',
    props.name
  );
}
+

…but the result is the same — an object representing how the page should now look. That object is the virtual DOM. Every time your app’s state updates (for example when the name prop changes), you create a new one. The framework’s job is to reconcile the new one against the old one, to figure out what changes are necessary and apply them to the real DOM.

+

什么是虚拟 DOM

在许多的框架，你可以使用 render() 函数来构建应用，比如简单的 react 组件

+
1
2
3
4
5
6
7
function HelloMessage(props) {
  return (
    <div className="greeting">
      Hello {props.name}
    </div>
  );
}
+

你也可以不使用 JSX 达到目的

+
1
2
3
4
5
6
7
8
function HelloMessage(props) {
  return React.createElement(
    'div',
    { className: 'greeting' },
    'Hello ',
    props.name
  );
}
+

但他们结果是一样的——是一个对象表示页面该如何去渲染。这个对象就是虚拟 DOM。每一次你页面状态进行更新（比如当 props 中的 name 发生改变），你都需要重新渲染。框架的工作就是找到新旧之间真正有必要去改变的地方并应用在真实 DOM 上。

+

How did the meme start?

Misunderstood claims about virtual DOM performance date back to the launch of React. In Rethinking Best Practices, a seminal 2013 talk by former React core team member Pete Hunt, we learned the following:

+
+

This is actually extremely fast, primarily because most DOM operations tend to be slow. There’s been a lot of performance work on the DOM, but most DOM operations tend to drop frames.

+
+

meme 是如何开始的

对虚拟 DOM 的性能误解可以追溯到 React。 在 Rethinking Best Practices 中，前React核心团队成员Pete Hunt在2013年的开创性讲话中，我们学到了以下内容：

+
+

这实际上非常快，主要是因为大多数 DOM 操作往往很慢。DOM 上有很多性能工作，但大多数 DOM 操作都会丢帧。

+
+

But hang on a minute! The virtual DOM operations are in addition to the eventual operations on the real DOM. The only way it could be faster is if we were comparing it to a less efficient framework (there were plenty to go around back in 2013!), or arguing against a straw man — that the alternative is to do something no-one actually does:

+
1
2
3
onEveryStateChange(() => {
  document.body.innerHTML = renderMyApp();
});
+

但是等一下！虚拟 DOM 操作是对真实 DOM 上的最终操作的补充。它可能更快的唯一方法是，如果我们将它与一个效率较低的框架进行比较（2013年还有很多这样的框架），或者反对一个稻草人 ——一种选择做一些没有人实际做的事情：

+
1
2
3
onEveryStateChange(() => {
  document.body.innerHTML = renderMyApp();
});
+

Pete clarifies soon after…

+
+

React is not magic. Just like you can drop into assembler with C and beat the C compiler, you can drop into raw DOM operations and DOM API calls and beat React if you wanted to. However, using C or Java or JavaScript is an order of magnitude performance improvement because you don’t have to worry…about the specifics of the platform. With React you can build applications without even thinking about performance and the default state is fast.

+
+

…but that’s not the part that stuck.

+

Pete 很快就澄清了

+
+

React 并不神奇。就像你可以使用 C 进入汇编程序并击败 C 编译器一样，如果你愿意，你可以放入原始 DOM 操作和 DOM API 调用并击败 React。但是，使用 C 或 Java 或 JavaScript 是一个数量级的性能提升，因为您不必担心…框架的细节。使用 React，您甚至可以在不考虑性能的情况下构建应用程序，并且默认状态很快。

+
+

…..但那不是卡住的部分。

+

So… is the virtual DOM slow?

Not exactly. It’s more like ‘the virtual DOM is usually fast enough’, but with certain caveats.

+

The original promise of React was that you could re-render your entire app on every single state change without worrying about performance. In practice, I don’t think that’s turned out to be accurate. If it was, there’d be no need for optimisations like shouldComponentUpdate (which is a way of telling React when it can safely skip a component).

+

Even with shouldComponentUpdate, updating your entire app’s virtual DOM in one go is a lot of work. A while back, the React team introduced something called React Fiber which allows the update to be broken into smaller chunks. This means (among other things) that updates don’t block the main thread for long periods of time, though it doesn’t reduce the total amount of work or the time an update takes.

+

所以，虚拟 DOM 是慢的？

不完全是。它更像是“虚拟DOM通常足够快”，但有一些注意事项。

+

React的最初承诺是，您可以在每次状态更改时重新呈现整个应用程序，而无需担心性能。在实践中，我认为这不是准确的。如果是的话，就不需要像 shouldComponentUpdate 这样的优化（这是一种告诉 React 什么时候可以安全跳过组件的方法）。

+

即使使用 shouldComponentUpdate，一次性更新整个应用程序的虚拟DOM也需要做很多工作。不久前，React 团队推出了一种叫做 React Fiber 的东西，它允许将更新分解成更小的块。这意味着（除其他外）更新不会长时间阻塞主线程，尽管它不会减少工作总量或更新所需的时间。

+

Where does the overhead come from?

Most obviously, diffing isn’t free. You can’t apply changes to the real DOM without first comparing the new virtual DOM with the previous snapshot. To take the earlier HelloMessage example, suppose the name prop changed from ‘world’ to ‘everybody’.

+
    +
  1. Both snapshots contain a single element. In both cases it’s a <div>, which means we can keep the same DOM node
    2. +
  2. We enumerate all the attributes on the old <div> and the new one to see if any need to be changed, added or removed. In both cases we have a single attribute — a classNamewith a value of "greeting"
    3. +
  3. Descending into the element, we see that the text has changed, so we’ll need to update the real DOM
    4. +
+

Of these three steps, only the third has value in this case, since — as is the case in the vast majority of updates — the basic structure of the app is unchanged. It would be much more efficient if we could skip straight to step 3:

+
1
2
3
if (changed.name) {
  text.data = name;
}
+

(This is almost exactly the update code that Svelte generates. Unlike traditional UI frameworks, Svelte is a compiler that knows at build time how things could change in your app, rather than waiting to do the work at run time.)

+

开销来自哪里？

最明显的是，diffing isn’t free。如果不先将新虚拟 DOM与 之前的快照进行比较，则无法对真实DOM应用更改。要采用早期的 HelloMessage 示例，假设名称prop从 “world” 更改为 “everybody”。

+
    +
  1. 两个快照都包含一个元素。在这两种情况下，它都是 <div>，这意味着我们可以保持相同的 DOM 节点
    2. +
  2. 我们枚举旧 <div> 和新的属性上的所有属性，以查看是否需要更改，添加或删除任何属性。
    3. +
  3. 在这两种情况下，我们都有一个属性一个 className，其值为 “greeting” 下降到元素，我们看到文本已经改变，所以我们需要更新真正的 DOM
    4. +
+

在这三个步骤中，只有第三个步骤在这种情况下具有价值，因为 - 绝大多数更新中的情况 - 应用程序的基本结构不变。如果我们可以直接跳到第3步，那将会更有效率。

+

这几乎就是 Svelte 生成的更新代码。与传统的UI框架不同，Svelte 是一个编译器，它在构建时知道应用程序中的内容如何变化，而不是等待在运行时进行工作。

+

It’s not just the diffing though

The diffing algorithms used by React and other virtual DOM frameworks are fast. Arguably, the greater overhead is in the components themselves. You wouldn’t write code like this…

+
1
2
3
4
5
6
7
function StrawManComponent(props) {
  const value = expensivelyCalculateValue(props.foo);

  return (
    <p>the value is {value}</p>
  );
}
+

…because you’d be carelessly recalculating value on every update, regardless of whether props.foohad changed. But it’s extremely common to do unnecessary computation and allocation in ways that seem much more benign:

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function MoreRealisticComponent(props) {
  const [selected, setSelected] = useState(null);

  return (
    <div>
      <p>Selected {selected ? selected.name : 'nothing'}</p>

      <ul>
        {props.items.map(item =>
          <li>
            <button onClick={() => setSelected(item)}>
              {item.name}
            </button>
          </li>
        )}
      </ul>
    </div>
  );
}
+

Here, we’re generating a new array of virtual <li> elements — each with their own inline event handler — on every state change, regardless of whether props.items has changed. Unless you’re unhealthily obsessed with performance, you’re not going to optimise that. There’s no point. It’s plenty fast enough. But you know what would be even faster? Not doing that.

+

这不仅仅是差异

React 和其他虚拟 DOM 框架使用的差异算法很快。可以说，组件本身的开销更大。你不会写这样的代码……

+
1
2
3
4
5
6
7
function StrawManComponent(props) {
  const value = expensivelyCalculateValue(props.foo);

  return (
    <p>the value is {value}</p>
  );
}
+

因为无论 props.foo 是否已更改，您都会在每次更新时不小心重新计算值。但是以不同的方式进行不必要的计算和分配是非常常见的：

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function MoreRealisticComponent(props) {
  const [selected, setSelected] = useState(null);

  return (
    <div>
      <p>Selected {selected ? selected.name : 'nothing'}</p>

      <ul>
        {props.items.map(item =>
          <li>
            <button onClick={() => setSelected(item)}>
              {item.name}
            </button>
          </li>
        )}
      </ul>
    </div>
  );
}
+

在这里，无论 props.items 是否发生了变化，我们都会在每次状态更改时生成一个新的虚拟 <li> 元素数组 - 每个元素都有自己的内联事件处理程序。除非你不熟悉性能，否则你不会优化它。毫无意义。它足够快。但你知道什么会更快吗？不这样做。

+

The danger of defaulting to doing unnecessary work, even if that work is trivial, is that your app will eventually succumb to ‘death by a thousand cuts’ with no clear bottleneck to aim at once it’s time to optimise.

+

Svelte is explicitly designed to prevent you from ending up in that situation.

+

做不必要的工作默认是危险的，即使这项工作是微不足道的，你的应用程序最终会屈服于“千人减少死亡”，没有明确的瓶颈，无法一次性瞄准优化。Svelte 明确旨在防止您在这种情况下结束。

+

Why do frameworks use the virtual DOM then?

It’s important to understand that virtual DOM isn’t a feature. It’s a means to an end, the end being declarative, state-driven UI development. Virtual DOM is valuable because it allows you to build apps without thinking about state transitions, with performance that is generally good enough. That means less buggy code, and more time spent on creative tasks instead of tedious ones.

+

But it turns out that we can achieve a similar programming model without using virtual DOM — and that’s where Svelte comes in.

+

为什么框架会使用虚拟 DOM 呢？

了解虚拟 DOM 不是一项特性非常重要。它是达到目的的手段，最终是声明性的，由状态驱动的 UI 开发。虚拟 DOM 很有价值，因为它允许您在不考虑状态转换的情况下构建应用程序，其性能通常足够好。这意味着更少的错误代码，更多的时间花在创造性任务而不是乏味的任务上。但事实证明，我们可以在不使用虚拟 DOM 的情况下实现类似的编程模型 - 这就是 Svelte 的用武之地。

+

Technique

Share

《Don’t make me think》读书笔记

+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/2019/09/15/\351\232\217\347\254\224/index.html" "b/2019/09/15/\351\232\217\347\254\224/index.html" new file mode 100644 index 00000000..cf364f1f --- /dev/null +++ "b/2019/09/15/\351\232\217\347\254\224/index.html" @@ -0,0 +1,542 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 随笔 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

随笔 + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + +
+
+ + + + +
+ + +

不知不觉工作的时间已将近三个月了，公司的培训也结束，已经标志着自己的职场生涯的游戏拉开了序幕。自己感觉自己早已习惯工作的节奏，但是状态并不好，想的很多，做的却很少。曾经想的坚持

+
    +
  • 锻炼
    • +
  • 技术笔记
    • +
  • 读书（书倒是买了不少，看的话就是个笑话）
    • +
  • 随笔
    • +
  • 给父母的电话
    • +
+

……

+ +

都没有坚持下来，到是

+
    +
  • 抽烟喝酒
    • +
  • 电视剧
    • +
  • 游戏
    • +
+

……

+

这些东西可是没停过，活成了自己最舒（tui）适（fei）的状态……

+

你在想象中总是天马行空，信誓旦旦，说出的话也是如此动听。可是行走的时候的你将自己变成了一个懦夫，你的梦想与现实差的实在有点遥远。年少的你想像的 23 岁可曾是这个样子么，我想你自己知道自己想要的，知道厌恶什么，知道自己爱什么，所以活成自己最好的自己吧，警醒自己定要慎独，大嘴巴请你少说多想多做，看到别人身上的闪光点，也许你厌恶它，但是你知道你不得不接受它，这样的你能更加的理性去看待问题。要有的不仅仅是细心，更要有的是心胸，技术除了做技术更多的时候是和人去做协调，解决问题才是首要的。

+

工作上让自己觉得捉襟见肘的应该是排期吧，从自己的角度看自己觉得自己做得并不好，还有就是工作的时候看到了一些知识点搜索后自己的记录并不充足，很多可以做笔记的自己都没有做好记录，这是自己现阶段最后悔的事了。平常和同事感觉自己总是唧唧歪歪的话多……希望不被他们打吧。感觉同事和老大人都超级棒，这是我来到北方工作最最满意的事了，所以自己做好手上的事吧。公司培训的时候也认识了很多的有意思的人。还有感觉能够成为很好朋友的人，遇见本就是一种缘分，so nice。

+

这几个月有三件很神奇的事，我同学给我介绍了一个她的女闺蜜……我突然感觉这就像梦幻一样，这事也能出现在我身上？看来是我一般表现得还不够傻逼哈哈哈，但是他在成都也，忒远了，我感觉自己是不会回成都的，我该如何说我们可以做朋友（男女做朋友……想到了《当哈利遇上莎莉》）。还有就是公司培训的时候我喜欢上了一个像精灵般一样的女孩，她的眼睛真好看,一举一动就好像如梦如幻，带着魔力的女孩，感觉魂牵梦萦哈哈哈尽管当时才认识了一晚上，比较傻逼的就是自己了，约出来喝酒，她和我说了她有男友我特么还给她说了我喜欢她（qnm的一见钟情），我这是有多直，不过没有啥尴尬感，哈哈我脸皮越来越厚了。还有就是我的考研同学说她去检查后结果不好可能要放弃考研了，当时我人都蒙了，后面她不相信换了一家医院第二次检查结果没什么不需要住院，😁相信她会好好的吧，感觉这些都是很有意思的经历吧，自己慢慢的调整状态吧。

+

回看这几个月，有不少遗憾，但仍充满欢笑，在苦中的甘甜总会让人记忆犹新。但是对于生活不轻松的东西自己不在应该得过且过，该坚持的坚持，说的漂亮的也需要做的漂亮。你自己懂得

+
    +
  • 锻炼
    • +
  • 技术笔记
    • +
  • 读书（书倒是买了不少，看的话就是个笑话）
    • +
  • 随笔
    • +
  • 给父母的电话
    • +
+
+

黑色的不是夜晚 是漫长的孤单
看脚下一片黑暗 望头顶星光璀璨
叹世万物皆可盼 唯真爱最短暂
失去的永不复返 世守恒而今倍还
刺猬

+
+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2019/10/01/typescript01/index.html b/2019/10/01/typescript01/index.html new file mode 100644 index 00000000..18445fe1 --- /dev/null +++ b/2019/10/01/typescript01/index.html @@ -0,0 +1,556 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + typescript(基础类型) | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

typescript(基础类型) + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +


参考 TypeScript Handbook（中文版）

+

布尔值 boolean

1
let handle: boolean = false;
+

数值 number

二进制/八进制/十六进制/十进制

1
let count: number = 10;

+ +

字符串 string

可使用’/“/`

1
2
let name: string = 'laoWang';
let contact: string = `hi, my name is ${ name }`

+

数组 array

    +
  • 元素类型后接 []
    • +
+
1
2
let list: number[] = [1, 2, 3];
let list: string[] = ['a', 'b'];
+
    +
  • 数组泛型， Array<number|string|boolean>
    • +
+
1
let list: Array<boolean> = [false, true, false];
+

元组 tuple

简洁的说他就是能够存储多类型的数组但是得按照类型申明时后的给出

+
1
let arr: [string, number] = ['love', 70];
+

当访问越界元素，会使用联合类型代替。

+

枚举 enum

为一组数值赋予美好的名字

+
1
2
3
enum Animal {Cat, Dog, Fox}
let a: Animal = Animal.Cat;
let animalName: string = Animal[2];
+

任意值 any

对于第三方库，及不想被检查的时候使用

+
1
2
3
4
5
let num: any = '222';
num = 12;
num = false;

let list: any[] = [1, '22', false];
+

空值 void

1
2
3
4
5
6
function justlog(): void{
  console.log('sb');
}

let uu: void = undefined;
let nn: void = null;
+

null, undefined

+

默认情况下 null 和 undefined 是所有类型的子类型。 就是说你可以把 null 和 undefined 赋值给 number 类型的变量。
然而，当你指定了 –strictNullChecks 标记，null 和 undefined 只能赋值给 void 和它们各自。 这能避免很多常见的问题。 也许在某处你想传入一个 string 或 null 或 undefined，你可以使用联合类型 string | null | undefined

+
+

never

never 表示那些永不存在的类型

+

是任何类型的子类

+

nerver 可以赋值给任何类型

+

任何类型包括 any 都不能赋值给 never

+

看例子大多用在 error

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function error(message: string): never {
    throw new Error(message);
}

// 推断的返回值类型为never
function fail() {
    return error("Something failed");
}

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    while (true) {
    }
}

+

对象Object

1
2
3
4
5
6
7
8
9
declare function create(o: object | null): void;

create({ prop: 0 }); // OK
create(null); // OK

create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error
+

类型断言

    +
  • <>(jsx 不可使用)
    • +
  • as
    • +
+
1
2
3
4
5
let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;

let strLength: number = (someValue as string).length;
+
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/2019/10/02/typescript02/index.html b/2019/10/02/typescript02/index.html new file mode 100644 index 00000000..9ebd5aba --- /dev/null +++ b/2019/10/02/typescript02/index.html @@ -0,0 +1,521 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + typescript(接口) | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+
+ + + +
+ + + + + +
+

typescript(接口) + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + +
+
+ + + + +
+ + +


参考 TypeScript Handbook（中文版）

+

没有记录变量声明这一节，看了下其实是对 JavaScript 为何推荐使用 let，const 而非 var 进行的简要介绍。个人推荐去看 let 和 const 命令

+

进入今天的正题，TypeScript 所谓的接口到底是啥，他与 Java 的接口是差不多的吗？我匆匆的浏览一了一遍，感觉他并不是像 Java 那样为了多态而存在的，他的存在已然是为了方便类型检查, 感觉是对传参时进行控制，就像文档所说的

+ +
+

TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

+
+

简单例子

用接口表示一个对象必须包括一个属性 name 且 类型为 string

+
1
2
3
4
5
6
7
8
9
10
11
interface nameType {
  name: string;
}

function printName(person: nameType) {
  console.log(person.name)
}

let personW = {name: 'laoWang', sex: 'man'};

printName(personW);
+

可选属性

大概就是一个对象可能包括一个属性为 XXX 且其类型为 XXX

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
interface nameType {
  name: string;
  sex?: string;
  height?: number;
}

function createPerson(personConfig: nameType): {name: string; height: number}{
  let say = {sex: 'female', height: 166, description: ''};
  if(personConfig.sex){
    say.sex = personConfig.sex;
  }
  if(personConfig.height){
    say.height = personConfig.height;
  }
  if(personConfig.name) {
    say.name = personConfig.name;
  }

  say.description = `this is ${personConfig.name}, is a ${say.sex} and ${say.height} height`;
  return say
}


let personW = createPerson({name: 'xiaoWang'; height: '180'});
+ +
+ + + + + + + + + +
+ + + +
+ +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_config.yml b/_config.yml deleted file mode 100644 index 940d225a..00000000 --- a/_config.yml +++ /dev/null @@ -1,104 +0,0 @@ -# Hexo Configuration -## Docs: https://hexo.io/docs/configuration.html -## Source: https://github.com/hexojs/hexo/ - -# Site -title: Marsorsun -subtitle: 心猿码意 -description: “对我来说，博客首先是一种知识管理工具，其次才是传播工具。我的技术文章，主要用来整理我还不懂的知识。我只写那些我还没有完全掌握的东西，那些我精通的东西，往往没有动力写。炫耀从来不是我的动机，好奇才是。" -author: Marsorsun -language: zh-CN -timezone: -email: - - -# URL -## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' -url: http://yoursite.com -root: / -permalink: :year/:month/:day/:title/ -permalink_defaults: - -# Directory -source_dir: source -public_dir: public -tag_dir: tags -archive_dir: archives -category_dir: categories -code_dir: downloads/code -i18n_dir: :lang -skip_render: - -# Writing -new_post_name: :title.md # File name of new posts -default_layout: post -titlecase: false # Transform title into titlecase -external_link: true # Open external links in new tab -filename_case: 0 -render_drafts: true -post_asset_folder: true -relative_link: false -future: true -highlight: - enable: true - line_number: true - auto_detect: true - tab_replace: - -# Home page setting -# path: Root path for your blogs index page. (default = '') -# per_page: Posts displayed per page. (0 = disable pagination) -# order_by: Posts order. (Order by date descending by default) -index_generator: - path: '' - per_page: 8 - order_by: -date - -# Category & Tag -default_category: uncategorized -category_map: -tag_map: - -# Date / Time format -## Hexo uses Moment.js to parse and display date -## You can customize the date format as defined in -## http://momentjs.com/docs/#/displaying/format/ -date_format: YYYY-MM-DD -time_format: HH:mm:ss - -# Pagination -## Set per_page to 0 to disable pagination -per_page: 8 -pagination_dir: page - -# Extensions -## Plugins: https://hexo.io/plugins/ -## Themes: https://hexo.io/themes/ -theme: next-reloaded - - -# Deployment -## Docs: https://hexo.io/docs/deployment.html -deploy: - type: git - repo: https://github.com/unbrain/unbrain.github.io.git - branch: master - -jsonContent: - meta: false - pages: false - posts: - title: true - date: true - path: true - text: false - raw: false - content: false - slug: false - updated: false - comments: false - link: false - permalink: false - excerpt: false - categories: false - tags: true \ No newline at end of file diff --git a/archives/2017/09/index.html b/archives/2017/09/index.html index 03fc2b2c..b84d9099 100644 --- a/archives/2017/09/index.html +++ b/archives/2017/09/index.html @@ -1,910 +1,679 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2017

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2017

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2017/09/page/2/index.html b/archives/2017/09/page/2/index.html new file mode 100644 index 00000000..24c46984 --- /dev/null +++ b/archives/2017/09/page/2/index.html @@ -0,0 +1,563 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2017

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2017/10/index.html b/archives/2017/10/index.html index 168d0288..a64bc213 100644 --- a/archives/2017/10/index.html +++ b/archives/2017/10/index.html @@ -1,725 +1,531 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2017

-
- - - - - - - - - - - -
-
- - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2017

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2017/11/index.html b/archives/2017/11/index.html index c0bfeba4..b43d9d99 100644 --- a/archives/2017/11/index.html +++ b/archives/2017/11/index.html @@ -1,725 +1,473 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2017

-
- - - - - - - - - - - -
-
- - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2017

+
+ + + + + + + +
+
+ + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2017/12/index.html b/archives/2017/12/index.html deleted file mode 100644 index 7d175a85..00000000 --- a/archives/2017/12/index.html +++ /dev/null @@ -1,725 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2017

-
- - - - - - - - - - - -
-
- - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/archives/2017/index.html b/archives/2017/index.html index 44d03129..aaa40304 100644 --- a/archives/2017/index.html +++ b/archives/2017/index.html @@ -1,988 +1,679 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2017

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2017

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2017/page/2/index.html b/archives/2017/page/2/index.html index 7a6a8044..20e605c7 100644 --- a/archives/2017/page/2/index.html +++ b/archives/2017/page/2/index.html @@ -1,729 +1,679 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2017

-
- - - - - - - - - - - -
-
- - - - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2017

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2018/02/index.html b/archives/2018/02/index.html index 0ed0b529..ac42d63b 100644 --- a/archives/2018/02/index.html +++ b/archives/2018/02/index.html @@ -1,836 +1,502 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2018

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2018

+
+ + + + + + + + + + + + + + + + +
+
+ + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2018/03/index.html b/archives/2018/03/index.html index a7243acb..8ed543d7 100644 --- a/archives/2018/03/index.html +++ b/archives/2018/03/index.html @@ -1,988 +1,679 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2018

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2018

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2018/03/page/2/index.html b/archives/2018/03/page/2/index.html index d7184de8..787b0280 100644 --- a/archives/2018/03/page/2/index.html +++ b/archives/2018/03/page/2/index.html @@ -1,877 +1,476 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2018

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2018

+
+ + + + + + + +
+
+ + + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2018/04/index.html b/archives/2018/04/index.html index 8610feda..b92f1a8d 100644 --- a/archives/2018/04/index.html +++ b/archives/2018/04/index.html @@ -1,836 +1,560 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2018

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2018

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2018/05/index.html b/archives/2018/05/index.html index 68e6925b..a421dab9 100644 --- a/archives/2018/05/index.html +++ b/archives/2018/05/index.html @@ -1,836 +1,531 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2018

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2018

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2018/06/index.html b/archives/2018/06/index.html index 551af011..d8bb55d5 100644 --- a/archives/2018/06/index.html +++ b/archives/2018/06/index.html @@ -1,836 +1,589 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2018

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2018

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2018/07/index.html b/archives/2018/07/index.html index 4329659a..112fbff7 100644 --- a/archives/2018/07/index.html +++ b/archives/2018/07/index.html @@ -1,725 +1,502 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2018

-
- - - - - - - - - - - -
-
- - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2018

+
+ + + + + + + + + + + + + + + + +
+
+ + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2018/08/index.html b/archives/2018/08/index.html index 2de0784d..8449ed0a 100644 --- a/archives/2018/08/index.html +++ b/archives/2018/08/index.html @@ -1,988 +1,531 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2018

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2018

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2018/08/page/2/index.html b/archives/2018/08/page/2/index.html deleted file mode 100644 index 2d544ca2..00000000 --- a/archives/2018/08/page/2/index.html +++ /dev/null @@ -1,729 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2018

-
- - - - - - - - - - - -
-
- - - - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/archives/2018/09/index.html b/archives/2018/09/index.html index f6b3f89e..7dde5d2b 100644 --- a/archives/2018/09/index.html +++ b/archives/2018/09/index.html @@ -1,910 +1,679 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2018

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2018

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2018/09/page/2/index.html b/archives/2018/09/page/2/index.html new file mode 100644 index 00000000..a9c5de1a --- /dev/null +++ b/archives/2018/09/page/2/index.html @@ -0,0 +1,534 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2018

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2018/10/index.html b/archives/2018/10/index.html index db5c1c7c..3906d0fb 100644 --- a/archives/2018/10/index.html +++ b/archives/2018/10/index.html @@ -1,873 +1,589 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2018

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2018

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2018/index.html b/archives/2018/index.html index cf238a27..d12b48f9 100644 --- a/archives/2018/index.html +++ b/archives/2018/index.html @@ -1,988 +1,679 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2018

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2018

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2018/page/2/index.html b/archives/2018/page/2/index.html index af716464..a916b713 100644 --- a/archives/2018/page/2/index.html +++ b/archives/2018/page/2/index.html @@ -1,988 +1,679 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2018

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2018

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2018/page/3/index.html b/archives/2018/page/3/index.html index ae895b4b..7a215804 100644 --- a/archives/2018/page/3/index.html +++ b/archives/2018/page/3/index.html @@ -1,988 +1,679 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2018

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2018

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2018/page/4/index.html b/archives/2018/page/4/index.html index bb8f462e..0ab01980 100644 --- a/archives/2018/page/4/index.html +++ b/archives/2018/page/4/index.html @@ -1,988 +1,679 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2018

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2018

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2018/page/5/index.html b/archives/2018/page/5/index.html index 868c587b..69750afa 100644 --- a/archives/2018/page/5/index.html +++ b/archives/2018/page/5/index.html @@ -1,988 +1,679 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2018

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2018

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2018/page/6/index.html b/archives/2018/page/6/index.html index eb089b73..e6037184 100644 --- a/archives/2018/page/6/index.html +++ b/archives/2018/page/6/index.html @@ -1,988 +1,563 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2018

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2018

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2018/page/7/index.html b/archives/2018/page/7/index.html deleted file mode 100644 index 3e4b929e..00000000 --- a/archives/2018/page/7/index.html +++ /dev/null @@ -1,766 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2018

-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/archives/2019/01/index.html b/archives/2019/01/index.html index cc8895cb..d2554887 100644 --- a/archives/2019/01/index.html +++ b/archives/2019/01/index.html @@ -1,836 +1,560 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2019

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2019

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2019/02/index.html b/archives/2019/02/index.html index 34a129de..7d5888d3 100644 --- a/archives/2019/02/index.html +++ b/archives/2019/02/index.html @@ -1,762 +1,502 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2019

-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2019

+
+ + + + + + + + + + + + + + + + +
+
+ + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2019/03/index.html b/archives/2019/03/index.html index 2ad482ea..6934c0d8 100644 --- a/archives/2019/03/index.html +++ b/archives/2019/03/index.html @@ -1,910 +1,647 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2019

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2019

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2019/04/index.html b/archives/2019/04/index.html index 521eb5cb..59d62a58 100644 --- a/archives/2019/04/index.html +++ b/archives/2019/04/index.html @@ -1,873 +1,531 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2019

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2019

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2019/05/index.html b/archives/2019/05/index.html index 000b845c..5b9d1103 100644 --- a/archives/2019/05/index.html +++ b/archives/2019/05/index.html @@ -1,799 +1,502 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2019

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2019

+
+ + + + + + + + + + + + + + + + +
+
+ + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2019/09/index.html b/archives/2019/09/index.html new file mode 100644 index 00000000..6e5e9c2f --- /dev/null +++ b/archives/2019/09/index.html @@ -0,0 +1,473 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2019

+
+ + + + + + + +
+
+ + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2019/10/index.html b/archives/2019/10/index.html new file mode 100644 index 00000000..e59d4142 --- /dev/null +++ b/archives/2019/10/index.html @@ -0,0 +1,502 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2019

+
+ + + + + + + + + + + + + + + + +
+
+ + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2019/index.html b/archives/2019/index.html index 4083e7cd..67916c92 100644 --- a/archives/2019/index.html +++ b/archives/2019/index.html @@ -1,988 +1,679 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2019

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2019

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2019/page/2/index.html b/archives/2019/page/2/index.html index d80cee4b..2f2fcc0c 100644 --- a/archives/2019/page/2/index.html +++ b/archives/2019/page/2/index.html @@ -1,988 +1,679 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2019

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2019

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2019/page/3/index.html b/archives/2019/page/3/index.html index 9c70735f..db6954d9 100644 --- a/archives/2019/page/3/index.html +++ b/archives/2019/page/3/index.html @@ -1,840 +1,592 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2019

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2019

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/index.html b/archives/index.html index 27a253af..ca3f9736 100644 --- a/archives/index.html +++ b/archives/index.html @@ -1,988 +1,679 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2019

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2019

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/page/10/index.html b/archives/page/10/index.html index 54c2a163..0416f592 100644 --- a/archives/page/10/index.html +++ b/archives/page/10/index.html @@ -1,951 +1,679 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2017

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2017

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/page/11/index.html b/archives/page/11/index.html new file mode 100644 index 00000000..eb425521 --- /dev/null +++ b/archives/page/11/index.html @@ -0,0 +1,476 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2017

+
+ + + + + + + +
+
+ + + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/page/2/index.html b/archives/page/2/index.html index b637466c..6a12f830 100644 --- a/archives/page/2/index.html +++ b/archives/page/2/index.html @@ -1,988 +1,679 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2019

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2019

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/page/3/index.html b/archives/page/3/index.html index 4f2e9a47..74391e0c 100644 --- a/archives/page/3/index.html +++ b/archives/page/3/index.html @@ -1,993 +1,684 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2019

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

2018

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2019

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

2018

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/page/4/index.html b/archives/page/4/index.html index ae43523c..58da8c28 100644 --- a/archives/page/4/index.html +++ b/archives/page/4/index.html @@ -1,988 +1,679 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2018

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2018

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/page/5/index.html b/archives/page/5/index.html index 47163be9..5dc2b2f6 100644 --- a/archives/page/5/index.html +++ b/archives/page/5/index.html @@ -1,988 +1,679 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2018

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2018

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/page/6/index.html b/archives/page/6/index.html index 639a5d43..8a9b98cb 100644 --- a/archives/page/6/index.html +++ b/archives/page/6/index.html @@ -1,988 +1,679 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2018

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2018

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/page/7/index.html b/archives/page/7/index.html index 95fc12ae..eb82ab0e 100644 --- a/archives/page/7/index.html +++ b/archives/page/7/index.html @@ -1,988 +1,679 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2018

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2018

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/page/8/index.html b/archives/page/8/index.html index c459a825..c3d3be3e 100644 --- a/archives/page/8/index.html +++ b/archives/page/8/index.html @@ -1,988 +1,679 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2018

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2018

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/page/9/index.html b/archives/page/9/index.html index edaeb989..aba59cbd 100644 --- a/archives/page/9/index.html +++ b/archives/page/9/index.html @@ -1,993 +1,684 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 归档 | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - - - - -
-
- - - - - - - - - 不错! 目前共计 79 篇日志。 继续努力。 - - - - - - - - - - - -
-

2018

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

2017

-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 归档 | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + + + + +
+
+
+ + + + + 很好! 目前共计 81 篇日志。 继续努力。 +
+ + + + + + + + + +
+

2018

+
+ + + + + + + + + + + +
+

2017

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/categories/index.html b/categories/index.html index c85d00c9..c6190110 100644 --- a/categories/index.html +++ b/categories/index.html @@ -1,714 +1,463 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - categories | Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- - -
- - - -
-
- -

categories

- -
- - - - - -
- -
- - - - -
- - -
-
- - - 暂无分类 -
-
- -
-
- -
- - - -
- - - - - - - -
- - -
- - - - - - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + categories | Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ + +
+ + + +
+
+ +

categories + +

+ +
+ + +
+ +
+ + + + +
+ +
+
+ 暂无分类 +
+
+ +
+
+ +
+ + + +
+ + + + + +
+ + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/content.json b/content.json index 4dc703df..14f7bf3b 100644 --- a/content.json +++ b/content.json @@ -1 +1 @@ -[{"title":"Arts（一）","date":"2019-05-18T16:00:00.000Z","path":"2019/05/19/Arts（一）/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"}]},{"title":"","date":"2019-05-10T07:13:17.293Z","path":"2019/05/10/两个遗留分支/","tags":[]},{"title":"终？","date":"2019-05-08T16:00:00.000Z","path":"2019/05/09/arts/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"}]},{"title":"What's JSONP","date":"2019-04-19T08:10:41.685Z","path":"2019/04/19/Whats-JSONP/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"JSONP","slug":"JSONP","permalink":"http://yoursite.com/tags/JSONP/"}]},{"title":"面向对象程序设计","date":"2019-04-19T08:09:50.357Z","path":"2019/04/19/面向对象程序设计（一）/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"面向对象","slug":"面向对象","permalink":"http://yoursite.com/tags/面向对象/"}]},{"title":"第九周随笔","date":"2019-04-18T16:00:00.000Z","path":"2019/04/19/环境变量和模式/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"}]},{"title":"第八周随笔","date":"2019-04-11T16:00:00.000Z","path":"2019/04/12/eight/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"}]},{"title":"第七周随笔","date":"2019-04-03T16:00:00.000Z","path":"2019/04/04/seven/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"}]},{"title":"第六周随笔","date":"2019-03-28T16:00:00.000Z","path":"2019/03/29/six/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"}]},{"title":"第五周","date":"2019-03-20T16:00:00.000Z","path":"2019/03/21/five/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"}]},{"title":"Retina 下 1px 的解决方案","date":"2019-03-14T16:00:00.000Z","path":"2019/03/15/Retina下1px的解决方案/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"},{"name":"项目","slug":"项目","permalink":"http://yoursite.com/tags/项目/"}]},{"title":"邀请老铁项目总结","date":"2019-03-09T16:00:00.000Z","path":"2019/03/10/invite/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"},{"name":"项目","slug":"项目","permalink":"http://yoursite.com/tags/项目/"}]},{"title":"flask vue socket","date":"2019-03-09T16:00:00.000Z","path":"2019/03/10/socket/","tags":[{"name":"项目","slug":"项目","permalink":"http://yoursite.com/tags/项目/"}]},{"title":"第三周知识记录","date":"2019-03-06T16:00:00.000Z","path":"2019/03/07/第三周/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"}]},{"title":"第二周知识记录","date":"2019-02-26T16:00:00.000Z","path":"2019/02/27/vue使用rem实现 移动端屏幕适配/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"}]},{"title":"新的旅途","date":"2019-02-18T16:00:00.000Z","path":"2019/02/19/newt/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"}]},{"title":"AnyProxy 上手","date":"2019-01-18T16:00:00.000Z","path":"2019/01/19/AnyProxy/","tags":[{"name":"编程","slug":"编程","permalink":"http://yoursite.com/tags/编程/"}]},{"title":"AnyProxy 上手","date":"2019-01-18T16:00:00.000Z","path":"2019/01/19/AnyProxy1/","tags":[{"name":"编程","slug":"编程","permalink":"http://yoursite.com/tags/编程/"},{"name":"anyproxy","slug":"anyproxy","permalink":"http://yoursite.com/tags/anyproxy/"}]},{"title":"linux 下 python 版本管理","date":"2019-01-14T16:00:00.000Z","path":"2019/01/15/brewInstall：/","tags":[{"name":"编程","slug":"编程","permalink":"http://yoursite.com/tags/编程/"}]},{"title":"linux 下 python 版本管理","date":"2019-01-14T16:00:00.000Z","path":"2019/01/15/pyenv/","tags":[{"name":"编程","slug":"编程","permalink":"http://yoursite.com/tags/编程/"}]},{"title":"前端简单常用算法（一）","date":"2018-10-29T16:00:00.000Z","path":"2018/10/30/20181030-前端简单常用算法（一）/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"Algorithm","slug":"Algorithm","permalink":"http://yoursite.com/tags/Algorithm/"}]},{"title":"Array 类型","date":"2018-10-26T16:00:00.000Z","path":"2018/10/27/Array-类型/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"}]},{"title":"千位符","date":"2018-10-16T16:00:00.000Z","path":"2018/10/17/千位符/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"RegExp","slug":"RegExp","permalink":"http://yoursite.com/tags/RegExp/"}]},{"title":"安全判断数据类型","date":"2018-10-11T16:00:00.000Z","path":"2018/10/12/20181012-安全判断数据类型/","tags":[{"name":"JavaScrip","slug":"JavaScrip","permalink":"http://yoursite.com/tags/JavaScrip/"}]},{"title":"新浪前端校招面试","date":"2018-10-09T16:00:00.000Z","path":"2018/10/10/20181010-新浪前端校招面试/","tags":[{"name":"面试","slug":"面试","permalink":"http://yoursite.com/tags/面试/"}]},{"title":"Vim(2)","date":"2018-09-03T16:00:00.000Z","path":"2018/09/04/201894-Vim(2)/","tags":[{"name":"编程","slug":"编程","permalink":"http://yoursite.com/tags/编程/"},{"name":"Vim","slug":"Vim","permalink":"http://yoursite.com/tags/Vim/"}]},{"title":"Zori 中的 Grid","date":"2018-09-03T16:00:00.000Z","path":"2018/09/04/2018094-Zori-中的-Grid/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"Vue","slug":"Vue","permalink":"http://yoursite.com/tags/Vue/"}]},{"title":"props","date":"2018-09-02T16:00:00.000Z","path":"2018/09/03/201893-props/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"Vue","slug":"Vue","permalink":"http://yoursite.com/tags/Vue/"}]},{"title":"每个程序员都应该知道的最基本的东西","date":"2018-09-02T06:40:25.000Z","path":"2018/09/02/每个程序员都应该知道的最基本的东西/","tags":[{"name":"编程","slug":"编程","permalink":"http://yoursite.com/tags/编程/"}]},{"title":"Vim(1)","date":"2018-09-01T16:00:00.000Z","path":"2018/09/02/201892-Vim(1)/","tags":[{"name":"编程","slug":"编程","permalink":"http://yoursite.com/tags/编程/"},{"name":"Vim","slug":"Vim","permalink":"http://yoursite.com/tags/Vim/"}]},{"title":"前端 Linux 重装","date":"2018-08-31T16:00:00.000Z","path":"2018/09/01/前端 Linux 重装/","tags":[{"name":"编程","slug":"编程","permalink":"http://yoursite.com/tags/编程/"}]},{"title":"JSONP 到底是什么东西","date":"2018-08-13T12:50:00.522Z","path":"2018/08/13/JSONP-到底是什么东西/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"JSONP","slug":"JSONP","permalink":"http://yoursite.com/tags/JSONP/"}]},{"title":"强缓存与协商缓存","date":"2018-08-12T12:46:25.000Z","path":"2018/08/12/强缓存与协商缓存/","tags":[{"name":"笔试面试题","slug":"笔试面试题","permalink":"http://yoursite.com/tags/笔试面试题/"},{"name":"HTTP","slug":"HTTP","permalink":"http://yoursite.com/tags/HTTP/"}]},{"title":"回看 JS 数据类型","date":"2018-08-03T09:29:32.538Z","path":"2018/08/03/回看-JS-数据类型/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"数据类型","slug":"数据类型","permalink":"http://yoursite.com/tags/数据类型/"}]},{"title":"参数处理&解构赋值","date":"2018-08-03T09:29:07.827Z","path":"2018/08/03/参数处理&解构赋值/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"es6","slug":"es6","permalink":"http://yoursite.com/tags/es6/"}]},{"title":"Vue 基础文档","date":"2018-08-03T09:28:59.856Z","path":"2018/08/03/Vue-基础文档/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"vue","slug":"vue","permalink":"http://yoursite.com/tags/vue/"}]},{"title":"JavaScript 原型链","date":"2018-08-03T09:20:24.722Z","path":"2018/08/03/JavaScript-原型链/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"prototype","slug":"prototype","permalink":"http://yoursite.com/tags/prototype/"}]},{"title":"Awesome resume","date":"2018-08-03T09:20:14.558Z","path":"2018/08/03/Awesome-resume/","tags":[{"name":"项目","slug":"项目","permalink":"http://yoursite.com/tags/项目/"}]},{"title":"登录与注册","date":"2018-08-03T09:19:54.000Z","path":"2018/08/03/登录与注册/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"HTTP","slug":"HTTP","permalink":"http://yoursite.com/tags/HTTP/"}]},{"title":"回看 promise","date":"2018-08-03T09:17:04.317Z","path":"2018/08/03/es6-promise/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"es6","slug":"es6","permalink":"http://yoursite.com/tags/es6/"},{"name":"callback","slug":"callback","permalink":"http://yoursite.com/tags/callback/"},{"name":"promise","slug":"promise","permalink":"http://yoursite.com/tags/promise/"}]},{"title":"知道创宇笔试题","date":"2018-07-20T12:46:25.000Z","path":"2018/07/20/知道创宇笔试题/","tags":[{"name":"笔试面试题","slug":"笔试面试题","permalink":"http://yoursite.com/tags/笔试面试题/"}]},{"title":"Vue组件通信","date":"2018-06-17T12:46:25.000Z","path":"2018/06/17/Vue组件通信/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"vue","slug":"vue","permalink":"http://yoursite.com/tags/vue/"}]},{"title":"CSS 套路","date":"2018-06-13T04:46:25.000Z","path":"2018/06/13/cssroad/","tags":[{"name":"CSS","slug":"CSS","permalink":"http://yoursite.com/tags/CSS/"}]},{"title":"网易云音乐项目踩坑与套路","date":"2018-06-12T12:46:25.000Z","path":"2018/06/12/网易云音乐项目踩坑与套路/","tags":[{"name":"项目","slug":"项目","permalink":"http://yoursite.com/tags/项目/"},{"name":"套路","slug":"套路","permalink":"http://yoursite.com/tags/套路/"}]},{"title":"webpack 初识","date":"2018-06-01T12:46:25.000Z","path":"2018/06/01/webpack-初识/","tags":[{"name":"编程","slug":"编程","permalink":"http://yoursite.com/tags/编程/"},{"name":"webpack","slug":"webpack","permalink":"http://yoursite.com/tags/webpack/"}]},{"title":"移动端如何适配（响应式）","date":"2018-05-27T12:46:25.000Z","path":"2018/05/27/移动端如何适配（响应式）/","tags":[{"name":"笔试面试题","slug":"笔试面试题","permalink":"http://yoursite.com/tags/笔试面试题/"},{"name":"CSS","slug":"CSS","permalink":"http://yoursite.com/tags/CSS/"}]},{"title":"初探 jQuery","date":"2018-05-20T12:58:51.127Z","path":"2018/05/20/jQuery-first/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"jQuery","slug":"jQuery","permalink":"http://yoursite.com/tags/jQuery/"}]},{"title":"堆叠顺序","date":"2018-05-17T12:46:25.000Z","path":"2018/05/17/stacking-content/","tags":[{"name":"CSS","slug":"CSS","permalink":"http://yoursite.com/tags/CSS/"}]},{"title":"box-sizing","date":"2018-05-01T12:46:25.000Z","path":"2018/05/01/box-sizing/","tags":[{"name":"CSS","slug":"CSS","permalink":"http://yoursite.com/tags/CSS/"}]},{"title":"简聊 JavaScript call apply 与 bind","date":"2018-04-28T12:46:25.000Z","path":"2018/04/28/jscallapply/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"笔试面试题","slug":"笔试面试题","permalink":"http://yoursite.com/tags/笔试面试题/"}]},{"title":"在线画板的制作","date":"2018-04-24T12:46:25.000Z","path":"2018/04/24/myCanvas/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"项目","slug":"项目","permalink":"http://yoursite.com/tags/项目/"},{"name":"canvas","slug":"canvas","permalink":"http://yoursite.com/tags/canvas/"}]},{"title":"AJAX","date":"2018-04-21T16:00:00.000Z","path":"2018/04/22/XMLHttpRequest 对象/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"}]},{"title":"初探 MVC","date":"2018-04-13T09:23:34.794Z","path":"2018/04/13/初探-mvc/","tags":[{"name":"编程","slug":"编程","permalink":"http://yoursite.com/tags/编程/"},{"name":"MVC","slug":"MVC","permalink":"http://yoursite.com/tags/MVC/"}]},{"title":"布局的套路","date":"2018-03-26T12:46:25.000Z","path":"2018/03/26/布局的套路/","tags":[{"name":"CSS","slug":"CSS","permalink":"http://yoursite.com/tags/CSS/"},{"name":"套路","slug":"套路","permalink":"http://yoursite.com/tags/套路/"}]},{"title":"JS　里面的对象","date":"2018-03-21T12:47:25.054Z","path":"2018/03/21/JSobject/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"__proto__","slug":"proto","permalink":"http://yoursite.com/tags/proto/"}]},{"title":"浅谈 JS 数据","date":"2018-03-21T12:46:59.513Z","path":"2018/03/21/JSdata/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"}]},{"title":"JavaScript 中的函数","date":"2018-03-21T12:43:28.902Z","path":"2018/03/21/JavaScript -Function/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"}]},{"title":"CSS 文字对齐","date":"2018-03-18T12:46:25.000Z","path":"2018/03/18/css-tricks01/","tags":[{"name":"笔试面试题","slug":"笔试面试题","permalink":"http://yoursite.com/tags/笔试面试题/"},{"name":"CSS","slug":"CSS","permalink":"http://yoursite.com/tags/CSS/"}]},{"title":"啥是闭包","date":"2018-03-16T12:46:25.000Z","path":"2018/03/16/closure/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"笔试面试题","slug":"笔试面试题","permalink":"http://yoursite.com/tags/笔试面试题/"}]},{"title":"JavaScript 基础","date":"2018-03-11T05:23:35.663Z","path":"2018/03/11/JavaScript_2/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"blue视频笔记","slug":"blue视频笔记","permalink":"http://yoursite.com/tags/blue视频笔记/"}]},{"title":"JavaScript 运动","date":"2018-03-11T05:23:18.579Z","path":"2018/03/11/JavaScript_6/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"blue视频笔记","slug":"blue视频笔记","permalink":"http://yoursite.com/tags/blue视频笔记/"}]},{"title":"DOM 操作","date":"2018-03-11T05:22:37.254Z","path":"2018/03/11/JavaScript_5/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"blue视频笔记","slug":"blue视频笔记","permalink":"http://yoursite.com/tags/blue视频笔记/"}]},{"title":"定时器的使用","date":"2018-03-11T05:21:50.023Z","path":"2018/03/11/JavaScript_4/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"blue视频笔记","slug":"blue视频笔记","permalink":"http://yoursite.com/tags/blue视频笔记/"}]},{"title":"初探 JavaScript 魅力","date":"2018-03-11T05:20:18.645Z","path":"2018/03/11/JavaScript_1/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"blue视频笔记","slug":"blue视频笔记","permalink":"http://yoursite.com/tags/blue视频笔记/"}]},{"title":"深入 JavaScript","date":"2018-03-11T05:19:54.356Z","path":"2018/03/11/JavaScript_3/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"blue视频笔记","slug":"blue视频笔记","permalink":"http://yoursite.com/tags/blue视频笔记/"}]},{"title":"一个导航网站","date":"2018-03-02T12:46:25.000Z","path":"2018/03/02/nav/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"项目","slug":"项目","permalink":"http://yoursite.com/tags/项目/"},{"name":"导航","slug":"导航","permalink":"http://yoursite.com/tags/导航/"}]},{"title":"开启 deepin","date":"2018-02-22T12:46:25.000Z","path":"2018/02/22/开启 Deepin/","tags":[{"name":"编程","slug":"编程","permalink":"http://yoursite.com/tags/编程/"}]},{"title":"BBOC","date":"2018-02-12T12:46:25.000Z","path":"2018/02/12/bboc/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"},{"name":"转载","slug":"转载","permalink":"http://yoursite.com/tags/转载/"}]},{"title":"HTTP 入门","date":"2018-02-08T06:18:17.029Z","path":"2018/02/08/HTTP-入门/","tags":[{"name":"编程","slug":"编程","permalink":"http://yoursite.com/tags/编程/"},{"name":"HTTP","slug":"HTTP","permalink":"http://yoursite.com/tags/HTTP/"}]},{"title":"初探 vim","date":"2018-02-06T06:48:26.860Z","path":"2018/02/06/初探vim/","tags":[{"name":"编程","slug":"编程","permalink":"http://yoursite.com/tags/编程/"}]},{"title":"11 月末","date":"2017-12-06T11:00:29.208Z","path":"2017/12/06/suibi11last/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"}]},{"title":"十月末","date":"2017-11-01T12:34:34.438Z","path":"2017/11/01/think1030/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"}]},{"title":"随笔记夜猫子英语","date":"2017-10-19T12:54:57.295Z","path":"2017/10/19/yemao/","tags":[{"name":"英语","slug":"英语","permalink":"http://yoursite.com/tags/英语/"}]},{"title":"考虫长难句","date":"2017-09-26T00:49:03.207Z","path":"2017/09/26/kaocong/","tags":[{"name":"英语","slug":"英语","permalink":"http://yoursite.com/tags/英语/"},{"name":"考虫","slug":"考虫","permalink":"http://yoursite.com/tags/考虫/"}]},{"title":"九月","date":"2017-09-23T07:55:57.000Z","path":"2017/09/23/201170923/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"}]},{"title":"利用Hexo + Github 搭建个人博客","date":"2017-09-23T07:26:51.000Z","path":"2017/09/23/create-hexo/","tags":[{"name":"编程","slug":"编程","permalink":"http://yoursite.com/tags/编程/"},{"name":"hexo","slug":"hexo","permalink":"http://yoursite.com/tags/hexo/"},{"name":"github","slug":"github","permalink":"http://yoursite.com/tags/github/"}]},{"title":"无题","date":"2017-09-23T02:00:08.997Z","path":"2017/09/23/my-o/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"}]},{"title":"极简英语语法","date":"2017-09-22T12:25:51.361Z","path":"2017/09/22/English-learning/","tags":[{"name":"英语","slug":"英语","permalink":"http://yoursite.com/tags/英语/"}]},{"title":"Git简单操作","date":"2017-09-10T12:46:25.000Z","path":"2017/09/10/hello-world/","tags":[{"name":"编程","slug":"编程","permalink":"http://yoursite.com/tags/编程/"},{"name":"Git","slug":"Git","permalink":"http://yoursite.com/tags/Git/"}]}] \ No newline at end of file +[{"title":"typescript(接口)","date":"2019-10-02T13:57:31.000Z","path":"2019/10/02/typescript02/","tags":[{"name":"typescript","slug":"typescript","permalink":"http://yoursite.com/tags/typescript/"}]},{"title":"typescript(基础类型)","date":"2019-10-01T09:02:31.000Z","path":"2019/10/01/typescript01/","tags":[{"name":"typescript","slug":"typescript","permalink":"http://yoursite.com/tags/typescript/"}]},{"title":"随笔","date":"2019-09-14T16:00:00.000Z","path":"2019/09/15/随笔/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"}]},{"title":"Arts（一）","date":"2019-05-18T16:00:00.000Z","path":"2019/05/19/Arts（一）/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"}]},{"title":"终？","date":"2019-05-08T16:00:00.000Z","path":"2019/05/09/arts/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"}]},{"title":"第九周随笔","date":"2019-04-18T16:00:00.000Z","path":"2019/04/19/环境变量和模式/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"}]},{"title":"第八周随笔","date":"2019-04-11T16:00:00.000Z","path":"2019/04/12/eight/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"}]},{"title":"第七周随笔","date":"2019-04-03T16:00:00.000Z","path":"2019/04/04/seven/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"}]},{"title":"第六周随笔","date":"2019-03-28T16:00:00.000Z","path":"2019/03/29/six/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"}]},{"title":"qrcode 分支","date":"2019-03-22T12:46:25.000Z","path":"2019/03/22/两个遗留分支/","tags":[{"name":"编程","slug":"编程","permalink":"http://yoursite.com/tags/编程/"}]},{"title":"第五周","date":"2019-03-20T16:00:00.000Z","path":"2019/03/21/five/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"}]},{"title":"Retina 下 1px 的解决方案","date":"2019-03-14T16:00:00.000Z","path":"2019/03/15/Retina下1px的解决方案/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"},{"name":"项目","slug":"项目","permalink":"http://yoursite.com/tags/项目/"}]},{"title":"邀请老铁项目总结","date":"2019-03-09T16:00:00.000Z","path":"2019/03/10/invite/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"},{"name":"项目","slug":"项目","permalink":"http://yoursite.com/tags/项目/"}]},{"title":"flask vue socket","date":"2019-03-09T16:00:00.000Z","path":"2019/03/10/socket/","tags":[{"name":"项目","slug":"项目","permalink":"http://yoursite.com/tags/项目/"}]},{"title":"第三周知识记录","date":"2019-03-07T12:46:25.000Z","path":"2019/03/07/第三周/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"}]},{"title":"第二周知识记录","date":"2019-02-26T16:00:00.000Z","path":"2019/02/27/vue使用rem实现 移动端屏幕适配/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"}]},{"title":"新的旅途","date":"2019-02-18T16:00:00.000Z","path":"2019/02/19/newt/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"}]},{"title":"AnyProxy 上手","date":"2019-01-18T16:00:00.000Z","path":"2019/01/19/AnyProxy1/","tags":[{"name":"编程","slug":"编程","permalink":"http://yoursite.com/tags/编程/"},{"name":"anyproxy","slug":"anyproxy","permalink":"http://yoursite.com/tags/anyproxy/"}]},{"title":"AnyProxy 上手","date":"2019-01-18T16:00:00.000Z","path":"2019/01/19/AnyProxy/","tags":[{"name":"编程","slug":"编程","permalink":"http://yoursite.com/tags/编程/"}]},{"title":"linux 下 python 版本管理","date":"2019-01-14T16:00:00.000Z","path":"2019/01/15/brewInstall：/","tags":[{"name":"编程","slug":"编程","permalink":"http://yoursite.com/tags/编程/"}]},{"title":"linux 下 python 版本管理","date":"2019-01-14T16:00:00.000Z","path":"2019/01/15/pyenv/","tags":[{"name":"编程","slug":"编程","permalink":"http://yoursite.com/tags/编程/"}]},{"title":"前端简单常用算法（一）","date":"2018-10-30T12:46:25.000Z","path":"2018/10/30/20181030-前端简单常用算法（一）/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"Algorithm","slug":"Algorithm","permalink":"http://yoursite.com/tags/Algorithm/"}]},{"title":"Array 类型","date":"2018-10-26T16:00:00.000Z","path":"2018/10/27/Array-类型/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"}]},{"title":"千位符","date":"2018-10-16T16:00:00.000Z","path":"2018/10/17/千位符/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"RegExp","slug":"RegExp","permalink":"http://yoursite.com/tags/RegExp/"}]},{"title":"安全判断数据类型","date":"2018-10-12T12:46:25.000Z","path":"2018/10/12/20181012-安全判断数据类型/","tags":[{"name":"JavaScrip","slug":"JavaScrip","permalink":"http://yoursite.com/tags/JavaScrip/"}]},{"title":"新浪前端校招面试","date":"2018-10-10T12:46:25.000Z","path":"2018/10/10/20181010-新浪前端校招面试/","tags":[{"name":"面试","slug":"面试","permalink":"http://yoursite.com/tags/面试/"}]},{"title":"初探 MVC","date":"2018-09-08T16:00:00.000Z","path":"2018/09/09/初探-mvc/","tags":[{"name":"编程","slug":"编程","permalink":"http://yoursite.com/tags/编程/"},{"name":"MVC","slug":"MVC","permalink":"http://yoursite.com/tags/MVC/"}]},{"title":"初探 vim","date":"2018-09-08T16:00:00.000Z","path":"2018/09/09/初探vim/","tags":[{"name":"编程","slug":"编程","permalink":"http://yoursite.com/tags/编程/"}]},{"title":"参数处理&解构赋值","date":"2018-09-08T16:00:00.000Z","path":"2018/09/09/参数处理&解构赋值/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"es6","slug":"es6","permalink":"http://yoursite.com/tags/es6/"}]},{"title":"登录与注册","date":"2018-09-08T16:00:00.000Z","path":"2018/09/09/登录与注册/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"HTTP","slug":"HTTP","permalink":"http://yoursite.com/tags/HTTP/"}]},{"title":"Zori 中的 Grid","date":"2018-09-04T12:46:25.000Z","path":"2018/09/04/2018094-Zori-中的-Grid/","tags":[{"name":"Vue","slug":"Vue","permalink":"http://yoursite.com/tags/Vue/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"}]},{"title":"Vim(2)","date":"2018-09-04T12:46:25.000Z","path":"2018/09/04/201894-Vim(2)/","tags":[{"name":"编程","slug":"编程","permalink":"http://yoursite.com/tags/编程/"},{"name":"Vim","slug":"Vim","permalink":"http://yoursite.com/tags/Vim/"}]},{"title":"Vim(1)","date":"2018-09-02T12:46:25.000Z","path":"2018/09/02/201892-Vim(1)/","tags":[{"name":"编程","slug":"编程","permalink":"http://yoursite.com/tags/编程/"},{"name":"Vim","slug":"Vim","permalink":"http://yoursite.com/tags/Vim/"}]},{"title":"每个程序员都应该知道的最基本的东西","date":"2018-09-02T06:40:25.000Z","path":"2018/09/02/每个程序员都应该知道的最基本的东西/","tags":[{"name":"编程","slug":"编程","permalink":"http://yoursite.com/tags/编程/"}]},{"title":"HTTP 入门","date":"2018-08-31T16:00:00.000Z","path":"2018/09/01/HTTP-入门/","tags":[{"name":"编程","slug":"编程","permalink":"http://yoursite.com/tags/编程/"},{"name":"HTTP","slug":"HTTP","permalink":"http://yoursite.com/tags/HTTP/"}]},{"title":"前端 Linux 重装","date":"2018-08-31T16:00:00.000Z","path":"2018/09/01/前端 Linux 重装/","tags":[{"name":"编程","slug":"编程","permalink":"http://yoursite.com/tags/编程/"}]},{"title":"回看 JS 数据类型","date":"2018-08-31T16:00:00.000Z","path":"2018/09/01/回看-JS-数据类型/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"数据类型","slug":"数据类型","permalink":"http://yoursite.com/tags/数据类型/"}]},{"title":"JSONP 到底是什么东西","date":"2018-08-12T16:00:00.000Z","path":"2018/08/13/JSONP-到底是什么东西/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"JSONP","slug":"JSONP","permalink":"http://yoursite.com/tags/JSONP/"}]},{"title":"强缓存与协商缓存","date":"2018-08-12T12:46:25.000Z","path":"2018/08/12/强缓存与协商缓存/","tags":[{"name":"HTTP","slug":"HTTP","permalink":"http://yoursite.com/tags/HTTP/"},{"name":"笔试面试题","slug":"笔试面试题","permalink":"http://yoursite.com/tags/笔试面试题/"}]},{"title":"Awesome resume","date":"2018-07-31T16:00:00.000Z","path":"2018/08/01/Awesome-resume/","tags":[{"name":"项目","slug":"项目","permalink":"http://yoursite.com/tags/项目/"}]},{"title":"知道创宇笔试题","date":"2018-07-20T12:46:25.000Z","path":"2018/07/20/知道创宇笔试题/","tags":[{"name":"笔试面试题","slug":"笔试面试题","permalink":"http://yoursite.com/tags/笔试面试题/"}]},{"title":"回看 promise","date":"2018-06-30T16:00:00.000Z","path":"2018/07/01/es6-promise/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"es6","slug":"es6","permalink":"http://yoursite.com/tags/es6/"},{"name":"callback","slug":"callback","permalink":"http://yoursite.com/tags/callback/"},{"name":"promise","slug":"promise","permalink":"http://yoursite.com/tags/promise/"}]},{"title":"Vue组件通信","date":"2018-06-17T12:46:25.000Z","path":"2018/06/17/Vue组件通信/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"vue","slug":"vue","permalink":"http://yoursite.com/tags/vue/"}]},{"title":"CSS 套路","date":"2018-06-13T04:46:25.000Z","path":"2018/06/13/cssroad/","tags":[{"name":"CSS","slug":"CSS","permalink":"http://yoursite.com/tags/CSS/"}]},{"title":"网易云音乐项目踩坑与套路","date":"2018-06-12T12:46:25.000Z","path":"2018/06/12/网易云音乐项目踩坑与套路/","tags":[{"name":"项目","slug":"项目","permalink":"http://yoursite.com/tags/项目/"},{"name":"套路","slug":"套路","permalink":"http://yoursite.com/tags/套路/"}]},{"title":"Vue 基础文档","date":"2018-06-04T16:00:00.000Z","path":"2018/06/05/Vue-基础文档/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"vue","slug":"vue","permalink":"http://yoursite.com/tags/vue/"}]},{"title":"webpack 初识","date":"2018-06-01T12:46:25.000Z","path":"2018/06/01/webpack-初识/","tags":[{"name":"编程","slug":"编程","permalink":"http://yoursite.com/tags/编程/"},{"name":"webpack","slug":"webpack","permalink":"http://yoursite.com/tags/webpack/"}]},{"title":"移动端如何适配（响应式）","date":"2018-05-27T12:46:25.000Z","path":"2018/05/27/移动端如何适配（响应式）/","tags":[{"name":"CSS","slug":"CSS","permalink":"http://yoursite.com/tags/CSS/"},{"name":"笔试面试题","slug":"笔试面试题","permalink":"http://yoursite.com/tags/笔试面试题/"}]},{"title":"堆叠顺序","date":"2018-05-17T12:46:25.000Z","path":"2018/05/17/stacking-content/","tags":[{"name":"CSS","slug":"CSS","permalink":"http://yoursite.com/tags/CSS/"}]},{"title":"box-sizing","date":"2018-05-01T12:46:25.000Z","path":"2018/05/01/box-sizing/","tags":[{"name":"CSS","slug":"CSS","permalink":"http://yoursite.com/tags/CSS/"}]},{"title":"What's JSONP","date":"2018-04-28T16:00:00.000Z","path":"2018/04/29/Whats-JSONP/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"JSONP","slug":"JSONP","permalink":"http://yoursite.com/tags/JSONP/"}]},{"title":"简聊 JavaScript call apply 与 bind","date":"2018-04-28T12:46:25.000Z","path":"2018/04/28/jscallapply/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"笔试面试题","slug":"笔试面试题","permalink":"http://yoursite.com/tags/笔试面试题/"}]},{"title":"在线画板的制作","date":"2018-04-24T12:46:25.000Z","path":"2018/04/24/myCanvas/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"项目","slug":"项目","permalink":"http://yoursite.com/tags/项目/"},{"name":"canvas","slug":"canvas","permalink":"http://yoursite.com/tags/canvas/"}]},{"title":"AJAX","date":"2018-04-21T16:00:00.000Z","path":"2018/04/22/XMLHttpRequest 对象/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"}]},{"title":"布局的套路","date":"2018-03-26T12:46:25.000Z","path":"2018/03/26/布局的套路/","tags":[{"name":"CSS","slug":"CSS","permalink":"http://yoursite.com/tags/CSS/"},{"name":"套路","slug":"套路","permalink":"http://yoursite.com/tags/套路/"}]},{"title":"面向对象程序设计","date":"2018-03-22T12:46:25.000Z","path":"2018/03/22/面向对象程序设计（一）/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"面向对象","slug":"面向对象","permalink":"http://yoursite.com/tags/面向对象/"}]},{"title":"CSS 文字对齐","date":"2018-03-18T12:46:25.000Z","path":"2018/03/18/css-tricks01/","tags":[{"name":"CSS","slug":"CSS","permalink":"http://yoursite.com/tags/CSS/"},{"name":"笔试面试题","slug":"笔试面试题","permalink":"http://yoursite.com/tags/笔试面试题/"}]},{"title":"初探 jQuery","date":"2018-03-17T16:00:00.000Z","path":"2018/03/18/jQuery-first/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"jQuery","slug":"jQuery","permalink":"http://yoursite.com/tags/jQuery/"}]},{"title":"啥是闭包","date":"2018-03-16T12:46:25.000Z","path":"2018/03/16/closure/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"笔试面试题","slug":"笔试面试题","permalink":"http://yoursite.com/tags/笔试面试题/"}]},{"title":"JS　里面的对象","date":"2018-03-04T16:00:00.000Z","path":"2018/03/05/JSobject/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"__proto__","slug":"proto","permalink":"http://yoursite.com/tags/proto/"}]},{"title":"浅谈 JS 数据","date":"2018-03-04T16:00:00.000Z","path":"2018/03/05/JSdata/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"}]},{"title":"JavaScript 原型链","date":"2018-03-04T16:00:00.000Z","path":"2018/03/05/JavaScript-原型链/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"prototype","slug":"prototype","permalink":"http://yoursite.com/tags/prototype/"}]},{"title":"一个导航网站","date":"2018-03-02T12:46:25.000Z","path":"2018/03/02/nav/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"项目","slug":"项目","permalink":"http://yoursite.com/tags/项目/"},{"name":"导航","slug":"导航","permalink":"http://yoursite.com/tags/导航/"}]},{"title":"开启 deepin","date":"2018-02-22T12:46:25.000Z","path":"2018/02/22/开启 Deepin/","tags":[{"name":"编程","slug":"编程","permalink":"http://yoursite.com/tags/编程/"}]},{"title":"BBOC","date":"2018-02-12T12:46:25.000Z","path":"2018/02/12/bboc/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"},{"name":"转载","slug":"转载","permalink":"http://yoursite.com/tags/转载/"}]},{"title":"11 月末","date":"2017-11-24T16:00:00.000Z","path":"2017/11/25/suibi11last/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"}]},{"title":"十月末","date":"2017-10-29T16:00:00.000Z","path":"2017/10/30/think1030/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"}]},{"title":"随笔记夜猫子英语","date":"2017-10-14T16:00:00.000Z","path":"2017/10/15/yemao/","tags":[{"name":"英语","slug":"英语","permalink":"http://yoursite.com/tags/英语/"}]},{"title":"考虫长难句","date":"2017-10-04T16:00:00.000Z","path":"2017/10/05/kaocong/","tags":[{"name":"英语","slug":"英语","permalink":"http://yoursite.com/tags/英语/"},{"name":"考虫","slug":"考虫","permalink":"http://yoursite.com/tags/考虫/"}]},{"title":"九月","date":"2017-09-23T07:55:57.000Z","path":"2017/09/23/201170923/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"}]},{"title":"利用Hexo + Github 搭建个人博客","date":"2017-09-23T07:26:51.000Z","path":"2017/09/23/create-hexo/","tags":[{"name":"编程","slug":"编程","permalink":"http://yoursite.com/tags/编程/"},{"name":"hexo","slug":"hexo","permalink":"http://yoursite.com/tags/hexo/"},{"name":"github","slug":"github","permalink":"http://yoursite.com/tags/github/"}]},{"title":"无题","date":"2017-09-14T16:00:00.000Z","path":"2017/09/15/my-o/","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"}]},{"title":"Git简单操作","date":"2017-09-10T12:46:25.000Z","path":"2017/09/10/hello-world/","tags":[{"name":"编程","slug":"编程","permalink":"http://yoursite.com/tags/编程/"},{"name":"Git","slug":"Git","permalink":"http://yoursite.com/tags/Git/"}]},{"title":"深入 JavaScript","date":"2017-09-04T16:00:00.000Z","path":"2017/09/05/JavaScript_3/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"blue视频笔记","slug":"blue视频笔记","permalink":"http://yoursite.com/tags/blue视频笔记/"}]},{"title":"定时器的使用","date":"2017-09-04T16:00:00.000Z","path":"2017/09/05/JavaScript_4/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"blue视频笔记","slug":"blue视频笔记","permalink":"http://yoursite.com/tags/blue视频笔记/"}]},{"title":"DOM 操作","date":"2017-09-04T16:00:00.000Z","path":"2017/09/05/JavaScript_5/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"blue视频笔记","slug":"blue视频笔记","permalink":"http://yoursite.com/tags/blue视频笔记/"}]},{"title":"JavaScript 运动","date":"2017-09-04T16:00:00.000Z","path":"2017/09/05/JavaScript_6/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"blue视频笔记","slug":"blue视频笔记","permalink":"http://yoursite.com/tags/blue视频笔记/"}]},{"title":"极简英语语法","date":"2017-08-31T16:00:00.000Z","path":"2017/09/01/English-learning/","tags":[{"name":"英语","slug":"英语","permalink":"http://yoursite.com/tags/英语/"}]},{"title":"JavaScript 中的函数","date":"2017-08-31T16:00:00.000Z","path":"2017/09/01/JavaScript -Function/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"}]},{"title":"JavaScript 基础","date":"2017-08-31T16:00:00.000Z","path":"2017/09/01/JavaScript_2/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"blue视频笔记","slug":"blue视频笔记","permalink":"http://yoursite.com/tags/blue视频笔记/"}]},{"title":"初探 JavaScript 魅力","date":"2017-08-31T16:00:00.000Z","path":"2017/09/01/JavaScript_1/","tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"blue视频笔记","slug":"blue视频笔记","permalink":"http://yoursite.com/tags/blue视频笔记/"}]}] \ No newline at end of file diff --git a/css/main.css b/css/main.css index 67024978..baf11d97 100644 --- a/css/main.css +++ b/css/main.css @@ -1,2701 +1,2315 @@ -/* normalize.css v3.0.2 | MIT License | git.io/normalize */ -html { - font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} -body { - margin: 0; -} -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -menu, -nav, -section, -summary { - display: block; -} -audio, -canvas, -progress, -video { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ -} -audio:not([controls]) { - display: none; - height: 0; -} -[hidden], -template { - display: none; -} -a { - background-color: transparent; -} -a:active, -a:hover { - outline: 0; -} -abbr[title] { - border-bottom: 1px dotted; -} -b, -strong { - font-weight: bold; -} -dfn { - font-style: italic; -} -h1 { - font-size: 2em; - margin: 0.67em 0; -} -mark { - background: #ff0; - color: #000; -} -small { - font-size: 80%; -} -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} -sup { - top: -0.5em; -} -sub { - bottom: -0.25em; -} -img { - border: 0; -} -svg:not(:root) { - overflow: hidden; -} -figure { - margin: 1em 40px; -} -hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; -} -pre { - overflow: auto; -} -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; -} -button, -input, -optgroup, -select, -textarea { - color: inherit; /* 1 */ - font: inherit; /* 2 */ - margin: 0; /* 3 */ -} -button { - overflow: visible; -} -button, -select { - text-transform: none; -} -button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ -} -button[disabled], -html input[disabled] { - cursor: default; -} -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} -input { - line-height: normal; -} -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { - height: auto; -} -input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ - box-sizing: content-box; -} -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} -legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ -} -textarea { - overflow: auto; -} -optgroup { - font-weight: bold; -} -table { - border-collapse: collapse; - border-spacing: 0; -} -td, -th { - padding: 0; -} -::selection { - background: #262a30; - color: #fff; -} -body { - position: relative; - font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif; - font-size: 14px; - line-height: 2; - color: #555; - background: #fff; -} -@media (max-width: 767px) { - body { - padding-right: 0 !important; - } -} -@media (min-width: 768px) and (max-width: 991px) { - body { - padding-right: 0 !important; - } -} -@media (min-width: 1200px) { - body { - font-size: 16px; - } -} -h1, -h2, -h3, -h4, -h5, -h6 { - margin: 0; - padding: 0; - font-weight: bold; - line-height: 1.5; - font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif; -} -h1, -h2, -h3, -h4, -h5, -h6 { - margin: 20px 0 15px; -} -h1 { - font-size: 22px; -} -@media (max-width: 767px) { - h1 { - font-size: 18px; - } -} -h2 { - font-size: 20px; -} -@media (max-width: 767px) { - h2 { - font-size: 16px; - } -} -h3 { - font-size: 18px; -} -@media (max-width: 767px) { - h3 { - font-size: 14px; - } -} -h4 { - font-size: 16px; -} -@media (max-width: 767px) { - h4 { - font-size: 12px; - } -} -h5 { - font-size: 14px; -} -@media (max-width: 767px) { - h5 { - font-size: 10px; - } -} -h6 { - font-size: 12px; -} -@media (max-width: 767px) { - h6 { - font-size: 8px; - } -} -p { - margin: 0 0 20px 0; -} -a { - color: #555; - text-decoration: none; - outline: none; - border-bottom: 1px solid #999; - word-wrap: break-word; -} -a:hover { - color: #222; - border-bottom-color: #222; -} -blockquote { - margin: 0; - padding: 0; -} -img { - display: block; - margin: auto; - max-width: 100%; - height: auto; -} -hr { - margin: 40px 0; - height: 3px; - border: none; - background-color: #ddd; - background-image: repeating-linear-gradient(-45deg, #fff, #fff 4px, transparent 4px, transparent 8px); -} -blockquote { - padding: 0 15px; - color: #666; - border-left: 4px solid #ddd; -} -blockquote cite::before { - content: "-"; - padding: 0 5px; -} -dt { - font-weight: 700; -} -dd { - margin: 0; - padding: 0; -} -kbd { - border: 1px solid #ccc; - border-radius: 0.2em; - box-shadow: 0.1em 0.1em 0.2em rgba(0,0,0,0.1); - background-color: #f9f9f9; - font-family: inherit; - background-image: -webkit-linear-gradient(top, #eee, #fff, #eee); - padding: 0.1em 0.3em; - white-space: nowrap; -} -.text-left { - text-align: left; -} -.text-center { - text-align: center; -} -.text-right { - text-align: right; -} -.text-justify { - text-align: justify; -} -.text-nowrap { - white-space: nowrap; -} -.text-lowercase { - text-transform: lowercase; -} -.text-uppercase { - text-transform: uppercase; -} -.text-capitalize { - text-transform: capitalize; -} -.center-block { - display: block; - margin-left: auto; - margin-right: auto; -} -.clearfix:before, -.clearfix:after { - content: " "; - display: table; -} -.clearfix:after { - clear: both; -} -.pullquote { - width: 45%; -} -.pullquote.left { - float: left; - margin-left: 5px; - margin-right: 10px; -} -.pullquote.right { - float: right; - margin-left: 10px; - margin-right: 5px; -} -.affix.affix.affix { - position: fixed; -} -.translation { - margin-top: -20px; - font-size: 14px; - color: #999; -} -.scrollbar-measure { - width: 100px; - height: 100px; - overflow: scroll; - position: absolute; - top: -9999px; -} -.use-motion .motion-element { - opacity: 0; -} -table { - margin: 20px 0; - width: 100%; - border-collapse: collapse; - border-spacing: 0; - border: 1px solid #ddd; - font-size: 14px; - word-wrap: break-all; -} -table>tbody>tr:nth-of-type(odd) { - background-color: #f9f9f9; -} -table>tbody>tr:hover { - background-color: #f5f5f5; -} -caption, -th, -td { - padding: 8px; - text-align: left; - vertical-align: middle; - font-weight: normal; -} -th, -td { - border-bottom: 3px solid #ddd; - border-right: 1px solid #eee; -} -th { - padding-bottom: 10px; - font-weight: 700; -} -td { - border-bottom-width: 1px; -} -html, -body { - height: 100%; -} -.container { - position: relative; - min-height: 100%; -} -.header-inner { - margin: 0 auto; - padding: 100px 0 70px; - width: 700px; -} -@media (min-width: 1200px) { - .container .header-inner { - width: 800px; - } -} -@media (min-width: 1600px) { - .container .header-inner { - width: 1024px; - } -} -.main { - padding-bottom: 150px; -} -.main-inner { - margin: 0 auto; - width: 700px; -} -@media (min-width: 1200px) { - .container .main-inner { - width: 800px; - } -} -@media (min-width: 1600px) { - .container .main-inner { - width: 1024px; - } -} -.footer { - position: absolute; - left: 0; - bottom: 0; - width: 100%; - min-height: 50px; -} -.footer-inner { - box-sizing: border-box; - margin: 20px auto; - width: 700px; -} -@media (min-width: 1200px) { - .container .footer-inner { - width: 800px; - } -} -@media (min-width: 1600px) { - .container .footer-inner { - width: 1024px; - } -} -pre, -.highlight { - overflow: auto; - margin: 20px 0; - padding: 0; - font-size: 14px; - color: #eaeaea; - background: #000; - line-height: 1.6; -} -pre, -code { - font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace; -} -code { - padding: 2px 4px; - word-wrap: break-word; - color: #555; - background: #eee; - border-radius: 3px; - font-size: 14px; -} -pre { - padding: 10px; -} -pre code { - padding: 0; - color: #eaeaea; - background: none; - text-shadow: none; -} -.highlight { - border-radius: 1px; -} -.highlight pre { - border: none; - margin: 0; - padding: 10px 0; -} -.highlight table { - margin: 0; - width: auto; - border: none; -} -.highlight td { - border: none; - padding: 0; -} -.highlight figcaption { - font-size: 1em; - color: #eaeaea; - line-height: 1em; - margin-bottom: 1em; - margin: 0em; - padding: 0.5em; - background: #eee; - border-bottom: 1px solid #e9e9e9; -} -.highlight figcaption:before, -.highlight figcaption:after { - content: " "; - display: table; -} -.highlight figcaption:after { - clear: both; -} -.highlight figcaption a { - float: right; - color: #eaeaea; -} -.highlight figcaption a:hover { - border-bottom-color: #eaeaea; -} -.highlight .gutter pre { - padding-left: 10px; - padding-right: 10px; - color: #666; - text-align: right; - background-color: #292929; -} -.highlight .code pre { - width: 100%; - padding-left: 10px; - padding-right: 10px; - background-color: #000; -} -.highlight .line { - height: 20px; -} -.gutter { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -.gist table { - width: auto; -} -.gist table td { - border: none; -} -pre .deletion { - background: #008000; -} -pre .addition { - background: #800000; -} -pre .meta { - color: #c397d8; -} -pre .comment { - color: #969896; -} -pre .variable, -pre .attribute, -pre .tag, -pre .regexp, -pre .ruby .constant, -pre .xml .tag .title, -pre .xml .pi, -pre .xml .doctype, -pre .html .doctype, -pre .css .id, -pre .css .class, -pre .css .pseudo { - color: #d54e53; -} -pre .number, -pre .preprocessor, -pre .built_in, -pre .literal, -pre .params, -pre .constant, -pre .command { - color: #e78c45; -} -pre .ruby .class .title, -pre .css .rules .attribute, -pre .string, -pre .value, -pre .inheritance, -pre .header, -pre .ruby .symbol, -pre .xml .cdata, -pre .special, -pre .number, -pre .formula { - color: #b9ca4a; -} -pre .title, -pre .css .hexcolor { - color: #70c0b1; -} -pre .function, -pre .python .decorator, -pre .python .title, -pre .ruby .function .title, -pre .ruby .title .keyword, -pre .perl .sub, -pre .javascript .title, -pre .coffeescript .title { - color: #7aa6da; -} -pre .keyword, -pre .javascript .function { - color: #c397d8; -} -.posts-expand .post-body img.full-image { - border: none; -} -.blockquote-center, -.page-home .post-type-quote blockquote, -.page-post-detail .post-type-quote blockquote { - position: relative; - margin: 40px 0; - padding: 0; - border-left: none; - text-align: center; -} -.blockquote-center::before, -.page-home .post-type-quote blockquote::before, -.page-post-detail .post-type-quote blockquote::before, -.blockquote-center::after, -.page-home .post-type-quote blockquote::after, -.page-post-detail .post-type-quote blockquote::after { - position: absolute; - content: ' '; - display: block; - width: 100%; - height: 24px; - opacity: 0.2; - background-repeat: no-repeat; - background-position: 0 -6px; - background-size: 22px 22px; -} -.blockquote-center::before, -.page-home .post-type-quote blockquote::before, -.page-post-detail .post-type-quote blockquote::before { - top: -20px; - background-image: url("../images/quote-l.svg"); - border-top: 1px solid #ccc; -} -.blockquote-center::after, -.page-home .post-type-quote blockquote::after, -.page-post-detail .post-type-quote blockquote::after { - bottom: -20px; - background-image: url("../images/quote-r.svg"); - border-bottom: 1px solid #ccc; - background-position: 100% 8px; -} -.blockquote-center p, -.page-home .post-type-quote blockquote p, -.page-post-detail .post-type-quote blockquote p, -.blockquote-center div, -.page-home .post-type-quote blockquote div, -.page-post-detail .post-type-quote blockquote div { - text-align: center; -} -.post .post-body .group-picture img { - box-sizing: border-box; - padding: 0 3px; - border: none; -} -.post .group-picture-row { - overflow: hidden; - margin-top: 6px; -} -.post .group-picture-row:first-child { - margin-top: 0; -} -.post .group-picture-column { - float: left; -} -.page-post-detail .post-body .group-picture-column { - float: none; - margin-top: 10px; - width: auto !important; -} -.page-post-detail .post-body .group-picture-column img { - margin: 0 auto; -} -.page-archive .group-picture-container { - overflow: hidden; -} -.page-archive .group-picture-row { - float: left; -} -.page-archive .group-picture-row:first-child { - margin-top: 6px; -} -.page-archive .group-picture-column { - max-width: 150px; - max-height: 150px; -} -.post-body .note { - position: relative; - padding: 15px; - margin-bottom: 20px; - border: 1px solid #eee; - border-left-width: 5px; - border-radius: 3px; -} -.post-body .note h2, -.post-body .note h3, -.post-body .note h4, -.post-body .note h5, -.post-body .note h6 { - margin-top: 0; - margin-bottom: 0; - border-bottom: initial; - padding-top: 0 !important; -} -.post-body .note p:first-child, -.post-body .note ul:first-child, -.post-body .note ol:first-child, -.post-body .note table:first-child, -.post-body .note pre:first-child, -.post-body .note blockquote:first-child { - margin-top: 0; -} -.post-body .note p:last-child, -.post-body .note ul:last-child, -.post-body .note ol:last-child, -.post-body .note table:last-child, -.post-body .note pre:last-child, -.post-body .note blockquote:last-child { - margin-bottom: 0; -} -.post-body .note.default { - border-left-color: #777; -} -.post-body .note.default h2, -.post-body .note.default h3, -.post-body .note.default h4, -.post-body .note.default h5, -.post-body .note.default h6 { - color: #777; -} -.post-body .note.primary { - border-left-color: #6f42c1; -} -.post-body .note.primary h2, -.post-body .note.primary h3, -.post-body .note.primary h4, -.post-body .note.primary h5, -.post-body .note.primary h6 { - color: #6f42c1; -} -.post-body .note.info { - border-left-color: #428bca; -} -.post-body .note.info h2, -.post-body .note.info h3, -.post-body .note.info h4, -.post-body .note.info h5, -.post-body .note.info h6 { - color: #428bca; -} -.post-body .note.success { - border-left-color: #5cb85c; -} -.post-body .note.success h2, -.post-body .note.success h3, -.post-body .note.success h4, -.post-body .note.success h5, -.post-body .note.success h6 { - color: #5cb85c; -} -.post-body .note.warning { - border-left-color: #f0ad4e; -} -.post-body .note.warning h2, -.post-body .note.warning h3, -.post-body .note.warning h4, -.post-body .note.warning h5, -.post-body .note.warning h6 { - color: #f0ad4e; -} -.post-body .note.danger { - border-left-color: #d9534f; -} -.post-body .note.danger h2, -.post-body .note.danger h3, -.post-body .note.danger h4, -.post-body .note.danger h5, -.post-body .note.danger h6 { - color: #d9534f; -} -.post-body .label { - display: inline; - padding: 0 2px; - white-space: nowrap; -} -.post-body .label.default { - background-color: #f0f0f0; -} -.post-body .label.primary { - background-color: #efe6f7; -} -.post-body .label.info { - background-color: #e5f2f8; -} -.post-body .label.success { - background-color: #e7f4e9; -} -.post-body .label.warning { - background-color: #fcf6e1; -} -.post-body .label.danger { - background-color: #fae8eb; -} -.post-body .tabs { - position: relative; - display: block; - margin-bottom: 20px; - padding-top: 10px; -} -.post-body .tabs ul.nav-tabs { - margin: 0; - padding: 0; - display: flex; - margin-bottom: -1px; -} -@media (max-width: 413px) { - .post-body .tabs ul.nav-tabs { - display: block; - margin-bottom: 5px; - } -} -.post-body .tabs ul.nav-tabs li.tab { - list-style-type: none !important; - margin: 0 0.25em 0 0; - border-top: 3px solid transparent; - border-left: 1px solid transparent; - border-right: 1px solid transparent; -} -@media (max-width: 413px) { - .post-body .tabs ul.nav-tabs li.tab { - margin: initial; - border-top: 1px solid transparent; - border-left: 3px solid transparent; - border-right: 1px solid transparent; - border-bottom: 1px solid transparent; - } -} -.post-body .tabs ul.nav-tabs li.tab a { - outline: 0; - border-bottom: initial; - display: block; - line-height: 1.8em; - padding: 0.25em 0.75em; - transition-duration: 0.2s; - transition-timing-function: ease-out; - transition-delay: 0s; -} -.post-body .tabs ul.nav-tabs li.tab a i { - width: 1.285714285714286em; -} -.post-body .tabs ul.nav-tabs li.tab.active { - border-top: 3px solid #fc6423; - border-left: 1px solid #ddd; - border-right: 1px solid #ddd; - background-color: #fff; -} -@media (max-width: 413px) { - .post-body .tabs ul.nav-tabs li.tab.active { - border-top: 1px solid #ddd; - border-left: 3px solid #fc6423; - border-right: 1px solid #ddd; - border-bottom: 1px solid #ddd; - } -} -.post-body .tabs ul.nav-tabs li.tab.active a { - cursor: default; - color: #555; -} -.post-body .tabs .tab-content { - background-color: #fff; -} -.post-body .tabs .tab-content .tab-pane { - border: 1px solid #ddd; - padding: 20px 20px 0 20px; -} -.post-body .tabs .tab-content .tab-pane:not(.active) { - display: none !important; -} -.post-body .tabs .tab-content .tab-pane.active { - display: block !important; -} -.btn { - display: inline-block; - padding: 0 20px; - font-size: 14px; - color: #fff; - background: #222; - border: 2px solid #222; - text-decoration: none; - border-radius: 0; - transition-property: background-color; - transition-duration: 0.2s; - transition-timing-function: ease-in-out; - transition-delay: 0s; - line-height: 2; -} -.btn:hover { - border-color: #222; - color: #222; - background: #fff; -} -.btn +.btn { - margin: 0 0 8px 8px; -} -.btn .fa-fw { - width: 1.285714285714286em; - text-align: left; -} -.btn-bar { - display: block; - width: 22px; - height: 2px; - background: #555; - border-radius: 1px; -} -.btn-bar+.btn-bar { - margin-top: 4px; -} -.pagination { - margin: 120px 0 40px; - text-align: center; - border-top: 1px solid #eee; -} -.page-number-basic, -.pagination .prev, -.pagination .next, -.pagination .page-number, -.pagination .space { - display: inline-block; - position: relative; - top: -1px; - margin: 0 10px; - padding: 0 11px; -} -@media (max-width: 767px) { - .page-number-basic, - .pagination .prev, - .pagination .next, - .pagination .page-number, - .pagination .space { - margin: 0 5px; - } -} -.pagination .prev, -.pagination .next, -.pagination .page-number { - border-bottom: 0; - border-top: 1px solid #eee; - transition-property: border-color; - transition-duration: 0.2s; - transition-timing-function: ease-in-out; - transition-delay: 0s; -} -.pagination .prev:hover, -.pagination .next:hover, -.pagination .page-number:hover { - border-top-color: #222; -} -.pagination .space { - padding: 0; - margin: 0; -} -.pagination .prev { - margin-left: 0; -} -.pagination .next { - margin-right: 0; -} -.pagination .page-number.current { - color: #fff; - background: #ccc; - border-top-color: #ccc; -} -@media (max-width: 767px) { - .pagination { - border-top: none; - } - .pagination .prev, - .pagination .next, - .pagination .page-number { - margin-bottom: 10px; - border-top: 0; - border-bottom: 1px solid #eee; - padding: 0 10px; - } - .pagination .prev:hover, - .pagination .next:hover, - .pagination .page-number:hover { - border-bottom-color: #222; - } -} -.comments { - margin: 60px 20px 0; -} -.tag-cloud { - text-align: center; -} -.tag-cloud a { - display: inline-block; - margin: 10px; -} -.back-to-top { - box-sizing: border-box; - position: fixed; - bottom: -100px; - right: 30px; - z-index: 1050; - padding: 0 6px; - width: 24px; - background: #222; - font-size: 12px; - opacity: 1; - color: #fff; - cursor: pointer; - text-align: center; - -webkit-transform: translateZ(0); - transition-property: bottom; - transition-duration: 0.2s; - transition-timing-function: ease-in-out; - transition-delay: 0s; -} -@media (min-width: 768px) and (max-width: 991px) { - .back-to-top { - display: none !important; - } -} -@media (max-width: 767px) { - .back-to-top { - display: none !important; - } -} -.back-to-top.back-to-top-on { - bottom: 19px; -} -.header { - background: transparent; -} -.header-inner { - position: relative; -} -.headband { - height: 3px; - background: #222; -} -.site-meta { - margin: 0; - text-align: center; -} -@media (max-width: 767px) { - .site-meta { - text-align: center; - } -} -.brand { - position: relative; - display: inline-block; - padding: 0 40px; - color: #fff; - background: #222; - border-bottom: none; -} -.brand:hover { - color: #fff; -} -.logo { - display: inline-block; - margin-right: 5px; - line-height: 36px; - vertical-align: top; -} -.site-title { - display: inline-block; - vertical-align: top; - line-height: 36px; - font-size: 20px; - font-weight: normal; - font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif; -} -.site-subtitle { - margin-top: 10px; - font-size: 13px; - color: #999; -} -.use-motion .brand { - opacity: 0; -} -.use-motion .logo, -.use-motion .site-title, -.use-motion .site-subtitle { - opacity: 0; - position: relative; - top: -10px; -} -.site-nav-toggle { - display: none; - position: absolute; - top: 10px; - left: 10px; -} -@media (max-width: 767px) { - .site-nav-toggle { - display: block; - } -} -.site-nav-toggle button { - margin-top: 2px; - padding: 9px 10px; - background: transparent; - border: none; -} -@media (max-width: 767px) { - .site-nav { - display: none; - margin: 0 -10px; - padding: 0 10px; - clear: both; - border-top: 1px solid #ddd; - } -} -@media (min-width: 768px) and (max-width: 991px) { - .site-nav { - display: block !important; - } -} -@media (min-width: 992px) { - .site-nav { - display: block !important; - } -} -.menu { - margin-top: 20px; - padding-left: 0; - text-align: center; -} -.menu .menu-item { - display: inline-block; - margin: 0 10px; - list-style: none; -} -@media screen and (max-width: 767px) { - .menu .menu-item { - margin-top: 10px; - } -} -.menu .menu-item a { - display: block; - font-size: 13px; - line-height: inherit; - border-bottom: 1px solid transparent; - transition-property: border-color; - transition-duration: 0.2s; - transition-timing-function: ease-in-out; - transition-delay: 0s; -} -.menu .menu-item a:hover { - border-bottom-color: #222; -} -.menu .menu-item .fa { - margin-right: 5px; -} -.use-motion .menu-item { - opacity: 0; -} -.post-body { - font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif; -} -@media (max-width: 767px) { - .post-body { - word-break: break-word; - } -} -.post-body .fancybox img { - display: block !important; - margin: 0 auto; - cursor: pointer; - cursor: zoom-in; - cursor: -webkit-zoom-in; -} -.post-body .image-caption, -.post-body .figure .caption { - margin: -20px auto 15px; - text-align: center; - font-size: 14px; - color: #999; - font-weight: bold; - line-height: 1; -} -.post-sticky-flag { - display: inline-block; - font-size: 16px; - -ms-transform: rotate(30deg); - -webkit-transform: rotate(30deg); - -moz-transform: rotate(30deg); - -ms-transform: rotate(30deg); - -o-transform: rotate(30deg); - transform: rotate(30deg); -} -.use-motion .post-block, -.use-motion .pagination, -.use-motion .comments { - opacity: 0; -} -.use-motion .post-header { - opacity: 0; -} -.use-motion .post-body { - opacity: 0; -} -.use-motion .collection-title { - opacity: 0; -} -.posts-expand { - padding-top: 40px; -} -@media (max-width: 767px) { - .posts-expand { - margin: 0 20px; - } - .post-body pre .gutter pre { - padding-right: 10px; - } - .post-body .highlight { - margin-left: 0px; - margin-right: 0px; - padding: 0; - } - .post-body .highlight .gutter pre { - padding-right: 10px; - } -} -@media (min-width: 992px) { - .posts-expand .post-body { - text-align: justify; - } -} -.posts-expand .post-body h2, -.posts-expand .post-body h3, -.posts-expand .post-body h4, -.posts-expand .post-body h5, -.posts-expand .post-body h6 { - padding-top: 10px; -} -.posts-expand .post-body h2 .header-anchor, -.posts-expand .post-body h3 .header-anchor, -.posts-expand .post-body h4 .header-anchor, -.posts-expand .post-body h5 .header-anchor, -.posts-expand .post-body h6 .header-anchor { - float: right; - margin-left: 10px; - color: #ccc; - border-bottom-style: none; - visibility: hidden; -} -.posts-expand .post-body h2 .header-anchor:hover, -.posts-expand .post-body h3 .header-anchor:hover, -.posts-expand .post-body h4 .header-anchor:hover, -.posts-expand .post-body h5 .header-anchor:hover, -.posts-expand .post-body h6 .header-anchor:hover { - color: inherit; -} -.posts-expand .post-body h2:hover .header-anchor, -.posts-expand .post-body h3:hover .header-anchor, -.posts-expand .post-body h4:hover .header-anchor, -.posts-expand .post-body h5:hover .header-anchor, -.posts-expand .post-body h6:hover .header-anchor { - visibility: visible; -} -.posts-expand .post-body ul li { - list-style: circle; -} -.posts-expand .post-body img { - box-sizing: border-box; - margin: auto; - padding: 3px; - border: 1px solid #ddd; -} -.posts-expand .post-body .fancybox img { - margin: 0 auto 25px; -} -.posts-expand .post-body img { - margin: 0 auto 25px; -} -@media (max-width: 767px) { - .posts-collapse { - margin: 0 20px; - } - .posts-collapse .post-title, - .posts-collapse .post-meta { - display: block; - width: auto; - text-align: left; - } -} -.posts-collapse { - position: relative; - z-index: 1010; - margin-left: 55px; -} -.posts-collapse::after { - content: " "; - position: absolute; - top: 20px; - left: 0; - margin-left: -2px; - width: 4px; - height: 100%; - background: #f5f5f5; - z-index: -1; -} -@media (max-width: 767px) { - .posts-collapse { - margin: 0 20px; - } -} -.posts-collapse .collection-title { - position: relative; - margin: 60px 0; -} -.posts-collapse .collection-title h1, -.posts-collapse .collection-title h2 { - margin-left: 20px; -} -.posts-collapse .collection-title small { - color: #bbb; - margin-left: 5px; -} -.posts-collapse .collection-title::before { - content: " "; - position: absolute; - left: 0; - top: 50%; - margin-left: -4px; - margin-top: -4px; - width: 8px; - height: 8px; - background: #bbb; - border-radius: 50%; -} -.posts-collapse .post { - margin: 30px 0; -} -.posts-collapse .post-header { - position: relative; - transition-duration: 0.2s; - transition-timing-function: ease-in-out; - transition-delay: 0s; - transition-property: border; - border-bottom: 1px dashed #ccc; -} -.posts-collapse .post-header::before { - content: " "; - position: absolute; - left: 0; - top: 12px; - width: 6px; - height: 6px; - margin-left: -4px; - background: #bbb; - border-radius: 50%; - border: 1px solid #fff; - transition-duration: 0.2s; - transition-timing-function: ease-in-out; - transition-delay: 0s; - transition-property: background; -} -.posts-collapse .post-header:hover { - border-bottom-color: #666; -} -.posts-collapse .post-header:hover::before { - background: #222; -} -.posts-collapse .post-meta { - position: absolute; - font-size: 12px; - left: 20px; - top: 5px; -} -.posts-collapse .post-comments-count { - display: none; -} -.posts-collapse .post-title { - margin-left: 60px; - font-size: 16px; - font-weight: normal; - line-height: inherit; -} -.posts-collapse .post-title::after { - margin-left: 3px; - opacity: 0.6; -} -.posts-collapse .post-title a { - color: #666; - border-bottom: none; -} -.page-home .post-type-quote .post-header, -.page-post-detail .post-type-quote .post-header, -.page-home .post-type-quote .post-tags, -.page-post-detail .post-type-quote .post-tags { - display: none; -} -.posts-expand .post-title { - text-align: center; - word-break: break-word; - font-weight: 400; -} -.posts-expand .post-title-link { - display: inline-block; - position: relative; - color: #555; - border-bottom: none; - line-height: 1.2; - vertical-align: top; -} -.posts-expand .post-title-link::before { - content: ""; - position: absolute; - width: 100%; - height: 2px; - bottom: 0; - left: 0; - background-color: #000; - visibility: hidden; - -webkit-transform: scaleX(0); - -moz-transform: scaleX(0); - -ms-transform: scaleX(0); - -o-transform: scaleX(0); - transform: scaleX(0); - transition-duration: 0.2s; - transition-timing-function: ease-in-out; - transition-delay: 0s; -} -.posts-expand .post-title-link:hover::before { - visibility: visible; - -webkit-transform: scaleX(1); - -moz-transform: scaleX(1); - -ms-transform: scaleX(1); - -o-transform: scaleX(1); - transform: scaleX(1); -} -.posts-expand .post-title-link .fa { - font-size: 16px; -} -.posts-expand .post-meta { - margin: 3px 0 60px 0; - color: #999; - font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif; - font-size: 12px; - text-align: center; -} -.posts-expand .post-meta .post-category-list { - display: inline-block; - margin: 0; - padding: 3px; -} -.posts-expand .post-meta .post-category-list-link { - color: #999; -} -.posts-expand .post-meta .post-description { - font-size: 14px; - margin-top: 2px; -} -.posts-expand .post-meta time { - border-bottom: 1px dashed #999; - cursor: help; -} -.post-meta-divider { - margin: 0 0.5em; -} -.post-meta-item-icon { - margin-right: 3px; -} -@media (min-width: 768px) and (max-width: 991px) { - .post-meta-item-icon { - display: inline-block; - } -} -@media (max-width: 767px) { - .post-meta-item-icon { - display: inline-block; - } -} -@media (min-width: 768px) and (max-width: 991px) { - .post-meta-item-text { - display: none; - } -} -@media (max-width: 767px) { - .post-meta-item-text { - display: none; - } -} -.post-button { - margin-top: 40px; -} -.posts-expand .post-tags { - margin-top: 40px; - text-align: center; -} -.posts-expand .post-tags a { - display: inline-block; - margin-right: 10px; - font-size: 13px; -} -.post-nav { - display: table; - margin-top: 15px; - width: 100%; - border-top: 1px solid #eee; -} -.post-nav-divider { - display: table-cell; - width: 10%; -} -.post-nav-item { - display: table-cell; - padding: 10px 0 0 0; - width: 45%; - vertical-align: top; -} -.post-nav-item a { - position: relative; - display: block; - line-height: 25px; - font-size: 14px; - color: #555; - border-bottom: none; -} -.post-nav-item a:hover { - color: #222; - border-bottom: none; -} -.post-nav-item a:active { - top: 2px; -} -.post-nav-item .fa { - position: absolute; - top: 8px; - left: 0; - font-size: 12px; -} -.post-nav-next a { - padding-left: 15px; -} -.post-nav-prev { - text-align: right; -} -.post-nav-prev a { - padding-right: 15px; -} -.post-nav-prev .fa { - right: 0; - left: auto; -} -.posts-expand .post-eof { - display: block; - margin: 80px auto 60px; - width: 8%; - height: 1px; - background: #ccc; - text-align: center; -} -.post:last-child .post-eof.post-eof.post-eof { - display: none; -} -.post-gallery { - display: table; - table-layout: fixed; - width: 100%; - border-collapse: separate; -} -.post-gallery-row { - display: table-row; -} -.post-gallery .post-gallery-img { - display: table-cell; - text-align: center; - vertical-align: middle; - border: none; -} -.post-gallery .post-gallery-img img { - max-width: 100%; - max-height: 100%; - border: none; -} -.fancybox-close, -.fancybox-close:hover { - border: none; -} -#rewardButton { - cursor: pointer; - border: 0; - outline: 0; - border-radius: 5px; - padding: 0; - margin: 0; - letter-spacing: normal; - text-transform: none; - text-indent: 0px; - text-shadow: none; -} -#rewardButton span { - display: inline-block; - width: 80px; - height: 35px; - border-radius: 5px; - color: #fff; - font-weight: 400; - font-style: normal; - font-variant: normal; - font-stretch: normal; - font-size: 18px; - font-family: "Microsoft Yahei"; - background: #f44336; -} -#rewardButton span:hover { - background: #f7877f; -} -#QR { - padding-top: 20px; -} -#QR a { - border: 0; -} -#QR img { - width: 180px; - max-width: 100%; - display: inline-block; - margin: 0.8em 2em 0 2em; -} -#QR > div:hover p { - animation: roll 0.1s infinite linear; - -webkit-animation: roll 0.1s infinite linear; - -moz-animation: roll 0.1s infinite linear; -} -@-moz-keyframes roll { - from { - -webkit-transform: rotateZ(30deg); - -moz-transform: rotateZ(30deg); - -ms-transform: rotateZ(30deg); - -o-transform: rotateZ(30deg); - transform: rotateZ(30deg); - } - to { - -webkit-transform: rotateZ(-30deg); - -moz-transform: rotateZ(-30deg); - -ms-transform: rotateZ(-30deg); - -o-transform: rotateZ(-30deg); - transform: rotateZ(-30deg); - } -} -@-webkit-keyframes roll { - from { - -webkit-transform: rotateZ(30deg); - -moz-transform: rotateZ(30deg); - -ms-transform: rotateZ(30deg); - -o-transform: rotateZ(30deg); - transform: rotateZ(30deg); - } - to { - -webkit-transform: rotateZ(-30deg); - -moz-transform: rotateZ(-30deg); - -ms-transform: rotateZ(-30deg); - -o-transform: rotateZ(-30deg); - transform: rotateZ(-30deg); - } -} -@-o-keyframes roll { - from { - -webkit-transform: rotateZ(30deg); - -moz-transform: rotateZ(30deg); - -ms-transform: rotateZ(30deg); - -o-transform: rotateZ(30deg); - transform: rotateZ(30deg); - } - to { - -webkit-transform: rotateZ(-30deg); - -moz-transform: rotateZ(-30deg); - -ms-transform: rotateZ(-30deg); - -o-transform: rotateZ(-30deg); - transform: rotateZ(-30deg); - } -} -@keyframes roll { - from { - -webkit-transform: rotateZ(30deg); - -moz-transform: rotateZ(30deg); - -ms-transform: rotateZ(30deg); - -o-transform: rotateZ(30deg); - transform: rotateZ(30deg); - } - to { - -webkit-transform: rotateZ(-30deg); - -moz-transform: rotateZ(-30deg); - -ms-transform: rotateZ(-30deg); - -o-transform: rotateZ(-30deg); - transform: rotateZ(-30deg); - } -} -.rtl.post-body p, -.rtl.post-body a, -.rtl.post-body h1, -.rtl.post-body h2, -.rtl.post-body h3, -.rtl.post-body h4, -.rtl.post-body h5, -.rtl.post-body h6, -.rtl.post-body li, -.rtl.post-body ul, -.rtl.post-body ol { - direction: rtl; - font-family: UKIJ Ekran; -} -.rtl.post-title { - font-family: UKIJ Ekran; -} -.sidebar { - position: fixed; - right: 0; - top: 0; - bottom: 0; - width: 0; - z-index: 1040; - box-shadow: inset 0 2px 6px #000; - background: #222; - -webkit-transform: translateZ(0); -} -.sidebar a, -.sidebar .exturl { - color: #999; - border-bottom-color: #555; -} -.sidebar a:hover, -.sidebar .exturl:hover { - color: #eee; -} -@media (min-width: 768px) and (max-width: 991px) { - .sidebar { - display: none !important; - } -} -@media (max-width: 767px) { - .sidebar { - display: none !important; - } -} -.sidebar-inner { - position: relative; - padding: 20px 10px; - color: #999; - text-align: center; -} -.site-overview-wrap { - overflow: hidden; -} -.site-overview { - overflow-y: auto; - overflow-x: hidden; -} -.sidebar-toggle { - position: fixed; - right: 30px; - bottom: 45px; - width: 14px; - height: 14px; - padding: 5px; - background: #222; - line-height: 0; - z-index: 1050; - cursor: pointer; - -webkit-transform: translateZ(0); -} -@media (min-width: 768px) and (max-width: 991px) { - .sidebar-toggle { - display: none !important; - } -} -@media (max-width: 767px) { - .sidebar-toggle { - display: none !important; - } -} -.sidebar-toggle-line { - position: relative; - display: inline-block; - vertical-align: top; - height: 2px; - width: 100%; - background: #fff; - margin-top: 3px; -} -.sidebar-toggle-line:first-child { - margin-top: 0; -} -.site-author-image { - display: block; - margin: 0 auto; - padding: 2px; - max-width: 96px; - height: auto; - border: 2px solid #333; - opacity: 1; -} -img:hover { - -webkit-transform: rotateZ(360deg); - -moz-transform: rotateZ(360deg); - -ms-transform: rotate(360deg); - -webkit-transform: rotateZ(360deg); - -moz-transform: rotateZ(360deg); - -ms-transform: rotateZ(360deg); - -o-transform: rotateZ(360deg); - transform: rotateZ(360deg); -} -.site-author-name { - margin: 5px 0 0; - text-align: center; - color: #f5f5f5; - font-weight: normal; -} -.site-description { - margin-top: 5px; - text-align: center; - font-size: 14px; - color: #999; -} -.site-state { - overflow: hidden; - line-height: 1.4; - white-space: nowrap; - text-align: center; -} -.site-state-item { - display: inline-block; - padding: 0 15px; - border-left: 1px solid #333; -} -.site-state-item:first-child { - border-left: none; -} -.site-state-item a { - border-bottom: none; -} -.site-state-item-count { - display: block; - text-align: center; - color: inherit; - font-weight: 600; - font-size: 18px; -} -.site-state-item-name { - font-size: 13px; - color: inherit; -} -.feed-link { - margin-top: 20px; -} -.feed-link a { - display: inline-block; - padding: 0 15px; - color: #fc6423; - border: 1px solid #fc6423; - border-radius: 4px; -} -.feed-link a i { - color: #fc6423; - font-size: 14px; -} -.feed-link a:hover { - color: #fff; - background: #fc6423; -} -.feed-link a:hover i { - color: #fff; -} -.links-of-author { - margin-top: 20px; -} -.links-of-author a, -.links-of-author .exturl { - display: inline-block; - vertical-align: middle; - margin-right: 10px; - margin-bottom: 10px; - border-bottom-color: #555; - font-size: 13px; -} -.links-of-author a:before, -.links-of-author .exturl:before { - display: inline-block; - vertical-align: middle; - margin-right: 3px; - content: " "; - width: 4px; - height: 4px; - border-radius: 50%; - background: #c4bdba; -} -.links-of-blogroll { - font-size: 13px; -} -.links-of-blogroll-title { - margin-top: 20px; - font-size: 14px; - font-weight: 600; -} -.links-of-blogroll-list { - margin: 0; - padding: 0; - list-style: none; -} -.links-of-blogroll-item { - padding: 2px 10px; -} -.links-of-blogroll-item a { - max-width: 280px; - box-sizing: border-box; - display: inline-block; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} -.sidebar-nav { - margin: 0 0 20px; - padding-left: 0; -} -.sidebar-nav li { - display: inline-block; - cursor: pointer; - border-bottom: 1px solid transparent; - font-size: 14px; - color: #555; -} -.sidebar-nav li:hover { - color: #f5f5f5; -} -.page-post-detail .sidebar-nav-toc { - padding: 0 5px; -} -.page-post-detail .sidebar-nav-overview { - margin-left: 10px; -} -.sidebar-nav .sidebar-nav-active { - color: #87daff; - border-bottom-color: #87daff; -} -.sidebar-nav .sidebar-nav-active:hover { - color: #87daff; -} -.sidebar-panel { - display: none; -} -.sidebar-panel-active { - display: block; -} -.post-toc-empty { - font-size: 14px; - color: #666; -} -.post-toc-wrap { - overflow: hidden; -} -.post-toc { - overflow: auto; -} -.post-toc ol { - margin: 0; - padding: 0 2px 5px 10px; - text-align: left; - list-style: none; - font-size: 14px; -} -.post-toc ol > ol { - padding-left: 0; -} -.post-toc ol a { - transition-duration: 0.2s; - transition-timing-function: ease-in-out; - transition-delay: 0s; - transition-property: all; - color: #999; - border-bottom-color: #555; -} -.post-toc ol a:hover { - color: #ccc; - border-bottom-color: #ccc; -} -.post-toc .nav-item { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - line-height: 1.8; -} -.post-toc .nav .nav-child { - display: none; -} -.post-toc .nav .active > .nav-child { - display: block; -} -.post-toc .nav .active-current > .nav-child { - display: block; -} -.post-toc .nav .active-current > .nav-child > .nav-item { - display: block; -} -.post-toc .nav .active > a { - color: #87daff; - border-bottom-color: #87daff; -} -.post-toc .nav .active-current > a { - color: #87daff; -} -.post-toc .nav .active-current > a:hover { - color: #87daff; -} -.footer { - font-size: 14px; - color: #999; -} -.footer img { - border: none; -} -.footer-inner { - text-align: center; -} -#animate { - animation: iconAnimate 1.33s ease-in-out infinite; -} -.with-love { - display: inline-block; - margin: 0 5px; - color: #808080; -} -.powered-by, -.theme-info { - display: inline-block; -} -.cc-license { - margin-top: 10px; - text-align: center; -} -.cc-license .cc-opacity { - opacity: 0.7; - border-bottom: none; -} -.cc-license .cc-opacity:hover { - opacity: 0.9; -} -.cc-license img { - display: inline-block; -} -@-moz-keyframes iconAnimate { - 0%, 100% { - -webkit-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); - -o-transform: scale(1); - transform: scale(1); - } - 10%, 30% { - -webkit-transform: scale(0.9); - -moz-transform: scale(0.9); - -ms-transform: scale(0.9); - -o-transform: scale(0.9); - transform: scale(0.9); - } - 20%, 40%, 60%, 80% { - -webkit-transform: scale(1.1); - -moz-transform: scale(1.1); - -ms-transform: scale(1.1); - -o-transform: scale(1.1); - transform: scale(1.1); - } - 50%, 70% { - -webkit-transform: scale(1.1); - -moz-transform: scale(1.1); - -ms-transform: scale(1.1); - -o-transform: scale(1.1); - transform: scale(1.1); - } -} -@-webkit-keyframes iconAnimate { - 0%, 100% { - -webkit-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); - -o-transform: scale(1); - transform: scale(1); - } - 10%, 30% { - -webkit-transform: scale(0.9); - -moz-transform: scale(0.9); - -ms-transform: scale(0.9); - -o-transform: scale(0.9); - transform: scale(0.9); - } - 20%, 40%, 60%, 80% { - -webkit-transform: scale(1.1); - -moz-transform: scale(1.1); - -ms-transform: scale(1.1); - -o-transform: scale(1.1); - transform: scale(1.1); - } - 50%, 70% { - -webkit-transform: scale(1.1); - -moz-transform: scale(1.1); - -ms-transform: scale(1.1); - -o-transform: scale(1.1); - transform: scale(1.1); - } -} -@-o-keyframes iconAnimate { - 0%, 100% { - -webkit-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); - -o-transform: scale(1); - transform: scale(1); - } - 10%, 30% { - -webkit-transform: scale(0.9); - -moz-transform: scale(0.9); - -ms-transform: scale(0.9); - -o-transform: scale(0.9); - transform: scale(0.9); - } - 20%, 40%, 60%, 80% { - -webkit-transform: scale(1.1); - -moz-transform: scale(1.1); - -ms-transform: scale(1.1); - -o-transform: scale(1.1); - transform: scale(1.1); - } - 50%, 70% { - -webkit-transform: scale(1.1); - -moz-transform: scale(1.1); - -ms-transform: scale(1.1); - -o-transform: scale(1.1); - transform: scale(1.1); - } -} -@keyframes iconAnimate { - 0%, 100% { - -webkit-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); - -o-transform: scale(1); - transform: scale(1); - } - 10%, 30% { - -webkit-transform: scale(0.9); - -moz-transform: scale(0.9); - -ms-transform: scale(0.9); - -o-transform: scale(0.9); - transform: scale(0.9); - } - 20%, 40%, 60%, 80% { - -webkit-transform: scale(1.1); - -moz-transform: scale(1.1); - -ms-transform: scale(1.1); - -o-transform: scale(1.1); - transform: scale(1.1); - } - 50%, 70% { - -webkit-transform: scale(1.1); - -moz-transform: scale(1.1); - -ms-transform: scale(1.1); - -o-transform: scale(1.1); - transform: scale(1.1); - } -} -.fa { - font-family: FontAwesome !important; -} -.local-search-pop-overlay { - position: fixed; - width: 100%; - height: 100%; - top: 0; - left: 0; - z-index: 2080; - background-color: rgba(0,0,0,0.3); -} -.local-search-popup { - display: none; - position: fixed; - top: 10%; - left: 50%; - margin-left: -350px; - width: 700px; - height: 80%; - padding: 0; - background: #fff; - color: #333; - z-index: 9999; - border-radius: 5px; -} -@media (max-width: 767px) { - .local-search-popup { - padding: 0; - top: 0; - left: 0; - margin: 0; - width: 100%; - height: 100%; - border-radius: 0; - } -} -.local-search-popup ul.search-result-list { - padding: 0; - margin: 0 5px; -} -.local-search-popup p.search-result { - border-bottom: 1px dashed #ccc; - padding: 5px 0; -} -.local-search-popup a.search-result-title { - font-weight: bold; - font-size: 16px; -} -.local-search-popup .search-keyword { - border-bottom: 1px dashed #f00; - font-weight: bold; - color: #f00; -} -.local-search-popup .local-search-header { - padding: 5px; - height: 36px; - background: #f5f5f5; - border-top-left-radius: 5px; - border-top-right-radius: 5px; -} -.local-search-popup #local-search-result { - overflow: auto; - position: relative; - padding: 5px 25px; - height: calc(100% - 55px); -} -.local-search-popup .local-search-input-wrapper { - display: inline-block; - width: calc(100% - 90px); - height: 36px; - line-height: 36px; - padding: 0 5px; -} -.local-search-popup .local-search-input-wrapper input { - padding: 8px 0; - height: 20px; - display: block; - width: 100%; - outline: none; - border: none; - background: transparent; - vertical-align: middle; -} -.local-search-popup .search-icon, -.local-search-popup .popup-btn-close { - display: inline-block; - font-size: 18px; - color: #999; - height: 36px; - width: 18px; - padding-left: 10px; - padding-right: 10px; -} -.local-search-popup .search-icon { - float: left; -} -.local-search-popup .popup-btn-close { - border-left: 1px solid #eee; - float: right; - cursor: pointer; -} -.local-search-popup #no-result { - position: absolute; - left: 50%; - top: 50%; - -webkit-transform: translate(-50%, -50%); - -webkit-transform: translate(-50%, -50%); - -moz-transform: translate(-50%, -50%); - -ms-transform: translate(-50%, -50%); - -o-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - color: #ccc; -} -.site-uv, -.site-pv, -.page-pv { - display: inline-block; -} -.site-uv .busuanzi-value, -.site-pv .busuanzi-value, -.page-pv .busuanzi-value { - margin: 0 5px; -} -.page-archive .archive-page-counter { - position: relative; - top: 3px; - left: 20px; -} -@media (max-width: 767px) { - .page-archive .archive-page-counter { - top: 5px; - } -} -.page-archive .posts-collapse .archive-move-on { - position: absolute; - top: 11px; - left: 0; - margin-left: -6px; - width: 10px; - height: 10px; - opacity: 0.5; - background: #555; - border: 1px solid #fff; - border-radius: 50%; -} -.category-all-page .category-all-title { - text-align: center; -} -.category-all-page .category-all { - margin-top: 20px; -} -.category-all-page .category-list { - margin: 0; - padding: 0; - list-style: none; -} -.category-all-page .category-list-item { - margin: 5px 10px; -} -.category-all-page .category-list-count { - color: #bbb; -} -.category-all-page .category-list-count:before { - display: inline; - content: " ("; -} -.category-all-page .category-list-count:after { - display: inline; - content: ") "; -} -.category-all-page .category-list-child { - padding-left: 10px; -} -#schedule ul#event-list { - padding-left: 30px; -} -#schedule ul#event-list hr { - margin: 20px 0 45px 0 !important; - background: #222; -} -#schedule ul#event-list hr:after { - display: inline-block; - content: 'NOW'; - background: #222; - color: #fff; - font-weight: bold; - text-align: right; - padding: 0 5px; -} -#schedule ul#event-list li.event { - margin: 20px 0px; - background: #f9f9f9; - padding-left: 10px; - min-height: 40px; -} -#schedule ul#event-list li.event h2.event-summary { - margin: 0; - padding-bottom: 3px; -} -#schedule ul#event-list li.event h2.event-summary:before { - display: inline-block; - font-family: FontAwesome; - font-size: 8px; - content: '\f111'; - vertical-align: middle; - margin-right: 25px; - color: #bbb; -} -#schedule ul#event-list li.event span.event-relative-time { - display: inline-block; - font-size: 12px; - font-weight: 400; - padding-left: 12px; - color: #bbb; -} -#schedule ul#event-list li.event span.event-details { - display: block; - color: #bbb; - margin-left: 56px; - padding-top: 3px; - padding-bottom: 6px; - text-indent: -24px; - line-height: 18px; -} -#schedule ul#event-list li.event span.event-details:before { - text-indent: 0; - display: inline-block; - width: 14px; - font-family: FontAwesome; - text-align: center; - margin-right: 9px; - color: #bbb; -} -#schedule ul#event-list li.event span.event-details.event-location:before { - content: '\f041'; -} -#schedule ul#event-list li.event span.event-details.event-duration:before { - content: '\f017'; -} -#schedule ul#event-list li.event-past { - background: #fcfcfc; -} -#schedule ul#event-list li.event-past > * { - opacity: 0.6; -} -#schedule ul#event-list li.event-past h2.event-summary { - color: #bbb; -} -#schedule ul#event-list li.event-past h2.event-summary:before { - color: #dfdfdf; -} -#schedule ul#event-list li.event-now { - background: #222; - color: #fff; - padding: 15px 0 15px 10px; -} -#schedule ul#event-list li.event-now h2.event-summary:before { - -webkit-transform: scale(1.2); - -moz-transform: scale(1.2); - -ms-transform: scale(1.2); - -o-transform: scale(1.2); - transform: scale(1.2); - color: #fff; - animation: dot-flash 1s alternate infinite ease-in-out; -} -#schedule ul#event-list li.event-now * { - color: #fff !important; -} -@-moz-keyframes dot-flash { - from { - opacity: 1; - -webkit-transform: scale(1.1); - -moz-transform: scale(1.1); - -ms-transform: scale(1.1); - -o-transform: scale(1.1); - transform: scale(1.1); - } - to { - opacity: 0; - -webkit-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); - -o-transform: scale(1); - transform: scale(1); - } -} -@-webkit-keyframes dot-flash { - from { - opacity: 1; - -webkit-transform: scale(1.1); - -moz-transform: scale(1.1); - -ms-transform: scale(1.1); - -o-transform: scale(1.1); - transform: scale(1.1); - } - to { - opacity: 0; - -webkit-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); - -o-transform: scale(1); - transform: scale(1); - } -} -@-o-keyframes dot-flash { - from { - opacity: 1; - -webkit-transform: scale(1.1); - -moz-transform: scale(1.1); - -ms-transform: scale(1.1); - -o-transform: scale(1.1); - transform: scale(1.1); - } - to { - opacity: 0; - -webkit-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); - -o-transform: scale(1); - transform: scale(1); - } -} -@keyframes dot-flash { - from { - opacity: 1; - -webkit-transform: scale(1.1); - -moz-transform: scale(1.1); - -ms-transform: scale(1.1); - -o-transform: scale(1.1); - transform: scale(1.1); - } - to { - opacity: 0; - -webkit-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); - -o-transform: scale(1); - transform: scale(1); - } -} -.page-post-detail .sidebar-toggle-line { - background: #87daff; -} -.page-post-detail .comments { - overflow: hidden; -} -ul.breadcrumb { - list-style: none; - margin: 1em 0; - padding: 0 2em; - text-align: center; - font-size: 12px; -} -ul.breadcrumb li { - display: inline; -} -ul.breadcrumb li+li:before { - padding: 0.5em; - font-weight: normal; - content: "/\00a0"; -} -ul.breadcrumb li+li:last-child { - font-weight: bold; -} -@media (max-width: 767px) { - .header-inner, - .container .main-inner, - .footer-inner { - width: auto; - } -} -embed { - display: block; - margin: 0px auto 25px auto; -} -.custom-logo .site-meta-headline { - text-align: center; -} -.custom-logo .brand { - background: none; -} -.custom-logo .site-title { - margin: 10px auto 0; - font-size: 24px; - color: #222; -} -.custom-logo .site-title a { - border: none; -} -.custom-logo-image { - margin: 0 auto; - padding: 5px; - max-width: 150px; - background: #fff; -} -@media (max-width: 767px) { - .site-nav { - position: absolute; - left: 0; - top: 52px; - margin: 0; - width: 100%; - padding: 0; - background: #fff; - border-bottom: 1px solid #ddd; - z-index: 1030; - } -} -@media (max-width: 767px) { - .menu { - text-align: left; - } -} -@media (max-width: 767px) { - .menu .menu-item { - display: block; - margin: 0 10px; - vertical-align: top; - } -} -.menu .menu-item .badge { - display: inline-block; - padding: 1px 4px; - margin-left: 5px; - font-weight: 700; - line-height: 1; - text-align: center; - white-space: nowrap; - background-color: #eee; -} -@media (max-width: 767px) { - .menu .menu-item .badge { - float: right; - margin: 0.35em 0 0 0; - } -} -@media (max-width: 767px) { - .menu .menu-item br { - display: none; - } -} -@media (max-width: 767px) { - .menu .menu-item a { - padding: 5px 10px; - border-bottom-color: #fff !important; - } -} -.menu .menu-item .fa { - margin-right: 0; -} -.menu-item-active a { - border-bottom-color: #222 !important; - color: #222; -} -@media (max-width: 767px) { - .menu-item-active a { - border-bottom-color: #fff !important; - } -} -.site-search form { - display: none; -} -.links-of-blogroll-inline .links-of-blogroll-item { - display: inline-block; -} +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} +body { + margin: 0; +} +main { + display: block; +} +h1 { + font-size: 2em; + margin: 0.67em 0; +} +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} +a { + background-color: transparent; +} +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} +b, +strong { + font-weight: bolder; +} +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} +small { + font-size: 80%; +} +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sub { + bottom: -0.25em; +} +sup { + top: -0.5em; +} +img { + border-style: none; +} +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} +button, +input { +/* 1 */ + overflow: visible; +} +button, +select { +/* 1 */ + text-transform: none; +} +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; +} +button::-moz-focus-inner, +[type='button']::-moz-focus-inner, +[type='reset']::-moz-focus-inner, +[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} +button:-moz-focusring, +[type='button']:-moz-focusring, +[type='reset']:-moz-focusring, +[type='submit']:-moz-focusring { + outline: 1px dotted ButtonText; +} +fieldset { + padding: 0.35em 0.75em 0.625em; +} +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} +progress { + vertical-align: baseline; +} +textarea { + overflow: auto; +} +[type='checkbox'], +[type='radio'] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} +[type='number']::-webkit-inner-spin-button, +[type='number']::-webkit-outer-spin-button { + height: auto; +} +[type='search'] { + outline-offset: -2px; /* 2 */ + -webkit-appearance: textfield; /* 1 */ +} +[type='search']::-webkit-search-decoration { + -webkit-appearance: none; +} +::-webkit-file-upload-button { + font: inherit; /* 2 */ + -webkit-appearance: button; /* 1 */ +} +details { + display: block; +} +summary { + display: list-item; +} +template { + display: none; +} +[hidden] { + display: none; +} +::selection { + background: #262a30; + color: #fff; +} +body { + background: #fff; + color: #555; + font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif; + font-size: 1em; + line-height: 2; +} +@media (max-width: 991px) { + body { + padding-right: 0; + } +} +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif; + font-weight: bold; + line-height: 1.5; + margin: 20px 0 15px; + padding: 0; +} +h1 { + font-size: 1.75em; +} +h2 { + font-size: 1.625em; +} +h3 { + font-size: 1.5em; +} +h4 { + font-size: 1.375em; +} +h5 { + font-size: 1.25em; +} +h6 { + font-size: 1.125em; +} +p { + margin: 0 0 20px 0; +} +a, +span.exturl { + overflow-wrap: break-word; + word-wrap: break-word; + background-color: transparent; + border-bottom: 1px solid #999; + color: #555; + outline: none; + text-decoration: none; + cursor: pointer; +} +a:hover, +span.exturl:hover { + border-bottom-color: #222; + color: #222; +} +iframe, +img, +video { + display: block; + margin-left: auto; + margin-right: auto; + max-width: 100%; +} +hr { + background-color: #ddd; + background-image: repeating-linear-gradient(-45deg, #fff, #fff 4px, transparent 4px, transparent 8px); + border: 0; + height: 3px; + margin: 40px 0; +} +blockquote { + border-left: 4px solid #ddd; + color: #666; + margin: 0; + padding: 0 15px; +} +blockquote cite::before { + content: '-'; + padding: 0 5px; +} +dt { + font-weight: 700; +} +dd { + margin: 0; + padding: 0; +} +kbd { + background-color: #f9f9f9; + background-image: linear-gradient(top, #eee, #fff, #eee); + border: 1px solid #ccc; + border-radius: 0.2em; + box-shadow: 0.1em 0.1em 0.2em rgba(0,0,0,0.1); + font-family: inherit; + padding: 0.1em 0.3em; + white-space: nowrap; +} +.text-left { + text-align: left; +} +.text-center { + text-align: center; +} +.text-right { + text-align: right; +} +.text-justify { + text-align: justify; +} +.text-nowrap { + white-space: nowrap; +} +.text-lowercase { + text-transform: lowercase; +} +.text-uppercase { + text-transform: uppercase; +} +.text-capitalize { + text-transform: capitalize; +} +.center-block { + display: block; + margin-left: auto; + margin-right: auto; +} +.clearfix::before, +.clearfix::after { + content: ' '; + display: table; +} +.clearfix::after { + clear: both; +} +.pullquote { + width: 45%; +} +.pullquote.left { + float: left; + margin-left: 5px; + margin-right: 10px; +} +.pullquote.right { + float: right; + margin-left: 10px; + margin-right: 5px; +} +.translation { + color: #999; + font-size: 0.875em; + margin-top: -20px; +} +.table-container { + -webkit-overflow-scrolling: touch; + overflow: auto; +} +table { + border-collapse: collapse; + border-spacing: 0; + font-size: 0.875em; + margin: 0 0 20px 0; + width: 100%; +} +table > tbody > tr:nth-of-type(odd) { + background-color: #f9f9f9; +} +table > tbody > tr:hover { + background-color: #f5f5f5; +} +caption, +th, +td { + font-weight: normal; + padding: 8px; + text-align: left; + vertical-align: middle; +} +th, +td { + border: 1px solid #ddd; + border-bottom: 3px solid #ddd; +} +th { + font-weight: 700; + padding-bottom: 10px; +} +td { + border-bottom-width: 1px; +} +html, +body { + height: 100%; +} +.container { + position: relative; +} +.header-inner { + margin: 0 auto; + padding: 100px 0 70px; + width: 700px; +} +@media (min-width: 1200px) { + .container .header-inner { + width: 800px; + } +} +@media (min-width: 1600px) { + .container .header-inner { + width: 900px; + } +} +.main-inner { + margin: 0 auto; + width: 700px; +} +@media (min-width: 1200px) { + .container .main-inner { + width: 800px; + } +} +@media (min-width: 1600px) { + .container .main-inner { + width: 900px; + } +} +.footer { + padding: 20px 0; +} +.footer-inner { + box-sizing: border-box; + margin: 0 auto; + width: 700px; +} +@media (min-width: 1200px) { + .container .footer-inner { + width: 800px; + } +} +@media (min-width: 1600px) { + .container .footer-inner { + width: 900px; + } +} +pre, +.highlight { + background: #f7f7f7; + color: #4d4d4c; + line-height: 1.6; + margin: 0 auto 20px; +} +pre, +code { + font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace; +} +code { + overflow-wrap: break-word; + word-wrap: break-word; + background: #eee; + border-radius: 3px; + color: #555; + padding: 2px 4px; +} +pre { + overflow: auto; + padding: 10px; +} +pre code { + background: none; + color: #4d4d4c; + font-size: 0.875em; + padding: 0; + text-shadow: none; +} +.highlight *::selection { + background: #d6d6d6; +} +.highlight pre { + border: 0; + margin: 0; + padding: 10px 0; +} +.highlight table { + border: 0; + margin: 0; + width: auto; +} +.highlight td { + border: 0; + padding: 0; +} +.highlight figcaption { + background: #eee; + border-bottom: 1px solid #e9e9e9; + color: #4d4d4c; + line-height: 1em; + margin: 0; + padding: 0.5em; +} +.highlight figcaption::before, +.highlight figcaption::after { + content: ' '; + display: table; +} +.highlight figcaption::after { + clear: both; +} +.highlight figcaption a { + color: #4d4d4c; + float: right; +} +.highlight figcaption a:hover { + border-bottom-color: #4d4d4c; +} +.highlight .gutter pre { + background-color: #eff2f3; + color: #869194; + padding-left: 10px; + padding-right: 10px; + text-align: right; +} +.highlight .code pre { + background-color: #f7f7f7; + padding-left: 10px; + width: 100%; +} +.gutter { + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + user-select: none; +} +.gist table { + width: auto; +} +.gist table td { + border: 0; +} +pre .deletion { + background: #fdd; +} +pre .addition { + background: #dfd; +} +pre .meta { + color: #eab700; + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + user-select: none; +} +pre .comment { + color: #8e908c; +} +pre .variable, +pre .attribute, +pre .tag, +pre .name, +pre .regexp, +pre .ruby .constant, +pre .xml .tag .title, +pre .xml .pi, +pre .xml .doctype, +pre .html .doctype, +pre .css .id, +pre .css .class, +pre .css .pseudo { + color: #c82829; +} +pre .number, +pre .preprocessor, +pre .built_in, +pre .builtin-name, +pre .literal, +pre .params, +pre .constant, +pre .command { + color: #f5871f; +} +pre .ruby .class .title, +pre .css .rules .attribute, +pre .string, +pre .symbol, +pre .value, +pre .inheritance, +pre .header, +pre .ruby .symbol, +pre .xml .cdata, +pre .special, +pre .formula { + color: #718c00; +} +pre .title, +pre .css .hexcolor { + color: #3e999f; +} +pre .function, +pre .python .decorator, +pre .python .title, +pre .ruby .function .title, +pre .ruby .title .keyword, +pre .perl .sub, +pre .javascript .title, +pre .coffeescript .title { + color: #4271ae; +} +pre .keyword, +pre .javascript .function { + color: #8959a8; +} +.blockquote-center { + border-left: none; + margin: 40px 0; + padding: 0; + position: relative; + text-align: center; +} +.blockquote-center::before, +.blockquote-center::after { + background-position: 0 -6px; + background-repeat: no-repeat; + background-size: 22px 22px; + content: ' '; + display: block; + height: 24px; + opacity: 0.2; + position: absolute; + width: 100%; +} +.blockquote-center::before { + background-image: url("../images/quote-l.svg"); + border-top: 1px solid #ccc; + top: -20px; +} +.blockquote-center::after { + background-image: url("../images/quote-r.svg"); + background-position: 100% 8px; + border-bottom: 1px solid #ccc; + bottom: -20px; +} +.blockquote-center p, +.blockquote-center div { + text-align: center; +} +.post-body .group-picture img { + border: 0; + box-sizing: border-box; + margin: 0 auto; + padding: 0 3px; +} +.post-body .group-picture-row { + margin-bottom: 6px; + overflow: hidden; +} +.post-body .group-picture-column { + float: left; + margin-bottom: 10px; +} +.post-body .label { + display: inline; + padding: 0 2px; +} +.post-body .label.default { + background-color: #f0f0f0; +} +.post-body .label.primary { + background-color: #efe6f7; +} +.post-body .label.info { + background-color: #e5f2f8; +} +.post-body .label.success { + background-color: #e7f4e9; +} +.post-body .label.warning { + background-color: #fcf6e1; +} +.post-body .label.danger { + background-color: #fae8eb; +} +.post-body .tabs { + margin-bottom: 20px; +} +.post-body .tabs, +.tabs-comment { + display: block; + padding-top: 10px; + position: relative; +} +.post-body .tabs ul.nav-tabs, +.tabs-comment ul.nav-tabs { + display: flex; + flex-wrap: wrap; + margin: 0; + margin-bottom: -1px; + padding: 0; +} +@media (max-width: 413px) { + .post-body .tabs ul.nav-tabs, + .tabs-comment ul.nav-tabs { + display: block; + margin-bottom: 5px; + } +} +.post-body .tabs ul.nav-tabs li.tab, +.tabs-comment ul.nav-tabs li.tab { + background-color: #fff; + border-bottom: 1px solid #ddd; + border-left: 1px solid transparent; + border-right: 1px solid transparent; + border-top: 3px solid transparent; + flex-grow: 1; + list-style-type: none; +} +@media (max-width: 413px) { + .post-body .tabs ul.nav-tabs li.tab, + .tabs-comment ul.nav-tabs li.tab { + border-bottom: 1px solid transparent; + border-left: 3px solid transparent; + border-right: 1px solid transparent; + border-top: 1px solid transparent; + } +} +.post-body .tabs ul.nav-tabs li.tab a, +.tabs-comment ul.nav-tabs li.tab a { + border-bottom: initial; + display: block; + line-height: 1.8em; + outline: 0; + padding: 0.25em 0.75em; + text-align: center; + transition-delay: 0s; + transition-duration: 0.2s; + transition-timing-function: ease-out; +} +.post-body .tabs ul.nav-tabs li.tab a i, +.tabs-comment ul.nav-tabs li.tab a i { + width: 1.285714285714286em; +} +.post-body .tabs ul.nav-tabs li.tab.active, +.tabs-comment ul.nav-tabs li.tab.active { + border-bottom: 1px solid transparent; + border-left: 1px solid #ddd; + border-right: 1px solid #ddd; + border-top: 3px solid #fc6423; +} +@media (max-width: 413px) { + .post-body .tabs ul.nav-tabs li.tab.active, + .tabs-comment ul.nav-tabs li.tab.active { + border-bottom: 1px solid #ddd; + border-left: 3px solid #fc6423; + border-right: 1px solid #ddd; + border-top: 1px solid #ddd; + } +} +.post-body .tabs ul.nav-tabs li.tab.active a, +.tabs-comment ul.nav-tabs li.tab.active a { + color: #555; + cursor: default; +} +.post-body .tabs .tab-content .tab-pane, +.tabs-comment .tab-content .tab-pane { + border: 1px solid #ddd; + padding: 20px 20px 0 20px; +} +.post-body .tabs .tab-content .tab-pane:not(.active), +.tabs-comment .tab-content .tab-pane:not(.active) { + display: none; +} +.post-body .tabs .tab-content .tab-pane.active, +.tabs-comment .tab-content .tab-pane.active { + display: block; +} +.post-body .note { + margin-bottom: 20px; + padding: 15px; + position: relative; + border: 1px solid #eee; + border-left-width: 5px; + border-radius: 3px; +} +.post-body .note h2, +.post-body .note h3, +.post-body .note h4, +.post-body .note h5, +.post-body .note h6 { + margin-top: 0; + border-bottom: initial; + margin-bottom: 0; + padding-top: 0; +} +.post-body .note p:first-child, +.post-body .note ul:first-child, +.post-body .note ol:first-child, +.post-body .note table:first-child, +.post-body .note pre:first-child, +.post-body .note blockquote:first-child, +.post-body .note img:first-child { + margin-top: 0; +} +.post-body .note p:last-child, +.post-body .note ul:last-child, +.post-body .note ol:last-child, +.post-body .note table:last-child, +.post-body .note pre:last-child, +.post-body .note blockquote:last-child, +.post-body .note img:last-child { + margin-bottom: 0; +} +.post-body .note.default { + border-left-color: #777; +} +.post-body .note.default h2, +.post-body .note.default h3, +.post-body .note.default h4, +.post-body .note.default h5, +.post-body .note.default h6 { + color: #777; +} +.post-body .note.primary { + border-left-color: #6f42c1; +} +.post-body .note.primary h2, +.post-body .note.primary h3, +.post-body .note.primary h4, +.post-body .note.primary h5, +.post-body .note.primary h6 { + color: #6f42c1; +} +.post-body .note.info { + border-left-color: #428bca; +} +.post-body .note.info h2, +.post-body .note.info h3, +.post-body .note.info h4, +.post-body .note.info h5, +.post-body .note.info h6 { + color: #428bca; +} +.post-body .note.success { + border-left-color: #5cb85c; +} +.post-body .note.success h2, +.post-body .note.success h3, +.post-body .note.success h4, +.post-body .note.success h5, +.post-body .note.success h6 { + color: #5cb85c; +} +.post-body .note.warning { + border-left-color: #f0ad4e; +} +.post-body .note.warning h2, +.post-body .note.warning h3, +.post-body .note.warning h4, +.post-body .note.warning h5, +.post-body .note.warning h6 { + color: #f0ad4e; +} +.post-body .note.danger { + border-left-color: #d9534f; +} +.post-body .note.danger h2, +.post-body .note.danger h3, +.post-body .note.danger h4, +.post-body .note.danger h5, +.post-body .note.danger h6 { + color: #d9534f; +} +.btn { + background: #222; + border: 2px solid #222; + border-radius: 0; + color: #fff; + display: inline-block; + font-size: 0.875em; + line-height: 2; + padding: 0 20px; + text-decoration: none; + transition-delay: 0s; + transition-duration: 0.2s; + transition-timing-function: ease-in-out; + transition-property: background-color; +} +.btn:hover { + background: #fff; + border-color: #222; + color: #222; +} +.btn + .btn { + margin: 0 0 8px 8px; +} +.btn .fa-fw { + text-align: left; + width: 1.285714285714286em; +} +.btn-bar { + background: #555; + border-radius: 1px; + display: block; + height: 2px; + width: 22px; +} +.btn-bar + .btn-bar { + margin-top: 4px; +} +.page-number-basic, +.pagination .prev, +.pagination .next, +.pagination .page-number, +.pagination .space { + display: inline-block; + margin: 0 10px; + padding: 0 11px; + position: relative; + top: -1px; +} +@media (max-width: 767px) { + .page-number-basic, + .pagination .prev, + .pagination .next, + .pagination .page-number, + .pagination .space { + margin: 0 5px; + } +} +.pagination { + border-top: 1px solid #eee; + margin: 120px 0 40px; + text-align: center; +} +.pagination .prev, +.pagination .next, +.pagination .page-number { + border-bottom: 0; + border-top: 1px solid #eee; + transition-property: border-color; + transition-delay: 0s; + transition-duration: 0.2s; + transition-timing-function: ease-in-out; +} +.pagination .prev:hover, +.pagination .next:hover, +.pagination .page-number:hover { + border-top-color: #222; +} +.pagination .space { + margin: 0; + padding: 0; +} +.pagination .prev { + margin-left: 0; +} +.pagination .next { + margin-right: 0; +} +.pagination .page-number.current { + background: #ccc; + border-top-color: #ccc; + color: #fff; +} +@media (max-width: 767px) { + .pagination { + border-top: none; + } + .pagination .prev, + .pagination .next, + .pagination .page-number { + border-bottom: 1px solid #eee; + border-top: 0; + margin-bottom: 10px; + padding: 0 10px; + } + .pagination .prev:hover, + .pagination .next:hover, + .pagination .page-number:hover { + border-bottom-color: #222; + } +} +.comments { + margin: 60px 20px 0; + overflow: hidden; +} +.comment-button-group { + display: flex; + flex-wrap: wrap-reverse; + justify-content: center; + margin: 1em 0; +} +.comment-button-group .comment-button { + margin: 0.1em 0.2em; +} +.comment-button-group .comment-button.active { + background: #fff; + border-color: #222; + color: #222; +} +.comment-position { + display: none; +} +.comment-position.active { + display: block; +} +.tabs-comment { + background: #fff; + margin-top: 4em; + padding-top: 0; +} +.tabs-comment .comments { + border: 0; + box-shadow: none; + margin-top: 0; + padding-top: 0; +} +.back-to-top { + background: #222; + bottom: -100px; + box-sizing: border-box; + color: #fff; + cursor: pointer; + font-size: 12px; + left: 30px; + opacity: 1; + padding: 0 6px; + position: fixed; + text-align: center; + transition-property: bottom; + z-index: 1050; + transition-delay: 0s; + transition-duration: 0.2s; + transition-timing-function: ease-in-out; + width: 24px; +} +.back-to-top span { + display: none; +} +.back-to-top:hover { + color: #87daff; +} +.back-to-top.back-to-top-on { + bottom: 19px; +} +@media (max-width: 991px) { + .back-to-top { + left: 20px; + opacity: 0.8; + } +} +.header { + background: transparent; +} +.header-inner { + position: relative; +} +.headband { + background: #222; + height: 3px; +} +.site-meta { + margin: 0; + text-align: center; +} +@media (max-width: 767px) { + .site-meta { + text-align: center; + } +} +.brand { + background: #222; + border-bottom: none; + color: #fff; + display: inline-block; + line-height: 1.375em; + padding: 0 40px; + position: relative; +} +.brand:hover { + color: #fff; +} +.logo { + display: inline-block; + line-height: 36px; + margin-right: 5px; + vertical-align: top; +} +.site-title { + display: inline-block; + font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif; + font-size: 1.375em; + font-weight: normal; + line-height: 1.5; + vertical-align: top; +} +.site-subtitle { + color: #999; + font-size: 0.8125em; + margin-top: 10px; +} +.use-motion .brand { + opacity: 0; +} +.use-motion .logo, +.use-motion .site-title, +.use-motion .site-subtitle, +.use-motion .custom-logo-image { + opacity: 0; + position: relative; + top: -10px; +} +.site-nav-toggle { + display: none; + left: 10px; + position: absolute; +} +@media (max-width: 767px) { + .site-nav-toggle { + display: block; + } +} +.site-nav-toggle button { + background: transparent; + border: 0; + margin-top: 2px; + padding: 9px 10px; +} +.site-nav { + display: block; +} +@media (max-width: 767px) { + .site-nav { + border-top: 1px solid #ddd; + clear: both; + display: none; + margin: 0 -10px; + padding: 0 10px; + } +} +.site-nav.site-nav-on { + display: block; +} +.menu { + margin-top: 20px; + padding-left: 0; + text-align: center; +} +.menu-item { + display: inline-block; + list-style: none; + margin: 0 10px; +} +@media (max-width: 767px) { + .menu-item { + margin-top: 10px; + } +} +.menu-item a, +.menu-item span.exturl { + border-bottom: 1px solid transparent; + display: block; + font-size: 0.8125em; + line-height: inherit; + transition-property: border-color; + transition-delay: 0s; + transition-duration: 0.2s; + transition-timing-function: ease-in-out; +} +.menu-item a:hover, +.menu-item span.exturl:hover { + border-bottom-color: #222; +} +.menu-item .fa { + margin-right: 5px; +} +.use-motion .menu-item { + opacity: 0; +} +.post-body { + overflow-wrap: break-word; + word-wrap: break-word; + font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif; +} +@media (min-width: 1200px) { + .post-body { + font-size: 1.125em; + } +} +@media (max-width: 767px) { + .post-body { + font-size: 0.875em; + } +} +.post-body span.exturl .fa { + font-size: 0.875em; + margin-left: 4px; +} +.post-body .image-caption, +.post-body .figure .caption { + color: #999; + font-size: 0.875em; + font-weight: bold; + line-height: 1; + margin: -20px auto 15px; + text-align: center; +} +.post-sticky-flag { + display: inline-block; + transform: rotate(30deg); +} +.use-motion .post-block, +.use-motion .pagination, +.use-motion .comments { + opacity: 0; +} +.use-motion .post-header { + opacity: 0; +} +.use-motion .post-body { + opacity: 0; +} +.use-motion .collection-header { + opacity: 0; +} +.post-button { + margin-top: 40px; +} +.posts-collapse { + margin-left: 55px; + position: relative; + z-index: 1010; +} +@media (max-width: 767px) { + .posts-collapse { + margin-left: 20px; + margin-right: 20px; + } +} +.posts-collapse .collection-title { + font-size: 1.125em; + position: relative; +} +.posts-collapse .collection-title::before { + background: #999; + border: 1px solid #fff; + border-radius: 50%; + content: ' '; + height: 10px; + left: 0; + margin-left: -6px; + margin-top: -4px; + position: absolute; + top: 50%; + width: 10px; +} +.posts-collapse .collection-year { + margin: 60px 0; + position: relative; +} +.posts-collapse .collection-year::before { + background: #bbb; + border-radius: 50%; + content: ' '; + height: 8px; + left: 0; + margin-left: -4px; + margin-top: -4px; + position: absolute; + top: 50%; + width: 8px; +} +.posts-collapse .collection-header { + margin: 0 0 0 20px; +} +.posts-collapse .collection-header small { + color: #bbb; + margin-left: 5px; +} +.posts-collapse article { + margin: 30px 0; +} +.posts-collapse .post-header { + border-bottom: 1px dashed #ccc; + position: relative; + transition-delay: 0s; + transition-duration: 0.2s; + transition-timing-function: ease-in-out; + transition-property: border; +} +.posts-collapse .post-header::before { + background: #bbb; + border: 1px solid #fff; + border-radius: 50%; + content: ' '; + height: 6px; + left: 0; + margin-left: -4px; + position: absolute; + top: 0.75em; + width: 6px; + transition-delay: 0s; + transition-duration: 0.2s; + transition-timing-function: ease-in-out; + transition-property: background; +} +.posts-collapse .post-header:hover { + border-bottom-color: #666; +} +.posts-collapse .post-header:hover::before { + background: #222; +} +.posts-collapse .post-title { + font-size: 1em; + font-weight: normal; + line-height: inherit; + margin-bottom: 0; + margin-left: 3.75em; +} +.posts-collapse .post-title::after { + margin-left: 3px; + opacity: 0.6; +} +.posts-collapse .post-title a, +.posts-collapse .post-title span.exturl { + border-bottom: none; + color: #666; +} +.posts-collapse .post-meta { + font-size: 0.75em; + left: 20px; + position: absolute; + top: 5px; +} +.posts-collapse::after { + background: #f5f5f5; + content: ' '; + height: 100%; + left: 0; + margin-left: -2px; + position: absolute; + top: 1.25em; + width: 4px; + z-index: -1; +} +.posts-collapse .fa-external-link { + font-size: 0.875em; + margin-left: 5px; +} +.post-eof { + background: #ccc; + height: 1px; + margin: 80px auto 60px; + text-align: center; + width: 8%; +} +article:last-child .post-eof { + display: none; +} +.posts-expand { + padding-top: 40px; +} +@media (max-width: 767px) { + .posts-expand { + margin: 0 20px; + } +} +@media (min-width: 992px) { + .post-body { + text-align: justify; + } +} +@media (max-width: 991px) { + .post-body { + text-align: justify; + } +} +.post-body h2, +.post-body h3, +.post-body h4, +.post-body h5, +.post-body h6 { + padding-top: 10px; +} +.post-body h2 .header-anchor, +.post-body h3 .header-anchor, +.post-body h4 .header-anchor, +.post-body h5 .header-anchor, +.post-body h6 .header-anchor { + border-bottom-style: none; + color: #ccc; + float: right; + margin-left: 10px; + visibility: hidden; +} +.post-body h2 .header-anchor:hover, +.post-body h3 .header-anchor:hover, +.post-body h4 .header-anchor:hover, +.post-body h5 .header-anchor:hover, +.post-body h6 .header-anchor:hover { + color: inherit; +} +.post-body h2:hover .header-anchor, +.post-body h3:hover .header-anchor, +.post-body h4:hover .header-anchor, +.post-body h5:hover .header-anchor, +.post-body h6:hover .header-anchor { + visibility: visible; +} +.post-body img { + border: 1px solid #ddd; + box-sizing: border-box; + padding: 3px; +} +@media (max-width: 767px) { + .post-body img { + padding: initial; + } +} +.post-body iframe, +.post-body img, +.post-body video { + margin-bottom: 20px; +} +.post-body .video-container { + height: 0; + margin-bottom: 20px; + overflow: hidden; + padding-top: 75%; + position: relative; + width: 100%; +} +.post-body .video-container iframe, +.post-body .video-container object, +.post-body .video-container embed { + height: 100%; + left: 0; + margin: 0; + position: absolute; + top: 0; + width: 100%; +} +.post-gallery { + border-collapse: separate; + display: table; + table-layout: fixed; + width: 100%; +} +.post-gallery-row { + display: table-row; +} +.post-gallery .post-gallery-img { + border: 0; + display: table-cell; + text-align: center; + vertical-align: middle; +} +.post-gallery .post-gallery-img img { + border: 0; + max-height: 100%; + max-width: 100%; +} +.fancybox-close, +.fancybox-close:hover { + border: 0; +} +.posts-expand .post-meta { + color: #999; + font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif; + margin: 3px 0 60px 0; + text-align: center; +} +.posts-expand .post-meta .post-description { + font-size: 0.875em; + margin-top: 2px; +} +.posts-expand .post-meta time { + border-bottom: 1px dashed #999; + cursor: help; +} +.post-meta .post-meta-item + .post-meta-item::before { + content: '|'; + margin: 0 0.5em; +} +.post-meta .post-meta-item { + font-size: 0.75em; +} +.post-meta-divider { + margin: 0 0.5em; +} +.post-meta-item-icon { + margin-right: 3px; +} +@media (max-width: 991px) { + .post-meta-item-icon { + display: inline-block; + } +} +@media (max-width: 991px) { + .post-meta-item-text { + display: none; + } +} +.post-nav { + border-top: 1px solid #eee; + display: table; + margin-top: 15px; + width: 100%; +} +.post-nav-divider { + display: table-cell; + width: 10%; +} +.post-nav-item { + display: table-cell; + padding: 10px 0 0 0; + vertical-align: top; + width: 45%; +} +.post-nav-item a { + border-bottom: none; + color: #555; + display: block; + font-size: 0.875em; + line-height: 1.6; + position: relative; +} +.post-nav-item a:hover { + border-bottom: none; + color: #222; +} +.post-nav-item a:active { + top: 2px; +} +.post-nav-item .fa { + font-size: 0.75em; + margin-right: 5px; +} +.post-nav-next a { + padding-left: 5px; +} +.post-nav-prev { + text-align: right; +} +.post-nav-prev a { + padding-right: 5px; +} +.post-nav-prev .fa { + margin-left: 5px; +} +.rtl.post-body p, +.rtl.post-body a, +.rtl.post-body h1, +.rtl.post-body h2, +.rtl.post-body h3, +.rtl.post-body h4, +.rtl.post-body h5, +.rtl.post-body h6, +.rtl.post-body li, +.rtl.post-body ul, +.rtl.post-body ol { + direction: rtl; + font-family: UKIJ Ekran; +} +.rtl.post-title { + font-family: UKIJ Ekran; +} +.post-tags { + margin-top: 40px; + text-align: center; +} +.post-tags a { + display: inline-block; + font-size: 0.8125em; + margin-right: 10px; +} +.posts-expand .post-title { + overflow-wrap: break-word; + word-wrap: break-word; + font-weight: 400; + margin: initial; + text-align: center; +} +.posts-expand .post-title-link { + border-bottom: none; + color: #555; + display: inline-block; + line-height: 1.2; + position: relative; + vertical-align: top; +} +.posts-expand .post-title-link::before { + background-color: #000; + bottom: 0; + content: ''; + height: 2px; + left: 0; + position: absolute; + transform: scaleX(0); + visibility: hidden; + width: 100%; + transition-delay: 0s; + transition-duration: 0.2s; + transition-timing-function: ease-in-out; +} +.posts-expand .post-title-link:hover::before { + transform: scaleX(1); + visibility: visible; +} +.posts-expand .post-title-link .fa { + font-size: 0.875em; + margin-left: 5px; +} +.post-widgets { + border-top: 1px solid #eee; + margin-top: 15px; + text-align: center; +} +.wp_rating { + height: 20px; + line-height: 20px; + margin-top: 10px; + padding-top: 6px; + text-align: center; +} +.social-like { + display: flex; + font-size: 0.875em; + justify-content: center; + text-align: center; +} +.vk_like { + align-self: center; + height: 21px; + padding-top: 7px; + width: 85px; +} +.fb_like { + align-self: center; + height: 30px; +} +.sidebar { + background: #222; + bottom: 0; + box-shadow: inset 0 2px 6px #000; + position: fixed; + top: 0; + z-index: 1040; +} +.sidebar a, +.sidebar span.exturl { + border-bottom-color: #555; + color: #999; +} +.sidebar a:hover, +.sidebar span.exturl:hover { + border-bottom-color: #eee; + color: #eee; +} +@media (max-width: 991px) { + .sidebar { + display: none; + } +} +.sidebar-inner { + color: #999; + padding: 20px 10px; + text-align: center; +} +.site-overview-wrap { + overflow-x: hidden; + overflow-y: auto; +} +.cc-license { + margin-top: 10px; + text-align: center; +} +.cc-license .cc-opacity { + border-bottom: none; + opacity: 0.7; +} +.cc-license .cc-opacity:hover { + opacity: 0.9; +} +.cc-license img { + display: inline-block; +} +.site-author-image { + border: 2px solid #333; + display: block; + height: auto; + margin: 0 auto; + max-width: 96px; + padding: 2px; +} +.site-author-name { + color: #f5f5f5; + font-weight: normal; + margin: 5px 0 0; + text-align: center; +} +.site-description { + color: #999; + font-size: 1em; + margin-top: 5px; + text-align: center; +} +.links-of-author { + margin-top: 20px; +} +.links-of-author a, +.links-of-author span.exturl { + border-bottom-color: #555; + display: inline-block; + font-size: 0.8125em; + margin-bottom: 10px; + margin-right: 10px; + vertical-align: middle; +} +.links-of-author a::before, +.links-of-author span.exturl::before { + background: #c99513; + border-radius: 50%; + content: ' '; + display: inline-block; + height: 4px; + margin-right: 3px; + vertical-align: middle; + width: 4px; +} +.feed-link, +.chat { + margin-top: 10px; +} +.feed-link a, +.chat a { + border: 1px solid #fc6423; + border-radius: 4px; + color: #fc6423; + display: inline-block; + padding: 0 15px; +} +.feed-link a .fa, +.chat a .fa { + margin-right: 5px; +} +.feed-link a:hover, +.chat a:hover { + background: #fc6423; + border: 1px solid #fc6423; + color: #fff; +} +.feed-link a:hover .fa, +.chat a:hover .fa { + color: #fff; +} +.links-of-blogroll { + font-size: 0.8125em; + margin-top: 10px; +} +.links-of-blogroll-title { + font-size: 0.875em; + font-weight: 600; + margin-top: 0; +} +.links-of-blogroll-list { + list-style: none; + margin: 0; + padding: 0; +} +.links-of-blogroll-item { + padding: 2px 10px; +} +.links-of-blogroll-item a, +.links-of-blogroll-item span.exturl { + box-sizing: border-box; + display: inline-block; + max-width: 280px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +#sidebar-dimmer { + display: none; +} +@media (max-width: 767px) { + #sidebar-dimmer { + background: #000; + display: block; + height: 100%; + left: 100%; + opacity: 0; + position: fixed; + top: 0; + width: 100%; + z-index: 1020; + } + .sidebar-active + #sidebar-dimmer { + opacity: 0.7; + transform: translateX(-100%); + transition: opacity 0.5s; + } +} +.sidebar-nav { + margin: 0 0 20px; + padding-left: 0; +} +.sidebar-nav li { + border-bottom: 1px solid transparent; + color: #555; + cursor: pointer; + display: inline-block; + font-size: 0.875em; +} +.sidebar-nav li.sidebar-nav-overview { + margin-left: 10px; +} +.sidebar-nav li:hover { + color: #f5f5f5; +} +.sidebar-nav .sidebar-nav-active { + border-bottom-color: #87daff; + color: #87daff; +} +.sidebar-nav .sidebar-nav-active:hover { + color: #87daff; +} +.sidebar-panel { + display: none; +} +.sidebar-panel-active { + display: block; +} +.sidebar-toggle { + background: #222; + bottom: 45px; + cursor: pointer; + height: 14px; + left: 30px; + line-height: 0; + padding: 5px; + position: fixed; + width: 14px; + z-index: 1050; +} +@media (max-width: 991px) { + .sidebar-toggle { + left: 20px; + opacity: 0.8; + display: none; + } +} +.sidebar-toggle-line { + background: #fff; + display: inline-block; + height: 2px; + margin-top: 3px; + position: relative; + transition: all 0.4s; + vertical-align: top; + width: 100%; +} +.sidebar-toggle-line:first-child { + margin-top: 0; +} +.sidebar-toggle:hover .sidebar-toggle-line { + background: #87daff; +} +.post-toc-wrap { + overflow-x: hidden; + overflow-y: auto; +} +.post-toc { + font-size: 0.875em; +} +.post-toc ol { + list-style: none; + margin: 0; + padding: 0 2px 5px 10px; + text-align: left; +} +.post-toc ol > ol { + padding-left: 0; +} +.post-toc ol a { + transition-delay: 0s; + transition-duration: 0.2s; + transition-timing-function: ease-in-out; + border-bottom-color: #555; + color: #999; + transition-property: all; +} +.post-toc ol a:hover { + border-bottom-color: #ccc; + color: #ccc; +} +.post-toc .nav-item { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + line-height: 1.8; +} +.post-toc .nav .nav-child { + display: none; +} +.post-toc .nav .active > .nav-child { + display: block; +} +.post-toc .nav .active-current > .nav-child { + display: block; +} +.post-toc .nav .active-current > .nav-child > .nav-item { + display: block; +} +.post-toc .nav .active > a { + border-bottom-color: #87daff; + color: #87daff; +} +.post-toc .nav .active-current > a { + color: #87daff; +} +.post-toc .nav .active-current > a:hover { + color: #87daff; +} +.site-state { + display: flex; + justify-content: center; + line-height: 1.4; + margin-top: 10px; + overflow: hidden; + text-align: center; + white-space: nowrap; +} +.site-state-item { + border-left: 1px solid #333; + padding: 0 15px; +} +.site-state-item:first-child { + border-left: none; +} +.site-state-item a { + border-bottom: none; +} +.site-state-item-count { + color: inherit; + display: block; + font-size: 1.25em; + font-weight: 600; + text-align: center; +} +.site-state-item-name { + color: inherit; + font-size: 0.875em; +} +.footer { + color: #999; + font-size: 0.875em; +} +.footer.footer-fixed { + bottom: 0; + left: 0; + position: fixed; + right: 0; +} +.footer img { + border: 0; +} +.footer-inner { + text-align: center; +} +.with-love { + color: #808080; + display: inline-block; + margin: 0 5px; +} +.powered-by, +.theme-info { + display: inline-block; +} +@-moz-keyframes iconAnimate { + 0%, 100% { + transform: scale(1); + } + 10%, 30% { + transform: scale(0.9); + } + 20%, 40%, 60%, 80% { + transform: scale(1.1); + } + 50%, 70% { + transform: scale(1.1); + } +} +@-webkit-keyframes iconAnimate { + 0%, 100% { + transform: scale(1); + } + 10%, 30% { + transform: scale(0.9); + } + 20%, 40%, 60%, 80% { + transform: scale(1.1); + } + 50%, 70% { + transform: scale(1.1); + } +} +@-o-keyframes iconAnimate { + 0%, 100% { + transform: scale(1); + } + 10%, 30% { + transform: scale(0.9); + } + 20%, 40%, 60%, 80% { + transform: scale(1.1); + } + 50%, 70% { + transform: scale(1.1); + } +} +@keyframes iconAnimate { + 0%, 100% { + transform: scale(1); + } + 10%, 30% { + transform: scale(0.9); + } + 20%, 40%, 60%, 80% { + transform: scale(1.1); + } + 50%, 70% { + transform: scale(1.1); + } +} +.category-all-page .category-all-title { + text-align: center; +} +.category-all-page .category-all { + margin-top: 20px; +} +.category-all-page .category-list { + list-style: none; + margin: 0; + padding: 0; +} +.category-all-page .category-list-item { + margin: 5px 10px; +} +.category-all-page .category-list-count { + color: #bbb; +} +.category-all-page .category-list-count::before { + content: ' ('; + display: inline; +} +.category-all-page .category-list-count::after { + content: ') '; + display: inline; +} +.category-all-page .category-list-child { + padding-left: 10px; +} +#event-list { + padding: 0px; +} +#event-list hr { + background: #222; + margin: 20px 0 45px 0; +} +#event-list hr::after { + background: #222; + color: #fff; + content: 'NOW'; + display: inline-block; + font-weight: bold; + padding: 0 5px; + text-align: right; +} +#event-list li.event { + background: #f9f9f9; + margin: 20px 0; + min-height: 40px; + padding-left: 10px; +} +#event-list li.event h2.event-summary { + margin: 0; + padding-bottom: 3px; +} +#event-list li.event h2.event-summary::before { + color: #bbb; + content: '\f111'; + display: inline-block; + font-family: 'FontAwesome'; + font-size: 10px; + margin-right: 25px; + vertical-align: middle; +} +#event-list li.event span.event-relative-time { + color: #bbb; + display: inline-block; + font-size: 12px; + font-weight: 400; + padding-left: 12px; +} +#event-list li.event span.event-details { + color: #bbb; + display: block; + line-height: 18px; + margin-left: 56px; + padding-bottom: 6px; + padding-top: 3px; + text-indent: -24px; +} +#event-list li.event span.event-details::before { + color: #bbb; + display: inline-block; + font-family: FontAwesome; + margin-right: 9px; + text-align: center; + text-indent: 0; + width: 14px; +} +#event-list li.event span.event-details.event-location::before { + content: '\f041'; +} +#event-list li.event span.event-details.event-duration::before { + content: '\f017'; +} +#event-list li.event-past { + background: #fcfcfc; + padding: 15px 0 15px 10px; +} +#event-list li.event-past > * { + opacity: 0.9; +} +#event-list li.event-past h2.event-summary { + color: #bbb; +} +#event-list li.event-past h2.event-summary::before { + color: #dfdfdf; +} +#event-list li.event-now { + background: #222; + color: #fff; + padding: 15px 0 15px 10px; +} +#event-list li.event-now h2.event-summary::before { + animation: dot-flash 1s alternate infinite ease-in-out; + color: #fff; +} +#event-list li.event-now * { + color: #fff !important; +} +#event-list li.event-future { + background: #222; + color: #fff; + padding: 15px 0 15px 10px; +} +#event-list li.event-future h2.event-summary::before { + animation: dot-flash 1s alternate infinite ease-in-out; + color: #fff; +} +#event-list li.event-future * { + color: #fff !important; +} +@-moz-keyframes dot-flash { + from { + opacity: 1; + transform: scale(1); + } + to { + opacity: 0; + transform: scale(0.8); + } +} +@-webkit-keyframes dot-flash { + from { + opacity: 1; + transform: scale(1); + } + to { + opacity: 0; + transform: scale(0.8); + } +} +@-o-keyframes dot-flash { + from { + opacity: 1; + transform: scale(1); + } + to { + opacity: 0; + transform: scale(0.8); + } +} +@keyframes dot-flash { + from { + opacity: 1; + transform: scale(1); + } + to { + opacity: 0; + transform: scale(0.8); + } +} +ul.breadcrumb { + font-size: 0.75em; + list-style: none; + margin: 1em 0; + padding: 0 2em; + text-align: center; +} +ul.breadcrumb li { + display: inline; +} +ul.breadcrumb li + li::before { + content: '/\00a0'; + font-weight: normal; + padding: 0.5em; +} +ul.breadcrumb li + li:last-child { + font-weight: bold; +} +.tag-cloud { + text-align: center; +} +.tag-cloud a { + display: inline-block; + margin: 10px; +} +.tag-cloud a:hover { + color: #222 !important; +} +@media (max-width: 767px) { + .header-inner, + .container .main-inner, + .footer-inner { + width: auto; + } +} +@media (max-width: 767px) { + .header-inner { + padding: 50px 0 35px; + } +} +embed { + display: block; + margin: 0 auto 25px auto; +} +.custom-logo .site-meta-headline { + text-align: center; +} +.custom-logo .brand { + background: none; +} +.custom-logo .site-title { + color: #222; + margin: 10px auto 0; +} +.custom-logo .site-title a { + border: 0; +} +.custom-logo-image { + background: #fff; + margin: 0 auto; + max-width: 150px; + padding: 5px; +} +@media (max-width: 767px) { + .site-nav { + background: #fff; + border-bottom: 1px solid #ddd; + left: 0; + margin: 0; + padding: 0; + width: 100%; + z-index: 1030; + } +} +.site-nav-toggle { + top: 50px; +} +@media (max-width: 767px) { + .menu { + text-align: left; + } +} +.menu-item-active a, +.menu .menu-item a:hover, +.menu .menu-item span.exturl:hover { + border-bottom-color: #222; + color: #222; +} +@media (max-width: 767px) { + .menu-item-active a, + .menu .menu-item a:hover, + .menu .menu-item span.exturl:hover { + border-bottom: 1px dotted #ddd; + } +} +@media (max-width: 767px) { + .menu .menu-item { + display: block; + margin: 0 10px; + vertical-align: top; + } +} +.menu .menu-item .badge { + background-color: #eee; + display: inline-block; + font-weight: 700; + line-height: 1; + margin-left: 5px; + padding: 1px 4px; + text-align: center; + white-space: nowrap; +} +@media (max-width: 767px) { + .menu .menu-item .badge { + float: right; + margin: 0.35em 0 0 0; + } +} +@media (max-width: 767px) { + .menu .menu-item br { + display: none; + } +} +@media (max-width: 767px) { + .menu .menu-item a, + .menu .menu-item span.exturl { + padding: 5px 10px; + } +} +@media (hover: none) { + .menu .menu-item a:hover, + .menu .menu-item span.exturl:hover { + border-bottom-color: transparent !important; + } +} +@media (min-width: 768px) and (max-width: 991px) { + .menu .menu-item .fa { + width: 100%; + } +} +@media (min-width: 992px) { + .menu .menu-item .fa { + width: 100%; + } +} +.sidebar { + left: -320px; +} +.sidebar.sidebar-active { + left: 0; +} +.sidebar { + transition: all 0.4s; + width: 320px; +} diff --git a/images/123.jpg b/images/123.jpg deleted file mode 100644 index 132dae7a..00000000 Binary files a/images/123.jpg and /dev/null differ diff --git a/images/algolia_logo.svg b/images/algolia_logo.svg index fd156918..47024234 100644 --- a/images/algolia_logo.svg +++ b/images/algolia_logo.svg @@ -1,9 +1,9 @@ - - - - - - - - - + + + + + + + + + diff --git a/images/avatar.gif b/images/avatar.gif index 98990257..28411fd0 100644 Binary files a/images/avatar.gif and b/images/avatar.gif differ diff --git a/images/cc-by-nc-nd.svg b/images/cc-by-nc-nd.svg index 26fa4e4d..79a4f2e0 100644 --- a/images/cc-by-nc-nd.svg +++ b/images/cc-by-nc-nd.svg @@ -1,121 +1,121 @@ - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + diff --git a/images/cc-by-nc-sa.svg b/images/cc-by-nc-sa.svg index 34253879..bf6bc26f 100644 --- a/images/cc-by-nc-sa.svg +++ b/images/cc-by-nc-sa.svg @@ -1,121 +1,121 @@ - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + diff --git a/images/cc-by-nc.svg b/images/cc-by-nc.svg index a4465a0b..36973490 100644 --- a/images/cc-by-nc.svg +++ b/images/cc-by-nc.svg @@ -1,121 +1,121 @@ - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + diff --git a/images/cc-by-nd.svg b/images/cc-by-nd.svg index b4f4ae8b..934c61e1 100644 --- a/images/cc-by-nd.svg +++ b/images/cc-by-nd.svg @@ -1,117 +1,117 @@ - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + diff --git a/images/cc-by-sa.svg b/images/cc-by-sa.svg index cd5e4fd0..463276a8 100644 --- a/images/cc-by-sa.svg +++ b/images/cc-by-sa.svg @@ -1,121 +1,121 @@ - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + diff --git a/images/cc-by.svg b/images/cc-by.svg index 8175daab..4bccd14f 100644 --- a/images/cc-by.svg +++ b/images/cc-by.svg @@ -1,121 +1,121 @@ - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + diff --git a/images/cc-zero.svg b/images/cc-zero.svg index 0867ab93..0f866392 100644 --- a/images/cc-zero.svg +++ b/images/cc-zero.svg @@ -1,72 +1,72 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/loading.gif b/images/loading.gif deleted file mode 100644 index efb6768d..00000000 Binary files a/images/loading.gif and /dev/null differ diff --git a/images/logo.svg b/images/logo.svg index f10ab7db..cbb3937e 100644 --- a/images/logo.svg +++ b/images/logo.svg @@ -1,23 +1,23 @@ - -image/svg+xml + +image/svg+xml diff --git a/images/placeholder.gif b/images/placeholder.gif deleted file mode 100644 index efb6768d..00000000 Binary files a/images/placeholder.gif and /dev/null differ diff --git a/images/quote-l.svg b/images/quote-l.svg index 8a905e47..6dd94a4a 100644 --- a/images/quote-l.svg +++ b/images/quote-l.svg @@ -1,13 +1,13 @@ - - - - - - - - + + + + + + + + diff --git a/images/quote-r.svg b/images/quote-r.svg index 447793bc..312b64d7 100644 --- a/images/quote-r.svg +++ b/images/quote-r.svg @@ -1,12 +1,12 @@ - - - - - - - - + + + + + + + + diff --git a/images/searchicon.png b/images/searchicon.png deleted file mode 100644 index 14a16cad..00000000 Binary files a/images/searchicon.png and /dev/null differ diff --git a/img/bboc.png b/img/bboc.png index ede0cc0f..b62cf83e 100644 Binary files a/img/bboc.png and b/img/bboc.png differ diff --git a/img/ts.jpeg b/img/ts.jpeg new file mode 100644 index 00000000..56891ac1 Binary files /dev/null and b/img/ts.jpeg differ diff --git a/index.html b/index.html index e7689587..80f51d3a 100644 --- a/index.html +++ b/index.html @@ -1,1892 +1,1140 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Marsorsun - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - -
-
-
- -
- -
- - - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

- - - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - - -

-

Algorithm

Add Two Numbers、

-

Review

Virtual DOM is pure overhead

-

Virtual DOM is pure overhead

Let’s retire the ‘virtual DOM is fast’ myth once and for all

-

虚拟DOM是纯粹的开销

-

让我们一劳永逸地退出“虚拟DOM是快的”的神话

- -
- - 阅读全文 » - -
- - - -
- - - - - - - - - - - - - -
- - - - - - - - -
- -
-
- - - -
- - - - - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

- - - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - - - -

qrcode 分支

需求:私信拉粉丝群 功能已实现但设计稿不详

-

card2 判断是否为为未加群逻辑

card2 都是解析连接的

-

先判断该链接是否为群

-

//判断是否是群链 群连接 weibo.com/p/230491${群id}

-

为群再使用群id获取群成员列表遍历是否在该群中，不在该群便弹出二维码。

-

添加了 modal4

主要是二维码的模态框

-

​ * 二维码配置

-

​ * 详情见 https://github.com/davidshimjs/qrcodejs

-

​ * npm i qrcodejs2 https://www.npmjs.com/package/qrcodejs2

-

vux 添加

qrcode: ‘’, *//群二维码

-
1
2
3
4
5
6
7
//操作二维码(qrcode)
exqrcode(state, val) {
	state.qrcode = val;
},
emptyqrcode(state) {
	state.qrcode = null;
},
-

sync_double 分支

需求：新消息提醒联动

-

1、群消息免打扰

-

1-1 群消息免打扰功能，Web和App进行设置两边数据同步。【完成1】

-

1-2 右键出现气泡，气泡第一条：“查看群资料”，点击打开群信息弹窗，第二条：“群消息免打扰”/“打开群消息通知”，第三条“删除对话”，和线上逻辑一致。【完成1】

-

1-3 若点击“查看群资料”，回默认切换至当前聊天室，然后打开当前群的群资料弹窗。【完成1】

-

1-4 设置为“群消息免打扰”后，userlist第二条栏目显示规则：

-

[x条未读]+最新的一条消息+橙点（没有未读时显示免打扰icon【此icon还未使用最新设计稿icon】）【完成0.8】

-

2、群消息免打扰功能【调整icon位置及大小未作】【完成0】

-

3、群标题文案

-

3-1 群标题文案位置左移，UI上需要调整。【完成1】

-

3-2 鼠标碰到当前区域，鼠标变成手指icon。【完成1】

-

4、原关闭该群提醒功能【完成0】

-

双端消息同步

屏蔽消息状态码不在 pc/mobile 分开，都是用 mobile 的状态码

-

所以第一次渲染 chatlist 时所拿取的信息的是 mobile 的

-
1
2
3
4
export const getchatlist = obj => { 
 //获取聊天列表 special_source 标记请求来源 默认为 0 手机端 3
	return axios.get(`/webim/2/direct_messages/contacts.json?special_source=3`, obj).then(res => res.data);
};
-

手机端修改

一旦手机端修改是否屏蔽的状态会有下推

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
else if (type == 'groupchat_remind_settings') { //群消息免打扰双端同步
    let {
        list,
        i
    } = this.listHandle(cometdMsg.gid);
    this.$store.commit('update' + list, { //更改chatlist  此时不置顶联系人
        notTop: true,
        i,
        param: {
            remindSetting: cometdMsg.settings.mobile
        }
    });
    this.cgProcessPoll(); //结束当前消息处理
}
-

根据其id判断在列表的位置并修改屏蔽状态

-

pc 端修改

一旦pc修改需要通知移动端修改

-
1
2
3
4
5
6
export const setnotice = obj => { //更改用户私信群设置
	return axios.post(`/webim/2/notice_center/discussion_group/set_push_settings.json`, qs.stringify(obj)).then(res => res.data);
	//	return axios.post(`/webim/groupchat/update_user_settings.json`, qs.stringify(obj)).then(res => res.data);
};
//switch	 提醒设置，1：关闭；2：打开；3：屏蔽
//call_from pc:表示更改PC端私信群提醒设置 mobile 手机端
-

所以全局搜 setnotice 修改参数就好了

-

查看群/个人资料

若点击“查看群资料”，默认切换至当前聊天室，然后打开当前群的群资料弹窗。

-

当前是否选折了查看的的用户

-
    -

  • 已选折正常逻辑

    -
    1
    2
    this.$parent.$refs.cardcontaininfo.curView = "modal2")//群
    this.showUserInfo(0, 3)//人
    -
    • -

  • 未选折需要先选择同时注意时机问题

    -
      -

    • 群没事，由于群是根据存储在 vux selectid 进行渲染而在选折时就已经修改了 selectid

      -
      • -

    • 个人用户就需要注意时机问题，不然可能导致查看的资料是之前选取那个人的 usercardinfo，由于会重新渲染 message.vue, 而showUserInfo（） 的显示信息是根据 usercardinfo 获取的，但是 usercardinfo 的修改并不是一修改 slectedid 就会改变的，他的促发条件是聊天记录。这个时候我用的 eventbus

      -
      1
      2
      3
      this.$store.commit('fillusercardinfo', other);
      Bus.$emit('newUserCard');
      //一旦修改 usercardinfo 代表着可以去展示用户资料了
      • -
    -
    • -
- - - - -
- - - - - - - - - - - - - -
- - - - - - - - -
- -
-
- - - -
- - - - - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

- - - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - - -

-

时日如飞，三个月的时间即将而至，我的实习也到了尾声。

-

这段时间很快，比我刚开始想象的快多了，我也如愿以偿的逃离了想逃离的东西。

-

没有鸡汤 just for fun

- -
- - 阅读全文 » - -
- - - -
- - - - - - - - - - - - - -
- - - - - - - - -
- -
-
- - - -
- - - - - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

- - - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - - -

wiki 上解释到 JSONP is JSON with padding

其实个人看来啥也没说啊。stackoverflow上还是有不错的解释。我在这里会解释我看来的 JSONP

- -
- - 阅读全文 » - -
- - - -
- - - - - - - - - - - - - -
- - - - - - - - -
- -
-
- - - -
- - - - - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

- - - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - | - - - - - - - 更新于 - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - - -

昨天去知道创宇面试的时候面试官当时提了这样的问题，你对对象的属性了解有哪些,当场我说了知道 Enumerable Value Writable 然后说就记得这些了。但是面试官当时就又问那如果想知道我改变了对象中的值应该如何呢？当时我就想到了 MVVM 可当时却没有与 get set联系到一起,当时就只能尬聊了。

-

深入响应式原理

-

回去后把很久之前看过的《JavaScript高级程序设计》第 6 张重新看了遍。才发现原来自己把很多基础的东西都忘了。

- -
- - 阅读全文 » - -
- - - -
- - - - - - - - - - - - - -
- - - - - - - - -
- -
-
- - - -
- - - - - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

- - - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - - -

-

.sync 修饰符

看 happy-scroll 源码的时候看到了 .sync 修饰符，没有用过所以看了下，它是在 vue 2.3.0+ 新增的，主要是解决使用 props 传值后子组件在使用了 emit 来进行 “双向绑定” ，但是父组件与子组件都没有明显的修改痕迹而不利于代码可读性。但是这样写的话可读性会好一些，在子组建中

-
1
<div @click="$emit('update:num', num+1)">click {{num}}</div>
-

再父组件中

-
1
<child :num="num" @update:num="num = $event"></child>
-

这样看起来就简单明了的，可是父组件书写是比较麻烦的，于是就有了这个我没有使用过的修饰符

- 
1
<child :num.sync="num"></child>
-

现在父组件这样写就能达到相同的效果了。

- -
- - 阅读全文 » - -
- - - -
- - - - - - - - - - - - - -
- - - - - - - - -
- -
-
- - - -
- - - - - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

- - - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - - -

css中background-color:transparent与opacity:0有什么区别？

-

circle ripple

-

滚轮兼容

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function addMouseWheelHandler(){
    var prefix = '';
    var _addEventListener;
    if (window.addEventListener){
        _addEventListener = "addEventListener";
    }else{
        _addEventListener = "attachEvent";
        prefix = 'on';
    }
     // detect available wheel event
    var support = 'onwheel' in document.createElement('div') ? 'wheel' : // Modern browsers support "wheel"
              document.onmousewheel !== undefined ? 'mousewheel' : // Webkit and IE support at least "mousewheel"
              'DOMMouseScroll'; // let's assume that remaining browsers are older Firefox
    if(support == 'DOMMouseScroll'){
        document[ _addEventListener ](prefix + 'MozMousePixelScroll', MouseWheelHandler, false);
    }
    //handle MozMousePixelScroll in older Firefox
    else{
        document[ _addEventListener ](prefix + support, MouseWheelHandler, false);
    }
}
- -
- - 阅读全文 » - -
- - - -
- - - - - - - - - - - - - -
- - - - - - - - -
- -
-
- - - -
- - - - - - - - - - - - - -
- - - -
- - - - - - - -
- - - -

- - - - -

- - -
- - - - - - - - - - - - 发表于 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - - - - -
    -
  • 实现波浪效果
    • -
-

纯 CSS 实现波浪效果！

-

codepen wave 椭圆实现

-

codepen wave canvas实现

-

codepen wave 1vw实现

-

自己尝试使用 canvas 去画贝塞尔曲线来画波浪的形状，还是比较麻烦的，但是这样做出来的更加的精美但是也比较消耗性能，其实还有一些会选择使用图片而不是去画贝塞尔曲线。

-

而使用椭圆实现其实是对方形添加 border-radius 并让其进行 360deg 旋转，遮挡大部分以达到波浪滚动的视觉错觉，这个方法会比较快捷。

-

- -
- - 阅读全文 » - -
- - - -
- - - - - - - - - - - - - -
- - - - - - - - -
- -
-
- - - -
- - - -
- - - - - - -
- - -
- - - -
-
- - - -
-
- - - - - -
-
- - - - -
- - -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Marsorsun + + + + + + + + + + + + + + +
+
+ + + + +
+ + 0% +
+ + +
+
+
+
+ +
+
+ + + +
+ + + + + +
+

+ + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + +
+
+ + + + +
+ + +


参考 TypeScript Handbook（中文版）

+

没有记录变量声明这一节，看了下其实是对 JavaScript 为何推荐使用 let，const 而非 var 进行的简要介绍。个人推荐去看 let 和 const 命令

+

进入今天的正题，TypeScript 所谓的接口到底是啥，他与 Java 的接口是差不多的吗？我匆匆的浏览一了一遍，感觉他并不是像 Java 那样为了多态而存在的，他的存在已然是为了方便类型检查, 感觉是对传参时进行控制，就像文档所说的

+ + +
+ + 阅读全文 » + +
+ + + + +
+ + + + +
+
+ +
+
+ + + +
+ + +
+ + + +
+ + + + + +
+

+ + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +


参考 TypeScript Handbook（中文版）

+

布尔值 boolean

1
let handle: boolean = false;
+

数值 number

二进制/八进制/十六进制/十进制

1
let count: number = 10;

+ + +
+ + 阅读全文 » + +
+ + + + +
+ + + + +
+
+ +
+
+ + + +
+ + +
+ + + +
+ + + + + +
+

+ + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + +
+
+ + + + +
+ + +

不知不觉工作的时间已将近三个月了，公司的培训也结束，已经标志着自己的职场生涯的游戏拉开了序幕。自己感觉自己早已习惯工作的节奏，但是状态并不好，想的很多，做的却很少。曾经想的坚持

+
    +
  • 锻炼
    • +
  • 技术笔记
    • +
  • 读书（书倒是买了不少，看的话就是个笑话）
    • +
  • 随笔
    • +
  • 给父母的电话
    • +
+

……

+ + +
+ + 阅读全文 » + +
+ + + + +
+ + + + +
+
+ +
+
+ + + +
+ + +
+ + + +
+ + + + + +
+

+ + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

+

Algorithm

Add Two Numbers、

+

Review

Virtual DOM is pure overhead

+

Virtual DOM is pure overhead

Let’s retire the ‘virtual DOM is fast’ myth once and for all

+

虚拟DOM是纯粹的开销

+

让我们一劳永逸地退出“虚拟DOM是快的”的神话

+ + +
+ + 阅读全文 » + +
+ + + + +
+ + + + +
+
+ +
+
+ + + +
+ + +
+ + + +
+ + + + + +
+

+ + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

+

时日如飞，三个月的时间即将而至，我的实习也到了尾声。

+

这段时间很快，比我刚开始想象的快多了，我也如愿以偿的逃离了想逃离的东西。

+

没有鸡汤 just for fun

+ + +
+ + 阅读全文 » + +
+ + + + +
+ + + + +
+
+ +
+
+ + + +
+ + +
+ + + +
+ + + + + +
+

+ + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

+

.sync 修饰符

看 happy-scroll 源码的时候看到了 .sync 修饰符，没有用过所以看了下，它是在 vue 2.3.0+ 新增的，主要是解决使用 props 传值后子组件在使用了 emit 来进行 “双向绑定” ，但是父组件与子组件都没有明显的修改痕迹而不利于代码可读性。但是这样写的话可读性会好一些，在子组建中

+
1
<div @click="$emit('update:num', num+1)">click {{num}}</div>
+

再父组件中

+
1
<child :num="num" @update:num="num = $event"></child>
+

这样看起来就简单明了的，可是父组件书写是比较麻烦的，于是就有了这个我没有使用过的修饰符

+ 
1
<child :num.sync="num"></child>
+

现在父组件这样写就能达到相同的效果了。

+ + +
+ + 阅读全文 » + +
+ + + + +
+ + + + +
+
+ +
+
+ + + +
+ + +
+ + + +
+ + + + + +
+

+ + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +

css中background-color:transparent与opacity:0有什么区别？

+

circle ripple

+

滚轮兼容

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function addMouseWheelHandler(){
    var prefix = '';
    var _addEventListener;

    if (window.addEventListener){
        _addEventListener = "addEventListener";
    }else{
        _addEventListener = "attachEvent";
        prefix = 'on';
    }

     // detect available wheel event
    var support = 'onwheel' in document.createElement('div') ? 'wheel' : // Modern browsers support "wheel"
              document.onmousewheel !== undefined ? 'mousewheel' : // Webkit and IE support at least "mousewheel"
              'DOMMouseScroll'; // let's assume that remaining browsers are older Firefox


    if(support == 'DOMMouseScroll'){
        document[ _addEventListener ](prefix + 'MozMousePixelScroll', MouseWheelHandler, false);
    }

    //handle MozMousePixelScroll in older Firefox
    else{
        document[ _addEventListener ](prefix + support, MouseWheelHandler, false);
    }
}
+ + +
+ + 阅读全文 » + +
+ + + + +
+ + + + +
+
+ +
+
+ + + +
+ + +
+ + + +
+ + + + + +
+

+ + + +

+ +
+ + + + + 发表于 + + + + + + + + + + + + + + + + 更新于 + + + + + + + +
+
+ + + + +
+ + +
    +
  • 实现波浪效果
    • +
+

纯 CSS 实现波浪效果！

+

codepen wave 椭圆实现

+

codepen wave canvas实现

+

codepen wave 1vw实现

+

自己尝试使用 canvas 去画贝塞尔曲线来画波浪的形状，还是比较麻烦的，但是这样做出来的更加的精美但是也比较消耗性能，其实还有一些会选择使用图片而不是去画贝塞尔曲线。

+

而使用椭圆实现其实是对方形添加 border-radius 并让其进行 360deg 旋转，遮挡大部分以达到波浪滚动的视觉错觉，这个方法会比较快捷。

+

+ + +
+ + 阅读全文 » + +
+ + + + +
+ + + + +
+
+ +
+
+ + + +
+ + +
+ + + + + +
+ + +
+ + +
+
+ + + +
+
+ + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/js/algolia-search.js b/js/algolia-search.js new file mode 100644 index 00000000..07966d82 --- /dev/null +++ b/js/algolia-search.js @@ -0,0 +1,109 @@ +/* global instantsearch, CONFIG */ + +window.addEventListener('DOMContentLoaded', () => { + const algoliaSettings = CONFIG.algolia; + + let search = instantsearch({ + appId : algoliaSettings.appID, + apiKey : algoliaSettings.apiKey, + indexName : algoliaSettings.indexName, + searchFunction: helper => { + let searchInput = document.querySelector('#search-input input'); + if (searchInput.value) { + helper.search(); + } + } + }); + + window.pjax && search.on('render', () => { + window.pjax.refresh(document.getElementById('algolia-hits')); + }); + + // Registering Widgets + [ + instantsearch.widgets.searchBox({ + container : '#search-input', + placeholder: algoliaSettings.labels.input_placeholder + }), + + instantsearch.widgets.stats({ + container: '#algolia-stats', + templates: { + body: data => { + let stats = algoliaSettings.labels.hits_stats + .replace(/\$\{hits}/, data.nbHits) + .replace(/\$\{time}/, data.processingTimeMS); + return `${stats} + + Algolia + +
`; + } + } + }), + + instantsearch.widgets.hits({ + container : '#algolia-hits', + hitsPerPage: algoliaSettings.hits.per_page || 10, + templates : { + item: data => { + let link = data.permalink ? data.permalink : CONFIG.root + data.path; + return `${data._highlightResult.title.value}`; + }, + empty: data => { + return `
+ ${algoliaSettings.labels.hits_empty.replace(/\$\{query}/, data.query)} +
`; + } + }, + cssClasses: { + item: 'algolia-hit-item' + } + }), + + instantsearch.widgets.pagination({ + container : '#algolia-pagination', + scrollTo : false, + showFirstLast: false, + labels : { + first : '', + last : '', + previous: '', + next : '' + }, + cssClasses: { + root : 'pagination', + item : 'pagination-item', + link : 'page-number', + active : 'current', + disabled: 'disabled-item' + } + }) + ].forEach(search.addWidget, search); + + search.start(); + + // Handle and trigger popup window + document.querySelector('.popup-trigger').addEventListener('click', () => { + document.body.style.overflow = 'hidden'; + document.querySelector('.search-pop-overlay').style.display = 'block'; + document.querySelector('.popup').style.display = 'block'; + document.querySelector('#search-input input').focus(); + }); + + // Monitor main search box + const onPopupClose = () => { + document.body.style.overflow = ''; + document.querySelector('.search-pop-overlay').style.display = 'none'; + document.querySelector('.popup').style.display = 'none'; + }; + + document.querySelector('.search-pop-overlay').addEventListener('click', onPopupClose); + document.querySelector('.popup-btn-close').addEventListener('click', onPopupClose); + window.addEventListener('pjax:success', onPopupClose); + window.addEventListener('keyup', event => { + if (event.which === 27) { + onPopupClose(); + } + }); +}); diff --git a/js/bookmark.js b/js/bookmark.js new file mode 100644 index 00000000..c36ca445 --- /dev/null +++ b/js/bookmark.js @@ -0,0 +1,59 @@ +/* global CONFIG */ + +window.addEventListener('DOMContentLoaded', () => { + 'use strict'; + + var doSaveScroll = () => { + localStorage.setItem('bookmark' + location.pathname, window.scrollY); + }; + + var scrollToMark = () => { + var top = localStorage.getItem('bookmark' + location.pathname); + top = parseInt(top, 10); + // If the page opens with a specific hash, just jump out + if (!isNaN(top) && location.hash === '') { + // Auto scroll to the position + window.anime({ + targets : [document.documentElement, document.body], + duration : 200, + easing : 'linear', + scrollTop: top + }); + } + }; + // Register everything + var init = function(trigger) { + // Create a link element + var link = document.querySelector('.book-mark-link'); + // Scroll event + window.addEventListener('scroll', () => { + window.scrollY === 0 ? link.classList.add('book-mark-link-fixed') : link.classList.remove('book-mark-link-fixed'); + }); + // Register beforeunload event when the trigger is auto + if (trigger === 'auto') { + // Register beforeunload event + window.addEventListener('beforeunload', doSaveScroll); + window.addEventListener('pjax:send', doSaveScroll); + } + // Save the position by clicking the icon + link.addEventListener('click', event => { + event.preventDefault(); + doSaveScroll(); + window.anime({ + targets : link, + duration: 200, + easing : 'linear', + top : -30, + complete: () => { + setTimeout(() => { + link.style.top = ''; + }, 400); + } + }); + }); + scrollToMark(); + window.addEventListener('pjax:success', scrollToMark); + }; + + init(CONFIG.bookmark.save); +}); diff --git a/js/local-search.js b/js/local-search.js new file mode 100644 index 00000000..e2bc55e3 --- /dev/null +++ b/js/local-search.js @@ -0,0 +1,319 @@ +/* global CONFIG */ + +window.addEventListener('DOMContentLoaded', () => { + // Popup Window + let isfetched = false; + let datas; + let isXml = true; + // Search DB path + let searchPath = CONFIG.path; + if (searchPath.length === 0) { + searchPath = 'search.xml'; + } else if (/json$/i.test(searchPath)) { + isXml = false; + } + const path = CONFIG.root + searchPath; + const input = document.getElementById('search-input'); + const resultContent = document.getElementById('search-result'); + + // Ref: https://github.com/ForbesLindesay/unescape-html + const unescapeHtml = html => { + return String(html) + .replace(/"/g, '"') + .replace(/'/g, '\'') + .replace(/:/g, ':') + // Replace all the other &#x; chars + .replace(/&#(\d+);/g, (m, p) => { + return String.fromCharCode(p); + }) + .replace(/</g, '<') + .replace(/>/g, '>') + .replace(/&/g, '&'); + }; + + const getIndexByWord = (word, text, caseSensitive) => { + let wordLen = word.length; + if (wordLen === 0) { + return []; + } + let startPosition = 0; + let position = []; + let index = []; + if (!caseSensitive) { + text = text.toLowerCase(); + word = word.toLowerCase(); + } + while ((position = text.indexOf(word, startPosition)) > -1) { + index.push({ + position: position, + word : word + }); + startPosition = position + wordLen; + } + return index; + }; + + // Merge hits into slices + const mergeIntoSlice = (start, end, index, searchText) => { + let item = index[index.length - 1]; + let position = item.position; + let word = item.word; + let hits = []; + let searchTextCountInSlice = 0; + while (position + word.length <= end && index.length !== 0) { + if (word === searchText) { + searchTextCountInSlice++; + } + hits.push({ + position: position, + length : word.length + }); + let wordEnd = position + word.length; + + // Move to next position of hit + index.pop(); + while (index.length !== 0) { + item = index[index.length - 1]; + position = item.position; + word = item.word; + if (wordEnd > position) { + index.pop(); + } else { + break; + } + } + } + return { + hits : hits, + start : start, + end : end, + searchTextCount: searchTextCountInSlice + }; + }; + + // Highlight title and content + const highlightKeyword = (text, slice) => { + let result = ''; + let prevEnd = slice.start; + slice.hits.forEach(hit => { + result += text.substring(prevEnd, hit.position); + let end = hit.position + hit.length; + result += `${text.substring(hit.position, end)}`; + prevEnd = end; + }); + result += text.substring(prevEnd, slice.end); + return result; + }; + + const inputEventFunction = () => { + let searchText = input.value.trim().toLowerCase(); + let keywords = searchText.split(/[-\s]+/); + if (keywords.length > 1) { + keywords.push(searchText); + } + let resultItems = []; + if (searchText.length > 0) { + // Perform local searching + datas.forEach(data => { + // Only match articles with not empty titles + if (!data.title) { + return; + } + let searchTextCount = 0; + let title = data.title.trim(); + let titleInLowerCase = title.toLowerCase(); + let content = data.content ? data.content.trim().replace(/<[^>]+>/g, '') : ''; + if (CONFIG.localsearch.unescape) { + content = unescapeHtml(content); + } + let contentInLowerCase = content.toLowerCase(); + let articleUrl = decodeURIComponent(data.url).replace(/\/{2,}/g, '/'); + let indexOfTitle = []; + let indexOfContent = []; + keywords.forEach(keyword => { + indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false)); + indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false)); + }); + + // Show search results + if (indexOfTitle.length > 0 || indexOfContent.length > 0) { + let hitCount = indexOfTitle.length + indexOfContent.length; + // Sort index by position of keyword + [indexOfTitle, indexOfContent].forEach(index => { + index.sort((itemLeft, itemRight) => { + if (itemRight.position !== itemLeft.position) { + return itemRight.position - itemLeft.position; + } + return itemLeft.word.length - itemRight.word.length; + }); + }); + + let slicesOfTitle = []; + if (indexOfTitle.length !== 0) { + let tmp = mergeIntoSlice(0, title.length, indexOfTitle, searchText); + searchTextCount += tmp.searchTextCountInSlice; + slicesOfTitle.push(tmp); + } + + let slicesOfContent = []; + while (indexOfContent.length !== 0) { + let item = indexOfContent[indexOfContent.length - 1]; + let position = item.position; + let word = item.word; + // Cut out 100 characters + let start = position - 20; + let end = position + 80; + if (start < 0) { + start = 0; + } + if (end < position + word.length) { + end = position + word.length; + } + if (end > content.length) { + end = content.length; + } + let tmp = mergeIntoSlice(start, end, indexOfContent, searchText); + searchTextCount += tmp.searchTextCountInSlice; + slicesOfContent.push(tmp); + } + + // Sort slices in content by search text's count and hits' count + slicesOfContent.sort((sliceLeft, sliceRight) => { + if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) { + return sliceRight.searchTextCount - sliceLeft.searchTextCount; + } else if (sliceLeft.hits.length !== sliceRight.hits.length) { + return sliceRight.hits.length - sliceLeft.hits.length; + } + return sliceLeft.start - sliceRight.start; + }); + + // Select top N slices in content + let upperBound = parseInt(CONFIG.localsearch.top_n_per_article, 10); + if (upperBound >= 0) { + slicesOfContent = slicesOfContent.slice(0, upperBound); + } + + let resultItem = ''; + + if (slicesOfTitle.length !== 0) { + resultItem += `
  • ${highlightKeyword(title, slicesOfTitle[0])}`; + } else { + resultItem += `
  • ${title}`; + } + + slicesOfContent.forEach(slice => { + resultItem += `

    ${highlightKeyword(content, slice)}...

    `; + }); + + resultItem += '
    • '; + resultItems.push({ + item : resultItem, + searchTextCount: searchTextCount, + hitCount : hitCount, + id : resultItems.length + }); + } + }); + } + if (keywords.length === 1 && keywords[0] === '') { + resultContent.innerHTML = '
    '; + } else if (resultItems.length === 0) { + resultContent.innerHTML = '
    '; + } else { + resultItems.sort((resultLeft, resultRight) => { + if (resultLeft.searchTextCount !== resultRight.searchTextCount) { + return resultRight.searchTextCount - resultLeft.searchTextCount; + } else if (resultLeft.hitCount !== resultRight.hitCount) { + return resultRight.hitCount - resultLeft.hitCount; + } + return resultRight.id - resultLeft.id; + }); + let searchResultList = ''; + resultContent.innerHTML = searchResultList; + window.pjax && window.pjax.refresh(resultContent); + } + }; + + const fetchData = callback => { + fetch(path) + .then(response => response.text()) + .then(res => { + // Get the contents from search data + isfetched = true; + datas = isXml ? [...new DOMParser().parseFromString(res, 'text/xml').querySelectorAll('entry')].map(item => { + return { + title : item.querySelector('title').innerHTML, + content: item.querySelector('content').innerHTML, + url : item.querySelector('url').innerHTML + }; + }) : JSON.parse(res); + + // Remove loading animation + document.querySelector('.search-pop-overlay').innerHTML = ''; + document.body.style.overflow = ''; + + if (callback) { + callback(); + } + }); + }; + + if (CONFIG.localsearch.preload) { + fetchData(); + } + + const proceedSearch = () => { + document.body.style.overflow = 'hidden'; + document.querySelector('.search-pop-overlay').style.display = 'block'; + document.querySelector('.popup').style.display = 'block'; + document.getElementById('search-input').focus(); + }; + + // Search function + const searchFunc = () => { + document.querySelector('.search-pop-overlay').style.display = ''; + document.querySelector('.search-pop-overlay').innerHTML = '
    '; + fetchData(proceedSearch); + }; + + if (CONFIG.localsearch.trigger === 'auto') { + input.addEventListener('input', inputEventFunction); + } else { + document.querySelector('.search-icon').addEventListener('click', inputEventFunction); + input.addEventListener('keypress', event => { + if (event.keyCode === 13) { + inputEventFunction(); + } + }); + } + + // Handle and trigger popup window + document.querySelector('.popup-trigger').addEventListener('click', event => { + event.stopPropagation(); + if (isfetched === false) { + searchFunc(); + } else { + proceedSearch(); + } + }); + + // Monitor main search box + const onPopupClose = () => { + document.body.style.overflow = ''; + document.querySelector('.search-pop-overlay').style.display = 'none'; + document.querySelector('.popup').style.display = 'none'; + }; + + document.querySelector('.search-pop-overlay').addEventListener('click', onPopupClose); + document.querySelector('.popup-btn-close').addEventListener('click', onPopupClose); + window.addEventListener('pjax:success', onPopupClose); + window.addEventListener('keyup', event => { + if (event.which === 27) { + onPopupClose(); + } + }); +}); diff --git a/js/motion.js b/js/motion.js new file mode 100644 index 00000000..999b9d1a --- /dev/null +++ b/js/motion.js @@ -0,0 +1,169 @@ +/* global NexT, CONFIG, Velocity */ + +NexT.motion = {}; + +NexT.motion.integrator = { + queue : [], + cursor: -1, + init : function() { + this.queue = []; + this.cursor = -1; + return this; + }, + add: function(fn) { + this.queue.push(fn); + return this; + }, + next: function() { + this.cursor++; + var fn = this.queue[this.cursor]; + typeof fn === 'function' && fn(NexT.motion.integrator); + }, + bootstrap: function() { + this.next(); + } +}; + +NexT.motion.middleWares = { + logo: function(integrator) { + var sequence = []; + var brand = document.querySelector('.brand'); + var image = document.querySelector('.custom-logo-image'); + var title = document.querySelector('.site-title'); + var subtitle = document.querySelector('.site-subtitle'); + var logoLineTop = document.querySelector('.logo-line-before i'); + var logoLineBottom = document.querySelector('.logo-line-after i'); + + brand && sequence.push({ + e: brand, + p: {opacity: 1}, + o: {duration: 200} + }); + + function getMistLineSettings(element, translateX) { + return { + e: element, + p: {translateX: translateX}, + o: { + duration : 500, + sequenceQueue: false + } + }; + } + + function pushImageToSequence() { + sequence.push({ + e: image, + p: {opacity: 1, top: 0}, + o: {duration: 200} + }); + } + + NexT.utils.isMist() && logoLineTop && logoLineBottom + && sequence.push( + getMistLineSettings(logoLineTop, '100%'), + getMistLineSettings(logoLineBottom, '-100%') + ); + + NexT.utils.isMuse() && image && pushImageToSequence(); + + title && sequence.push({ + e: title, + p: {opacity: 1, top: 0}, + o: {duration: 200} + }); + + subtitle && sequence.push({ + e: subtitle, + p: {opacity: 1, top: 0}, + o: {duration: 200} + }); + + (NexT.utils.isPisces() || NexT.utils.isGemini()) && image && pushImageToSequence(); + + if (sequence.length > 0) { + sequence[sequence.length - 1].o.complete = function() { + integrator.next(); + }; + Velocity.RunSequence(sequence); + } else { + integrator.next(); + } + + if (CONFIG.motion.async) { + integrator.next(); + } + }, + + menu: function(integrator) { + + Velocity(document.querySelectorAll('.menu-item'), 'transition.slideDownIn', { + display : null, + duration: 200, + complete: function() { + integrator.next(); + } + }); + + if (CONFIG.motion.async) { + integrator.next(); + } + }, + + postList: function(integrator) { + + var postBlock = document.querySelectorAll('.post-block, .pagination, .comments'); + var postBlockTransition = CONFIG.motion.transition.post_block; + var postHeader = document.querySelectorAll('.post-header'); + var postHeaderTransition = CONFIG.motion.transition.post_header; + var postBody = document.querySelectorAll('.post-body'); + var postBodyTransition = CONFIG.motion.transition.post_body; + var collHeader = document.querySelectorAll('.collection-header'); + var collHeaderTransition = CONFIG.motion.transition.coll_header; + var hasPost = postBlock.length > 0; + + if (hasPost) { + var postMotionOptions = window.postMotionOptions || { + stagger : 100, + drag : true, + complete: function() { + integrator.next(); + } + }; + + if (CONFIG.motion.transition.post_block) { + Velocity(postBlock, 'transition.' + postBlockTransition, postMotionOptions); + } + if (CONFIG.motion.transition.post_header) { + Velocity(postHeader, 'transition.' + postHeaderTransition, postMotionOptions); + } + if (CONFIG.motion.transition.post_body) { + Velocity(postBody, 'transition.' + postBodyTransition, postMotionOptions); + } + if (CONFIG.motion.transition.coll_header) { + Velocity(collHeader, 'transition.' + collHeaderTransition, postMotionOptions); + } + } + if (NexT.utils.isPisces() || NexT.utils.isGemini()) { + integrator.next(); + } + }, + + sidebar: function(integrator) { + NexT.utils.updateSidebarPosition(); + var sidebarAffix = document.querySelector('.sidebar-inner'); + var sidebarAffixTransition = CONFIG.motion.transition.sidebar; + // Only for Pisces | Gemini. + if (CONFIG.motion.transition.sidebar && (NexT.utils.isPisces() || NexT.utils.isGemini())) { + Velocity(sidebarAffix, 'transition.' + sidebarAffixTransition, { + display : null, + duration: 200, + complete: function() { + // After motion complete need to remove transform from sidebar to let affix work on Pisces | Gemini. + sidebarAffix.style.transform = 'initial'; + } + }); + } + integrator.next(); + } +}; diff --git a/js/next-boot.js b/js/next-boot.js new file mode 100644 index 00000000..2ff30e7e --- /dev/null +++ b/js/next-boot.js @@ -0,0 +1,114 @@ +/* global NexT, CONFIG, Velocity */ + +NexT.boot = {}; + +NexT.boot.registerEvents = function() { + + NexT.utils.registerScrollPercent(); + NexT.utils.registerCanIUseTag(); + + // Mobile top menu bar. + document.querySelector('.site-nav-toggle button').addEventListener('click', () => { + var siteNav = document.querySelector('.site-nav'); + var ON_CLASS_NAME = 'site-nav-on'; + var animateAction = siteNav.classList.contains(ON_CLASS_NAME) ? 'slideUp' : 'slideDown'; + + if (typeof Velocity === 'function') { + Velocity(siteNav, animateAction, { + duration: 200, + complete: function() { + siteNav.classList.toggle(ON_CLASS_NAME); + } + }); + } else { + siteNav.classList.toggle(ON_CLASS_NAME); + } + }); + + var TAB_ANIMATE_DURATION = 200; + document.querySelectorAll('.sidebar-nav li').forEach((element, index) => { + element.addEventListener('click', event => { + var item = event.currentTarget; + var activeTabClassName = 'sidebar-nav-active'; + var activePanelClassName = 'sidebar-panel-active'; + if (item.classList.contains(activeTabClassName)) return; + + var targets = document.querySelectorAll('.sidebar-panel'); + var target = targets[index]; + var currentTarget = targets[1 - index]; + window.anime({ + targets : currentTarget, + duration: TAB_ANIMATE_DURATION, + easing : 'linear', + opacity : 0, + complete: () => { + // Prevent adding TOC to Overview if Overview was selected when close & open sidebar. + currentTarget.classList.remove(activePanelClassName); + target.style.opacity = 0; + target.classList.add(activePanelClassName); + window.anime({ + targets : target, + duration: TAB_ANIMATE_DURATION, + easing : 'linear', + opacity : 1 + }); + } + }); + + [...item.parentNode.children].forEach(element => { + element.classList.remove(activeTabClassName); + }); + item.classList.add(activeTabClassName); + }); + }); + + window.addEventListener('resize', NexT.utils.initSidebarDimension); + + window.addEventListener('hashchange', () => { + var tHash = location.hash; + if (tHash !== '' && !tHash.match(/%\S{2}/)) { + var target = document.querySelector(`.tabs ul.nav-tabs li a[href="${tHash}"]`); + target && target.click(); + } + }); +}; + +NexT.boot.refresh = function() { + + /** + * Register JS handlers by condition option. + * Need to add config option in Front-End at 'layout/_partials/head.swig' file. + */ + CONFIG.fancybox && NexT.utils.wrapImageWithFancyBox(); + CONFIG.mediumzoom && window.mediumZoom('.post-body :not(a) > img'); + CONFIG.lazyload && window.lozad('.post-body img').observe(); + CONFIG.pangu && window.pangu.spacingPage(); + + CONFIG.exturl && NexT.utils.registerExtURL(); + CONFIG.copycode.enable && NexT.utils.registerCopyCode(); + NexT.utils.registerTabsTag(); + NexT.utils.registerActiveMenuItem(); + NexT.utils.registerSidebarTOC(); + NexT.utils.wrapTableWithBox(); + NexT.utils.registerVideoIframe(); +}; + +NexT.boot.motion = function() { + // Define Motion Sequence & Bootstrap Motion. + if (CONFIG.motion.enable) { + NexT.motion.integrator + .add(NexT.motion.middleWares.logo) + .add(NexT.motion.middleWares.menu) + .add(NexT.motion.middleWares.postList) + .add(NexT.motion.middleWares.sidebar) + .bootstrap(); + } else { + NexT.utils.updateSidebarPosition(); + } +}; + +window.addEventListener('DOMContentLoaded', () => { + NexT.boot.registerEvents(); + NexT.boot.refresh(); + NexT.boot.motion(); +}); diff --git a/js/schemes/muse.js b/js/schemes/muse.js new file mode 100644 index 00000000..8b6056ae --- /dev/null +++ b/js/schemes/muse.js @@ -0,0 +1,190 @@ +/* global NexT, CONFIG, Velocity */ + +window.addEventListener('DOMContentLoaded', () => { + + var sidebarToggleLines = { + lines: [], + init : function() { + this.lines.forEach(line => { + line.transform('init'); + }); + }, + arrow: function() { + this.lines.forEach(line => { + line.transform('arrow'); + }); + }, + close: function() { + this.lines.forEach(line => { + line.transform('close'); + }); + } + }; + + function SidebarToggleLine(settings) { + this.status = Object.assign({ + init: { + width : '100%', + opacity : 1, + transform: 'rotate(0deg)', + top : 0, + left : 0 + } + }, settings.status); + this.transform = function(status) { + Object.assign(document.querySelector(settings.el).style, this.status[status]); + }; + } + + var isRight = CONFIG.sidebar.position === 'right'; + + sidebarToggleLines.lines = [new SidebarToggleLine({ + el : '.sidebar-toggle-line-first', + status: isRight + ? { + arrow: {width: '50%', transform: 'rotate(-45deg)', top: '2px'}, + close: {width: '100%', transform: 'rotate(-45deg)', top: '5px'} + } : { + arrow: {width: '50%', transform: 'rotate(45deg)', top: '2px', left: '50%'}, + close: {width: '100%', transform: 'rotate(-45deg)', top: '5px', left: '0px'} + } + }), new SidebarToggleLine({ + el : '.sidebar-toggle-line-middle', + status: isRight + ? { + arrow: {width: '90%'}, + close: {opacity: 0} + } : { + arrow: {width: '90%', left: '2px'}, + close: {opacity: 0, left: '0px'} + } + }), new SidebarToggleLine({ + el : '.sidebar-toggle-line-last', + status: isRight + ? { + arrow: {width: '50%', transform: 'rotate(45deg)', top: '-2px'}, + close: {width: '100%', transform: 'rotate(45deg)', top: '-5px'} + } : { + arrow: {width: '50%', transform: 'rotate(-45deg)', top: '-2px', left: '50%'}, + close: {width: '100%', transform: 'rotate(45deg)', top: '-5px', left: '0px'} + } + })]; + + var SIDEBAR_WIDTH = CONFIG.sidebar.width || 320; + var SIDEBAR_DISPLAY_DURATION = 400; + var mousePos = {}; var touchPos = {}; + + var sidebarToggleMotion = { + sidebarEl : document.querySelector('.sidebar'), + isSidebarVisible: false, + init : function() { + sidebarToggleLines.init(); + + window.addEventListener('mousedown', this.mousedownHandler.bind(this)); + window.addEventListener('mouseup', this.mouseupHandler.bind(this)); + document.querySelector('#sidebar-dimmer').addEventListener('click', this.clickHandler.bind(this)); + document.querySelector('.sidebar-toggle').addEventListener('click', this.clickHandler.bind(this)); + document.querySelector('.sidebar-toggle').addEventListener('mouseenter', this.mouseEnterHandler.bind(this)); + document.querySelector('.sidebar-toggle').addEventListener('mouseleave', this.mouseLeaveHandler.bind(this)); + this.sidebarEl.addEventListener('touchstart', this.touchstartHandler.bind(this)); + this.sidebarEl.addEventListener('touchend', this.touchendHandler.bind(this)); + this.sidebarEl.addEventListener('touchmove', event => event.preventDefault()); + window.addEventListener('sidebar:show', this.showSidebar.bind(this)); + window.addEventListener('sidebar:hide', this.hideSidebar.bind(this)); + }, + mousedownHandler: function(event) { + mousePos.X = event.pageX; + mousePos.Y = event.pageY; + }, + mouseupHandler: function(event) { + var deltaX = event.pageX - mousePos.X; + var deltaY = event.pageY - mousePos.Y; + var clickingBlankPart = Math.sqrt((deltaX * deltaX) + (deltaY * deltaY)) < 20 && event.target.matches('.main'); + if (this.isSidebarVisible && (clickingBlankPart || event.target.matches('img.medium-zoom-image, .fancybox img'))) { + this.hideSidebar(); + } + }, + clickHandler: function() { + this.isSidebarVisible ? this.hideSidebar() : this.showSidebar(); + }, + mouseEnterHandler: function() { + if (!this.isSidebarVisible) { + sidebarToggleLines.arrow(); + } + }, + mouseLeaveHandler: function() { + if (!this.isSidebarVisible) { + sidebarToggleLines.init(); + } + }, + touchstartHandler: function(event) { + touchPos.X = event.touches[0].clientX; + touchPos.Y = event.touches[0].clientY; + }, + touchendHandler: function(event) { + var deltaX = event.changedTouches[0].clientX - touchPos.X; + var deltaY = event.changedTouches[0].clientY - touchPos.Y; + var effectiveSliding = Math.abs(deltaY) < 20 && ((deltaX > 30 && isRight) || (deltaX < -30 && !isRight)); + if (this.isSidebarVisible && effectiveSliding) { + this.hideSidebar(); + } + }, + showSidebar: function() { + this.isSidebarVisible = true; + this.sidebarEl.classList.add('sidebar-active'); + if (typeof Velocity === 'function') { + Velocity(document.querySelectorAll('.sidebar .motion-element:not(.site-state)'), isRight ? 'transition.slideRightIn' : 'transition.slideLeftIn', { + stagger: 50, + drag : true + }); + Velocity(document.querySelector('.site-state'), isRight ? 'transition.slideRightIn' : 'transition.slideLeftIn', { + stagger: 50, + drag : true, + display: 'flex' + }); + } + + sidebarToggleLines.close(); + NexT.utils.isDesktop() && window.anime(Object.assign({ + targets : document.body, + duration: SIDEBAR_DISPLAY_DURATION, + easing : 'linear' + }, isRight ? { + 'padding-right': SIDEBAR_WIDTH + } : { + 'padding-left': SIDEBAR_WIDTH + })); + }, + hideSidebar: function() { + this.isSidebarVisible = false; + this.sidebarEl.classList.remove('sidebar-active'); + + sidebarToggleLines.init(); + NexT.utils.isDesktop() && window.anime(Object.assign({ + targets : document.body, + duration: SIDEBAR_DISPLAY_DURATION, + easing : 'linear' + }, isRight ? { + 'padding-right': 0 + } : { + 'padding-left': 0 + })); + } + }; + sidebarToggleMotion.init(); + + function updateFooterPosition() { + var containerHeight = document.querySelector('.container').offsetHeight; + var footer = document.getElementById('footer'); + if (footer.classList.contains('footer-fixed')) containerHeight += footer.outerHeight(true); + if (containerHeight < window.innerHeight) { + footer.classList.add('footer-fixed'); + } else { + footer.classList.remove('footer-fixed'); + } + } + + updateFooterPosition(); + window.addEventListener('resize', updateFooterPosition); + window.addEventListener('scroll', updateFooterPosition); +}); diff --git a/js/schemes/pisces.js b/js/schemes/pisces.js new file mode 100644 index 00000000..c75118e1 --- /dev/null +++ b/js/schemes/pisces.js @@ -0,0 +1,86 @@ +/* global NexT, CONFIG */ + +var Affix = { + init: function(element, options) { + this.element = element; + this.offset = options || 0; + this.affixed = null; + this.unpin = null; + this.pinnedOffset = null; + this.checkPosition(); + window.addEventListener('scroll', this.checkPosition.bind(this)); + window.addEventListener('click', this.checkPositionWithEventLoop.bind(this)); + window.matchMedia('(min-width: 992px)').addListener(event => { + if (event.matches) { + this.offset = NexT.utils.getAffixParam(); + this.checkPosition(); + } + }); + }, + getState: function(scrollHeight, height, offsetTop, offsetBottom) { + let scrollTop = window.scrollY; + let targetHeight = window.innerHeight; + if (offsetTop != null && this.affixed === 'top') return scrollTop < offsetTop ? 'top' : false; + if (this.affixed === 'bottom') { + if (offsetTop != null) return this.unpin <= this.element.getBoundingClientRect().top ? false : 'bottom'; + return scrollTop + targetHeight <= scrollHeight - offsetBottom ? false : 'bottom'; + } + let initializing = this.affixed === null; + let colliderTop = initializing ? scrollTop : this.element.getBoundingClientRect().top + scrollTop; + let colliderHeight = initializing ? targetHeight : height; + if (offsetTop != null && scrollTop <= offsetTop) return 'top'; + if (offsetBottom != null && (colliderTop + colliderHeight >= scrollHeight - offsetBottom)) return 'bottom'; + return false; + }, + getPinnedOffset: function() { + if (this.pinnedOffset) return this.pinnedOffset; + this.element.classList.remove('affix-top', 'affix-bottom'); + this.element.classList.add('affix'); + return (this.pinnedOffset = this.element.getBoundingClientRect().top); + }, + checkPositionWithEventLoop() { + setTimeout(this.checkPosition.bind(this), 1); + }, + checkPosition: function() { + if (window.getComputedStyle(this.element).display === 'none') return; + let height = this.element.offsetHeight - CONFIG.sidebarPadding; + let offset = this.offset; + let offsetTop = offset.top; + let offsetBottom = offset.bottom; + let scrollHeight = document.body.scrollHeight; + let affix = this.getState(scrollHeight, height, offsetTop, offsetBottom); + if (this.affixed !== affix) { + if (this.unpin != null) this.element.style.top = ''; + let affixType = 'affix' + (affix ? '-' + affix : ''); + this.affixed = affix; + this.unpin = affix === 'bottom' ? this.getPinnedOffset() : null; + this.element.classList.remove('affix', 'affix-top', 'affix-bottom'); + this.element.classList.add(affixType); + } + if (affix === 'bottom') { + this.element.style.top = scrollHeight - height - offsetBottom + 'px'; + } + } +}; + +NexT.utils.getAffixParam = function() { + const sidebarOffset = CONFIG.sidebar.offset || 12; + + let headerOffset = document.querySelector('.header-inner').offsetHeight + sidebarOffset; + let footer = document.querySelector('#footer'); + let footerInner = document.querySelector('.footer-inner'); + let footerMargin = footer.offsetHeight - footerInner.offsetHeight; + let footerOffset = footer.offsetHeight + footerMargin; + + document.querySelector('.sidebar').style.marginTop = headerOffset + 'px'; + + return { + top : headerOffset - sidebarOffset, + bottom: footerOffset + }; +}; + +window.addEventListener('DOMContentLoaded', () => { + + Affix.init(document.querySelector('.sidebar-inner'), NexT.utils.getAffixParam()); +}); diff --git a/js/src/affix.js b/js/src/affix.js deleted file mode 100644 index 5c6e25e6..00000000 --- a/js/src/affix.js +++ /dev/null @@ -1,168 +0,0 @@ -/* ======================================================================== - * Bootstrap: affix.js v3.3.5 - * http://getbootstrap.com/javascript/#affix - * ======================================================================== - * Copyright 2011-2015 Twitter, Inc. - * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) - * ======================================================================== */ - -/** - * Customized by Ivan.Nginx - * - * - Refactored with eslint-config-theme-next style. - */ - -(function($) { - 'use strict'; - - // AFFIX CLASS DEFINITION - // ====================== - - var Affix = function(element, options) { - this.options = $.extend({}, Affix.DEFAULTS, options); - - this.$target = $(this.options.target) - .on('scroll.bs.affix.data-api', $.proxy(this.checkPosition, this)) - .on('click.bs.affix.data-api', $.proxy(this.checkPositionWithEventLoop, this)); - - this.$element = $(element); - this.affixed = null; - this.unpin = null; - this.pinnedOffset = null; - - this.checkPosition(); - }; - - Affix.VERSION = '3.3.5'; - - Affix.RESET = 'affix affix-top affix-bottom'; - - Affix.DEFAULTS = { - offset: 0, - target: window - }; - - Affix.prototype.getState = function(scrollHeight, height, offsetTop, offsetBottom) { - var scrollTop = this.$target.scrollTop(); - var position = this.$element.offset(); - var targetHeight = this.$target.height(); - - if (offsetTop != null && this.affixed === 'top') return scrollTop < offsetTop ? 'top' : false; - - if (this.affixed === 'bottom') { - if (offsetTop != null) return scrollTop + this.unpin <= position.top ? false : 'bottom'; - return scrollTop + targetHeight <= scrollHeight - offsetBottom ? false : 'bottom'; - } - - var initializing = this.affixed == null; - var colliderTop = initializing ? scrollTop : position.top; - var colliderHeight = initializing ? targetHeight : height; - - if (offsetTop != null && scrollTop <= offsetTop) return 'top'; - if (offsetBottom != null && (colliderTop + colliderHeight >= scrollHeight - offsetBottom)) return 'bottom'; - - return false; - }; - - Affix.prototype.getPinnedOffset = function() { - if (this.pinnedOffset) return this.pinnedOffset; - this.$element.removeClass(Affix.RESET).addClass('affix'); - var scrollTop = this.$target.scrollTop(); - var position = this.$element.offset(); - return (this.pinnedOffset = position.top - scrollTop); - }; - - Affix.prototype.checkPositionWithEventLoop = function() { - setTimeout($.proxy(this.checkPosition, this), 1); - }; - - Affix.prototype.checkPosition = function() { - if (!this.$element.is(':visible')) return; - - var height = this.$element.height(); - var offset = this.options.offset; - var offsetTop = offset.top; - var offsetBottom = offset.bottom; - var scrollHeight = Math.max($(document).height(), $(document.body).height()); - - /* eslint-disable */ - if (typeof offset !== 'object') offsetBottom = offsetTop = offset; - if (typeof offsetTop === 'function') offsetTop = offset.top(this.$element); - if (typeof offsetBottom === 'function') offsetBottom = offset.bottom(this.$element); - /* eslint-enable */ - - var affix = this.getState(scrollHeight, height, offsetTop, offsetBottom); - - if (this.affixed !== affix) { - if (this.unpin != null) this.$element.css('top', ''); - - var affixType = 'affix' + (affix ? '-' + affix : ''); - var e = new $.Event(affixType + '.bs.affix'); - - this.$element.trigger(e); - - if (e.isDefaultPrevented()) return; - - this.affixed = affix; - this.unpin = affix === 'bottom' ? this.getPinnedOffset() : null; - - this.$element - .removeClass(Affix.RESET) - .addClass(affixType) - .trigger(affixType.replace('affix', 'affixed') + '.bs.affix'); - } - - if (affix === 'bottom') { - this.$element.offset({ - top: scrollHeight - height - offsetBottom - }); - } - }; - - // AFFIX PLUGIN DEFINITION - // ======================= - - function Plugin(option) { - return this.each(function() { - var $this = $(this); - var data = $this.data('bs.affix'); - var options = typeof option === 'object' && option; - - if (!data) $this.data('bs.affix', data = new Affix(this, options)); - if (typeof option === 'string') data[option](); - }); - } - - var old = $.fn.affix; - - $.fn.affix = Plugin; - $.fn.affix.Constructor = Affix; - - // AFFIX NO CONFLICT - // ================= - - $.fn.affix.noConflict = function() { - $.fn.affix = old; - return this; - }; - - // AFFIX DATA-API - // ============== - - $(window).on('load', function() { - $('[data-spy="affix"]').each(function() { - var $spy = $(this); - var data = $spy.data(); - - data.offset = data.offset || {}; - - /* eslint-disable */ - if (data.offsetBottom != null) data.offset.bottom = data.offsetBottom; - if (data.offsetTop != null) data.offset.top = data.offsetTop; - /* eslint-enable */ - - Plugin.call($spy, data); - }); - }); - -}(jQuery)); diff --git a/js/src/algolia-search.js b/js/src/algolia-search.js deleted file mode 100644 index 51341312..00000000 --- a/js/src/algolia-search.js +++ /dev/null @@ -1,114 +0,0 @@ -/* global instantsearch, CONFIG */ - -$(document).ready(function() { - var algoliaSettings = CONFIG.algolia; - var isAlgoliaSettingsValid = algoliaSettings.applicationID - && algoliaSettings.apiKey - && algoliaSettings.indexName; - - if (!isAlgoliaSettingsValid) { - window.console.error('Algolia Settings are invalid.'); - return; - } - - var search = instantsearch({ - appId : algoliaSettings.applicationID, - apiKey : algoliaSettings.apiKey, - indexName : algoliaSettings.indexName, - searchFunction: function(helper) { - var searchInput = $('#algolia-search-input').find('input'); - - if (searchInput.val()) { - helper.search(); - } - } - }); - - // Registering Widgets - [ - instantsearch.widgets.searchBox({ - container : '#algolia-search-input', - placeholder: algoliaSettings.labels.input_placeholder - }), - - instantsearch.widgets.hits({ - container : '#algolia-hits', - hitsPerPage: algoliaSettings.hits.per_page || 10, - templates : { - item: function(data) { - var link = data.permalink ? data.permalink : CONFIG.root + data.path; - return ( - '' - + data._highlightResult.title.value - + '' - ); - }, - empty: function(data) { - return ( - '
    ' - + algoliaSettings.labels.hits_empty.replace(/\$\{query}/, data.query) - + '
    ' - ); - } - }, - cssClasses: { - item: 'algolia-hit-item' - } - }), - - instantsearch.widgets.stats({ - container: '#algolia-stats', - templates: { - body: function(data) { - var stats = algoliaSettings.labels.hits_stats - .replace(/\$\{hits}/, data.nbHits) - .replace(/\$\{time}/, data.processingTimeMS); - return ( - stats - + '' - + ' Algolia' - + '' - + '
    ' - ); - } - } - }), - - instantsearch.widgets.pagination({ - container : '#algolia-pagination', - scrollTo : false, - showFirstLast: false, - labels : { - first : '', - last : '', - previous: '', - next : '' - }, - cssClasses: { - root : 'pagination', - item : 'pagination-item', - link : 'page-number', - active : 'current', - disabled: 'disabled-item' - } - }) - ].forEach(search.addWidget, search); - - search.start(); - - $('.popup-trigger').on('click', function(e) { - e.stopPropagation(); - $('body') - .append('
    ') - .css('overflow', 'hidden'); - $('.popup').toggle(); - $('#algolia-search-input').find('input').focus(); - }); - - $('.popup-btn-close').click(function() { - $('.popup').hide(); - $('.algolia-pop-overlay').remove(); - $('body').css('overflow', ''); - }); - -}); diff --git a/js/src/bootstrap.js b/js/src/bootstrap.js deleted file mode 100644 index e20bd20c..00000000 --- a/js/src/bootstrap.js +++ /dev/null @@ -1,53 +0,0 @@ -/* global NexT, CONFIG */ - -$(document).ready(function() { - - $(document).trigger('bootstrap:before'); - - /** - * Register JS handlers by condition option. - * Need to add config option in Front-End at 'layout/_partials/head.swig' file. - */ - CONFIG.fastclick && NexT.utils.isMobile() && window.FastClick.attach(document.body); - CONFIG.lazyload && NexT.utils.lazyLoadPostsImages(); - - NexT.utils.registerESCKeyEvent(); - - NexT.utils.registerBackToTop(); - - // Mobile top menu bar. - $('.site-nav-toggle button').on('click', function() { - var $siteNav = $('.site-nav'); - var ON_CLASS_NAME = 'site-nav-on'; - var isSiteNavOn = $siteNav.hasClass(ON_CLASS_NAME); - var animateAction = isSiteNavOn ? 'slideUp' : 'slideDown'; - var animateCallback = isSiteNavOn ? 'removeClass' : 'addClass'; - - $siteNav.stop()[animateAction]('fast', function() { - $siteNav[animateCallback](ON_CLASS_NAME); - }); - }); - - /** - * Register JS handlers by condition option. - * Need to add config option in Front-End at 'layout/_partials/head.swig' file. - */ - CONFIG.fancybox && NexT.utils.wrapImageWithFancyBox(); - CONFIG.tabs && NexT.utils.registerTabsTag(); - - NexT.utils.embeddedVideoTransformer(); - - // Define Motion Sequence. - NexT.motion.integrator - .add(NexT.motion.middleWares.logo) - .add(NexT.motion.middleWares.menu) - .add(NexT.motion.middleWares.postList) - .add(NexT.motion.middleWares.sidebar); - - $(document).trigger('motion:before'); - - // Bootstrap Motion. - CONFIG.motion.enable && NexT.motion.integrator.bootstrap(); - - $(document).trigger('bootstrap:after'); -}); diff --git a/js/src/exturl.js b/js/src/exturl.js deleted file mode 100644 index 005cd766..00000000 --- a/js/src/exturl.js +++ /dev/null @@ -1,14 +0,0 @@ -$(document).ready(function() { - - // Create Base64 Object - /* eslint-disable */ - var Base64={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=Base64._utf8_encode(e);while(f>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9+/=]/g,"");while(f>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=Base64._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/rn/g,"n");var t="";for(var n=0;n127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}}; - - $('.exturl').on('click', function() { - var $exturl = $(this).attr('data-url'); - var $decurl = Base64.decode($exturl); - window.open($decurl, '_blank'); - return false; - }); - -}); diff --git a/js/src/js.cookie.js b/js/src/js.cookie.js deleted file mode 100644 index 60f97721..00000000 --- a/js/src/js.cookie.js +++ /dev/null @@ -1,165 +0,0 @@ -/*! - * JavaScript Cookie v2.1.4 - * https://github.com/js-cookie/js-cookie - * - * Copyright 2006, 2015 Klaus Hartl & Fagner Brack - * Released under the MIT license - */ -;(function (factory) { - var registeredInModuleLoader = false; - if (typeof define === 'function' && define.amd) { - define(factory); - registeredInModuleLoader = true; - } - if (typeof exports === 'object') { - module.exports = factory(); - registeredInModuleLoader = true; - } - if (!registeredInModuleLoader) { - var OldCookies = window.Cookies; - var api = window.Cookies = factory(); - api.noConflict = function () { - window.Cookies = OldCookies; - return api; - }; - } -}(function () { - function extend () { - var i = 0; - var result = {}; - for (; i < arguments.length; i++) { - var attributes = arguments[ i ]; - for (var key in attributes) { - result[key] = attributes[key]; - } - } - return result; - } - - function init (converter) { - function api (key, value, attributes) { - var result; - if (typeof document === 'undefined') { - return; - } - - // Write - - if (arguments.length > 1) { - attributes = extend({ - path: '/' - }, api.defaults, attributes); - - if (typeof attributes.expires === 'number') { - var expires = new Date(); - expires.setMilliseconds(expires.getMilliseconds() + attributes.expires * 864e+5); - attributes.expires = expires; - } - - // We're using "expires" because "max-age" is not supported by IE - attributes.expires = attributes.expires ? attributes.expires.toUTCString() : ''; - - try { - result = JSON.stringify(value); - if (/^[\{\[]/.test(result)) { - value = result; - } - } catch (e) {} - - if (!converter.write) { - value = encodeURIComponent(String(value)) - .replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent); - } else { - value = converter.write(value, key); - } - - key = encodeURIComponent(String(key)); - key = key.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent); - key = key.replace(/[\(\)]/g, escape); - - var stringifiedAttributes = ''; - - for (var attributeName in attributes) { - if (!attributes[attributeName]) { - continue; - } - stringifiedAttributes += '; ' + attributeName; - if (attributes[attributeName] === true) { - continue; - } - stringifiedAttributes += '=' + attributes[attributeName]; - } - return (document.cookie = key + '=' + value + stringifiedAttributes); - } - - // Read - - if (!key) { - result = {}; - } - - // To prevent the for loop in the first place assign an empty array - // in case there are no cookies at all. Also prevents odd result when - // calling "get()" - var cookies = document.cookie ? document.cookie.split('; ') : []; - var rdecode = /(%[0-9A-Z]{2})+/g; - var i = 0; - - for (; i < cookies.length; i++) { - var parts = cookies[i].split('='); - var cookie = parts.slice(1).join('='); - - if (cookie.charAt(0) === '"') { - cookie = cookie.slice(1, -1); - } - - try { - var name = parts[0].replace(rdecode, decodeURIComponent); - cookie = converter.read ? - converter.read(cookie, name) : converter(cookie, name) || - cookie.replace(rdecode, decodeURIComponent); - - if (this.json) { - try { - cookie = JSON.parse(cookie); - } catch (e) {} - } - - if (key === name) { - result = cookie; - break; - } - - if (!key) { - result[name] = cookie; - } - } catch (e) {} - } - - return result; - } - - api.set = api; - api.get = function (key) { - return api.call(api, key); - }; - api.getJSON = function () { - return api.apply({ - json: true - }, [].slice.call(arguments)); - }; - api.defaults = {}; - - api.remove = function (key, attributes) { - api(key, '', extend(attributes, { - expires: -1 - })); - }; - - api.withConverter = init; - - return api; - } - - return init(function () {}); -})); diff --git a/js/src/motion.js b/js/src/motion.js deleted file mode 100644 index 25d2b15e..00000000 --- a/js/src/motion.js +++ /dev/null @@ -1,354 +0,0 @@ -/* global NexT, CONFIG */ - -$(document).ready(function() { - NexT.motion = {}; - - var sidebarToggleLines = { - lines: [], - push : function(line) { - this.lines.push(line); - }, - init: function() { - this.lines.forEach(function(line) { - line.init(); - }); - }, - arrow: function() { - this.lines.forEach(function(line) { - line.arrow(); - }); - }, - close: function() { - this.lines.forEach(function(line) { - line.close(); - }); - } - }; - - function SidebarToggleLine(settings) { - this.el = $(settings.el); - this.status = $.extend({}, { - init: { - width : '100%', - opacity: 1, - left : 0, - rotateZ: 0, - top : 0 - } - }, settings.status); - } - - SidebarToggleLine.prototype.init = function() { - this.transform('init'); - }; - SidebarToggleLine.prototype.arrow = function() { - this.transform('arrow'); - }; - SidebarToggleLine.prototype.close = function() { - this.transform('close'); - }; - SidebarToggleLine.prototype.transform = function(status) { - this.el.velocity('stop').velocity(this.status[status]); - }; - - var sidebarToggleLine1st = new SidebarToggleLine({ - el : '.sidebar-toggle-line-first', - status: { - arrow: {width: '50%', rotateZ: '-45deg', top: '2px'}, - close: {width: '100%', rotateZ: '-45deg', top: '5px'} - } - }); - var sidebarToggleLine2nd = new SidebarToggleLine({ - el : '.sidebar-toggle-line-middle', - status: { - arrow: {width: '90%'}, - close: {opacity: 0} - } - }); - var sidebarToggleLine3rd = new SidebarToggleLine({ - el : '.sidebar-toggle-line-last', - status: { - arrow: {width: '50%', rotateZ: '45deg', top: '-2px'}, - close: {width: '100%', rotateZ: '45deg', top: '-5px'} - } - }); - - sidebarToggleLines.push(sidebarToggleLine1st); - sidebarToggleLines.push(sidebarToggleLine2nd); - sidebarToggleLines.push(sidebarToggleLine3rd); - - var SIDEBAR_WIDTH = CONFIG.sidebar.width ? CONFIG.sidebar.width : '320px'; - var SIDEBAR_DISPLAY_DURATION = 200; - var xPos, yPos; - - var sidebarToggleMotion = { - toggleEl : $('.sidebar-toggle'), - dimmerEl : $('#sidebar-dimmer'), - sidebarEl : $('.sidebar'), - isSidebarVisible: false, - init : function() { - this.toggleEl.on('click', this.clickHandler.bind(this)); - this.dimmerEl.on('click', this.clickHandler.bind(this)); - this.toggleEl.on('mouseenter', this.mouseEnterHandler.bind(this)); - this.toggleEl.on('mouseleave', this.mouseLeaveHandler.bind(this)); - this.sidebarEl.on('touchstart', this.touchstartHandler.bind(this)); - this.sidebarEl.on('touchend', this.touchendHandler.bind(this)); - this.sidebarEl.on('touchmove', function(e) { e.preventDefault(); }); - - $(document) - .on('sidebar.isShowing', function() { - NexT.utils.isDesktop() && $('body').velocity('stop').velocity( - {paddingRight: SIDEBAR_WIDTH}, - SIDEBAR_DISPLAY_DURATION - ); - }) - .on('sidebar.isHiding', function() { - }); - }, - clickHandler: function() { - this.isSidebarVisible ? this.hideSidebar() : this.showSidebar(); - this.isSidebarVisible = !this.isSidebarVisible; - }, - mouseEnterHandler: function() { - if (this.isSidebarVisible) { - return; - } - sidebarToggleLines.arrow(); - }, - mouseLeaveHandler: function() { - if (this.isSidebarVisible) { - return; - } - sidebarToggleLines.init(); - }, - touchstartHandler: function(e) { - xPos = e.originalEvent.touches[0].clientX; - yPos = e.originalEvent.touches[0].clientY; - }, - touchendHandler: function(e) { - var _xPos = e.originalEvent.changedTouches[0].clientX; - var _yPos = e.originalEvent.changedTouches[0].clientY; - if (_xPos - xPos > 30 && Math.abs(_yPos - yPos) < 20) { - this.clickHandler(); - } - }, - showSidebar: function() { - var self = this; - - sidebarToggleLines.close(); - - this.sidebarEl.velocity('stop').velocity({ - width: SIDEBAR_WIDTH - }, { - display : 'block', - duration: SIDEBAR_DISPLAY_DURATION, - begin : function() { - $('.sidebar .motion-element').velocity( - 'transition.slideRightIn', - { - stagger : 50, - drag : true, - complete: function() { - self.sidebarEl.trigger('sidebar.motion.complete'); - } - } - ); - }, - complete: function() { - self.sidebarEl.addClass('sidebar-active'); - self.sidebarEl.trigger('sidebar.didShow'); - } - } - ); - - this.sidebarEl.trigger('sidebar.isShowing'); - }, - hideSidebar: function() { - NexT.utils.isDesktop() && $('body').velocity('stop').velocity({paddingRight: 0}); - this.sidebarEl.find('.motion-element').velocity('stop').css('display', 'none'); - this.sidebarEl.velocity('stop').velocity({width: 0}, {display: 'none'}); - - sidebarToggleLines.init(); - - this.sidebarEl.removeClass('sidebar-active'); - this.sidebarEl.trigger('sidebar.isHiding'); - - // Prevent adding TOC to Overview if Overview was selected when close & open sidebar. - if (!$('.post-toc-wrap')) { - if ($('.site-overview-wrap').css('display') === 'block') { - $('.post-toc-wrap').removeClass('motion-element'); - } else { - $('.post-toc-wrap').addClass('motion-element'); - } - } - } - }; - sidebarToggleMotion.init(); - - NexT.motion.integrator = { - queue : [], - cursor: -1, - add : function(fn) { - this.queue.push(fn); - return this; - }, - next: function() { - this.cursor++; - var fn = this.queue[this.cursor]; - $.isFunction(fn) && fn(NexT.motion.integrator); - }, - bootstrap: function() { - this.next(); - } - }; - - NexT.motion.middleWares = { - logo: function(integrator) { - var sequence = []; - var $brand = $('.brand'); - var $title = $('.site-title'); - var $subtitle = $('.site-subtitle'); - var $logoLineTop = $('.logo-line-before i'); - var $logoLineBottom = $('.logo-line-after i'); - - $brand.length > 0 && sequence.push({ - e: $brand, - p: {opacity: 1}, - o: {duration: 200} - }); - - /** - * Check if $elements exist. - * @param {jQuery|Array} $elements - * @returns {boolean} - */ - function hasElement($elements) { - $elements = Array.isArray($elements) ? $elements : [$elements]; - return $elements.every(function($element) { - return $element.length > 0; - }); - } - - function getMistLineSettings(element, translateX) { - return { - e: $(element), - p: {translateX: translateX}, - o: { - duration : 500, - sequenceQueue: false - } - }; - } - - NexT.utils.isMist() && hasElement([$logoLineTop, $logoLineBottom]) - && sequence.push( - getMistLineSettings($logoLineTop, '100%'), - getMistLineSettings($logoLineBottom, '-100%') - ); - - hasElement($title) && sequence.push({ - e: $title, - p: {opacity: 1, top: 0}, - o: { duration: 200 } - }); - - hasElement($subtitle) && sequence.push({ - e: $subtitle, - p: {opacity: 1, top: 0}, - o: {duration: 200} - }); - - if (CONFIG.motion.async) { - integrator.next(); - } - - if (sequence.length > 0) { - sequence[sequence.length - 1].o.complete = function() { - integrator.next(); - }; - /* eslint-disable */ - $.Velocity.RunSequence(sequence); - /* eslint-enable */ - } else { - integrator.next(); - } - }, - - menu: function(integrator) { - - if (CONFIG.motion.async) { - integrator.next(); - } - - $('.menu-item').velocity('transition.slideDownIn', { - display : null, - duration: 200, - complete: function() { - integrator.next(); - } - }); - }, - - postList: function(integrator) { - - //var $post = $('.post'); - var $postBlock = $('.post-block, .pagination, .comments'); - var $postBlockTransition = CONFIG.motion.transition.post_block; - var $postHeader = $('.post-header'); - var $postHeaderTransition = CONFIG.motion.transition.post_header; - var $postBody = $('.post-body'); - var $postBodyTransition = CONFIG.motion.transition.post_body; - var $collHeader = $('.collection-title, .archive-year'); - var $collHeaderTransition = CONFIG.motion.transition.coll_header; - var $sidebarAffix = $('.sidebar-inner'); - var $sidebarAffixTransition = CONFIG.motion.transition.sidebar; - var hasPost = $postBlock.length > 0; - - function postMotion() { - var postMotionOptions = window.postMotionOptions || { - stagger: 100, - drag : true - }; - postMotionOptions.complete = function() { - // After motion complete need to remove transform from sidebar to let affix work on Pisces | Gemini. - if (CONFIG.motion.transition.sidebar && (NexT.utils.isPisces() || NexT.utils.isGemini())) { - $sidebarAffix.css({ 'transform': 'initial' }); - } - integrator.next(); - }; - - //$post.velocity('transition.slideDownIn', postMotionOptions); - if (CONFIG.motion.transition.post_block) { - $postBlock.velocity('transition.' + $postBlockTransition, postMotionOptions); - } - if (CONFIG.motion.transition.post_header) { - $postHeader.velocity('transition.' + $postHeaderTransition, postMotionOptions); - } - if (CONFIG.motion.transition.post_body) { - $postBody.velocity('transition.' + $postBodyTransition, postMotionOptions); - } - if (CONFIG.motion.transition.coll_header) { - $collHeader.velocity('transition.' + $collHeaderTransition, postMotionOptions); - } - // Only for Pisces | Gemini. - if (CONFIG.motion.transition.sidebar && (NexT.utils.isPisces() || NexT.utils.isGemini())) { - $sidebarAffix.velocity('transition.' + $sidebarAffixTransition, postMotionOptions); - } - } - - hasPost ? postMotion() : integrator.next(); - - if (CONFIG.motion.async) { - integrator.next(); - } - }, - - sidebar: function(integrator) { - if (CONFIG.sidebar.display === 'always') { - NexT.utils.displaySidebar(); - } - integrator.next(); - } - }; - -}); diff --git a/js/src/post-details.js b/js/src/post-details.js deleted file mode 100644 index ef024b96..00000000 --- a/js/src/post-details.js +++ /dev/null @@ -1,104 +0,0 @@ -/* global NexT, CONFIG */ - -$(document).ready(function() { - - function initScrollSpy() { - var tocSelector = '.post-toc'; - var $tocElement = $(tocSelector); - var activeCurrentSelector = '.active-current'; - - function removeCurrentActiveClass() { - $(tocSelector + ' ' + activeCurrentSelector) - .removeClass(activeCurrentSelector.substring(1)); - } - - $tocElement - .on('activate.bs.scrollspy', function() { - var $currentActiveElement = $(tocSelector + ' .active').last(); - - removeCurrentActiveClass(); - $currentActiveElement.addClass('active-current'); - - // Scrolling to center active TOC element if TOC content is taller then viewport. - $tocElement.scrollTop($currentActiveElement.offset().top - $tocElement.offset().top + $tocElement.scrollTop() - ($tocElement.height() / 2)); - }) - .on('clear.bs.scrollspy', removeCurrentActiveClass); - - $('body').scrollspy({ target: tocSelector }); - } - - initScrollSpy(); -}); - -$(document).ready(function() { - var html = $('html'); - var TAB_ANIMATE_DURATION = 200; - var hasVelocity = $.isFunction(html.velocity); - - $('.sidebar-nav li').on('click', function() { - var item = $(this); - var activeTabClassName = 'sidebar-nav-active'; - var activePanelClassName = 'sidebar-panel-active'; - if (item.hasClass(activeTabClassName)) { - return; - } - - var currentTarget = $('.' + activePanelClassName); - var target = $('.' + item.data('target')); - - hasVelocity - ? currentTarget.velocity('transition.slideUpOut', TAB_ANIMATE_DURATION, function() { - target - .velocity('stop') - .velocity('transition.slideDownIn', TAB_ANIMATE_DURATION) - .addClass(activePanelClassName); - }) - : currentTarget.animate({ opacity: 0 }, TAB_ANIMATE_DURATION, function() { - currentTarget.hide(); - target - .stop() - .css({'opacity': 0, 'display': 'block'}) - .animate({ opacity: 1 }, TAB_ANIMATE_DURATION, function() { - currentTarget.removeClass(activePanelClassName); - target.addClass(activePanelClassName); - }); - }); - - item.siblings().removeClass(activeTabClassName); - item.addClass(activeTabClassName); - }); - - // TOC item animation navigate & prevent #item selector in adress bar. - $('.post-toc a').on('click', function(e) { - e.preventDefault(); - var targetSelector = NexT.utils.escapeSelector(this.getAttribute('href')); - var offset = $(targetSelector).offset().top; - - hasVelocity - ? html.velocity('stop').velocity('scroll', { - offset : offset + 'px', - mobileHA: false - }) - : $('html, body').stop().animate({ - scrollTop: offset - }, 500); - }); - - // Expand sidebar on post detail page by default, when post has a toc. - var $tocContent = $('.post-toc-content'); - var display = CONFIG.page.sidebar; - if (typeof display !== 'boolean') { - // There's no definition sidebar in the page front-matter - var isSidebarCouldDisplay = CONFIG.sidebar.display === 'post' - || CONFIG.sidebar.display === 'always'; - var hasTOC = $tocContent.length > 0 && $tocContent.html().trim().length > 0; - display = isSidebarCouldDisplay && hasTOC; - } - if (display) { - CONFIG.motion.enable - ? NexT.motion.middleWares.sidebar = function() { - NexT.utils.displaySidebar(); - } - : NexT.utils.displaySidebar(); - } -}); diff --git a/js/src/schemes/pisces.js b/js/src/schemes/pisces.js deleted file mode 100644 index f1c98c63..00000000 --- a/js/src/schemes/pisces.js +++ /dev/null @@ -1,59 +0,0 @@ -/* global NexT, CONFIG */ - -$(document).ready(function() { - - var sidebarInner = $('.sidebar-inner'); - - function getHeaderOffset() { - return $('.header-inner').height() + CONFIG.sidebar.offset; - } - - function getFooterOffset() { - var footerInner = $('.footer-inner'); - var footerMargin = footerInner.outerHeight(true) - footerInner.outerHeight(); - var footerOffset = footerInner.outerHeight(true) + footerMargin; - return footerOffset; - } - - function setSidebarMarginTop(headerOffset) { - return $('#sidebar').css({ 'margin-top': headerOffset }); - } - - function initAffix() { - var headerOffset = getHeaderOffset(); - var footerOffset = getFooterOffset(); - var sidebarHeight = $('#sidebar').height() + NexT.utils.getSidebarb2tHeight(); - var contentHeight = $('#content').height(); - - // Not affix if sidebar taller then content (to prevent bottom jumping). - if (headerOffset + sidebarHeight < contentHeight) { - sidebarInner.affix({ - offset: { - top : headerOffset - CONFIG.sidebar.offset, - bottom: footerOffset - } - }); - } - - setSidebarMarginTop(headerOffset).css({ 'margin-left': 'initial' }); - } - - function recalculateAffixPosition() { - $(window).off('.affix'); - sidebarInner.removeData('bs.affix').removeClass('affix affix-top affix-bottom'); - initAffix(); - } - - function resizeListener() { - var mql = window.matchMedia('(min-width: 991px)'); - mql.addListener(function(e) { - if (e.matches) { - recalculateAffixPosition(); - } - }); - } - - initAffix(); - resizeListener(); - -}); diff --git a/js/src/scroll-cookie.js b/js/src/scroll-cookie.js deleted file mode 100644 index f529c6f7..00000000 --- a/js/src/scroll-cookie.js +++ /dev/null @@ -1,25 +0,0 @@ -$(document).ready(function() { - - /* global Cookies */ - - // Set relative link path (without domain) - var rpath = window.location.href.replace(window.location.origin, ''); - - // Write position in cookie - var timeout; - $(window).on('scroll', function() { - clearTimeout(timeout); - timeout = setTimeout(function() { - Cookies.set('scroll-cookie', $(window).scrollTop() + '|' + rpath, { expires: 365, path: '' }); - }, 250); - }); - - // Read position from cookie - if (Cookies.get('scroll-cookie') !== undefined) { - var cvalues = Cookies.get('scroll-cookie').split('|'); - if (cvalues[1] === rpath) { - $(window).scrollTop(cvalues[0]); - } - } - -}); diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js deleted file mode 100644 index b8c168b1..00000000 --- a/js/src/scrollspy.js +++ /dev/null @@ -1,179 +0,0 @@ -/* ======================================================================== -* Bootstrap: scrollspy.js v3.3.2 -* http://getbootstrap.com/javascript/#scrollspy -* ======================================================================== -* Copyright 2011-2015 Twitter, Inc. -* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) -* ======================================================================== */ - -/** - * Customized by iissnan & Ivan.Nginx - * - * - Add a `clear.bs.scrollspy` event. - * - Esacpe targets selector. - * - Refactored with eslint-config-theme-next style. - */ - -/* global NexT */ - -(function($) { - 'use strict'; - - // SCROLLSPY CLASS DEFINITION - // ========================== - function ScrollSpy(element, options) { - this.$body = $(document.body); - this.$scrollElement = $(element).is(document.body) ? $(window) : $(element); - this.options = $.extend({}, ScrollSpy.DEFAULTS, options); - this.selector = (this.options.target || '') + ' .nav li > a'; - this.offsets = []; - this.targets = []; - this.activeTarget = null; - this.scrollHeight = 0; - - this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this)); - this.refresh(); - this.process(); - } - - ScrollSpy.VERSION = '3.3.2'; - - ScrollSpy.DEFAULTS = { - offset: 10 - }; - - ScrollSpy.prototype.getScrollHeight = function() { - return this.$scrollElement[0].scrollHeight || Math.max(this.$body[0].scrollHeight, document.documentElement.scrollHeight); - }; - - ScrollSpy.prototype.refresh = function() { - var that = this; - var offsetMethod = 'offset'; - var offsetBase = 0; - - this.offsets = []; - this.targets = []; - this.scrollHeight = this.getScrollHeight(); - - if (!$.isWindow(this.$scrollElement[0])) { - offsetMethod = 'position'; - offsetBase = this.$scrollElement.scrollTop(); - } - - this.$body - .find(this.selector) - .map(function() { - var $el = $(this); - var href = $el.data('target') || $el.attr('href'); - var $href = /^#./.test(href) && $(NexT.utils.escapeSelector(href)); // Need to escape selector. - - return ($href - && $href.length - && $href.is(':visible') - && [[$href[offsetMethod]().top + offsetBase, href]]) || null; - }) - .sort(function(a, b) { - return a[0] - b[0]; - }) - .each(function() { - that.offsets.push(this[0]); - that.targets.push(this[1]); - }); - - - }; - - ScrollSpy.prototype.process = function() { - var scrollTop = this.$scrollElement.scrollTop() + this.options.offset; - var scrollHeight = this.getScrollHeight(); - var maxScroll = this.options.offset + scrollHeight - this.$scrollElement.height(); - var offsets = this.offsets; - var targets = this.targets; - var activeTarget = this.activeTarget; - var i; - - if (this.scrollHeight !== scrollHeight) { - this.refresh(); - } - - if (scrollTop >= maxScroll) { - return activeTarget !== (i = targets[targets.length - 1]) && this.activate(i); - } - - if (activeTarget && scrollTop < offsets[0]) { - $(this.selector).trigger('clear.bs.scrollspy'); // Add a custom event. - this.activeTarget = null; - return this.clear(); - } - - for (i = offsets.length; i--;) { - activeTarget !== targets[i] - && scrollTop >= offsets[i] - && (!offsets[i + 1] || scrollTop <= offsets[i + 1]) - && this.activate(targets[i]); - } - }; - - ScrollSpy.prototype.activate = function(target) { - this.activeTarget = target; - - this.clear(); - - var selector = this.selector - + '[data-target="' + target + '"],' - + this.selector + '[href="' + target + '"]'; - - var active = $(selector) - .parents('li') - .addClass('active'); - - if (active.parent('.dropdown-menu').length) { - active = active - .closest('li.dropdown') - .addClass('active'); - } - - active.trigger('activate.bs.scrollspy'); - }; - - ScrollSpy.prototype.clear = function() { - $(this.selector) - .parentsUntil(this.options.target, '.active') - .removeClass('active'); - }; - - // SCROLLSPY PLUGIN DEFINITION - // =========================== - function Plugin(option) { - return this.each(function() { - var $this = $(this); - var data = $this.data('bs.scrollspy'); - var options = typeof option === 'object' && option; - - if (!data) $this.data('bs.scrollspy', data = new ScrollSpy(this, options)); - if (typeof option === 'string') data[option](); - }); - } - - var old = $.fn.scrollspy; - - $.fn.scrollspy = Plugin; - $.fn.scrollspy.Constructor = ScrollSpy; - - // SCROLLSPY NO CONFLICT - // ===================== - $.fn.scrollspy.noConflict = function() { - $.fn.scrollspy = old; - return this; - }; - - // SCROLLSPY DATA-API - // ================== - $(window).on('load.bs.scrollspy.data-api', function() { - $('[data-spy="scroll"]').each(function() { - var $spy = $(this); - Plugin.call($spy, $spy.data()); - }); - }); - -}(jQuery)); diff --git a/js/src/utils.js b/js/src/utils.js deleted file mode 100644 index 7928ee62..00000000 --- a/js/src/utils.js +++ /dev/null @@ -1,322 +0,0 @@ -/* global NexT, CONFIG */ - -NexT.utils = NexT.$u = { - - /** - * Wrap images with fancybox support. - */ - wrapImageWithFancyBox: function() { - $('.content img') - .not('[hidden]') - .not('.group-picture img, .post-gallery img') - .each(function() { - var $image = $(this); - var imageTitle = $image.attr('title'); - var $imageWrapLink = $image.parent('a'); - - if ($imageWrapLink.length < 1) { - var imageLink = $image.attr('data-original') ? this.getAttribute('data-original') : this.getAttribute('src'); - $imageWrapLink = $image.wrap('').parent('a'); - } - - $imageWrapLink.addClass('fancybox fancybox.image'); - $imageWrapLink.attr('rel', 'group'); - - if (imageTitle) { - $imageWrapLink.append('

    ' + imageTitle + '

    '); - - //make sure img title tag will show correctly in fancybox - $imageWrapLink.attr('title', imageTitle); - } - }); - - $('.fancybox').fancybox({ - helpers: { - overlay: { - locked: false - } - } - }); - }, - - lazyLoadPostsImages: function() { - $('#posts').find('img').lazyload({ - //placeholder: '/images/loading.gif', - effect : 'fadeIn', - threshold: 0 - }); - }, - - /** - * Tabs tag listener (without twitter bootstrap). - */ - registerTabsTag: function() { - var tNav = '.tabs ul.nav-tabs '; - - // Binding `nav-tabs` & `tab-content` by real time permalink changing. - $(function() { - $(window).bind('hashchange', function() { - var tHash = location.hash; - if (tHash !== '') { - $(tNav + 'li:has(a[href="' + tHash + '"])').addClass('active').siblings().removeClass('active'); - $(tHash).addClass('active').siblings().removeClass('active'); - } - }).trigger('hashchange'); - }); - - $(tNav + '.tab').on('click', function(href) { - href.preventDefault(); - // Prevent selected tab to select again. - if (!$(this).hasClass('active')) { - - // Add & Remove active class on `nav-tabs` & `tab-content`. - $(this).addClass('active').siblings().removeClass('active'); - var tActive = $(this).find('a').attr('href'); - $(tActive).addClass('active').siblings().removeClass('active'); - - // Clear location hash in browser if #permalink exists. - if (location.hash !== '') { - history.pushState('', document.title, window.location.pathname + window.location.search); - } - } - }); - - }, - - registerESCKeyEvent: function() { - $(document).on('keyup', function(event) { - var shouldDismissSearchPopup = event.which === 27 - && $('.search-popup').is(':visible'); - if (shouldDismissSearchPopup) { - $('.search-popup').hide(); - $('.search-popup-overlay').remove(); - $('body').css('overflow', ''); - } - }); - }, - - registerBackToTop: function() { - var THRESHOLD = 50; - var $top = $('.back-to-top'); - - $(window).on('scroll', function() { - $top.toggleClass('back-to-top-on', window.pageYOffset > THRESHOLD); - - var scrollTop = $(window).scrollTop(); - var contentVisibilityHeight = NexT.utils.getContentVisibilityHeight(); - var scrollPercent = scrollTop / contentVisibilityHeight; - var scrollPercentRounded = Math.round(scrollPercent * 100); - var scrollPercentMaxed = scrollPercentRounded > 100 ? 100 : scrollPercentRounded; - $('#scrollpercent>span').html(scrollPercentMaxed); - }); - - $top.on('click', function() { - $('body').velocity('scroll'); - }); - }, - - /** - * Transform embedded video to support responsive layout. - * @see http://toddmotto.com/fluid-and-responsive-youtube-and-vimeo-videos-with-fluidvids-js/ - */ - embeddedVideoTransformer: function() { - var $iframes = $('iframe'); - - // Supported Players. Extend this if you need more players. - var SUPPORTED_PLAYERS = [ - 'www.youtube.com', - 'player.vimeo.com', - 'player.youku.com', - 'music.163.com', - 'www.tudou.com' - ]; - var pattern = new RegExp(SUPPORTED_PLAYERS.join('|')); - - function getDimension($element) { - return { - width : $element.width(), - height: $element.height() - }; - } - - function getAspectRadio(width, height) { - return height / width * 100; - } - - $iframes.each(function() { - var iframe = this; - var $iframe = $(this); - var oldDimension = getDimension($iframe); - var newDimension; - - if (this.src.search(pattern) > 0) { - - // Calculate the video ratio based on the iframe's w/h dimensions - var videoRatio = getAspectRadio(oldDimension.width, oldDimension.height); - - // Replace the iframe's dimensions and position the iframe absolute - // This is the trick to emulate the video ratio - $iframe.width('100%').height('100%') - .css({ - position: 'absolute', - top : '0', - left : '0' - }); - - // Wrap the iframe in a new
    which uses a dynamically fetched padding-top property - // based on the video's w/h dimensions - var wrap = document.createElement('div'); - wrap.className = 'fluid-vids'; - wrap.style.position = 'relative'; - wrap.style.marginBottom = '20px'; - wrap.style.width = '100%'; - wrap.style.paddingTop = videoRatio + '%'; - // Fix for appear inside tabs tag. - (wrap.style.paddingTop === '') && (wrap.style.paddingTop = '50%'); - - // Add the iframe inside our newly created
    - var iframeParent = iframe.parentNode; - iframeParent.insertBefore(wrap, iframe); - wrap.appendChild(iframe); - - // Additional adjustments for 163 Music - if (this.src.search('music.163.com') > 0) { - newDimension = getDimension($iframe); - var shouldRecalculateAspect = newDimension.width > oldDimension.width - || newDimension.height < oldDimension.height; - - // 163 Music Player has a fixed height, so we need to reset the aspect radio - if (shouldRecalculateAspect) { - wrap.style.paddingTop = getAspectRadio(newDimension.width, oldDimension.height) + '%'; - } - } - } - }); - - }, - - hasMobileUA: function() { - var nav = window.navigator; - var ua = nav.userAgent; - var pa = /iPad|iPhone|Android|Opera Mini|BlackBerry|webOS|UCWEB|Blazer|PSP|IEMobile|Symbian/g; - - return pa.test(ua); - }, - - isTablet: function() { - return window.screen.width < 992 && window.screen.width > 767 && this.hasMobileUA(); - }, - - isMobile: function() { - return window.screen.width < 767 && this.hasMobileUA(); - }, - - isDesktop: function() { - return !this.isTablet() && !this.isMobile(); - }, - - /** - * Escape meta symbols in jQuery selectors. - * - * @param selector - * @returns {string|void|XML|*} - */ - escapeSelector: function(selector) { - return selector.replace(/[!"$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, '\\$&'); - }, - - displaySidebar: function() { - if (!this.isDesktop() || this.isPisces() || this.isGemini()) { - return; - } - $('.sidebar-toggle').trigger('click'); - }, - - isMist: function() { - return CONFIG.scheme === 'Mist'; - }, - - isPisces: function() { - return CONFIG.scheme === 'Pisces'; - }, - - isGemini: function() { - return CONFIG.scheme === 'Gemini'; - }, - - getScrollbarWidth: function() { - var $div = $('
    ').addClass('scrollbar-measure').prependTo('body'); - var div = $div[0]; - var scrollbarWidth = div.offsetWidth - div.clientWidth; - - $div.remove(); - - return scrollbarWidth; - }, - - getContentVisibilityHeight: function() { - var docHeight = $('#content').height(); - var winHeight = $(window).height(); - var contentVisibilityHeight = docHeight > winHeight ? docHeight - winHeight : $(document).height() - winHeight; - return contentVisibilityHeight; - }, - - getSidebarb2tHeight: function() { - //var sidebarb2tHeight = (CONFIG.sidebar.b2t) ? document.getElementsByClassName('back-to-top')[0].clientHeight : 0; - var sidebarb2tHeight = CONFIG.sidebar.b2t ? $('.back-to-top').height() : 0; - return sidebarb2tHeight; - }, - - getSidebarSchemePadding: function() { - var sidebarNavHeight = $('.sidebar-nav').css('display') === 'block' ? $('.sidebar-nav').outerHeight(true) : 0; - var sidebarInner = $('.sidebar-inner'); - var sidebarPadding = sidebarInner.innerWidth() - sidebarInner.width(); - var sidebarSchemePadding = this.isPisces() || this.isGemini() - ? (sidebarPadding * 2) + sidebarNavHeight + (CONFIG.sidebar.offset * 2) + this.getSidebarb2tHeight() - : (sidebarPadding * 2) + (sidebarNavHeight / 2); - return sidebarSchemePadding; - } - -}; - -$(document).ready(function() { - - /** - * Init Sidebar & TOC inner dimensions on all pages and for all schemes. - * Need for Sidebar/TOC inner scrolling if content taller then viewport. - */ - - function updateSidebarHeight(height) { - height = height || 'auto'; - $('.site-overview, .post-toc').css('max-height', height); - } - - function initSidebarDimension() { - var updateSidebarHeightTimer; - - $(window).on('resize', function() { - updateSidebarHeightTimer && clearTimeout(updateSidebarHeightTimer); - - updateSidebarHeightTimer = setTimeout(function() { - var sidebarWrapperHeight = document.body.clientHeight - NexT.utils.getSidebarSchemePadding(); - - updateSidebarHeight(sidebarWrapperHeight); - }, 0); - }); - - // Initialize Sidebar & TOC Width. - var scrollbarWidth = NexT.utils.getScrollbarWidth(); - if ($('.site-overview-wrap').height() > (document.body.clientHeight - NexT.utils.getSidebarSchemePadding())) { - $('.site-overview').css('width', 'calc(100% + ' + scrollbarWidth + 'px)'); - } - if ($('.post-toc-wrap').height() > (document.body.clientHeight - NexT.utils.getSidebarSchemePadding())) { - $('.post-toc').css('width', 'calc(100% + ' + scrollbarWidth + 'px)'); - } - - // Initialize Sidebar & TOC Height. - updateSidebarHeight(document.body.clientHeight - NexT.utils.getSidebarSchemePadding()); - } - - initSidebarDimension(); - -}); diff --git a/js/utils.js b/js/utils.js new file mode 100644 index 00000000..4be726fa --- /dev/null +++ b/js/utils.js @@ -0,0 +1,415 @@ +/* global NexT, CONFIG */ + +HTMLElement.prototype.outerHeight = function(flag) { + var height = this.offsetHeight; + if (!flag) return height; + var style = window.getComputedStyle(this); + height += parseInt(style.marginTop, 10) + parseInt(style.marginBottom, 10); + return height; +}; + +HTMLElement.prototype.wrap = function(wrapper) { + this.parentNode.insertBefore(wrapper, this); + this.parentNode.removeChild(this); + wrapper.appendChild(this); +}; + +NexT.utils = { + + /** + * Wrap images with fancybox. + */ + wrapImageWithFancyBox: function() { + document.querySelectorAll('.post-body :not(a) > img').forEach(element => { + var $image = $(element); + var imageLink = $image.attr('data-src') || $image.attr('src'); + var $imageWrapLink = $image.wrap(``).parent('a'); + if ($image.is('.post-gallery img')) { + $imageWrapLink.addClass('post-gallery-img'); + $imageWrapLink.attr('data-fancybox', 'gallery').attr('rel', 'gallery'); + } else if ($image.is('.group-picture img')) { + $imageWrapLink.attr('data-fancybox', 'group').attr('rel', 'group'); + } else { + $imageWrapLink.attr('data-fancybox', 'default').attr('rel', 'default'); + } + + var imageTitle = $image.attr('title') || $image.attr('alt'); + if (imageTitle) { + $imageWrapLink.append(`

    ${imageTitle}

    `); + // Make sure img title tag will show correctly in fancybox + $imageWrapLink.attr('title', imageTitle).attr('data-caption', imageTitle); + } + }); + + $.fancybox.defaults.hash = false; + $('.fancybox').fancybox({ + loop : true, + helpers: { + overlay: { + locked: false + } + } + }); + }, + + registerExtURL: function() { + document.querySelectorAll('.exturl').forEach(element => { + element.addEventListener('click', event => { + var exturl = event.currentTarget.getAttribute('data-url'); + var decurl = decodeURIComponent(escape(window.atob(exturl))); + window.open(decurl, '_blank', 'noopener'); + return false; + }); + }); + }, + + /** + * One-click copy code support. + */ + registerCopyCode: function() { + document.querySelectorAll('figure.highlight').forEach(e => { + const initButton = button => { + if (CONFIG.copycode.style === 'mac') { + button.innerHTML = ''; + } else { + button.innerText = CONFIG.translation.copy_button; + } + }; + const box = document.createElement('div'); + box.classList.add('highlight-wrap'); + e.wrap(box); + e.parentNode.insertAdjacentHTML('beforeend', '
    '); + var button = e.parentNode.querySelector('.copy-btn'); + button.addEventListener('click', event => { + var target = event.currentTarget; + var code = [...target.parentNode.querySelectorAll('.code .line')].map(element => { + return element.innerText; + }).join('\n'); + var ta = document.createElement('textarea'); + var yPosition = window.scrollY; + ta.style.top = yPosition + 'px'; // Prevent page scrolling + ta.style.position = 'absolute'; + ta.style.opacity = '0'; + ta.readOnly = true; + ta.value = code; + document.body.append(ta); + const selection = document.getSelection(); + const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false; + ta.select(); + ta.setSelectionRange(0, code.length); + ta.readOnly = false; + var result = document.execCommand('copy'); + if (CONFIG.copycode.show_result) { + target.innerText = result ? CONFIG.translation.copy_success : CONFIG.translation.copy_failure; + } + ta.blur(); // For iOS + target.blur(); + if (selected) { + selection.removeAllRanges(); + selection.addRange(selected); + } + document.body.removeChild(ta); + }); + button.addEventListener('mouseleave', event => { + setTimeout(() => { + initButton(event.target); + }, 300); + }); + initButton(button); + }); + }, + + wrapTableWithBox: function() { + document.querySelectorAll('table').forEach(table => { + const box = document.createElement('div'); + box.className = 'table-container'; + table.wrap(box); + }); + }, + + registerVideoIframe: function() { + document.querySelectorAll('iframe').forEach(element => { + const SUPPORTED_PLAYERS = [ + 'www.youtube.com', + 'player.vimeo.com', + 'player.youku.com', + 'player.bilibili.com', + 'www.tudou.com' + ]; + const pattern = new RegExp(SUPPORTED_PLAYERS.join('|')); + if (!element.parentNode.matches('.video-container') && element.src.search(pattern) > 0) { + const box = document.createElement('div'); + box.className = 'video-container'; + element.wrap(box); + let width = Number(element.width); let height = Number(element.height); + if (width && height) { + element.parentNode.style.paddingTop = (height / width * 100) + '%'; + } + } + }); + }, + + registerScrollPercent: function() { + var THRESHOLD = 50; + var backToTop = document.querySelector('.back-to-top'); + var readingProgressBar = document.querySelector('.reading-progress-bar'); + // For init back to top in sidebar if page was scrolled after page refresh. + window.addEventListener('scroll', () => { + var scrollPercent; + if (backToTop || readingProgressBar) { + var docHeight = document.querySelector('.container').offsetHeight; + var winHeight = window.innerHeight; + var contentVisibilityHeight = docHeight > winHeight ? docHeight - winHeight : document.body.scrollHeight - winHeight; + var scrollPercentRounded = Math.round(100 * window.scrollY / contentVisibilityHeight); + scrollPercent = Math.min(scrollPercentRounded, 100) + '%'; + } + if (backToTop) { + window.scrollY > THRESHOLD ? backToTop.classList.add('back-to-top-on') : backToTop.classList.remove('back-to-top-on'); + backToTop.querySelector('span').innerText = scrollPercent; + } + if (readingProgressBar) { + readingProgressBar.style.width = scrollPercent; + } + }); + + backToTop && backToTop.addEventListener('click', () => { + window.anime({ + targets : [document.documentElement, document.body], + duration : 500, + easing : 'linear', + scrollTop: 0 + }); + }); + }, + + /** + * Tabs tag listener (without twitter bootstrap). + */ + registerTabsTag: function() { + // Binding `nav-tabs` & `tab-content` by real time permalink changing. + document.querySelectorAll('.tabs ul.nav-tabs .tab').forEach(tab => { + tab.addEventListener('click', event => { + event.preventDefault(); + var target = event.currentTarget; + // Prevent selected tab to select again. + if (!target.classList.contains('active')) { + // Add & Remove active class on `nav-tabs` & `tab-content`. + [...target.parentNode.children].forEach(item => { + item.classList.remove('active'); + }); + target.classList.add('active'); + var tActive = document.getElementById(target.querySelector('a').getAttribute('href').replace('#', '')); + [...tActive.parentNode.children].forEach(item => { + item.classList.remove('active'); + }); + tActive.classList.add('active'); + // Trigger event + tActive.dispatchEvent(new Event('tabs:click', { + bubbles: true + })); + } + }); + }); + + window.dispatchEvent(new Event('tabs:register')); + }, + + registerCanIUseTag: function() { + // Get responsive height passed from iframe. + window.addEventListener('message', e => { + var data = e.data; + if ((typeof data === 'string') && (data.indexOf('ciu_embed') > -1)) { + var featureID = data.split(':')[1]; + var height = data.split(':')[2]; + document.querySelector(`iframe[data-feature=${featureID}]`).style.height = parseInt(height, 10) + 'px'; + } + }, false); + }, + + registerActiveMenuItem: function() { + document.querySelectorAll('.menu-item').forEach(element => { + var target = element.querySelector('a[href]'); + if (!target) return; + var isSamePath = target.pathname === location.pathname || target.pathname === location.pathname.replace('index.html', ''); + var isSubPath = target.pathname !== CONFIG.root && location.pathname.indexOf(target.pathname) === 0; + if (target.hostname === location.hostname && (isSamePath || isSubPath)) { + element.classList.add('menu-item-active'); + } else { + element.classList.remove('menu-item-active'); + } + }); + }, + + registerSidebarTOC: function() { + const navItems = document.querySelectorAll('.post-toc li'); + const sections = [...navItems].map(element => { + var link = element.querySelector('a.nav-link'); + // TOC item animation navigate. + link.addEventListener('click', event => { + event.preventDefault(); + var target = document.getElementById(event.currentTarget.getAttribute('href').replace('#', '')); + var offset = target.getBoundingClientRect().top + window.scrollY; + window.anime({ + targets : [document.documentElement, document.body], + duration : 500, + easing : 'linear', + scrollTop: offset + 10 + }); + }); + return document.getElementById(link.getAttribute('href').replace('#', '')); + }); + + var tocElement = document.querySelector('.post-toc-wrap'); + function activateNavByIndex(target) { + if (target.classList.contains('active-current')) return; + + document.querySelectorAll('.post-toc .active').forEach(element => { + element.classList.remove('active', 'active-current'); + }); + target.classList.add('active', 'active-current'); + var parent = target.parentNode; + while (!parent.matches('.post-toc')) { + if (parent.matches('li')) parent.classList.add('active'); + parent = parent.parentNode; + } + // Scrolling to center active TOC element if TOC content is taller then viewport. + window.anime({ + targets : tocElement, + duration : 200, + easing : 'linear', + scrollTop: tocElement.scrollTop - (tocElement.offsetHeight / 2) + target.getBoundingClientRect().top - tocElement.getBoundingClientRect().top + }); + } + + function findIndex(entries) { + let index = 0; + let entry = entries[index]; + if (entry.boundingClientRect.top > 0) { + index = sections.indexOf(entry.target); + return index === 0 ? 0 : index - 1; + } + for (;index < entries.length; index++) { + if (entries[index].boundingClientRect.top <= 0) { + entry = entries[index]; + } else { + return sections.indexOf(entry.target); + } + } + return sections.indexOf(entry.target); + } + + function createIntersectionObserver(marginTop) { + marginTop = Math.floor(marginTop + 10000); + let intersectionObserver = new IntersectionObserver((entries, observe) => { + let scrollHeight = document.documentElement.scrollHeight + 100; + if (scrollHeight > marginTop) { + observe.disconnect(); + createIntersectionObserver(scrollHeight); + return; + } + let index = findIndex(entries); + activateNavByIndex(navItems[index]); + }, { + rootMargin: marginTop + 'px 0px -100% 0px', + threshold : 0 + }); + sections.forEach(item => intersectionObserver.observe(item)); + } + createIntersectionObserver(document.documentElement.scrollHeight); + }, + + hasMobileUA: function() { + var ua = navigator.userAgent; + var pa = /iPad|iPhone|Android|Opera Mini|BlackBerry|webOS|UCWEB|Blazer|PSP|IEMobile|Symbian/g; + + return pa.test(ua); + }, + + isTablet: function() { + return window.screen.width < 992 && window.screen.width > 767 && this.hasMobileUA(); + }, + + isMobile: function() { + return window.screen.width < 767 && this.hasMobileUA(); + }, + + isDesktop: function() { + return !this.isTablet() && !this.isMobile(); + }, + + isMuse: function() { + return CONFIG.scheme === 'Muse'; + }, + + isMist: function() { + return CONFIG.scheme === 'Mist'; + }, + + isPisces: function() { + return CONFIG.scheme === 'Pisces'; + }, + + isGemini: function() { + return CONFIG.scheme === 'Gemini'; + }, + + /** + * Init Sidebar & TOC inner dimensions on all pages and for all schemes. + * Need for Sidebar/TOC inner scrolling if content taller then viewport. + */ + initSidebarDimension: function() { + var sidebarNav = document.querySelector('.sidebar-nav'); + var sidebarNavHeight = sidebarNav.style.display !== 'none' ? sidebarNav.outerHeight(true) : 0; + var sidebarOffset = CONFIG.sidebar.offset || 12; + var sidebarb2tHeight = CONFIG.back2top.enable && CONFIG.back2top.sidebar ? document.querySelector('.back-to-top').offsetHeight : 0; + var sidebarSchemePadding = CONFIG.sidebarPadding + sidebarNavHeight + sidebarb2tHeight; + // Margin of sidebar b2t: 8px -10px -20px, brings a different of 12px. + if (NexT.utils.isPisces() || NexT.utils.isGemini()) sidebarSchemePadding += (sidebarOffset * 2) - 12; + // Initialize Sidebar & TOC Height. + var sidebarWrapperHeight = document.body.offsetHeight - sidebarSchemePadding + 'px'; + document.querySelector('.site-overview-wrap').style.maxHeight = sidebarWrapperHeight; + document.querySelector('.post-toc-wrap').style.maxHeight = sidebarWrapperHeight; + }, + + updateSidebarPosition: function() { + var sidebarNav = document.querySelector('.sidebar-nav'); + var hasTOC = document.querySelector('.post-toc'); + if (hasTOC) { + sidebarNav.style.display = ''; + sidebarNav.classList.add('motion-element'); + document.querySelector('.sidebar-nav-toc').click(); + } else { + sidebarNav.style.display = 'none'; + sidebarNav.classList.remove('motion-element'); + document.querySelector('.sidebar-nav-overview').click(); + } + NexT.utils.initSidebarDimension(); + if (!this.isDesktop() || this.isPisces() || this.isGemini()) return; + // Expand sidebar on post detail page by default, when post has a toc. + var display = CONFIG.page.sidebar; + if (typeof display !== 'boolean') { + // There's no definition sidebar in the page front-matter. + display = CONFIG.sidebar.display === 'always' || (CONFIG.sidebar.display === 'post' && hasTOC); + } + if (display) { + window.dispatchEvent(new Event('sidebar:show')); + } + }, + + getScript: function(url, callback, condition) { + if (condition) { + callback(); + } else { + var script = document.createElement('script'); + script.onload = script.onreadystatechange = function(_, isAbort) { + if (isAbort || !script.readyState || /loaded|complete/.test(script.readyState)) { + script.onload = script.onreadystatechange = null; + script = undefined; + if (!isAbort && callback) setTimeout(callback, 0); + } + }; + script.src = url; + document.head.appendChild(script); + } + } +}; diff --git a/lib/anime.min.js b/lib/anime.min.js new file mode 100644 index 00000000..99b263aa --- /dev/null +++ b/lib/anime.min.js @@ -0,0 +1,8 @@ +/* + * anime.js v3.1.0 + * (c) 2019 Julian Garnier + * Released under the MIT license + * animejs.com + */ + +!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):n.anime=e()}(this,function(){"use strict";var n={update:null,begin:null,loopBegin:null,changeBegin:null,change:null,changeComplete:null,loopComplete:null,complete:null,loop:1,direction:"normal",autoplay:!0,timelineOffset:0},e={duration:1e3,delay:0,endDelay:0,easing:"easeOutElastic(1, .5)",round:0},r=["translateX","translateY","translateZ","rotate","rotateX","rotateY","rotateZ","scale","scaleX","scaleY","scaleZ","skew","skewX","skewY","perspective"],t={CSS:{},springs:{}};function a(n,e,r){return Math.min(Math.max(n,e),r)}function o(n,e){return n.indexOf(e)>-1}function u(n,e){return n.apply(null,e)}var i={arr:function(n){return Array.isArray(n)},obj:function(n){return o(Object.prototype.toString.call(n),"Object")},pth:function(n){return i.obj(n)&&n.hasOwnProperty("totalLength")},svg:function(n){return n instanceof SVGElement},inp:function(n){return n instanceof HTMLInputElement},dom:function(n){return n.nodeType||i.svg(n)},str:function(n){return"string"==typeof n},fnc:function(n){return"function"==typeof n},und:function(n){return void 0===n},hex:function(n){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(n)},rgb:function(n){return/^rgb/.test(n)},hsl:function(n){return/^hsl/.test(n)},col:function(n){return i.hex(n)||i.rgb(n)||i.hsl(n)},key:function(r){return!n.hasOwnProperty(r)&&!e.hasOwnProperty(r)&&"targets"!==r&&"keyframes"!==r}};function c(n){var e=/\(([^)]+)\)/.exec(n);return e?e[1].split(",").map(function(n){return parseFloat(n)}):[]}function s(n,e){var r=c(n),o=a(i.und(r[0])?1:r[0],.1,100),u=a(i.und(r[1])?100:r[1],.1,100),s=a(i.und(r[2])?10:r[2],.1,100),f=a(i.und(r[3])?0:r[3],.1,100),l=Math.sqrt(u/o),d=s/(2*Math.sqrt(u*o)),p=d<1?l*Math.sqrt(1-d*d):0,h=1,v=d<1?(d*l-f)/p:-f+l;function g(n){var r=e?e*n/1e3:n;return r=d<1?Math.exp(-r*d*l)*(h*Math.cos(p*r)+v*Math.sin(p*r)):(h+v*r)*Math.exp(-r*l),0===n||1===n?n:1-r}return e?g:function(){var e=t.springs[n];if(e)return e;for(var r=0,a=0;;)if(1===g(r+=1/6)){if(++a>=16)break}else a=0;var o=r*(1/6)*1e3;return t.springs[n]=o,o}}function f(n){return void 0===n&&(n=10),function(e){return Math.round(e*n)*(1/n)}}var l,d,p=function(){var n=11,e=1/(n-1);function r(n,e){return 1-3*e+3*n}function t(n,e){return 3*e-6*n}function a(n){return 3*n}function o(n,e,o){return((r(e,o)*n+t(e,o))*n+a(e))*n}function u(n,e,o){return 3*r(e,o)*n*n+2*t(e,o)*n+a(e)}return function(r,t,a,i){if(0<=r&&r<=1&&0<=a&&a<=1){var c=new Float32Array(n);if(r!==t||a!==i)for(var s=0;s=.001?function(n,e,r,t){for(var a=0;a<4;++a){var i=u(e,r,t);if(0===i)return e;e-=(o(e,r,t)-n)/i}return e}(t,l,r,a):0===d?l:function(n,e,r,t,a){for(var u,i,c=0;(u=o(i=e+(r-e)/2,t,a)-n)>0?r=i:e=i,Math.abs(u)>1e-7&&++c<10;);return i}(t,i,i+e,r,a)}}}(),h=(l={linear:function(){return function(n){return n}}},d={Sine:function(){return function(n){return 1-Math.cos(n*Math.PI/2)}},Circ:function(){return function(n){return 1-Math.sqrt(1-n*n)}},Back:function(){return function(n){return n*n*(3*n-2)}},Bounce:function(){return function(n){for(var e,r=4;n<((e=Math.pow(2,--r))-1)/11;);return 1/Math.pow(4,3-r)-7.5625*Math.pow((3*e-2)/22-n,2)}},Elastic:function(n,e){void 0===n&&(n=1),void 0===e&&(e=.5);var r=a(n,1,10),t=a(e,.1,2);return function(n){return 0===n||1===n?n:-r*Math.pow(2,10*(n-1))*Math.sin((n-1-t/(2*Math.PI)*Math.asin(1/r))*(2*Math.PI)/t)}}},["Quad","Cubic","Quart","Quint","Expo"].forEach(function(n,e){d[n]=function(){return function(n){return Math.pow(n,e+2)}}}),Object.keys(d).forEach(function(n){var e=d[n];l["easeIn"+n]=e,l["easeOut"+n]=function(n,r){return function(t){return 1-e(n,r)(1-t)}},l["easeInOut"+n]=function(n,r){return function(t){return t<.5?e(n,r)(2*t)/2:1-e(n,r)(-2*t+2)/2}}}),l);function v(n,e){if(i.fnc(n))return n;var r=n.split("(")[0],t=h[r],a=c(n);switch(r){case"spring":return s(n,e);case"cubicBezier":return u(p,a);case"steps":return u(f,a);default:return u(t,a)}}function g(n){try{return document.querySelectorAll(n)}catch(n){return}}function m(n,e){for(var r=n.length,t=arguments.length>=2?arguments[1]:void 0,a=[],o=0;o1&&(r-=1),r<1/6?n+6*(e-n)*r:r<.5?e:r<2/3?n+(e-n)*(2/3-r)*6:n}if(0==u)e=r=t=i;else{var f=i<.5?i*(1+u):i+u-i*u,l=2*i-f;e=s(l,f,o+1/3),r=s(l,f,o),t=s(l,f,o-1/3)}return"rgba("+255*e+","+255*r+","+255*t+","+c+")"}(n):void 0;var e,r,t,a}function C(n){var e=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(n);if(e)return e[1]}function B(n,e){return i.fnc(n)?n(e.target,e.id,e.total):n}function P(n,e){return n.getAttribute(e)}function I(n,e,r){if(M([r,"deg","rad","turn"],C(e)))return e;var a=t.CSS[e+r];if(!i.und(a))return a;var o=document.createElement(n.tagName),u=n.parentNode&&n.parentNode!==document?n.parentNode:document.body;u.appendChild(o),o.style.position="absolute",o.style.width=100+r;var c=100/o.offsetWidth;u.removeChild(o);var s=c*parseFloat(e);return t.CSS[e+r]=s,s}function T(n,e,r){if(e in n.style){var t=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),a=n.style[e]||getComputedStyle(n).getPropertyValue(t)||"0";return r?I(n,a,r):a}}function D(n,e){return i.dom(n)&&!i.inp(n)&&(P(n,e)||i.svg(n)&&n[e])?"attribute":i.dom(n)&&M(r,e)?"transform":i.dom(n)&&"transform"!==e&&T(n,e)?"css":null!=n[e]?"object":void 0}function E(n){if(i.dom(n)){for(var e,r=n.style.transform||"",t=/(\w+)\(([^)]*)\)/g,a=new Map;e=t.exec(r);)a.set(e[1],e[2]);return a}}function F(n,e,r,t){var a,u=o(e,"scale")?1:0+(o(a=e,"translate")||"perspective"===a?"px":o(a,"rotate")||o(a,"skew")?"deg":void 0),i=E(n).get(e)||u;return r&&(r.transforms.list.set(e,i),r.transforms.last=e),t?I(n,i,t):i}function N(n,e,r,t){switch(D(n,e)){case"transform":return F(n,e,t,r);case"css":return T(n,e,r);case"attribute":return P(n,e);default:return n[e]||0}}function A(n,e){var r=/^(\*=|\+=|-=)/.exec(n);if(!r)return n;var t=C(n)||0,a=parseFloat(e),o=parseFloat(n.replace(r[0],""));switch(r[0][0]){case"+":return a+o+t;case"-":return a-o+t;case"*":return a*o+t}}function L(n,e){if(i.col(n))return O(n);if(/\s/g.test(n))return n;var r=C(n),t=r?n.substr(0,n.length-r.length):n;return e?t+e:t}function j(n,e){return Math.sqrt(Math.pow(e.x-n.x,2)+Math.pow(e.y-n.y,2))}function S(n){for(var e,r=n.points,t=0,a=0;a0&&(t+=j(e,o)),e=o}return t}function q(n){if(n.getTotalLength)return n.getTotalLength();switch(n.tagName.toLowerCase()){case"circle":return o=n,2*Math.PI*P(o,"r");case"rect":return 2*P(a=n,"width")+2*P(a,"height");case"line":return j({x:P(t=n,"x1"),y:P(t,"y1")},{x:P(t,"x2"),y:P(t,"y2")});case"polyline":return S(n);case"polygon":return r=(e=n).points,S(e)+j(r.getItem(r.numberOfItems-1),r.getItem(0))}var e,r,t,a,o}function $(n,e){var r=e||{},t=r.el||function(n){for(var e=n.parentNode;i.svg(e)&&i.svg(e.parentNode);)e=e.parentNode;return e}(n),a=t.getBoundingClientRect(),o=P(t,"viewBox"),u=a.width,c=a.height,s=r.viewBox||(o?o.split(" "):[0,0,u,c]);return{el:t,viewBox:s,x:s[0]/1,y:s[1]/1,w:u/s[2],h:c/s[3]}}function X(n,e){function r(r){void 0===r&&(r=0);var t=e+r>=1?e+r:0;return n.el.getPointAtLength(t)}var t=$(n.el,n.svg),a=r(),o=r(-1),u=r(1);switch(n.property){case"x":return(a.x-t.x)*t.w;case"y":return(a.y-t.y)*t.h;case"angle":return 180*Math.atan2(u.y-o.y,u.x-o.x)/Math.PI}}function Y(n,e){var r=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g,t=L(i.pth(n)?n.totalLength:n,e)+"";return{original:t,numbers:t.match(r)?t.match(r).map(Number):[0],strings:i.str(n)||e?t.split(r):[]}}function Z(n){return m(n?y(i.arr(n)?n.map(b):b(n)):[],function(n,e,r){return r.indexOf(n)===e})}function Q(n){var e=Z(n);return e.map(function(n,r){return{target:n,id:r,total:e.length,transforms:{list:E(n)}}})}function V(n,e){var r=x(e);if(/^spring/.test(r.easing)&&(r.duration=s(r.easing)),i.arr(n)){var t=n.length;2===t&&!i.obj(n[0])?n={value:n}:i.fnc(e.duration)||(r.duration=e.duration/t)}var a=i.arr(n)?n:[n];return a.map(function(n,r){var t=i.obj(n)&&!i.pth(n)?n:{value:n};return i.und(t.delay)&&(t.delay=r?0:e.delay),i.und(t.endDelay)&&(t.endDelay=r===a.length-1?e.endDelay:0),t}).map(function(n){return k(n,r)})}function z(n,e){var r=[],t=e.keyframes;for(var a in t&&(e=k(function(n){for(var e=m(y(n.map(function(n){return Object.keys(n)})),function(n){return i.key(n)}).reduce(function(n,e){return n.indexOf(e)<0&&n.push(e),n},[]),r={},t=function(t){var a=e[t];r[a]=n.map(function(n){var e={};for(var r in n)i.key(r)?r==a&&(e.value=n[r]):e[r]=n[r];return e})},a=0;a-1&&(_.splice(o,1),r=_.length)}else a.tick(e);t++}n()}else U=cancelAnimationFrame(U)}return n}();function rn(r){void 0===r&&(r={});var t,o=0,u=0,i=0,c=0,s=null;function f(n){var e=window.Promise&&new Promise(function(n){return s=n});return n.finished=e,e}var l,d,p,h,v,g,y,b,M=(d=w(n,l=r),p=w(e,l),h=z(p,l),v=Q(l.targets),g=W(v,h),y=J(g,p),b=K,K++,k(d,{id:b,children:[],animatables:v,animations:g,duration:y.duration,delay:y.delay,endDelay:y.endDelay}));f(M);function x(){var n=M.direction;"alternate"!==n&&(M.direction="normal"!==n?"normal":"reverse"),M.reversed=!M.reversed,t.forEach(function(n){return n.reversed=M.reversed})}function O(n){return M.reversed?M.duration-n:n}function C(){o=0,u=O(M.currentTime)*(1/rn.speed)}function B(n,e){e&&e.seek(n-e.timelineOffset)}function P(n){for(var e=0,r=M.animations,t=r.length;e2||(b=Math.round(b*p)/p)),h.push(b)}var k=d.length;if(k){g=d[0];for(var O=0;O0&&(M.began=!0,I("begin")),!M.loopBegan&&M.currentTime>0&&(M.loopBegan=!0,I("loopBegin")),d<=r&&0!==M.currentTime&&P(0),(d>=l&&M.currentTime!==e||!e)&&P(e),d>r&&d=e&&(u=0,M.remaining&&!0!==M.remaining&&M.remaining--,M.remaining?(o=i,I("loopComplete"),M.loopBegan=!1,"alternate"===M.direction&&x()):(M.paused=!0,M.completed||(M.completed=!0,I("loopComplete"),I("complete"),!M.passThrough&&"Promise"in window&&(s(),f(M)))))}return M.reset=function(){var n=M.direction;M.passThrough=!1,M.currentTime=0,M.progress=0,M.paused=!0,M.began=!1,M.loopBegan=!1,M.changeBegan=!1,M.completed=!1,M.changeCompleted=!1,M.reversePlayback=!1,M.reversed="reverse"===n,M.remaining=M.loop,t=M.children;for(var e=c=t.length;e--;)M.children[e].reset();(M.reversed&&!0!==M.loop||"alternate"===n&&1===M.loop)&&M.remaining++,P(M.reversed?M.duration:0)},M.set=function(n,e){return R(n,e),M},M.tick=function(n){i=n,o||(o=i),T((i+(u-o))*rn.speed)},M.seek=function(n){T(O(n))},M.pause=function(){M.paused=!0,C()},M.play=function(){M.paused&&(M.completed&&M.reset(),M.paused=!1,_.push(M),C(),U||en())},M.reverse=function(){x(),C()},M.restart=function(){M.reset(),M.play()},M.reset(),M.autoplay&&M.play(),M}function tn(n,e){for(var r=e.length;r--;)M(n,e[r].animatable.target)&&e.splice(r,1)}return"undefined"!=typeof document&&document.addEventListener("visibilitychange",function(){document.hidden?(_.forEach(function(n){return n.pause()}),nn=_.slice(0),rn.running=_=[]):nn.forEach(function(n){return n.play()})}),rn.version="3.1.0",rn.speed=1,rn.running=_,rn.remove=function(n){for(var e=Z(n),r=_.length;r--;){var t=_[r],a=t.animations,o=t.children;tn(e,a);for(var u=o.length;u--;){var i=o[u],c=i.animations;tn(e,c),c.length||i.children.length||o.splice(u,1)}a.length||o.length||t.pause()}},rn.get=N,rn.set=R,rn.convertPx=I,rn.path=function(n,e){var r=i.str(n)?g(n)[0]:n,t=e||100;return function(n){return{property:n,el:r,svg:$(r),totalLength:q(r)*(t/100)}}},rn.setDashoffset=function(n){var e=q(n);return n.setAttribute("stroke-dasharray",e),e},rn.stagger=function(n,e){void 0===e&&(e={});var r=e.direction||"normal",t=e.easing?v(e.easing):null,a=e.grid,o=e.axis,u=e.from||0,c="first"===u,s="center"===u,f="last"===u,l=i.arr(n),d=l?parseFloat(n[0]):parseFloat(n),p=l?parseFloat(n[1]):0,h=C(l?n[1]:n)||0,g=e.start||0+(l?d:0),m=[],y=0;return function(n,e,i){if(c&&(u=0),s&&(u=(i-1)/2),f&&(u=i-1),!m.length){for(var v=0;v-1&&_.splice(o,1);for(var s=0;s li { - position: relative; -} -.fa-li { - position: absolute; - left: -2.14285714em; - width: 2.14285714em; - top: 0.14285714em; - text-align: center; -} -.fa-li.fa-lg { - left: -1.85714286em; -} -.fa-border { - padding: .2em .25em .15em; - border: solid 0.08em #eeeeee; - border-radius: .1em; -} -.fa-pull-left { - float: left; -} -.fa-pull-right { - float: right; -} -.fa.fa-pull-left { - margin-right: .3em; -} -.fa.fa-pull-right { - margin-left: .3em; -} -/* Deprecated as of 4.4.0 */ -.pull-right { - float: right; -} -.pull-left { - float: left; -} -.fa.pull-left { - margin-right: .3em; -} -.fa.pull-right { - margin-left: .3em; -} -.fa-spin { - -webkit-animation: fa-spin 2s infinite linear; - animation: fa-spin 2s infinite linear; -} -.fa-pulse { - -webkit-animation: fa-spin 1s infinite steps(8); - animation: fa-spin 1s infinite steps(8); -} -@-webkit-keyframes fa-spin { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } -} -@keyframes fa-spin { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } -} -.fa-rotate-90 { - -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); -} -.fa-rotate-180 { - -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); -} -.fa-rotate-270 { - -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; - -webkit-transform: rotate(270deg); - -ms-transform: rotate(270deg); - transform: rotate(270deg); -} -.fa-flip-horizontal { - -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)"; - -webkit-transform: scale(-1, 1); - -ms-transform: scale(-1, 1); - transform: scale(-1, 1); -} -.fa-flip-vertical { - -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"; - -webkit-transform: scale(1, -1); - -ms-transform: scale(1, -1); - transform: scale(1, -1); -} -:root .fa-rotate-90, -:root .fa-rotate-180, -:root .fa-rotate-270, -:root .fa-flip-horizontal, -:root .fa-flip-vertical { - filter: none; -} -.fa-stack { - position: relative; - display: inline-block; - width: 2em; - height: 2em; - line-height: 2em; - vertical-align: middle; -} -.fa-stack-1x, -.fa-stack-2x { - position: absolute; - left: 0; - width: 100%; - text-align: center; -} -.fa-stack-1x { - line-height: inherit; -} -.fa-stack-2x { - font-size: 2em; -} -.fa-inverse { - color: #ffffff; -} -/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen - readers do not read off random characters that represent icons */ -.fa-glass:before { - content: "\f000"; -} -.fa-music:before { - content: "\f001"; -} -.fa-search:before { - content: "\f002"; -} -.fa-envelope-o:before { - content: "\f003"; -} -.fa-heart:before { - content: "\f004"; -} -.fa-star:before { - content: "\f005"; -} -.fa-star-o:before { - content: "\f006"; -} -.fa-user:before { - content: "\f007"; -} -.fa-film:before { - content: "\f008"; -} -.fa-th-large:before { - content: "\f009"; -} -.fa-th:before { - content: "\f00a"; -} -.fa-th-list:before { - content: "\f00b"; -} -.fa-check:before { - content: "\f00c"; -} -.fa-remove:before, -.fa-close:before, -.fa-times:before { - content: "\f00d"; -} -.fa-search-plus:before { - content: "\f00e"; -} -.fa-search-minus:before { - content: "\f010"; -} -.fa-power-off:before { - content: "\f011"; -} -.fa-signal:before { - content: "\f012"; -} -.fa-gear:before, -.fa-cog:before { - content: "\f013"; -} -.fa-trash-o:before { - content: "\f014"; -} -.fa-home:before { - content: "\f015"; -} -.fa-file-o:before { - content: "\f016"; -} -.fa-clock-o:before { - content: "\f017"; -} -.fa-road:before { - content: "\f018"; -} -.fa-download:before { - content: "\f019"; -} -.fa-arrow-circle-o-down:before { - content: "\f01a"; -} -.fa-arrow-circle-o-up:before { - content: "\f01b"; -} -.fa-inbox:before { - content: "\f01c"; -} -.fa-play-circle-o:before { - content: "\f01d"; -} -.fa-rotate-right:before, -.fa-repeat:before { - content: "\f01e"; -} -.fa-refresh:before { - content: "\f021"; -} -.fa-list-alt:before { - content: "\f022"; -} -.fa-lock:before { - content: "\f023"; -} -.fa-flag:before { - content: "\f024"; -} -.fa-headphones:before { - content: "\f025"; -} -.fa-volume-off:before { - content: "\f026"; -} -.fa-volume-down:before { - content: "\f027"; -} -.fa-volume-up:before { - content: "\f028"; -} -.fa-qrcode:before { - content: "\f029"; -} -.fa-barcode:before { - content: "\f02a"; -} -.fa-tag:before { - content: "\f02b"; -} -.fa-tags:before { - content: "\f02c"; -} -.fa-book:before { - content: "\f02d"; -} -.fa-bookmark:before { - content: "\f02e"; -} -.fa-print:before { - content: "\f02f"; -} -.fa-camera:before { - content: "\f030"; -} -.fa-font:before { - content: "\f031"; -} -.fa-bold:before { - content: "\f032"; -} -.fa-italic:before { - content: "\f033"; -} -.fa-text-height:before { - content: "\f034"; -} -.fa-text-width:before { - content: "\f035"; -} -.fa-align-left:before { - content: "\f036"; -} -.fa-align-center:before { - content: "\f037"; -} -.fa-align-right:before { - content: "\f038"; -} -.fa-align-justify:before { - content: "\f039"; -} -.fa-list:before { - content: "\f03a"; -} -.fa-dedent:before, -.fa-outdent:before { - content: "\f03b"; -} -.fa-indent:before { - content: "\f03c"; -} -.fa-video-camera:before { - content: "\f03d"; -} -.fa-photo:before, -.fa-image:before, -.fa-picture-o:before { - content: "\f03e"; -} -.fa-pencil:before { - content: "\f040"; -} -.fa-map-marker:before { - content: "\f041"; -} -.fa-adjust:before { - content: "\f042"; -} -.fa-tint:before { - content: "\f043"; -} -.fa-edit:before, -.fa-pencil-square-o:before { - content: "\f044"; -} -.fa-share-square-o:before { - content: "\f045"; -} -.fa-check-square-o:before { - content: "\f046"; -} -.fa-arrows:before { - content: "\f047"; -} -.fa-step-backward:before { - content: "\f048"; -} -.fa-fast-backward:before { - content: "\f049"; -} -.fa-backward:before { - content: "\f04a"; -} -.fa-play:before { - content: "\f04b"; -} -.fa-pause:before { - content: "\f04c"; -} -.fa-stop:before { - content: "\f04d"; -} -.fa-forward:before { - content: "\f04e"; -} -.fa-fast-forward:before { - content: "\f050"; -} -.fa-step-forward:before { - content: "\f051"; -} -.fa-eject:before { - content: "\f052"; -} -.fa-chevron-left:before { - content: "\f053"; -} -.fa-chevron-right:before { - content: "\f054"; -} -.fa-plus-circle:before { - content: "\f055"; -} -.fa-minus-circle:before { - content: "\f056"; -} -.fa-times-circle:before { - content: "\f057"; -} -.fa-check-circle:before { - content: "\f058"; -} -.fa-question-circle:before { - content: "\f059"; -} -.fa-info-circle:before { - content: "\f05a"; -} -.fa-crosshairs:before { - content: "\f05b"; -} -.fa-times-circle-o:before { - content: "\f05c"; -} -.fa-check-circle-o:before { - content: "\f05d"; -} -.fa-ban:before { - content: "\f05e"; -} -.fa-arrow-left:before { - content: "\f060"; -} -.fa-arrow-right:before { - content: "\f061"; -} -.fa-arrow-up:before { - content: "\f062"; -} -.fa-arrow-down:before { - content: "\f063"; -} -.fa-mail-forward:before, -.fa-share:before { - content: "\f064"; -} -.fa-expand:before { - content: "\f065"; -} -.fa-compress:before { - content: "\f066"; -} -.fa-plus:before { - content: "\f067"; -} -.fa-minus:before { - content: "\f068"; -} -.fa-asterisk:before { - content: "\f069"; -} -.fa-exclamation-circle:before { - content: "\f06a"; -} -.fa-gift:before { - content: "\f06b"; -} -.fa-leaf:before { - content: "\f06c"; -} -.fa-fire:before { - content: "\f06d"; -} -.fa-eye:before { - content: "\f06e"; -} -.fa-eye-slash:before { - content: "\f070"; -} -.fa-warning:before, -.fa-exclamation-triangle:before { - content: "\f071"; -} -.fa-plane:before { - content: "\f072"; -} -.fa-calendar:before { - content: "\f073"; -} -.fa-random:before { - content: "\f074"; -} -.fa-comment:before { - content: "\f075"; -} -.fa-magnet:before { - content: "\f076"; -} -.fa-chevron-up:before { - content: "\f077"; -} -.fa-chevron-down:before { - content: "\f078"; -} -.fa-retweet:before { - content: "\f079"; -} -.fa-shopping-cart:before { - content: "\f07a"; -} -.fa-folder:before { - content: "\f07b"; -} -.fa-folder-open:before { - content: "\f07c"; -} -.fa-arrows-v:before { - content: "\f07d"; -} -.fa-arrows-h:before { - content: "\f07e"; -} -.fa-bar-chart-o:before, -.fa-bar-chart:before { - content: "\f080"; -} -.fa-twitter-square:before { - content: "\f081"; -} -.fa-facebook-square:before { - content: "\f082"; -} -.fa-camera-retro:before { - content: "\f083"; -} -.fa-key:before { - content: "\f084"; -} -.fa-gears:before, -.fa-cogs:before { - content: "\f085"; -} -.fa-comments:before { - content: "\f086"; -} -.fa-thumbs-o-up:before { - content: "\f087"; -} -.fa-thumbs-o-down:before { - content: "\f088"; -} -.fa-star-half:before { - content: "\f089"; -} -.fa-heart-o:before { - content: "\f08a"; -} -.fa-sign-out:before { - content: "\f08b"; -} -.fa-linkedin-square:before { - content: "\f08c"; -} -.fa-thumb-tack:before { - content: "\f08d"; -} -.fa-external-link:before { - content: "\f08e"; -} -.fa-sign-in:before { - content: "\f090"; -} -.fa-trophy:before { - content: "\f091"; -} -.fa-github-square:before { - content: "\f092"; -} -.fa-upload:before { - content: "\f093"; -} -.fa-lemon-o:before { - content: "\f094"; -} -.fa-phone:before { - content: "\f095"; -} -.fa-square-o:before { - content: "\f096"; -} -.fa-bookmark-o:before { - content: "\f097"; -} -.fa-phone-square:before { - content: "\f098"; -} -.fa-twitter:before { - content: "\f099"; -} -.fa-facebook-f:before, -.fa-facebook:before { - content: "\f09a"; -} -.fa-github:before { - content: "\f09b"; -} -.fa-unlock:before { - content: "\f09c"; -} -.fa-credit-card:before { - content: "\f09d"; -} -.fa-feed:before, -.fa-rss:before { - content: "\f09e"; -} -.fa-hdd-o:before { - content: "\f0a0"; -} -.fa-bullhorn:before { - content: "\f0a1"; -} -.fa-bell:before { - content: "\f0f3"; -} -.fa-certificate:before { - content: "\f0a3"; -} -.fa-hand-o-right:before { - content: "\f0a4"; -} -.fa-hand-o-left:before { - content: "\f0a5"; -} -.fa-hand-o-up:before { - content: "\f0a6"; -} -.fa-hand-o-down:before { - content: "\f0a7"; -} -.fa-arrow-circle-left:before { - content: "\f0a8"; -} -.fa-arrow-circle-right:before { - content: "\f0a9"; -} -.fa-arrow-circle-up:before { - content: "\f0aa"; -} -.fa-arrow-circle-down:before { - content: "\f0ab"; -} -.fa-globe:before { - content: "\f0ac"; -} -.fa-wrench:before { - content: "\f0ad"; -} -.fa-tasks:before { - content: "\f0ae"; -} -.fa-filter:before { - content: "\f0b0"; -} -.fa-briefcase:before { - content: "\f0b1"; -} -.fa-arrows-alt:before { - content: "\f0b2"; -} -.fa-group:before, -.fa-users:before { - content: "\f0c0"; -} -.fa-chain:before, -.fa-link:before { - content: "\f0c1"; -} -.fa-cloud:before { - content: "\f0c2"; -} -.fa-flask:before { - content: "\f0c3"; -} -.fa-cut:before, -.fa-scissors:before { - content: "\f0c4"; -} -.fa-copy:before, -.fa-files-o:before { - content: "\f0c5"; -} -.fa-paperclip:before { - content: "\f0c6"; -} -.fa-save:before, -.fa-floppy-o:before { - content: "\f0c7"; -} -.fa-square:before { - content: "\f0c8"; -} -.fa-navicon:before, -.fa-reorder:before, -.fa-bars:before { - content: "\f0c9"; -} -.fa-list-ul:before { - content: "\f0ca"; -} -.fa-list-ol:before { - content: "\f0cb"; -} -.fa-strikethrough:before { - content: "\f0cc"; -} -.fa-underline:before { - content: "\f0cd"; -} -.fa-table:before { - content: "\f0ce"; -} -.fa-magic:before { - content: "\f0d0"; -} -.fa-truck:before { - content: "\f0d1"; -} -.fa-pinterest:before { - content: "\f0d2"; -} -.fa-pinterest-square:before { - content: "\f0d3"; -} -.fa-google-plus-square:before { - content: "\f0d4"; -} -.fa-google-plus:before { - content: "\f0d5"; -} -.fa-money:before { - content: "\f0d6"; -} -.fa-caret-down:before { - content: "\f0d7"; -} -.fa-caret-up:before { - content: "\f0d8"; -} -.fa-caret-left:before { - content: "\f0d9"; -} -.fa-caret-right:before { - content: "\f0da"; -} -.fa-columns:before { - content: "\f0db"; -} -.fa-unsorted:before, -.fa-sort:before { - content: "\f0dc"; -} -.fa-sort-down:before, -.fa-sort-desc:before { - content: "\f0dd"; -} -.fa-sort-up:before, -.fa-sort-asc:before { - content: "\f0de"; -} -.fa-envelope:before { - content: "\f0e0"; -} -.fa-linkedin:before { - content: "\f0e1"; -} -.fa-rotate-left:before, -.fa-undo:before { - content: "\f0e2"; -} -.fa-legal:before, -.fa-gavel:before { - content: "\f0e3"; -} -.fa-dashboard:before, -.fa-tachometer:before { - content: "\f0e4"; -} -.fa-comment-o:before { - content: "\f0e5"; -} -.fa-comments-o:before { - content: "\f0e6"; -} -.fa-flash:before, -.fa-bolt:before { - content: "\f0e7"; -} -.fa-sitemap:before { - content: "\f0e8"; -} -.fa-umbrella:before { - content: "\f0e9"; -} -.fa-paste:before, -.fa-clipboard:before { - content: "\f0ea"; -} -.fa-lightbulb-o:before { - content: "\f0eb"; -} -.fa-exchange:before { - content: "\f0ec"; -} -.fa-cloud-download:before { - content: "\f0ed"; -} -.fa-cloud-upload:before { - content: "\f0ee"; -} -.fa-user-md:before { - content: "\f0f0"; -} -.fa-stethoscope:before { - content: "\f0f1"; -} -.fa-suitcase:before { - content: "\f0f2"; -} -.fa-bell-o:before { - content: "\f0a2"; -} -.fa-coffee:before { - content: "\f0f4"; -} -.fa-cutlery:before { - content: "\f0f5"; -} -.fa-file-text-o:before { - content: "\f0f6"; -} -.fa-building-o:before { - content: "\f0f7"; -} -.fa-hospital-o:before { - content: "\f0f8"; -} -.fa-ambulance:before { - content: "\f0f9"; -} -.fa-medkit:before { - content: "\f0fa"; -} -.fa-fighter-jet:before { - content: "\f0fb"; -} -.fa-beer:before { - content: "\f0fc"; -} -.fa-h-square:before { - content: "\f0fd"; -} -.fa-plus-square:before { - content: "\f0fe"; -} -.fa-angle-double-left:before { - content: "\f100"; -} -.fa-angle-double-right:before { - content: "\f101"; -} -.fa-angle-double-up:before { - content: "\f102"; -} -.fa-angle-double-down:before { - content: "\f103"; -} -.fa-angle-left:before { - content: "\f104"; -} -.fa-angle-right:before { - content: "\f105"; -} -.fa-angle-up:before { - content: "\f106"; -} -.fa-angle-down:before { - content: "\f107"; -} -.fa-desktop:before { - content: "\f108"; -} -.fa-laptop:before { - content: "\f109"; -} -.fa-tablet:before { - content: "\f10a"; -} -.fa-mobile-phone:before, -.fa-mobile:before { - content: "\f10b"; -} -.fa-circle-o:before { - content: "\f10c"; -} -.fa-quote-left:before { - content: "\f10d"; -} -.fa-quote-right:before { - content: "\f10e"; -} -.fa-spinner:before { - content: "\f110"; -} -.fa-circle:before { - content: "\f111"; -} -.fa-mail-reply:before, -.fa-reply:before { - content: "\f112"; -} -.fa-github-alt:before { - content: "\f113"; -} -.fa-folder-o:before { - content: "\f114"; -} -.fa-folder-open-o:before { - content: "\f115"; -} -.fa-smile-o:before { - content: "\f118"; -} -.fa-frown-o:before { - content: "\f119"; -} -.fa-meh-o:before { - content: "\f11a"; -} -.fa-gamepad:before { - content: "\f11b"; -} -.fa-keyboard-o:before { - content: "\f11c"; -} -.fa-flag-o:before { - content: "\f11d"; -} -.fa-flag-checkered:before { - content: "\f11e"; -} -.fa-terminal:before { - content: "\f120"; -} -.fa-code:before { - content: "\f121"; -} -.fa-mail-reply-all:before, -.fa-reply-all:before { - content: "\f122"; -} -.fa-star-half-empty:before, -.fa-star-half-full:before, -.fa-star-half-o:before { - content: "\f123"; -} -.fa-location-arrow:before { - content: "\f124"; -} -.fa-crop:before { - content: "\f125"; -} -.fa-code-fork:before { - content: "\f126"; -} -.fa-unlink:before, -.fa-chain-broken:before { - content: "\f127"; -} -.fa-question:before { - content: "\f128"; -} -.fa-info:before { - content: "\f129"; -} -.fa-exclamation:before { - content: "\f12a"; -} -.fa-superscript:before { - content: "\f12b"; -} -.fa-subscript:before { - content: "\f12c"; -} -.fa-eraser:before { - content: "\f12d"; -} -.fa-puzzle-piece:before { - content: "\f12e"; -} -.fa-microphone:before { - content: "\f130"; -} -.fa-microphone-slash:before { - content: "\f131"; -} -.fa-shield:before { - content: "\f132"; -} -.fa-calendar-o:before { - content: "\f133"; -} -.fa-fire-extinguisher:before { - content: "\f134"; -} -.fa-rocket:before { - content: "\f135"; -} -.fa-maxcdn:before { - content: "\f136"; -} -.fa-chevron-circle-left:before { - content: "\f137"; -} -.fa-chevron-circle-right:before { - content: "\f138"; -} -.fa-chevron-circle-up:before { - content: "\f139"; -} -.fa-chevron-circle-down:before { - content: "\f13a"; -} -.fa-html5:before { - content: "\f13b"; -} -.fa-css3:before { - content: "\f13c"; -} -.fa-anchor:before { - content: "\f13d"; -} -.fa-unlock-alt:before { - content: "\f13e"; -} -.fa-bullseye:before { - content: "\f140"; -} -.fa-ellipsis-h:before { - content: "\f141"; -} -.fa-ellipsis-v:before { - content: "\f142"; -} -.fa-rss-square:before { - content: "\f143"; -} -.fa-play-circle:before { - content: "\f144"; -} -.fa-ticket:before { - content: "\f145"; -} -.fa-minus-square:before { - content: "\f146"; -} -.fa-minus-square-o:before { - content: "\f147"; -} -.fa-level-up:before { - content: "\f148"; -} -.fa-level-down:before { - content: "\f149"; -} -.fa-check-square:before { - content: "\f14a"; -} -.fa-pencil-square:before { - content: "\f14b"; -} -.fa-external-link-square:before { - content: "\f14c"; -} -.fa-share-square:before { - content: "\f14d"; -} -.fa-compass:before { - content: "\f14e"; -} -.fa-toggle-down:before, -.fa-caret-square-o-down:before { - content: "\f150"; -} -.fa-toggle-up:before, -.fa-caret-square-o-up:before { - content: "\f151"; -} -.fa-toggle-right:before, -.fa-caret-square-o-right:before { - content: "\f152"; -} -.fa-euro:before, -.fa-eur:before { - content: "\f153"; -} -.fa-gbp:before { - content: "\f154"; -} -.fa-dollar:before, -.fa-usd:before { - content: "\f155"; -} -.fa-rupee:before, -.fa-inr:before { - content: "\f156"; -} -.fa-cny:before, -.fa-rmb:before, -.fa-yen:before, -.fa-jpy:before { - content: "\f157"; -} -.fa-ruble:before, -.fa-rouble:before, -.fa-rub:before { - content: "\f158"; -} -.fa-won:before, -.fa-krw:before { - content: "\f159"; -} -.fa-bitcoin:before, -.fa-btc:before { - content: "\f15a"; -} -.fa-file:before { - content: "\f15b"; -} -.fa-file-text:before { - content: "\f15c"; -} -.fa-sort-alpha-asc:before { - content: "\f15d"; -} -.fa-sort-alpha-desc:before { - content: "\f15e"; -} -.fa-sort-amount-asc:before { - content: "\f160"; -} -.fa-sort-amount-desc:before { - content: "\f161"; -} -.fa-sort-numeric-asc:before { - content: "\f162"; -} -.fa-sort-numeric-desc:before { - content: "\f163"; -} -.fa-thumbs-up:before { - content: "\f164"; -} -.fa-thumbs-down:before { - content: "\f165"; -} -.fa-youtube-square:before { - content: "\f166"; -} -.fa-youtube:before { - content: "\f167"; -} -.fa-xing:before { - content: "\f168"; -} -.fa-xing-square:before { - content: "\f169"; -} -.fa-youtube-play:before { - content: "\f16a"; -} -.fa-dropbox:before { - content: "\f16b"; -} -.fa-stack-overflow:before { - content: "\f16c"; -} -.fa-instagram:before { - content: "\f16d"; -} -.fa-flickr:before { - content: "\f16e"; -} -.fa-adn:before { - content: "\f170"; -} -.fa-bitbucket:before { - content: "\f171"; -} -.fa-bitbucket-square:before { - content: "\f172"; -} -.fa-tumblr:before { - content: "\f173"; -} -.fa-tumblr-square:before { - content: "\f174"; -} -.fa-long-arrow-down:before { - content: "\f175"; -} -.fa-long-arrow-up:before { - content: "\f176"; -} -.fa-long-arrow-left:before { - content: "\f177"; -} -.fa-long-arrow-right:before { - content: "\f178"; -} -.fa-apple:before { - content: "\f179"; -} -.fa-windows:before { - content: "\f17a"; -} -.fa-android:before { - content: "\f17b"; -} -.fa-linux:before { - content: "\f17c"; -} -.fa-dribbble:before { - content: "\f17d"; -} -.fa-skype:before { - content: "\f17e"; -} -.fa-foursquare:before { - content: "\f180"; -} -.fa-trello:before { - content: "\f181"; -} -.fa-female:before { - content: "\f182"; -} -.fa-male:before { - content: "\f183"; -} -.fa-gittip:before, -.fa-gratipay:before { - content: "\f184"; -} -.fa-sun-o:before { - content: "\f185"; -} -.fa-moon-o:before { - content: "\f186"; -} -.fa-archive:before { - content: "\f187"; -} -.fa-bug:before { - content: "\f188"; -} -.fa-vk:before { - content: "\f189"; -} -.fa-weibo:before { - content: "\f18a"; -} -.fa-renren:before { - content: "\f18b"; -} -.fa-pagelines:before { - content: "\f18c"; -} -.fa-stack-exchange:before { - content: "\f18d"; -} -.fa-arrow-circle-o-right:before { - content: "\f18e"; -} -.fa-arrow-circle-o-left:before { - content: "\f190"; -} -.fa-toggle-left:before, -.fa-caret-square-o-left:before { - content: "\f191"; -} -.fa-dot-circle-o:before { - content: "\f192"; -} -.fa-wheelchair:before { - content: "\f193"; -} -.fa-vimeo-square:before { - content: "\f194"; -} -.fa-turkish-lira:before, -.fa-try:before { - content: "\f195"; -} -.fa-plus-square-o:before { - content: "\f196"; -} -.fa-space-shuttle:before { - content: "\f197"; -} -.fa-slack:before { - content: "\f198"; -} -.fa-envelope-square:before { - content: "\f199"; -} -.fa-wordpress:before { - content: "\f19a"; -} -.fa-openid:before { - content: "\f19b"; -} -.fa-institution:before, -.fa-bank:before, -.fa-university:before { - content: "\f19c"; -} -.fa-mortar-board:before, -.fa-graduation-cap:before { - content: "\f19d"; -} -.fa-yahoo:before { - content: "\f19e"; -} -.fa-google:before { - content: "\f1a0"; -} -.fa-reddit:before { - content: "\f1a1"; -} -.fa-reddit-square:before { - content: "\f1a2"; -} -.fa-stumbleupon-circle:before { - content: "\f1a3"; -} -.fa-stumbleupon:before { - content: "\f1a4"; -} -.fa-delicious:before { - content: "\f1a5"; -} -.fa-digg:before { - content: "\f1a6"; -} -.fa-pied-piper-pp:before { - content: "\f1a7"; -} -.fa-pied-piper-alt:before { - content: "\f1a8"; -} -.fa-drupal:before { - content: "\f1a9"; -} -.fa-joomla:before { - content: "\f1aa"; -} -.fa-language:before { - content: "\f1ab"; -} -.fa-fax:before { - content: "\f1ac"; -} -.fa-building:before { - content: "\f1ad"; -} -.fa-child:before { - content: "\f1ae"; -} -.fa-paw:before { - content: "\f1b0"; -} -.fa-spoon:before { - content: "\f1b1"; -} -.fa-cube:before { - content: "\f1b2"; -} -.fa-cubes:before { - content: "\f1b3"; -} -.fa-behance:before { - content: "\f1b4"; -} -.fa-behance-square:before { - content: "\f1b5"; -} -.fa-steam:before { - content: "\f1b6"; -} -.fa-steam-square:before { - content: "\f1b7"; -} -.fa-recycle:before { - content: "\f1b8"; -} -.fa-automobile:before, -.fa-car:before { - content: "\f1b9"; -} -.fa-cab:before, -.fa-taxi:before { - content: "\f1ba"; -} -.fa-tree:before { - content: "\f1bb"; -} -.fa-spotify:before { - content: "\f1bc"; -} -.fa-deviantart:before { - content: "\f1bd"; -} -.fa-soundcloud:before { - content: "\f1be"; -} -.fa-database:before { - content: "\f1c0"; -} -.fa-file-pdf-o:before { - content: "\f1c1"; -} -.fa-file-word-o:before { - content: "\f1c2"; -} -.fa-file-excel-o:before { - content: "\f1c3"; -} -.fa-file-powerpoint-o:before { - content: "\f1c4"; -} -.fa-file-photo-o:before, -.fa-file-picture-o:before, -.fa-file-image-o:before { - content: "\f1c5"; -} -.fa-file-zip-o:before, -.fa-file-archive-o:before { - content: "\f1c6"; -} -.fa-file-sound-o:before, -.fa-file-audio-o:before { - content: "\f1c7"; -} -.fa-file-movie-o:before, -.fa-file-video-o:before { - content: "\f1c8"; -} -.fa-file-code-o:before { - content: "\f1c9"; -} -.fa-vine:before { - content: "\f1ca"; -} -.fa-codepen:before { - content: "\f1cb"; -} -.fa-jsfiddle:before { - content: "\f1cc"; -} -.fa-life-bouy:before, -.fa-life-buoy:before, -.fa-life-saver:before, -.fa-support:before, -.fa-life-ring:before { - content: "\f1cd"; -} -.fa-circle-o-notch:before { - content: "\f1ce"; -} -.fa-ra:before, -.fa-resistance:before, -.fa-rebel:before { - content: "\f1d0"; -} -.fa-ge:before, -.fa-empire:before { - content: "\f1d1"; -} -.fa-git-square:before { - content: "\f1d2"; -} -.fa-git:before { - content: "\f1d3"; -} -.fa-y-combinator-square:before, -.fa-yc-square:before, -.fa-hacker-news:before { - content: "\f1d4"; -} -.fa-tencent-weibo:before { - content: "\f1d5"; -} -.fa-qq:before { - content: "\f1d6"; -} -.fa-wechat:before, -.fa-weixin:before { - content: "\f1d7"; -} -.fa-send:before, -.fa-paper-plane:before { - content: "\f1d8"; -} -.fa-send-o:before, -.fa-paper-plane-o:before { - content: "\f1d9"; -} -.fa-history:before { - content: "\f1da"; -} -.fa-circle-thin:before { - content: "\f1db"; -} -.fa-header:before { - content: "\f1dc"; -} -.fa-paragraph:before { - content: "\f1dd"; -} -.fa-sliders:before { - content: "\f1de"; -} -.fa-share-alt:before { - content: "\f1e0"; -} -.fa-share-alt-square:before { - content: "\f1e1"; -} -.fa-bomb:before { - content: "\f1e2"; -} -.fa-soccer-ball-o:before, -.fa-futbol-o:before { - content: "\f1e3"; -} -.fa-tty:before { - content: "\f1e4"; -} -.fa-binoculars:before { - content: "\f1e5"; -} -.fa-plug:before { - content: "\f1e6"; -} -.fa-slideshare:before { - content: "\f1e7"; -} -.fa-twitch:before { - content: "\f1e8"; -} -.fa-yelp:before { - content: "\f1e9"; -} -.fa-newspaper-o:before { - content: "\f1ea"; -} -.fa-wifi:before { - content: "\f1eb"; -} -.fa-calculator:before { - content: "\f1ec"; -} -.fa-paypal:before { - content: "\f1ed"; -} -.fa-google-wallet:before { - content: "\f1ee"; -} -.fa-cc-visa:before { - content: "\f1f0"; -} -.fa-cc-mastercard:before { - content: "\f1f1"; -} -.fa-cc-discover:before { - content: "\f1f2"; -} -.fa-cc-amex:before { - content: "\f1f3"; -} -.fa-cc-paypal:before { - content: "\f1f4"; -} -.fa-cc-stripe:before { - content: "\f1f5"; -} -.fa-bell-slash:before { - content: "\f1f6"; -} -.fa-bell-slash-o:before { - content: "\f1f7"; -} -.fa-trash:before { - content: "\f1f8"; -} -.fa-copyright:before { - content: "\f1f9"; -} -.fa-at:before { - content: "\f1fa"; -} -.fa-eyedropper:before { - content: "\f1fb"; -} -.fa-paint-brush:before { - content: "\f1fc"; -} -.fa-birthday-cake:before { - content: "\f1fd"; -} -.fa-area-chart:before { - content: "\f1fe"; -} -.fa-pie-chart:before { - content: "\f200"; -} -.fa-line-chart:before { - content: "\f201"; -} -.fa-lastfm:before { - content: "\f202"; -} -.fa-lastfm-square:before { - content: "\f203"; -} -.fa-toggle-off:before { - content: "\f204"; -} -.fa-toggle-on:before { - content: "\f205"; -} -.fa-bicycle:before { - content: "\f206"; -} -.fa-bus:before { - content: "\f207"; -} -.fa-ioxhost:before { - content: "\f208"; -} -.fa-angellist:before { - content: "\f209"; -} -.fa-cc:before { - content: "\f20a"; -} -.fa-shekel:before, -.fa-sheqel:before, -.fa-ils:before { - content: "\f20b"; -} -.fa-meanpath:before { - content: "\f20c"; -} -.fa-buysellads:before { - content: "\f20d"; -} -.fa-connectdevelop:before { - content: "\f20e"; -} -.fa-dashcube:before { - content: "\f210"; -} -.fa-forumbee:before { - content: "\f211"; -} -.fa-leanpub:before { - content: "\f212"; -} -.fa-sellsy:before { - content: "\f213"; -} -.fa-shirtsinbulk:before { - content: "\f214"; -} -.fa-simplybuilt:before { - content: "\f215"; -} -.fa-skyatlas:before { - content: "\f216"; -} -.fa-cart-plus:before { - content: "\f217"; -} -.fa-cart-arrow-down:before { - content: "\f218"; -} -.fa-diamond:before { - content: "\f219"; -} -.fa-ship:before { - content: "\f21a"; -} -.fa-user-secret:before { - content: "\f21b"; -} -.fa-motorcycle:before { - content: "\f21c"; -} -.fa-street-view:before { - content: "\f21d"; -} -.fa-heartbeat:before { - content: "\f21e"; -} -.fa-venus:before { - content: "\f221"; -} -.fa-mars:before { - content: "\f222"; -} -.fa-mercury:before { - content: "\f223"; -} -.fa-intersex:before, -.fa-transgender:before { - content: "\f224"; -} -.fa-transgender-alt:before { - content: "\f225"; -} -.fa-venus-double:before { - content: "\f226"; -} -.fa-mars-double:before { - content: "\f227"; -} -.fa-venus-mars:before { - content: "\f228"; -} -.fa-mars-stroke:before { - content: "\f229"; -} -.fa-mars-stroke-v:before { - content: "\f22a"; -} -.fa-mars-stroke-h:before { - content: "\f22b"; -} -.fa-neuter:before { - content: "\f22c"; -} -.fa-genderless:before { - content: "\f22d"; -} -.fa-facebook-official:before { - content: "\f230"; -} -.fa-pinterest-p:before { - content: "\f231"; -} -.fa-whatsapp:before { - content: "\f232"; -} -.fa-server:before { - content: "\f233"; -} -.fa-user-plus:before { - content: "\f234"; -} -.fa-user-times:before { - content: "\f235"; -} -.fa-hotel:before, -.fa-bed:before { - content: "\f236"; -} -.fa-viacoin:before { - content: "\f237"; -} -.fa-train:before { - content: "\f238"; -} -.fa-subway:before { - content: "\f239"; -} -.fa-medium:before { - content: "\f23a"; -} -.fa-yc:before, -.fa-y-combinator:before { - content: "\f23b"; -} -.fa-optin-monster:before { - content: "\f23c"; -} -.fa-opencart:before { - content: "\f23d"; -} -.fa-expeditedssl:before { - content: "\f23e"; -} -.fa-battery-4:before, -.fa-battery:before, -.fa-battery-full:before { - content: "\f240"; -} -.fa-battery-3:before, -.fa-battery-three-quarters:before { - content: "\f241"; -} -.fa-battery-2:before, -.fa-battery-half:before { - content: "\f242"; -} -.fa-battery-1:before, -.fa-battery-quarter:before { - content: "\f243"; -} -.fa-battery-0:before, -.fa-battery-empty:before { - content: "\f244"; -} -.fa-mouse-pointer:before { - content: "\f245"; -} -.fa-i-cursor:before { - content: "\f246"; -} -.fa-object-group:before { - content: "\f247"; -} -.fa-object-ungroup:before { - content: "\f248"; -} -.fa-sticky-note:before { - content: "\f249"; -} -.fa-sticky-note-o:before { - content: "\f24a"; -} -.fa-cc-jcb:before { - content: "\f24b"; -} -.fa-cc-diners-club:before { - content: "\f24c"; -} -.fa-clone:before { - content: "\f24d"; -} -.fa-balance-scale:before { - content: "\f24e"; -} -.fa-hourglass-o:before { - content: "\f250"; -} -.fa-hourglass-1:before, -.fa-hourglass-start:before { - content: "\f251"; -} -.fa-hourglass-2:before, -.fa-hourglass-half:before { - content: "\f252"; -} -.fa-hourglass-3:before, -.fa-hourglass-end:before { - content: "\f253"; -} -.fa-hourglass:before { - content: "\f254"; -} -.fa-hand-grab-o:before, -.fa-hand-rock-o:before { - content: "\f255"; -} -.fa-hand-stop-o:before, -.fa-hand-paper-o:before { - content: "\f256"; -} -.fa-hand-scissors-o:before { - content: "\f257"; -} -.fa-hand-lizard-o:before { - content: "\f258"; -} -.fa-hand-spock-o:before { - content: "\f259"; -} -.fa-hand-pointer-o:before { - content: "\f25a"; -} -.fa-hand-peace-o:before { - content: "\f25b"; -} -.fa-trademark:before { - content: "\f25c"; -} -.fa-registered:before { - content: "\f25d"; -} -.fa-creative-commons:before { - content: "\f25e"; -} -.fa-gg:before { - content: "\f260"; -} -.fa-gg-circle:before { - content: "\f261"; -} -.fa-tripadvisor:before { - content: "\f262"; -} -.fa-odnoklassniki:before { - content: "\f263"; -} -.fa-odnoklassniki-square:before { - content: "\f264"; -} -.fa-get-pocket:before { - content: "\f265"; -} -.fa-wikipedia-w:before { - content: "\f266"; -} -.fa-safari:before { - content: "\f267"; -} -.fa-chrome:before { - content: "\f268"; -} -.fa-firefox:before { - content: "\f269"; -} -.fa-opera:before { - content: "\f26a"; -} -.fa-internet-explorer:before { - content: "\f26b"; -} -.fa-tv:before, -.fa-television:before { - content: "\f26c"; -} -.fa-contao:before { - content: "\f26d"; -} -.fa-500px:before { - content: "\f26e"; -} -.fa-amazon:before { - content: "\f270"; -} -.fa-calendar-plus-o:before { - content: "\f271"; -} -.fa-calendar-minus-o:before { - content: "\f272"; -} -.fa-calendar-times-o:before { - content: "\f273"; -} -.fa-calendar-check-o:before { - content: "\f274"; -} -.fa-industry:before { - content: "\f275"; -} -.fa-map-pin:before { - content: "\f276"; -} -.fa-map-signs:before { - content: "\f277"; -} -.fa-map-o:before { - content: "\f278"; -} -.fa-map:before { - content: "\f279"; -} -.fa-commenting:before { - content: "\f27a"; -} -.fa-commenting-o:before { - content: "\f27b"; -} -.fa-houzz:before { - content: "\f27c"; -} -.fa-vimeo:before { - content: "\f27d"; -} -.fa-black-tie:before { - content: "\f27e"; -} -.fa-fonticons:before { - content: "\f280"; -} -.fa-reddit-alien:before { - content: "\f281"; -} -.fa-edge:before { - content: "\f282"; -} -.fa-credit-card-alt:before { - content: "\f283"; -} -.fa-codiepie:before { - content: "\f284"; -} -.fa-modx:before { - content: "\f285"; -} -.fa-fort-awesome:before { - content: "\f286"; -} -.fa-usb:before { - content: "\f287"; -} -.fa-product-hunt:before { - content: "\f288"; -} -.fa-mixcloud:before { - content: "\f289"; -} -.fa-scribd:before { - content: "\f28a"; -} -.fa-pause-circle:before { - content: "\f28b"; -} -.fa-pause-circle-o:before { - content: "\f28c"; -} -.fa-stop-circle:before { - content: "\f28d"; -} -.fa-stop-circle-o:before { - content: "\f28e"; -} -.fa-shopping-bag:before { - content: "\f290"; -} -.fa-shopping-basket:before { - content: "\f291"; -} -.fa-hashtag:before { - content: "\f292"; -} -.fa-bluetooth:before { - content: "\f293"; -} -.fa-bluetooth-b:before { - content: "\f294"; -} -.fa-percent:before { - content: "\f295"; -} -.fa-gitlab:before { - content: "\f296"; -} -.fa-wpbeginner:before { - content: "\f297"; -} -.fa-wpforms:before { - content: "\f298"; -} -.fa-envira:before { - content: "\f299"; -} -.fa-universal-access:before { - content: "\f29a"; -} -.fa-wheelchair-alt:before { - content: "\f29b"; -} -.fa-question-circle-o:before { - content: "\f29c"; -} -.fa-blind:before { - content: "\f29d"; -} -.fa-audio-description:before { - content: "\f29e"; -} -.fa-volume-control-phone:before { - content: "\f2a0"; -} -.fa-braille:before { - content: "\f2a1"; -} -.fa-assistive-listening-systems:before { - content: "\f2a2"; -} -.fa-asl-interpreting:before, -.fa-american-sign-language-interpreting:before { - content: "\f2a3"; -} -.fa-deafness:before, -.fa-hard-of-hearing:before, -.fa-deaf:before { - content: "\f2a4"; -} -.fa-glide:before { - content: "\f2a5"; -} -.fa-glide-g:before { - content: "\f2a6"; -} -.fa-signing:before, -.fa-sign-language:before { - content: "\f2a7"; -} -.fa-low-vision:before { - content: "\f2a8"; -} -.fa-viadeo:before { - content: "\f2a9"; -} -.fa-viadeo-square:before { - content: "\f2aa"; -} -.fa-snapchat:before { - content: "\f2ab"; -} -.fa-snapchat-ghost:before { - content: "\f2ac"; -} -.fa-snapchat-square:before { - content: "\f2ad"; -} -.fa-pied-piper:before { - content: "\f2ae"; -} -.fa-first-order:before { - content: "\f2b0"; -} -.fa-yoast:before { - content: "\f2b1"; -} -.fa-themeisle:before { - content: "\f2b2"; -} -.fa-google-plus-circle:before, -.fa-google-plus-official:before { - content: "\f2b3"; -} -.fa-fa:before, -.fa-font-awesome:before { - content: "\f2b4"; -} -.fa-handshake-o:before { - content: "\f2b5"; -} -.fa-envelope-open:before { - content: "\f2b6"; -} -.fa-envelope-open-o:before { - content: "\f2b7"; -} -.fa-linode:before { - content: "\f2b8"; -} -.fa-address-book:before { - content: "\f2b9"; -} -.fa-address-book-o:before { - content: "\f2ba"; -} -.fa-vcard:before, -.fa-address-card:before { - content: "\f2bb"; -} -.fa-vcard-o:before, -.fa-address-card-o:before { - content: "\f2bc"; -} -.fa-user-circle:before { - content: "\f2bd"; -} -.fa-user-circle-o:before { - content: "\f2be"; -} -.fa-user-o:before { - content: "\f2c0"; -} -.fa-id-badge:before { - content: "\f2c1"; -} -.fa-drivers-license:before, -.fa-id-card:before { - content: "\f2c2"; -} -.fa-drivers-license-o:before, -.fa-id-card-o:before { - content: "\f2c3"; -} -.fa-quora:before { - content: "\f2c4"; -} -.fa-free-code-camp:before { - content: "\f2c5"; -} -.fa-telegram:before { - content: "\f2c6"; -} -.fa-thermometer-4:before, -.fa-thermometer:before, -.fa-thermometer-full:before { - content: "\f2c7"; -} -.fa-thermometer-3:before, -.fa-thermometer-three-quarters:before { - content: "\f2c8"; -} -.fa-thermometer-2:before, -.fa-thermometer-half:before { - content: "\f2c9"; -} -.fa-thermometer-1:before, -.fa-thermometer-quarter:before { - content: "\f2ca"; -} -.fa-thermometer-0:before, -.fa-thermometer-empty:before { - content: "\f2cb"; -} -.fa-shower:before { - content: "\f2cc"; -} -.fa-bathtub:before, -.fa-s15:before, -.fa-bath:before { - content: "\f2cd"; -} -.fa-podcast:before { - content: "\f2ce"; -} -.fa-window-maximize:before { - content: "\f2d0"; -} -.fa-window-minimize:before { - content: "\f2d1"; -} -.fa-window-restore:before { - content: "\f2d2"; -} -.fa-times-rectangle:before, -.fa-window-close:before { - content: "\f2d3"; -} -.fa-times-rectangle-o:before, -.fa-window-close-o:before { - content: "\f2d4"; -} -.fa-bandcamp:before { - content: "\f2d5"; -} -.fa-grav:before { - content: "\f2d6"; -} -.fa-etsy:before { - content: "\f2d7"; -} -.fa-imdb:before { - content: "\f2d8"; -} -.fa-ravelry:before { - content: "\f2d9"; -} -.fa-eercast:before { - content: "\f2da"; -} -.fa-microchip:before { - content: "\f2db"; -} -.fa-snowflake-o:before { - content: "\f2dc"; -} -.fa-superpowers:before { - content: "\f2dd"; -} -.fa-wpexplorer:before { - content: "\f2de"; -} -.fa-meetup:before { - content: "\f2e0"; -} -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - border: 0; -} -.sr-only-focusable:active, -.sr-only-focusable:focus { - position: static; - width: auto; - height: auto; - margin: 0; - overflow: visible; - clip: auto; -} +/*! + * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome + * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) + */ +/* FONT PATH + * -------------------------- */ +@font-face { + font-family: 'FontAwesome'; + src: url('../fonts/fontawesome-webfont.eot?v=4.7.0'); + src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); + font-weight: normal; + font-style: normal; +} +.fa { + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +/* makes the font 33% larger relative to the icon container */ +.fa-lg { + font-size: 1.33333333em; + line-height: 0.75em; + vertical-align: -15%; +} +.fa-2x { + font-size: 2em; +} +.fa-3x { + font-size: 3em; +} +.fa-4x { + font-size: 4em; +} +.fa-5x { + font-size: 5em; +} +.fa-fw { + width: 1.28571429em; + text-align: center; +} +.fa-ul { + padding-left: 0; + margin-left: 2.14285714em; + list-style-type: none; +} +.fa-ul > li { + position: relative; +} +.fa-li { + position: absolute; + left: -2.14285714em; + width: 2.14285714em; + top: 0.14285714em; + text-align: center; +} +.fa-li.fa-lg { + left: -1.85714286em; +} +.fa-border { + padding: .2em .25em .15em; + border: solid 0.08em #eeeeee; + border-radius: .1em; +} +.fa-pull-left { + float: left; +} +.fa-pull-right { + float: right; +} +.fa.fa-pull-left { + margin-right: .3em; +} +.fa.fa-pull-right { + margin-left: .3em; +} +/* Deprecated as of 4.4.0 */ +.pull-right { + float: right; +} +.pull-left { + float: left; +} +.fa.pull-left { + margin-right: .3em; +} +.fa.pull-right { + margin-left: .3em; +} +.fa-spin { + -webkit-animation: fa-spin 2s infinite linear; + animation: fa-spin 2s infinite linear; +} +.fa-pulse { + -webkit-animation: fa-spin 1s infinite steps(8); + animation: fa-spin 1s infinite steps(8); +} +@-webkit-keyframes fa-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} +@keyframes fa-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} +.fa-rotate-90 { + -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} +.fa-rotate-180 { + -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} +.fa-rotate-270 { + -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); +} +.fa-flip-horizontal { + -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)"; + -webkit-transform: scale(-1, 1); + -ms-transform: scale(-1, 1); + transform: scale(-1, 1); +} +.fa-flip-vertical { + -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"; + -webkit-transform: scale(1, -1); + -ms-transform: scale(1, -1); + transform: scale(1, -1); +} +:root .fa-rotate-90, +:root .fa-rotate-180, +:root .fa-rotate-270, +:root .fa-flip-horizontal, +:root .fa-flip-vertical { + filter: none; +} +.fa-stack { + position: relative; + display: inline-block; + width: 2em; + height: 2em; + line-height: 2em; + vertical-align: middle; +} +.fa-stack-1x, +.fa-stack-2x { + position: absolute; + left: 0; + width: 100%; + text-align: center; +} +.fa-stack-1x { + line-height: inherit; +} +.fa-stack-2x { + font-size: 2em; +} +.fa-inverse { + color: #ffffff; +} +/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen + readers do not read off random characters that represent icons */ +.fa-glass:before { + content: "\f000"; +} +.fa-music:before { + content: "\f001"; +} +.fa-search:before { + content: "\f002"; +} +.fa-envelope-o:before { + content: "\f003"; +} +.fa-heart:before { + content: "\f004"; +} +.fa-star:before { + content: "\f005"; +} +.fa-star-o:before { + content: "\f006"; +} +.fa-user:before { + content: "\f007"; +} +.fa-film:before { + content: "\f008"; +} +.fa-th-large:before { + content: "\f009"; +} +.fa-th:before { + content: "\f00a"; +} +.fa-th-list:before { + content: "\f00b"; +} +.fa-check:before { + content: "\f00c"; +} +.fa-remove:before, +.fa-close:before, +.fa-times:before { + content: "\f00d"; +} +.fa-search-plus:before { + content: "\f00e"; +} +.fa-search-minus:before { + content: "\f010"; +} +.fa-power-off:before { + content: "\f011"; +} +.fa-signal:before { + content: "\f012"; +} +.fa-gear:before, +.fa-cog:before { + content: "\f013"; +} +.fa-trash-o:before { + content: "\f014"; +} +.fa-home:before { + content: "\f015"; +} +.fa-file-o:before { + content: "\f016"; +} +.fa-clock-o:before { + content: "\f017"; +} +.fa-road:before { + content: "\f018"; +} +.fa-download:before { + content: "\f019"; +} +.fa-arrow-circle-o-down:before { + content: "\f01a"; +} +.fa-arrow-circle-o-up:before { + content: "\f01b"; +} +.fa-inbox:before { + content: "\f01c"; +} +.fa-play-circle-o:before { + content: "\f01d"; +} +.fa-rotate-right:before, +.fa-repeat:before { + content: "\f01e"; +} +.fa-refresh:before { + content: "\f021"; +} +.fa-list-alt:before { + content: "\f022"; +} +.fa-lock:before { + content: "\f023"; +} +.fa-flag:before { + content: "\f024"; +} +.fa-headphones:before { + content: "\f025"; +} +.fa-volume-off:before { + content: "\f026"; +} +.fa-volume-down:before { + content: "\f027"; +} +.fa-volume-up:before { + content: "\f028"; +} +.fa-qrcode:before { + content: "\f029"; +} +.fa-barcode:before { + content: "\f02a"; +} +.fa-tag:before { + content: "\f02b"; +} +.fa-tags:before { + content: "\f02c"; +} +.fa-book:before { + content: "\f02d"; +} +.fa-bookmark:before { + content: "\f02e"; +} +.fa-print:before { + content: "\f02f"; +} +.fa-camera:before { + content: "\f030"; +} +.fa-font:before { + content: "\f031"; +} +.fa-bold:before { + content: "\f032"; +} +.fa-italic:before { + content: "\f033"; +} +.fa-text-height:before { + content: "\f034"; +} +.fa-text-width:before { + content: "\f035"; +} +.fa-align-left:before { + content: "\f036"; +} +.fa-align-center:before { + content: "\f037"; +} +.fa-align-right:before { + content: "\f038"; +} +.fa-align-justify:before { + content: "\f039"; +} +.fa-list:before { + content: "\f03a"; +} +.fa-dedent:before, +.fa-outdent:before { + content: "\f03b"; +} +.fa-indent:before { + content: "\f03c"; +} +.fa-video-camera:before { + content: "\f03d"; +} +.fa-photo:before, +.fa-image:before, +.fa-picture-o:before { + content: "\f03e"; +} +.fa-pencil:before { + content: "\f040"; +} +.fa-map-marker:before { + content: "\f041"; +} +.fa-adjust:before { + content: "\f042"; +} +.fa-tint:before { + content: "\f043"; +} +.fa-edit:before, +.fa-pencil-square-o:before { + content: "\f044"; +} +.fa-share-square-o:before { + content: "\f045"; +} +.fa-check-square-o:before { + content: "\f046"; +} +.fa-arrows:before { + content: "\f047"; +} +.fa-step-backward:before { + content: "\f048"; +} +.fa-fast-backward:before { + content: "\f049"; +} +.fa-backward:before { + content: "\f04a"; +} +.fa-play:before { + content: "\f04b"; +} +.fa-pause:before { + content: "\f04c"; +} +.fa-stop:before { + content: "\f04d"; +} +.fa-forward:before { + content: "\f04e"; +} +.fa-fast-forward:before { + content: "\f050"; +} +.fa-step-forward:before { + content: "\f051"; +} +.fa-eject:before { + content: "\f052"; +} +.fa-chevron-left:before { + content: "\f053"; +} +.fa-chevron-right:before { + content: "\f054"; +} +.fa-plus-circle:before { + content: "\f055"; +} +.fa-minus-circle:before { + content: "\f056"; +} +.fa-times-circle:before { + content: "\f057"; +} +.fa-check-circle:before { + content: "\f058"; +} +.fa-question-circle:before { + content: "\f059"; +} +.fa-info-circle:before { + content: "\f05a"; +} +.fa-crosshairs:before { + content: "\f05b"; +} +.fa-times-circle-o:before { + content: "\f05c"; +} +.fa-check-circle-o:before { + content: "\f05d"; +} +.fa-ban:before { + content: "\f05e"; +} +.fa-arrow-left:before { + content: "\f060"; +} +.fa-arrow-right:before { + content: "\f061"; +} +.fa-arrow-up:before { + content: "\f062"; +} +.fa-arrow-down:before { + content: "\f063"; +} +.fa-mail-forward:before, +.fa-share:before { + content: "\f064"; +} +.fa-expand:before { + content: "\f065"; +} +.fa-compress:before { + content: "\f066"; +} +.fa-plus:before { + content: "\f067"; +} +.fa-minus:before { + content: "\f068"; +} +.fa-asterisk:before { + content: "\f069"; +} +.fa-exclamation-circle:before { + content: "\f06a"; +} +.fa-gift:before { + content: "\f06b"; +} +.fa-leaf:before { + content: "\f06c"; +} +.fa-fire:before { + content: "\f06d"; +} +.fa-eye:before { + content: "\f06e"; +} +.fa-eye-slash:before { + content: "\f070"; +} +.fa-warning:before, +.fa-exclamation-triangle:before { + content: "\f071"; +} +.fa-plane:before { + content: "\f072"; +} +.fa-calendar:before { + content: "\f073"; +} +.fa-random:before { + content: "\f074"; +} +.fa-comment:before { + content: "\f075"; +} +.fa-magnet:before { + content: "\f076"; +} +.fa-chevron-up:before { + content: "\f077"; +} +.fa-chevron-down:before { + content: "\f078"; +} +.fa-retweet:before { + content: "\f079"; +} +.fa-shopping-cart:before { + content: "\f07a"; +} +.fa-folder:before { + content: "\f07b"; +} +.fa-folder-open:before { + content: "\f07c"; +} +.fa-arrows-v:before { + content: "\f07d"; +} +.fa-arrows-h:before { + content: "\f07e"; +} +.fa-bar-chart-o:before, +.fa-bar-chart:before { + content: "\f080"; +} +.fa-twitter-square:before { + content: "\f081"; +} +.fa-facebook-square:before { + content: "\f082"; +} +.fa-camera-retro:before { + content: "\f083"; +} +.fa-key:before { + content: "\f084"; +} +.fa-gears:before, +.fa-cogs:before { + content: "\f085"; +} +.fa-comments:before { + content: "\f086"; +} +.fa-thumbs-o-up:before { + content: "\f087"; +} +.fa-thumbs-o-down:before { + content: "\f088"; +} +.fa-star-half:before { + content: "\f089"; +} +.fa-heart-o:before { + content: "\f08a"; +} +.fa-sign-out:before { + content: "\f08b"; +} +.fa-linkedin-square:before { + content: "\f08c"; +} +.fa-thumb-tack:before { + content: "\f08d"; +} +.fa-external-link:before { + content: "\f08e"; +} +.fa-sign-in:before { + content: "\f090"; +} +.fa-trophy:before { + content: "\f091"; +} +.fa-github-square:before { + content: "\f092"; +} +.fa-upload:before { + content: "\f093"; +} +.fa-lemon-o:before { + content: "\f094"; +} +.fa-phone:before { + content: "\f095"; +} +.fa-square-o:before { + content: "\f096"; +} +.fa-bookmark-o:before { + content: "\f097"; +} +.fa-phone-square:before { + content: "\f098"; +} +.fa-twitter:before { + content: "\f099"; +} +.fa-facebook-f:before, +.fa-facebook:before { + content: "\f09a"; +} +.fa-github:before { + content: "\f09b"; +} +.fa-unlock:before { + content: "\f09c"; +} +.fa-credit-card:before { + content: "\f09d"; +} +.fa-feed:before, +.fa-rss:before { + content: "\f09e"; +} +.fa-hdd-o:before { + content: "\f0a0"; +} +.fa-bullhorn:before { + content: "\f0a1"; +} +.fa-bell:before { + content: "\f0f3"; +} +.fa-certificate:before { + content: "\f0a3"; +} +.fa-hand-o-right:before { + content: "\f0a4"; +} +.fa-hand-o-left:before { + content: "\f0a5"; +} +.fa-hand-o-up:before { + content: "\f0a6"; +} +.fa-hand-o-down:before { + content: "\f0a7"; +} +.fa-arrow-circle-left:before { + content: "\f0a8"; +} +.fa-arrow-circle-right:before { + content: "\f0a9"; +} +.fa-arrow-circle-up:before { + content: "\f0aa"; +} +.fa-arrow-circle-down:before { + content: "\f0ab"; +} +.fa-globe:before { + content: "\f0ac"; +} +.fa-wrench:before { + content: "\f0ad"; +} +.fa-tasks:before { + content: "\f0ae"; +} +.fa-filter:before { + content: "\f0b0"; +} +.fa-briefcase:before { + content: "\f0b1"; +} +.fa-arrows-alt:before { + content: "\f0b2"; +} +.fa-group:before, +.fa-users:before { + content: "\f0c0"; +} +.fa-chain:before, +.fa-link:before { + content: "\f0c1"; +} +.fa-cloud:before { + content: "\f0c2"; +} +.fa-flask:before { + content: "\f0c3"; +} +.fa-cut:before, +.fa-scissors:before { + content: "\f0c4"; +} +.fa-copy:before, +.fa-files-o:before { + content: "\f0c5"; +} +.fa-paperclip:before { + content: "\f0c6"; +} +.fa-save:before, +.fa-floppy-o:before { + content: "\f0c7"; +} +.fa-square:before { + content: "\f0c8"; +} +.fa-navicon:before, +.fa-reorder:before, +.fa-bars:before { + content: "\f0c9"; +} +.fa-list-ul:before { + content: "\f0ca"; +} +.fa-list-ol:before { + content: "\f0cb"; +} +.fa-strikethrough:before { + content: "\f0cc"; +} +.fa-underline:before { + content: "\f0cd"; +} +.fa-table:before { + content: "\f0ce"; +} +.fa-magic:before { + content: "\f0d0"; +} +.fa-truck:before { + content: "\f0d1"; +} +.fa-pinterest:before { + content: "\f0d2"; +} +.fa-pinterest-square:before { + content: "\f0d3"; +} +.fa-google-plus-square:before { + content: "\f0d4"; +} +.fa-google-plus:before { + content: "\f0d5"; +} +.fa-money:before { + content: "\f0d6"; +} +.fa-caret-down:before { + content: "\f0d7"; +} +.fa-caret-up:before { + content: "\f0d8"; +} +.fa-caret-left:before { + content: "\f0d9"; +} +.fa-caret-right:before { + content: "\f0da"; +} +.fa-columns:before { + content: "\f0db"; +} +.fa-unsorted:before, +.fa-sort:before { + content: "\f0dc"; +} +.fa-sort-down:before, +.fa-sort-desc:before { + content: "\f0dd"; +} +.fa-sort-up:before, +.fa-sort-asc:before { + content: "\f0de"; +} +.fa-envelope:before { + content: "\f0e0"; +} +.fa-linkedin:before { + content: "\f0e1"; +} +.fa-rotate-left:before, +.fa-undo:before { + content: "\f0e2"; +} +.fa-legal:before, +.fa-gavel:before { + content: "\f0e3"; +} +.fa-dashboard:before, +.fa-tachometer:before { + content: "\f0e4"; +} +.fa-comment-o:before { + content: "\f0e5"; +} +.fa-comments-o:before { + content: "\f0e6"; +} +.fa-flash:before, +.fa-bolt:before { + content: "\f0e7"; +} +.fa-sitemap:before { + content: "\f0e8"; +} +.fa-umbrella:before { + content: "\f0e9"; +} +.fa-paste:before, +.fa-clipboard:before { + content: "\f0ea"; +} +.fa-lightbulb-o:before { + content: "\f0eb"; +} +.fa-exchange:before { + content: "\f0ec"; +} +.fa-cloud-download:before { + content: "\f0ed"; +} +.fa-cloud-upload:before { + content: "\f0ee"; +} +.fa-user-md:before { + content: "\f0f0"; +} +.fa-stethoscope:before { + content: "\f0f1"; +} +.fa-suitcase:before { + content: "\f0f2"; +} +.fa-bell-o:before { + content: "\f0a2"; +} +.fa-coffee:before { + content: "\f0f4"; +} +.fa-cutlery:before { + content: "\f0f5"; +} +.fa-file-text-o:before { + content: "\f0f6"; +} +.fa-building-o:before { + content: "\f0f7"; +} +.fa-hospital-o:before { + content: "\f0f8"; +} +.fa-ambulance:before { + content: "\f0f9"; +} +.fa-medkit:before { + content: "\f0fa"; +} +.fa-fighter-jet:before { + content: "\f0fb"; +} +.fa-beer:before { + content: "\f0fc"; +} +.fa-h-square:before { + content: "\f0fd"; +} +.fa-plus-square:before { + content: "\f0fe"; +} +.fa-angle-double-left:before { + content: "\f100"; +} +.fa-angle-double-right:before { + content: "\f101"; +} +.fa-angle-double-up:before { + content: "\f102"; +} +.fa-angle-double-down:before { + content: "\f103"; +} +.fa-angle-left:before { + content: "\f104"; +} +.fa-angle-right:before { + content: "\f105"; +} +.fa-angle-up:before { + content: "\f106"; +} +.fa-angle-down:before { + content: "\f107"; +} +.fa-desktop:before { + content: "\f108"; +} +.fa-laptop:before { + content: "\f109"; +} +.fa-tablet:before { + content: "\f10a"; +} +.fa-mobile-phone:before, +.fa-mobile:before { + content: "\f10b"; +} +.fa-circle-o:before { + content: "\f10c"; +} +.fa-quote-left:before { + content: "\f10d"; +} +.fa-quote-right:before { + content: "\f10e"; +} +.fa-spinner:before { + content: "\f110"; +} +.fa-circle:before { + content: "\f111"; +} +.fa-mail-reply:before, +.fa-reply:before { + content: "\f112"; +} +.fa-github-alt:before { + content: "\f113"; +} +.fa-folder-o:before { + content: "\f114"; +} +.fa-folder-open-o:before { + content: "\f115"; +} +.fa-smile-o:before { + content: "\f118"; +} +.fa-frown-o:before { + content: "\f119"; +} +.fa-meh-o:before { + content: "\f11a"; +} +.fa-gamepad:before { + content: "\f11b"; +} +.fa-keyboard-o:before { + content: "\f11c"; +} +.fa-flag-o:before { + content: "\f11d"; +} +.fa-flag-checkered:before { + content: "\f11e"; +} +.fa-terminal:before { + content: "\f120"; +} +.fa-code:before { + content: "\f121"; +} +.fa-mail-reply-all:before, +.fa-reply-all:before { + content: "\f122"; +} +.fa-star-half-empty:before, +.fa-star-half-full:before, +.fa-star-half-o:before { + content: "\f123"; +} +.fa-location-arrow:before { + content: "\f124"; +} +.fa-crop:before { + content: "\f125"; +} +.fa-code-fork:before { + content: "\f126"; +} +.fa-unlink:before, +.fa-chain-broken:before { + content: "\f127"; +} +.fa-question:before { + content: "\f128"; +} +.fa-info:before { + content: "\f129"; +} +.fa-exclamation:before { + content: "\f12a"; +} +.fa-superscript:before { + content: "\f12b"; +} +.fa-subscript:before { + content: "\f12c"; +} +.fa-eraser:before { + content: "\f12d"; +} +.fa-puzzle-piece:before { + content: "\f12e"; +} +.fa-microphone:before { + content: "\f130"; +} +.fa-microphone-slash:before { + content: "\f131"; +} +.fa-shield:before { + content: "\f132"; +} +.fa-calendar-o:before { + content: "\f133"; +} +.fa-fire-extinguisher:before { + content: "\f134"; +} +.fa-rocket:before { + content: "\f135"; +} +.fa-maxcdn:before { + content: "\f136"; +} +.fa-chevron-circle-left:before { + content: "\f137"; +} +.fa-chevron-circle-right:before { + content: "\f138"; +} +.fa-chevron-circle-up:before { + content: "\f139"; +} +.fa-chevron-circle-down:before { + content: "\f13a"; +} +.fa-html5:before { + content: "\f13b"; +} +.fa-css3:before { + content: "\f13c"; +} +.fa-anchor:before { + content: "\f13d"; +} +.fa-unlock-alt:before { + content: "\f13e"; +} +.fa-bullseye:before { + content: "\f140"; +} +.fa-ellipsis-h:before { + content: "\f141"; +} +.fa-ellipsis-v:before { + content: "\f142"; +} +.fa-rss-square:before { + content: "\f143"; +} +.fa-play-circle:before { + content: "\f144"; +} +.fa-ticket:before { + content: "\f145"; +} +.fa-minus-square:before { + content: "\f146"; +} +.fa-minus-square-o:before { + content: "\f147"; +} +.fa-level-up:before { + content: "\f148"; +} +.fa-level-down:before { + content: "\f149"; +} +.fa-check-square:before { + content: "\f14a"; +} +.fa-pencil-square:before { + content: "\f14b"; +} +.fa-external-link-square:before { + content: "\f14c"; +} +.fa-share-square:before { + content: "\f14d"; +} +.fa-compass:before { + content: "\f14e"; +} +.fa-toggle-down:before, +.fa-caret-square-o-down:before { + content: "\f150"; +} +.fa-toggle-up:before, +.fa-caret-square-o-up:before { + content: "\f151"; +} +.fa-toggle-right:before, +.fa-caret-square-o-right:before { + content: "\f152"; +} +.fa-euro:before, +.fa-eur:before { + content: "\f153"; +} +.fa-gbp:before { + content: "\f154"; +} +.fa-dollar:before, +.fa-usd:before { + content: "\f155"; +} +.fa-rupee:before, +.fa-inr:before { + content: "\f156"; +} +.fa-cny:before, +.fa-rmb:before, +.fa-yen:before, +.fa-jpy:before { + content: "\f157"; +} +.fa-ruble:before, +.fa-rouble:before, +.fa-rub:before { + content: "\f158"; +} +.fa-won:before, +.fa-krw:before { + content: "\f159"; +} +.fa-bitcoin:before, +.fa-btc:before { + content: "\f15a"; +} +.fa-file:before { + content: "\f15b"; +} +.fa-file-text:before { + content: "\f15c"; +} +.fa-sort-alpha-asc:before { + content: "\f15d"; +} +.fa-sort-alpha-desc:before { + content: "\f15e"; +} +.fa-sort-amount-asc:before { + content: "\f160"; +} +.fa-sort-amount-desc:before { + content: "\f161"; +} +.fa-sort-numeric-asc:before { + content: "\f162"; +} +.fa-sort-numeric-desc:before { + content: "\f163"; +} +.fa-thumbs-up:before { + content: "\f164"; +} +.fa-thumbs-down:before { + content: "\f165"; +} +.fa-youtube-square:before { + content: "\f166"; +} +.fa-youtube:before { + content: "\f167"; +} +.fa-xing:before { + content: "\f168"; +} +.fa-xing-square:before { + content: "\f169"; +} +.fa-youtube-play:before { + content: "\f16a"; +} +.fa-dropbox:before { + content: "\f16b"; +} +.fa-stack-overflow:before { + content: "\f16c"; +} +.fa-instagram:before { + content: "\f16d"; +} +.fa-flickr:before { + content: "\f16e"; +} +.fa-adn:before { + content: "\f170"; +} +.fa-bitbucket:before { + content: "\f171"; +} +.fa-bitbucket-square:before { + content: "\f172"; +} +.fa-tumblr:before { + content: "\f173"; +} +.fa-tumblr-square:before { + content: "\f174"; +} +.fa-long-arrow-down:before { + content: "\f175"; +} +.fa-long-arrow-up:before { + content: "\f176"; +} +.fa-long-arrow-left:before { + content: "\f177"; +} +.fa-long-arrow-right:before { + content: "\f178"; +} +.fa-apple:before { + content: "\f179"; +} +.fa-windows:before { + content: "\f17a"; +} +.fa-android:before { + content: "\f17b"; +} +.fa-linux:before { + content: "\f17c"; +} +.fa-dribbble:before { + content: "\f17d"; +} +.fa-skype:before { + content: "\f17e"; +} +.fa-foursquare:before { + content: "\f180"; +} +.fa-trello:before { + content: "\f181"; +} +.fa-female:before { + content: "\f182"; +} +.fa-male:before { + content: "\f183"; +} +.fa-gittip:before, +.fa-gratipay:before { + content: "\f184"; +} +.fa-sun-o:before { + content: "\f185"; +} +.fa-moon-o:before { + content: "\f186"; +} +.fa-archive:before { + content: "\f187"; +} +.fa-bug:before { + content: "\f188"; +} +.fa-vk:before { + content: "\f189"; +} +.fa-weibo:before { + content: "\f18a"; +} +.fa-renren:before { + content: "\f18b"; +} +.fa-pagelines:before { + content: "\f18c"; +} +.fa-stack-exchange:before { + content: "\f18d"; +} +.fa-arrow-circle-o-right:before { + content: "\f18e"; +} +.fa-arrow-circle-o-left:before { + content: "\f190"; +} +.fa-toggle-left:before, +.fa-caret-square-o-left:before { + content: "\f191"; +} +.fa-dot-circle-o:before { + content: "\f192"; +} +.fa-wheelchair:before { + content: "\f193"; +} +.fa-vimeo-square:before { + content: "\f194"; +} +.fa-turkish-lira:before, +.fa-try:before { + content: "\f195"; +} +.fa-plus-square-o:before { + content: "\f196"; +} +.fa-space-shuttle:before { + content: "\f197"; +} +.fa-slack:before { + content: "\f198"; +} +.fa-envelope-square:before { + content: "\f199"; +} +.fa-wordpress:before { + content: "\f19a"; +} +.fa-openid:before { + content: "\f19b"; +} +.fa-institution:before, +.fa-bank:before, +.fa-university:before { + content: "\f19c"; +} +.fa-mortar-board:before, +.fa-graduation-cap:before { + content: "\f19d"; +} +.fa-yahoo:before { + content: "\f19e"; +} +.fa-google:before { + content: "\f1a0"; +} +.fa-reddit:before { + content: "\f1a1"; +} +.fa-reddit-square:before { + content: "\f1a2"; +} +.fa-stumbleupon-circle:before { + content: "\f1a3"; +} +.fa-stumbleupon:before { + content: "\f1a4"; +} +.fa-delicious:before { + content: "\f1a5"; +} +.fa-digg:before { + content: "\f1a6"; +} +.fa-pied-piper-pp:before { + content: "\f1a7"; +} +.fa-pied-piper-alt:before { + content: "\f1a8"; +} +.fa-drupal:before { + content: "\f1a9"; +} +.fa-joomla:before { + content: "\f1aa"; +} +.fa-language:before { + content: "\f1ab"; +} +.fa-fax:before { + content: "\f1ac"; +} +.fa-building:before { + content: "\f1ad"; +} +.fa-child:before { + content: "\f1ae"; +} +.fa-paw:before { + content: "\f1b0"; +} +.fa-spoon:before { + content: "\f1b1"; +} +.fa-cube:before { + content: "\f1b2"; +} +.fa-cubes:before { + content: "\f1b3"; +} +.fa-behance:before { + content: "\f1b4"; +} +.fa-behance-square:before { + content: "\f1b5"; +} +.fa-steam:before { + content: "\f1b6"; +} +.fa-steam-square:before { + content: "\f1b7"; +} +.fa-recycle:before { + content: "\f1b8"; +} +.fa-automobile:before, +.fa-car:before { + content: "\f1b9"; +} +.fa-cab:before, +.fa-taxi:before { + content: "\f1ba"; +} +.fa-tree:before { + content: "\f1bb"; +} +.fa-spotify:before { + content: "\f1bc"; +} +.fa-deviantart:before { + content: "\f1bd"; +} +.fa-soundcloud:before { + content: "\f1be"; +} +.fa-database:before { + content: "\f1c0"; +} +.fa-file-pdf-o:before { + content: "\f1c1"; +} +.fa-file-word-o:before { + content: "\f1c2"; +} +.fa-file-excel-o:before { + content: "\f1c3"; +} +.fa-file-powerpoint-o:before { + content: "\f1c4"; +} +.fa-file-photo-o:before, +.fa-file-picture-o:before, +.fa-file-image-o:before { + content: "\f1c5"; +} +.fa-file-zip-o:before, +.fa-file-archive-o:before { + content: "\f1c6"; +} +.fa-file-sound-o:before, +.fa-file-audio-o:before { + content: "\f1c7"; +} +.fa-file-movie-o:before, +.fa-file-video-o:before { + content: "\f1c8"; +} +.fa-file-code-o:before { + content: "\f1c9"; +} +.fa-vine:before { + content: "\f1ca"; +} +.fa-codepen:before { + content: "\f1cb"; +} +.fa-jsfiddle:before { + content: "\f1cc"; +} +.fa-life-bouy:before, +.fa-life-buoy:before, +.fa-life-saver:before, +.fa-support:before, +.fa-life-ring:before { + content: "\f1cd"; +} +.fa-circle-o-notch:before { + content: "\f1ce"; +} +.fa-ra:before, +.fa-resistance:before, +.fa-rebel:before { + content: "\f1d0"; +} +.fa-ge:before, +.fa-empire:before { + content: "\f1d1"; +} +.fa-git-square:before { + content: "\f1d2"; +} +.fa-git:before { + content: "\f1d3"; +} +.fa-y-combinator-square:before, +.fa-yc-square:before, +.fa-hacker-news:before { + content: "\f1d4"; +} +.fa-tencent-weibo:before { + content: "\f1d5"; +} +.fa-qq:before { + content: "\f1d6"; +} +.fa-wechat:before, +.fa-weixin:before { + content: "\f1d7"; +} +.fa-send:before, +.fa-paper-plane:before { + content: "\f1d8"; +} +.fa-send-o:before, +.fa-paper-plane-o:before { + content: "\f1d9"; +} +.fa-history:before { + content: "\f1da"; +} +.fa-circle-thin:before { + content: "\f1db"; +} +.fa-header:before { + content: "\f1dc"; +} +.fa-paragraph:before { + content: "\f1dd"; +} +.fa-sliders:before { + content: "\f1de"; +} +.fa-share-alt:before { + content: "\f1e0"; +} +.fa-share-alt-square:before { + content: "\f1e1"; +} +.fa-bomb:before { + content: "\f1e2"; +} +.fa-soccer-ball-o:before, +.fa-futbol-o:before { + content: "\f1e3"; +} +.fa-tty:before { + content: "\f1e4"; +} +.fa-binoculars:before { + content: "\f1e5"; +} +.fa-plug:before { + content: "\f1e6"; +} +.fa-slideshare:before { + content: "\f1e7"; +} +.fa-twitch:before { + content: "\f1e8"; +} +.fa-yelp:before { + content: "\f1e9"; +} +.fa-newspaper-o:before { + content: "\f1ea"; +} +.fa-wifi:before { + content: "\f1eb"; +} +.fa-calculator:before { + content: "\f1ec"; +} +.fa-paypal:before { + content: "\f1ed"; +} +.fa-google-wallet:before { + content: "\f1ee"; +} +.fa-cc-visa:before { + content: "\f1f0"; +} +.fa-cc-mastercard:before { + content: "\f1f1"; +} +.fa-cc-discover:before { + content: "\f1f2"; +} +.fa-cc-amex:before { + content: "\f1f3"; +} +.fa-cc-paypal:before { + content: "\f1f4"; +} +.fa-cc-stripe:before { + content: "\f1f5"; +} +.fa-bell-slash:before { + content: "\f1f6"; +} +.fa-bell-slash-o:before { + content: "\f1f7"; +} +.fa-trash:before { + content: "\f1f8"; +} +.fa-copyright:before { + content: "\f1f9"; +} +.fa-at:before { + content: "\f1fa"; +} +.fa-eyedropper:before { + content: "\f1fb"; +} +.fa-paint-brush:before { + content: "\f1fc"; +} +.fa-birthday-cake:before { + content: "\f1fd"; +} +.fa-area-chart:before { + content: "\f1fe"; +} +.fa-pie-chart:before { + content: "\f200"; +} +.fa-line-chart:before { + content: "\f201"; +} +.fa-lastfm:before { + content: "\f202"; +} +.fa-lastfm-square:before { + content: "\f203"; +} +.fa-toggle-off:before { + content: "\f204"; +} +.fa-toggle-on:before { + content: "\f205"; +} +.fa-bicycle:before { + content: "\f206"; +} +.fa-bus:before { + content: "\f207"; +} +.fa-ioxhost:before { + content: "\f208"; +} +.fa-angellist:before { + content: "\f209"; +} +.fa-cc:before { + content: "\f20a"; +} +.fa-shekel:before, +.fa-sheqel:before, +.fa-ils:before { + content: "\f20b"; +} +.fa-meanpath:before { + content: "\f20c"; +} +.fa-buysellads:before { + content: "\f20d"; +} +.fa-connectdevelop:before { + content: "\f20e"; +} +.fa-dashcube:before { + content: "\f210"; +} +.fa-forumbee:before { + content: "\f211"; +} +.fa-leanpub:before { + content: "\f212"; +} +.fa-sellsy:before { + content: "\f213"; +} +.fa-shirtsinbulk:before { + content: "\f214"; +} +.fa-simplybuilt:before { + content: "\f215"; +} +.fa-skyatlas:before { + content: "\f216"; +} +.fa-cart-plus:before { + content: "\f217"; +} +.fa-cart-arrow-down:before { + content: "\f218"; +} +.fa-diamond:before { + content: "\f219"; +} +.fa-ship:before { + content: "\f21a"; +} +.fa-user-secret:before { + content: "\f21b"; +} +.fa-motorcycle:before { + content: "\f21c"; +} +.fa-street-view:before { + content: "\f21d"; +} +.fa-heartbeat:before { + content: "\f21e"; +} +.fa-venus:before { + content: "\f221"; +} +.fa-mars:before { + content: "\f222"; +} +.fa-mercury:before { + content: "\f223"; +} +.fa-intersex:before, +.fa-transgender:before { + content: "\f224"; +} +.fa-transgender-alt:before { + content: "\f225"; +} +.fa-venus-double:before { + content: "\f226"; +} +.fa-mars-double:before { + content: "\f227"; +} +.fa-venus-mars:before { + content: "\f228"; +} +.fa-mars-stroke:before { + content: "\f229"; +} +.fa-mars-stroke-v:before { + content: "\f22a"; +} +.fa-mars-stroke-h:before { + content: "\f22b"; +} +.fa-neuter:before { + content: "\f22c"; +} +.fa-genderless:before { + content: "\f22d"; +} +.fa-facebook-official:before { + content: "\f230"; +} +.fa-pinterest-p:before { + content: "\f231"; +} +.fa-whatsapp:before { + content: "\f232"; +} +.fa-server:before { + content: "\f233"; +} +.fa-user-plus:before { + content: "\f234"; +} +.fa-user-times:before { + content: "\f235"; +} +.fa-hotel:before, +.fa-bed:before { + content: "\f236"; +} +.fa-viacoin:before { + content: "\f237"; +} +.fa-train:before { + content: "\f238"; +} +.fa-subway:before { + content: "\f239"; +} +.fa-medium:before { + content: "\f23a"; +} +.fa-yc:before, +.fa-y-combinator:before { + content: "\f23b"; +} +.fa-optin-monster:before { + content: "\f23c"; +} +.fa-opencart:before { + content: "\f23d"; +} +.fa-expeditedssl:before { + content: "\f23e"; +} +.fa-battery-4:before, +.fa-battery:before, +.fa-battery-full:before { + content: "\f240"; +} +.fa-battery-3:before, +.fa-battery-three-quarters:before { + content: "\f241"; +} +.fa-battery-2:before, +.fa-battery-half:before { + content: "\f242"; +} +.fa-battery-1:before, +.fa-battery-quarter:before { + content: "\f243"; +} +.fa-battery-0:before, +.fa-battery-empty:before { + content: "\f244"; +} +.fa-mouse-pointer:before { + content: "\f245"; +} +.fa-i-cursor:before { + content: "\f246"; +} +.fa-object-group:before { + content: "\f247"; +} +.fa-object-ungroup:before { + content: "\f248"; +} +.fa-sticky-note:before { + content: "\f249"; +} +.fa-sticky-note-o:before { + content: "\f24a"; +} +.fa-cc-jcb:before { + content: "\f24b"; +} +.fa-cc-diners-club:before { + content: "\f24c"; +} +.fa-clone:before { + content: "\f24d"; +} +.fa-balance-scale:before { + content: "\f24e"; +} +.fa-hourglass-o:before { + content: "\f250"; +} +.fa-hourglass-1:before, +.fa-hourglass-start:before { + content: "\f251"; +} +.fa-hourglass-2:before, +.fa-hourglass-half:before { + content: "\f252"; +} +.fa-hourglass-3:before, +.fa-hourglass-end:before { + content: "\f253"; +} +.fa-hourglass:before { + content: "\f254"; +} +.fa-hand-grab-o:before, +.fa-hand-rock-o:before { + content: "\f255"; +} +.fa-hand-stop-o:before, +.fa-hand-paper-o:before { + content: "\f256"; +} +.fa-hand-scissors-o:before { + content: "\f257"; +} +.fa-hand-lizard-o:before { + content: "\f258"; +} +.fa-hand-spock-o:before { + content: "\f259"; +} +.fa-hand-pointer-o:before { + content: "\f25a"; +} +.fa-hand-peace-o:before { + content: "\f25b"; +} +.fa-trademark:before { + content: "\f25c"; +} +.fa-registered:before { + content: "\f25d"; +} +.fa-creative-commons:before { + content: "\f25e"; +} +.fa-gg:before { + content: "\f260"; +} +.fa-gg-circle:before { + content: "\f261"; +} +.fa-tripadvisor:before { + content: "\f262"; +} +.fa-odnoklassniki:before { + content: "\f263"; +} +.fa-odnoklassniki-square:before { + content: "\f264"; +} +.fa-get-pocket:before { + content: "\f265"; +} +.fa-wikipedia-w:before { + content: "\f266"; +} +.fa-safari:before { + content: "\f267"; +} +.fa-chrome:before { + content: "\f268"; +} +.fa-firefox:before { + content: "\f269"; +} +.fa-opera:before { + content: "\f26a"; +} +.fa-internet-explorer:before { + content: "\f26b"; +} +.fa-tv:before, +.fa-television:before { + content: "\f26c"; +} +.fa-contao:before { + content: "\f26d"; +} +.fa-500px:before { + content: "\f26e"; +} +.fa-amazon:before { + content: "\f270"; +} +.fa-calendar-plus-o:before { + content: "\f271"; +} +.fa-calendar-minus-o:before { + content: "\f272"; +} +.fa-calendar-times-o:before { + content: "\f273"; +} +.fa-calendar-check-o:before { + content: "\f274"; +} +.fa-industry:before { + content: "\f275"; +} +.fa-map-pin:before { + content: "\f276"; +} +.fa-map-signs:before { + content: "\f277"; +} +.fa-map-o:before { + content: "\f278"; +} +.fa-map:before { + content: "\f279"; +} +.fa-commenting:before { + content: "\f27a"; +} +.fa-commenting-o:before { + content: "\f27b"; +} +.fa-houzz:before { + content: "\f27c"; +} +.fa-vimeo:before { + content: "\f27d"; +} +.fa-black-tie:before { + content: "\f27e"; +} +.fa-fonticons:before { + content: "\f280"; +} +.fa-reddit-alien:before { + content: "\f281"; +} +.fa-edge:before { + content: "\f282"; +} +.fa-credit-card-alt:before { + content: "\f283"; +} +.fa-codiepie:before { + content: "\f284"; +} +.fa-modx:before { + content: "\f285"; +} +.fa-fort-awesome:before { + content: "\f286"; +} +.fa-usb:before { + content: "\f287"; +} +.fa-product-hunt:before { + content: "\f288"; +} +.fa-mixcloud:before { + content: "\f289"; +} +.fa-scribd:before { + content: "\f28a"; +} +.fa-pause-circle:before { + content: "\f28b"; +} +.fa-pause-circle-o:before { + content: "\f28c"; +} +.fa-stop-circle:before { + content: "\f28d"; +} +.fa-stop-circle-o:before { + content: "\f28e"; +} +.fa-shopping-bag:before { + content: "\f290"; +} +.fa-shopping-basket:before { + content: "\f291"; +} +.fa-hashtag:before { + content: "\f292"; +} +.fa-bluetooth:before { + content: "\f293"; +} +.fa-bluetooth-b:before { + content: "\f294"; +} +.fa-percent:before { + content: "\f295"; +} +.fa-gitlab:before { + content: "\f296"; +} +.fa-wpbeginner:before { + content: "\f297"; +} +.fa-wpforms:before { + content: "\f298"; +} +.fa-envira:before { + content: "\f299"; +} +.fa-universal-access:before { + content: "\f29a"; +} +.fa-wheelchair-alt:before { + content: "\f29b"; +} +.fa-question-circle-o:before { + content: "\f29c"; +} +.fa-blind:before { + content: "\f29d"; +} +.fa-audio-description:before { + content: "\f29e"; +} +.fa-volume-control-phone:before { + content: "\f2a0"; +} +.fa-braille:before { + content: "\f2a1"; +} +.fa-assistive-listening-systems:before { + content: "\f2a2"; +} +.fa-asl-interpreting:before, +.fa-american-sign-language-interpreting:before { + content: "\f2a3"; +} +.fa-deafness:before, +.fa-hard-of-hearing:before, +.fa-deaf:before { + content: "\f2a4"; +} +.fa-glide:before { + content: "\f2a5"; +} +.fa-glide-g:before { + content: "\f2a6"; +} +.fa-signing:before, +.fa-sign-language:before { + content: "\f2a7"; +} +.fa-low-vision:before { + content: "\f2a8"; +} +.fa-viadeo:before { + content: "\f2a9"; +} +.fa-viadeo-square:before { + content: "\f2aa"; +} +.fa-snapchat:before { + content: "\f2ab"; +} +.fa-snapchat-ghost:before { + content: "\f2ac"; +} +.fa-snapchat-square:before { + content: "\f2ad"; +} +.fa-pied-piper:before { + content: "\f2ae"; +} +.fa-first-order:before { + content: "\f2b0"; +} +.fa-yoast:before { + content: "\f2b1"; +} +.fa-themeisle:before { + content: "\f2b2"; +} +.fa-google-plus-circle:before, +.fa-google-plus-official:before { + content: "\f2b3"; +} +.fa-fa:before, +.fa-font-awesome:before { + content: "\f2b4"; +} +.fa-handshake-o:before { + content: "\f2b5"; +} +.fa-envelope-open:before { + content: "\f2b6"; +} +.fa-envelope-open-o:before { + content: "\f2b7"; +} +.fa-linode:before { + content: "\f2b8"; +} +.fa-address-book:before { + content: "\f2b9"; +} +.fa-address-book-o:before { + content: "\f2ba"; +} +.fa-vcard:before, +.fa-address-card:before { + content: "\f2bb"; +} +.fa-vcard-o:before, +.fa-address-card-o:before { + content: "\f2bc"; +} +.fa-user-circle:before { + content: "\f2bd"; +} +.fa-user-circle-o:before { + content: "\f2be"; +} +.fa-user-o:before { + content: "\f2c0"; +} +.fa-id-badge:before { + content: "\f2c1"; +} +.fa-drivers-license:before, +.fa-id-card:before { + content: "\f2c2"; +} +.fa-drivers-license-o:before, +.fa-id-card-o:before { + content: "\f2c3"; +} +.fa-quora:before { + content: "\f2c4"; +} +.fa-free-code-camp:before { + content: "\f2c5"; +} +.fa-telegram:before { + content: "\f2c6"; +} +.fa-thermometer-4:before, +.fa-thermometer:before, +.fa-thermometer-full:before { + content: "\f2c7"; +} +.fa-thermometer-3:before, +.fa-thermometer-three-quarters:before { + content: "\f2c8"; +} +.fa-thermometer-2:before, +.fa-thermometer-half:before { + content: "\f2c9"; +} +.fa-thermometer-1:before, +.fa-thermometer-quarter:before { + content: "\f2ca"; +} +.fa-thermometer-0:before, +.fa-thermometer-empty:before { + content: "\f2cb"; +} +.fa-shower:before { + content: "\f2cc"; +} +.fa-bathtub:before, +.fa-s15:before, +.fa-bath:before { + content: "\f2cd"; +} +.fa-podcast:before { + content: "\f2ce"; +} +.fa-window-maximize:before { + content: "\f2d0"; +} +.fa-window-minimize:before { + content: "\f2d1"; +} +.fa-window-restore:before { + content: "\f2d2"; +} +.fa-times-rectangle:before, +.fa-window-close:before { + content: "\f2d3"; +} +.fa-times-rectangle-o:before, +.fa-window-close-o:before { + content: "\f2d4"; +} +.fa-bandcamp:before { + content: "\f2d5"; +} +.fa-grav:before { + content: "\f2d6"; +} +.fa-etsy:before { + content: "\f2d7"; +} +.fa-imdb:before { + content: "\f2d8"; +} +.fa-ravelry:before { + content: "\f2d9"; +} +.fa-eercast:before { + content: "\f2da"; +} +.fa-microchip:before { + content: "\f2db"; +} +.fa-snowflake-o:before { + content: "\f2dc"; +} +.fa-superpowers:before { + content: "\f2dd"; +} +.fa-wpexplorer:before { + content: "\f2de"; +} +.fa-meetup:before { + content: "\f2e0"; +} +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} +.sr-only-focusable:active, +.sr-only-focusable:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; +} diff --git a/lib/font-awesome/css/font-awesome.css.map b/lib/font-awesome/css/font-awesome.css.map index b555bd97..60763a86 100644 --- a/lib/font-awesome/css/font-awesome.css.map +++ b/lib/font-awesome/css/font-awesome.css.map @@ -1,7 +1,7 @@ -{ -"version": 3, -"mappings": "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", -"sources": ["../scss/_path.scss","../scss/_core.scss","../scss/_larger.scss","../scss/_fixed-width.scss","../scss/_list.scss","../scss/_variables.scss","../scss/_bordered-pulled.scss","../scss/_animated.scss","../scss/_rotated-flipped.scss","../scss/_mixins.scss","../scss/_stacked.scss","../scss/_icons.scss"], -"names": [], -"file": "font-awesome.css" -} +{ +"version": 3, +"mappings": ";;;;;;;AAGA,UAUC;EATC,WAAW,EAAE,aAAa;EAC1B,GAAG,EAAE,+CAAgE;EACrE,GAAG,EAAE,ySAAmG;EAKxG,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM;ACTpB,GAAmB;EACjB,OAAO,EAAE,YAAY;EACrB,IAAI,EAAE,uCAAwD;EAC9D,SAAS,EAAE,OAAO;EAClB,cAAc,EAAE,IAAI;EACpB,sBAAsB,EAAE,WAAW;EACnC,uBAAuB,EAAE,SAAS;EAClC,SAAS,EAAE,eAAe;;;ACN5B,MAAsB;EACpB,SAAS,EAAE,SAAS;EACpB,WAAW,EAAE,MAAS;EACtB,cAAc,EAAE,IAAI;;AAEtB,MAAsB;EAAE,SAAS,EAAE,GAAG;;AACtC,MAAsB;EAAE,SAAS,EAAE,GAAG;;AACtC,MAAsB;EAAE,SAAS,EAAE,GAAG;;AACtC,MAAsB;EAAE,SAAS,EAAE,GAAG;;ACVtC,MAAsB;EACpB,KAAK,EAAE,SAAW;EAClB,UAAU,EAAE,MAAM;;ACDpB,MAAsB;EACpB,YAAY,EAAE,CAAC;EACf,WAAW,ECKU,SAAS;EDJ9B,eAAe,EAAE,IAAI;EACrB,WAAK;IAAE,QAAQ,EAAE,QAAQ;;AAE3B,MAAsB;EACpB,QAAQ,EAAE,QAAQ;EAClB,IAAI,EAAE,UAAa;EACnB,KAAK,ECFgB,SAAS;EDG9B,GAAG,EAAE,SAAU;EACf,UAAU,EAAE,MAAM;EAClB,YAAuB;IACrB,IAAI,EAAE,UAA0B;;AEbpC,UAA0B;EACxB,OAAO,EAAE,gBAAgB;EACzB,MAAM,EAAE,iBAA4B;EACpC,aAAa,EAAE,IAAI;;AAGrB,WAAY;EAAE,KAAK,EAAE,KAAK;;AAC1B,UAAW;EAAE,KAAK,EAAE,IAAI;;AAGtB,aAAY;EAAE,YAAY,EAAE,IAAI;AAChC,cAAa;EAAE,WAAW,EAAE,IAAI;;ACXlC,QAAwB;EACtB,iBAAiB,EAAE,0BAA0B;EACrC,SAAS,EAAE,0BAA0B;;AAG/C,SAAyB;EACvB,iBAAiB,EAAE,4BAA4B;EACvC,SAAS,EAAE,4BAA4B;;AAGjD,0BASC;EARC,EAAG;IACD,iBAAiB,EAAE,YAAY;IACvB,SAAS,EAAE,YAAY;EAEjC,IAAK;IACH,iBAAiB,EAAE,cAAc;IACzB,SAAS,EAAE,cAAc;AAIrC,kBASC;EARC,EAAG;IACD,iBAAiB,EAAE,YAAY;IACvB,SAAS,EAAE,YAAY;EAEjC,IAAK;IACH,iBAAiB,EAAE,cAAc;IACzB,SAAS,EAAE,cAAc;AC5BrC,aAA8B;ECY5B,MAAM,EAAE,wDAAmE;EAC3E,iBAAiB,EAAE,aAAgB;EAC/B,aAAa,EAAE,aAAgB;EAC3B,SAAS,EAAE,aAAgB;;ADdrC,cAA8B;ECW5B,MAAM,EAAE,wDAAmE;EAC3E,iBAAiB,EAAE,cAAgB;EAC/B,aAAa,EAAE,cAAgB;EAC3B,SAAS,EAAE,cAAgB;;ADbrC,cAA8B;ECU5B,MAAM,EAAE,wDAAmE;EAC3E,iBAAiB,EAAE,cAAgB;EAC/B,aAAa,EAAE,cAAgB;EAC3B,SAAS,EAAE,cAAgB;;ADXrC,mBAAmC;ECejC,MAAM,EAAE,wDAAmE;EAC3E,iBAAiB,EAAE,YAAoB;EACnC,aAAa,EAAE,YAAoB;EAC/B,SAAS,EAAE,YAAoB;;ADjBzC,iBAAmC;ECcjC,MAAM,EAAE,wDAAmE;EAC3E,iBAAiB,EAAE,YAAoB;EACnC,aAAa,EAAE,YAAoB;EAC/B,SAAS,EAAE,YAAoB;;ADZzC;;;;uBAIuC;EACrC,MAAM,EAAE,IAAI;;AEfd,SAAyB;EACvB,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,YAAY;EACrB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,GAAG;EACX,WAAW,EAAE,GAAG;EAChB,cAAc,EAAE,MAAM;;AAExB,0BAAyD;EACvD,QAAQ,EAAE,QAAQ;EAClB,IAAI,EAAE,CAAC;EACP,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,MAAM;;AAEpB,YAA4B;EAAE,WAAW,EAAE,OAAO;;AAClD,YAA4B;EAAE,SAAS,EAAE,GAAG;;AAC5C,WAA2B;EAAE,KAAK,ELVZ,IAAI;;;;AMN1B,gBAAgC;EAAE,OAAO,ENoQ1B,GAAO;;AMnQtB,gBAAgC;EAAE,OAAO,EN0W1B,GAAO;;AMzWtB,iBAAiC;EAAE,OAAO,ENmb1B,GAAO;;AMlbvB,qBAAqC;EAAE,OAAO,ENmL1B,GAAO;;AMlL3B,gBAAgC;EAAE,OAAO,ENkR1B,GAAO;;AMjRtB,eAA+B;EAAE,OAAO,ENke1B,GAAO;;AMjerB,iBAAiC;EAAE,OAAO,ENse1B,GAAO;;AMrevB,eAA+B;EAAE,OAAO,EN+iB1B,GAAO;;AM9iBrB,eAA+B;EAAE,OAAO,ENyN1B,GAAO;;AMxNrB,mBAAmC;EAAE,OAAO,ENggB1B,GAAO;;AM/fzB,aAA6B;EAAE,OAAO,EN8f1B,GAAO;;AM7fnB,kBAAkC;EAAE,OAAO,EN+f1B,GAAO;;AM9fxB,gBAAgC;EAAE,OAAO,ENoG1B,GAAO;;AMnGtB;;gBAEgC;EAAE,OAAO,ENkgB1B,GAAO;;AMjgBtB,sBAAsC;EAAE,OAAO,ENua1B,GAAO;;AMta5B,uBAAuC;EAAE,OAAO,ENqa1B,GAAO;;AMpa7B,oBAAoC;EAAE,OAAO,EN+X1B,GAAO;;AM9X1B,iBAAiC;EAAE,OAAO,ENsb1B,GAAO;;AMrbvB;cAC8B;EAAE,OAAO,ENwH1B,GAAO;;AMvHpB,kBAAkC;EAAE,OAAO,ENygB1B,GAAO;;AMxgBxB,eAA+B;EAAE,OAAO,ENmQ1B,GAAO;;AMlQrB,iBAAiC;EAAE,OAAO,EN6L1B,GAAO;;AM5LvB,kBAAkC;EAAE,OAAO,EN0G1B,GAAO;;AMzGxB,eAA+B;EAAE,OAAO,EN+Y1B,GAAO;;AM9YrB,mBAAmC;EAAE,OAAO,ENiJ1B,GAAO;;AMhJzB,8BAA8C;EAAE,OAAO,ENI1B,GAAO;;AMHpC,4BAA4C;EAAE,OAAO,ENM1B,GAAO;;AMLlC,gBAAgC;EAAE,OAAO,ENkQ1B,GAAO;;AMjQtB,wBAAwC;EAAE,OAAO,EN4W1B,GAAO;;AM3W9B;iBACiC;EAAE,OAAO,ENmY1B,GAAO;;AMlYvB,kBAAkC;EAAE,OAAO,EN8X1B,GAAO;;AM7XxB,mBAAmC;EAAE,OAAO,ENiS1B,GAAO;;AMhSzB,eAA+B;EAAE,OAAO,ENoS1B,GAAO;;AMnSrB,eAA+B;EAAE,OAAO,ENgM1B,GAAO;;AM/LrB,qBAAqC;EAAE,OAAO,EN+O1B,GAAO;;AM9O3B,qBAAqC;EAAE,OAAO,EN8hB1B,GAAO;;AM7hB3B,sBAAsC;EAAE,OAAO,EN4hB1B,GAAO;;AM3hB5B,oBAAoC;EAAE,OAAO,EN6hB1B,GAAO;;AM5hB1B,iBAAiC;EAAE,OAAO,EN2W1B,GAAO;;AM1WvB,kBAAkC;EAAE,OAAO,ENW1B,GAAO;;AMVxB,cAA8B;EAAE,OAAO,ENod1B,GAAO;;AMndpB,eAA+B;EAAE,OAAO,ENod1B,GAAO;;AMndrB,eAA+B;EAAE,OAAO,EN2B1B,GAAO;;AM1BrB,mBAAmC;EAAE,OAAO,EN2B1B,GAAO;;AM1BzB,gBAAgC;EAAE,OAAO,ENkW1B,GAAO;;AMjWtB,iBAAiC;EAAE,OAAO,ENwC1B,GAAO;;AMvCvB,eAA+B;EAAE,OAAO,EN8L1B,GAAO;;AM7LrB,eAA+B;EAAE,OAAO,ENmB1B,GAAO;;AMlBrB,iBAAiC;EAAE,OAAO,ENoP1B,GAAO;;AMnPvB,sBAAsC;EAAE,OAAO,ENid1B,GAAO;;AMhd5B,qBAAqC;EAAE,OAAO,ENid1B,GAAO;;AMhd3B,qBAAqC;EAAE,OAAO,EN1C1B,GAAO;;AM2C3B,uBAAuC;EAAE,OAAO,EN7C1B,GAAO;;AM8C7B,sBAAsC;EAAE,OAAO,EN3C1B,GAAO;;AM4C5B,wBAAwC;EAAE,OAAO,EN9C1B,GAAO;;AM+C9B,eAA+B;EAAE,OAAO,ENwQ1B,GAAO;;AMvQrB;kBACkC;EAAE,OAAO,ENmT1B,GAAO;;AMlTxB,iBAAiC;EAAE,OAAO,ENmO1B,GAAO;;AMlOvB,uBAAuC;EAAE,OAAO,ENigB1B,GAAO;;AMhgB7B;;oBAEoC;EAAE,OAAO,EN+T1B,GAAO;;AM9T1B,iBAAiC;EAAE,OAAO,ENwT1B,GAAO;;AMvTvB,qBAAqC;EAAE,OAAO,EN+Q1B,GAAO;;AM9Q3B,iBAAiC;EAAE,OAAO,EN5D1B,GAAO;;AM6DvB,eAA+B;EAAE,OAAO,EN8c1B,GAAO;;AM7crB;0BAC0C;EAAE,OAAO,ENqT1B,GAAO;;AMpThC,yBAAyC;EAAE,OAAO,ENuX1B,GAAO;;AMtX/B,yBAAyC;EAAE,OAAO,EN0C1B,GAAO;;AMzC/B,iBAAiC;EAAE,OAAO,ENjC1B,GAAO;;AMkCvB,wBAAwC;EAAE,OAAO,ENma1B,GAAO;;AMla9B,wBAAwC;EAAE,OAAO,EN4H1B,GAAO;;AM3H9B,mBAAmC;EAAE,OAAO,EN7B1B,GAAO;;AM8BzB,eAA+B;EAAE,OAAO,EN0T1B,GAAO;;AMzTrB,gBAAgC;EAAE,OAAO,ENwS1B,GAAO;;AMvStB,eAA+B;EAAE,OAAO,ENia1B,GAAO;;AMharB,kBAAkC;EAAE,OAAO,ENgK1B,GAAO;;AM/JxB,uBAAuC;EAAE,OAAO,ENuH1B,GAAO;;AMtH7B,uBAAuC;EAAE,OAAO,EN4Z1B,GAAO;;AM3Z7B,gBAAgC;EAAE,OAAO,EN4F1B,GAAO;;AM3FtB,uBAAuC;EAAE,OAAO,ENoC1B,GAAO;;AMnC7B,wBAAwC;EAAE,OAAO,ENoC1B,GAAO;;AMnC9B,sBAAsC;EAAE,OAAO,ENsT1B,GAAO;;AMrT5B,uBAAuC;EAAE,OAAO,ENyQ1B,GAAO;;AMxQ7B,uBAAuC;EAAE,OAAO,ENwb1B,GAAO;;AMvb7B,uBAAuC;EAAE,OAAO,ENsB1B,GAAO;;AMrB7B,0BAA0C;EAAE,OAAO,EN2T1B,GAAO;;AM1ThC,sBAAsC;EAAE,OAAO,ENsM1B,GAAO;;AMrM5B,qBAAqC;EAAE,OAAO,EN6D1B,GAAO;;AM5D3B,yBAAyC;EAAE,OAAO,ENob1B,GAAO;;AMnb/B,yBAAyC;EAAE,OAAO,ENkB1B,GAAO;;AMjB/B,cAA8B;EAAE,OAAO,EN/C1B,GAAO;;AMgDpB,qBAAqC;EAAE,OAAO,EN3D1B,GAAO;;AM4D3B,sBAAsC;EAAE,OAAO,EN3D1B,GAAO;;AM4D5B,mBAAmC;EAAE,OAAO,EN3D1B,GAAO;;AM4DzB,qBAAqC;EAAE,OAAO,EN/D1B,GAAO;;AMgE3B;gBACgC;EAAE,OAAO,ENqV1B,GAAO;;AMpVtB,iBAAiC;EAAE,OAAO,ENuF1B,GAAO;;AMtFvB,mBAAmC;EAAE,OAAO,EN4C1B,GAAO;;AM3CzB,eAA+B;EAAE,OAAO,ENmS1B,GAAO;;AMlSrB,gBAAgC;EAAE,OAAO,ENsP1B,GAAO;;AMrPtB,mBAAmC;EAAE,OAAO,EN9D1B,GAAO;;AM+DzB,6BAA6C;EAAE,OAAO,ENgF1B,GAAO;;AM/EnC,eAA+B;EAAE,OAAO,EN+I1B,GAAO;;AM9IrB,eAA+B;EAAE,OAAO,ENoM1B,GAAO;;AMnMrB,eAA+B;EAAE,OAAO,ENmH1B,GAAO;;AMlHrB,cAA8B;EAAE,OAAO,ENiF1B,GAAO;;AMhFpB,oBAAoC;EAAE,OAAO,ENiF1B,GAAO;;AMhF1B;+BAC+C;EAAE,OAAO,EN0E1B,GAAO;;AMzErC,gBAAgC;EAAE,OAAO,ENmR1B,GAAO;;AMlRtB,mBAAmC;EAAE,OAAO,EN/B1B,GAAO;;AMgCzB,iBAAiC;EAAE,OAAO,ENoS1B,GAAO;;AMnSvB,kBAAkC;EAAE,OAAO,ENwB1B,GAAO;;AMvBxB,iBAAiC;EAAE,OAAO,ENqN1B,GAAO;;AMpNvB,qBAAqC;EAAE,OAAO,ENE1B,GAAO;;AMD3B,uBAAuC;EAAE,OAAO,ENF1B,GAAO;;AMG7B,kBAAkC;EAAE,OAAO,EN2S1B,GAAO;;AM1SxB,wBAAwC;EAAE,OAAO,ENyU1B,GAAO;;AMxU9B,iBAAiC;EAAE,OAAO,EN8G1B,GAAO;;AM7GvB,sBAAsC;EAAE,OAAO,EN+G1B,GAAO;;AM9G5B,mBAAmC;EAAE,OAAO,ENnF1B,GAAO;;AMoFzB,mBAAmC;EAAE,OAAO,ENrF1B,GAAO;;AMsFzB;oBACoC;EAAE,OAAO,EN/E1B,GAAO;;AMgF1B,yBAAyC;EAAE,OAAO,ENua1B,GAAO;;AMta/B,0BAA0C;EAAE,OAAO,ENmE1B,GAAO;;AMlEhC,uBAAuC;EAAE,OAAO,EN5C1B,GAAO;;AM6C7B,cAA8B;EAAE,OAAO,ENqK1B,GAAO;;AMpKpB;eAC+B;EAAE,OAAO,ENK1B,GAAO;;AMJrB,mBAAmC;EAAE,OAAO,ENQ1B,GAAO;;AMPzB,sBAAsC;EAAE,OAAO,ENmY1B,GAAO;;AMlY5B,wBAAwC;EAAE,OAAO,ENiY1B,GAAO;;AMhY9B,oBAAoC;EAAE,OAAO,EN2V1B,GAAO;;AM1V1B,kBAAkC;EAAE,OAAO,ENyI1B,GAAO;;AMxIxB,mBAAmC;EAAE,OAAO,ENyT1B,GAAO;;AMxTzB,0BAA0C;EAAE,OAAO,ENiL1B,GAAO;;AMhLhC,qBAAqC;EAAE,OAAO,EN0X1B,GAAO;;AMzX3B,wBAAwC;EAAE,OAAO,EN8C1B,GAAO;;AM7C9B,kBAAkC;EAAE,OAAO,ENoT1B,GAAO;;AMnTxB,iBAAiC;EAAE,OAAO,EN8Y1B,GAAO;;AM7YvB,wBAAwC;EAAE,OAAO,EN6G1B,GAAO;;AM5G9B,iBAAiC;EAAE,OAAO,EN8Z1B,GAAO;;AM7ZvB,kBAAkC;EAAE,OAAO,EN+J1B,GAAO;;AM9JxB,gBAAgC;EAAE,OAAO,ENsO1B,GAAO;;AMrOtB,mBAAmC;EAAE,OAAO,EN2U1B,GAAO;;AM1UzB,qBAAqC;EAAE,OAAO,EN/E1B,GAAO;;AMgF3B,uBAAuC;EAAE,OAAO,ENoO1B,GAAO;;AMnO7B,kBAAkC;EAAE,OAAO,EN8Y1B,GAAO;;AM7YxB;mBACmC;EAAE,OAAO,ENuC1B,GAAO;;AMtCzB,iBAAiC;EAAE,OAAO,ENiG1B,GAAO;;AMhGvB,iBAAiC;EAAE,OAAO,ENiZ1B,GAAO;;AMhZvB,sBAAsC;EAAE,OAAO,ENR1B,GAAO;;AMS5B,cAA8B;EAAE,OAAO,EN4Q1B,GAAO;;AM3QpB,gBAAgC;EAAE,OAAO,ENgH1B,GAAO;;AM/GtB,mBAAmC;EAAE,OAAO,ENnF1B,GAAO;;AMoFzB,eAA+B;EAAE,OAAO,ENzG1B,GAAO;;AM0GrB,sBAAsC;EAAE,OAAO,ENzD1B,GAAO;;AM0D5B,uBAAuC;EAAE,OAAO,EN0G1B,GAAO;;AMzG7B,sBAAsC;EAAE,OAAO,ENwG1B,GAAO;;AMvG5B,oBAAoC;EAAE,OAAO,ENyG1B,GAAO;;AMxG1B,sBAAsC;EAAE,OAAO,ENqG1B,GAAO;;AMpG5B,4BAA4C;EAAE,OAAO,EN5I1B,GAAO;;AM6IlC,6BAA6C;EAAE,OAAO,ENxI1B,GAAO;;AMyInC,0BAA0C;EAAE,OAAO,ENxI1B,GAAO;;AMyIhC,4BAA4C;EAAE,OAAO,ENhJ1B,GAAO;;AMiJlC,gBAAgC;EAAE,OAAO,ENsF1B,GAAO;;AMrFtB,iBAAiC;EAAE,OAAO,ENia1B,GAAO;;AMhavB,gBAAgC;EAAE,OAAO,ENiV1B,GAAO;;AMhVtB,iBAAiC;EAAE,OAAO,ENgD1B,GAAO;;AM/CvB,oBAAoC;EAAE,OAAO,ENvG1B,GAAO;;AMwG1B,qBAAqC;EAAE,OAAO,ENzI1B,GAAO;;AM0I3B;gBACgC;EAAE,OAAO,ENqY1B,GAAO;;AMpYtB;eAC+B;EAAE,OAAO,ENuI1B,GAAO;;AMtIrB,gBAAgC;EAAE,OAAO,ENpD1B,GAAO;;AMqDtB,gBAAgC;EAAE,OAAO,EN+C1B,GAAO;;AM9CtB;mBACmC;EAAE,OAAO,ENwP1B,GAAO;;AMvPzB;kBACkC;EAAE,OAAO,ENkC1B,GAAO;;AMjCxB,oBAAoC;EAAE,OAAO,ENsL1B,GAAO;;AMrL1B;mBACmC;EAAE,OAAO,EN0C1B,GAAO;;AMzCzB,iBAAiC;EAAE,OAAO,ENiS1B,GAAO;;AMhSvB;;eAE+B;EAAE,OAAO,EN9I1B,GAAO;;AM+IrB,kBAAkC;EAAE,OAAO,ENgI1B,GAAO;;AM/HxB,kBAAkC;EAAE,OAAO,EN8H1B,GAAO;;AM7HxB,wBAAwC;EAAE,OAAO,EN4S1B,GAAO;;AM3S9B,oBAAoC;EAAE,OAAO,ENoW1B,GAAO;;AMnW1B,gBAAgC;EAAE,OAAO,ENmT1B,GAAO;;AMlTtB,gBAAgC;EAAE,OAAO,ENkI1B,GAAO;;AMjItB,gBAAgC;EAAE,OAAO,ENuV1B,GAAO;;AMtVtB,oBAAoC;EAAE,OAAO,ENwL1B,GAAO;;AMvL1B,2BAA2C;EAAE,OAAO,ENyL1B,GAAO;;AMxLjC,6BAA6C;EAAE,OAAO,ENyD1B,GAAO;;AMxDnC,sBAAsC;EAAE,OAAO,ENuD1B,GAAO;;AMtD5B,gBAAgC;EAAE,OAAO,ENsJ1B,GAAO;;AMrJtB,qBAAqC;EAAE,OAAO,ENtH1B,GAAO;;AMuH3B,mBAAmC;EAAE,OAAO,ENhH1B,GAAO;;AMiHzB,qBAAqC;EAAE,OAAO,ENvH1B,GAAO;;AMwH3B,sBAAsC;EAAE,OAAO,ENvH1B,GAAO;;AMwH5B,kBAAkC;EAAE,OAAO,ENvE1B,GAAO;;AMwExB;eAC+B;EAAE,OAAO,EN2P1B,GAAO;;AM1PrB;oBACoC;EAAE,OAAO,EN+P1B,GAAO;;AM9P1B;mBACmC;EAAE,OAAO,EN4P1B,GAAO;;AM3PzB,mBAAmC;EAAE,OAAO,ENxC1B,GAAO;;AMyCzB,mBAAmC;EAAE,OAAO,ENkG1B,GAAO;;AMjGzB;eAC+B;EAAE,OAAO,EN8U1B,GAAO;;AM7UrB;gBACgC;EAAE,OAAO,ENqB1B,GAAO;;AMpBtB;qBACqC;EAAE,OAAO,EN2R1B,GAAO;;AM1R3B,oBAAoC;EAAE,OAAO,ENpF1B,GAAO;;AMqF1B,qBAAqC;EAAE,OAAO,ENnF1B,GAAO;;AMoF3B;eAC+B;EAAE,OAAO,ENjK1B,GAAO;;AMkKrB,kBAAkC;EAAE,OAAO,ENkO1B,GAAO;;AMjOxB,mBAAmC;EAAE,OAAO,ENkU1B,GAAO;;AMjUzB;oBACoC;EAAE,OAAO,EN1G1B,GAAO;;AM2G1B,sBAAsC;EAAE,OAAO,ENgF1B,GAAO;;AM/E5B,mBAAmC;EAAE,OAAO,ENnD1B,GAAO;;AMoDzB,yBAAyC;EAAE,OAAO,ENzG1B,GAAO;;AM0G/B,uBAAuC;EAAE,OAAO,ENzG1B,GAAO;;AM0G7B,kBAAkC;EAAE,OAAO,ENsU1B,GAAO;;AMrUxB,sBAAsC;EAAE,OAAO,EN+P1B,GAAO;;AM9P5B,mBAAmC;EAAE,OAAO,ENsQ1B,GAAO;;AMrQzB,iBAAiC;EAAE,OAAO,ENvL1B,GAAO;;AMwLvB,iBAAiC;EAAE,OAAO,ENzG1B,GAAO;;AM0GvB,kBAAkC;EAAE,OAAO,ENtF1B,GAAO;;AMuFxB,sBAAsC;EAAE,OAAO,EN3B1B,GAAO;;AM4B5B,qBAAqC;EAAE,OAAO,ENxK1B,GAAO;;AMyK3B,qBAAqC;EAAE,OAAO,ENkC1B,GAAO;;AMjC3B,oBAAoC;EAAE,OAAO,EN3O1B,GAAO;;AM4O1B,iBAAiC;EAAE,OAAO,ENiG1B,GAAO;;AMhGvB,sBAAsC;EAAE,OAAO,EN/C1B,GAAO;;AMgD5B,eAA+B;EAAE,OAAO,ENpM1B,GAAO;;AMqMrB,mBAAmC;EAAE,OAAO,ENe1B,GAAO;;AMdzB,sBAAsC;EAAE,OAAO,ENgJ1B,GAAO;;AM/I5B,4BAA4C;EAAE,OAAO,EN5O1B,GAAO;;AM6OlC,6BAA6C;EAAE,OAAO,EN5O1B,GAAO;;AM6OnC,0BAA0C;EAAE,OAAO,EN5O1B,GAAO;;AM6OhC,4BAA4C;EAAE,OAAO,ENhP1B,GAAO;;AMiPlC,qBAAqC;EAAE,OAAO,EN5O1B,GAAO;;AM6O3B,sBAAsC;EAAE,OAAO,EN5O1B,GAAO;;AM6O5B,mBAAmC;EAAE,OAAO,EN5O1B,GAAO;;AM6OzB,qBAAqC;EAAE,OAAO,ENhP1B,GAAO;;AMiP3B,kBAAkC;EAAE,OAAO,ENlG1B,GAAO;;AMmGxB,iBAAiC;EAAE,OAAO,ENuC1B,GAAO;;AMtCvB,iBAAiC;EAAE,OAAO,ENoP1B,GAAO;;AMnPvB;iBACiC;EAAE,OAAO,ENyF1B,GAAO;;AMxFvB,mBAAmC;EAAE,OAAO,EN9I1B,GAAO;;AM+IzB,qBAAqC;EAAE,OAAO,EN0I1B,GAAO;;AMzI3B,sBAAsC;EAAE,OAAO,EN0I1B,GAAO;;AMzI5B,kBAAkC;EAAE,OAAO,ENgN1B,GAAO;;AM/MxB,iBAAiC;EAAE,OAAO,ENnJ1B,GAAO;;AMoJvB;gBACgC;EAAE,OAAO,ENkJ1B,GAAO;;AMjJtB,qBAAqC;EAAE,OAAO,ENnB1B,GAAO;;AMoB3B,mBAAmC;EAAE,OAAO,ENxC1B,GAAO;;AMyCzB,wBAAwC;EAAE,OAAO,ENvC1B,GAAO;;AMwC9B,kBAAkC;EAAE,OAAO,EN0L1B,GAAO;;AMzLxB,kBAAkC;EAAE,OAAO,ENpC1B,GAAO;;AMqCxB,gBAAgC;EAAE,OAAO,ENoE1B,GAAO;;AMnEtB,kBAAkC;EAAE,OAAO,ENpC1B,GAAO;;AMqCxB,qBAAqC;EAAE,OAAO,ENkB1B,GAAO;;AMjB3B,iBAAiC;EAAE,OAAO,ENrD1B,GAAO;;AMsDvB,yBAAyC;EAAE,OAAO,ENvD1B,GAAO;;AMwD/B,mBAAmC;EAAE,OAAO,ENuO1B,GAAO;;AMtOzB,eAA+B;EAAE,OAAO,ENtJ1B,GAAO;;AMuJrB;oBACoC;EAAE,OAAO,ENqI1B,GAAO;;AMpI1B;;sBAEsC;EAAE,OAAO,ENuM1B,GAAO;;AMtM5B,yBAAyC;EAAE,OAAO,ENkC1B,GAAO;;AMjC/B,eAA+B;EAAE,OAAO,EN5I1B,GAAO;;AM6IrB,oBAAoC;EAAE,OAAO,EN7J1B,GAAO;;AM8J1B;uBACuC;EAAE,OAAO,EN1L1B,GAAO;;AM2L7B,mBAAmC;EAAE,OAAO,EN4G1B,GAAO;;AM3GzB,eAA+B;EAAE,OAAO,ENT1B,GAAO;;AMUrB,sBAAsC;EAAE,OAAO,ENhH1B,GAAO;;AMiH5B,sBAAsC;EAAE,OAAO,EN8M1B,GAAO;;AM7M5B,oBAAoC;EAAE,OAAO,ENyM1B,GAAO;;AMxM1B,iBAAiC;EAAE,OAAO,ENvH1B,GAAO;;AMwHvB,uBAAuC;EAAE,OAAO,ENmG1B,GAAO;;AMlG7B,qBAAqC;EAAE,OAAO,EN8C1B,GAAO;;AM7C3B,2BAA2C;EAAE,OAAO,EN8C1B,GAAO;;AM7CjC,iBAAiC;EAAE,OAAO,ENgJ1B,GAAO;;AM/IvB,qBAAqC;EAAE,OAAO,EN5N1B,GAAO;;AM6N3B,4BAA4C;EAAE,OAAO,ENjF1B,GAAO;;AMkFlC,iBAAiC;EAAE,OAAO,ENoH1B,GAAO;;AMnHvB,iBAAiC;EAAE,OAAO,ENkC1B,GAAO;;AMjCvB,8BAA8C;EAAE,OAAO,ENlM1B,GAAO;;AMmMpC,+BAA+C;EAAE,OAAO,ENlM1B,GAAO;;AMmMrC,4BAA4C;EAAE,OAAO,ENlM1B,GAAO;;AMmMlC,8BAA8C;EAAE,OAAO,ENtM1B,GAAO;;AMuMpC,gBAAgC;EAAE,OAAO,EN/B1B,GAAO;;AMgCtB,eAA+B;EAAE,OAAO,ENjK1B,GAAO;;AMkKrB,iBAAiC;EAAE,OAAO,EN9S1B,GAAO;;AM+SvB,qBAAqC;EAAE,OAAO,ENmP1B,GAAO;;AMlP3B,mBAAmC;EAAE,OAAO,EN9O1B,GAAO;;AM+OzB,qBAAqC;EAAE,OAAO,EN/I1B,GAAO;;AMgJ3B,qBAAqC;EAAE,OAAO,EN/I1B,GAAO;;AMgJ3B,qBAAqC;EAAE,OAAO,EN4G1B,GAAO;;AM3G3B,sBAAsC;EAAE,OAAO,ENsE1B,GAAO;;AMrE5B,iBAAiC;EAAE,OAAO,EN2M1B,GAAO;;AM1MvB,uBAAuC;EAAE,OAAO,EN6B1B,GAAO;;AM5B7B,yBAAyC;EAAE,OAAO,EN6B1B,GAAO;;AM5B/B,mBAAmC;EAAE,OAAO,ENhB1B,GAAO;;AMiBzB,qBAAqC;EAAE,OAAO,ENlB1B,GAAO;;AMmB3B,uBAAuC;EAAE,OAAO,ENvN1B,GAAO;;AMwN7B,wBAAwC;EAAE,OAAO,ENiD1B,GAAO;;AMhD9B,+BAA+C;EAAE,OAAO,EN3I1B,GAAO;;AM4IrC,uBAAuC;EAAE,OAAO,ENkH1B,GAAO;;AMjH7B,kBAAkC;EAAE,OAAO,EN1L1B,GAAO;;AM2LxB;8BAC8C;EAAE,OAAO,ENjP1B,GAAO;;AMkPpC;4BAC4C;EAAE,OAAO,ENhP1B,GAAO;;AMiPlC;+BAC+C;EAAE,OAAO,ENnP1B,GAAO;;AMoPrC;cAC8B;EAAE,OAAO,EN7J1B,GAAO;;AM8JpB,cAA8B;EAAE,OAAO,EN/F1B,GAAO;;AMgGpB;cAC8B;EAAE,OAAO,EN4N1B,GAAO;;AM3NpB;cAC8B;EAAE,OAAO,ENvD1B,GAAO;;AMwDpB;;;cAG8B;EAAE,OAAO,ENrD1B,GAAO;;AMsDpB;;cAE8B;EAAE,OAAO,EN8E1B,GAAO;;AM7EpB;cAC8B;EAAE,OAAO,ENtD1B,GAAO;;AMuDpB;cAC8B;EAAE,OAAO,ENzR1B,GAAO;;AM0RpB,eAA+B;EAAE,OAAO,ENzJ1B,GAAO;;AM0JrB,oBAAoC;EAAE,OAAO,EN7I1B,GAAO;;AM8I1B,yBAAyC;EAAE,OAAO,EN2G1B,GAAO;;AM1G/B,0BAA0C;EAAE,OAAO,EN2G1B,GAAO;;AM1GhC,0BAA0C;EAAE,OAAO,EN2G1B,GAAO;;AM1GhC,2BAA2C;EAAE,OAAO,EN2G1B,GAAO;;AM1GjC,2BAA2C;EAAE,OAAO,EN8G1B,GAAO;;AM7GjC,4BAA4C;EAAE,OAAO,EN8G1B,GAAO;;AM7GlC,oBAAoC;EAAE,OAAO,ENgK1B,GAAO;;AM/J1B,sBAAsC;EAAE,OAAO,EN4J1B,GAAO;;AM3J5B,yBAAyC;EAAE,OAAO,ENwO1B,GAAO;;AMvO/B,kBAAkC;EAAE,OAAO,ENqO1B,GAAO;;AMpOxB,eAA+B;EAAE,OAAO,EN+N1B,GAAO;;AM9NrB,sBAAsC;EAAE,OAAO,EN+N1B,GAAO;;AM9N5B,uBAAuC;EAAE,OAAO,ENmO1B,GAAO;;AMlO7B,kBAAkC;EAAE,OAAO,ENxM1B,GAAO;;AMyMxB,yBAAyC;EAAE,OAAO,EN+G1B,GAAO;;AM9G/B,oBAAoC;EAAE,OAAO,ENnF1B,GAAO;;AMoF1B,iBAAiC;EAAE,OAAO,EN/I1B,GAAO;;AMgJvB,cAA8B;EAAE,OAAO,ENhX1B,GAAO;;AMiXpB,oBAAoC;EAAE,OAAO,ENxT1B,GAAO;;AMyT1B,2BAA2C;EAAE,OAAO,ENxT1B,GAAO;;AMyTjC,iBAAiC;EAAE,OAAO,ENyK1B,GAAO;;AMxKvB,wBAAwC;EAAE,OAAO,ENyK1B,GAAO;;AMxK9B,0BAA0C;EAAE,OAAO,ENtD1B,GAAO;;AMuDhC,wBAAwC;EAAE,OAAO,ENpD1B,GAAO;;AMqD9B,0BAA0C;EAAE,OAAO,ENvD1B,GAAO;;AMwDhC,2BAA2C;EAAE,OAAO,ENvD1B,GAAO;;AMwDjC,gBAAgC;EAAE,OAAO,ENxW1B,GAAO;;AMyWtB,kBAAkC;EAAE,OAAO,EN0M1B,GAAO;;AMzMxB,kBAAkC;EAAE,OAAO,ENpX1B,GAAO;;AMqXxB,gBAAgC;EAAE,OAAO,ENpE1B,GAAO;;AMqEtB,mBAAmC;EAAE,OAAO,EN1N1B,GAAO;;AM2NzB,gBAAgC;EAAE,OAAO,ENqE1B,GAAO;;AMpEtB,qBAAqC;EAAE,OAAO,ENtJ1B,GAAO;;AMuJ3B,iBAAiC;EAAE,OAAO,ENuJ1B,GAAO;;AMtJvB,iBAAiC;EAAE,OAAO,EN/L1B,GAAO;;AMgMvB,eAA+B;EAAE,OAAO,EN1D1B,GAAO;;AM2DrB;mBACmC;EAAE,OAAO,ENnI1B,GAAO;;AMoIzB,gBAAgC;EAAE,OAAO,EN2G1B,GAAO;;AM1GtB,iBAAiC;EAAE,OAAO,ENxC1B,GAAO;;AMyCvB,kBAAkC;EAAE,OAAO,ENrX1B,GAAO;;AMsXxB,cAA8B;EAAE,OAAO,ENpU1B,GAAO;;AMqUpB,aAA6B;EAAE,OAAO,ENgL1B,GAAO;;AM/KnB,gBAAgC;EAAE,OAAO,ENqL1B,GAAO;;AMpLtB,iBAAiC;EAAE,OAAO,ENa1B,GAAO;;AMZvB,oBAAoC;EAAE,OAAO,ENrC1B,GAAO;;AMsC1B,yBAAyC;EAAE,OAAO,EN8E1B,GAAO;;AM7E/B,+BAA+C;EAAE,OAAO,ENtX1B,GAAO;;AMuXrC,8BAA8C;EAAE,OAAO,ENxX1B,GAAO;;AMyXpC;8BAC8C;EAAE,OAAO,EN3T1B,GAAO;;AM4TpC,uBAAuC;EAAE,OAAO,ENjP1B,GAAO;;AMkP7B,qBAAqC;EAAE,OAAO,EN+K1B,GAAO;;AM9K3B,uBAAuC;EAAE,OAAO,ENmK1B,GAAO;;AMlK7B;cAC8B;EAAE,OAAO,ENoI1B,GAAO;;AMnIpB,wBAAwC;EAAE,OAAO,ENjB1B,GAAO;;AMkB9B,wBAAwC;EAAE,OAAO,EN6D1B,GAAO;;AM5D9B,gBAAgC;EAAE,OAAO,EN2C1B,GAAO;;AM1CtB,0BAA0C;EAAE,OAAO,EN7O1B,GAAO;;AM8OhC,oBAAoC;EAAE,OAAO,EN2K1B,GAAO;;AM1K1B,iBAAiC;EAAE,OAAO,ENvD1B,GAAO;;AMwDvB;;qBAEqC;EAAE,OAAO,ENsI1B,GAAO;;AMrI3B;yBACyC;EAAE,OAAO,ENjK1B,GAAO;;AMkK/B,gBAAgC;EAAE,OAAO,ENwK1B,GAAO;;AMvKtB,iBAAiC;EAAE,OAAO,ENvK1B,GAAO;;AMwKvB,iBAAiC;EAAE,OAAO,ENhB1B,GAAO;;AMiBvB,wBAAwC;EAAE,OAAO,ENhB1B,GAAO;;AMiB9B,6BAA6C;EAAE,OAAO,ENsE1B,GAAO;;AMrEnC,sBAAsC;EAAE,OAAO,ENoE1B,GAAO;;AMnE5B,oBAAoC;EAAE,OAAO,EN7Q1B,GAAO;;AM8Q1B,eAA+B;EAAE,OAAO,EN1Q1B,GAAO;;AM2QrB,qBAAqC;EAAE,OAAO,ENjD1B,GAAO;;AMkD3B,yBAAyC;EAAE,OAAO,ENjD1B,GAAO;;AMkD/B,iBAAiC;EAAE,OAAO,ENvQ1B,GAAO;;AMwQvB,iBAAiC;EAAE,OAAO,EN9I1B,GAAO;;AM+IvB,mBAAmC;EAAE,OAAO,ENzI1B,GAAO;;AM0IzB,cAA8B;EAAE,OAAO,EN9O1B,GAAO;;AM+OpB,mBAAmC;EAAE,OAAO,EN3W1B,GAAO;;AM4WzB,gBAAgC;EAAE,OAAO,EN9T1B,GAAO;;AM+TtB,cAA8B;EAAE,OAAO,ENnE1B,GAAO;;AMoEpB,gBAAgC;EAAE,OAAO,ENoC1B,GAAO;;AMnCtB,eAA+B;EAAE,OAAO,ENjS1B,GAAO;;AMkSrB,gBAAgC;EAAE,OAAO,ENjS1B,GAAO;;AMkStB,kBAAkC;EAAE,OAAO,ENtY1B,GAAO;;AMuYxB,yBAAyC;EAAE,OAAO,ENtY1B,GAAO;;AMuY/B,gBAAgC;EAAE,OAAO,EN2C1B,GAAO;;AM1CtB,uBAAuC;EAAE,OAAO,EN2C1B,GAAO;;AM1C7B,kBAAkC;EAAE,OAAO,ENvC1B,GAAO;;AMwCxB;cAC8B;EAAE,OAAO,EN3W1B,GAAO;;AM4WpB;eAC+B;EAAE,OAAO,EN2D1B,GAAO;;AM1DrB,eAA+B;EAAE,OAAO,ENuF1B,GAAO;;AMtFrB,kBAAkC;EAAE,OAAO,ENwB1B,GAAO;;AMvBxB,qBAAqC;EAAE,OAAO,ENpS1B,GAAO;;AMqS3B,qBAAqC;EAAE,OAAO,ENkB1B,GAAO;;AMjB3B,mBAAmC;EAAE,OAAO,EN1S1B,GAAO;;AM2SzB,qBAAqC;EAAE,OAAO,ENxP1B,GAAO;;AMyP3B,sBAAsC;EAAE,OAAO,ENjP1B,GAAO;;AMkP5B,uBAAuC;EAAE,OAAO,EN9P1B,GAAO;;AM+P7B,4BAA4C;EAAE,OAAO,ENxP1B,GAAO;;AMyPlC;;uBAEuC;EAAE,OAAO,ENjQ1B,GAAO;;AMkQ7B;yBACyC;EAAE,OAAO,ENvQ1B,GAAO;;AMwQ/B;uBACuC;EAAE,OAAO,ENxQ1B,GAAO;;AMyQ7B;uBACuC;EAAE,OAAO,EN7P1B,GAAO;;AM8P7B,sBAAsC;EAAE,OAAO,EN1Q1B,GAAO;;AM2Q5B,eAA+B;EAAE,OAAO,ENsG1B,GAAO;;AMrGrB,kBAAkC;EAAE,OAAO,ENlV1B,GAAO;;AMmVxB,mBAAmC;EAAE,OAAO,ENnL1B,GAAO;;AMoLzB;;;;oBAIoC;EAAE,OAAO,ENxK1B,GAAO;;AMyK1B,yBAAyC;EAAE,OAAO,ENpW1B,GAAO;;AMqW/B;gBACgC;EAAE,OAAO,EN1E1B,GAAO;;AM2EtB;iBACiC;EAAE,OAAO,ENpT1B,GAAO;;AMqTvB,qBAAqC;EAAE,OAAO,EN1O1B,GAAO;;AM2O3B,cAA8B;EAAE,OAAO,EN5O1B,GAAO;;AM6OpB,sBAAsC;EAAE,OAAO,EN7N1B,GAAO;;AM8N5B,wBAAwC;EAAE,OAAO,ENwB1B,GAAO;;AMvB9B,aAA6B;EAAE,OAAO,ENzF1B,GAAO;;AM0FnB;iBACiC;EAAE,OAAO,EN2F1B,GAAO;;AM1FvB;sBACsC;EAAE,OAAO,EN9H1B,GAAO;;AM+H5B;wBACwC;EAAE,OAAO,EN/H1B,GAAO;;AMgI9B,kBAAkC;EAAE,OAAO,EN3N1B,GAAO;;AM4NxB;sBACsC;EAAE,OAAO,ENrX1B,GAAO;;AMsX5B,iBAAiC;EAAE,OAAO,ENnO1B,GAAO;;AMoOvB,oBAAoC;EAAE,OAAO,ENlI1B,GAAO;;AMmI1B,kBAAkC;EAAE,OAAO,EN1C1B,GAAO;;AM2CxB,oBAAoC;EAAE,OAAO,EN7D1B,GAAO;;AM8D1B,2BAA2C;EAAE,OAAO,EN7D1B,GAAO;;AM8DjC,eAA+B;EAAE,OAAO,ENpb1B,GAAO;;AMqbrB;mBACmC;EAAE,OAAO,ENzQ1B,GAAO;;AM0QzB,cAA8B;EAAE,OAAO,ENsC1B,GAAO;;AMrCpB,qBAAqC;EAAE,OAAO,EN/b1B,GAAO;;AMgc3B,eAA+B;EAAE,OAAO,ENrH1B,GAAO;;AMsHrB,qBAAqC;EAAE,OAAO,ENlD1B,GAAO;;AMmD3B,iBAAiC;EAAE,OAAO,ENsC1B,GAAO;;AMrCvB,eAA+B;EAAE,OAAO,ENiF1B,GAAO;;AMhFrB,sBAAsC;EAAE,OAAO,ENvJ1B,GAAO;;AMwJ5B,eAA+B;EAAE,OAAO,ENuE1B,GAAO;;AMtErB,qBAAqC;EAAE,OAAO,ENjb1B,GAAO;;AMkb3B,iBAAiC;EAAE,OAAO,EN9I1B,GAAO;;AM+IvB,wBAAwC;EAAE,OAAO,ENhQ1B,GAAO;;AMiQ9B,kBAAkC;EAAE,OAAO,EN9Z1B,GAAO;;AM+ZxB,wBAAwC;EAAE,OAAO,ENla1B,GAAO;;AMma9B,sBAAsC;EAAE,OAAO,ENpa1B,GAAO;;AMqa5B,kBAAkC;EAAE,OAAO,ENta1B,GAAO;;AMuaxB,oBAAoC;EAAE,OAAO,ENpa1B,GAAO;;AMqa1B,oBAAoC;EAAE,OAAO,ENpa1B,GAAO;;AMqa1B,qBAAqC;EAAE,OAAO,ENld1B,GAAO;;AMmd3B,uBAAuC;EAAE,OAAO,ENld1B,GAAO;;AMmd7B,gBAAgC;EAAE,OAAO,ENY1B,GAAO;;AMXtB,oBAAoC;EAAE,OAAO,EN3X1B,GAAO;;AM4X1B,aAA6B;EAAE,OAAO,ENre1B,GAAO;;AMsenB,qBAAqC;EAAE,OAAO,ENjV1B,GAAO;;AMkV3B,sBAAsC;EAAE,OAAO,ENpK1B,GAAO;;AMqK5B,wBAAwC;EAAE,OAAO,ENrd1B,GAAO;;AMsd9B,qBAAqC;EAAE,OAAO,EN3f1B,GAAO;;AM4f3B,oBAAoC;EAAE,OAAO,ENvJ1B,GAAO;;AMwJ1B,qBAAqC;EAAE,OAAO,EN5N1B,GAAO;;AM6N3B,iBAAiC;EAAE,OAAO,EN1O1B,GAAO;;AM2OvB,wBAAwC;EAAE,OAAO,EN1O1B,GAAO;;AM2O9B,qBAAqC;EAAE,OAAO,ENN1B,GAAO;;AMO3B,oBAAoC;EAAE,OAAO,ENN1B,GAAO;;AMO1B,kBAAkC;EAAE,OAAO,EN/d1B,GAAO;;AMgexB,cAA8B;EAAE,OAAO,EN7c1B,GAAO;;AM8cpB,kBAAkC;EAAE,OAAO,EN1P1B,GAAO;;AM2PxB,oBAAoC;EAAE,OAAO,ENhhB1B,GAAO;;AMihB1B,aAA6B;EAAE,OAAO,EN7b1B,GAAO;;AM8bnB;;cAE8B;EAAE,OAAO,ENxQ1B,GAAO;;AMyQpB,mBAAmC;EAAE,OAAO,EN7M1B,GAAO;;AM8MzB,qBAAqC;EAAE,OAAO,ENpd1B,GAAO;;AMqd3B,yBAAyC;EAAE,OAAO,ENnZ1B,GAAO;;AMoZ/B,mBAAmC;EAAE,OAAO,ENxY1B,GAAO;;AMyYzB,mBAAmC;EAAE,OAAO,EN1T1B,GAAO;;AM2TzB,kBAAkC;EAAE,OAAO,ENxP1B,GAAO;;AMyPxB,iBAAiC;EAAE,OAAO,ENrH1B,GAAO;;AMsHvB,uBAAuC;EAAE,OAAO,ENzG1B,GAAO;;AM0G7B,sBAAsC;EAAE,OAAO,ENrG1B,GAAO;;AMsG5B,mBAAmC;EAAE,OAAO,ENpG1B,GAAO;;AMqGzB,oBAAoC;EAAE,OAAO,EN5c1B,GAAO;;AM6c1B,0BAA0C;EAAE,OAAO,EN9c1B,GAAO;;AM+chC,kBAAkC;EAAE,OAAO,EN3Y1B,GAAO;;AM4YxB,eAA+B;EAAE,OAAO,ENhH1B,GAAO;;AMiHrB,sBAAsC;EAAE,OAAO,ENI1B,GAAO;;AMH5B,qBAAqC;EAAE,OAAO,EN5M1B,GAAO;;AM6M3B,sBAAsC;EAAE,OAAO,ENpE1B,GAAO;;AMqE5B,oBAAoC;EAAE,OAAO,ENhS1B,GAAO;;AMiS1B,gBAAgC;EAAE,OAAO,ENG1B,GAAO;;AMFtB,eAA+B;EAAE,OAAO,ENtO1B,GAAO;;AMuOrB,kBAAkC;EAAE,OAAO,EN7N1B,GAAO;;AM8NxB,sBAAsC;EAAE,OAAO,ENhC1B,GAAO;;AMiC5B,0BAA0C;EAAE,OAAO,ENhC1B,GAAO;;AMiChC,uBAAuC;EAAE,OAAO,END1B,GAAO;;AME7B,sBAAsC;EAAE,OAAO,EN1O1B,GAAO;;AM2O5B,qBAAqC;EAAE,OAAO,ENF1B,GAAO;;AMG3B,sBAAsC;EAAE,OAAO,EN3O1B,GAAO;;AM4O5B,wBAAwC;EAAE,OAAO,EN1O1B,GAAO;;AM2O9B,wBAAwC;EAAE,OAAO,EN5O1B,GAAO;;AM6O9B,iBAAiC;EAAE,OAAO,ENvN1B,GAAO;;AMwNvB,4BAA4C;EAAE,OAAO,EN9X1B,GAAO;;AM+XlC,sBAAsC;EAAE,OAAO,ENhM1B,GAAO;;AMiM5B,mBAAmC;EAAE,OAAO,ENI1B,GAAO;;AMHzB,iBAAiC;EAAE,OAAO,EN7I1B,GAAO;;AM8IvB,oBAAoC;EAAE,OAAO,ENjB1B,GAAO;;AMkB1B,qBAAqC;EAAE,OAAO,ENhB1B,GAAO;;AMiB3B;cAC8B;EAAE,OAAO,ENphB1B,GAAO;;AMqhBpB,kBAAkC;EAAE,OAAO,ENd1B,GAAO;;AMexB,gBAAgC;EAAE,OAAO,ENnD1B,GAAO;;AMoDtB,iBAAiC;EAAE,OAAO,ENvF1B,GAAO;;AMwFvB,iBAAiC;EAAE,OAAO,ENrP1B,GAAO", +"sources": ["../scss/_path.scss","../scss/_core.scss","../scss/_larger.scss","../scss/_fixed-width.scss","../scss/_list.scss","../scss/_variables.scss","../scss/_bordered-pulled.scss","../scss/_animated.scss","../scss/_rotated-flipped.scss","../scss/_mixins.scss","../scss/_stacked.scss","../scss/_icons.scss"], +"names": [], +"file": "font-awesome.css" +} diff --git a/lib/font-awesome/css/font-awesome.min.css b/lib/font-awesome/css/font-awesome.min.css index 5578ea5d..540440ce 100644 --- a/lib/font-awesome/css/font-awesome.min.css +++ b/lib/font-awesome/css/font-awesome.min.css @@ -1,4 +1,4 @@ -/*! - * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome - * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) - */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-resistance:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-y-combinator-square:before,.fa-yc-square:before,.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-intersex:before,.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-genderless:before{content:"\f22d"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-hotel:before,.fa-bed:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"}.fa-yc:before,.fa-y-combinator:before{content:"\f23b"}.fa-optin-monster:before{content:"\f23c"}.fa-opencart:before{content:"\f23d"}.fa-expeditedssl:before{content:"\f23e"}.fa-battery-4:before,.fa-battery:before,.fa-battery-full:before{content:"\f240"}.fa-battery-3:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-battery-2:before,.fa-battery-half:before{content:"\f242"}.fa-battery-1:before,.fa-battery-quarter:before{content:"\f243"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-mouse-pointer:before{content:"\f245"}.fa-i-cursor:before{content:"\f246"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-sticky-note:before{content:"\f249"}.fa-sticky-note-o:before{content:"\f24a"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-diners-club:before{content:"\f24c"}.fa-clone:before{content:"\f24d"}.fa-balance-scale:before{content:"\f24e"}.fa-hourglass-o:before{content:"\f250"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-hourglass:before{content:"\f254"}.fa-hand-grab-o:before,.fa-hand-rock-o:before{content:"\f255"}.fa-hand-stop-o:before,.fa-hand-paper-o:before{content:"\f256"}.fa-hand-scissors-o:before{content:"\f257"}.fa-hand-lizard-o:before{content:"\f258"}.fa-hand-spock-o:before{content:"\f259"}.fa-hand-pointer-o:before{content:"\f25a"}.fa-hand-peace-o:before{content:"\f25b"}.fa-trademark:before{content:"\f25c"}.fa-registered:before{content:"\f25d"}.fa-creative-commons:before{content:"\f25e"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-tripadvisor:before{content:"\f262"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-get-pocket:before{content:"\f265"}.fa-wikipedia-w:before{content:"\f266"}.fa-safari:before{content:"\f267"}.fa-chrome:before{content:"\f268"}.fa-firefox:before{content:"\f269"}.fa-opera:before{content:"\f26a"}.fa-internet-explorer:before{content:"\f26b"}.fa-tv:before,.fa-television:before{content:"\f26c"}.fa-contao:before{content:"\f26d"}.fa-500px:before{content:"\f26e"}.fa-amazon:before{content:"\f270"}.fa-calendar-plus-o:before{content:"\f271"}.fa-calendar-minus-o:before{content:"\f272"}.fa-calendar-times-o:before{content:"\f273"}.fa-calendar-check-o:before{content:"\f274"}.fa-industry:before{content:"\f275"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-map-o:before{content:"\f278"}.fa-map:before{content:"\f279"}.fa-commenting:before{content:"\f27a"}.fa-commenting-o:before{content:"\f27b"}.fa-houzz:before{content:"\f27c"}.fa-vimeo:before{content:"\f27d"}.fa-black-tie:before{content:"\f27e"}.fa-fonticons:before{content:"\f280"}.fa-reddit-alien:before{content:"\f281"}.fa-edge:before{content:"\f282"}.fa-credit-card-alt:before{content:"\f283"}.fa-codiepie:before{content:"\f284"}.fa-modx:before{content:"\f285"}.fa-fort-awesome:before{content:"\f286"}.fa-usb:before{content:"\f287"}.fa-product-hunt:before{content:"\f288"}.fa-mixcloud:before{content:"\f289"}.fa-scribd:before{content:"\f28a"}.fa-pause-circle:before{content:"\f28b"}.fa-pause-circle-o:before{content:"\f28c"}.fa-stop-circle:before{content:"\f28d"}.fa-stop-circle-o:before{content:"\f28e"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-hashtag:before{content:"\f292"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-percent:before{content:"\f295"}.fa-gitlab:before{content:"\f296"}.fa-wpbeginner:before{content:"\f297"}.fa-wpforms:before{content:"\f298"}.fa-envira:before{content:"\f299"}.fa-universal-access:before{content:"\f29a"}.fa-wheelchair-alt:before{content:"\f29b"}.fa-question-circle-o:before{content:"\f29c"}.fa-blind:before{content:"\f29d"}.fa-audio-description:before{content:"\f29e"}.fa-volume-control-phone:before{content:"\f2a0"}.fa-braille:before{content:"\f2a1"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asl-interpreting:before,.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-deafness:before,.fa-hard-of-hearing:before,.fa-deaf:before{content:"\f2a4"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-signing:before,.fa-sign-language:before{content:"\f2a7"}.fa-low-vision:before{content:"\f2a8"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-pied-piper:before{content:"\f2ae"}.fa-first-order:before{content:"\f2b0"}.fa-yoast:before{content:"\f2b1"}.fa-themeisle:before{content:"\f2b2"}.fa-google-plus-circle:before,.fa-google-plus-official:before{content:"\f2b3"}.fa-fa:before,.fa-font-awesome:before{content:"\f2b4"}.fa-handshake-o:before{content:"\f2b5"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-o:before{content:"\f2b7"}.fa-linode:before{content:"\f2b8"}.fa-address-book:before{content:"\f2b9"}.fa-address-book-o:before{content:"\f2ba"}.fa-vcard:before,.fa-address-card:before{content:"\f2bb"}.fa-vcard-o:before,.fa-address-card-o:before{content:"\f2bc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-circle-o:before{content:"\f2be"}.fa-user-o:before{content:"\f2c0"}.fa-id-badge:before{content:"\f2c1"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-drivers-license-o:before,.fa-id-card-o:before{content:"\f2c3"}.fa-quora:before{content:"\f2c4"}.fa-free-code-camp:before{content:"\f2c5"}.fa-telegram:before{content:"\f2c6"}.fa-thermometer-4:before,.fa-thermometer:before,.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-shower:before{content:"\f2cc"}.fa-bathtub:before,.fa-s15:before,.fa-bath:before{content:"\f2cd"}.fa-podcast:before{content:"\f2ce"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-times-rectangle:before,.fa-window-close:before{content:"\f2d3"}.fa-times-rectangle-o:before,.fa-window-close-o:before{content:"\f2d4"}.fa-bandcamp:before{content:"\f2d5"}.fa-grav:before{content:"\f2d6"}.fa-etsy:before{content:"\f2d7"}.fa-imdb:before{content:"\f2d8"}.fa-ravelry:before{content:"\f2d9"}.fa-eercast:before{content:"\f2da"}.fa-microchip:before{content:"\f2db"}.fa-snowflake-o:before{content:"\f2dc"}.fa-superpowers:before{content:"\f2dd"}.fa-wpexplorer:before{content:"\f2de"}.fa-meetup:before{content:"\f2e0"}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto} +/*! + * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome + * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) + */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-resistance:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-y-combinator-square:before,.fa-yc-square:before,.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-intersex:before,.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-genderless:before{content:"\f22d"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-hotel:before,.fa-bed:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"}.fa-yc:before,.fa-y-combinator:before{content:"\f23b"}.fa-optin-monster:before{content:"\f23c"}.fa-opencart:before{content:"\f23d"}.fa-expeditedssl:before{content:"\f23e"}.fa-battery-4:before,.fa-battery:before,.fa-battery-full:before{content:"\f240"}.fa-battery-3:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-battery-2:before,.fa-battery-half:before{content:"\f242"}.fa-battery-1:before,.fa-battery-quarter:before{content:"\f243"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-mouse-pointer:before{content:"\f245"}.fa-i-cursor:before{content:"\f246"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-sticky-note:before{content:"\f249"}.fa-sticky-note-o:before{content:"\f24a"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-diners-club:before{content:"\f24c"}.fa-clone:before{content:"\f24d"}.fa-balance-scale:before{content:"\f24e"}.fa-hourglass-o:before{content:"\f250"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-hourglass:before{content:"\f254"}.fa-hand-grab-o:before,.fa-hand-rock-o:before{content:"\f255"}.fa-hand-stop-o:before,.fa-hand-paper-o:before{content:"\f256"}.fa-hand-scissors-o:before{content:"\f257"}.fa-hand-lizard-o:before{content:"\f258"}.fa-hand-spock-o:before{content:"\f259"}.fa-hand-pointer-o:before{content:"\f25a"}.fa-hand-peace-o:before{content:"\f25b"}.fa-trademark:before{content:"\f25c"}.fa-registered:before{content:"\f25d"}.fa-creative-commons:before{content:"\f25e"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-tripadvisor:before{content:"\f262"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-get-pocket:before{content:"\f265"}.fa-wikipedia-w:before{content:"\f266"}.fa-safari:before{content:"\f267"}.fa-chrome:before{content:"\f268"}.fa-firefox:before{content:"\f269"}.fa-opera:before{content:"\f26a"}.fa-internet-explorer:before{content:"\f26b"}.fa-tv:before,.fa-television:before{content:"\f26c"}.fa-contao:before{content:"\f26d"}.fa-500px:before{content:"\f26e"}.fa-amazon:before{content:"\f270"}.fa-calendar-plus-o:before{content:"\f271"}.fa-calendar-minus-o:before{content:"\f272"}.fa-calendar-times-o:before{content:"\f273"}.fa-calendar-check-o:before{content:"\f274"}.fa-industry:before{content:"\f275"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-map-o:before{content:"\f278"}.fa-map:before{content:"\f279"}.fa-commenting:before{content:"\f27a"}.fa-commenting-o:before{content:"\f27b"}.fa-houzz:before{content:"\f27c"}.fa-vimeo:before{content:"\f27d"}.fa-black-tie:before{content:"\f27e"}.fa-fonticons:before{content:"\f280"}.fa-reddit-alien:before{content:"\f281"}.fa-edge:before{content:"\f282"}.fa-credit-card-alt:before{content:"\f283"}.fa-codiepie:before{content:"\f284"}.fa-modx:before{content:"\f285"}.fa-fort-awesome:before{content:"\f286"}.fa-usb:before{content:"\f287"}.fa-product-hunt:before{content:"\f288"}.fa-mixcloud:before{content:"\f289"}.fa-scribd:before{content:"\f28a"}.fa-pause-circle:before{content:"\f28b"}.fa-pause-circle-o:before{content:"\f28c"}.fa-stop-circle:before{content:"\f28d"}.fa-stop-circle-o:before{content:"\f28e"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-hashtag:before{content:"\f292"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-percent:before{content:"\f295"}.fa-gitlab:before{content:"\f296"}.fa-wpbeginner:before{content:"\f297"}.fa-wpforms:before{content:"\f298"}.fa-envira:before{content:"\f299"}.fa-universal-access:before{content:"\f29a"}.fa-wheelchair-alt:before{content:"\f29b"}.fa-question-circle-o:before{content:"\f29c"}.fa-blind:before{content:"\f29d"}.fa-audio-description:before{content:"\f29e"}.fa-volume-control-phone:before{content:"\f2a0"}.fa-braille:before{content:"\f2a1"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asl-interpreting:before,.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-deafness:before,.fa-hard-of-hearing:before,.fa-deaf:before{content:"\f2a4"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-signing:before,.fa-sign-language:before{content:"\f2a7"}.fa-low-vision:before{content:"\f2a8"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-pied-piper:before{content:"\f2ae"}.fa-first-order:before{content:"\f2b0"}.fa-yoast:before{content:"\f2b1"}.fa-themeisle:before{content:"\f2b2"}.fa-google-plus-circle:before,.fa-google-plus-official:before{content:"\f2b3"}.fa-fa:before,.fa-font-awesome:before{content:"\f2b4"}.fa-handshake-o:before{content:"\f2b5"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-o:before{content:"\f2b7"}.fa-linode:before{content:"\f2b8"}.fa-address-book:before{content:"\f2b9"}.fa-address-book-o:before{content:"\f2ba"}.fa-vcard:before,.fa-address-card:before{content:"\f2bb"}.fa-vcard-o:before,.fa-address-card-o:before{content:"\f2bc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-circle-o:before{content:"\f2be"}.fa-user-o:before{content:"\f2c0"}.fa-id-badge:before{content:"\f2c1"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-drivers-license-o:before,.fa-id-card-o:before{content:"\f2c3"}.fa-quora:before{content:"\f2c4"}.fa-free-code-camp:before{content:"\f2c5"}.fa-telegram:before{content:"\f2c6"}.fa-thermometer-4:before,.fa-thermometer:before,.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-shower:before{content:"\f2cc"}.fa-bathtub:before,.fa-s15:before,.fa-bath:before{content:"\f2cd"}.fa-podcast:before{content:"\f2ce"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-times-rectangle:before,.fa-window-close:before{content:"\f2d3"}.fa-times-rectangle-o:before,.fa-window-close-o:before{content:"\f2d4"}.fa-bandcamp:before{content:"\f2d5"}.fa-grav:before{content:"\f2d6"}.fa-etsy:before{content:"\f2d7"}.fa-imdb:before{content:"\f2d8"}.fa-ravelry:before{content:"\f2d9"}.fa-eercast:before{content:"\f2da"}.fa-microchip:before{content:"\f2db"}.fa-snowflake-o:before{content:"\f2dc"}.fa-superpowers:before{content:"\f2dd"}.fa-wpexplorer:before{content:"\f2de"}.fa-meetup:before{content:"\f2e0"}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto} diff --git a/lib/jquery/index.js b/lib/jquery/index.js deleted file mode 100644 index 858ffdf8..00000000 --- a/lib/jquery/index.js +++ /dev/null @@ -1,4 +0,0 @@ -/*! jQuery v2.1.3 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license */ -!function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){var c=[],d=c.slice,e=c.concat,f=c.push,g=c.indexOf,h={},i=h.toString,j=h.hasOwnProperty,k={},l=a.document,m="2.1.3",n=function(a,b){return new n.fn.init(a,b)},o=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,p=/^-ms-/,q=/-([\da-z])/gi,r=function(a,b){return b.toUpperCase()};n.fn=n.prototype={jquery:m,constructor:n,selector:"",length:0,toArray:function(){return d.call(this)},get:function(a){return null!=a?0>a?this[a+this.length]:this[a]:d.call(this)},pushStack:function(a){var b=n.merge(this.constructor(),a);return b.prevObject=this,b.context=this.context,b},each:function(a,b){return n.each(this,a,b)},map:function(a){return this.pushStack(n.map(this,function(b,c){return a.call(b,c,b)}))},slice:function(){return this.pushStack(d.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(a){var b=this.length,c=+a+(0>a?b:0);return this.pushStack(c>=0&&b>c?[this[c]]:[])},end:function(){return this.prevObject||this.constructor(null)},push:f,sort:c.sort,splice:c.splice},n.extend=n.fn.extend=function(){var a,b,c,d,e,f,g=arguments[0]||{},h=1,i=arguments.length,j=!1;for("boolean"==typeof g&&(j=g,g=arguments[h]||{},h++),"object"==typeof g||n.isFunction(g)||(g={}),h===i&&(g=this,h--);i>h;h++)if(null!=(a=arguments[h]))for(b in a)c=g[b],d=a[b],g!==d&&(j&&d&&(n.isPlainObject(d)||(e=n.isArray(d)))?(e?(e=!1,f=c&&n.isArray(c)?c:[]):f=c&&n.isPlainObject(c)?c:{},g[b]=n.extend(j,f,d)):void 0!==d&&(g[b]=d));return g},n.extend({expando:"jQuery"+(m+Math.random()).replace(/\D/g,""),isReady:!0,error:function(a){throw new Error(a)},noop:function(){},isFunction:function(a){return"function"===n.type(a)},isArray:Array.isArray,isWindow:function(a){return null!=a&&a===a.window},isNumeric:function(a){return!n.isArray(a)&&a-parseFloat(a)+1>=0},isPlainObject:function(a){return"object"!==n.type(a)||a.nodeType||n.isWindow(a)?!1:a.constructor&&!j.call(a.constructor.prototype,"isPrototypeOf")?!1:!0},isEmptyObject:function(a){var b;for(b in a)return!1;return!0},type:function(a){return null==a?a+"":"object"==typeof a||"function"==typeof a?h[i.call(a)]||"object":typeof a},globalEval:function(a){var b,c=eval;a=n.trim(a),a&&(1===a.indexOf("use strict")?(b=l.createElement("script"),b.text=a,l.head.appendChild(b).parentNode.removeChild(b)):c(a))},camelCase:function(a){return a.replace(p,"ms-").replace(q,r)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toLowerCase()===b.toLowerCase()},each:function(a,b,c){var d,e=0,f=a.length,g=s(a);if(c){if(g){for(;f>e;e++)if(d=b.apply(a[e],c),d===!1)break}else for(e in a)if(d=b.apply(a[e],c),d===!1)break}else if(g){for(;f>e;e++)if(d=b.call(a[e],e,a[e]),d===!1)break}else for(e in a)if(d=b.call(a[e],e,a[e]),d===!1)break;return a},trim:function(a){return null==a?"":(a+"").replace(o,"")},makeArray:function(a,b){var c=b||[];return null!=a&&(s(Object(a))?n.merge(c,"string"==typeof a?[a]:a):f.call(c,a)),c},inArray:function(a,b,c){return null==b?-1:g.call(b,a,c)},merge:function(a,b){for(var c=+b.length,d=0,e=a.length;c>d;d++)a[e++]=b[d];return a.length=e,a},grep:function(a,b,c){for(var d,e=[],f=0,g=a.length,h=!c;g>f;f++)d=!b(a[f],f),d!==h&&e.push(a[f]);return e},map:function(a,b,c){var d,f=0,g=a.length,h=s(a),i=[];if(h)for(;g>f;f++)d=b(a[f],f,c),null!=d&&i.push(d);else for(f in a)d=b(a[f],f,c),null!=d&&i.push(d);return e.apply([],i)},guid:1,proxy:function(a,b){var c,e,f;return"string"==typeof b&&(c=a[b],b=a,a=c),n.isFunction(a)?(e=d.call(arguments,2),f=function(){return a.apply(b||this,e.concat(d.call(arguments)))},f.guid=a.guid=a.guid||n.guid++,f):void 0},now:Date.now,support:k}),n.each("Boolean Number String Function Array Date RegExp Object Error".split(" "),function(a,b){h["[object "+b+"]"]=b.toLowerCase()});function s(a){var b=a.length,c=n.type(a);return"function"===c||n.isWindow(a)?!1:1===a.nodeType&&b?!0:"array"===c||0===b||"number"==typeof b&&b>0&&b-1 in a}var t=function(a){var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u="sizzle"+1*new Date,v=a.document,w=0,x=0,y=hb(),z=hb(),A=hb(),B=function(a,b){return a===b&&(l=!0),0},C=1<<31,D={}.hasOwnProperty,E=[],F=E.pop,G=E.push,H=E.push,I=E.slice,J=function(a,b){for(var c=0,d=a.length;d>c;c++)if(a[c]===b)return c;return-1},K="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",L="[\\x20\\t\\r\\n\\f]",M="(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+",N=M.replace("w","w#"),O="\\["+L+"*("+M+")(?:"+L+"*([*^$|!~]?=)"+L+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+N+"))|)"+L+"*\\]",P=":("+M+")(?:\\((('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+O+")*)|.*)\\)|)",Q=new RegExp(L+"+","g"),R=new RegExp("^"+L+"+|((?:^|[^\\\\])(?:\\\\.)*)"+L+"+$","g"),S=new RegExp("^"+L+"*,"+L+"*"),T=new RegExp("^"+L+"*([>+~]|"+L+")"+L+"*"),U=new RegExp("="+L+"*([^\\]'\"]*?)"+L+"*\\]","g"),V=new RegExp(P),W=new RegExp("^"+N+"$"),X={ID:new RegExp("^#("+M+")"),CLASS:new RegExp("^\\.("+M+")"),TAG:new RegExp("^("+M.replace("w","w*")+")"),ATTR:new RegExp("^"+O),PSEUDO:new RegExp("^"+P),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+L+"*(even|odd|(([+-]|)(\\d*)n|)"+L+"*(?:([+-]|)"+L+"*(\\d+)|))"+L+"*\\)|)","i"),bool:new RegExp("^(?:"+K+")$","i"),needsContext:new RegExp("^"+L+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+L+"*((?:-\\d)?\\d*)"+L+"*\\)|)(?=[^-]|$)","i")},Y=/^(?:input|select|textarea|button)$/i,Z=/^h\d$/i,$=/^[^{]+\{\s*\[native \w/,_=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ab=/[+~]/,bb=/'|\\/g,cb=new RegExp("\\\\([\\da-f]{1,6}"+L+"?|("+L+")|.)","ig"),db=function(a,b,c){var d="0x"+b-65536;return d!==d||c?b:0>d?String.fromCharCode(d+65536):String.fromCharCode(d>>10|55296,1023&d|56320)},eb=function(){m()};try{H.apply(E=I.call(v.childNodes),v.childNodes),E[v.childNodes.length].nodeType}catch(fb){H={apply:E.length?function(a,b){G.apply(a,I.call(b))}:function(a,b){var c=a.length,d=0;while(a[c++]=b[d++]);a.length=c-1}}}function gb(a,b,d,e){var f,h,j,k,l,o,r,s,w,x;if((b?b.ownerDocument||b:v)!==n&&m(b),b=b||n,d=d||[],k=b.nodeType,"string"!=typeof a||!a||1!==k&&9!==k&&11!==k)return d;if(!e&&p){if(11!==k&&(f=_.exec(a)))if(j=f[1]){if(9===k){if(h=b.getElementById(j),!h||!h.parentNode)return d;if(h.id===j)return d.push(h),d}else if(b.ownerDocument&&(h=b.ownerDocument.getElementById(j))&&t(b,h)&&h.id===j)return d.push(h),d}else{if(f[2])return H.apply(d,b.getElementsByTagName(a)),d;if((j=f[3])&&c.getElementsByClassName)return H.apply(d,b.getElementsByClassName(j)),d}if(c.qsa&&(!q||!q.test(a))){if(s=r=u,w=b,x=1!==k&&a,1===k&&"object"!==b.nodeName.toLowerCase()){o=g(a),(r=b.getAttribute("id"))?s=r.replace(bb,"\\$&"):b.setAttribute("id",s),s="[id='"+s+"'] ",l=o.length;while(l--)o[l]=s+rb(o[l]);w=ab.test(a)&&pb(b.parentNode)||b,x=o.join(",")}if(x)try{return H.apply(d,w.querySelectorAll(x)),d}catch(y){}finally{r||b.removeAttribute("id")}}}return i(a.replace(R,"$1"),b,d,e)}function hb(){var a=[];function b(c,e){return a.push(c+" ")>d.cacheLength&&delete b[a.shift()],b[c+" "]=e}return b}function ib(a){return a[u]=!0,a}function jb(a){var b=n.createElement("div");try{return!!a(b)}catch(c){return!1}finally{b.parentNode&&b.parentNode.removeChild(b),b=null}}function kb(a,b){var c=a.split("|"),e=a.length;while(e--)d.attrHandle[c[e]]=b}function lb(a,b){var c=b&&a,d=c&&1===a.nodeType&&1===b.nodeType&&(~b.sourceIndex||C)-(~a.sourceIndex||C);if(d)return d;if(c)while(c=c.nextSibling)if(c===b)return-1;return a?1:-1}function mb(a){return function(b){var c=b.nodeName.toLowerCase();return"input"===c&&b.type===a}}function nb(a){return function(b){var c=b.nodeName.toLowerCase();return("input"===c||"button"===c)&&b.type===a}}function ob(a){return ib(function(b){return b=+b,ib(function(c,d){var e,f=a([],c.length,b),g=f.length;while(g--)c[e=f[g]]&&(c[e]=!(d[e]=c[e]))})})}function pb(a){return a&&"undefined"!=typeof a.getElementsByTagName&&a}c=gb.support={},f=gb.isXML=function(a){var b=a&&(a.ownerDocument||a).documentElement;return b?"HTML"!==b.nodeName:!1},m=gb.setDocument=function(a){var b,e,g=a?a.ownerDocument||a:v;return g!==n&&9===g.nodeType&&g.documentElement?(n=g,o=g.documentElement,e=g.defaultView,e&&e!==e.top&&(e.addEventListener?e.addEventListener("unload",eb,!1):e.attachEvent&&e.attachEvent("onunload",eb)),p=!f(g),c.attributes=jb(function(a){return a.className="i",!a.getAttribute("className")}),c.getElementsByTagName=jb(function(a){return a.appendChild(g.createComment("")),!a.getElementsByTagName("*").length}),c.getElementsByClassName=$.test(g.getElementsByClassName),c.getById=jb(function(a){return o.appendChild(a).id=u,!g.getElementsByName||!g.getElementsByName(u).length}),c.getById?(d.find.ID=function(a,b){if("undefined"!=typeof b.getElementById&&p){var c=b.getElementById(a);return c&&c.parentNode?[c]:[]}},d.filter.ID=function(a){var b=a.replace(cb,db);return function(a){return a.getAttribute("id")===b}}):(delete d.find.ID,d.filter.ID=function(a){var b=a.replace(cb,db);return function(a){var c="undefined"!=typeof a.getAttributeNode&&a.getAttributeNode("id");return c&&c.value===b}}),d.find.TAG=c.getElementsByTagName?function(a,b){return"undefined"!=typeof b.getElementsByTagName?b.getElementsByTagName(a):c.qsa?b.querySelectorAll(a):void 0}:function(a,b){var c,d=[],e=0,f=b.getElementsByTagName(a);if("*"===a){while(c=f[e++])1===c.nodeType&&d.push(c);return d}return f},d.find.CLASS=c.getElementsByClassName&&function(a,b){return p?b.getElementsByClassName(a):void 0},r=[],q=[],(c.qsa=$.test(g.querySelectorAll))&&(jb(function(a){o.appendChild(a).innerHTML="",a.querySelectorAll("[msallowcapture^='']").length&&q.push("[*^$]="+L+"*(?:''|\"\")"),a.querySelectorAll("[selected]").length||q.push("\\["+L+"*(?:value|"+K+")"),a.querySelectorAll("[id~="+u+"-]").length||q.push("~="),a.querySelectorAll(":checked").length||q.push(":checked"),a.querySelectorAll("a#"+u+"+*").length||q.push(".#.+[+~]")}),jb(function(a){var b=g.createElement("input");b.setAttribute("type","hidden"),a.appendChild(b).setAttribute("name","D"),a.querySelectorAll("[name=d]").length&&q.push("name"+L+"*[*^$|!~]?="),a.querySelectorAll(":enabled").length||q.push(":enabled",":disabled"),a.querySelectorAll("*,:x"),q.push(",.*:")})),(c.matchesSelector=$.test(s=o.matches||o.webkitMatchesSelector||o.mozMatchesSelector||o.oMatchesSelector||o.msMatchesSelector))&&jb(function(a){c.disconnectedMatch=s.call(a,"div"),s.call(a,"[s!='']:x"),r.push("!=",P)}),q=q.length&&new RegExp(q.join("|")),r=r.length&&new RegExp(r.join("|")),b=$.test(o.compareDocumentPosition),t=b||$.test(o.contains)?function(a,b){var c=9===a.nodeType?a.documentElement:a,d=b&&b.parentNode;return a===d||!(!d||1!==d.nodeType||!(c.contains?c.contains(d):a.compareDocumentPosition&&16&a.compareDocumentPosition(d)))}:function(a,b){if(b)while(b=b.parentNode)if(b===a)return!0;return!1},B=b?function(a,b){if(a===b)return l=!0,0;var d=!a.compareDocumentPosition-!b.compareDocumentPosition;return d?d:(d=(a.ownerDocument||a)===(b.ownerDocument||b)?a.compareDocumentPosition(b):1,1&d||!c.sortDetached&&b.compareDocumentPosition(a)===d?a===g||a.ownerDocument===v&&t(v,a)?-1:b===g||b.ownerDocument===v&&t(v,b)?1:k?J(k,a)-J(k,b):0:4&d?-1:1)}:function(a,b){if(a===b)return l=!0,0;var c,d=0,e=a.parentNode,f=b.parentNode,h=[a],i=[b];if(!e||!f)return a===g?-1:b===g?1:e?-1:f?1:k?J(k,a)-J(k,b):0;if(e===f)return lb(a,b);c=a;while(c=c.parentNode)h.unshift(c);c=b;while(c=c.parentNode)i.unshift(c);while(h[d]===i[d])d++;return d?lb(h[d],i[d]):h[d]===v?-1:i[d]===v?1:0},g):n},gb.matches=function(a,b){return gb(a,null,null,b)},gb.matchesSelector=function(a,b){if((a.ownerDocument||a)!==n&&m(a),b=b.replace(U,"='$1']"),!(!c.matchesSelector||!p||r&&r.test(b)||q&&q.test(b)))try{var d=s.call(a,b);if(d||c.disconnectedMatch||a.document&&11!==a.document.nodeType)return d}catch(e){}return gb(b,n,null,[a]).length>0},gb.contains=function(a,b){return(a.ownerDocument||a)!==n&&m(a),t(a,b)},gb.attr=function(a,b){(a.ownerDocument||a)!==n&&m(a);var e=d.attrHandle[b.toLowerCase()],f=e&&D.call(d.attrHandle,b.toLowerCase())?e(a,b,!p):void 0;return void 0!==f?f:c.attributes||!p?a.getAttribute(b):(f=a.getAttributeNode(b))&&f.specified?f.value:null},gb.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)},gb.uniqueSort=function(a){var b,d=[],e=0,f=0;if(l=!c.detectDuplicates,k=!c.sortStable&&a.slice(0),a.sort(B),l){while(b=a[f++])b===a[f]&&(e=d.push(f));while(e--)a.splice(d[e],1)}return k=null,a},e=gb.getText=function(a){var b,c="",d=0,f=a.nodeType;if(f){if(1===f||9===f||11===f){if("string"==typeof a.textContent)return a.textContent;for(a=a.firstChild;a;a=a.nextSibling)c+=e(a)}else if(3===f||4===f)return a.nodeValue}else while(b=a[d++])c+=e(b);return c},d=gb.selectors={cacheLength:50,createPseudo:ib,match:X,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(a){return a[1]=a[1].replace(cb,db),a[3]=(a[3]||a[4]||a[5]||"").replace(cb,db),"~="===a[2]&&(a[3]=" "+a[3]+" "),a.slice(0,4)},CHILD:function(a){return a[1]=a[1].toLowerCase(),"nth"===a[1].slice(0,3)?(a[3]||gb.error(a[0]),a[4]=+(a[4]?a[5]+(a[6]||1):2*("even"===a[3]||"odd"===a[3])),a[5]=+(a[7]+a[8]||"odd"===a[3])):a[3]&&gb.error(a[0]),a},PSEUDO:function(a){var b,c=!a[6]&&a[2];return X.CHILD.test(a[0])?null:(a[3]?a[2]=a[4]||a[5]||"":c&&V.test(c)&&(b=g(c,!0))&&(b=c.indexOf(")",c.length-b)-c.length)&&(a[0]=a[0].slice(0,b),a[2]=c.slice(0,b)),a.slice(0,3))}},filter:{TAG:function(a){var b=a.replace(cb,db).toLowerCase();return"*"===a?function(){return!0}:function(a){return a.nodeName&&a.nodeName.toLowerCase()===b}},CLASS:function(a){var b=y[a+" "];return b||(b=new RegExp("(^|"+L+")"+a+"("+L+"|$)"))&&y(a,function(a){return b.test("string"==typeof a.className&&a.className||"undefined"!=typeof a.getAttribute&&a.getAttribute("class")||"")})},ATTR:function(a,b,c){return function(d){var e=gb.attr(d,a);return null==e?"!="===b:b?(e+="","="===b?e===c:"!="===b?e!==c:"^="===b?c&&0===e.indexOf(c):"*="===b?c&&e.indexOf(c)>-1:"$="===b?c&&e.slice(-c.length)===c:"~="===b?(" "+e.replace(Q," ")+" ").indexOf(c)>-1:"|="===b?e===c||e.slice(0,c.length+1)===c+"-":!1):!0}},CHILD:function(a,b,c,d,e){var f="nth"!==a.slice(0,3),g="last"!==a.slice(-4),h="of-type"===b;return 1===d&&0===e?function(a){return!!a.parentNode}:function(b,c,i){var j,k,l,m,n,o,p=f!==g?"nextSibling":"previousSibling",q=b.parentNode,r=h&&b.nodeName.toLowerCase(),s=!i&&!h;if(q){if(f){while(p){l=b;while(l=l[p])if(h?l.nodeName.toLowerCase()===r:1===l.nodeType)return!1;o=p="only"===a&&!o&&"nextSibling"}return!0}if(o=[g?q.firstChild:q.lastChild],g&&s){k=q[u]||(q[u]={}),j=k[a]||[],n=j[0]===w&&j[1],m=j[0]===w&&j[2],l=n&&q.childNodes[n];while(l=++n&&l&&l[p]||(m=n=0)||o.pop())if(1===l.nodeType&&++m&&l===b){k[a]=[w,n,m];break}}else if(s&&(j=(b[u]||(b[u]={}))[a])&&j[0]===w)m=j[1];else while(l=++n&&l&&l[p]||(m=n=0)||o.pop())if((h?l.nodeName.toLowerCase()===r:1===l.nodeType)&&++m&&(s&&((l[u]||(l[u]={}))[a]=[w,m]),l===b))break;return m-=e,m===d||m%d===0&&m/d>=0}}},PSEUDO:function(a,b){var c,e=d.pseudos[a]||d.setFilters[a.toLowerCase()]||gb.error("unsupported pseudo: "+a);return e[u]?e(b):e.length>1?(c=[a,a,"",b],d.setFilters.hasOwnProperty(a.toLowerCase())?ib(function(a,c){var d,f=e(a,b),g=f.length;while(g--)d=J(a,f[g]),a[d]=!(c[d]=f[g])}):function(a){return e(a,0,c)}):e}},pseudos:{not:ib(function(a){var b=[],c=[],d=h(a.replace(R,"$1"));return d[u]?ib(function(a,b,c,e){var f,g=d(a,null,e,[]),h=a.length;while(h--)(f=g[h])&&(a[h]=!(b[h]=f))}):function(a,e,f){return b[0]=a,d(b,null,f,c),b[0]=null,!c.pop()}}),has:ib(function(a){return function(b){return gb(a,b).length>0}}),contains:ib(function(a){return a=a.replace(cb,db),function(b){return(b.textContent||b.innerText||e(b)).indexOf(a)>-1}}),lang:ib(function(a){return W.test(a||"")||gb.error("unsupported lang: "+a),a=a.replace(cb,db).toLowerCase(),function(b){var c;do if(c=p?b.lang:b.getAttribute("xml:lang")||b.getAttribute("lang"))return c=c.toLowerCase(),c===a||0===c.indexOf(a+"-");while((b=b.parentNode)&&1===b.nodeType);return!1}}),target:function(b){var c=a.location&&a.location.hash;return c&&c.slice(1)===b.id},root:function(a){return a===o},focus:function(a){return a===n.activeElement&&(!n.hasFocus||n.hasFocus())&&!!(a.type||a.href||~a.tabIndex)},enabled:function(a){return a.disabled===!1},disabled:function(a){return a.disabled===!0},checked:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&!!a.checked||"option"===b&&!!a.selected},selected:function(a){return a.parentNode&&a.parentNode.selectedIndex,a.selected===!0},empty:function(a){for(a=a.firstChild;a;a=a.nextSibling)if(a.nodeType<6)return!1;return!0},parent:function(a){return!d.pseudos.empty(a)},header:function(a){return Z.test(a.nodeName)},input:function(a){return Y.test(a.nodeName)},button:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&"button"===a.type||"button"===b},text:function(a){var b;return"input"===a.nodeName.toLowerCase()&&"text"===a.type&&(null==(b=a.getAttribute("type"))||"text"===b.toLowerCase())},first:ob(function(){return[0]}),last:ob(function(a,b){return[b-1]}),eq:ob(function(a,b,c){return[0>c?c+b:c]}),even:ob(function(a,b){for(var c=0;b>c;c+=2)a.push(c);return a}),odd:ob(function(a,b){for(var c=1;b>c;c+=2)a.push(c);return a}),lt:ob(function(a,b,c){for(var d=0>c?c+b:c;--d>=0;)a.push(d);return a}),gt:ob(function(a,b,c){for(var d=0>c?c+b:c;++db;b++)d+=a[b].value;return d}function sb(a,b,c){var d=b.dir,e=c&&"parentNode"===d,f=x++;return b.first?function(b,c,f){while(b=b[d])if(1===b.nodeType||e)return a(b,c,f)}:function(b,c,g){var h,i,j=[w,f];if(g){while(b=b[d])if((1===b.nodeType||e)&&a(b,c,g))return!0}else while(b=b[d])if(1===b.nodeType||e){if(i=b[u]||(b[u]={}),(h=i[d])&&h[0]===w&&h[1]===f)return j[2]=h[2];if(i[d]=j,j[2]=a(b,c,g))return!0}}}function tb(a){return a.length>1?function(b,c,d){var e=a.length;while(e--)if(!a[e](b,c,d))return!1;return!0}:a[0]}function ub(a,b,c){for(var d=0,e=b.length;e>d;d++)gb(a,b[d],c);return c}function vb(a,b,c,d,e){for(var f,g=[],h=0,i=a.length,j=null!=b;i>h;h++)(f=a[h])&&(!c||c(f,d,e))&&(g.push(f),j&&b.push(h));return g}function wb(a,b,c,d,e,f){return d&&!d[u]&&(d=wb(d)),e&&!e[u]&&(e=wb(e,f)),ib(function(f,g,h,i){var j,k,l,m=[],n=[],o=g.length,p=f||ub(b||"*",h.nodeType?[h]:h,[]),q=!a||!f&&b?p:vb(p,m,a,h,i),r=c?e||(f?a:o||d)?[]:g:q;if(c&&c(q,r,h,i),d){j=vb(r,n),d(j,[],h,i),k=j.length;while(k--)(l=j[k])&&(r[n[k]]=!(q[n[k]]=l))}if(f){if(e||a){if(e){j=[],k=r.length;while(k--)(l=r[k])&&j.push(q[k]=l);e(null,r=[],j,i)}k=r.length;while(k--)(l=r[k])&&(j=e?J(f,l):m[k])>-1&&(f[j]=!(g[j]=l))}}else r=vb(r===g?r.splice(o,r.length):r),e?e(null,g,r,i):H.apply(g,r)})}function xb(a){for(var b,c,e,f=a.length,g=d.relative[a[0].type],h=g||d.relative[" "],i=g?1:0,k=sb(function(a){return a===b},h,!0),l=sb(function(a){return J(b,a)>-1},h,!0),m=[function(a,c,d){var e=!g&&(d||c!==j)||((b=c).nodeType?k(a,c,d):l(a,c,d));return b=null,e}];f>i;i++)if(c=d.relative[a[i].type])m=[sb(tb(m),c)];else{if(c=d.filter[a[i].type].apply(null,a[i].matches),c[u]){for(e=++i;f>e;e++)if(d.relative[a[e].type])break;return wb(i>1&&tb(m),i>1&&rb(a.slice(0,i-1).concat({value:" "===a[i-2].type?"*":""})).replace(R,"$1"),c,e>i&&xb(a.slice(i,e)),f>e&&xb(a=a.slice(e)),f>e&&rb(a))}m.push(c)}return tb(m)}function yb(a,b){var c=b.length>0,e=a.length>0,f=function(f,g,h,i,k){var l,m,o,p=0,q="0",r=f&&[],s=[],t=j,u=f||e&&d.find.TAG("*",k),v=w+=null==t?1:Math.random()||.1,x=u.length;for(k&&(j=g!==n&&g);q!==x&&null!=(l=u[q]);q++){if(e&&l){m=0;while(o=a[m++])if(o(l,g,h)){i.push(l);break}k&&(w=v)}c&&((l=!o&&l)&&p--,f&&r.push(l))}if(p+=q,c&&q!==p){m=0;while(o=b[m++])o(r,s,g,h);if(f){if(p>0)while(q--)r[q]||s[q]||(s[q]=F.call(i));s=vb(s)}H.apply(i,s),k&&!f&&s.length>0&&p+b.length>1&&gb.uniqueSort(i)}return k&&(w=v,j=t),r};return c?ib(f):f}return h=gb.compile=function(a,b){var c,d=[],e=[],f=A[a+" "];if(!f){b||(b=g(a)),c=b.length;while(c--)f=xb(b[c]),f[u]?d.push(f):e.push(f);f=A(a,yb(e,d)),f.selector=a}return f},i=gb.select=function(a,b,e,f){var i,j,k,l,m,n="function"==typeof a&&a,o=!f&&g(a=n.selector||a);if(e=e||[],1===o.length){if(j=o[0]=o[0].slice(0),j.length>2&&"ID"===(k=j[0]).type&&c.getById&&9===b.nodeType&&p&&d.relative[j[1].type]){if(b=(d.find.ID(k.matches[0].replace(cb,db),b)||[])[0],!b)return e;n&&(b=b.parentNode),a=a.slice(j.shift().value.length)}i=X.needsContext.test(a)?0:j.length;while(i--){if(k=j[i],d.relative[l=k.type])break;if((m=d.find[l])&&(f=m(k.matches[0].replace(cb,db),ab.test(j[0].type)&&pb(b.parentNode)||b))){if(j.splice(i,1),a=f.length&&rb(j),!a)return H.apply(e,f),e;break}}}return(n||h(a,o))(f,b,!p,e,ab.test(a)&&pb(b.parentNode)||b),e},c.sortStable=u.split("").sort(B).join("")===u,c.detectDuplicates=!!l,m(),c.sortDetached=jb(function(a){return 1&a.compareDocumentPosition(n.createElement("div"))}),jb(function(a){return a.innerHTML="","#"===a.firstChild.getAttribute("href")})||kb("type|href|height|width",function(a,b,c){return c?void 0:a.getAttribute(b,"type"===b.toLowerCase()?1:2)}),c.attributes&&jb(function(a){return a.innerHTML="",a.firstChild.setAttribute("value",""),""===a.firstChild.getAttribute("value")})||kb("value",function(a,b,c){return c||"input"!==a.nodeName.toLowerCase()?void 0:a.defaultValue}),jb(function(a){return null==a.getAttribute("disabled")})||kb(K,function(a,b,c){var d;return c?void 0:a[b]===!0?b.toLowerCase():(d=a.getAttributeNode(b))&&d.specified?d.value:null}),gb}(a);n.find=t,n.expr=t.selectors,n.expr[":"]=n.expr.pseudos,n.unique=t.uniqueSort,n.text=t.getText,n.isXMLDoc=t.isXML,n.contains=t.contains;var u=n.expr.match.needsContext,v=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,w=/^.[^:#\[\.,]*$/;function x(a,b,c){if(n.isFunction(b))return n.grep(a,function(a,d){return!!b.call(a,d,a)!==c});if(b.nodeType)return n.grep(a,function(a){return a===b!==c});if("string"==typeof b){if(w.test(b))return n.filter(b,a,c);b=n.filter(b,a)}return n.grep(a,function(a){return g.call(b,a)>=0!==c})}n.filter=function(a,b,c){var d=b[0];return c&&(a=":not("+a+")"),1===b.length&&1===d.nodeType?n.find.matchesSelector(d,a)?[d]:[]:n.find.matches(a,n.grep(b,function(a){return 1===a.nodeType}))},n.fn.extend({find:function(a){var b,c=this.length,d=[],e=this;if("string"!=typeof a)return this.pushStack(n(a).filter(function(){for(b=0;c>b;b++)if(n.contains(e[b],this))return!0}));for(b=0;c>b;b++)n.find(a,e[b],d);return d=this.pushStack(c>1?n.unique(d):d),d.selector=this.selector?this.selector+" "+a:a,d},filter:function(a){return this.pushStack(x(this,a||[],!1))},not:function(a){return this.pushStack(x(this,a||[],!0))},is:function(a){return!!x(this,"string"==typeof a&&u.test(a)?n(a):a||[],!1).length}});var y,z=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,A=n.fn.init=function(a,b){var c,d;if(!a)return this;if("string"==typeof a){if(c="<"===a[0]&&">"===a[a.length-1]&&a.length>=3?[null,a,null]:z.exec(a),!c||!c[1]&&b)return!b||b.jquery?(b||y).find(a):this.constructor(b).find(a);if(c[1]){if(b=b instanceof n?b[0]:b,n.merge(this,n.parseHTML(c[1],b&&b.nodeType?b.ownerDocument||b:l,!0)),v.test(c[1])&&n.isPlainObject(b))for(c in b)n.isFunction(this[c])?this[c](b[c]):this.attr(c,b[c]);return this}return d=l.getElementById(c[2]),d&&d.parentNode&&(this.length=1,this[0]=d),this.context=l,this.selector=a,this}return a.nodeType?(this.context=this[0]=a,this.length=1,this):n.isFunction(a)?"undefined"!=typeof y.ready?y.ready(a):a(n):(void 0!==a.selector&&(this.selector=a.selector,this.context=a.context),n.makeArray(a,this))};A.prototype=n.fn,y=n(l);var B=/^(?:parents|prev(?:Until|All))/,C={children:!0,contents:!0,next:!0,prev:!0};n.extend({dir:function(a,b,c){var d=[],e=void 0!==c;while((a=a[b])&&9!==a.nodeType)if(1===a.nodeType){if(e&&n(a).is(c))break;d.push(a)}return d},sibling:function(a,b){for(var c=[];a;a=a.nextSibling)1===a.nodeType&&a!==b&&c.push(a);return c}}),n.fn.extend({has:function(a){var b=n(a,this),c=b.length;return this.filter(function(){for(var a=0;c>a;a++)if(n.contains(this,b[a]))return!0})},closest:function(a,b){for(var c,d=0,e=this.length,f=[],g=u.test(a)||"string"!=typeof a?n(a,b||this.context):0;e>d;d++)for(c=this[d];c&&c!==b;c=c.parentNode)if(c.nodeType<11&&(g?g.index(c)>-1:1===c.nodeType&&n.find.matchesSelector(c,a))){f.push(c);break}return this.pushStack(f.length>1?n.unique(f):f)},index:function(a){return a?"string"==typeof a?g.call(n(a),this[0]):g.call(this,a.jquery?a[0]:a):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(a,b){return this.pushStack(n.unique(n.merge(this.get(),n(a,b))))},addBack:function(a){return this.add(null==a?this.prevObject:this.prevObject.filter(a))}});function D(a,b){while((a=a[b])&&1!==a.nodeType);return a}n.each({parent:function(a){var b=a.parentNode;return b&&11!==b.nodeType?b:null},parents:function(a){return n.dir(a,"parentNode")},parentsUntil:function(a,b,c){return n.dir(a,"parentNode",c)},next:function(a){return D(a,"nextSibling")},prev:function(a){return D(a,"previousSibling")},nextAll:function(a){return n.dir(a,"nextSibling")},prevAll:function(a){return n.dir(a,"previousSibling")},nextUntil:function(a,b,c){return n.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return n.dir(a,"previousSibling",c)},siblings:function(a){return n.sibling((a.parentNode||{}).firstChild,a)},children:function(a){return n.sibling(a.firstChild)},contents:function(a){return a.contentDocument||n.merge([],a.childNodes)}},function(a,b){n.fn[a]=function(c,d){var e=n.map(this,b,c);return"Until"!==a.slice(-5)&&(d=c),d&&"string"==typeof d&&(e=n.filter(d,e)),this.length>1&&(C[a]||n.unique(e),B.test(a)&&e.reverse()),this.pushStack(e)}});var E=/\S+/g,F={};function G(a){var b=F[a]={};return n.each(a.match(E)||[],function(a,c){b[c]=!0}),b}n.Callbacks=function(a){a="string"==typeof a?F[a]||G(a):n.extend({},a);var b,c,d,e,f,g,h=[],i=!a.once&&[],j=function(l){for(b=a.memory&&l,c=!0,g=e||0,e=0,f=h.length,d=!0;h&&f>g;g++)if(h[g].apply(l[0],l[1])===!1&&a.stopOnFalse){b=!1;break}d=!1,h&&(i?i.length&&j(i.shift()):b?h=[]:k.disable())},k={add:function(){if(h){var c=h.length;!function g(b){n.each(b,function(b,c){var d=n.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&g(c)})}(arguments),d?f=h.length:b&&(e=c,j(b))}return this},remove:function(){return h&&n.each(arguments,function(a,b){var c;while((c=n.inArray(b,h,c))>-1)h.splice(c,1),d&&(f>=c&&f--,g>=c&&g--)}),this},has:function(a){return a?n.inArray(a,h)>-1:!(!h||!h.length)},empty:function(){return h=[],f=0,this},disable:function(){return h=i=b=void 0,this},disabled:function(){return!h},lock:function(){return i=void 0,b||k.disable(),this},locked:function(){return!i},fireWith:function(a,b){return!h||c&&!i||(b=b||[],b=[a,b.slice?b.slice():b],d?i.push(b):j(b)),this},fire:function(){return k.fireWith(this,arguments),this},fired:function(){return!!c}};return k},n.extend({Deferred:function(a){var b=[["resolve","done",n.Callbacks("once memory"),"resolved"],["reject","fail",n.Callbacks("once memory"),"rejected"],["notify","progress",n.Callbacks("memory")]],c="pending",d={state:function(){return c},always:function(){return e.done(arguments).fail(arguments),this},then:function(){var a=arguments;return n.Deferred(function(c){n.each(b,function(b,f){var g=n.isFunction(a[b])&&a[b];e[f[1]](function(){var a=g&&g.apply(this,arguments);a&&n.isFunction(a.promise)?a.promise().done(c.resolve).fail(c.reject).progress(c.notify):c[f[0]+"With"](this===d?c.promise():this,g?[a]:arguments)})}),a=null}).promise()},promise:function(a){return null!=a?n.extend(a,d):d}},e={};return d.pipe=d.then,n.each(b,function(a,f){var g=f[2],h=f[3];d[f[1]]=g.add,h&&g.add(function(){c=h},b[1^a][2].disable,b[2][2].lock),e[f[0]]=function(){return e[f[0]+"With"](this===e?d:this,arguments),this},e[f[0]+"With"]=g.fireWith}),d.promise(e),a&&a.call(e,e),e},when:function(a){var b=0,c=d.call(arguments),e=c.length,f=1!==e||a&&n.isFunction(a.promise)?e:0,g=1===f?a:n.Deferred(),h=function(a,b,c){return function(e){b[a]=this,c[a]=arguments.length>1?d.call(arguments):e,c===i?g.notifyWith(b,c):--f||g.resolveWith(b,c)}},i,j,k;if(e>1)for(i=new Array(e),j=new Array(e),k=new Array(e);e>b;b++)c[b]&&n.isFunction(c[b].promise)?c[b].promise().done(h(b,k,c)).fail(g.reject).progress(h(b,j,i)):--f;return f||g.resolveWith(k,c),g.promise()}});var H;n.fn.ready=function(a){return n.ready.promise().done(a),this},n.extend({isReady:!1,readyWait:1,holdReady:function(a){a?n.readyWait++:n.ready(!0)},ready:function(a){(a===!0?--n.readyWait:n.isReady)||(n.isReady=!0,a!==!0&&--n.readyWait>0||(H.resolveWith(l,[n]),n.fn.triggerHandler&&(n(l).triggerHandler("ready"),n(l).off("ready"))))}});function I(){l.removeEventListener("DOMContentLoaded",I,!1),a.removeEventListener("load",I,!1),n.ready()}n.ready.promise=function(b){return H||(H=n.Deferred(),"complete"===l.readyState?setTimeout(n.ready):(l.addEventListener("DOMContentLoaded",I,!1),a.addEventListener("load",I,!1))),H.promise(b)},n.ready.promise();var J=n.access=function(a,b,c,d,e,f,g){var h=0,i=a.length,j=null==c;if("object"===n.type(c)){e=!0;for(h in c)n.access(a,b,h,c[h],!0,f,g)}else if(void 0!==d&&(e=!0,n.isFunction(d)||(g=!0),j&&(g?(b.call(a,d),b=null):(j=b,b=function(a,b,c){return j.call(n(a),c)})),b))for(;i>h;h++)b(a[h],c,g?d:d.call(a[h],h,b(a[h],c)));return e?a:j?b.call(a):i?b(a[0],c):f};n.acceptData=function(a){return 1===a.nodeType||9===a.nodeType||!+a.nodeType};function K(){Object.defineProperty(this.cache={},0,{get:function(){return{}}}),this.expando=n.expando+K.uid++}K.uid=1,K.accepts=n.acceptData,K.prototype={key:function(a){if(!K.accepts(a))return 0;var b={},c=a[this.expando];if(!c){c=K.uid++;try{b[this.expando]={value:c},Object.defineProperties(a,b)}catch(d){b[this.expando]=c,n.extend(a,b)}}return this.cache[c]||(this.cache[c]={}),c},set:function(a,b,c){var d,e=this.key(a),f=this.cache[e];if("string"==typeof b)f[b]=c;else if(n.isEmptyObject(f))n.extend(this.cache[e],b);else for(d in b)f[d]=b[d];return f},get:function(a,b){var c=this.cache[this.key(a)];return void 0===b?c:c[b]},access:function(a,b,c){var d;return void 0===b||b&&"string"==typeof b&&void 0===c?(d=this.get(a,b),void 0!==d?d:this.get(a,n.camelCase(b))):(this.set(a,b,c),void 0!==c?c:b)},remove:function(a,b){var c,d,e,f=this.key(a),g=this.cache[f];if(void 0===b)this.cache[f]={};else{n.isArray(b)?d=b.concat(b.map(n.camelCase)):(e=n.camelCase(b),b in g?d=[b,e]:(d=e,d=d in g?[d]:d.match(E)||[])),c=d.length;while(c--)delete g[d[c]]}},hasData:function(a){return!n.isEmptyObject(this.cache[a[this.expando]]||{})},discard:function(a){a[this.expando]&&delete this.cache[a[this.expando]]}};var L=new K,M=new K,N=/^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,O=/([A-Z])/g;function P(a,b,c){var d;if(void 0===c&&1===a.nodeType)if(d="data-"+b.replace(O,"-$1").toLowerCase(),c=a.getAttribute(d),"string"==typeof c){try{c="true"===c?!0:"false"===c?!1:"null"===c?null:+c+""===c?+c:N.test(c)?n.parseJSON(c):c}catch(e){}M.set(a,b,c)}else c=void 0;return c}n.extend({hasData:function(a){return M.hasData(a)||L.hasData(a)},data:function(a,b,c){return M.access(a,b,c) -},removeData:function(a,b){M.remove(a,b)},_data:function(a,b,c){return L.access(a,b,c)},_removeData:function(a,b){L.remove(a,b)}}),n.fn.extend({data:function(a,b){var c,d,e,f=this[0],g=f&&f.attributes;if(void 0===a){if(this.length&&(e=M.get(f),1===f.nodeType&&!L.get(f,"hasDataAttrs"))){c=g.length;while(c--)g[c]&&(d=g[c].name,0===d.indexOf("data-")&&(d=n.camelCase(d.slice(5)),P(f,d,e[d])));L.set(f,"hasDataAttrs",!0)}return e}return"object"==typeof a?this.each(function(){M.set(this,a)}):J(this,function(b){var c,d=n.camelCase(a);if(f&&void 0===b){if(c=M.get(f,a),void 0!==c)return c;if(c=M.get(f,d),void 0!==c)return c;if(c=P(f,d,void 0),void 0!==c)return c}else this.each(function(){var c=M.get(this,d);M.set(this,d,b),-1!==a.indexOf("-")&&void 0!==c&&M.set(this,a,b)})},null,b,arguments.length>1,null,!0)},removeData:function(a){return this.each(function(){M.remove(this,a)})}}),n.extend({queue:function(a,b,c){var d;return a?(b=(b||"fx")+"queue",d=L.get(a,b),c&&(!d||n.isArray(c)?d=L.access(a,b,n.makeArray(c)):d.push(c)),d||[]):void 0},dequeue:function(a,b){b=b||"fx";var c=n.queue(a,b),d=c.length,e=c.shift(),f=n._queueHooks(a,b),g=function(){n.dequeue(a,b)};"inprogress"===e&&(e=c.shift(),d--),e&&("fx"===b&&c.unshift("inprogress"),delete f.stop,e.call(a,g,f)),!d&&f&&f.empty.fire()},_queueHooks:function(a,b){var c=b+"queueHooks";return L.get(a,c)||L.access(a,c,{empty:n.Callbacks("once memory").add(function(){L.remove(a,[b+"queue",c])})})}}),n.fn.extend({queue:function(a,b){var c=2;return"string"!=typeof a&&(b=a,a="fx",c--),arguments.lengthx",k.noCloneChecked=!!b.cloneNode(!0).lastChild.defaultValue}();var U="undefined";k.focusinBubbles="onfocusin"in a;var V=/^key/,W=/^(?:mouse|pointer|contextmenu)|click/,X=/^(?:focusinfocus|focusoutblur)$/,Y=/^([^.]*)(?:\.(.+)|)$/;function Z(){return!0}function $(){return!1}function _(){try{return l.activeElement}catch(a){}}n.event={global:{},add:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,o,p,q,r=L.get(a);if(r){c.handler&&(f=c,c=f.handler,e=f.selector),c.guid||(c.guid=n.guid++),(i=r.events)||(i=r.events={}),(g=r.handle)||(g=r.handle=function(b){return typeof n!==U&&n.event.triggered!==b.type?n.event.dispatch.apply(a,arguments):void 0}),b=(b||"").match(E)||[""],j=b.length;while(j--)h=Y.exec(b[j])||[],o=q=h[1],p=(h[2]||"").split(".").sort(),o&&(l=n.event.special[o]||{},o=(e?l.delegateType:l.bindType)||o,l=n.event.special[o]||{},k=n.extend({type:o,origType:q,data:d,handler:c,guid:c.guid,selector:e,needsContext:e&&n.expr.match.needsContext.test(e),namespace:p.join(".")},f),(m=i[o])||(m=i[o]=[],m.delegateCount=0,l.setup&&l.setup.call(a,d,p,g)!==!1||a.addEventListener&&a.addEventListener(o,g,!1)),l.add&&(l.add.call(a,k),k.handler.guid||(k.handler.guid=c.guid)),e?m.splice(m.delegateCount++,0,k):m.push(k),n.event.global[o]=!0)}},remove:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,o,p,q,r=L.hasData(a)&&L.get(a);if(r&&(i=r.events)){b=(b||"").match(E)||[""],j=b.length;while(j--)if(h=Y.exec(b[j])||[],o=q=h[1],p=(h[2]||"").split(".").sort(),o){l=n.event.special[o]||{},o=(d?l.delegateType:l.bindType)||o,m=i[o]||[],h=h[2]&&new RegExp("(^|\\.)"+p.join("\\.(?:.*\\.|)")+"(\\.|$)"),g=f=m.length;while(f--)k=m[f],!e&&q!==k.origType||c&&c.guid!==k.guid||h&&!h.test(k.namespace)||d&&d!==k.selector&&("**"!==d||!k.selector)||(m.splice(f,1),k.selector&&m.delegateCount--,l.remove&&l.remove.call(a,k));g&&!m.length&&(l.teardown&&l.teardown.call(a,p,r.handle)!==!1||n.removeEvent(a,o,r.handle),delete i[o])}else for(o in i)n.event.remove(a,o+b[j],c,d,!0);n.isEmptyObject(i)&&(delete r.handle,L.remove(a,"events"))}},trigger:function(b,c,d,e){var f,g,h,i,k,m,o,p=[d||l],q=j.call(b,"type")?b.type:b,r=j.call(b,"namespace")?b.namespace.split("."):[];if(g=h=d=d||l,3!==d.nodeType&&8!==d.nodeType&&!X.test(q+n.event.triggered)&&(q.indexOf(".")>=0&&(r=q.split("."),q=r.shift(),r.sort()),k=q.indexOf(":")<0&&"on"+q,b=b[n.expando]?b:new n.Event(q,"object"==typeof b&&b),b.isTrigger=e?2:3,b.namespace=r.join("."),b.namespace_re=b.namespace?new RegExp("(^|\\.)"+r.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,b.result=void 0,b.target||(b.target=d),c=null==c?[b]:n.makeArray(c,[b]),o=n.event.special[q]||{},e||!o.trigger||o.trigger.apply(d,c)!==!1)){if(!e&&!o.noBubble&&!n.isWindow(d)){for(i=o.delegateType||q,X.test(i+q)||(g=g.parentNode);g;g=g.parentNode)p.push(g),h=g;h===(d.ownerDocument||l)&&p.push(h.defaultView||h.parentWindow||a)}f=0;while((g=p[f++])&&!b.isPropagationStopped())b.type=f>1?i:o.bindType||q,m=(L.get(g,"events")||{})[b.type]&&L.get(g,"handle"),m&&m.apply(g,c),m=k&&g[k],m&&m.apply&&n.acceptData(g)&&(b.result=m.apply(g,c),b.result===!1&&b.preventDefault());return b.type=q,e||b.isDefaultPrevented()||o._default&&o._default.apply(p.pop(),c)!==!1||!n.acceptData(d)||k&&n.isFunction(d[q])&&!n.isWindow(d)&&(h=d[k],h&&(d[k]=null),n.event.triggered=q,d[q](),n.event.triggered=void 0,h&&(d[k]=h)),b.result}},dispatch:function(a){a=n.event.fix(a);var b,c,e,f,g,h=[],i=d.call(arguments),j=(L.get(this,"events")||{})[a.type]||[],k=n.event.special[a.type]||{};if(i[0]=a,a.delegateTarget=this,!k.preDispatch||k.preDispatch.call(this,a)!==!1){h=n.event.handlers.call(this,a,j),b=0;while((f=h[b++])&&!a.isPropagationStopped()){a.currentTarget=f.elem,c=0;while((g=f.handlers[c++])&&!a.isImmediatePropagationStopped())(!a.namespace_re||a.namespace_re.test(g.namespace))&&(a.handleObj=g,a.data=g.data,e=((n.event.special[g.origType]||{}).handle||g.handler).apply(f.elem,i),void 0!==e&&(a.result=e)===!1&&(a.preventDefault(),a.stopPropagation()))}return k.postDispatch&&k.postDispatch.call(this,a),a.result}},handlers:function(a,b){var c,d,e,f,g=[],h=b.delegateCount,i=a.target;if(h&&i.nodeType&&(!a.button||"click"!==a.type))for(;i!==this;i=i.parentNode||this)if(i.disabled!==!0||"click"!==a.type){for(d=[],c=0;h>c;c++)f=b[c],e=f.selector+" ",void 0===d[e]&&(d[e]=f.needsContext?n(e,this).index(i)>=0:n.find(e,this,null,[i]).length),d[e]&&d.push(f);d.length&&g.push({elem:i,handlers:d})}return h]*)\/>/gi,bb=/<([\w:]+)/,cb=/<|&#?\w+;/,db=/<(?:script|style|link)/i,eb=/checked\s*(?:[^=]|=\s*.checked.)/i,fb=/^$|\/(?:java|ecma)script/i,gb=/^true\/(.*)/,hb=/^\s*\s*$/g,ib={option:[1,""],thead:[1,"","
    "],col:[2,"","
    "],tr:[2,"","
    "],td:[3,"","
    "],_default:[0,"",""]};ib.optgroup=ib.option,ib.tbody=ib.tfoot=ib.colgroup=ib.caption=ib.thead,ib.th=ib.td;function jb(a,b){return n.nodeName(a,"table")&&n.nodeName(11!==b.nodeType?b:b.firstChild,"tr")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function kb(a){return a.type=(null!==a.getAttribute("type"))+"/"+a.type,a}function lb(a){var b=gb.exec(a.type);return b?a.type=b[1]:a.removeAttribute("type"),a}function mb(a,b){for(var c=0,d=a.length;d>c;c++)L.set(a[c],"globalEval",!b||L.get(b[c],"globalEval"))}function nb(a,b){var c,d,e,f,g,h,i,j;if(1===b.nodeType){if(L.hasData(a)&&(f=L.access(a),g=L.set(b,f),j=f.events)){delete g.handle,g.events={};for(e in j)for(c=0,d=j[e].length;d>c;c++)n.event.add(b,e,j[e][c])}M.hasData(a)&&(h=M.access(a),i=n.extend({},h),M.set(b,i))}}function ob(a,b){var c=a.getElementsByTagName?a.getElementsByTagName(b||"*"):a.querySelectorAll?a.querySelectorAll(b||"*"):[];return void 0===b||b&&n.nodeName(a,b)?n.merge([a],c):c}function pb(a,b){var c=b.nodeName.toLowerCase();"input"===c&&T.test(a.type)?b.checked=a.checked:("input"===c||"textarea"===c)&&(b.defaultValue=a.defaultValue)}n.extend({clone:function(a,b,c){var d,e,f,g,h=a.cloneNode(!0),i=n.contains(a.ownerDocument,a);if(!(k.noCloneChecked||1!==a.nodeType&&11!==a.nodeType||n.isXMLDoc(a)))for(g=ob(h),f=ob(a),d=0,e=f.length;e>d;d++)pb(f[d],g[d]);if(b)if(c)for(f=f||ob(a),g=g||ob(h),d=0,e=f.length;e>d;d++)nb(f[d],g[d]);else nb(a,h);return g=ob(h,"script"),g.length>0&&mb(g,!i&&ob(a,"script")),h},buildFragment:function(a,b,c,d){for(var e,f,g,h,i,j,k=b.createDocumentFragment(),l=[],m=0,o=a.length;o>m;m++)if(e=a[m],e||0===e)if("object"===n.type(e))n.merge(l,e.nodeType?[e]:e);else if(cb.test(e)){f=f||k.appendChild(b.createElement("div")),g=(bb.exec(e)||["",""])[1].toLowerCase(),h=ib[g]||ib._default,f.innerHTML=h[1]+e.replace(ab,"<$1>")+h[2],j=h[0];while(j--)f=f.lastChild;n.merge(l,f.childNodes),f=k.firstChild,f.textContent=""}else l.push(b.createTextNode(e));k.textContent="",m=0;while(e=l[m++])if((!d||-1===n.inArray(e,d))&&(i=n.contains(e.ownerDocument,e),f=ob(k.appendChild(e),"script"),i&&mb(f),c)){j=0;while(e=f[j++])fb.test(e.type||"")&&c.push(e)}return k},cleanData:function(a){for(var b,c,d,e,f=n.event.special,g=0;void 0!==(c=a[g]);g++){if(n.acceptData(c)&&(e=c[L.expando],e&&(b=L.cache[e]))){if(b.events)for(d in b.events)f[d]?n.event.remove(c,d):n.removeEvent(c,d,b.handle);L.cache[e]&&delete L.cache[e]}delete M.cache[c[M.expando]]}}}),n.fn.extend({text:function(a){return J(this,function(a){return void 0===a?n.text(this):this.empty().each(function(){(1===this.nodeType||11===this.nodeType||9===this.nodeType)&&(this.textContent=a)})},null,a,arguments.length)},append:function(){return this.domManip(arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=jb(this,a);b.appendChild(a)}})},prepend:function(){return this.domManip(arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=jb(this,a);b.insertBefore(a,b.firstChild)}})},before:function(){return this.domManip(arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this)})},after:function(){return this.domManip(arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this.nextSibling)})},remove:function(a,b){for(var c,d=a?n.filter(a,this):this,e=0;null!=(c=d[e]);e++)b||1!==c.nodeType||n.cleanData(ob(c)),c.parentNode&&(b&&n.contains(c.ownerDocument,c)&&mb(ob(c,"script")),c.parentNode.removeChild(c));return this},empty:function(){for(var a,b=0;null!=(a=this[b]);b++)1===a.nodeType&&(n.cleanData(ob(a,!1)),a.textContent="");return this},clone:function(a,b){return a=null==a?!1:a,b=null==b?a:b,this.map(function(){return n.clone(this,a,b)})},html:function(a){return J(this,function(a){var b=this[0]||{},c=0,d=this.length;if(void 0===a&&1===b.nodeType)return b.innerHTML;if("string"==typeof a&&!db.test(a)&&!ib[(bb.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(ab,"<$1>");try{for(;d>c;c++)b=this[c]||{},1===b.nodeType&&(n.cleanData(ob(b,!1)),b.innerHTML=a);b=0}catch(e){}}b&&this.empty().append(a)},null,a,arguments.length)},replaceWith:function(){var a=arguments[0];return this.domManip(arguments,function(b){a=this.parentNode,n.cleanData(ob(this)),a&&a.replaceChild(b,this)}),a&&(a.length||a.nodeType)?this:this.remove()},detach:function(a){return this.remove(a,!0)},domManip:function(a,b){a=e.apply([],a);var c,d,f,g,h,i,j=0,l=this.length,m=this,o=l-1,p=a[0],q=n.isFunction(p);if(q||l>1&&"string"==typeof p&&!k.checkClone&&eb.test(p))return this.each(function(c){var d=m.eq(c);q&&(a[0]=p.call(this,c,d.html())),d.domManip(a,b)});if(l&&(c=n.buildFragment(a,this[0].ownerDocument,!1,this),d=c.firstChild,1===c.childNodes.length&&(c=d),d)){for(f=n.map(ob(c,"script"),kb),g=f.length;l>j;j++)h=c,j!==o&&(h=n.clone(h,!0,!0),g&&n.merge(f,ob(h,"script"))),b.call(this[j],h,j);if(g)for(i=f[f.length-1].ownerDocument,n.map(f,lb),j=0;g>j;j++)h=f[j],fb.test(h.type||"")&&!L.access(h,"globalEval")&&n.contains(i,h)&&(h.src?n._evalUrl&&n._evalUrl(h.src):n.globalEval(h.textContent.replace(hb,"")))}return this}}),n.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){n.fn[a]=function(a){for(var c,d=[],e=n(a),g=e.length-1,h=0;g>=h;h++)c=h===g?this:this.clone(!0),n(e[h])[b](c),f.apply(d,c.get());return this.pushStack(d)}});var qb,rb={};function sb(b,c){var d,e=n(c.createElement(b)).appendTo(c.body),f=a.getDefaultComputedStyle&&(d=a.getDefaultComputedStyle(e[0]))?d.display:n.css(e[0],"display");return e.detach(),f}function tb(a){var b=l,c=rb[a];return c||(c=sb(a,b),"none"!==c&&c||(qb=(qb||n("