js正则表达式

最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等

  1. 什么是 RegExp?
  2. RegExp 语法
  3. 概念:子表达式
  4. 概念:方括号(字符簇)
  5. 概念:元字符
  6. 概念:量词
  7. RegExp 对象方法
    1. test()
    1. exec()
    1. compile()
  8. 支持正则表达式的 String 对象的方法
    1. search 检索与正则表达式相匹配的值。
    1. match 找到一个或多个正则表达式的匹配。
    1. replace 替换与正则表达式匹配的子串。
    1. split 把字符串分割为字符串数组。
  9. 4.1. 经验:
  10. 常见的 正则表达式 校验
    1. 一、校验数字的表达式
    1. 二、校验字符的表达式
    1. 三、特殊需求表达式
      最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等

2017-05-31 12448
什么是 RegExp?

RegExp 是正则表达式(Regular expression)的缩写,作用是对字符串执行模式匹配。

通常用于格式验证、正则替换、查找子串等

各种编程语言的正则表达式基本相同,不同的语言可能会有一些细小的差别

RegExp入门:http://www.w3school.com.cn/js/js_obj_regexp.asp

完整的 RegExp 对象参考手册:http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp

PHP 正则表达式:http://www.imooc.com/learn/350

javascript 正则表达式:http://www.imooc.com/learn/706

Python 正则表达式:http://www.imooc.com/learn/550

RegExp 语法

// 直接实例化
var reg = new RegExp(pattern [, flags]);
// 隐式创建(推荐)
var reg = /pattern/flags;
参数 pattern 是一个字符串,指定了正则表达式的模式或其他正则表达式。

参数 [, flags] 是一个可选的字符串,包含属性 “g”(global )、”i” (ignoreCase)和 “m”(multiline)。

ECMAScript 标准化之前,不支持 m 属性。如果 pattern 是正则表达式,而不是字符串,则必须省略该参数。

概念:子表达式

在正则表达式中,使用括号括起来的内容是一个子表达式,子表达式匹配到的内容会被系统捕获至缓冲区,使用\n(n:数字)来反向引用系统的第n号缓冲区的内容。

场景:后面的内容要求与前面的一致,可以使用子表达式

// 查找连续相同的四个数字
var str = “1212ab45677778cd”;
var reg = /(\d)\1\1\1/gi;
console.log(str.match(reg));
// OUTPUT:7777
概念:方括号(字符簇)

var str = “Is this all there is?”;
var patt1 = /[a-h]/g;
document.write(str.match(patt1));
// OUTPUT:h,a,h,e,e
方括号 作用
[abc] 查找方括号之间的任何字符。
[^abc] 查找任何不在方括号之间的字符。
[0-9] 查找任何从 0 至 9 的数字。同 \d
[a-z] 查找任何从小写 a 到小写 z 的字符。
[A-Z] 查找任何从大写 A 到大写 Z 的字符。
[A-z] 查找任何从大写 A 到小写 z 的字符。
[0-9a-zA-Z] 查找0-9,a-z,A-Z
概念:元字符

元字符(Metacharacter)是拥有特殊含义的字符:
元字符 | 作用
—|—
\ | 转义符 (、)、/、
| | 选择匹配符,可以匹配多个规则
. | 查找单个字符,除了换行和行结束符。
\w | 查找单词字符。字符 ( 字母 ,数字,下划线_ )
\W | 查找非单词字符。
\d | 查找数字。
\D | 查找非数字字符。
\s | 查找空白字符。空格
\S | 查找非空白字符。
\b | 匹配单词边界。
\B | 匹配非单词边界。
\0 | 查找 NUL 字符。
\n | 查找换行符。
\f | 查找换页符。
\r | 查找回车符。
\t | 查找制表符。
\v | 查找垂直制表符。
\xxx | 查找以八进制数 xxx 规定的字符。
\xdd | 查找以十六进制数 dd 规定的字符。
\uxxxx | 查找以十六进制数 xxxx 规定的 Unicode 字符。

概念:量词

量词 作用
n+ 匹配任何包含至少一个 n 的字符串。同 {1,}
n* 匹配任何包含零个或多个 n 的字符串。同 {0,}
n? 匹配任何包含零个或一个 n 的字符串。同 {0,1}
n{X} 匹配包含 X 个 n 的序列的字符串。
n{X,Y} 匹配包含 X 至 Y 个 n 的序列的字符串。
n{X,} 匹配包含至少 X 个 n 的序列的字符串。
n$ 匹配任何结尾为 n 的字符串。
^n 匹配任何开头为 n 的字符串。注意 /[^a] / 和 /^ [a]/是不一样的,前者是排除的,后者是代表首位。
(?=n) 匹配任何其后紧接指定字符串 n 的字符串。正向预查
(?!n) 匹配任何其后没有紧接指定字符串 n 的字符串。反向预查
RegExp 对象方法

test()

test() 方法检索字符串中是否存在指定的值。返回值是 true 或 false。

var patt1 = new RegExp(‘e’);
console.log(patt1.test(‘some text’));
// OUTPUT:true
var patt2 = new RegExp(‘ee’);
console.log(patt2.test(‘some text’));
// OUTPUT:false

// 判断是不是QQ号
// 1 首位不能是0 ^[1-9]
// 2 必须是 [5, 11] 位的数字 \d{4, 9}
var str = ‘80583600’;
var regexp = /^[1-9][0-9]{4,10}$/gim;
if (regexp.test(str)) {
alert(‘is’);
} else {
alert(‘no’);
}
exec()

exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。

var patt1 = new RegExp(‘e’);
console.log(patt1.exec(‘some text’));
// OUTPUT:e
var patt2 = new RegExp(‘ee’);
console.log(patt2.exec(‘some text’));
// OUTPUT:null
compile()

compile() 既可以改变检索模式,也可以添加或删除第二个参数。

var patt1=new RegExp(“e”);
document.write(patt1.test(“The best things in life are free”)); // true
// 改变了检索模式
patt1.compile(“eee”);
document.write(patt1.test(“The best things in life are free”)); // false
支持正则表达式的 String 对象的方法

search 检索与正则表达式相匹配的值。

