废了一点时间，装了两次Ubuntu才真正装好，因为装的是双系统，主系统是win10，刚入手Ubuntu还对命令不是很熟悉，所以首先学习下Linux下的常用命令。说实在话，Ubuntu好用的不是一丁点，现在基本都不怎么使用win10了

Terminal(终端)的使用技巧

Up键: 可以调出历史执行记录，快速执行命令
Down键: 配合Up键选择历史执行记录执行命令
history: 显示历史执行记录
Home键: 移动光标到本行开头
End键: 移动光标到本行末尾
PaUp键: 向上翻页
PaDn键: 向下翻页
Ctrl+C组合键: 终止当前程序，某些程序也可以用q键退出
Ctrl+L组合键: 清屏，也可以在终端输入clear
Ctrl+Shift+C组合键: 复制
Ctrl+Shift+V组合键: 粘贴
Tab键: 自动补全命令或文件名，省时准确

查看帮助说明 man/info/help

1
2
3

man ls
info ls
ls --help

下载工具 wget

1
2
3
4
5
6
7
8
9
10
11

leo@leo-PC:~$ wget http://luckyw.cn/img/1.jpg
--2016-4-29 20:30:36--  http://luckyw.cn/img/1.jpg
正在解析主机 luckyw.cn (luckyw.cn)... 166.62.28.80
正在连接 luckyw.cn (luckyw.cn)|166.62.28.80|:80... 已连接。
已发出 HTTP 请求，正在等待回应... 200 OK
长度： 234838 (229K) [image/jpeg]
正在保存至: “1.jpg”
1.jpg               100%[===================>] 229.33K   416KB/s    in 0.6s
2016-4-29 20:30:40 (416 KB/s) - 已保存 “1.jpg” [234838/234838])

查看当前所在的工作目录的全路径 pwd

1
2

leo@leo-PC:~$ pwd
/home/leo

阅读更多

JS原生ajax

ajax:一种请求数据的方式，不需要刷新整个页面
ajax的技术核心是XMLHttpRequest对象
ajax请求过程:创建XMLHttpRequest对象、连接服务器、发送请求、接收响应数据
下面简单封装一个函数，之后稍作解释

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

ajax({
    url: "./TestXHR.aspx",//请求地址
    type: "POST",//请求方式
    data: {name: "super", age: 20},//请求参数
    dataType: "json",
    success: function (response, xml) {
		//此处放成功后执行的代码
    },
    fail: function (status) {
		//此处放失败后执行的代码
    }
});
function ajax(options) {
    options = options || {};
    options.type = (options.type || "GET").toUpperCase();
    options.dataType = options.dataType || "json";
    var params = formatParams(options.data);
	//创建 - IE6 - 第一步
    if (window.XMLHttpRequest) {
        var xhr = new XMLHttpRequest();
    } else {//IE6及其以下版本浏览器
        var xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
	//连接和发送 - 第二步
    if (options.type == "GET") {
        xhr.open("GET", options.url + "?" + params, true);
        xhr.send(null);
    } else if (options.type == "POST") {
        xhr.open("POST", options.url, true);
		//设置表单提交时的内容类型
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(params);
    }
	//接收 - 第三步
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            var status = xhr.status;
            if (status >= 200 && status < 300) {
                options.success && options.success(xhr.responseText, xhr.responseXML);
            } else {
                options.fail && options.fail(status);
            }
        }
    }
}
//格式化参数
function formatParams(data) {
    var arr = [];
    for (var name in data) {
        arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
    }
    arr.push(("v=" + Math.random()).replace(".", ""));
    return arr.join("&");
}

阅读更多

• Workspace：工作区
• Index / Stage：暂存区
• Repository：仓库区（或本地仓库）
• Remote：远程仓库

新建代码库

1
2
3
4
5
6

# 在当前目录新建一个Git代码库
$ git init
# 新建一个目录，将其初始化为Git代码库
$ git init [project-name]
# 下载一个项目和它的整个代码
$ git clone [url]

阅读更多

使用:not()在菜单上添加/取消边框

很多人会这样给导航添加边框，然后给最后一个取消掉：

1
2
3
4
5
6
7
8

