内容更新

DEPLOY.md

@@ -18,6 +18,9 @@ npm run prerender
 
 ## 3. 在线 github 访问部署
 
+> `vue ui`可视化操作，没生成`docs`文件夹配置
+> `配置`=>`Vue CLI`=>`输出目录`=>`docs`=>`任务`=>`docs`
+
 ```bash
 npm run docs
 ```

src/components/k-snippet.vue

@@ -145,6 +145,40 @@ export default {
     }
   }
 
+  > blockquote {
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+
+    > p {
+      border-left: 4px solid #f66;
+      margin: 1rem 0;
+      padding: 1rem 0 1rem 1rem;
+      background-color: #f8f8f8;
+      border-radius: 0.25rem;
+      position: relative;
+    }
+
+    > p:before {
+      content: "!";
+      background-color: #f66;
+      position: absolute;
+      top: 18px;
+      left: -12px;
+      color: #fff;
+      width: 20px;
+      height: 20px;
+      border-radius: 100%;
+      text-align: center;
+      line-height: 20px;
+      font-weight: bold;
+      font-family: "Dosis", "Source Sans Pro", "Helvetica Neue", Arial,
+        sans-serif;
+      font-size: 14px;
+    }
+  }
+
   > pre {
     background: linear-gradient(-30deg, #273149, #1c273f);
     border-radius: 0.25rem;

src/notes/javascript/06.md

@@ -0,0 +1,201 @@
+:::snippet Object 类型
+
+1. 构造函数定义
+
+```JavaScript
+var person = new Object();
+person.name = "Nicholas";
+person.age = 29;
+```
+
+2. 字面量定义
+
+```JavaScript
+var person = {
+name : "Nicholas",
+age : 29
+};
+```
+
+3. 在通过对象字面量定义对象时，实际上不会调用 Object 构造函数（Firefox 2 及更早版本会调用 Object 构造函数；但 Firefox 3 之后就不会了）。
+4. 对象属性的访问
+
+```JavaScript
+alert(person["name"]); //"Nicholas"
+alert(person.name); //"Nicholas"
+
+//方括号访问属性，可以使用变量方式
+var propertyName = "name";
+alert(person[propertyName]); //"Nicholas"
+```
+
+:::
+
+:::snippet Date 类型
+
+1. 时间转换
+
+```JavaScript
+var someDate = new Date(Date.parse("May 25, 2004"));
+```
+
+2. 时间比较：Date 类型的 valueOf()方法，则根本不返回字符串，而是返回日期的毫秒表示
+
+```JavaScript
+var date1 = new Date(2007, 0, 1); //"January 1, 2007"
+var date2 = new Date(2007, 1, 1); //"February 1, 2007"
+alert(date1 < date2); //true
+alert(date1 > date2); //false
+```
+
+3. 时间各个浏览器有差异，所以使用详细查询 API 或者引用第三方类库方便处理操作，推荐：[dayjs](https://www.npmjs.com/package/dayjs)
+
+:::
+
+:::snippet RegExp 定义
+
+1. 正则表达式定义，`pattern`匹配表达式，`flags`匹配模式
+
+```JavaScript
+var expression = / pattern / flags ;
+```
+
+2. 不同方式定义表达式
+
+```JavaScript
+var pattern1 = /[bc]at/i; //匹配第一个"bat"或"cat"，不区分大小写
+var pattern2 = new RegExp("[bc]at", "i");  //与pattern1 相同，只不过是使用构造函创建的
+```
+
+:::
+
+:::snippet RegExp 模式
+
+1. g：表示全局（global）模式，即模式将被应用于所有字符串，而非在发现第一个匹配项时立即停止；
+2. i：表示不区分大小写（case-insensitive）模式，即在确定匹配项时忽略模式与字符串的大小写；
+3. m：表示多行（multiline）模式，即在到达一行文本末尾时还会继续查找下一行中是否存在与模式匹配的项。
+
+```JavaScript
+var pattern1 = /at/g;   //匹配字符串中所有"at"的实例
+var pattern2 = /[bc]at/i;   //匹配第一个"bat"或"cat"，不区分大小写
+var pattern3 = /.at/gi;   //匹配所有以"at"结尾的3 个字符的组合，不区分大小写
+```
+
+:::
+
+:::snippet RegExp 匹配位置
+
+```JavaScript
+var re = /cat/g;,i;
+for (i=0; i < 10; i++){
+    //每次匹配都从上一次的位置开始，到了末尾再从第一个字符开始
+    re.test("catastrophe");
+}
+for (i=0; i < 10; i++){
+    //每次匹配都从第一个字符开始，因为正则表达式每次都是新创建的
+    re = new RegExp("cat", "g");
+    re.test("catastrophe");
+}
+```
+
+:::
+
+:::snippet RegExp 实例属性
+
+1. global：布尔值，表示是否设置了 g 标志。
+2. ignoreCase：布尔值，表示是否设置了 i 标志。
+3. lastIndex：整数，表示开始搜索下一个匹配项的字符位置，从 0 算起。
+4. multiline：布尔值，表示是否设置了 m 标志。
+5. source：正则表达式的字符串表示，按照字面量形式而非传入构造函数中的字符串模式返回。
+
+```JavaScript
+var pattern1 = /\[bc\]at/i;
+
+alert(pattern1.global); //false
+alert(pattern1.ignoreCase); //true
+alert(pattern1.multiline); //false
+alert(pattern1.lastIndex); //0
+alert(pattern1.source); //"\[bc\]at"
+
+var pattern2 = new RegExp("\\[bc\\]at", "i");
+
+alert(pattern2.global); //false
+alert(pattern2.ignoreCase); //true
+alert(pattern2.multiline); //false
+alert(pattern2.lastIndex); //0
+alert(pattern2.source); //"\[bc\]at"
+```
+
+:::
+
+:::snippet RegExp 实例方法
+
+1. exec 方法全局匹配
+
+```JavaScript
+var text = "mom and dad and baby";
+var pattern = /mom( and dad( and baby)?)?/gi;
+
+var matches = pattern.exec(text);
+alert(matches.index); // 0
+alert(matches.input); // "mom and dad and baby"
+alert(matches[0]); // "mom and dad and baby"
+alert(matches[1]); // " and dad and baby"
+alert(matches[2]); // " and baby"
+```
+
+2. exec 单个匹配
+
+```JavaScript
+var text = "cat, bat, sat, fat";
+var pattern1 = /.at/;
+
+var matches = pattern1.exec(text);
+alert(matches.index); //0
+alert(matches[0]); //cat
+alert(pattern1.lastIndex); //0
+
+matches = pattern1.exec(text);
+alert(matches.index); //0
+alert(matches[0]); //cat
+alert(pattern1.lastIndex); //0
+```
+
+```JavaScript
+var pattern2 = /.at/g;
+
+var matches = pattern2.exec(text);
+alert(matches.index); //0
+alert(matches[0]); //cat
+alert(pattern2.lastIndex); //3
+
+matches = pattern2.exec(text);
+alert(matches.index); //5
+alert(matches[0]); //bat
+alert(pattern2.lastIndex); //8
+```
+
+3. test 检测是否匹配
+
+```JavaScript
+var text = "000-00-0000";
+var pattern = /\d{3}-\d{2}-\d{4}/;
+if (pattern.test(text)){
+    alert("The pattern was matched.");
+}
+```
+
+:::
+
+:::snippet RegExp 构造函数属性
+
+各个浏览器对构造函数属性的实现有差异，需要使用详细的查看 api 在使用
+
+:::
+
+:::snippet RegExp 模式的局限性
+
+1. `ECMAScript`中的正则表达式功能还是比较完备的，但仍然缺少某些语言（特别是 Perl）所支持的高级正则表达式特性
+2. 即使存在这些限制，`ECMAScript`正则表达式仍然是非常强大的，能够帮我们完成绝大多数模式匹配任务
+
+:::