feat: update docs -> design pattern function array object math primitive types utils

Author: Rain120

docs/.vuepress/components/MySWUpdatePopup.vue

@@ -0,0 +1,35 @@
+<template>
+  <SWUpdatePopup v-slot="{ enabled, reload, message, buttonText }">
+    <div
+      v-if="enabled"
+      class="my-sw-update-popup">
+      {{ message }}<br>
+      <button @click="reload">{{ buttonText }}</button>
+    </div>
+  </SWUpdatePopup>
+</template>
+
+<script>
+import SWUpdatePopup from '@vuepress/plugin-pwa/lib/SWUpdatePopup.vue'
+
+export default {
+  components: { SWUpdatePopup }
+}
+</script>
+
+<style>
+.my-sw-update-popup {
+  text-align: right;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background-color: #fff;
+  font-size: 20px;
+  padding: 10px;
+  border: 5px solid #3eaf7c;
+}
+
+.my-sw-update-popup button {
+  border: 1px solid #fefefe;
+}
+</style>

docs/.vuepress/config.js

@@ -3,6 +3,21 @@ const plugins = require('./utils/plugins');
 const { sidebarHelper } = require('./utils/sidebarHelper');
 const nav = require('./utils/nav');
 
+/**
+ * @description [guide, how-to-write-docs, ...]
+ */
+const docs = sidebarHelper();
+const sidebar = [];
+docs.map(item => {
+  if (item.path.includes('guide') || item.path.includes('how-to-write-docs')) {
+      sidebar.unshift(item)
+  } else {
+      sidebar.push(item)
+  }
+});
+[sidebar[1], sidebar[0]] = [sidebar[0], sidebar[1]];
+
+
 module.exports = {
   // base: '/awesome-javascript-code-implementation/',
   base: '',
@@ -12,7 +27,15 @@ module.exports = {
   head: [
     ['link', { rel: 'icon', href: '/logo.png' }],
     ['link', { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css' }],
-    ['link', { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.10.0/github-markdown.min.css' }]
+    ['link', { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.10.0/github-markdown.min.css' }],
+    ['link', { rel: 'manifest', href: '/manifest.json' }],
+    ['meta', { name: 'theme-color', content: '#3eaf7c' }],
+    ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
+    ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
+    ['link', { rel: 'apple-touch-icon', href: '/icons/apple-touch-icon-152x152.png' }],
+    ['link', { rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c' }],
+    ['meta', { name: 'msapplication-TileImage', content: '/icons/msapplication-icon-144x144.png' }],
+    ['meta', { name: 'msapplication-TileColor', content: '#000000' }],
   ],
   configureWebpack: {
     resolve: {
@@ -48,7 +71,7 @@ module.exports = {
     repoLabel: 'Repo',
 
     displayAllHeaders: true,
-    sidebar: sidebarHelper(),
+    sidebar,
     nav,
 
     // polyfill IE
@@ -69,8 +92,8 @@ module.exports = {
     search: true,
     searchMaxSuggestions: 10,
     // algolia: {
-    //   apiKey: '<API_KEY>',
-    //   indexName: '<INDEX_NAME>'
+    //   apiKey: '',
+    //   indexName: ''
     // },
 
     // PWA

docs/.vuepress/utils/alias.js

@@ -2,17 +2,51 @@
  * @Author: Rainy
  * @Date: 2020-01-31 11:42:43
  * @LastEditors  : Rainy
- * @LastEditTime : 2020-02-01 14:09:54
+ * @LastEditTime : 2020-02-02 14:41:02
  */
 
 const alias = {
   'guide': '介绍',
   'how-to-write-docs': '如何写文档?',
+
+  // math
   'math': '数学',
   'factorial': '阶乘',
   'fibonacci': '斐波那契数列',
   'gcd': '最大公约数',
   'lcm': '最小公倍数',
+  'binary': '二进制',
+
+  // primitive
+  'primitive': '原生 Javascript',
+
+  // function
+  'function': '函数',
+  'debounce': '防抖',
+  'throttle': '节流',
+
+  // Array
+  'array': 'Array(MDN + Function)',
+
+  // Object
+  'object': 'Object(MDN + Function)',
+
+  // types
+  'types': 'Types',
+
+  // utils
+  'utils': 'Utils',
+
+  // design-pattern
+  'design-pattern': '设计模式',
+  'adapter-pattern': '适配器模式',
+  'decorator-pattern': '装饰器模式',
+  'factory-pattern': '工厂模式',
+  'facade-pattern': '外观模式',
+  'iterator-pattern': '迭代器模式',
+  'proxy-pattern': '代理模式',
+  'observer-pattern': '观察者模式',
+  'singleton-pattern': '单例模式',
 };
 
 module.exports = {

docs/.vuepress/utils/nav.js

@@ -1,12 +1,20 @@
 module.exports = [
-  { text: 'Home', link: '/' },
   {
-    text: 'Languages',
-    ariaLabel: 'Language Menu',
-    items: [
-      { text: 'Chinese', link: '/zh/guide/' },
-      { text: 'English', link: '/en/guide/' }
-    ]
+    text: 'Study Notes',
+    link: 'https://rain120.github.io/study-notes/',
+    target: '_blank'
   },
-  { text: 'Github', link: 'https://github.com/rain120', target: '_blank' }
+  // {
+  //   text: 'Languages',
+  //   ariaLabel: 'Language Menu',
+  //   items: [
+  //     { text: 'Chinese', link: '/zh/guide/' },
+  //     { text: 'English', link: '/en/guide/' }
+  //   ]
+  // },
+  {
+    text: 'Github',
+    link: 'https://github.com/rain120',
+    target: '_blank'
+  }
 ];

docs/.vuepress/utils/plugins.js

@@ -1,3 +1,5 @@
+const moment = require('moment');
+
 module.exports = [
   ['@vuepress/back-to-top'],
   [
@@ -9,10 +11,36 @@ module.exports = [
   [
     '@vuepress/medium-zoom',
     {
-      selector: 'img.zoom-custom-imgs',
+      // selector: 'img.zoom-custom-imgs',
       options: {
         margin: 16
       }
     }
+  ],
+  ['@vuepress/pwa',
+    {
+      serviceWorker: true,
+      popupComponent: 'MySWUpdatePopup',
+      updatePopup: {
+        '/': {
+          message: "New content is available.",
+          buttonText: "Refresh"
+        },
+        '/zh/': {
+          message: "发现新内容可用",
+          buttonText: "刷新"
+        }
+      }
+    }
+  ],
+  ['@vuepress/blog'],
+  [
+    '@vuepress/last-updated',
+    {
+      transformer: (timestamp, lang) => {
+        moment.locale(lang)
+        return moment(timestamp).fromNow()
+      }
+    }
   ]
 ];

docs/.vuepress/utils/sidebarHelper.js

@@ -44,7 +44,6 @@ function helper({ dir, fPath }) {
 }
 
 function sidebarHelper(dir = filePath) {
-
   return syncDirPath(dir)
     .filter(fPath => !isFile({ fPath }) && !ignore.includes(fPath))
     .map((fPath, dirIndex) => {

docs/zh/array/README.md

@@ -0,0 +1,13 @@
+## Array(MDN + Function)
+
+::: tip
+主要是对 `MDN` 和一些常见的 `Array` 方法进行讲解及实现
+:::
+
+## 目录
+
+- [x] [arrayMove](./arrayMove/README.md)
+
+- [x] [Array.find](./find/README.md)
+
+- [x] [Array.isArray](./isArray/README.md)

docs/zh/array/arrayMove/README.md

@@ -0,0 +1,11 @@
+## 原理
+
+通过 `splice`方法去复制需要移动的数组元素，并拼接新数组。
+
+## 实现代码
+
+<<< @/src/Array/arrayMove/index.ts
+
+## 参考
+
+[splice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)

docs/zh/array/find/README.md

@@ -0,0 +1,66 @@
+> 为了不污染原生的 Array 对象, 实现通过 function 来实现
+>
+> Eg:
+
+```javascript
+// prototype
+Array.prototype.find = function(predicate, /* thisArg*/) {}
+
+// ours
+function (collection, predicate) {}
+```
+
+## 原理
+
+`find` 方法对数组中的每一项元素执行一次 `predicate` 函数, 直至有一个 `predicate` 返回 `true`. 当找到了这样一个元素后, 该方法会立即返回这个元素的值, 否则返回 `undefined`. 注意`predicate` 函数会为数组中的每个索引调用即从 0 到 `length - 1`, 而不仅仅是那些被赋值的索引, 这意味着对于稀疏数组来说, 该方法的效率要低于那些只遍历有值的索引的方法.
+
+- 把传入的 `this` 转换成 `Object`对象, 需要`null`值处理 -> `O`
+
+- 取出 `Object`的 `length` -> `len`
+
+- 判断传入 `predicate` 的是否是 `function`, 抛出异常 `TypeError exception`
+
+- 设置计数器 `k = 0`
+
+- `while k < len`
+  - `kValue = O[k]`
+  - `testResult = predicate(thisArg, kValue, k, O)` -> `Boolean`
+  - `testResult is true, return kValue`
+  - `Set k to k + 1`
+- `Return undefined`
+
+## 实现代码
+
+<<< @/src/Array/find/index.ts
+
+## 参数
+
+- `predicate`
+
+  在数组每一项上执行的函数, 接收 3 个参数:
+
+  - `element`
+
+    当前遍历到的元素
+
+  - `index` 可选
+
+    当前遍历到的索引
+
+  - `array` 可选
+
+    数组本身
+
+- `thisArg` 可选
+
+  执行回调时用作`this`的对象
+
+## 返回值
+
+返回数组中满足提供的测试函数的第一个元素的值. 否则返回 `undefined`
+
+## 参考
+
+[Find MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/find)
+
+[TC39 Find](https://tc39.es/ecma262/#sec-array.prototype.find)

docs/zh/array/isArray/README.md

@@ -0,0 +1,11 @@
+## 原理
+
+使用 `Object.prototype.toString` 取得对象的一个内部属性 `[[Class]]`，然后依据这个属性，返回 `'[object Array]'` 字符串作为结果(`ECMA`标准中使用`[[]]`来表示语言内部用到的、外部不可直接访问的属性，称为`内部属性`)。利用这 个方法，再配合 `call`，我们可以取得任何对象的内部属性 `[[Class]]`，然后把类型检测转化为字符串比较，以达到我们的目的。
+
+## 实现代码
+
+<<< @/src/Array/isArray/index.ts
+
+## 参考
+
+[绝对准确地确定JavaScript对象是否为数组](http://web.mit.edu/jwalden/www/isArray.html)