发表于： 2017-05-17 21:43:39
1 559
一、今天完成的事情：
1，正则表达式30分钟带你入门，没看完...只学了一大半。
2，学些如何使用富文本编辑器，完成了富文本编辑器在页面的显示，以及新增页面的美化。
3，学习了下Cookie的知识，以及以后在找工作中可能被问的问题，比如xml和json的区别，BFC的理解，雪碧图的使用。
二、明天计划的事情：
1，学习如何实现提交功能
2，继续学习一些理论知识。
三、遇到的问题：
暂没有遇到问题。
四、收获：
Cookie简介：
Cookie是指某些网站为了辨别用户身份而储存在用户本地的数据，这些数据通常是加密的，保存在客户端。Cookie的储存方式按照储存位置分为两种，一种是内存Cookie，另一种是硬盘Cookie。内存Cookie由浏览器进行维护，保存在内存中，当服务器关闭时，数据就会清除，存在时间比较短；硬盘Cookie保存在硬盘中，储存时会有一个过期时间，除非你手动清除，它的存在时间相比较是比较长的，所以，按照存在时间的长短又可以分为持久Cookie和非持久Cookie。
Cookie的缺陷：
1，Cookie会被附加到每一个http请求上，所以无形中就增加了服务器客户端请求的数据量。
2，由于HTTP中Cookie是明文传递，所以多少存在一些安全性的问题。
3，Cookie大小的限制，因为只有4kb左右，所以无法完成更为复杂的储存需求。
Cookie的使用：
1.JS原生法：
Cookie储存：使用document.cookie="cookie名称=cookie名称对应的值"方法进行数据的储存，如果cookie的名称本来就存在，则执行修改其对应的值，若不存在，则新建了一个Cookie。
设置Cookie的保质期（GMT-格林尼治时间格式的日期字符串）：使用new创建一个Date实例[ var date=nwe Date(); ],使用getDate方法得到当前本地月份中的某一天，后面加上30就是喜欢这个数据保存三十天，然后通过setDtae()方法来设置时间[ date.setDate(date.getDate()+30); ],最后使用toGMTstring()方法把Date对象转换成字符串并返回结果。
2.angularJS方法： 进行依赖注入ngCookie，然后使用$cookieStore服务中的put（）方法进行新建Cookie，然后使用$cookies服务中的get（key）方法根据其Cookie（key）名称返回对应的值。如果需要设置cookie的保质期的话，需要在cookies服务中进行编写，格式和JS原生一样，不同之处是不需要自己写封装的方法，因为在ngCookie中已经存在了，只需要注入使用就可以了。
正则表达式：
在编写处理字符串的程序或者网页时，经常会有查找符合某些复杂规则的字符串的需要，正则表达式就是用来描述这些规则的工具，换句话说，正则表达式就是用来记录文本规则的代码。
正则特殊代码（元字符）\b，\b代表着单词的开头或结尾，也就是单词的分界处。
假如你要匹配 hi后面不远处跟着一个lucy 就要用到另元字符 . 和 * （\bhi\b.*\blucy\b）。 \b是不匹配英文单词中的空格，标点符号以及换行的，也就是说英文单词中的这些功能在正则中是无效的，必须使用相应的特殊代码。 . 匹配除了换行符以外的任意字符， * 代表的不是字符也不是位置，而是数量，它指定*前面的内容可以连续重复使用任意次数以使整个表达式得到匹配。因此 . 和 * 连在一起就意味着任意数量的不包含换行的字符。
七个常用的元字符：
表1.常用的元字符
| 代码 | 说明 |
|---|---|
| . | 匹配除换行符以外的任意字符 |
| \w | 匹配字母或数字或下划线或汉字 |
| \s | 匹配任意的空白符 |
| \d | 匹配数字 |
| \b | 匹配单词的开始或结束 |
| ^ | 匹配字符串的开始 |
| $ | 匹配字符串的结束 |
字符转义：
在之前的小课堂中我曾经讲过这个，如果想要查找元字符本身的话，是没有办法直接指定它们的，因为它们自身会带有特殊的意义，因此，我们应该是用\转义字符取消这些元字符的特殊意义。
六个重复：
| 代码/语法 | 说明 |
|---|---|
| * | 重复零次或更多次 |
| + | 重复一次或更多次 |
| ? | 重复零次或一次 |
| {n} | 重复n次 |
| {n,} | 重复n次或更多次 |
| {n,m} | 重复n到m次 |
字符类：
相比数字，字母，或者空格这些已经有了对应字符集合的元字符，如果我们想要匹配一些没有预定义元字符的字符集合（比如元音字母a,e,i,o,u）时要怎么做呢？
这个时候只需要把他们在方括号中进行罗列就可以了。比如[aeiou]就匹配任意一个英文元音字母。
分支条件：
方法：用 | 把不同的规则分隔开，只要符合任意一种规则都应当成匹配，有点类似JS中的逻辑与、逻辑或.....
需要注意的是：要注意各个条件的顺序，因为匹配分支条件时，将会从左到右测试每个条件，如果满足某个分支的话，就不会管其它的条件了，
比如说匹配1234 | 123456 当它满足1234的时候，即使你测试的条件并没有测试完，它也不会继续测试下去，就直接匹配了第一种分支条件。
分组：
如果说我们想要重复多个字符就需要把它们用小括号包裹起来这就形成了子表达式（也叫分组），然后在括号后指定这个子表达式的重复次数了
例如： (\d{1,3}\.){3} 匹配三位数字加上一个英文句号（这个整体）重复三次
六个反义代码：
| 代码/语法 | 说明 |
|---|---|
| \W | 匹配任意不是字母，数字，下划线，汉字的字符 |
| \S | 匹配任意不是空白符的字符 |
| \D | 匹配任意非数字的字符 |
| \B | 匹配不是单词开头或结束的位置 |
| [^x] | 匹配除了x以外的任意字符 |
| [^aeiou] | 匹配除了aeiou这几个字母以外的任意字符 |
例子：\S+匹配不包含空白符的字符串。
<a[^>]+>匹配用尖括号括起来的以a开头的字符串。
XML和JSON的区别？
(1).数据体积方面。JSON相对于XML来讲，数据的体积小，传递的速度更快些。
(2).数据交互方面。JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。
(3).数据描述方面。JSON对数据的描述性比XML较差。
(4).传输速度方面。
JSON的速度要远远快于XML。BFC规范的理解？
BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。 （W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。）
Sprites雪碧图CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限制，一般浏览器都是6个。对于未来而言，就不需要这样做了，因为有了`http2`。
返回列表
评论