var str = “Visit W3School!”
console.log(str.search(/W3School/))
// OUTPUT:6
match 找到一个或多个正则表达式的匹配。

var str=”1 plus 2 equal 3”
console.log(str.match(/\d+/g))
// OUTPUT:1,2,3
replace 替换与正则表达式匹配的子串。

var str = “Visit Microsoft!”
console.log(str.replace(/Microsoft/, “W3School”));
// OUTPUT:Visit W3School!

// 找重复项最多的字符个数
var str = ‘g21ss4aeba_ersb43sgnnsssstht6sss60snnsj8resw0_ss’;
// split : 将字符串转化为数组
// sort : 对数组排序,ASCII
// join : 将数组转化为字符串
var str_new = str.split(‘’).sort().join(‘’);
document.write(str + ‘
‘);
document.write(str.split(‘’) + ‘
‘);
document.write(str.split(‘’).sort() + ‘
‘);
document.write(str.split(‘’).sort().join(‘’) + ‘
‘);
// 匹配字符,且重复这个字符,重复次数至少一次。
var regexp = /(\w)\1+/g;
var index = 0;
var value = ‘’;
str_new.replace(regexp, function($0, $1) {
// document.write($0);
// document.write($1);
if (index < $0.length) {
index = $0.length;
value = $1;
}
});
document.write(‘重复项最多的字符是:’ + value + ‘,个数是:’ + index);
// OUTPUT:
// 0012344668__aabbeeegghjnnnnrrssssssssssssssssttw
// 重复项最多的字符是:s,个数是:16
split 把字符串分割为字符串数组。

var str = “How are you doing today?”
document.write(str.split(/\s+/));
// OUTPUT:How,are,you,doing,today?
经验:

检验格式(邮箱格式、IP格式)是否正确,用test()
抓取星期(如所有手机号),用exec()、match()
替换敏感词汇,用replace()
常见的 正则表达式 校验

