背景

总结前端学习的经验和知识点，提供给新人学习，已经有前端经验的同学提高.

前端各方向学习规划

加粗的需要重点掌握

原生JS

• 了解JS中的各种对象的含义 (Array、 String、Number、 RegExp、Function、Object、NULL、undefined、NaN)
• 了解JS中的各种运算符 (+、-、/、*、~、!、|、||、&、&&、%、[]、{}、=、>、<)
• 熟悉并学会使用 Array、 String、Number、 RegExp、Function、Object 的原生方法
• 掌握JS Dom相关API,（增、删、替换、复制等）
• 掌握JS对象的简单克隆和深度克隆
• 掌握JS对象的类型转换
• 掌握JS中的各类原生事件，以及事件代理
• 了解JS中的prototype属性的作用
• 熟悉JS中如何实现类，并了解实现继承的几种方法
• 熟悉this在各种场景下的所代表的含义
• 熟悉常用框架的API（代表框架: underscore \ jQuery \ handlebarsjs \ swiper )
• 熟悉JS中的各种设计模式，熟练使用几种设计模式（单例模式、工厂模式等），知道不同场景如何选择使用不同的设计模式。
• 熟悉JS中的模块化（模块化: CMD \ AMD）,以及几个代表性的框架的使用 seajs、requirejs、modjs.

CSS

• 了解CSS各种属性的含义
• 了解页面主流布局实现方式. (左右等分，左右定宽中自由，左定宽右自由，12等分页面，自由组合布局)
• 了解CSS sprite的原理和实现方式
• 了解各大主流浏览器的CSS差别和css hack，能写出兼容各类浏览器的CSS.
• 了解CSS font的原理和实现方式.
• 了解CSS3新增的各类属性含义.
• 了解CSS3 flex布局原理.
• 了解CSS3动画原理，会使用一些常用CSS动画
• 了解CSS动画和JS相结合的框架
• 掌握前端动画技巧，熟悉动画原理，知道常用的JS/CSS动画库，了解各类动画库原理并使用
• 掌握sass,less,stylus等css构建语言，并会使用

HTML

• 了解HTML语意化，并知道在合适的位置正确使用
• 了解HTML5新的标签和新特性
• 掌握canvas绘图
• 掌握localStorage本地数据存储
• 掌握HTML5多媒体标签的使用(audio、video)
• 掌握各类标签属性的含义

流程构建工具

• 了解前端为什么需要流程构建工具，要解决的问题是什么
• 掌握 Grunt\ Gulp 这类流程构建工具的原理并使用
• 掌握 webpack \ fis 这类前端集成解决方案的原理并使用
• 知道选择各类流程构建为自己的项目做项目构建
• 熟悉使用babel将es6代码转换到es5，放到浏览器运行

前端框架及扩展

• 了解前端各类开发模式，完成从面向过程编程到面向对象编程的转变
• 了解使用MVC模式开发，代表框架 Backbone.
• 了解使用MVVM模式开发，代表框架 angularjs、React、Vue.
• 熟悉组件化开发优势，知道 React\Vue\angularjs 中几种开发模式.
• 熟悉各类框架的组件编写方式.
• 会使用npm来管理各种前端模块.
• 掌握React-Native, ionic，mui，native.js, phonegap等工具和框架原理

Hybird

• 了解Hybrid App原理
• 了解Hybrid和正常H5页面的区别
• 熟练掌握bridge js的原理以及使用(先熟悉公司的bridgejs)
• 掌握开发调试Hybrid页面的技巧

Node

• 了解Node的运行环境, 熟悉window, Linux/Unix下不同的运行原理
• 了解Node与浏览器JS不同的各类全局变量(process, golbal )
• 了解Node中各类对象的含义（如: Buffer, Events）
• 了解CommonJs规范，熟悉JS模块化的含义
• 知道通过node官网来查看API返回
• 了解并会使用Node常用框架和类库（如: express, sockit.io, koa, co ）
• 熟悉nodejs的开发和调试技巧
• 熟悉使用node搭建简单http服务器
• 熟练使用express框架，并使用来搭建网站
• 熟练使用其他第三方库来辅助网站开发
• 会使用npm来管理各种模块，了解需要使用的模块源代码

工具

• 熟练掌握Chrome调试工具.
• 熟悉Photoshop切图, 并会使用Photoshop制作css sprite.
• 熟练使用svn\git等版本管理工具
• 熟悉各类编辑器(vim, sublime, webstorm)，并掌握自己最常用编辑器的各类插件扩展（语法高亮、代码提示等插件）
• 熟悉Github的使用，会找到其他人写的优秀代码来借鉴.
• 了解shell常用命令，会配置Nginx.
• 掌握Markdown等语言，熟练编写各类文档文章.
• 熟悉各类平台的辅助开发工具
• 了解前端的前沿技术，会搭建简单demo并运行，会比较各类工具优势劣势，以及使用场景

