JavaScript 正则表达式

创建正则表达式

1
2
3
4
5
let regExp = /a+/
// or
let regExp = new RegExp('a+')
// or
let regExp = new RegExp(/a+/, 'g')

正则标志

标志 作用
g 全局匹配
y 粘滞匹配
i 忽略大小写
m 匹配多行

g标志返回多个符合正则的匹配结果

1
2
'foo bar'.match(/\w+/g)// [ 'foo', 'bar' ]
'foo bar'.match(/\w+/) // [ 'foo', index: 0, input: 'foo bar' ]

注意, 未使用g标志时,调用RegExp.exec只返回首次匹配结果

1
2
3
4
5
6
7
8
9
10
11
12
let regExp = /\w+/g
let text = 'foo bar'
console.log(regExp.exec(text)) // [ 'foo', index: 0, input: 'foo bar' ]
console.log(re.lastIndex) // 3
console.log(regExp.exec(text)) // [ 'bar', index: 4, input: 'foo bar' ]
console.log(re.lastIndex) // 7
// 对比
regExp = /\w+/
console.log(regExp.exec(text)) // [ 'foo', index: 0, input: 'foo bar' ]
console.log(re.lastIndex) // 3
console.log(regExp.exec(text)) // [ 'foo', index: 0, input: 'foo bar' ]
console.log(re.lastIndex) // 3

js事件

常用事件表

