4-答萌新問 · WPS Office JavaScript 宏教程（JS宏）

[TOC] > Tue Jun 29 2021 00:04:54 GMT+0800 (GMT+08:00) 我自己也是萌新，代碼的世界……哈嘍，世界！真正的大佬要么在忙著工作，要么在養老，他們極少有人愿意花時間去碼字，只有我這種自以為很NB的人在“嘩眾取寵”…… 我們來看看大家對 WPS 支持 JS宏這件事情都有什么誤解和期待？ > 注意，我說的是 WPS JS 宏（軟件客戶端宏），不是 WPS JS 加載項。 ## WPS JS宏支持引入 JS 嗎？宏編輯器中有 "import", 試了又試，反正跑步起來……也許是我不會用 > 討論： > > 其實引入外部 JS 并不實用，分享文件的時候總不能老是額外發一份 JS 文件吧。如果可以，直接寫進模塊中即可。 > > 但總歸是一個需求，也許后面會支持吧。 ## WPS JS宏支持"字典"嗎？ > 最佳解決方案：使用 `Lodash`，詳見本書：【`將 Lodash 裝進 WPS JS宏`】字典；VB 中的 Dictionary 對象，存儲數據`鍵/項對`，也叫“`鍵/值對`”、`Key/Value`；那 WPS JS宏支持嗎？答案是支持。通常在 VBA 中使用 Dictionary 對象主要是利用它“鍵”唯一的特性，以及用來存儲一些結構性的數據。 JavaScript 的 Object 天然具有 Dictionary 對象的特性，你可以選擇跟 Dictionary 對象更類似的 JSON。 > 這是個偽命題，在 JavaScript 中使用 JSON，就是 JSON Object 化，終點依舊在 Object 上。 **`注意`**: > JavaScript 的 Object 雖然有 Key/Value 特性，但 JavaScript Object 和 VB 的 Dictionary 對象不是同一類東西。毫不夸張地說，JavaScript 在 Key/Value 方面，簡直就是神一般的存在——不得不承認，我夸張了。JavaScript 弱類型的特性就很棒…… 在 VBA 中，使用 Dictionary 之前你得： ```vb Set dir = CreateObject("Scripting.Dictionary") ``` 然后才能： ```vb dir.Add "fir", "Hello,World" ``` 在 JavaScript 中就沒這么麻煩了…… ### 簡單！ ```js // 走走形式 let foo = {} foo.assigin({fir:"Hello!World"}) Console.log(foo.fir) ``` 還可以是這樣的： ```js let foo = { bar:function(){ return "Hello,World!" } } // 當然，這里一點都不 "字典" foo.bar() ``` > 除了 Key 有限制外，Value 可以是任何類型……它可以更復雜地嵌套： ```js let kv = { a:{ a1:{ a11:{ bar:[1, 2, 3] }, a12:{ amHere:"hello", a12_1:{}, // 可以繼續 } } }, b:{}, c:{}, d:{} } // 嵌套太深，會累死的；因為 // 當你要獲取"hello" 時： let hi = kv.a.a1.a12.amhere; // 就，就很長…… ``` 如果你真的喜歡 Key/Value，那么你可以盡情發揮： ```js let data = { a:[ {"a1": "a1"}, {"a2": "a2"}, {"a3": "a3"}, {"a4": [ {"gogo":[ {"a": 1}, {"b": 2} ]} ]} ], b: "hello", c: null, d: false, e: true } ``` ### 不夠？可以直接上 JSON > [了解什么是 JSON？](https://www.json.org/json-es.html) 核心： 1. `JSON.parse` ，解析 JSON 結構字符串；可以理解為 JSON 轉 JavaScript 對象； > JSON --> JavaScript Object 2. `JSON.stringify` ，JavaScriptn 對象 JSON 化，可以理解為 JavaScript 對象轉 JSON。 > JavaScript Object --> JSON ```js function _m_json() { Console.clear() let jsonContent = ` { "KV":{ "a": 1, "b": "1", "c": "Hello", "a-b": "a-b", "a_b": "a_b", "a b": "a b" } } `; let obj = JSON.parse(jsonContent) Console.log(obj.KV.a) Console.log(typeof (obj.KV.a)) Console.log(obj.KV["a-b"]) // ------- let foo = { a:1, b: null, c: undefined, d: false, e: "1", f: /[az]/g, g: "hello", h: (function (){ let p = new Date().getMonth() return p })(), } let foo2json = JSON.stringify(foo) Console.log(foo2json) } ``` 運行之后，有何發現？ ### 鍵值對更改 VB 中 Dictionary 對象有 Remove/RemoveAll 方法，可以操作Key/Value條目；在 JS 中則可以用 delete 方法。我們來看看 ```js function _m_jsObject(){ dir = { "1": 1, "2": 2, "3": 3 } delete dir["3"] // 刪除"3"屬性。 Console.log(dir["3"]) } ``` > 其實，我們很少會這么干，關于 [delete 更多介紹](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/delete) 通常地，你只需讀取你要的就可以了，并不總是需要將其刪除；比如，只讀取 Key 為"1"、"2" 的項的值，則： ```js let foo = [ dir['1'], dir['2'] ] ``` 為什么不刪呢？因為刪變量、對象的屬性影響是巨大的，看看下面的例子： ```js function _m_why() { let foo = { a: 1, b: 2, c: 3 } let bar = foo; delete bar.c // 把 bar.c 刪掉 // 獲取所有的 Key let keys_foo = Object.keys(foo) let keys_bar = Object.keys(bar) // 輸出 key 的個數 Console.log(keys_foo.length) // 2 Console.log(keys_bar.length) // 2 } ``` > 找到原因了嗎？因為我們并不總是能時刻保持嚴謹，所以每當要"刪除"的時候都很謹慎。甚至偷懶不刪……下面來看看更新 Kay、Value的操作： ```js function _m_changeObject() { let foo = { a: 1, b: 2, c: 3 } // key c 改為 bar; // 不介意 foo 的屬性個數變多的改法： foo['bar'] = foo.c Console.log(`foo.bar --> ${foo.bar}`) // 新建對象 let tar = { a: foo.a, b: foo.b, bar: foo.c } // 以上的做法，foo.c 一直都在…… // 更改 Value foo.a="123"; Console.log(foo.a) } ``` > 注意 let、var、const 聲明之間的區別，并不是什么都可以改的。屬性名（Key），通常我們都不會去動它，因為沒有多大意義——我們只是需要這個key（屬性）所代表的值；如果需要存儲的數據鍵值對的key和Value都是有意義的，那么最好將將它們都作為 Value來存儲，而不是將其中之一作為Key另一個作為Value，看下面的例子： ```js let vipMembers = { /* 這種做法，key成為數據的一部分 key自然很重要，但不建議，因為在 JavaScript 中，會發生key（屬性名）丟失的情況—— 當你使用某些 JS 擴展庫時*/ zhangSan:{ name:"張三", age: 30 } } // 不要將它們拆開： let vipMembersA =[ { userName: "zhangSan", vipname:"張三", age: 30 } ] /* let vipMembersA ={ "1":{ userName: "zhangSan", vipname:"張三", age: 30 }, "2":{ //... } } */ ``` ## WPS JS宏支持 JQuery 嗎？ JQuery，操作 DOM 的，WPS JS 宏并沒有 DOM 可操作，不支持。 ## WPS JS宏支持 Node.js 嗎？ Node.js 是 JavaScript 運行時，WPS JS宏也有自己的運行時，理論上 WPS JS 并不能使用用于 Node.js 的 JS 代碼。 ## WPS JS宏支持文件讀寫嗎？應該正在支持，只是還沒有示例——甚至沒有寫進開發文檔里：是已經支持只是沒有更新開發文檔，還是沒有完成？無處得知…… 不過，Open、Write、CurDir 等和 VB 一樣的方法是已經有了的，只是缺少一個官方示例…… > WPS JS 加載項是已經支持了的。 ## WPS JS宏支持 Lodash 嗎？ **`支持`** ! 因為 Lodash 只是對 Array、Object 等標準 JavaScript 內置對象的擴展，不涉及其他 JS 庫 API（比如 Web API、DOM等），所以可以直接用。你可以直接把 Lodash 發行版源碼拷貝到 WPS JS宏模塊中（也可以進行自定義定制構建打包）然后使用，參考本書【`將 Lodash 裝進 WPS JS宏`】章節。 ## WPS JS宏支持 Ajax、Axios 嗎？ WPS 客戶端 JS宏 API 沒有提供網絡通信協議支持，所以任何基于 HTTP/HTTPS 網絡協議的 JS 庫都不被支持。XMLHttpRequest 并不是標準 JavaScript 內置對象/方法，它屬于 WEB API。 ## 總之還是那句話：僅支持標準 JavaScript 擴展庫和 WPS JS API 的自身擴展庫（比如對現行 WPS 軟件客戶端 JS API 的進一步拓展和封裝） > WPS JS 加載項可以使用能運行在瀏覽器中的絕大多數 JS 庫，覆蓋率和瀏覽器基本一致。