正则表达式搜集、DOM、Clean Code

1. 正则表达式搜集

(1) ０～２０字元限制

/^\S{0,20}$/

a. 非空白开头
b. {}需搭配其他要件，才能知道限制谁

(2) 包含所有的小数

/^(([1-9]{1}\d*)|(0{1}))(\.\d*)?$/

a. ^开头
b. [1~9]{出现1次}
c. \d 数字
d. * 0~多个
e. | 或
f. 0{出现1次}
g. . 指定.
h. \d 数字
i. * 0~多个
j. ? 0或1个
k. $ 结束

(3) 搭配方式 replace( " 正则 " , " $ " )

https://www.cnblogs.com/garfieldzhong/p/11654630.html

var str = '"a", "bc"';
str = str.replace(/"([^"]*)"/g, "'$1'");
console.log(str); // -> 'a','bc'

(4)

 const regex = new RegExp(wordToMatch, "gi"); // /xx/gi

//gi => 找出所有符合条件的字母，不分大小写

XD
https://cloudlab.tw/wp/sampleFiles/RegExp/

2. 抓本身的方法

html + (this) = DOM本身
html + (event) = e 事件

监听使用 event 抓本身值
html部分

  <select name="" id="getCityValue" class="selectCity select"></select>

  <script type="module">
    import { getValue, selectCity } from "./js/renderTopLeftCity.js";
    document.querySelector("#getCityValue").addEventListener("change", getValue);
  </script>
  

js部分

   export function getValue(e) {
     let getValueToChange = e.target.value; // 抓值方法
   }

3. Clean Code

资料来源：jimmylab.wordpress.com
https://jimmylab.wordpress.com/2018/09/27/clean-code-about/

(1) 命名

a. 绝对不要用 aaa, a1, a2 这种完全不知道意图的名称，至少让人一眼看出变数代表的意义，例如：traceStartTime 或是 traceCount。

命名规则：动词 + 名词
撰写注解(至少要让其他人看懂该method的用处)
// 导转到指定聊天室页面
onSelectStream(stream) {
this.stream = stream
}

b. 名称避免误导，像 O 跟 0，I 跟 l 跟 1，或是 dirToTheDataBase 跟 dirToTheDataManager 这种太相似的变数。

c. 不同的变数，意图应该要有明显的区别，像是 fileDir 与 dataPath 实际上是指同一件事情，不应该有两个变数做重复的事，若有这种情况必须重新思考程序架构。

d. 名称要可以念得出来，在互相讨论程序码时才比较有效率，不要有 genyyyymmddhrmnss 这种无法发音的名称，generationTimeStamp 会更好。

e. 尽量使用大家都熟悉的名称，课本公式上常用的代称就可以使用，像写极座标时，用 r, theta, phi 就是可以接受的命名。

(2) 函式

a. 函式尽量越短越好， 超过萤幕可以一眼看完的函式，在阅读上一定会有困难，所以函式大概控制在 20 行以内。

b. 函式只做一件事情，如果里面非常复杂，通常可以拆成更多的小函式。(若能力允许，应将函式存粹化)

c.函式内只有一层抽象概念，太细节的功能就包给更小的函式，需要统合的功能就交给更大的函式。

d. 函式通常是做一个动作，所以用动词开头命名会比较适当，像 getTimeTable 或是 isDataContinuous。

命名规则：动词 + 名词
撰写注解(至少要让其他人看懂该method的用处)
// 导转到指定聊天室页面
onSelectStream(stream) {
this.stream = stream
}

e. 函式输入的参数越少越好，最好是零个，一个次之，两个就不太好了，尽量避免三个以上，超过要用类别将变数包起来。但是非常直观的变数数量，例如 plot3D(x, y, z) 直觉上告诉我们需要输入三个变数，就可以接受。
注解

f. 尽量用程序码本身表达意图，因为改程序码後不一定会记得维护注解，到时候注解没有表达真正程序码的功能就会误导。

g. 一些不太会变的东西是可以放进注解的，例如在程序码前面放上数学公式的意图与相对应的变数名称，或是一些先备知识。

h. 千万不要留下被注解的程序码，时间久了会不知道为什麽被注解起来，很多版本管理程序可以帮你存下旧的程序码，所以在当下版本要将不被使用的程序码删掉。

(3) 编排

a. 将不同概念用空白行分隔，降低垂直密度。就像文章需要分段，从头到尾只有一段的文章看起来会很痛苦。

通则
Tab / 四格排版(空格)
CSS、Option 间要空一格(换一行)
图片放置於 src / assets
标点符号（例：冒号、逗号…）後一律空一格

b. 一行程序码最好不要长到需要横向卷动萤幕，若有一堆变数要换行排列整齐。

c. 要缩排表示流程阶层，例如 if 或 while，这样比较好理解流程的相互关系。