// 常见的 正则表达式 校验
// QQ号、手机号、Email、是否是数字、去掉前后空格、是否存在中文、邮编、身份证、URL、日期格式、IP
var myRegExp = {
// 检查字符串是否为合法QQ号码
isQQ: function(str) {
// 1 首位不能是0 ^[1-9]
// 2 必须是 [5, 11] 位的数字 \d{4, 9}
var reg = /^[1-9][0-9]{4,9}$/gim;
if (reg.test(str)) {
console.log(‘QQ号码格式输入正确’);
return true;
} else {
console.log(‘请输入正确格式的QQ号码’);
return false;
}
},
// 检查字符串是否为合法手机号码
isPhone: function(str) {
var reg = /^(0|86|17951)?(13[0-9]|15[012356789]|18[0-9]|14[57]|17[678])[0-9]{8}$/;
if (reg.test(str)) {
console.log(‘手机号码格式输入正确’);
return true;
} else {
console.log(‘请输入正确格式的手机号码’);
return false;
}
},
// 检查字符串是否为合法Email地址
isEmail: function(str) {
var reg = /^\w+((-\w+)|(.\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+)*.[A-Za-z0-9]+$/;
// var reg = /\w+([-+.]\w+)
@\w+([-.]\w+).\w+([-.]\w+)/;
if (reg.test(str)) {
console.log(‘Email格式输入正确’);
return true;
} else {
console.log(‘请输入正确格式的Email’);
return false;
}
},
// 检查字符串是否是数字
isNumber: function(str) {
var reg = /^\d+$/;
if (reg.test(str)) {
console.log(str + ‘是数字’);
return true;
} else {
console.log(str + ‘不是数字’);
return false;
}
},
// 去掉前后空格
trim: function(str) {
var reg = /^\s+|\s+$/g;
return str.replace(reg, ‘’);
},
// 检查字符串是否存在中文
isChinese: function(str) {
var reg = /[\u4e00-\u9fa5]/gm;
if (reg.test(str)) {
console.log(str + ‘ 中存在中文’);
return true;
} else {
console.log(str + ‘ 中不存在中文’);
return false;
}
},
// 检查字符串是否为合法邮政编码
isPostcode: function(str) {
// 起始数字不能为0,然后是5个数字 [1-9]\d{5}
var reg = /^[1-9]\d{5}$/g;
// var reg = /^[1-9]\d{5}(?!\d)$/;
if (reg.test(str)) {
console.log(str + ‘ 是合法的邮编格式’);
return true;
} else {
console.log(str + ‘ 是不合法的邮编格式’);
return false;
}
},
// 检查字符串是否为合法身份证号码
isIDcard: function(str) {
var reg = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
if (reg.test(str)) {
console.log(str + ‘ 是合法的身份证号码’);
return true;
} else {
console.log(str + ‘ 是不合法的身份证号码’);
return false;
}
},
// 检查字符串是否为合法URL
isURL: function(str) {
var reg = /^https?://(([a-zA-Z0-9_-])+(.)?)(:\d+)?(/((.)?(?)?=?&?a-zA-Z0-9_-?))*$/i;
if (reg.test(str)) {
console.log(str + ‘ 是合法的URL’);
return true;
} else {
console.log(str + ‘ 是不合法的URL’);
return false;
}
},
// 检查字符串是否为合法日期格式 yyyy-mm-dd
isDate: function(str) {
var reg = /^[1-2][0-9][0-9][0-9]-[0-1]{0,1}[0-9]-[0-3]{0,1}[0-9]$/;
if (reg.test(str)) {
console.log(str + ‘ 是合法的日期格式’);
return true;
} else {
console.log(str + ‘ 是不合法的日期格式,yyyy-mm-dd’);
return false;
}
},
// 检查字符串是否为合法IP地址
isIP: function(str) {
// 1.1.1.1 四段 [0 , 255]
// 第一段不能为0
// 每个段不能以0开头
//
// 本机IP: 58.50.120.18 湖北省荆州市 电信
var reg = /^([1-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])(.([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])){3}$/gi;
if (reg.test(str)) {
console.log(str + ‘ 是合法的IP地址’);
return true;
} else {
console.log(str + ‘ 是不合法的IP地址’);
return false;
}
}
}
// 测试
// console.log(myRegExp.isQQ(‘80583600’));
// console.log(myRegExp.isPhone(‘17607160722’));
// console.log(myRegExp.isEmail(‘80583600@qq.com’));
// console.log(myRegExp.isNumber(‘100a’));
// console.log(myRegExp.trim(‘ 100 ‘));
// console.log(myRegExp.isChinese(‘baixiaoming’));
// console.log(myRegExp.isChinese(‘小明’));
// console.log(myRegExp.isPostcode(‘412345’));
// console.log(myRegExp.isIDcard(‘42091119940927001X’));
// console.log(myRegExp.isURL(‘https://www.baidu.com/'));
// console.log(myRegExp.isDate(‘2017-4-4’));
// console.log(myRegExp.isIP(‘1.0.0.0’));
一、校验数字的表达式

数字:^[0-9]$
n位的数字:^\d{n}$
至少n位的数字:^\d{n,}$
m-n位的数字:^\d{m,n}$
零和非零开头的数字:^(0|[1-9][0-9]
)$
非零开头的最多带两位小数的数字:^([1-9][0-9])+(.[0-9]{1,2})?$
带1-2位小数的正数或负数:^(-)?\d+(.\d{1,2})?$
正数、负数、和小数:^(-|+)?\d+(.\d+)?$
有两位小数的正实数:^[0-9]+(.[0-9]{2})?$
有1~3位小数的正实数:^[0-9]+(.[0-9]{1,3})?$
非零的正整数:^[1-9]\d
$ 或 ^([1-9][0-9]){1,3}$ 或 ^+?[1-9][0-9]$
非零的负整数:^-[1-9][]0-9”$ 或 ^-[1-9]\d$
非负整数:^\d+$ 或 ^[1-9]\d|0$
非正整数:^-[1-9]\d
|0$ 或 ^((-\d+)|(0+))$
非负浮点数:^\d+(.\d+)?$ 或 ^[1-9]\d.\d|0.\d[1-9]\d|0?.0+|0$
非正浮点数:^((-\d+(.\d+)?)|(0+(.0+)?))$ 或 ^(-([1-9]\d.\d|0.\d[1-9]\d))|0?.0+|0$
正浮点数:^[1-9]\d.\d|0.\d[1-9]\d$ 或 ^(([0-9]+.[0-9][1-9][0-9])|([0-9][1-9][0-9]*.[0-9]+)|([0-9][1-9][0-9]))$
负浮点数:^-([1-9]\d*.\d
|0.\d[1-9]\d)$ 或 ^(-(([0-9]+.[0-9][1-9][0-9])|([0-9][1-9][0-9]*.[0-9]+)|([0-9][1-9][0-9])))$
浮点数:^(-?\d+)(.\d+)?$ 或 ^-?([1-9]\d*.\d
|0.\d[1-9]\d|0?.0+|0)$
二、校验字符的表达式

汉字:^[\u4e00-\u9fa5]{0,}$
英文和数字:^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
长度为3-20的所有字符:^.{3,20}$
由26个英文字母组成的字符串:^[A-Za-z]+$
由26个大写英文字母组成的字符串:^[A-Z]+$
由26个小写英文字母组成的字符串:^[a-z]+$
由数字和26个英文字母组成的字符串:^[A-Za-z0-9]+$
由数字、26个英文字母或者下划线组成的字符串:^\w+$ 或 ^\w{3,20}$
中文、英文、数字包括下划线:^[\u4E00-\u9FA5A-Za-z0-9_]+$
可以输入含有^%&’,;=?$"等字符:[^%&’,;=?$\x22]+
禁止输入含有的字符:[^\x22]+
三、特殊需求表达式

Email地址:^\w+([-+.]\w+)@\w+([-.]\w+)*.\w+([-.]\w+)$
域名:[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?
InternetURL:[a-zA-z]+://[^\s]* 或 ^http://([\w-]+.)+[\w-]+(/[\w-./?%&=])?$
手机号码:^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
电话号码(“XXX-XXXXXXX”、”XXXX-XXXXXXXX”、”XXX-XXXXXXX”、”XXX-XXXXXXXX”、”XXXXXXX”和”XXXXXXXX):^((\d{3,4}-)|\d{3.4}-)?\d{7,8}$
国内电话号码(0511-4405222、021-87888822):\d{3}-\d{8}|\d{4}-\d{7}
身份证号(15位、18位数字):^\d{15}|\d{18}$
短身份证号码(数字、字母x结尾):^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$
帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线):^[a-zA-Z][a-zA-Z0-9_]{4,15}$
密码(以字母开头,长度在6~18之间,只能包含字母、数字和下划线):^[a-zA-Z]\w{5,17}$
强密码(必须包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间):^(?=.*\d)(?=.
[a-z])(?=.[A-Z]).{8,10}$
日期格式:^\d{4}-\d{1,2}-\d{1,2}
一年的12个月(01~09和1~12):^(0?[1-9]|1[0-2])$
一个月的31天(01~09和1~31):^((0?[1-9])|((1|2)[0-9])|30|31)$
xml文件:^([a-zA-Z]+-?)+[a-zA-Z0-9]+\.[x|X][m|M][l|L]$
中文字符的正则表达式:[\u4e00-\u9fa5]
双字节字符:[^\x00-\xff] (包括汉字在内,可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1))
空白行的正则表达式:\n\s*\r (可以用来删除空白行)
HTML标记的正则表达式:<(\S
?)[^>]>.?</\1>|<.? /> (网上流传的版本太糟糕,上面这个也仅仅能部分,对于复杂的嵌套标记依旧无能为力)
首尾空白字符的正则表达式:^\s
|\s$或(^\s)|(\s$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等),非常有用的表达式)
腾讯QQ号:[1-9][0-9]{4,} (腾讯QQ号从10000开始)
中国邮政编码:[1-9]\d{5}(?!\d) (中国邮政编码为6位数字)
IP地址:\d+.\d+.\d+.\d+ (提取IP地址时有用)
IP地址:((?:(?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d))
钱的输入格式:
1.有四种钱的表示形式我们可以接受:”10000.00” 和 “10,000.00”, 和没有 “分” 的 “10000” 和 “10,000”:^[1-9][0-9]
$
2.这表示任意一个不以0开头的数字,但是,这也意味着一个字符”0”不通过,所以我们采用下面的形式:^(0|[1-9][0-9])$
3.一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号:^(0|-?[1-9][0-9]
)$
4.这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉,因为钱总不能是负的吧.下面我们要加的是说明可能的小数部分:^[0-9]+(.[0-9]+)?$
5.必须说明的是,小数点后面至少应该有1位数,所以”10.”是不通过的,但是 “10” 和 “10.2” 是通过的:^[0-9]+(.[0-9]{2})?$
6.这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样:^[0-9]+(.[0-9]{1,2})?$
7.这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样:^[0-9]{1,3}(,[0-9]{3})(.[0-9]{1,2})?$
8.1到3个数字,后面跟着任意个 逗号+3个数字,逗号成为可选,而不是必须:^([0-9]+|[0-9]{1,3}(,[0-9]{3})
)(.[0-9]{1,2})?$
备注:这就是最终结果了,别忘了”+”可以用”*”替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反斜杠,一般的错误都在这里
最后更新时间:2017-05-31 11:36:01

JavaScript

  1. 正则表达式那块一定要搞懂
  2. 关于++i,i++,前自增是先进行自增运算,后自增是后面才来进行运算。
  3. js表单验证,搞几个demo。

4. 数组的增删改查,这个最重要了;!!!!
5. setCookie这里好好研究下

1
<html>
2
<head>
3
<script type="text/javascript">
4
function getCookie(c_name)
5
{
6
if (document.cookie.length>0)
7
  {
8
  c_start=document.cookie.indexOf(c_name + "=")
9
  if (c_start!=-1)
10
{ 
11
c_start=c_start + c_name.length+1 
12
c_end=document.cookie.indexOf(";",c_start)
13
if (c_end==-1) c_end=document.cookie.length
14
return unescape(document.cookie.substring(c_start,c_end))
15
} 
16
  }
17
return ""
18
}
19
20
function setCookie(c_name,value,expiredays)
21
{
22
var exdate=new Date()
23
exdate.setDate(exdate.getDate()+expiredays)
24
document.cookie=c_name+ "=" +escape(value)+
25
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
26
}
27
28
function checkCookie()
29
{
30
username=getCookie('username')
31
if (username!=null && username!="")
32
  {alert('Welcome again '+username+'!')}
33
else 
34
  {
35
  username=prompt('Please enter your name:',"")
36
  if (username!=null && username!="")
37
{
38
setCookie('username',username,365)
39
}
40
  }
41
}
42
</script>
43
</head>
44
45
<body onLoad="checkCookie()">
46
</body>
47
</html>

正则表达式

// var str = “aaa23345555ljljlj777777777”;
// var reg = /(\d)\1/gi;
// console.log(str.match(reg));

// var str = “Is this all tHere is ?”;
// var patt1 = /[a-h]/gi;
// console.log(str.match(patt1));

// var str = “Is this all tHere is ?”;
// var patt1 = /[A-z]/g;
// console.log(str.match(patt1));

// var str = “Is this all 555 tHere is / / \ _?”;
// var patt1 = /\0/g;
// console.log(str.match(patt1));

// var str = ‘80583600a’;
// var regexp = /^[1-9][0-9]{4,10}$/gim;
// if (regexp.test(str)) {
// alert(‘is’);
// } else {
// alert(‘no’);
// }

// var patt1 = /e/g;
// console.log(patt1.exec(‘som text sfsfe’));
// // OUTPUT:e
// var patt2 = new RegExp(‘ee’);
// console.log(patt2.exec(‘some text’));
// // OUTPUT:null

var patt1=new RegExp(“e”);
console.log(patt1.test(“The best things in life are free”)); // true
// 改变了检索模式
patt1.compile(“eee”);
console.log(patt1.test(“The best things in life are free”)); // false

var str = “Visit W3School!”
console.log(str.search(/W3School/))
// OUTPUT:6

var str=”1 plus 2 equal 3”
console.log(str.match(/\d+/g))
// // OUTPUT:1,2,3

var str2 = “Visit Microsoft!”
console.log(str2.replace(/Microsoft/, “W3School”));
var str3 = str2.replace(/Microsoft/, “W3School”);
// OUTPUT:Visit W3School!

数组

var colors = [“red”,”blue”,”green”];
console.log(colors.toString());
var bb = colors.toString();
var cc = colors.valueOf();
var d = new Date();
var dd = d.toLocaleString();
var d2 = colors.toLocaleString();
colors.toString()

// ①:toString()方法返回由数组中每个值的字符串形式拼接并且以逗号相隔的字符串
// ②:valueOf()方法返回的还是数组
// ③:toLocaleString()方法也会返回一个数组值以逗号相隔的字符串,但与toString()方法不同的是在返回日期对象时格式不同。

var arr = new Array();
var count = arr.push(“red”,”blue”);
console.log(“count=” + count);
var count2 = arr.push(“pink”,”orange”);
console.log(“count2=” + count2);
var arr2 = arr.pop();
console.log(arr2);
// ①:push()方法可以接受任意数量的参数,逐个添加到数组末尾,返回修改后数组的长度
// ②:pop()方法从数组末尾移除最后一项,返回被移除的项

console.log(“—————-“);
var colors2 = new Array();
var num = colors2.unshift(“red”,”green”);
console.log(num);
var item = colors2.shift();
console.log(item);

// ①:shift()方法移除数组的第一次项并返回该项
// ②:unshift()方法在数组前端添加任意项,并返回新数组的长度

// 由栈方法跟队列方法可知,在这两种方法中添加数组项的方法返回新数组的长度,
// 移除数组项的方法返回被移除项

console.log(“—————-“);
var values = [0,1,5,20,15];
values.reverse();
console.log(values);
function compare(value1, value2){
return value2 - value1; //降序,升序return value1 - value2
}
values.sort(compare);
console.log(values);

// ①:reverse()方法可以反转数组项的顺序
// ②:sort()方法对数组进行升序排序,
// 但sort()方法会调用每个数组项的toString()转型方法,所以sort()方法比较的是字符串,
// 所以为了能正确排序,要将一个排序函数作为参数传给sort()方法。

//——————————–
// var colors = [“red”,”green”,”blue”];
// var removed = colors.splice(0);
// console.log(colors);
// console.log(removed);

// var colors = [“red”,”green”,”blue”];
// var removed = colors.splice(1,0,”yellow”,”orange”);
// console.log(colors);
// console.log(removed);

// var colors = [“red”,”green”,”blue”];
// var removed = colors.splice(1,1,”yellow”);
// console.log(colors);
// console.log(removed);

// ①:concat()方法用于连接两个或多个数组,不改变现有数组,只是返回被连接数组的一个副本
// ②:slice()方法能基于当前数组中的一个或多个项创建一个数组,接受一个或两个参数,即返回项的开始跟结束位置
// ③:splice()方法,(返回数组)使用这种方法的方式有三种,如下:
// 若要删除的项数为0,则返回空数组;若不为0,则返回由被移除项所组成的数组
// 删除:可以删除任意数量的项,只需指定两个参数,要删除的第一项和要删除的项数
// 插入:可以向指定位置插入任意数量的项:只需指定三个参数,起始位置、0(要删除的项数)、要插入的项
// 替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定三个参数,起始位置、要删除的项数和要插入的任意数量的项

// var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
// console.log(numbers.indexOf(4));
// console.log(numbers.lastIndexOf(4));
// console.log(numbers.indexOf(4, 4));
// console.log(numbers.lastIndexOf(4, 4));
// var person = {
// name: “Nicholas”
// };
// var people = [{
// name: “Nicholas”
// }];
// var morePeople = [person];
// console.log(people.indexOf(person));
// console.log(morePeople.indexOf(person));
// console.log(morePeople)

// ECMAScript 5 为数组定义了五个迭代方法, 每种方法接受两个参数, 要在每一项上运行的函数跟运行该函数的作用对象–影响this的值( 可选), 而传入这些方法的函数要接收三个参数: 数组项的值, 该项在数组中的位置和数组对象本身。
// ①: every() 方法对数组中的每一项运行给定的函数, 如果该函数对一项都返回true, 则返回true。( 相当于逻辑与)
// ②: filter() 方法对数组中的每一项运行给定的函数, 返回该函数会返回true的项组成的数组。
// ③: forEach() 方法对数组中的每一项运行给定的函数, 没有返回值。
// ④: map() 方法对数组中的每一项运行给定的函数, 返回每次函数调用的结果组成的数组。
// ⑤: some() 方法对数组中的每一项运行给定的函数, 如果该函数对一项返回true, 则返回true。( 相当于逻辑或)

// var numbers = [1, 2, 3, 4, 5];
// var sum = numbers.reduceRight(function(pre,cur,index,array){
// return pre + cur;

// });
// console.log(sum);
// ECMAScript5新增了两个归并数组的方法: reduce() 和reduceRight() 方法, 这两个方法都会
// 迭代数组的所有项, 构建一个最终返回的值。 这两个方法接收两个参数: 一个在每一项上调用的函数和( 可选) 作为归并 基础的初始值。
// 而作为参数的函数接收四个参数: 前一个值、 当前值、 项的索引值、 数组对象, 并且这个函数的任何返回值都会作为该函数的第一个参数自动传给下一项。

reduceRight() 方法接受一个函数作为累加器(accumulator)和数组的每个值(从右到左)将其减少为单个值

reduce() 方法对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值。

var total = [0, 1, 2, 3].reduce(function(sum, value) {
return sum + value;
}, 0);
// total is 6

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
return a.concat(b);
}, []);
// flattened is [0, 1, 2, 3, 4, 5]