合作开发

• 了解开发过程中代码流向，由 本地电脑 -> 开发服务器 -> 测试服务器 -> 预发布服务器 -> 线上服务器.
• 掌握浏览器cookie的读写，了解http-only的含义
• 熟悉前后端调试的原理，知道怎么和后端程序员进行调试，知道熟悉怎么本地mock
• 熟悉整个项目的发布部署原理，知道本地代码和编译后代码的区别.
• 了解CDN原理，指导CDN的带来的好处和弊端，会发布代码到CDN.

语言扩展

• 熟练使用 es6 语法，掌握es6语法带来的代码变化
• 了解flash语法以及编写
• 了解php\python\java语法，会使用编写简单功能
• 更深入其他语言语法.

前端书籍推荐

参考如下链接:

知乎大神的整理
github上其他人整理

写在前面

使用 MacBook Pro 也2年多了，慢慢地积累了一些工作中好用的 APP，帮助自己更高效的工作。正版化也一直在进行着，除了 IDE 用的是教育版订阅之外，其他已经都是正版了（但我不排除 License 授权不支持工作用），力所能及的支持正版吧，毕竟自己也是软件开发从业者。

更新日志

2016.02.29 - 整理常用的生产力 APP

APP 合集

每个 APP 对应一段简单的描述，数量还不多，就暂时不分类了，大概的排一下。

• Dropbox - 云存储服务，用来同步代码及本机一些开发配置，需要科学上网才可使用
• iTerm - Mac OS 终端增强，配合 Oh My Zsh 效果更佳
• Evernote - 多功能笔记类应用，我比较喜欢它在 Chrome 下的剪藏功能
• GapDebug - Hybrid APP 调试利器，不过也可以调试普通的 Mobile Web 页面及 APP 内嵌页
• iStat Menus - 系统菜单栏增强，可以显示实时网速、CPU 内存使用情况、配件温度、电池状态等等…
• licecap - 跨平台的屏幕录制及 GIF 生成工具
• Dash - API 文档浏览器及代码片段管理器，IAP 后启动就不用读秒了
• ReadKit - RSS 订阅器，写代码写类了就看看圈内新闻吧
• 1Password - 密码管理器，以后你只需要记住一个主密码就行了，其他都随机生成吧
• MWeb - 优秀的 Markdown 编辑器，这篇文章就是在这个软件里写的哦
• WebStorm - 前端工程师必备的 IDE，杀牛就要用牛刀
• Sublime Text - 一款非常优秀的编辑器，有时候杀鸡焉用牛刀
• Chrome - 可能是世界上最好用的浏览器了
• Microsoft Office 2016 - 工作套件，有时候还是用得到的
• MPlayerX - 优秀的、支持格式广泛的播放器
• Sequel Pro - MySQL 数据库管理工具
• Foxmail - 邮件客户端，还是不错的
• Caffeine - 一款可以让你的 Mac 屏幕一直亮到没电的小软件
• Alfred - Mac 平台上最为传奇的效率作品,誉为神兵利器毫不为过,只能说到这里了
• Postman - 一款优秀的调试 API 的 Chrome APP
• Cakebrew - Brew 可视化管理工具
• SourceTree - Git 可视化管理工具
• BetterZip - 一款优秀的解压缩软件
• Moom - 一款优秀的窗口布局智能管理软件，用得好，很是能提供工作效率
• Bartender - 菜单栏的常住 APP icon 越来越多，是时候收起来一些了
• Mark Man - 标颜色、拉尺寸什么的，还是前端自己来好了
• Polarr Photo Editor - 泼辣修图，PS 卸载之后，就只能靠它简单的修图了
• Code Runner - 可直接跑多种编程语言的代码段，开发必备
• Surge for Mac - 网络调试及开发工具，还有的核心功能你懂的

整整2015年都没有写文章了，人都变得懒惰了，其实2015年做了不少事情，工作换到了离家只有20分钟路程的虎扑。终于到了年末，才得空来写篇自己的总结。看看2015年做的事情，自己的长进在哪里。

关于项目

2015年算是做的项目比较多的了，离家近了反而更多的加班，前辈用经验告诉我，不要离公司太近，家和公司很容易分不清，现在终于体会到了。

• 搭了一个知识分享平台
• 拉小伙伴搭了一个API平台
• 推动m站、Hybrid、PC站的前端框架统一化
• 和客户端开发了一个我们自己的bridge js
• 开发了js watch平台，临末做了几个活动。

