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

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

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

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

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

下列代碼是不工作的：

<!-- wxml文件 -->
<view>{{testFunc(name)}}</view>
 
// some-page.js
Page({
    data: {
        name: "一斤代碼"
    },
 
    testFunc: function (name) {
          return "Hello," + name
    }
})

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

<!-- wxml文件 -->
<view>{{myModule.testFunc(name)}}</view>
 
<wxs module="myModule">
    function testFunc(name) {
        return "Hello," + name
    }
    module.exports.testFunc = testFunc
</wxs>
 
// some-page.js
Page({
    data: {
        name: "一斤代碼"
    }
})

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

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

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

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

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

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

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