var arr = [1, 2, 3, 4, 5, 7];
console.log(arr.forEach(function(item,index,arr){
console.log(‘item=’ + item + ‘index=’ + index + ‘arr=’ + arr);
return item > 2;

}));


//查找相同的部分
console.log(nums);
var num1 = [1,2,3,4,5,7];
var num2 = [2,3,5];
var nums = num1.filter(function(aaa){
return num2.indexOf(aaa) >= 0;
});
console.log(nums)

pomelo入门

pomelo是基于Node.js的,目前pomelo已经完全支持Windows、Linux、Mac等多种平台。

1.安装pomelo

1
$ npm install pomelo -g

windows下安装经验:

1
1. node,vs2010 和 python(2.5<v<3) 都是32位或者都是64位的。
2
2. 配置  PYTHON=d:\Python27\python.exe(设置成你自己的路径)。注意不是path里面,而是和path同级的,直接在全局或者当前用户下配置。   
3
3. 保证环境变量path里面有 %SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\Wbem;   
4
   注: 这三个环境变量中貌似只有%SystemRoot%\system32这个环境变量有用,没具体试(没有他会报CreateProcessW找不到的错误)。   
5
4. 如果在命令行界面安装pomelo失败,可以在Visual Studio的命令行界面安装。

新建项目