事情确实不少，但是来到这里也非常开心，认识了一群开朗乐观的同事，团队也有了自己的每周例会，能和大家一起获得公司的认可，更是难能可贵的回忆，我们的团队终于知道要做什么，而不是把时间浪费在各种稀奇古怪的诡异框架里，可以最大限度的关注项目本身，这正是一个团队最大的正能量。

关于团队的2016

第一件事就是，继续保持高效的开发能力，也要对新生事物保持一颗学习的心，再次祭出乔帮主的话

keep hungry keep foolish

时刻保持自己饥渴的学习能力，比自己能力牛的且更努力的人大有人在，天道酬勤，积极完成团队的转型，让每个成员都有清晰的产品意识，对技术有清晰的原件，而不是一味的沉浸在每个项目中不能自拔。我们要做出伟大的产品，否则我们的技术将失去意义。

另外要做的一件事，也是对一个高速前进团队必不可少的东西，流程和规范。既要保证流程顺畅，又要保证代码规范可控，提高代码的质量，减少项目的耦合，先设计再编码。加强review机制和代码设计的交流。让大家认识到代码规范的重要性，提高代码的可维护性。

关于自己

2015年虽然换了新的环境，但是两件事并没有做好，一是健身，二是读书，健身因为天冷荒废了，坚持两个月，效果并不明显，在新的一年的春天还要继续，目前依然是6块腹肌。关于读书，总在找借口逃避，临末总算找到两本看完，看书比较失败，2016年有新的读书计划，把自己的知识面再提升一个层次。

对于想去学习的，不能懈怠，提高自己的效能，想去做的就马上去做。想去学习的就马上动手，畏首畏脚往往错过最佳的时期。

程序员知识的半衰期有多长？通常人们经常说是5年。换句话说，你所知道编程知识的一半将会在5年内被淘汰。类似的观点是，“编程很糟糕，因为你几年前知道的东西现在都用不上了”。

咋一看，这似乎合情合理。毕竟，总有新的编程语言和技术源源不断地冒出来。不过，我却认为上面的观点是不正确的。编程知识比一些人所意识到的有更长的实用期。

语法并不难

着手学习一门新的编程语言。对非程序员来说，当你知道Java的时候学习Python就好像在你知道英语的前提下去学习法语一样。当然，但编程学习也并不是完全这个样子的，会有新的语法要学习，但这仅仅是表面上看起来有点难，所有编程语言的核心概念都是相同的。

使用任何一门语言编写一个程序，你会使用到像类型、数据结构和逻辑这样的基础知识。如果你已经了解了布尔函数、整型、浮点数和字符串，这些类型在新语言里也是类似的用法。当然像列表、集、字典和目录树这样的数据结构也是一样的，并且你使用的逻辑也将是算数运算、if语句、循环以及函数调用等等。

此外，像该使用哪一种算法、如何分解问题以及变量和函数的命名等关键技巧都能在新语言里面直接套用。这些都是在各种编程语言之中通用的编程知识。借用“没有银弹”里的术语：“语言的语法是偶然的知识，但如何编程才是至关重要的知识。”

库和工具也是这样。即使你一点也不明白新语言里的正则表达式应该怎么用，你也知道它们最可能都支持什么。找到关于怎么使用它们的知识并不难，难的是怎么使用它们，这才是有价值的知识。对于像IDE这样的工具也是这样的道理，你可能并不知道细节，但你就是知道它们能够做什么。

所以学习一门新语言并不是什么了不起的事情，但如果你跳槽了，可能仍有很多知识需要学习。我把知识分为以下3个维度：

3个维度的知识

编程：这个层次的知识是编程语言、范式、技术和工具。就像我上面所说的，即使像语法这样的细节可能完全不同，但各种编程语言中的很多核心概念是相同的。

域：这就是你知道的编程里用到关于环境的知识。例如，如果你在电信工作，就是关于各种协议如何工作、如何处理短信、如何计费和监控等之类的知识。你在某个部门工作的时间越长，你对这块了解的就越多，你对工作的贡献可能就越大。

代码库：这个是要看公司的。当你已经在某个公司工作了很长时间时，你就会明白你的编程方式：你明白哪些事情做完了，哪些部分是棘手和无法凭直觉做出判断的，为什么某件事情要用某种方式来做的整个过程等等。

活到老，学到老

作为一个程序员，当你在以上3个维度的知识都很健全时，你才是最有价值的。如果你这时候跳槽，不可避免的是你一开始将会对新的代码库一无所知，你就不得不开始认真工作和学习。

然而，即使你跳槽后，你学到的编程和域的知识还是有用的。掌握几门编程语言会给你更多的参考意见，让你明白事情是怎么用不同的方式来完成的（即使基本原理一样）。通常来说多读点软件开发的好书也是不错的。

