Hank's Blog

ES6引入了Class（类）这个概念,作为对象的模板,通过class关键字,可以定义类。class不存在变量提升。

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

let methodName = "getInfo"; 
class Person{  
    // constructor方法是类的构造函数是默认方法
    constructor (x,y) {
    	// ES6实例属性只能在constructor构造函数中定义  
        this.x = x;  
        this.y = y;  
    }
    // 注意！方法之间不需要逗号分隔！
 	// toString方法是Person类内部定义的方法，ES6中它是不可枚举的，但ES5中可以枚举。
    toString () {  
        return (this.x + "的年龄是" +this.y+"岁");  
    }
	// 在ES6中,类的属性名可以使用表达式
    [methodName] () {  
       console.log('输出' + this.x + '的基本信息');  
    }
	// static关键字，就表示该方法为“静态方法”，实例无法调用，只能类自身调用
    static getCommon(){  
        return '父类的静态方法';  
    }
}

// 在类的原型上追加方法
Object.assign(Person.prototype, {
    getWeight(){  
        console.log('71kg');  
    },  
    getHeight(){  
        console.log('175cm');  
    }  
}); 

// 定义静态属性，目前ES6，只有这种写法可行，因为ES6明确规定，Class内部只有静态方法，没有静态属性。
Person.firstName = 'pca';  

let tom = new Person('tom', 23);
tom.getInfo();
tom.getWeight();

Shadowsocks，即Sock5代理。采用socks协议的代理服务器就是SOCKS服务器，是一种通用的代理服务器。Socks 不要求应用程序遵循特定的操作系统平台，Socks 代理与应用层代理、 HTTP 层代理不同，Socks 代理只是简单地传递数据包，而不必关心是何种应用协议（比如FTP、HTTP和NNTP请求）。所以，Socks代理比其他应用层代理要快得多。

全局模式

Shadowsocks的全局模式，是设置你的系统代理的代理服务器，使你的所有http/socks数据经过代理服务器的转发送出。而只有支持socks5或者使用系统代理的软件才能使用Shadowsocks（一般的浏览器都是默认使用系统代理）。
经过代理服务器的IP会被更换。连接Shadowsocks需要知道IP、端口、账号密码和加密方式。但是Shadowsocks因为可以自由换端口，所以定期换端口就可以有效避免IP被封！

PAC模式

上面已经解释了Shadowsocks的全局模式，而PAC模式就是会在你连接网站的时候读取PAC文件里的规则，来确定你访问的网站有没有被墙，如果符合，那就会使用代理服务器连接网站，而PAC列表一般都是从GFWList更新的。GFWList定期会更新被墙的网站（不过一般挺慢的）。
简单地说，在全局模式下，所有网站默认走代理。而PAC模式是只有被墙的才会走代理，推荐PAC模式，如果PAC模式无法访问一些网站，就换全局模式试试，一般是因为PAC更新不及时（也可能是GFWList更新不及时）导致的。

ss/ssr

ss：ss作者是clowwindy，大约两年前，他自己为了翻墙写了shadowsocks，简称ss或者叫影梭，后来他觉得这个东西非常好用，速度快，而且不会被封锁，他就把源码共享在了github上，然后就火了，但是后来作者被请去喝茶，删了代码，并且保证不再参与维护更新。现在这个好像是一个国外的大兄弟在维护。

ssr：在ss作者被喝茶之后，github上出现了一个叫breakwa11(破娃)的帐号，声称ss容易被防火墙检测到，所以在混淆和协议方面做了改进，更加不容易被检测到，而且兼容ss，改进后的项目叫shadowsocks-R，简称ssr，然后ss用户和ssr用户自然分成了两个派别，互相撕逼，直到前阵子，破娃被人肉出来，无奈之下删除了ssr的代码，并且解散了所有相关群组。

ss和ssr它的原理都是一样的，就是socks5代理。socks5代理是把你的网络数据请求通过一条连接你和代理服务器之间的通道，由服务器转发到目的地，这个过程中你是没有通过一条专用通道的，只是数据包的发出，然后被代理服务器收到，整个过程并没有额外的处理。通俗的说，现在你有一个代理服务器在香港，比如你现在想要访问google，你的电脑发出请求，流量通过socks5连接发到你在香港的服务器上，然后再由你在香港的服务器去访问google，再把访问结果传回你的电脑，这样就实现了翻墙。

其他

Chrome不需要Proxy SwitchyOmega和Proxy SwitchySharp插件，这两个插件的作用就是，快速切换代理，判断网站需不需要使用某个代理的（ss已经有pac模式了，所以不需要这个）。如果你用shadowsocks的话，就不需要这个插件了！