###建立项目

1
方式一:
2
$ pomelo init ./HelloWorld
1
方式二:
2
$ mkdir HelloWorld   
3
$ cd HelloWorld   
4
$ pomelo init

###安装包依赖

1
$ sh npm-install.sh
1
windows用户,可以直接运行 npm-install.bat

###启动项目

对于我们这个例子来说,由于客户端是web,所以必须启动game-server(游戏服务器)和web-server(web服务器)

启动game-server服务器:
$ cd game-server
$ pomelo start

启动web-server服务器:
$ cd web-server
$ node app

###关闭项目

可以使用以下两种方式关闭项目:
$ cd game-server
$ pomelo stop(推荐)

或者

$ cd game-server
$ pomelo kill

###查看服务器
可以使用pomelo list查看已经启动的服务器,如下图所示:
服务器状态可以查看5种状态信息:
serverId:服务器的serverId,同config配置表中的id。
serverType:服务器的serverType,同config配置表中的type。
pid:服务器对应的进程pid。
heapUsed:该服务器已经使用的堆大小(单位:兆)。
uptime:该服务器启动时长(单位:分钟)。

pomelo命令介绍(9个)

目前pomelo支持如下命令及选项:
init: 创建一个新项目,该项目中包含创建pomelo应用的基本文件及pomelo应用的简单示例。
start: 启动应用及服务器。
list: 列出当前应用开启的所有服务器的信息,包括服务器Id、服务器类型、pid、堆使用情况、启动时长。
stop: 关闭应用及服务器或者停止指定的服务器。
kill: 强制关闭应用及服务器。
add: 运行时动态添加服务器。
masterha: 当启用masterha高可用的时候,用来启动master服务器的slave节点。
–version:列出当前使用pomelo的版本信息。
–help:列出所有pomelo支持的命令及使用说明。

