相关网站

概念

  • 元字符
  • 量词
  • 分组()
  • 反向引用
  • 候选(多选)
  • 非捕获性分组
  • 前瞻
  • 边界^$\b\B

标志符(元字符)和操作

. - 匹配除了换行符之外的任意字符
* - 指定前边的内容可以连续重复使用任意次
+ - 指定前边的内容可以连续重复一次或多次
? - 指定前边的内容可以连续重复一次或0次
{n} - 指定前边的内容可以连续重复n次
{n,} - 指定前边的内容可以连续重复n次或更多
{n,m} - 指定前边的内容可以连续重复n到m次
\d - 匹配一个数字
\w - 匹配字母或数字或下划线或汉字
\s - 匹配任意的空白符,包括空格,制表符(Tab),换行符,中文全角空格等
[XYZ] - 匹配中括号里面的任何一个字符
[XYZ]+ - 匹配中括号中的一个或多个字符
$ - 匹配字符串的结尾
^ - 匹配字符串的开头
[a-z] - 匹配任意小写字母
[^a-z] - 在中括号里面的^表示否,这个例子中任何非小写字母的字符都能匹配

模式修饰符

i 不区分大小写搜索
m 多行搜索
g 全局搜索

匹配模式

bug

  • removeFile删除文件后文件仍然存在。。这时假如是将文件列表全部删除,可以使用uploader.reset函数

zrender: 轻量级的canvas类库,MVC核心封装实现图形仓库、视图渲染和交互控制

  • Stroage(M) : shape数据CURD管理
  • Painter(V) : canvase元素生命周期管理,视图渲染,绘画,更新控制
  • Handler(C) : 事件交互处理,实现完整dom事件模拟封装
  • shape : 图形实体,分而治之的图形策略,可定义扩展
  • tool : 绘画扩展相关实用方法,工具及脚手架
  • animation : 动画扩展,提供promise式的动画接口和常用缓动函数

    简单例子

    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
    require.config({
    packages: [
    {
    name: 'zrender',
    location: '../src',
    main: 'zrender'
    }
    ]
    });
    require(
    [
    "zrender",
    "zrender/animation/animation",
    "zrender/shape/Circle"
    ],
    function (zrender, Animation, CircleShape) {
    var zr = zrender.init(document.getElementById("paint"));
    var circle = new CircleShape({
    position: [100, 100],
    scale: [1, 1],
    style: {
    x: 0,
    y: 0,
    r: 50,
    brushType: "fill",
    color: 'rgba(33,222,10,0.4)',
    lineWidth: 6,
    text: 'circle',
    textPosition: 'inside'
    },
    draggable: true
    });
    zr.addShape(circle);
    zr.render();
    }
    )

storage

handle 事件交互处理,实现完整dom事件模拟封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var circle = new CircleShape({
// draggable: true,
// hoverable: false,
// clickable : true,
onmouseover: function () {
console.log('mouse over');
},
onmouseenter: function () {
/*不存在onmouseenter事件,可以根据onmouseover实现*/
console.log('onmouseenter');
},
onmouseout: function () {
console.log('mouse out', this);
},
onclick: function () {
console.log('on click');
}
});

#bug及解决方法

  • firfox 不支持background-position-x/y,最好使用background-position设置背景图

#CSS

  • div多余高度
    • div内包含inline-block类型空元素时,div总是比内部元素高3px,当div是页面最下方元素时,即使固定div高度,其下方也会多3px。解决办法:将div的overflow设置为hidden
    • div内包含img时,div可能会比img高度高3px。解决办法:设置img的block元素或者vertical-align:middle;

编辑器

编译工具

调试工具

  • chrome 调试
  • ietester(过时)

测试工具

其他软件

  • Fiddler 路由转换工具 stave插件
  • Markman 图片标注工具
  • 快捷键工具WinHotKey
  • git管理工具 sourceTrees

前端工具库

  • webuploader 上传组件

在线空间或者WebIDE

  • sinaapp
  • c9
  • jsbin
  • jsfindle
  • coding.net
  • leancloud

WebEditor在线编辑器,所见即所得编辑器

  • Simditor(Tower开源的所见即所得的在线富文本编辑器)
  • wysihtml5
  • openWYSIWYG
  • UEdtior

Web代码编辑器

  • Codiad
  • Ecoder

Web图形编辑器

  • AIE

图形绘制

  • svg
  • canvas
  • zrender

