製作油猴Tampermonkey指令碼需要哪些知識
本文首發在我的個人部落格中：
之前有篇文章講述瞭如何使用油猴來編寫瀏覽器指令碼，以及用油猴編寫指令碼相對於Chrome外掛有什麼優勢：強大的油猴Tampermonkey：簡單的指令碼製作。
因為之前的文章中只講解了油猴指令碼怎麼編寫，但是沒有細說油猴指令碼如何編寫，以及編寫油猴指令碼需要哪些知識與技能點。
所以這篇文章就著重講解一下油猴指令碼涉及了哪些知識：
HTML，CSS
將
HTML
和
CSS
放在一起是因為在油猴指令碼的編寫中，這兩項技術並不是太能派的上用場，除非你的指令碼需要大量的互動，否則就不會編寫很多
HTML
和
CSS
。
就好比上圖來說，你需要做出這種按鈕、圖片整合框時才需要使用到
HTML
和
CSS
。
如果有這方面的需求，那麼就必須要學會
HTML
和
CSS
基礎，至於
Vue
，如果有興趣的話也可以學習，當你需要編寫介面的時候
Vue
會提供很多便利。
JavaScript
重點！一個油猴指令碼本質上就是一個
JavaScript
檔案，如果連
JavaScript
不會使用，那根本無從下手。
因為上一篇檔案是直接放出了指令碼程式碼，但是沒有講解指令碼程式碼的含義，所以本篇文章就著重講解一下我之前的程式碼做了什麼，下面貼上上次的程式碼：
// ==UserScript==
// @name B站圖片爬取
// @namespace http：//tampermonkey。net/
// @version 0。1
// @description try to take over the world！
// @author You
// @match https：//www。bilibili。com/*
// @grant none
// @resource customCSS https：//cdn。jsdelivr。net/npm/bootstrap@4。4。1/dist/css/bootstrap。min。css
// @require https：//cdn。jsdelivr。net/npm/jquery@3。4。1/dist/jquery。slim。min。js
// @require https：//cdn。jsdelivr。net/npm/vue
// ==/UserScript==
（
function
（）
{
“use strict”
；
$
（
“head”
）。
append
（
$
（
``
））；
var
divApp
=
$
（
`
class=“container”
style=“position：fixed；background-color：rgba（0，0，0，0。5）；；display： flex；flex-wrap： wrap；overflow： auto；width： 600px；height： 500px；top： 50%；left： 50%；transform： translate（-50%， -50%）；”>
）；
$
（
“#app”
）。
append
（
divApp
）；
/*Vue操作*/
var
app
=
new
Vue
（{
el
：
“#myPlan”
，
data
：
{
showMassage
：
false
，
images
：
［］
}，
methods
：
{
showM
（）
{
this
。
showMassage
=
！
this
。
showMassage
；
this
。
images
=
$
（
“img”
）；
}
}
}）；
}）（）；
(function(){})()
（function（）{}）
在
JavaScript
的程式碼中經常出現，其實本質上是聲明瞭一個匿名函式，然後對它進行呼叫。
// 普通的函式宣告
function
a
（）{}
// 匿名函式
let
a
=
function
（）{}
// 呼叫函式
a
（）；
// （function（）{}）（） 就相當於是聲明瞭一個匿名函式，並且呼叫
// 等價於上面的先宣告 function a（）{} 再呼叫 a（）
jQuery
曾經風光無限的
JavaScript
庫，它簡化了
HTML
與
JavaScript
之間的操作。
近些年來越來越少的開發者會用到它，因為現在幾乎都是使用的
Vue
和
React
前端框架，這些前端框架提出了一個概念叫做
虛擬DOM
，透過虛擬
DOM
技術，我們在實際的開發中減少了大量的
DOM
操作，自然就不需要使用簡化
DOM
操作的
jQuery
。
由於
jQuery
過去的風光，所以現在很多前端專案依然還在使用
jQuery
進行維護，同時由於編寫油猴指令碼需要大量操作
DOM
，所以如果需要
編寫油猴指令碼，還是要學一學jQuery。
那麼說了這麼多，透過下面的例子我們來看看
jQuery
到底起了什麼作用：
比如我們要透過
ID
獲取到一個
DOM
元素，使用原生
JavaScript
進行獲取就是
document。getElementById（“app”）；
，而透過
jQuery
獲取就可以簡化為
$（“#app”）
。
透過上面的例子可以看到
jQuery
在操作
DOM
元素時大大的簡化了程式碼量。
當然
jQuery
的作用不僅僅是這些，至於進一步的用法，可以參考一下網上
jQuery
的教程。
引入BootStrap
BootStrap是什麼
Bootstrap是一組用於網站和網路應用程式開發的開源前端框架，包括HTML、CSS及JavaScript的框架，提供字型排印、窗體、按鈕、導航及其他各種元件及Javascript擴充套件，旨在使動態網頁和Web應用的開發更加容易。 Bootstrap是GitHub上面被標記為“Starred”次數排名第四多的專案。
簡單的說就是一個提供大量樣式的玩意，大大簡化你的前端開發工作量，直接幫你實現了很多常用樣式和元件，直接拿去用就行了。
但是我覺得自己用的油猴指令碼樣式能看就行了…用
BootStrap
做樣式其實是為了給別人看。
引入
因為我發現油猴指令碼好像無法引入CSS檔案，也可能是我沒有找對方法，我試了幾個方法後發現只有直接向
head
中進行新增
DOM
的方式成功了，即下面的程式碼：
$
（
“head”
）。
append
（
$
（
``
））；
透過這段程式碼，我們就相當於給網頁的
標籤中添加了：
<
link
rel
=
“stylesheet”
href
=
“https：//cdn。jsdelivr。net/npm/bootstrap@4。4。1/dist/css/bootstrap。min。css”
>
Vue
我編寫的那個指令碼中還使用到了
Vue
，至於
Vue
的作用是讓我可以更方便的製作出互動頁面，即圖片集中在一起顯示的介面就是使用
Vue
來做的。
這點其實使用
jQuery
也能夠實現同樣的效果，但是我對於
jQuery
的瞭解也僅僅是停留在能用的地步。
最後
這裡再給上一個旋轉網頁圖片的油猴指令碼，總所周知，在看貼吧或者各種網頁的時候，有人發的圖片可能是顛倒的，這個時候就需要旋轉才方便觀看，但是手機端可以將手機旋轉， 電腦端總不能把電腦螢幕整個旋轉吧。
所以就寫了一個旋轉圖片的指令碼，雖然使用過程可能會產生BUG，但是大體功能是實現了。
最後效果
程式碼如下：
// ==UserScript==
// @name 旋轉圖片
// @namespace http：//tampermonkey。net/
// @version 0。1
// @description try to take over the world！
// @author You
// @include *
// @grant none
// @require https：//cdn。jsdelivr。net/npm/jquery@3。4。1/dist/jquery。slim。min。js
// ==/UserScript==
（
function
（）
{
‘use strict’
；
$
（
‘head’
）。
append
（
$
（
`
<！—— CSS部分 ——>
`
））；
/* 給圖片增加一個父元素，方便操作 */
let
divApp
=
$
（
`
`
）；
/* 按鈕部分 */
let
rotateButton
=
$
（
`
`
）；
let
images
=
$
（
‘img’
）；
images
。
wrap
（
divApp
）；
$
（
‘。ha-image’
）。
append
（
rotateButton
）；
$
（
‘。leftRotate90’
）。
click
（
function
（）
{
let
image
=
$
（
this
）。
parent
（）。
parent
（）。
children
（
‘img’
）；
image
。
css
（
‘transform’
，
‘rotate（90deg）’
）；
return
false
；
//阻止事件冒泡
}）；
$
（
‘。rightRotate180’
）。
click
（
function
（）
{
let
image
=
$
（
this
）。
parent
（）。
parent
（）。
children
（
‘img’
）；
image
。
css
（
‘transform’
，
‘rotate（180deg）’
）；
return
false
；
}）；
$
（
‘。rightRotate270’
）。
click
（
function
（）
{
let
image
=
$
（
this
）。
parent
（）。
parent
（）。
children
（
‘img’
）；
image
。
css
（
‘transform’
，
‘rotate（270deg）’
）；
return
false
；
}）；
$
（
‘。reset’
）。
click
（
function
（）
{
let
image
=
$
（
this
）。
parent
（）。
parent
（）。
children
（
‘img’
）；
image
。
css
（
‘transform’
，
‘rotate（0）’
）；
return
false
；
}）；
}）（）；
