下面的代码基于javascript原型继承设计，轻量，好用。

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

 var initializing = false,
	fnTest = /xyz/.test(function() {
		xyz;
	}) ? /\b_super\b/ : /.*/;

var Class = function() {};
Class.extend = function(prop) {
	var _super = this.prototype;
	initializing = true;
	var prototype = new this();
	initializing = false;
	for (var name in prop) {
		prototype[name] = typeof prop[name] == "function" &&
			typeof _super[name] == "function" && fnTest.test(prop[name]) ?
			(function(name, fn) {
				return function() {
					var tmp = this._super;

					this._super = _super[name];

					var ret = fn.apply(this, arguments);
					this._super = tmp;

					return ret;
				};
			})(name, prop[name]) :
			prop[name];
	}
	function Class() {
		if (!initializing && this.init)
			this.init.apply(this, arguments);
	}
	Class.prototype = prototype;
	Class.prototype.constructor = Class;
	Class.extend = arguments.callee;
	return Class;
};

使用方式

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

var A = Class.extend({
    init :  function(){
        console.log('the class');
    }
});
//B继承A
var B = A.extend({
    init : function(){
        this._super();
    }
});
new B();

1.尽可能减少HTTP请求数（请求耗时）
2.使用CDN（内容分发网络）
3.添加Expire/Cache-Control头（缓存设置）
4.启用Gzip压缩（压缩css和js代码，混淆js代码）
5.把css放在页面最上面（方便加载渲染）
6.把script放在页面最下面（防止script代码影响页面展示）
7.避免在css中使用Expression
8.把JavaScript和css放在外部分文件中（js和css文件浏览器是自动缓存的不会重复加载）
9.减少DNS查询
10.避免重定向

Package Control

包管理器，安装这个插件之后可以管理sublime的所有的扩展包的安装和卸载
安装方法如下，打开console窗口（CTRL+/views>show console）将下面这段代码copy进去敲enter即可

1

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

接下来得插件安装，

1. 打开命令面板ctrl+shift+p
2. 输入ip,enter
3. 输入插件名称敲击enter

Emmet

前身事大名鼎鼎的zen coding，仅仅需要一行代码就能快速生成html代码。简单的语法既可以生成负责html css代码(点击标题，可以学习emmet语法)，

SideBar Enhancements

这个插件改进了侧边栏，增加了许多功能：将文件移入回收站，在浏览器中浏览，将文件复制到剪切板。

AutoFileName

文件名称自动补全插件

CSS3

css3的语言环境，也会对一些css3的属性惊醒提示

DocBlockr

文本注释插件，再js方法上敲击/**+ enter即可变成下面的代码

1
2
3
4
5

/**
 * [ description]
 * @param  {[type]} item [description]
 * @return {[type]}      [description]
 */

JsFormat

javascript格式化插件，安装之后选择文本ctrl+alt+f可以格式化指定文本

SublimeCodeIntel

多种语言提示，代码自动补齐，快速跳转到变量定义，在状态栏显示函数快捷信息等
它支持的语言有：PHP, Python, RHTML, JavaScript, Smarty, Mason, Node.js, XBL, Tcl, HTML, HTML5, TemplateToolkit, XUL, Django, Perl, Ruby, Python3.

SublimeLinter

代码检查插件，可以提示你的编码错误，但是需要安装子包，例如
1.javascript语法检查 SublimeLinter-jshint这个包是必须得；
2.css语法检查 sublimeLinter-csslint

SublimeLinter-csslint

配置sublimelinter，的css语法检查插件

SublimeLinter-jshint

配置sublimelinter，的js语法检查插件

Tag

HTML/XML 标签缩进、补全和校验；

Terminal

打开控制台插件，安装后配置上下面的快捷键即可

1