其他软件

  • gamesalad

未看

  • 7.2 表单验证

模块

  • .run(function($rootScope){})
  • .controller控制器
  • filter过滤器: currency uppercase lowercase number(小数点后位数) date filter json limitTo orderBy
    表单验证 require ng-minlength ng-maxlength ng-pattern type=email type=number type=url
    表单属性 formName.inputFieldName.$pristine $dirty $valid $invalid $error
  • .directive 注册新指令 元素(E)、属性(A)、类(C)或注释(M)
  • .router路由器
  • .service服务

指令

  • ng-app
  • ng-controller
  • ng-include
  • ng-view
  • ng-repeat $index $first $middle $last $even $odd
  • ng-switch ng-switch-when on ng-switch-default
  • ng-if
  • ng-init
  • ng-bind ng-bind-template
  • ng-cloak
  • ng-model
  • ng-show
  • ng-hide
  • ng-change
  • ng-click
  • ng-form
  • ng-submit
  • ng-select
  • ng-class
  • ng-attr-(suffix)
  • ng-href
  • ng-src
  • ng-disabled
  • ng-checked
  • ng-readonly
  • ng-selected
  • ng-class
  • ng-style

系统服务

  • $parse 表达式解析
  • $interpolate 插值计算(指定作用域内变量)
  • $timeout

WebStorm

  • Ctrl+Alt+N 根据文件名查找文件
  • Alt+F1 在左侧文件树中定位到当前打开文件

PS快捷键

  • Ctrl+Shift+C 合并拷贝
  • Ctrl+N 新建文件
  • Ctrl+Shift+Alt+S 保存Web格式

cheerio使用

1
2
3
4
5
6
7
8
9
10
11
12
var cheerio = require('cheerio');
var $ = cheerio.load('<div class="test"><span class="a"></span></div>');
// 查找
var a = $('.a');
// 设置节点属性
a.attr('test','testval');
// 输出节点名称
console.log(a[0].name);
// 获取节点内容
console.log(a.html());
// 删除
a.remove();

$属性

1
2
3
4
5
6
7
8
9
10
fn
load()
html()
xml()
text()
parseHTML()
root()
contains()
_root
_options

节点属性

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
options
length
_root
constructor()
_originalRoot
cheerio
splice()
_make()
toArray()
attr()
data()
val()
removeAttr()
hasClass()
addClass()
removeClass()
toggleClass()
is()
find()
parent()
parents()
parentsUntil()
closest()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()
siblings()
children()
contents()
each()
map()
filter()
not()
has()
first()
last()
eq()
get()
index()
slice()
end()
add()
addBack()
_makeDomArray()
append()
prepend()
after()
insertAfter()
before()
insertBefore()
remove()
replaceWith()
empty()
html()
toString()
text()
clone()
css()
serializeArray()

节点内容属性 a[0].name

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{ '0':
{ type: 'tag',
name: 'a',
attribs: {},
children: [ [Object] ],
next: null,
prev: null,
parent:
{ type: 'tag',
name: 'test',
attribs: {},
children: [Object],
next: null,
prev: null,
parent: null,
root: [Object]
}
}
}

CSS知识点

#CSS选择器

  • 类型选择器:div
  • id选择器:#id
  • 类选择器:.class
  • 后代选择:a b
  • 子代选择:a>b
  • 兄弟选择:a+b
  • 伪类选择器
    • link
    • active
    • visited
    • first-letter
    • first-line
  • 属性选择器

#CSS

  • text-decoration : none || underline下划线 || blink 闪烁 || overline上划线 || line-through贯穿线

#CSS3

  • content:添加文字内容,url(img)可添加图片
  • quotes:增加首位嵌套文字
  • text-shadow:文字阴影
  • word-break:换行处理 normal正常,keep-all只能在半角空格和连字符处换行,break-all允许在单词内换行;
  • word-wrap:长单词url换行 normal,break-word;
  • @font-face:字体

  • tansform:旋转rotate,缩放scale,倾斜:skew,移动translate

  • box-sizing:content-box,border-box;

#CSS优化

#Less

在IE8中书写注意

  • {“classname”: a > b} 这种结构,类名称可以带引号,其他{}标签中,不能带有引号

  • dom.outerHTML 适用与IE9+浏览器,不兼容ie8

  • riot循环中的子模板在ie8下会出问题: 解决方法:mount之后,获取[riot-tag]并且inlineHTML为空的节点手动mount一次