javascript类工厂构建

下面的代码基于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();

前端seo优化

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
核心心法:让小蜘蛛最快找到有用信息
1. <p><br/></p>很赞的写法 <br/>写在p内部
2.外链 要加上 rel=“nofollow” 避免搜索引擎爬网爬跑掉其他网页去了
3.<a>标签加title描述
4.<img>标签加alt描述
5.标签中的内容就是内容,不要加的代码,&nbsp尽量设置padding/margin/缩进来实现效果
a. <title> 关键词放前面;不重复;每个title不同;
b. <meta keywords> 列出关键词即可,不需太多;
c. <meta description> 高度概括网页内容,不需太多,每个页面不同;
d. 语义化代码:
aa. H1-H6 用于标题;
bb. UL无序列表;
cc. OL有序列表;
dd. DL定义数据列表
ee. em,strong 强调
e. 优化:
aa. <a> title/rel/
bb. <h1> 正文标题一定用H1,副标题H2;
cc. <p> <br>是文本内的换行;
dd. <caption>表格标题;
ee. <img> 加alt说明;
ff. <strong>(高度重视) <em> (仅次于strong)& <b>(不推荐) <i>
gg. 重要HTML放在最前面;
hh. 重要内容不用JS输出;
ii. 少使用iframe框架;
JJ. 谨慎使用display:none(使用z-index);
kk. 精简代码;

前端代码规范(YaHoo军规)

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.避免重定向

sublime常用的插件介绍

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语法),

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

15-31-34

AutoFileName

文件名称自动补全插件

15-32-45

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

15-43-40

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异步处理

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

sublime自定义代码提示

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功能介绍

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

快速文件查找

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

23-47-25

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

23-49-59

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

23-51-29

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

多点编辑模式

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

23-55-11

命令面板

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

00-00-09

灵活的配置和自定制

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

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下会略有不同

javascript类型判断

判断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;
}

移动web开发准备工作

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库)
,