最后，我认为能让软件开发变得有意思和让人兴奋的部分原因是总能学到新的东西。你永远都不会厌烦，所以保持学习的状态吧。你学到的大部分只是都会让你变成一个更优秀的程序员，即使每年都有新的编程语言不断被发明出来。

JsDoc Toolkit 是一个把js描述格式化成文档的工具。开发者只需按JsDoc的规范写好注释就可以很方便导出文档。它是google 推荐的 JsDoc生成工具。 基于java的注释规则来生成文档。后来有人开发出来了nodejs版本。

注释规范

完整规范参考地址:http://usejsdoc.org/

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

/***
	@abstract (synonyms: @virtual)
	This member must be implemented (or overridden) by the inheritor.
	@access
	Specify the access level of this member (private, public, or protected).
	@alias
	Treat a member as if it had a different name.
	@augments (synonyms: @extends)
	This object adds onto a parent object.
	@author
	Identify the author of an item.
	@borrows
	This object uses something from another object.
	@callback
	Document a callback function.
	@class (synonyms: @constructor)
	This function is intended to be called with the "new" keyword.
	@classdesc
	Use the following text to describe the entire class.
	@constant (synonyms: @const)
	Document an object as a constant.
	@constructs
	This function member will be the constructor for the previous class.
	@copyright
	Document some copyright information.
	@default (synonyms: @defaultvalue)
	Document the default value.
	@deprecated
	Document that this is no longer the preferred way.
	@description (synonyms: @desc)
	Describe a symbol.
	@enum
	Document a collection of related properties.
	@event
	Document an event.
	@example
	Provide an example of how to use a documented item.
	@exports
	Identify the member that is exported by a JavaScript module.
	@external (synonyms: @host)
	Document an external class/namespace/module.
	@file (synonyms: @fileoverview, @overview)
	Describe a file.
	@fires (synonyms: @emits)
	Describe the events this method may fire.
	@function (synonyms: @func, @method)
	Describe a function or method.
	@global
	Document a global object.
	@ignore
	Omit a symbol from the documentation.
	@inner
	Document an inner object.
	@instance
	Document an instance member.
	@kind
	What kind of symbol is this?
	@lends
	Document properties on an object literal as if they belonged to a symbol with a given name.
	@license
	Identify the license that applies to this code.
	@link
	Inline tag - create a link.
	@member (synonyms: @var)
	Document a member.
	@memberof
	This symbol belongs to a parent symbol.
	@mixes
	This object mixes in all the members from another object.
	@mixin
	Document a mixin object.
	@module
	Document a JavaScript module.
	@name
	Document the name of an object.
	@namespace
	Document a namespace object.
	@param (synonyms: @arg, @argument)
	Document the parameter to a function.
	@private
	This symbol is meant to be private.
	@property (synonyms: @prop)
	Document a property of an object.
	@protected
	This member is meant to be protected.
	@public
	This symbol is meant to be public.
	@readonly
	This symbol is meant to be read-only.
	@requires
	This file requires a JavaScript module.
	@returns (synonyms: @return)
	Document the return value of a function.
	@see
	Refer to some other documentation for more information.
	@since
	When was this feature added?
	@static
	Document a static member.
	@summary
	A shorter version of the full description.
	@this
	What does the 'this' keyword refer to here?
	@throws (synonyms: @exception)
	Describe what errors could be thrown.
	@todo
	Document tasks to be completed.
	@tutorial
	Insert a link to an included tutorial file.
	@type
	Document the type of an object.
	@typedef
	Document a custom type.
	@variation
	Distinguish different objects with the same name.
	@version
	Documents the version number of an item.	 
 **/

示例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
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

//示例一
/** 
 * @namespace 简单的方法标注示例 
 * @author <llying@javaeye.com>
 * @version 0.1 
 */ 

/** 
 * @description 加法运算 
 * @param {number} num1 加数 
 * @param {number} num2 被加数 
 * @return {number} result 结果 
 */ 
function add(num1,num2){ 
	return num1 + num2; 
} 

/** 
 * @description 减法运算 
 * @param {Num} num1 减数 
 * @param {Num} num2 被减数 
 * @return {Num} result 结果 
 */ 
function minus(num1,num2){ 
  return num1 - num2; 
} 

//示例二
/** 
 * @class 简单的类对象标注示例 
 * @author <llying@javaeye.com> 
 * @version 0.1 
 */ 
/** 
 * @author <llying@javaeye.com> 
 * @constructor Person 
 * @description 一个Person类 
 * @see The <a href="#">llying</a >. 
 * @example new Parent(“张三”,15); 
 * @since version 0.1 
 * @param {String} username 姓名 
 * @param {Num} age 年龄 
 */ 