名称 触发
load 页面(包括CSS样式 图片 JS等资源)完全加载后触发(window可用)
DOMContentLoaded HTML文档被加载后触发,无需等待图片 js CSS资源加载(window和document可用)
beforeunload 窗口被关闭/刷新(可阻止)
unload 文档被卸载后(window)
abort 图像/视频/音频加载被中断
error 文档/图像加载错误
resize 调整窗口大小(window)
scroll 页面滚动(window)
可用document.documentElement.scrollTop获取滚动距离
focusin 获得焦点(冒泡)
focus 获得焦点(不冒泡)
focusout 失去焦点(冒泡)
blur 失去焦点(不冒泡)
mouseover 鼠标移动到元素上(冒泡)
mouseenter 鼠标移动到元素上(不冒泡)
mouseout 鼠标移出元素(冒泡)
mouseleave 鼠标移出元素(不冒泡)
mousedown 鼠标键按下
mouseup 鼠标键松开
click 鼠标单击
dblclick 鼠标双击
mousemove 鼠标移动
contextmenu 调出上下文菜单(鼠标单击右键)
mousewheel 鼠标滚轮滚动(非标准事件)
keydown 键盘任意键被按下/按住
keypress 键盘字符键被按下/按住
keyup 键盘任意键被松开
input 用于input/textarea元素,用户输入时触发
change 元素值发生变化(例如select更改选项,input输入框输入)
submit 提交按钮被点击
reset 重置按钮被点击
copy 用户复制内容
haschange URL参数(#号后的内容)变化时触发(window可用)

JavaScript Number

Number parseInt parseFloat

这三种方法都可以将值转为数字,但处理方式各不相同

Number

Number(value)

  • value 任意值,如果无法转为数字,则返回NaN

如果传入对象,会先调用对象的valueOf方法.如果valueOf的返回值不是基本类型,再调用对象的toString方法

1
2
3
4
5
6
7
var o = {};
o.valueOf = function(){return 11};
console.log( Number(o) ) // 11

var o1 = {};
o1.toString = function(){return 11};
console.log( Number(o1) );

注 一元加操作符的转换方式和Number相同

parseInt

接受字符串,返回整数
parseInt(string, radix)

  • string 字符串,如果传入参数不是字符串(包括数字),则先使用toString将其转为字符串.
  • radix 参数string的基数,接受以下数值:
    • 0或未指定: 0x开头字符串以16进制解析,其他字符串以10进制解析
    • 2~36: 将字符串以2~36进制解析
1
2
3
4
5
6
parseInt('0x11') // 17
parseInt('0X11') // 17
parseInt('11',2) // 3
parseInt('11', 16) // 17
// 第二个参数传入0/2~36之外的数值会返回NaN
parseInt('11', 1) // NaN

如果string的第一个非空格字符"不是正/负号或数字",则返回NaN

1
parseInt('.11') // NaN

parseInt不支持科学计数法,会将"Infinity"和"e表示法"当作普通字符处理

1
2
3
4
5
6
7
8
9
parseInt('Infinity') // NaN
parseInt(0.0000001) // 1
// 实际运行过程
// 先调用toString方法转为字符串.
// 0.0000001小数点后有6个以上的0,因此自动转为科学计数法格式
var s = (0.0000001).toString(); // "1e-7"
// parseInt不支持科学计数法,e及后边的数字被自动忽略了,因此返回1
parseInt(s); // 1
// Number和ParseFloat没有这种问题

JavaScipt function

函数也是对象,所有函数都是Function的实例.

1
2
a.constructor === Function // true
Function.__proto__

创建函数

有两种方法创建函数,函数声明和函数表达式

  • 函数声明
1
2
3
4
function say(word) {
console.log(word);
}
say('hi');
  • 函数表达式
1
2
3
4
var say = function(word) {
console.log(word);
}
say('hi');

JavaScript 对象

JavaScript是一门面向对象的语言(Object Oriented,简称OO)
什么是对象?对象是一组无序属性的集合

在JavaScript中,一切都是对象?不对,除了6类基本类型外都是对象
Js有两大数据类型,基本类型和引用类型
基本类型是保存在栈内存中的简单数据,有String Number Boolean null undefined Symbol,按值访问
引用类型是保存在堆内存中的对象,有Object Array Function Date等,按引用访问

基本类型不是对象,那为什么他们有属性?
调用基本类型的属性时,会临时创建一个对象,调用对象属性,然后销毁对象.下次调用属性时,再创建一个新的对象

1
2
3
4
5
6
var str = 'lalala';
str.valueOf();
// 相当于
var temp = new String(str);
temp.valueOf(); // "lalala"
temp = null;

因此不能给基本类型添加属性.完成操作后,新创建的对象被销毁了

1
2
var str.t = 1;
str.t // undefined

注 typeof对null返回"object"是个bug 参考

1
typeof null // "object"

gulp 4.0

前端自动化工具

参考

gulp getting started
gulp api
gulp 入门指南

安装

1
2
3
4
5
6
// 安装gulp-cli
npm install --global gulp-cli
// 创建package.js.会提示输入项目信息,可直接按回车跳过.
npm init
// 安装gulp
npm install --save-dev gulp@next

注:
本文安装的gulp版本为4.0
目前(2018/1)
使用 npm install --save-dev gulp 命令安装的gulp版本为3.9
而 npm install --save-dev gulp@next (多了@next)命令安装的gulp版本为4.0
相较于gulp3,gulp4的语法有一些改动
如果想查看版本信息,可用gulp -v查询

1
2
3
>gulp -v
[14:37:58] CLI version 2.0.0
[14:37:58] Local version 4.0.0

测试是否安装成功
在项目根目录下新建gulpfile.js文件,填入以下内容

1
2
3
4
5
6
7
var gulp = require('gulp');

gulp.task('default', defaultTask);
function defaultTask(done) {
// place code for your default task here
done();
}

然后打开cmd,在项目根目录运行命令

1
gulp

如果出现下列提示,则安装成功

1
2
3
Using gulpfile ~/my-project/gulpfile.js
[11:15:51] Starting 'default'...
[11:15:51] Finished 'default' after 103 μs

Git

开源的分布式版本控制系统

参考

廖雪峰 Git教程
Git 官方文档
介紹好用工具:BFG Repo-Cleaner

设置 git config

显示config

--list 打印设置

1
2
3
git config --list --style #查看系统设置
git config --list --global #查看当前用户设置
git config --list --local #查看当前所在仓库设置

--get [config name] 打印单个参数

1
2
3
4
#打印所有者邮箱
git config --get user.email
#打印所有者姓名
git config --get user.name

--local 当前所在项目
--global 当前用户(常用)
--system 系统设置
设置生效的优先级 local > global > system

SublimeText 常用插件

Package Control - the Sublime Text package manager JavaScript LiveReload 实时预览 设置, preferences > Package Settings > LiveReload > Settings -User { "enabled_plugins": [ "SimpleReloadPluginDelay", "SimpleRefreshDelay" ] } HTML-CSS-J...

javaScript jQuery 常用属性对照

获取元素 jQuery JavaScript $('html') $(':root') document.documentElement $('body') document.body $('head') document.head $('.class') .getElementsByClass('class') $('tag') .getElementsByTagName('tag') $('#id') document.getElementById('id') $('selector') .querySelector('selector') ...

Bootstrap入门

Bootstrap是一个基于HMTL/CSS/JavaScript的前端CSS框架,支持响应式,移动端优先,自带大量jQuery插件. 参考 Bootstrap 3 Tutorial Overview · Bootstrap 载入/环境搭建 可在官网下载Bootstrap 下载地址 注意 bootstrap依赖jquery.应在导入bootstrap.js前导入jquery.js popper是一个弹出框插件,如果载入popper.min.js时报错: Uncaught SyntaxError: Unexpected token export.则使用umd路径下的popper.min...