docs: update

zack-xy · May 30, 2024 · ab14119 · ab14119
1 parent 1e1e6b0
commit ab14119
Show file tree

Hide file tree

Showing 4 changed files with 242 additions and 2 deletions.
diff --git a/docs/blogs/人际交流的几点经验.md b/docs/blogs/人际交流的几点经验.md
@@ -4,9 +4,9 @@ lang: en-US
 date: 2023-02-05 00:00:00
 editLink: true
 categories: 
-- '博客'
+- 博客
 tags: 
-- '沟通'
+- 沟通
 ---
 
 ### 人际交流的几点经验(摘抄)

diff --git a/docs/blogs/名言警句和感悟.md b/docs/blogs/名言警句和感悟.md
@@ -0,0 +1,49 @@
+---
+title: 名言警句和感悟
+lang: en-US
+date: 2024-04-05 00:00:00
+editLink: true
+categories: 
+- 博客
+tags: 
+- 名言
+---
+
+有的女孩什么都不用做，嫁得良人一生幸福。有的女孩天生善良，可是人间疾苦，一样不落。命运就像蒲公英，风起而涌，风止而息，落到肥处迎风长，落到瘦处苦一生。如果无能为力，那就顺其自然，如果心无所待，那就随遇而安      
+-------------余华
+
+ 世间本就没有任何公平，质问上苍不公，极其可笑！落在瘦处的蒲公英就是要受苦，风吹日晒，霜打雨淋。承之，受之，做自己能做的，唯此而已
+
+---------- 2024-05-30 我
+
+
+
+  她那时候还太年轻，不知道所有命运赠送的礼物，早已在暗中标好了价格            
+
+  -------------茨威格
+
+
+世间万物，都有成本
+
+---------- 2024-05-30 我
+
+
+
+世界以痛吻我，我自己再加点儿痛；打人都没有力气，当什么世界
+---------- 2024-05-30 我
+
+
+
+坐亦禅，行亦禅，无穷般若心自在，语默动静体自然。
+
+---------- 华严经+偈颂
+
+青山几度变黄山，世事纷飞总不干。 
+眼内有尘三界窄，心头无事一床宽。
+
+------梦窗禅师
+
+
+若有所求，即会乞求所有施；若无求，则不乞
+
+------ 20240-05-30 我
diff --git a/docs/program/pieces/2024/05/30/云服务器域名记录配置的意义.md b/docs/program/pieces/2024/05/30/云服务器域名记录配置的意义.md
@@ -0,0 +1,34 @@
+---
+title: 云服务器域名记录配置的意义
+author: Zack Zheng
+date: 2023/03/05 00:00
+categories:
+ - 域名配置
+tags:
+ - 域名配置
+---
+
+
+记录类型：指向某个解析地址    
+A:将域名指向一个IPV4地址   
+CHAME:将域名指向另外一个域名   
+AAAA:将域名指向一个IPV6地址   
+NS:将子域名指向其他DNS服务器   
+MX:将域名指向邮件服务器地址   
+SRV:记录提供指定服务器的服务器   
+TXT:文本长度限制512，通常做SPF记录   
+CAA:CA证书颁发机构授权校验    
+主机记录：域名形式   
+@: 直接解析主域名    
+*: 泛解析，匹配所有其他域名    
+WWWW: 将域名解析为WWW.zhengxiyun.top   
+二级域名：在域名前加前缀，将域名解析为二级域名.例如 abc.zhengxiyun.top
+记录值：云服务公有IP
+
+
+
+--------------
+
+站服务器：又称web服务器或者网站服务器   
+主要功能：向客户端提供文档服务，只要遵循HTTP设计的网络应用程序都可以认为是站服务器，站服务器等同于HTTP服务器    
+常见的站服务器：Nginx、Apache、Tomcat
diff --git a/docs/program/specialColumn/设计模式专栏/单件设计模式.md b/docs/program/specialColumn/设计模式专栏/单件设计模式.md
@@ -60,3 +60,160 @@ class MyLocalStorage {
  静态方法相当于es5： 构造函数.静态方法
 
 对象方法相当于es5: 构造函数.prototype.对象方法
+
+
+> 实现一个Storage，使得该对象为单例，基于localStorage进行封装   
+> 实现方法setItem(key, value)和getItem(key)
+
+
+```javascript
+// 静态方法版
+class Storage {
+  static getInstance() {
+    // 判断是否已经new过1个实例
+    if(!Storage.instance) {
+      // 若这个唯一的实例不存在，那么先创建它
+      Storage.instance = new Storage()
+    }
+    // 如果这个唯一的实例已经存在，则直接返回
+    return Storage.instance
+  }
+
+  getItem(key) {
+    return localStorage.getItem(key)
+  }
+  setItem(key, value) {
+    return localStorage.setItem(key, value)
+  }
+}
+
+
+/**
+ * 测试代码
+ * 
+ * const storage1 = Storage.getInstance()
+ * const storage2 = Storage.getInstance()
+ * 
+ * storage1.setItem('name', 'zack')
+ * storage1.getItem('name')  // zack
+ * 
+ * storage2.getItem('name') // zack
+ * 
+ * storage1 === storage2  // true
+ * 
+ * 
+ * 
+ */
+
+```
+
+```javascript
+// 闭包版
+
+// 先实现一个基础的StorageBase类，把getItem和setItem方法放在它的原型链上
+function StorageBase() {}
+StorageBase.prototype.getItem = function(key) {
+  return localStorage.getItem(key)
+}
+StorageBase.prototype.setItem = function(key, value) {
+  return localStorage.setItem(key, value)
+}
+
+// 以闭包的形式创建一个引用自由变量的构造函数
+const Storage = (function() {
+  let instance = null
+  return function() {
+    // 判断自由变量是否为null
+    if(!instance) {
+      // 如果为null则new出唯一实例
+      instance = new StorageBase()
+    }
+    return instance
+  }
+})()
+
+/**
+ * 测试代码
+ * // 这里不用new Storage的形式调用，直接Storage()也会有一样的效果
+ * const storage1 = new Storage()
+ * const storage2 = new Storage()
+ * 
+ * storage1.setItem('name', 'zack')
+ * 
+ * storage1.getItem('name')   // zack
+ * 
+ * storage2.getItem('name')  // zack
+ * 
+ * storage1 === storage2  // true
+ * 
+ * 
+ */
+```
+
+
+
+-------------------------------
+
+> 实现一个全局的模态框（全局唯一的Modal弹框）
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>单例模式弹框</title>
+</head>
+<style>
+  #modal {
+    height: 200px;
+    width: 200px;
+    line-height: 200px;
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    border: 1px solid black;
+    text-align: center;
+  }
+</style>
+<body>
+  <button id="open">打开弹窗</button>
+  <button id="close">关闭弹框</button>
+</body>
+<script>
+  // 核心逻辑，这里采用了闭包思路来实现单例模式
+  const Modal = (function() {
+    let modal = null
+    return function() {
+      if(!modal) {
+        modal = document.createElement('div')
+        modal.innerHTML = '我是一个全局唯一的Modal'
+        modal.id = 'modal'
+        modal.style.display = 'none'
+        document.body.appendChild(modal)
+      }
+      return modal
+    }
+  })()
+
+  // 点击打开按钮展示模态框
+  document.getElementById('open').addEventListener('click', function() {
+    // 未点击则不创建modal实例，避免不必要的内存占用
+    // 此处不用new Modal的形式调用也可以
+    const modal = new Modal()
+    modal.style.display = 'block'
+  })
+
+  // 点击关闭按钮隐藏模态框
+  document.getElementById('close').addEventListener('click', function() {
+    const modal = new Modal()
+    if(modal) {
+      modal.style.display = 'none'
+    }
+  })
+</script>
+</html>
+
+```