function Person(username,age) 
{ 
/** 
 * @description {Sting} 姓名 
	 * @field 
 */ 
	this.username = username; 
/** 
 * @description {Num} 年龄 
 * @field 
 */ 
	this.age = age 
/** 
 * @description 弹出say内容 
 * @param {String} content 内容 
 */ 
	this.say = function(content) 
	{ 
		alert(this.username+" say :"+content); 
	} 
/** 
 * @description 返回json格式的对象 
 * @return {String} json格式 
 * @see Person#say 
 */ 
	this.getJson = function(){ 
		return "{name:"+this.username+",age"+this.age+"}"; 
	} 
}

下载安装

1

npm install -g jsdoc

github项目地址:https://github.com/jsdoc3/jsdoc
jsdoc官网: http://usejsdoc.org/
google项目地址:http://code.google.com/p/jsdoc-toolkit-ant-task/ (经常被墙，无法访问，也是没办法，只好用这个nodejs版了)

应该是对于没有很好的方法挣钱而感到特别着急，当下最要紧的还是学习，做好最要紧的事情，掌握更多技能，打好扎实的基础。贸然四处乱投医，难有成效。

戒骄戒躁，多看书，多写代码，让自己的情绪平稳下来。

最近去研究一下jsdoc，把公共文件的注释补充起来。

1.作用

Linux系统中grep命令是一种强大的文本搜索工具，它能使用正则表达式搜索文本，并把匹 配的行打印出来。grep全称是Global Regular Expression Print，表示全局正则表达式版本，它的使用权限是所有用户。

2.格式

grep [options]

3.主要参数

[options]主要参数：
－c：只输出匹配行的计数。
－I：不区分大 小写(只适用于单字符)。
－h：查询多文件时不显示文件名。
－l：查询多文件时只输出包含匹配字符的文件名。
－n：显示匹配行及 行号。
－s：不显示不存在或无匹配文本的错误信息。
－v：显示不包含匹配文本的所有行。
pattern正则表达式主要参数：
\： 忽略正则表达式中特殊字符的原有含义。
^：匹配正则表达式的开始行。
$: 匹配正则表达式的结束行。
\<：从匹配正则表达 式的行开始。
>：到匹配正则表达式的行结束。
[ ]：单个字符，如[A]即A符合要求 。
[ - ]：范围，如[A-Z]，即A、B、C一直到Z都符合要求 。
。：所有的单个字符。

• ：有字符，长度可以为0。

4.grep命令使用简单实例

1

$ grep ‘test’ d*

显示所有以d开头的文件中包含 test的行。

1

$ grep ‘test’ aa bb cc

显示在aa，bb，cc文件中匹配test的行。

1

$ grep ‘[a-z]\{5\}’ aa

显示所有包含每个字符串至少有5个连续小写字符的字符串的行。

1

$ grep ‘w\(es\)t.*\1′ aa

如果west被匹配，则es就被存储到内存中，并标记为1，然后搜索任意个字符(.)，这些字符后面紧跟着 另外一个es(\1)，找到就显示该行。如果用egrep或grep -E，就不用”\”号进行转义，直接写成’w(es)t.\1′就可以了。

5.grep命令使用复杂实例

假设您正在’/usr/src/Linux/Doc’目录下搜索带字符 串’magic’的文件：

1