npm install -g pomelo-cli

TypeScript笔记

3.手册

3.1 基础类型

布尔值

1
let isDone: boolean = false;

数字

1
let decLiteral: number = 6;    
2
let hexLiteral: number = 0xf00d;      
3
let binaryLiteral: number = 0b1010;   
4
let octalLiteral:number = 0o744;

字符串

1
let name: string = "bob";
2
name = "smith";

模板字符串(使用``符号,使用${ expr }引用变量)

let nameStr: string = Gene;
let age: number = 37;
let sentence: string = `Hello, my name is ${ nameStr }.

I’ll be ${ age + 1} years old next month.`;
console.log(nameStr);
console.log(age);
console.log(sentence);

数组

第一种,可以在元素类型后面接上[],表示由此类型元素组成的一个数组:

1
let list: number[] = [1,2,3];

第二种方式是使用数组泛型,Array<元素类型>:

1
let list: Array<number> = [1,2,3];

元组(Tuple)

元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。 比如,你可以定义一对值分别为string和number类型的元组。
// Declare a tuple type
let x: [string, number];
// Initialize it
x = [‘hello’, 10]; // OK
// Initialize it incorrectly
x = [10, ‘hello’]; // Error

console.log(x[0].substr(1)); // OK
console.log(x[1].substr(1)); // Error, ‘number’ does not have ‘substr’

当访问一个越界的元素,会使用联合类型替代:
x[3] = ‘world’; // OK, 字符串可以赋值给(string | number)类型

console.log(x[5].toString()); // OK, ‘string’ 和 ‘number’ 都有 toString

x[6] = true; // Error, 布尔不是(string | number)类型

枚举

举类型可以为一组数值赋予友好的名字。
//默认从0开始编号
enum Color {Red, Green, Blue}
let c: Color = Color.Green;
//改为从1开始编号
enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;
//全部采用手动编号
enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;
//可以由值找到名字,可以由名字找到编号
enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];
alert(colorName);

任意值(any)

可以动态地为它赋值:
let notSure: any = 4;
notSure = “maybe a string instead”;
notSure = false; // okay, definitely a boolean

与Object类型,但Object只允许你为它赋值,却不能够在它上面调用方法,any是可以在它上面调用方法的。
et notSure: any = 4;
notSure.ifItExists(); // okay, ifItExists might exist at runtime
notSure.toFixed(); // okay, toFixed exists (but the compiler doesn’t check)

let prettySure: Object = 4;
prettySure.toFixed(); // Error: Property ‘toFixed’ doesn’t exist on type ‘Object’.

只知道一部分数据的类型时,any类型也是有用的。
let list: any[] = [1, true, “free”];
list[1] = 100;

空值

某种程度上来说,void类型像是与any类型相反,它表示没有任何类型。 当一个函数没有返回值时,你通常会见到其返回值类型是void:
function warnUser(): void {
alert(“This is my warning message”);
}

声明一个void类型的变量没有什么大用,因为你只能为它赋予 undefined和null:
let unusable: void = undefined;

Null 和 Undefined

let u: undefined = undefined;
let n: null = null;

never类型表示的是那些永不存在的值的类型。

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
throw new Error(message);
}

// 推断的返回值类型为never
function fail() {
return error(“Something failed”);
}

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
while (true) {
}

类型断言

其一是“尖括号”语法:
let someValue: any = “this is a string”;
let strLength: number = (someValue).length;

另一个为as语法:
let someValue: any = “this is a string”;
let strLength: number = (someValue as string).length;

两种形式是等价的。 至于使用哪个大多数情况下是凭个人喜好;然而,当你在TypeScript里使用JSX时,只有as语法断言是被允许的。

3.2 变量声明

let声明

const是对let的一个增强,它能阻止对一个变量再次赋值。

拥有块级作用域的变量的另一个特点是,它们不能在被声明之前读或写。

重定义及屏蔽

const 声明

3.3 接口

在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

Egret使用

基本指令

基本指令

egret create game //创建项目(创建一个名为game的项目)

egret build game //编译项目(编译成js代码)

egret startserver game //运行项目(运行项目服务)

egret upgrade //升级引擎(先安装好要升级的版本,然后升级)
egret build -e //升级之后


Example3:

Main.ts文件,代码如下:

class Main extends egret.DisplayObjectContainer {
    public constructor() {
    super();
    console.log('这是最新编辑的文档22222!!!');
    var spr:egret.Sprite = new egret.Sprite();
    spr.graphics.lineStyle(5,0xff0000);
    spr.graphics.beginFill(0xffffff);
    spr.graphics.drawRect(0, 0, 100, 100);
    spr.graphics.endFill();
    this.addChild(spr); 
    }
}

Example4:

  1. 新建Rect.ts文件,让Rect类继承 egret.Sprite
  2. 定义一个包含四个颜色的数组。
  3. 根据Rect不同的属性显示不同的颜色。

Example5:

通过一个新的类来实现方块宽高值的计算

复杂是事情拆分成简单的事情,然后去逐个解决,解决问题的思想。

Example6:

已经制作好了带有逻辑的小方块,那么在游戏中,每一行的小方块直接互相带有逻辑。这里我们将每一行的方块设定为一个组,让游戏中的方块都以组为单位进行计算。

ECMAScript6入门

2. let 和 const 命令

let 命令

1.基本用法(let的作用域只能在代码块内,var是全局 )

1
{   
2
    let a = 6;      
3
    var b = 10;   
4
}

2.不存在变量提升

1
var 的情况         
2
console.log(foo); // 输出undefined   
3
var foo = 2;
4
5
// let 的情况   
6
console.log(bar); // 报错ReferenceError  
7
let bar = 2;

3.暂时性死区

(只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。)

4.不允许重复声明

let不允许在相同作用域内,重复声明同一个变量。

5.ES6 的块级作用域