{ "keys": ["command+shift+m"], "command": "open_terminal" },`

TrailingSpaces

多余空格标记插件，会标记每行多余的空格，加入下边的快捷键配置即可一次删除

1

{ "keys": ["command+shift+t"], "command": "delete_trailing_spaces" },

主题包

sublime本身的外表就已经很好看了，如果大家对颜值有特殊要求的，可以点击这里

各种framework包

• jQuery jquery的代码补全包；
• Angular angular的代码补全及常用指令提示；
• less less的环境高亮
• saas sass的语法环境高亮，以及代码提示
  ….

javascript是单线程语言，所谓”单线程”，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。
这种方式比较好控制，不会存在像java那个多线程死锁等等复杂的问题，缺点也很明显，当一个任务执行较长时间时，后续的任务需要等待，会拖延整个程序的执行，使浏览器卡死。
为了解决这个问题，javascript将任务分为两种：同步（Synchronous）和异步（Asynchronous）;

snippet

我们在编写代码的时候老是有些代码模板重复使用，常规的做法是copy过来，这种做法几位耗时间，这个时候snippet就来了，

1.Snippe创建,存储和格式

Snippet文件是以.sublime-snippet为扩展的XML文件, 可以命名为XXX.sublime-snippet, 创建自己的snippet的方式为菜单栏Tools | New Snippet..
文件格式如果

1
2
3
4
5
6
7
8
9

<snippet>
    <content><![CDATA[Type your snippet here]]></content>
    <!-- Optional: Tab trigger to activate the snippet -->
    <tabTrigger>hello</tabTrigger>
    <!-- Optional: Scope the tab trigger will be active in -->
    <scope>source.python</scope>
    <!-- Optional: Description to show in the menu -->
    <description>My Fancy Snippet</description>
</snippet>

ps:存储在包目录下user目录下即可
简要介绍一下snippet四个组成部分:

• content:其中必须包含<![CDATA[…]]>,否则无法工作, Type your snippet here用来写你自己的代码片段
• tabTrigger:用来引发代码片段的字符或者字符串, 比如在以上例子上, 在编辑窗口输入hello然后按下tab就会在编辑器输出Type your snippet here这段代码片段
• scope: 表示你的代码片段会在那种语言环境下激活, 比如上面代码定义了source.python, 意思是这段代码片段会在python语言环境下激活.（html为 text.html js为source.js）
• description :展示代码片段的描述, 如果不写的话, 默认使用代码片段的文件名作为描述,会在提示时显示

2. snippet环境变量

列举一下可能用到的环境变量, 这些环境变量是在Sublime中已经预定义的.
$TM_FILENAME 用户文件名
$TM_FILEPATH 用户文件全路径
$TM_FULLNAME 用户的用户名
$TM_LINE_INDEX 插入多少列, 默认为0
$TM_LINE_NUMBER 一个snippet插入多少行
$TM_SOFT_TABS 如果设置translate_tabs_to_spaces : true 则为Yes
$TM_TAB_SIZE 每个Tab包含几个空格
同一通过下面的代码片段进行验证:

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

<snippet>
   <content><![CDATA[
=================================
$TM_FILENAME   用户文件名
$TM_FILEPATH   用户文件全路径
$TM_FULLNAME    用户的用户名
$TM_LINE_INDEX   插入多少列, 默认为0
$TM_LINE_NUMBER   一个snippet插入多少行
$TM_SOFT_TABS  如果设置translate_tabs_to_spaces : true 则为Yes
$TM_TAB_SIZE   每个Tab包含几个空格
=================================
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>hello</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>source.python</scope>
</snippet>

验证方式 : 保存自定义snippet,在python文件夹下输入hello按下tab

指定光标位置和选中值

1
2
3
4
5
6
7
8
9

<snippet>
	<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>hello</tabTrigger>
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<scope>text.html</scope>
</snippet>

完成后再html文件中敲下hello然后tab，便可以看到光标选中this的问着在此tab光标选中snippet,1、2代表了选中的顺序如果有两个$1会自动进入多点编辑模式

Completions

上面的提示方法虽然好但是呢，每个提示都要建一个文件，太麻烦了，如果这是代码方法或者长单词提示这种方法就不太好了，这个时候我们可以定义completions,
文件格式如下：

1
2
3
4
5
6
7
8
9

{
   "scope": "text.html - source - meta.tag, punctuation.definition.tag.begin",

   "completions":
   [
      { "trigger": "hello", "contents": "hello word" },
      {"trigger": "this is", "contents":"this is $1"}
   ]
}

存储格式为.sublime-completions
同样的是放在user目录下
参数解释：
scope：作用域与snippet中一致
trigger: 触发词
contents: 内容定义
$ : 这个定义光标位置与snippet一致

总结

snippet适用于大段代码提示，completions适用于小段代码提示，都非常好用，快去自定义一套适合自己打代码提示吧！

参考链接

• 手把手教你写Sublime中的Snippet
• sublime completions
• sublime snippets

sublime是一个小巧，功能又十分强大得文本编辑器，下面就来介绍下它的几个强大的工恩呢刚

快速文件查找

sublime上 CTRL+P可以查找文件，只用输入其中几个关键字便可找到

另外输入在后面加上#可以并查找文件中的内容，确定后打开文件后跳到指定内容位置

后面加上@+方法名 可以打开文件兵跳转到指定方法行

最后输入：1334可以跳到指定行

多点编辑模式

sublime中按住CRTL建然后在不同位置点击鼠标左键可进入多点编辑模式，另外CTRL+D多次使用可以选取相同字符并自动进入多点编辑模式，非常好用

命令面板

假设一个场景，我想把侧边栏收起来，但是又不记得快捷键，这个时候命令面板就起作用了，打开命令面板CRTL+SHIFT+P，输入toggle side bar然后enter这样就可以了，sublime中所有的操作都可以再命令面板中找到，让大家告别无聊的鼠标

灵活的配置和自定制

sublime中所有的配置都是再json文件中设置，一般有连个default和user我们如果要修改某些配置，只需要再user文件中修改，会自动覆盖default的配置，sublime有许许多多的插件，只要花点心思找些插件包，便可以配置成一个符合你习惯的完美的编辑器

##基础快捷键
Ctrl+Shift+P：打开命令面板
Ctrl+P：搜索项目中的文件
Ctrl+G：跳转到第几行
Ctrl+W：关闭当前打开文件
Ctrl+Shift+W：关闭所有打开文件
Ctrl+Shift+V：粘贴并格式化
Ctrl+D：选择单词，重复可增加选择下一个相同的单词
Ctrl+L：选择行，重复可依次增加选择下一行
Ctrl+Shift+L：选择多行
Ctrl+Shift+Enter：在当前行前插入新行
Ctrl+X：删除当前行
Ctrl+M：跳转到对应括号
Ctrl+U：软撤销，撤销光标位置
Ctrl+J：合并为一行
Ctrl+F：查找内容
Ctrl+Shift+F：查找并替换
Ctrl+H：替换
Ctrl+R：查找method
Ctrl+N：新建窗口
Ctrl+K+B：开关侧栏
Ctrl+Shift+M：选中当前括号内容，重复可选着括号本身
Ctrl+F2：设置/删除标记
Ctrl+/：注释当前行
Ctrl+Shift+/：当前位置插入注释
Ctrl+Alt+/：块注释，并Focus到首行，写注释说明用的
Ctrl+Shift+A：选择当前标签前后，修改标签用的
F11：全屏
Shift+F11：全屏免打扰模式，只编辑当前文件
Alt+F3：选择所有相同的词
Alt+.：闭合标签
Alt+Shift+数字：分屏显示
Alt+数字：切换打开第N个文件
Shift+右键拖动：光标多不，用来更改或插入列内容
鼠标的前进后退键可切换Tab文件
按Ctrl，依次点击或选取，可需要编辑的多个位置
按Ctrl+Shift+上下键，可替换行

##选择类
Ctrl+D 选中光标所占的文本，继续操作则会选中下一个相同的文本。
Alt+F3 选中文本按下快捷键，即可一次性选择全部的相同文本进行同时编辑。举个栗子：快速选中并更改所有相同的变量名、函数名等。
Ctrl+L 选中整行，继续操作则继续选择下一行，效果和 Shift+↓ 效果一样。
Ctrl+Shift+L 先选中多行，再按下快捷键，会在每行行尾插入光标，即可同时编辑这些行。
Ctrl+Shift+M 选择括号内的内容（继续选择父括号）。举个栗子：快速选中删除函数中的代码，重写函数体代码或重写括号内里的内容。
Ctrl+M 光标移动至括号内结束或开始的位置。
Ctrl+Enter 在下一行插入新行。举个栗子：即使光标不在行尾，也能快速向下插入一行。
Ctrl+Shift+Enter 在上一行插入新行。举个栗子：即使光标不在行首，也能快速向上插入一行。
Ctrl+Shift+[ 选中代码，按下快捷键，折叠代码。
Ctrl+Shift+] 选中代码，按下快捷键，展开代码。
Ctrl+K+0 展开所有折叠代码。
Ctrl+← 向左单位性地移动光标，快速移动光标。
Ctrl+→ 向右单位性地移动光标，快速移动光标。
shift+↑ 向上选中多行。
shift+↓ 向下选中多行。
Shift+← 向左选中文本。
Shift+→ 向右选中文本。
Ctrl+Shift+← 向左单位性地选中文本。
Ctrl+Shift+→ 向右单位性地选中文本。
Ctrl+Shift+↑ 将光标所在行和上一行代码互换（将光标所在行插入到上一行之前）。
Ctrl+Shift+↓ 将光标所在行和下一行代码互换（将光标所在行插入到下一行之后）。
Ctrl+Alt+↑ 向上添加多行光标，可同时编辑多行。
Ctrl+Alt+↓ 向下添加多行光标，可同时编辑多行。

##编辑类
Ctrl+J 合并选中的多行代码为一行。举个栗子：将多行格式的CSS属性合并为一行。
Ctrl+Shift+D 复制光标所在整行，插入到下一行。
Tab 向右缩进。
Shift+Tab 向左缩进。
Ctrl+K+K 从光标处开始删除代码至行尾。
Ctrl+Shift+K 删除整行。
Ctrl+/ 注释单行。
Ctrl+Shift+/ 注释多行。
Ctrl+K+U 转换大写。
Ctrl+K+L 转换小写。
Ctrl+Z 撤销。
Ctrl+Y 恢复撤销。
Ctrl+U 软撤销，感觉和 Gtrl+Z 一样。
Ctrl+F2 设置书签
Ctrl+T 左右字母互换。
F6 单词检测拼写
搜索类
Ctrl+F 打开底部搜索框，查找关键字。
Ctrl+shift+F 在文件夹内查找，与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找，查找结果双击进入略高端，未研究。
Ctrl+P 打开搜索框。举个栗子：1、输入当前项目中的文件名，快速搜索文件，2、输入@和关键字，查找文件中函数名，3、输入：和数字，跳转到文件中该行代码，4、输入#和关键字，查找变量名。
Ctrl+G 打开搜索框，自动带：，输入数字跳转到该行代码。举个栗子：在页面代码比较长的文件中快速定位。
Ctrl+R 打开搜索框，自动带@，输入关键字，查找文件中的函数名。举个栗子：在函数较多的页面快速查找某个函数。
Ctrl+： 打开搜索框，自动带#，输入关键字，查找文件中的变量名、属性名等。
Ctrl+Shift+P 打开命令框。场景栗子：打开命名框，输入关键字，调用sublime text或插件的功能，例如使用package安装插件。
Esc 退出光标多行选择，退出搜索框，命令框等。

##显示类
Ctrl+Tab 按文件浏览过的顺序，切换当前窗口的标签页。
Ctrl+PageDown 向左切换当前窗口的标签页。
Ctrl+PageUp 向右切换当前窗口的标签页。
Alt+Shift+1 窗口分屏，恢复默认1屏（非小键盘的数字）
Alt+Shift+2 左右分屏-2列
Alt+Shift+3 左右分屏-3列
Alt+Shift+4 左右分屏-4列
Alt+Shift+5 等分4屏
Alt+Shift+8 垂直分屏-2屏
Alt+Shift+9 垂直分屏-3屏
Ctrl+K+B 开启/关闭侧边栏。

##F11 全屏模式
Shift+F11 免打扰模式
注意:
以上都是window下得快捷键，mac osc下会略有不同

判断String类型

1
2
3

function isString(value) {
	return typeof value === 'string';
};

判断Number类型

1
2
3

function(value) {
	return typeof value === 'number';
};

判断function

1
2
3

function isFunction(value) {
	return typeof value === 'function';
};

判断正则表达式类型

1
2
3

function isRegExp(value) {
	return toString.call(value) === '[object RegExp]';
}

判断是否是对象

1
2
3

function isObject(value){
    return value !== null && typeof value === 'object';
}

判断是否是Object的对象

1
2
3

function isBlankObject(value) {
		return value !== null && typeof value === 'object' && !     getPrototypeOf(value);
};

判断是否是数组

1
2
3
4
5
6

function isArray(value){
    if (Object.prototype.toString.apply(arr) === '[object Array]') 
        return true;
    else 
        return false;
}

meta设置

html5移动端页面窗口自适应设备宽度，防止用户缩放页面

1

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">

忽略将页面中的数字识别为电话号码

1

<meta name="format-detection" content="telephone=no" />

忽略Android平台中对邮箱地址的识别

1

<meta name="format-detection" content="email=no" />

当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari，将网站添加到主屏幕快速启动方式，

1
2

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

完整的html模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>标题</title>
<link rel="stylesheet" href="index.css">
</head>

<body>
这里开始内容
</body>

</html>

css reset内容

在移动端中需要对浏览器做一些特殊的处理，以保证样式的一致性。
首先我们导入Normalize.css的代码，让后再加上移动端的特殊处理.

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

html{
    font-family:Helvetica;
    font-size:10px;/*设置10px为1em*/
    -webkit-tap-highlight-color: rgba(0,0,0,0);/*去掉触摸遮盖层*/
    -webkit-user-modify:read-write-plaintext-only;
    -webkit-user-select: none;/*禁止用户选择文字*/
	-webkit-overflow-scrolling: touch;/*滚动touch*/
}
/*设置所有的盒子元素*/
*{
    box-sizing: border-box;
}

css技巧

消除闪屏

1
2
3
4

/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-transform-style: preserve-3d;
/*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/
-webkit-backface-visibility: hidden;

清除浮动

1
2
3
4
5
6
7
8
9
10
11

.clearfix:before,
.clearfix:after {
    content: '\0020';
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}
.clearfix:after { clear: both }
.clearfix { *zoom: 1 }

###部分android系统中元素被点击时产生的边框怎么去掉

1
2
3
4

a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0;)
-webkit-user-modify:read-write-plaintext-only;
}

开启硬件加速

1
2
3
4
5
6

.css {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

如何阻止windows Phone的默认触摸事件

1

html{-ms-touch-action: none;}/* 禁止winphone默认触摸事件 */

js注意的地方

• 移动端上的点击事件会延迟300ms，可以使用touchstart代替（一般使用fastclick库）