隨著微信開發(fā)者工具v1.0.0的釋出，beta已久的微信小程序視圖層的新功能特性WXS（WeiXin Script），也正式到來了。

熟悉微信小程序開發(fā)框架的開發(fā)者，肯定會(huì)對其視圖層WXML中缺失的一個(gè)功能耿耿于懷，那就是沒有辦法在視圖層對數(shù)據(jù)進(jìn)行格式化處理。比如我們從后端獲取到一個(gè)包含了時(shí)間戳數(shù)據(jù)的數(shù)組，然后需要在界面上把這些日期都格式化顯示為2017-01-01這種格式的日期形式，在Vue, Angular之類的前端Web框架中，一般在視圖層都提供了如filter之類相應(yīng)比較好用的方案。

而在現(xiàn)有的微信小程序代碼中？你能怎么做？估計(jì)我們的做法要么是在Page代碼中遍歷一次數(shù)組，做一下格式化；要么，只能讓后端返回已經(jīng)格式化好的數(shù)據(jù)了。

對于追求程序代碼優(yōu)雅的程序員來說，這簡直就是心中一個(gè)巨大的疙瘩！微信小程序團(tuán)隊(duì)估計(jì)沒少受這方面的吐槽。因此，這次WXS的推出算是滿足了對這種需求的渴望吧。

WXS算是專供WXML調(diào)用的有獨(dú)立作用域的JS模塊（不是全功能的JS，感覺有所限制）。舉個(gè)例子，在這之前，我們是沒有辦法在WXML的數(shù)據(jù)綁定括號{{}}中調(diào)用JS函數(shù)的，所以在WXML層面就缺少了進(jìn)一步做數(shù)據(jù)處理的能力。

下列代碼是不工作的：

1. <!-- wxml文件 -->
2. <view>{{testFunc(name)}}</view>
3.  
4. // some-page.js
5. Page({
6. data: {
7. name: "一斤代碼"
8. },
9.  
10. testFunc: function (name) {
11. return "Hello," + name
12. }
13. })

而有了WXS之后，我們就可以實(shí)現(xiàn)我們預(yù)期的功能了：

1. <!-- wxml文件 -->
2. <view>{{myModule.testFunc(name)}}</view>
3.  
4. <wxs module="myModule">
5. function testFunc(name) {
6. return "Hello," + name
7. }
8. module.exports.testFunc = testFunc
9. </wxs>
10.  
11. // some-page.js
12. Page({
13. data: {
14. name: "一斤代碼"
15. }
16. })

WXS可以直接定義在wxml文件的標(biāo)簽體中，也可以寫在獨(dú)立的.wxs后綴名的文件中，然后在wxml文件中通過的形式引入。

如要要在WXS代碼中去引用其他獨(dú)立.wxs文件，可以通過 require()函數(shù)來引入，基本上都是我們熟悉的方式：

1. var formatUtil = require("./format-util.wxs");
2. var now = getDate()
3.  
4. formatUtil.formatDate(now)

所以，WXS在功能方面，并沒有什么復(fù)雜的東西，唯一需要特別注意一些的，就是它的作用域了：

模塊只能在定義模塊的 WXML 文件中被訪問到。使用 或 時(shí)， 模塊不會(huì)被引入到對應(yīng)的 WXML 文件中。

標(biāo)簽中，只能使用定義該 的 WXML 文件中定義的 模塊。

趕緊去試試吧，看看你現(xiàn)有的代碼是不是有可以借助WXS來優(yōu)化重構(gòu)一下的地方。