let实际上为 JavaScript 新增了块级作用域。
块级作用域的出现,实际上使得获得广泛应用的立即执行函数表达式(IIFE)不再必要了。

6.块级作用域与函数声明

ES6 的块级作用域允许声明函数的规则,只在使用大括号的情况下成立,如果没有使用大括号,就会报错。

const 命令

一旦声明,常量的值就不能改变,不可重复申明。

ES6 声明变量的六种方法(var,function,let, const,import,class);

global 对象

1
// 方法一
2
(typeof window !== 'undefined'
3
   ? window
4
   : (typeof process === 'object' &&
5
      typeof require === 'function' &&
6
      typeof global === 'object')
7
     ? global
8
     : this);      
9
// 方法二
10
var getGlobal = function () {
11
  if (typeof self !== 'undefined') { return self; }
12
  if (typeof window !== 'undefined') { return window; }
13
  if (typeof global !== 'undefined') { return global; }
14
  throw new Error('unable to locate global object');
15
};

3. 变量的解构赋值

数组的解构赋值

基本用法

1
let [a, b, c] = [1, 2, 3];

默认值

1
let [foo = true] = [];   foo // true   
2
let [x, y = 'b'] = ['a']; // x='a', y='b'   
3
let [x, y = 'b'] = ['a', undefined]; // x='a',    y='b'

对象的解构赋值

1
let { foo, bar } = { foo: "aaa", bar: "bbb" };
2
foo // "aaa"
3
bar // "bbb"

字符串的解构赋值

数值和布尔值的解构赋值

函数参数的解构赋值

圆括号问题

用途

4.字符串的扩展

ES6 加强了对 Unicode 的支持,并且扩展了字符串对象。

字符的 Unicode 表示法

ES6 对这一点做出了改进,只要将码点放入大括号,就能正确解读该字符。

1
"\u{20BB7}" // "𠮷"
2
3
"\u{41}\u{42}\u{43}"   // "ABC"  
4
let hello = 123;  
5
6
hell\u{6F} // 123  
7
'\u{1F680}' === '\uD83D\uDE80'
8
// true

字符的 Unicode 表示法

codePointAt()

String.fromCodePoint()

字符串的遍历器接口

5.正则的扩展(不太理解)

RegExp 构造函数

字符串的正则方法

u修饰符

y修饰符

sticky 属性

flags 属性

s修饰符:dotAll 模式

后行断言

Unicode 属性类

具名组匹配

6. 数值的扩展

二进制和八进制表示法

Number.isFinite(), Number.isNaN()

Number.parseInt(), Number.parseFloat()

Number.isInteger()

Number.EPSILON

安全整数和Number.isSafeInteger()

Math对象的扩展

Math.signbit()

指数运算符

Integer 数据类型

7.函数的扩展

函数参数的默认值

1
有默认值的参数要放在最后
2
function f(x, y, z=5) {
3
  return [x, y, z];
4
}
5
f(2,3);	//[2,3,5]   
6
7
function fetch(url, { method = 'GET', name = "hello"} = {}) {
8
  console.log(method);
9
  console.log(name);
10
}
11
fetch('http://example.com');
12
//"GET"   
13
//"hello"

rest 参数

1
function add(...values) {
2
  let sum = 0;
3
4
  for (var val of values) {
5
    sum += val;
6
  }
7
  return sum;
8
}
9
10
add(2, 5, 3) // 10

严格模式

name 属性

箭头函数

绑定 this

尾调用优化

函数参数的尾逗号

catch 语句的参数

8.数组的扩展

扩展运算符

Array.from()

Array.of()

数组实例的 copyWithin()

数组实例的 find() 和 findIndex()

数组实例的fill()

数组实例的 entries(),keys() 和 values()

数组实例的 includes()

数组的空位

9. 对象的扩展

属性的简洁表示法

属性名表达式

方法的 name 属性

Object.is()

Object.assign()

属性的可枚举性和遍历

Object.getOwnPropertyDescriptors()

proto属性,Object.setPrototypeOf(),Object.getPrototypeOf()

Object.keys(),Object.values(),Object.entries()

对象的扩展运算符

Null 传导运算符

构建前端自动化工作流环境

构建前端自动化工作流环境

目标

  • 了解什么是Node,什么是NPM;(Node.js)
  • 掌握Bower的使用;
  • 熟练使用Less/Sass;
  • 搭建一个自己的自动化工作流环境;
    • 自动编译
    • 自动合并
    • 自动刷新
    • 自动部署
  • GIT 与 GITHUB
    • master 托管源文件
    • gh-pages 托管部署文件
    • 在github搭建自己的blog

为什么要有自动化的流程

  • 在我们的开发过程中有大量的重复操作

  • DRY Don’t repeat yourself

  • 开发人员的精力应放在哪?创造,新的一切

  • 前端开发的编译操作

1.Node环境

1.1.什么是Node

  • Node.js 可能类似jquery.js

  • 不是JS文件,也不是一个JS框架()

  • 而是Server side Javascript runtime, 服务端的一个JS运行时

  • 我们可以在NODE运行JS代码

  • alert();ECMAScript JS- ES BOM DOM

  • node中只能运行ECMAScript,无法使用 BOM 和 DOM

  • 目前我们的JS是运行在浏览器内核中

  • PHP是什么?是一门脚本语言也是一个运行环境

  • 为什么Node选中了JS,

  • 说到底就是一个JS运行环境

  • 目前有两个分支

    • Node.js 0.12.7 官方版本 要求尽善尽美
    • IO.js 是社区的产物,不是官方的东西,io.js有很多新特性,迭代非常快,社区推进非常快
    • 15年两者合并,发布node第一个正式版 4.0, 迭代速度又慢了
    • node 5.x == io.js
    • node 4.0 == node

1.2.Node环境搭建

1.2.1.Mac

  • 安装包的方式

  • NVM(Node Version Manager)

    1
    $ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.2/install.sh | bash
    2
    $ echo '. ~/.nvm/nvm.sh' >> .bash_profile
    3
    $ nvm install stable
    4
    $ nvm alias default stable

1.2.2.Windows

  • 安装包的方式

  • NVM(Node Version Manager)

  • nvm(node version manager)

  • 因为NODE版本比较多,开发人员可能依赖很多版本

  • 通过NVM,可以轻松切换于不同的版本之间

    1
     

    NVM_HOME=C:\Develop\nvm