Shadowsocks客户端的下载地址，需要翻墙访问。

VPN

VPN(Virtual Private Network 虚拟专用网络)属于远程访问技术，我们可以简单的把VPN当成是一个软件。用一个帐号和密码，就可以通过虚拟专线网络代理，突破网络限制来直接访问远程网站（比如上国外网站Facebook和Twitter），或着是加速网络访问和数据传输（比如网游加速器）。VPN分为两种，一种是静态的VPN，另外一种就是动态的VPN。动态的VPN是每登陆一次，就变化一次IP的。

VPS

VPS(Virtual Private Server 虚拟专用服务器)属于虚拟主机技术，我们可以简单的把VPS作为服务器。一台服务器用软件分割开以后，就成了多台独立的（虚拟）服务器，他们有独立的操作系统和独立的IP，这个时候每一个独立的小的（虚拟）服务器，就是一个VPS。VPS是桌面操作的，用远程登陆以后，和自己的机器是一样的布局，可以在上面进行安装软件、搭建网站等操作。

其他

搬瓦工vps + shadowsock 搭建vpn

当页面上有过多文字的时候，往往需要省略显示，CSS可以很方便的做到这点。

单行文本省略显示

1
2
3
4

width: 68%; // 需要固定一个宽度
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行文本省略显示(适用于WebKit浏览器和移动端)

1
2
3
4

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; // 设置需要显示的行数
overflow: hidden;

官网提供了购买服务器的教程，这里主要讲一下之后的步骤。

install new os

1. 登录自己账号后点击“Services”中的“My Services”，进入到自己购买的VPS列表，然后点击“KiwiVM Control Panel”进入到管理面板
2. 点击“stop”停止VPS运行，然后点击左侧“Install new OS”进入到系统重装页面
3. 最后选择你要安装的系统版本（见邮件），点击“Reload”进行安装
4. 安装成功后你的邮箱会收到安装成功提示，记下系统重装后的ROOT密码和SSH端口

Shadowsocks Server

1. 击左侧“Shadowsocks Server”进行安装
2. 点击下方的说明，配置并安装“Shadowsocks Server”
3. 说明文档中标黄的部分是需要手动输入的参数，必须一致

label标签用来定义表单控件间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。label标签有两个属性for和accesskey。

for属性：表示label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。

1

<Label for="InputBox">姓名</Label><input id="InputBox" type="text"> 

accesskey属性：表示访问label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。

1

<Label for="InputBox" ACCESSKEY="N">姓名</Label><input id="InputBox" type="text">

1
2
3
4
5
6
7
8
9
10
11

// f 为构造函数，o 为创建的对象
function New (f) { 
   /*1*/  
   var o = { '__proto__': f.prototype }; 
   return function () { 
      /*2*/    
      f.apply(o, arguments); 
      /*3*/    
      return o; 
   }; 
}

1. 创建对象o
2. o的__proto__属性指向f的原型
3. 将f内部的this指向o
4. 返回o

1
2
3
4
5

<template>
	<div>
		<img src="../../uploads/1-headimg.jpg">
	</div>
</template>

以上写法合理的，但是以下写法就会报错

从Vue项目实践中抽离出部分组件，并集合成一个组件库项目，本文会指导你构建一个组件库的开发和发布环境，以及如何编写一个Vue组件。阅读过程中建议结合项目代码hg-vcompoments。

搭建项目

为了快速搭建一个项目，我们使用vue-cli（npm install -g vue-cli）来创建。

1
2
3

vue init webpack hg-vcomponents
cd hg-vcomponents
npm install

<form>标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素，如文本字段、复选框、单选框、提交按钮等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

target 可能的值

• _blank：指定action的Url在新开的浏览器窗口中
• _parent：指定action的Url在父级浏览器窗口中
• _self：指定action的Url在当前浏览器窗口中
• _top：指定action的Url在顶级浏览器窗口中
• framename：指定action的Url在指定的 iframe 中打开

利用 target 可以实现表单提交不刷新，让 form 表单的 target 属性等于 iframe 的 name 属性

1
2
3
4
5

<form action="http://localhost:8085/api/uploadimg" method="POST" enctype="multipart/form-data" target="nm_iframe">
  <input type="file" name="imgfile" multiple>
  <input type="submit" value="提交">
</form>
<iframe name="nm_iframe" style="display:none;"></iframe>

enctype 可能的值

• application/x-www-form-urlencoded: 默认，在发送前编码所有字符（空格转换为+加号，特殊符号转换为 ASCII HEX 值）
• multipart/form-data: 不对字符编码，在使用包含文件上传控件的表单时，必须使用该值
• text/plain: 空格转换为+加号，但不对特殊字符编码