前端手艺人 一个前端菜鸟的自嘲

Js数组去重

05 Oct 2015

JavaScript 数组去重

列举几种方法来实现js数组中去重

1. 第一种和第二种方法都是利用了ES5中indexOf方法来去重数组

function unique(arr) {
	var n = [];
	for(var i = 0, len = arr.length; i < len; i++) {
		if(arr.indexOf(arr[i]) === i) {
			n.push(arr[i]);
		}
	}
	return n;
}

2.

function unique(arr) {
	var n = [];
	for(var i = 0, len = arr.length; i < len; i++) {
		if(n.indexOf(arr[i]) === -1) {
			n.push(arr[i]);
		}
	}
	return n;
}

3.　这个算法需要使用Array.prototype.sort() 方法来排序 但是sort()是利用字典码来排序的 也就是说 [1, 111, 2, 3]在sort()中是成立的。 使用需要在sort传入一个比较函数

 
function unique(arr) {
	arr.sort(function(a, b) { return a - b);
	var n = [arr[0]];
	for(var i = 0, len = arr.length; i < len; i++) {
		if(arr[i] !== n[n.length-1])
			n.push(arr[i])
	}
	return n;
}

4. hash + es5 来实现 速度最快

返回的对象 里面的数是字符串 不是数字

function unique(arr) {
	var obj = {};
	for(var i = 0, len = arr.length; i < len; i++) {
		obj[arr[i]] = true;
	}
	return Object.keys(obj);
}

5. 方法5与方法4的不同 只是多添加了一个obj对象 来储存数组的boolean属性

function unique(arr) {
	var obj = {}, result = [];
	for(var i = 0, len = arr.length; i < len; i++) {
		var key = arr[i];
		if(!obj[key]) {
			result.push(key);
			obj[key] = true;
		}
	}
	return result;
}

6. 该算法实现比较乱 不利于了解

function unique(arr) {
	var n = [];
	for(var i = 0, len = arr.length; i < len; i++) {
		for(var j = i + 1; j < len; j++) {
			if(arr[i] === arr[j]) 
				j = ++i;
			}
				n.push(arr[i]);
	}
	return n;
}
阅读全文

浏览器渲染

29 Sep 2015

浏览器如何渲染页面

浏览器解析

  1. 浏览器通过请求的URL进行域名解析， 向服务器发送请求，接收文件（比如html,css,js,image,audio等等）
  2. HTML文件加载后，开始绘制文档树(DOM tree）
  3. CSS样式加载后，开始绘制和构建CSS RUle tree
  4. Javascript脚本文件加载后，通过DOM API和CSS DOM API 来操作文档树和CSS Rule tree

浏览器渲染

  1. 浏览器引擎通过 DOM Tree 和 CSS Rule Tree 构建 Rendering Tree
  2. Rendering Tree 并不与 DOM Tree 对应，比如像 <head> 标签内容或带有 display: none; 的元素节点并不包括在 Rendering Tree 中 。
  3. 通过 CSS Rule Tree 匹配 DOM Tree 进行定位坐标和大小，是否换行，以及 position、overflow、z-index 等等属性，这个过程称为 Flow 或 Layout 。
  4. 最终通过调用Native GUI 的 API 绘制网页画面的过程称为 Paint 。

Repaint

当一个元素发生改变的时候，但是没有不会改变位置上的属性，比如改变了一个background-color，color，visibility，font等一些无关位置的属性时。浏览器会为新的样式重绘该元素，这个过程叫做Repaint(重绘）

Reflow

当一个元素的在html中的位置，宽度，高度以及影响页面布局的属性发生改变是，这些属性的改变可能会导致页面中的元素重新排列，这个过程叫做Reflow(回流)

导致Reflow的几个因素

  1. 增加，删除，改变DOM节点
  2. 增加，删除’class’样式
  3. 元素尺寸的改变
  4. 文本内容的改变
  5. 浏览器resize尺寸的改变
  6. 动画效果以及:hover的激活
  7. 等等

如何提升css选择器的性能

提升css选择器的性能

阅读全文

git基本教程

28 Sep 2015

Git 教程

安装 git客户端这里就不多说了

创建是使用git

然后生成SSH秘钥 > cd ~/.ssh 然后没有 直接创建 > ssh-keygen -t rsa -C “user.email”

进入生成的ssh目录 找到id_rsa.pub文件，将文件中的内容复制到github网站中ssh里去（前提是要有一个github账号）

验证是否配置成功 > ssh -T git@github.com

设置git的user的name, email > git config –global user.name “xxx” // 设置用户名 > git config –global user.email “xxx@gmail.com” // 设置邮箱

查看配置 > git config –list

上手操作git

可以在git中创建一个文件目录 用来储存本地repo 这里的filename表示在本地的地址 如果是window系统 最好是包括父目录的地址 （字符编码的原因 最好不要包括中文） > mkdir fileName

进入目录

这个很有用 当你刚刚进入git的时候 如果要操作某一个本地仓库的时候 首先要先进入文件中 > cd fileName

显示当前所在整个路径名 > pwd

初始化git 添加文件中

初始化 把目录变成一个git可以管理的仓库 > git init

查看当天仓库的状态（看看有没有修改） > git status

查看某一历史版本的提交内容 > git show fileName

查看修改了具体什么内容 > git diff fileName（zh.text)

diff还可以对比不同版本发生了什么修改 > git diff fileName-1 fileName-2

添加修改的文件到stage(暂存区) – 从working directory(工作区）add到stage(暂存区） > git add fileName // 一次添加一个

git add . // 添加所有更改的文件名

等价于 添加全部工作区的文件 到 stage储存区去 > git add –a

提交修改 – 将暂存区(stage)的文件添加到当前分支(master) -m “字符串” 表示添加是的信息 说明 > git commit -m “ “

显示仓库中具体某个文件信息

cat fileName

查看历史记录 > git log

查看具体的提交日志 更有规律 > git log –pretty=oneline

回退到以前的版本

git reset –hard HEAD^ // 回退的上一个版本

git reset –hard HEAD^^ // 回退前两个版本

git reset –hard HEAD~100 // 想回的太多 数不过来 可以直接回到上100个

如果回退上一个版本的概念不清楚 来 还有别的牛逼的方法 记录了每一个命令 操作 会输出一堆数字 commit_id 我们只要前面几个数字 git会自己去查找 > git reflog

回到具体的某个版本号 > git reset –hard commit_id

撤销修改

如果文件fileName还在工作区中，没有add提交到stage暂存区时 可以将工作区中的修改撤销掉 > git checkout –filename

如果文件在stage暂存区中，没有commit提交的当前分支master中， 可以把暂存区中修改撤销，重新放回到工作区中 > git reset HEAD　filename

但是如果你自己commit到master分支去了， 但是还没有push到远程仓库，那还有救。你可以回到以前的某个版本中去 > git reset –hard HEAD^ 或者 git reset –hard HEAD~100

如果已经push到远程仓库了，那么恭喜你，你中奖了！神都救不了你！

删除文件

如果想删除版本库中的一个文件 你可以直接在文件夹里面删除 然后更新即可； 但是如果你要装逼 在git里面删除 那也是可以的

rm filename

然后查看将要删除的文件是什么东西 > git status

git rm filename

git commit -m “remove filename”

如果你发现装逼没有成功 ，删错了版本库里面的文件，怎么办？ 可以回到删除前的状态 commit_id 代表以前的某一个版本库 > git checkout –commit_id

连接远程仓库

首先我们要在github上先创建一个repo， 创建好git仓库后 在本地git连接 注意 远程库的名字就是origin， 是git的默认叫法 语句的末尾要加上 .git > git remote add origin git@github.com:wohaiwo/Git.git

将本地库中的内容推送到远程库origin中去，这里注意的是 第一次push的时候 要加上 -u 这样我们就可以把本地的远程的关联起来 > git push -u origin master

下次push的时候我们就可以直接推送，不用连接远程库了 git push origin master

如何解除 关联的远程仓库

git remote

这时候会出现一个 origin 远程仓库 接着我们可以解除关联了 > git remote rm origin

这个时候我们又可以重新快乐的连接远程仓库了 > git remote add origin git@github.com:wohaiwo/Git.git

如果push的时候 失败

有很大的可能就是 github(远程仓库)的更新速度比本地的快 commit-origin > commit-local 导致无法推送到远程仓库(push)， 这个时候要先pull同步远程仓库 > git pull origin master

然后在推送到远程 > git push origin master

创建与合并分支

先创建一个新的分支 dev > git branch dev

然后切换到dev分支上，把工作区调到dev上 > git checkout dev

以上也有一个简便的方法 可以一个到位，先创建dev，然后再切换到dev上 > git checkout -b dev

查看列出的所有分支， 当前的分支前面有一个* > git branch

合并dev分支到master , master一般都是主分支 > git merge dev

删除dev分支 > git branch -d dev

当分支没有合并时，删除dev分支，将会丢失修改。如果要强行删除，可以使用牛逼哄哄的命令

git branch -D dev

分支管理

合并分支时，会有一个Fast-forward模式， 简称ff模式。 开启它是，我们可以合并分支的时候，我们没有看到详细的合并信息；关闭ff模式的时候， 我们可以看见详细的合并分支历史 > git merge –no-ff -m “描叙信息” dev

查看详细的合并分支历史 > git log –graph –pretty=oneline –abbrev-commit

clone 克隆一个本地库

github支持好几种协议 > git clone git@github.com:wohaiwo/Git.git

git clone https:github.com/wohaiwo/Git.git

BUG 分支

当我们在一个分支上操作的时候， 有一个bug出现，要我们马上停下手头的工作，去修改这个bug。但是我们可能在这个分支上没有完成，无法commit上去。 这时候，git提供了一个stash的功能，它可能暂时把当前的分支储存起来，等需要的时候，要调用出来

先查看工作区 > git status

储存当前工作现场 > git stash

查看工作储存在哪里 > git stash list

恢复到原来的工作现场 > git stash pop

上面这个指令包括两步

  1. git stash apply // 恢复

  2. git stash drop // 删除

后面还有 tag ， 未完待续

后面还有一些实际的操作原理 查看资料

廖雪峰-git教程

git官网教程

csdn上一个图文教程

阅读全文

使用markdown来编写blog

21 Aug 2015

本篇blog只是熟悉markdown的语法规则

先在来一张女神镇妖 女神

This is a paragraph, it’s surrounded by whitespace. Next up are some headers, they’re heavily influenced by GitHub’s markdown style.

这个标题组

标题2

标题3

标题4

一条道路直接通向我的加 关于我

  • 无序标签
  • alternative syntax 1
  • alternative syntax 2
    • an indented list item
  1. An
  2. ordered
  3. list

Inline markup styles:

  • italics
  • bold
  • code()

想要引用直接在一个 > , 如果想要嵌套引用 »

我是来嵌套的 > 我是嵌套中的嵌套

/* Some pointless Javascript */
var rawr = ["r", "a", "w", "r"];

Use two trailing spaces
on the right
to create linebreak tags

Finally, horizontal lines

阅读全文

Introducing Lanyon

02 Jan 2014

Lanyon is an unassuming Jekyll theme that places content first by tucking away navigation in a hidden drawer. It’s based on Poole, the Jekyll butler.

Built on Poole

Poole is the Jekyll Butler, serving as an upstanding and effective foundation for Jekyll themes by @mdo. Poole, and every theme built on it (like Lanyon here) includes the following:

  • Complete Jekyll setup included (layouts, config, 404, RSS feed, posts, and example page)
  • Mobile friendly design and development
  • Easily scalable text and component sizing with rem units in the CSS
  • Support for a wide gamut of HTML elements
  • Related posts (time-based, because Jekyll) below each post
  • Syntax highlighting, courtesy Pygments (the Python-based code snippet highlighter)

Lanyon features

In addition to the features of Poole, Lanyon adds the following:

  • Toggleable sliding sidebar (built with only CSS) via ☰ link in top corner
  • Sidebar includes support for textual modules and a dynamically generated navigation with active link support
  • Two orientations for content and sidebar, default (left sidebar) and reverse (right sidebar), available via <body> classes
  • Eight optional color schemes, available via <body> classes

Head to the readme to learn more.

Browser support

Lanyon is by preference a forward-thinking project. In addition to the latest versions of Chrome, Safari (mobile and desktop), and Firefox, it is only compatible with Internet Explorer 9 and above.

Download

Lanyon is developed on and hosted with GitHub. Head to the GitHub repository for downloads, bug reports, and features requests.

Thanks!

阅读全文