NVM_SYMLINK=C:\Develop\nodejs

NPM_HOME=C:\Develop\nvm\npm

PATH=%NVM_HOME%;%NVM_SYMLINK%;%NPM_HOME%

1.2.3.环境变量

  • 环境变量就是操作系统提供的系统级别用于存储变量的地方

  • 系统变量和用户变量

  • 系统变量指的是所用当前系统用户共享的变量

  • 自己的电脑一般只有一个用户

  • 建议将自己配置的环境变量放在用户变量中,用户变量比较干净

  • 环境变量的变量名是不区分大小写的

  • 变量间运行相互引用

  • 特殊值:

  • PATH变量(不区分大小写)

  • PATH 相当于一个路径的引用

  • 只要添加到PATH变量中的路径,都可以在任何目录下搜索

  • 命令行

  • 可以用来执行当前目录下的文件

  • 命令

cd :change directory

  • Node.js是一个轻内核(本身没有什么功能)的东东,所有的功能都要功能包提供
  • node官方提供了一些最基础的包

1.3.Node用途

REPL环境(控制台环境)

1.3.1.开发Web应用程序

  • 做动态网站
  • 开发提供数据的服务端API

1.3.2.前端开发工具基础

  • Node.js给前端乃至整个开发行业带来一场工业革命
  • 刀跟火种

1.4.Node开发Web应用Demo

1.4.1.复习请求与响应

客户端发送到服务端的东西称之为请求报文
服务端返回给客户端的东西称之为响应报文

1.5.NPM

1.5.1.什么是NPM

https://www.npmjs.com/

  • Node Package Manager
  • Node应用程序依赖包的管理工具
  • 安装卸载更新之类的操作

1.5.2.为什么使用NPM

  • 包很多
  • 场景:我需要用一个A,A依赖B,B依赖C
  • 常见的包管理工具都有循环依赖的功能
  • 你只需记住你要什么东西

1.5.3.常见的NPM操作

// 安装一个包,默认安装最新稳定版本
npm install package_name
// –save
// 初始化操作,给项目添加一个配置文件
npm init
// –yes参数走默认配置


2.Bower

2.1.什么是Bower

  • 官网
  • web应用程序依赖项管理工具

2.2.为什么使用Bower

  • 方便便捷的方式管理包,zhuangbi

2.3.Bower实践

  • npm install -g bower // -g:global

  • 修改npm全局路径,就是在用户目录下添加.npmrc文件


3.Sass/LESS


4.Gulp

4.1.Gulp简介

  • 链接:
  • 就是用来机械化的完成重复性质的工作
  • gulp的机制就是将重复工作抽象成一个个的任务,

4.2.Gulp准备工作

  • 安装Node.js
  • 安装 gulp 命令行工具
    • npm install -g gulp
  • 初始化 gulp 项目
  • 创建任务 - gulpfile.js

4.3.基本使用

4.4.常用插件


5.Git

5.1.什么是GIT,什么是GITHUB

  • GIT
  • GITHUB

5.2.环境安装

5.3.GIT常用命令


6.Markdown

https://guides.github.com/features/mastering-markdown/
https://help.github.com/articles/github-flavored-markdown/
https://help.github.com/articles/markdown-basics/

Nodejs配置

  1. 在C:\Develop\nvm 打开命令行输入:nvm use 5.7.0创建快捷方式。

用户变量:
GIT C:\Program Files\Git
NVM_HOME C:\Develop\nvm
NPM_HOME %NVM_HOME%\npm
NVM_SYMLINK C:\Develop\nodejs
PYTHON_HOME C:\Develop\Python27

用户PATH:
%GIT%; //git路径配在用户path路径
%NVM_HOME%;
%NVM_SYMLINK%;
%PYTHON_HOME%;
C:\Program Files (x86)\Microsoft VS Code\bin;
C:\Users\Administrator\AppData\Roaming\npm

用户path:


系统变量:
ANDROID_HOME E:\Soft\AndroidStudioSDK
JAVA_HOME D:\JDK\JDK

系统path:
%ANDROID_HOME%\platform-tools;
%ANDROID_HOME%\tools;
%JAVA_HOME%\bin;
D:\node\node-global;


node包全局安装路径,缓存路径
npm config set prefix “D:\node\node-global”
npm config set cache “D:\node\node-cache”

npm install -g nrm //安装nrm查看所有的快速镜像源

向服务器正式部署上线项目

快速开始

在本地,给项用pm2启动项目前需要给项目添加一件配置文件 ecosystem.json

1
{
2
  "apps": [
3
    {
4
      "name": "Website",
5
      "script": "app.js",
6
      "env": {
7
        "COMMON_VARIABLE": "true"
8
      },
9
      "env_production": {
10
        "NODE_ENV": "production"
11
      }
12
    }
13
  ],
14
  "deploy": {
15
    "production": {
16
      "user": "你的服务器登录用户名",
17
      "host": ["你的服务器 IP"],
18
      "port": "你的服务器登录端口",
19
      "ref": "origin/master",
20
      "repo": "git@git.oschina.net:wolf18387/backend-website.git",
21
      "path": "/www/website/production",
22
      "ssh_options": "StrictHostKeyChecking=no",
23
      "env": {
24
        "NODE_ENV": "production"
25
      }
26
    }
27
  }
28
}
  1. 在服务端,创建这样的路径
    1
    "path": "/www/website/production",
    1
    1. 修改文件夹的权限
    2
    sudo chmod 777 website
  2. 在服务端,进入要启动项目的根目录
    $ pm2 deploy ecosystem.json production setup
    

how to use vue

兼容性

Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器。

安装

  1. Vue Devtools(Chrome扩展的vue调试工具)
  2. 下载vue.js文件或者使用npm安装
    1
    $ npm install vue
    安装命令行工具 (CLI)
    1
    # 全局安装 vue-cli
    2
    $ npm install --global vue-cli
    3
    # 创建一个基于 webpack 模板的新项目
    4
    $ vue init webpack my-project
    5
    # 安装依赖,走你
    6
    $ cd my-project
    7
    $ npm install
    8
    $ npm run dev