$ grep magic /usr/src/Linux/Doc/*

sysrq.txt: How do I enable the magic SysRQ key?
sysrq.txt: How do I use the magic SysRQ key?
其中文件’sysrp.txt’包含该字符串，讨论的是 SysRQ 的功能。
默认情况下，’grep’只搜索当前目录。如果 此目录下有许多子目录，’grep’会以如下形式列出：
grep: sound: Is a directory
这可能会使’grep’ 的输出难于阅读。这里有两种解决的办法：
明确要求搜索子目录：grep -r
或忽略子目录：grep -d skip
如果有很多 输出时，您可以通过管道将其转到’less’上阅读：

1

$ grep magic /usr/src/Linux/Documentation/* | less

这样，您就可以更方便地阅读。

有一点要注意，您必需提供一个文件过滤方式(搜索全部文件的话用 *)。如果您忘了，’grep’会一直等着，直到该程序被中断。如果您遇到了这样的情况，按 ，然后再试。

下面还有一些有意思的命令行参数：

1
2
3
4
5
6
7
8
9

grep -i pattern files #不区分大小写地搜索。默认情况区分大小写，  
grep -l pattern files #只列出匹配的文件名，  
grep -L pattern files #列出不匹配的文件名，  
grep -w pattern files #只匹配整个单词，而不是字符串的一部分(如匹配’magic’，而不是’magical’)，  
grep -C number pattern files #匹配的上下文分别显示[number]行，  
grep pattern1 | pattern2 files #显示匹配 pattern1 或 pattern2 的行，  
grep pattern1 files | grep pattern2 #显示既匹配 pattern1 又匹配 pattern2 的行。  
grep -n pattern files  #即可显示行号信息  
grep -c pattern files  #即可查找总行数

这里还有些用于搜索的特殊符号：
\< 和 > 分别标注单词的开始与结尾。
例如：

1
2
3

grep man * #会匹配 ‘Batman’、’manic’、’man’等，  
grep ‘\<man’ * #匹配’manic’和’man’，但不是’Batman’，  
grep ‘\<man\>’ #只匹配’man’，而不是’Batman’或’manic’等其他的字符串。

‘^’：指匹配的字符串在行首，
‘$’：指匹配的字符串在行 尾，

Grep 命令 用法大全

1、 参数：

-I ：忽略大小写
-c ：打印匹配的行数
-l ：从多个文件中查找包含匹配项
-v ：查找不包含匹配项的行
-n：打印包含匹配项的行和行标

2、RE（正则表达式）

\ 忽略正则表达式中特殊字符的原有含义
^ 匹配正则表达式的开始行
$ 匹配正则表达式的结束行
\< 从匹配正则表达式的行开始
> 到匹配正则表达式的行结束
[ ] 单个字符；如[A] 即A符合要求
[ - ] 范围 ；如[A-Z]即A，B，C一直到Z都符合要求
. 所有的单个字符

• 所有字符，长度可以为0

3、举例

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162

ps -ef | grep in.telnetd 
root 19955 181 0 13:43:53 ? 0:00 in.telnetd 

more size.txt size #文件的内容 
b124230 
b034325 
a081016 
m7187998 
m7282064 
a022021 
a061048 
m9324822 
b103303 
a013386 
b044525 
m8987131 
B081016 
M45678 
B103303 
BADc2345 

more size.txt | grep '[a-b]' #范围 ；如[A-Z]即A，B，C一直到Z都符合要求 
b124230 
b034325 
a081016 
a022021 
a061048 
b103303 
a013386 
b044525 

more size.txt | grep '[a-b]'* 
b124230 
b034325 
a081016 
m7187998 
m7282064 
a022021 
a061048 
m9324822 
b103303 
a013386 
b044525 
m8987131 
B081016 
M45678 
B103303 
BADc2345 

more size.txt | grep 'b' #单个字符；如[A] 即A符合要求 
b124230 
b034325 
b103303 
b044525 

more size.txt | grep '[bB]' 
b124230 
b034325 
b103303 
b044525 
B081016 
B103303 
BADc2345 

grep 'root' /etc/group 
root::0:root 
bin::2:root,bin,daemon 
sys::3:root,bin,sys,adm 
adm::4:root,adm,daemon 
uucp::5:root,uucp 
mail::6:root 
tty::7:root,tty,adm 
lp::8:root,lp,adm 
nuucp::9:root,nuucp 
daemon::12:root,daemon 

grep '^root' /etc/group #匹配正则表达式的开始行 
root::0:root 

grep 'uucp' /etc/group 
uucp::5:root,uucp 
nuucp::9:root,nuucp 

grep '\<uucp' /etc/group 
uucp::5:root,uucp 

grep 'root /etc/group #匹配正则表达式的结束行 
root::0:root 
mail::6:root 

more size.txt | grep -i 'b1..*3' -i #忽略大小写 
b124230 
b103303 
B103303 

more size.txt | grep -iv 'b1..*3' -v #查找不包含匹配项的行 
b034325 
a081016 
m7187998 
m7282064 
a022021 
a061048 
m9324822 
a013386 
b044525 
m8987131 
B081016 
M45678 
BADc2345 

more size.txt | grep -in 'b1..*3' 
1:b124230 
9:b103303 
15:B103303 

grep ' /etc/init.d/nfs.server | wc -l 
128 

grep '\ /etc/init.d/nfs.server | wc –l #忽略正则表达式中特殊字符的原有含义 
15 

grep '\ /etc/init.d/nfs.server 

case "$1" in 
>/tmp/sharetab.$ 
[ "x$fstype" != xnfs ] && 
echo "$path\t$res\t$fstype\t$opts\t$desc" 
>>/tmp/sharetab.$ 
/usr/bin/touch -r /etc/dfs/sharetab /tmp/sharetab.$ 
/usr/bin/mv -f /tmp/sharetab.$ /etc/dfs/sharetab 
if [ -f /etc/dfs/dfstab ] && /usr/bin/egrep -v '^[ ]*(#|$)' 
if [ $startnfsd -eq 0 -a -f /etc/rmmount.conf ] && 
if [ $startnfsd -ne 0 ]; then 
elif [ ! -n "$_INIT_RUN_LEVEL" ]; then 
while [ $wtime -gt 0 ]; do 
wtime=`expr $wtime - 1` 
if [ $wtime -eq 0 ]; then 
echo "Usage: $0 { start | stop }" 


more size.txt 

the test file 
their are files 
The end 

grep 'the' size.txt 
the test file 
their are files 

grep '\<the' size.txt 
the test file 
their are files 

grep 'the\>' size.txt 
the test file 

grep '\<the\>' size.txt 
the test file 

grep '\<[Tt]he\>' size.txt 
the test file

简介

使用正则表达式的一个多用途文本搜索工具.这个php?name=%C3%FC%C1%EE” onclick=”tagshow(event)” class=”t_tag”>命令本来是ed行编辑器中的一个php?name=%C3%FC%C1%EE” onclick=”tagshow(event)” class=”t_tag”>命令/过滤器:

g/re/p -- global - regular expression - print.

基本格式
grep pattern [file…]
(1)grep 搜索字符串 [filename]
(2)grep 正则表达式 [filename]
在文件中搜索所有 pattern 出现的位置, pattern 既可以是要搜索的字符串,也可以是一个正则表达式.
注意：在输入要搜索的字符串时最好使用双引号/而在模式匹配使用正则表达式时，注意使用单引号

grep的选项

-c 只输出匹配行的计数  
-i 不区分大小写（用于单字符）  
-n 显示匹配的行号
-v 不显示不包含匹配文本的所以有行  
-s 不显示错误信息   
-E 使用扩展正则表达式  
更多的选项请查看：man grep  

常用grep实例

(1)多个文件查询

1

grep "sort" *.doc       #见文件名的匹配

(2)行匹配:输出匹配行的计数

1

grep -c "48" data.doc   #输出文档中含有48字符的行数

(3)显示匹配行和行数

1

grep -n "48" data.doc       #显示所有匹配48的行和行号

(4)显示非匹配的行

1

grep -vn "48" data.doc      #输出所有不包含48的行

(4)显示非匹配的行

1

grep -vn "48" data.doc      #输出所有不包含48的行

(5)大小写敏感

1

grep -i "ab" data.doc       #输出所有含有ab或Ab的字符串的行

正则表达式的应用

(1)正则表达式的应用 (注意：最好把正则表达式用单引号括起来)

1

grep '[239].' data.doc      #输出所有含有以2,3或9开头的，并且是两个数字的行

(2)不匹配测试

1

grep '^[^48]' data.doc      #不匹配行首是48的行

(3)使用扩展模式匹配

1

grep -E '219|216' data.doc

(4) …

这需要在实践中不断应用和总结，熟练掌握正则表达式。

使用类名

可以使用国际模式匹配的类名：
[[:upper:]] [A-Z]
[[:lower:]] [a-z]
[[:digit:]] [0-9]
[[:alnum:]] [0-9a-zA-Z]
[[:space:]] 空格或tab
[[:alpha:]] [a-zA-Z]

(1)使用

1

grep '5[[:upper:]][[:upper:]]' data.doc     #查询以5开头以两个大写字母结尾的行

gulp 是前端开发过程中对代码进行构建(Build)的工具，类似于Java世界中的Ant或者Maven。与Ant或Maven类似，在用gulp进行build时，经常需要顺序执行任务：在前一个任务彻底结束后才开始下一个任务。比如，在进行新的一次LESS编译前，首先需要保证删除上一次编译的结果。也即，对于以下两个gulp任务：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var gulp = require('gulp'),
    less = require('gulp-less'),
    clean = require('gulp-clean');

gulp.task('compileLESS', function(){
    gulp.src('sample.less')
    .pipe(less())
    .pipe(gulp.dest('sample.css'));
 });

gulp.task('clean', function(){
    gulp.src('sample.css', { read:false })
    .pipe(clean());
});

必须保证’clean’任务执行完毕后才开始进行’compileLESS’任务。

gulp中的顺序执行方案

在gulp对任务的定义中(gulp.task)，可以声明任务之间的依赖。比如，可以声明任务’compileLESS’依赖于’clean’:

1
2
3
4
5
6
7

gulp.task('compileLESS', ['clean'], function(){
    //compile LESS file...
});
gulp.task('clean', function(){
       gulp.src('sample.css', { read:false })
           .pipe(clean());
});

在声明任务依赖后，可以保证’clean’定义的function执行完毕后，’compileLESS’定义的function才开始执行。
不过，即使定义了任务依赖，对于上述例子我们依然会发现：有时，需要清理的文件尚未删除干净，用于编译的任务就已经开始生成文件了；这在文件较多的项目环境下尤为常见。原因在于，对’clean’定义的function而言，虽然函数本身已经执行完毕了，但是文件删除操作可能仍在进行 — gulp任务中的操作大多数都是数据流(Stream)的操作，其操作进度与函数执行无关。
如果需要在文件彻底清理后才开始执行’compileLESS’任务，则需要在’clean’任务中进行特殊编码：令其返回最终的数据流(Stream)对象：

1
2
3
4
5
6
7

gulp.task('compileLESS', ['clean'], function(){
    //compile LESS file...
});
gulp.task('clean', function(){
    return gulp.src('sample.css', { read:false })
                .pipe(clean());
});

问题根源

应该承认，这样的一种依赖定义方式是不直观的、令人困惑的。然而思考之后会发现，对于这个问题，不能简单的用”bug”来进行总结。
问题的难点在于：如何在一个任务运行系统中监听数据流的结束？对于数据流而言，代码语句的执行结束仅仅意味着数据操作的开始，唯一能确定数据操作结束的是最后一个数据流所触发的end事件；因此，只有想办法监听到这个end事件，才有可能实现真正意义上的任务依赖。而在任务定义的函数中返回最后一个数据流，是一个相对来说使用起来最方便的方案。
事实上，gulp中的任务运行系统并不是自己实现的，而是直接使用了 orchestrator 。在gulp的源代码中可以发现，gulp继承了orchestrator，而gulp.task仅仅只是orchestrator.add的别名而已：

1
2
3
4
5
6
7
8
9
10

//gulp source code
var util = require('util');
var Orchestrator = require('orchestrator');

function Gulp() {
  Orchestrator.call(this);
}
util.inherits(Gulp, Orchestrator);

Gulp.prototype.task = Gulp.prototype.add;

在orchestrator中，解决上述任务依赖的方式有三种：

1. 在任务定义的function中返回一个数据流，当该数据流的end事件触发时，任务结束。
2. 在任务定义的function中返回一个promise对象，当该promise对象resolve时，任务结束。
3. 在任务定义的function中传入callback变量，当callback()执行时，任务结束。

gulp脚本中可以使用这三种方法来实现任务依赖，不过由于gulp中的任务大多是数据流操作，因此以第一种方法为主。

先声明哦，我其实也算是一个新手，非常喜欢在mac下开发，这里只是简单罗列一下我mac上一些用的很爽的软件，只是针对程序开发来说的，如果你有不同意见或者补充，也欢迎来评论。

Chrome

google的浏览器，可以使用safari下载一个，是开发的利器，也是我最喜欢的浏览器，必须排名第一，顺便说一句云同步书签和插件，实在太爽了。

Xcode

作为apple的王道的编辑器，手机和pc的应用开发，都离不开的一个编辑器，非常重要，如果不安装，可能连wget都没法安装使用.就不在详细说明了，非常强大的编辑器，正好我也在学习object-c开发。在苹果商店就可以直接下载，不过非常慢，可以搜索个靠谱的CDN下载。

Sublime text

非常好用的文本编辑器，强大的不可思议，很多插件，很多主题，非常让人喜欢，所以也是我必须安装的软件之一，不解释。

Office套件

一直很鄙视ms，但是不得不说Office的强大，强大到每个人都用他们来写文档，处理表格，这个也是必须安装的软件套装，word, excel, outlook,onenote等等。

QQ

日常软件，为什么需要？你懂的。

iStat Menus

一款非常好用的mac插件，可以看到电脑的性能的一切情况，内存，硬盘，网络，CPU，电源等。可以看到什么软件比较耗电，比较耗资源，也看到自己电脑的不足，快速修复。

keynote

不同于windows上的演示软件，比Office ppt更赞的演示软件，大家不妨试试。

iExplorer

这是一款管理手机app的软件，类似window下面的itools，至于怎么好用，需要大家去摸索了。

Charles

一款mac下的代理软件，类似window下的fiddler.

qq输入法

mac下不错的中文输入法，让你可以在mac也打字如飞.

其他

mac下面有很多好用的功能和软件，比如说任务清单，会议邀请，日历等，让你水果手机和电脑，无障碍连通，感觉云的便利。
欢迎留言补充。

nodeppt项目地址 ，周末在网上闲逛，看到 @三水清 写了一个nodeppt项目，看了demo以后，顿时感觉非常炫酷，兴奋之余，想学习一下。
看了一遍nodeppt下面的介绍，了解了他的功能，ppt可以使用markdown来写，通过[slide]来区分ppt的每页，这之前倒是不难理解，把markdown解析成html，通过js库来控制ppt的切换动画。使用一些css3和html5的特效。
之后看了这个ppt具有的其他功能，分屏幕，还有socket控制切屏动画，可以在手机上控制pc的ppt切屏，这个功能非常好，很有创意，看到项目在github上有500+的star，心中十分感慨，都是熟悉的技术，把他们整合起来就是很好的很有创意的东西。

大家不妨使用

npm install nodeppt -g

安装体验下。