/* add border */
.nav li {
  border-right: 1px solid #666;
}
/* remove border */
.nav li:last-child {
  border-right: none;
}

其实，用CSS3的:not()可以简化为下面的代码：

1
2
3

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

当然，你也可以使用.nav li + li甚至.nav li:first-child ~ li，但是使用:not()可以使意图更加明确
所有主流浏览器均支持:not选择器，除了IE8及更早的版本

阅读更多

HTML:对Web标准的理解、浏览器内核差异、兼容性、hack
CSS:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应
JavaScript:数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等
其他:HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯

Cookie的优劣

cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的
优点:极高的扩展性和可用性

通过良好的编程，控制保存在cookie中的session对象的大小
通过加密和安全传输技术SSL，减少cookie被破解的可能性
只在cookie中存放不敏感数据，即使被盗也不会有重大损失
控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie

缺点:

Cookie数量和长度的限制:每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉
安全性问题:如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了
有些状态不可能保存在客户端:例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用

阅读更多

Flexbox playground
Flexbox Layout，W3C官方称为CSS弹性盒子布局，是在CSS3中定义的一种新的布局模式。Flexbox可以控制在容器内的子元素的对齐方式、排列方式以及排序顺序，即使其子元素的尺寸是未知或者动态的情况下。弹性容器的主要特点就是能够调整其子元素的宽度或者高度以使其能在不同分辨率的屏幕下能用最好的方式去填充可用空间
Flex布局的主要思想是让容器能使其子元素的宽高（或其他属性）能够以最好的方式去填充可用空间（主要是去适应不同的设备跟分辨率）。一个Flex弹性盒子能让子元素填充可用空间或者为了阻止子元素超出区域而进行收缩
Flexbox布局常用于小的应用程序组件之中，而CSS Grid布局模块将应用于大规模的布局之中
下面就用codepen代码演示的方式来先简单介绍Flex属性的原理，不同的属性是怎么样使用以及如何影响控制元素的布局的:

基础知识

在开始这部分知识介绍之前，我们先来看上面的这张图，简单了解一下Flex布局的盒子模型以及相关的术语:
flex盒子模型由容器flex container以及容器的直接子元素flex item组成
以容器flex container定义，有主坐标main axis以及纵坐标cross axis，主坐标为默认横向，默认从左到右，纵坐标默认为纵向，默认从上到下（当布局排列方式变化的时候，main axis跟cross axis的方向也会跟着变化）
子元素（flex item）在main axis方向的尺寸为main size，在cross axis方向的尺寸为cross size
如果你想了解有关这方面更详细的信息，可以阅读W3C官方中有关于Flexbox模块的相关资料。

阅读更多

Window 对象

Window对象表示浏览器中打开的窗口
如果文档包含框架（<frame>或<iframe>标签），浏览器会为HTML文档创建一个window对象，并为每个框架创建一个额外的window对象
注意:没有应用于window对象的公开标准，不过所有浏览器都支持该对象

Window 对象属性

阅读更多

Navigator 对象

Navigator对象包含有关浏览器的信息
注意:没有应用于navigator对象的公开标准，不过所有浏览器都支持该对象

Navigator 对象属性

阅读更多

如何定义一个数组

定义数组有三种方法：
1、常规方式:

1
2
3
4

var names = new Array();
names[0] = "CSS";
names[1] = "JS";
names[2] = "PHP";

2、简洁方式:

1

var names = new Array("CSS","JS","PHP");

3、字面量方式:

1

var names = ["CSS","JS","PHP"];

如何访问数组元素

通过下标的方式访问，注意：下标以0开始。

1
2

var names = new Array("CSS","JS","PHP");
alert(names[0]);//CSS

阅读更多

什么是数组?

数组对象是使用单独的变量名来存储一系列的值。
如果你有一组数据（例如：车名字），存在单独变量如下所示：

1
2
3

var car1="Saab";
var car2="Volvo";
var car3="BMW";

然而，如果你想从中找出某一辆车？并且不是3辆，而是300辆呢？这将不是一件容易的事！
最好的方法就是用数组。
数组可以用一个变量名存储所有的值，并且可以用变量名访问任何一个值。
数组中的每个元素都有自己的的ID，以便它可以很容易地被访问到

阅读更多