js 插件开发——从卡服到跑路（持续更新）
rui_er
2020-08-06 11:58:56
应神仙 @\_TNT\_ 的要求写的 qwq。
标题纯属搞笑。本文将简单介绍 js 插件开发的基础语法和模板。
# js 基本语法
## 变量定义
```js
var a = 1; // 整数
var b = 0.33; // 浮点数
var c = "string"; // 字符串
var d = new RegExp("[0-9]"); // 正则表达式
var e = /[0-9]/; // 正则表达式
var f = /\d/; // 正则表达式
var g = {"name":"Tom","id":"1"}; // json
var h = function() {alert("This is a function");}; // 函数，使用 h() 调用
```
从上面的例子可以看出，js 中的变量使用 var 声明，有很多用途。
## 变量运算
下面的例子可以看出各类型变量的加法：
```js
var a = 1;
var b = 0.33;
var c = "QAQ";
var d = "1";
a+b; // 1.33
a+c; // "1QAQ"
a+d; // "11"
b+c; // "0.33QAQ"
b+d; // "0.331"
c+d; // "QAQ1"
```
可以看出如果有字符串，则会将另一个变量转化为字符串；否则为整数/实数运算。
下面是整数运算的例子：
```js
var a = 1;
var b = 2;
a+b; // 3
a-b; // -1
a*b; // 2
a/b; /* 0.5 */
a%b; // 1
```
可以看到，与其他一些语言不同，这里的除号为实数除法，并非整除。要想取整，可以参考如下代码：
```js
var a = 5;
var b = 2;
/* 向下取整 */
var x = parseInt(a/b);
var y = Math.floor(a/b);
/* 向上取整 */
var z = Math.ceil(a/b);
/* 四舍五入 */
var w = Math.round(a/b);
```
## 条件分支
js 的条件分支使用 if / else if / else，下面是一个例子：
```js
var a = 2;
if(a < 0) {
console.log("Case 1. ");
}
else if(a < 1) {
console.log("Case 2.");
}
else {
console.log("Case 3");
}
```
## for 循环
js 的 for 循环有三个参数：
```js
for(/*语句1*/;/*语句2*/;/*语句3*/)
```
语句 1 在开始前执行，语句 2 是运行循环代码块的条件，语句 3 在循环代码块运行后执行。
例子：
```js
for(var i=0;i<5;i++) {
console.log("The number is "+i);
}
```
结果：
```plain
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
```
## for-in 循环
```js
var a = {"fname":"Bill","lname":"Gates"};
var txt = "";
for(var x in a) {
txt = txt + a[x];
}
console.log(txt);
```
使用 for-in 循环来遍历 a 中的元素，结果：
```plain
BillGates
```
## while 循环
```js
while(/*条件*/) {
/*执行的代码*/
}
```
例如：
```js
var a = 5;
while(a > 0) {
console.log(a);
a --;
}
```
## continue-break
break 语句将直接跳出循环，continue 将会结束这次循环，运行下一次循环。
## 函数定义
```js
function f() {
console.log("calling function f()");
}
var g = function(x, y) {
while(x>0) {
console.log(y);
}
}
f();
g();
```
## 自调用函数
```js
(function() {
console.log("我可以调用自己");
})();
```
# 常用输出
```js
console.log("向控制台输出一行文字");
console.warn("向控制台输出一行警告");
console.error("想控制台输出一条错误");
alert("弹出窗口");
```
# 写入 html <div>
我们可以使用 document.getElementById() 来获取指定 id 的元素，不限于 div。
由于不方便展示效果，我们推荐一个[网站](http://www.jsons.cn/htmldebug/)，将下面代码 copy 进去即可预览效果。
```html
<script>
function f() {
document.getElementById("output").innerHTML = "<p>替换文字</p>";
}
</script>
<div id="output"></div>
<button onclick="f()">替换</button>
```
# 从输入框获取输入内容
同样的，我们按照 id 获取。
```html
<script>
function submit() {
document.getElementById("watch").innerHTML = "<p>你的名字是："+document.getElementById("name").value+"</p>";
}
</script>
<input id="name" placeholder="你的名字"></input>
<button onclick="submit()">提交</button>
<p>预览：</p>
<div id="watch"></div>
```
# 浏览器本地存储变量
浏览器本地存储变量，刷新或关闭浏览器均可。
这里，我们使用 localStorage。需要注意的是，localStorage 默认以字符串形式存储，访问时注意强制类型转换。
**注意：大多数浏览器均支持，但仍有少输浏览器不支持，可以采取其他方法。**
```html
<script>
function submit() {
localStorage.yourName = document.getElementById("name").value;
}
function watchSubmit() {
document.getElementById("watch").innerHTML = "<p>浏览器存储的名字是："+localStorage.yourName+"</p>";
}
</script>
<input id="name" placeholder="你的名字"></input>
<button onclick="submit()">提交</button>
<button onclick="watchSubmit()">显示预览</button>
<p>预览：（可以刷新网页或退出浏览器试试）</p>
<div id="watch"></div>
```
# 设置延时处理
```js
var a = setTimeout(function() {
alert("时间到");
}, 5000);
```
意思是延时 5000 毫秒（5 秒）执行该函数。想要清除延时的进程，可以用
```js
clearTimeout(a);
```
# 设置每隔一段时间重复处理
```js
var a = setInterval(function() {
console.log("时间到");
}, 5000);
```
每隔 5 秒处理一遍该函数。想要结束，可以用
```js
clearInterval(a);
```
-------------
# 暂无更多更新
更新队列：
- 正则表达式匹配