【開源】Qone 正式釋出，使 javascript 支援 .NET LINQ

【當耐特】發表於2018-04-24

Qone

下一代 Web 查詢語言，使 javascript 支援 LINQ

Github： https://github.com/dntzhang/qone

緣由

最近剛好修改了騰訊文件 Excel 表格公式的一些 bug，主要是修改公式的 parser 。比如下面的指令碼怎麼轉成 javascript 執行？

= IF(SUM(J6:J7) + SUM(J6:J7) > 10, "A2 是 foo", "A2 不是 foo")

公式或一些指令碼語言的實現包含幾個主要步驟:

scanner > lexer > parser > ast > code string

得到 code string 之後可以動態執行，比如 js 裡使用 eval ，eval 能保留上下文資訊，缺點是執行程式碼包含編譯器程式碼，eval 的安全性等。
得到 code string 之後也可直接使用生成的 code string 執行，缺點是依賴構建工具或者編輯器外掛去動態替換原始碼。

比如 wind 同時支援 JIT 和 AOT, qone 的思路和上面類似，但不完全相同， qone 的如下:

scanner > lexer > parser > ast > method(ast)

這個後面寫原理時候再細說。

總的來說，因為騰訊文件公式相關工作、早年的 kmdjs 開發 (uglify2) 和 .NET 開發，所以有了 qone 。

LINQ

LINQ (語言整合查詢) 是 .NET Framework 3.5 版中引入的一項創新功能。在 Visual Studio 中，可以用 Visual Basic 或 C# 為以下資料來源編寫 LINQ 查詢：SQL Server 資料庫、XML 文件、ADO.NET 資料集，以及可列舉的 Objects(即 LINQ to Objects)。

qone 是一款讓 Web 前端工程師在 javascript 使用 .NET 平臺下類似 LINQ 語法的前端庫。qone 讓 Web 前端工程師通過字串的形式實現了 LINQ to Objects 的呼叫（下面統一叫做 qone to objects），Objects即 JSON 組成的 Array。舉個簡單的例子(qone 遠比下面的例子強大):

var list = [
    { name: 'qone', age: 1 },
    { name: 'linq', age: 18 },
    { name: 'dntzhang', age: 28 }
]

var result = qone({ list }).query(`
            from n in list   
            where n.age > 18
            select n
        `)

assert.deepEqual(result, [{ "name": "dntzhang", "age": 28 }])

與 LINQ 一樣，和 SQL 不同，qone 的 from 也在前面，為後面語句能夠有智慧提示，qone 是基於 string 的實時編譯，不是 javasript 的原生語法，所以雖然 from 寫在前面但不支援智慧提示，但可以專門為 qone 寫個編輯器外掛去實現智慧提示，所以 qone 語法設計上依然把 from 放在前面。

從根本上說，qone to objects 表示一種新的處理集合的方法。採用舊方法，您必須編寫指定如何從集合檢索資料的複雜的 foreach 迴圈。而採用 qone 方法，您只需編寫描述要檢索的內容的宣告性程式碼。
另外，與傳統的 foreach 迴圈相比，qone 查詢具有三大優勢：

它們更簡明、更易讀，尤其在篩選多個條件時
它們使用最少的應用程式程式碼提供強大的篩選、排序和分組功能
無需修改或只需做很小的修改即可將它們移植到其他資料來源

通常，您要對資料執行的操作越複雜，就越能體會到 qone 相較於傳統迭代技術的優勢。

qone 安裝

npm install qone

qone 關鍵字與運算子

from
in
where
select
orderby
desc
asc
groupby
limit

其中 from 和 in 一起使用，orderby 和 desc 或者 asc 一起使用。

from 也可以把子屬性作為 dataSource:

from n in data.list

qone 支援下面三類運算子:

括號：( )
比較運算子： = , > , < , >= , <= , !=
與或非: && , || , !

條件判斷語句也支援 null, undefined, true, false。

通過上面各種組合，你可以寫出很複雜的查詢條件。比如:

qone({ list }).query(`
    from n in list   
    where !(n.age > 17 || n.age < 2) && n.name != 'dntzhang'
    select n
`)

也支援 bool 型別的查詢:

var list = [
    { name: 'qone', age: 1, isBaby: true },
    { name: 'linq', age: 18 },
    { name: 'dntzhang', age: 28 }]

var result = qone({ list }).query(`
        from a in list       
        where a.isBaby && n.name = 'qone'
        select a
    `)

assert.deepEqual(result, [{ name: 'qone', age: 1, isBaby: true }])

其中 isBaby 是 bool 型別，同樣的寫法:
a.isBaby = true (等同於: a.isBaby)
a.isBaby = false (等同於: !a.isBaby)

qone 方法注入

通過上面介紹發現 qone 不支援加減乘除位求模運算？怎麼才能圖靈完備？方法注入搞定一切！如下所示:

QUnit.test("Method test 8", function (assert) {
    var arr = [1, 2, 3, 4, 5]

    qone('square', function (num) {
        return num * num
    })

    qone('sqrt', function (num) {
        return Math.sqrt(num)
    })

    var result = qone({ arr }).query(`
      from n in arr   
      where  sqrt(n) >= 2 
      select { squareValue : square(n) }
  `)

    assert.deepEqual(result, [{ "squareValue": 16 }, { "squareValue": 25 }])
})

方法也是支援多引數傳入，所以可以寫出任意的查詢條件。其中select, where, orderby, groupby 語句都支援方法注入。

qone select 輸出

通過 select 可以輸出各種格式和欄位的資料:

QUnit.test("Select JSON test", function (assert) {
    var list = [
        { name: 'qone', age: 1 },
        { name: 'linq', age: 18 },
        { name: 'dntzhang', age: 28 }
    ]

    var result = qone({ list }).query(`
                from n in list   
                where n.age < 20
                select {n.age, n.name}
            `)

    assert.deepEqual(result, [
        { "age": 1 , "name": "qone" },
        { "age": 18, "name": "linq" }
    ])

})

把所有場景列舉一下:

select n 輸出源 item
select n.name 輸出一維表
select n.name, n.age 輸出二維表
select { n.age, n.name } 預設方式輸出 JSON Array(key自動使用 age 和 name)
select { a: n.age, b: n.name } 指定 key 輸出 JSON Array
select { a: methodName(n.age), b: n.name } 注入方法
select methodName(n.age), n.name 注入方法
select methodName(n.age, n.name, 1, true, 'abc') 注入方法並傳遞引數

qone orderby

var result = qone({ list }).query(`
                from n in list   
                where n.age > 0
                orderby n.age asc, n.name desc
                select n
            `)

如果沒有標記 asc 或者 desc，使用預設排序 asc。

qone groupby

QUnit.test("Simple groupby test 1", function (assert) {
    var list = [
        { name: 'qone', age: 1 },
        { name: 'linq', age: 18 },
        { name: 'dntzhang1', age: 28 },
        { name: 'dntzhang2', age: 28 },
        { name: 'dntzhang3', age: 29 }
    ]

    var result = qone({ list }).query(`
                from n in list   
                where n.age > 18
                groupby n.age
            `)

    assert.deepEqual(result, [
        [{ "name": "dntzhang1", "age": 28 }, { "name": "dntzhang2", "age": 28 }],
        [{ "name": "dntzhang3", "age": 29 }]])

})

groupby 可以作為結束語句，不用跟著也不能跟著 select 語句，groupby 也可以支援方法注入。

qone 多資料來源

QUnit.test("Multi datasource with props condition", function (assert) {

    var listA = [
        { name: 'qone', age: 1 },
        { name: 'linq', age: 18 },
        { name: 'dntzhang', age: 28 }]


    var listB = [
        { name: 'x', age: 11 },
        { name: 'xx', age: 18 },
        { name: 'xxx', age: 13 }
    ]

    var result = qone({ listA, listB }).query(`
            from a in listA     
            from b in listB      
            where a.age = b.age
            select a, b
        `)

    assert.deepEqual(result, [[{ "name": "linq", "age": 18 }, { "name": "xx", "age": 18 }]])
})

多資料來源會產生笛卡兒積。

qone 巢狀子資料來源

QUnit.test("Multi deep from test ", function (assert) {

    var list = [
        { name: 'qone', age: 1, isBaby: true, colors: [{ xx: [1, 2, 3] }, { xx: [11, 2, 3] }] },
        { name: 'linq', age: 18, colors: [{ xx: [100, 2, 3] }, { xx: [11, 2, 3] }] },
        { name: 'dntzhang', age: 28, colors: [{ xx: [1, 2, 3] }, { xx: [11, 2, 3] }] }]

    var result = qone({ list }).query(`
            from a in list   
            from c in a.colors   
            from d in c.xx  
            where d === 100
            select a.name, c,d
        `)

    assert.deepEqual(result, [["linq", { "xx": [100, 2, 3] }, 100]])
})

也可以和自身的資料來源會產生笛卡兒積。

qone limit 與分頁查詢

通過 limit 可以應付最常見的兩種查詢場景 - top N 和分頁。

查詢top3:

QUnit.test("Limit top 3", function (assert) {
    var list = [
        { name: 'dntzhang1', age: 1 },
        { name: 'dntzhang2', age: 2 },
        { name: 'dntzhang3', age: 3 },
        { name: 'dntzhang4', age: 4 },
        { name: 'dntzhang5', age: 5 },
        { name: 'dntzhang6', age: 6 },
        { name: 'dntzhang7', age: 7 },
        { name: 'dntzhang8', age: 8 },
        { name: 'dntzhang9', age: 9 },
        { name: 'dntzhang10', age: 10 }
    ]

    var pageIndex = 1,
        pageSize = 4
    var result = qone({ list }).query(`
                    from n in list   
                    select n
                    limit 0, 3
                `)


    assert.deepEqual(result, [

        { name: 'dntzhang1', age: 1 },
        { name: 'dntzhang2', age: 2 },
        { name: 'dntzhang3', age: 3 }
    ])

})

分頁查詢:

QUnit.test("Limit one page test", function (assert) {
    var list = [
        { name: 'dntzhang1', age: 1 },
        { name: 'dntzhang2', age: 2 },
        { name: 'dntzhang3', age: 3 },
        { name: 'dntzhang4', age: 4 },
        { name: 'dntzhang5', age: 5 },
        { name: 'dntzhang6', age: 6 },
        { name: 'dntzhang7', age: 7 },
        { name: 'dntzhang8', age: 8 },
        { name: 'dntzhang9', age: 9 },
        { name: 'dntzhang10', age: 10 }
    ]

    var pageIndex = 1,
        pageSize = 4
    var result = qone({ list }).query(`
                    from n in list   
                    where n.age > 0
                    select n
                    limit ${pageIndex * pageSize}, ${pageSize}
                `)


    assert.deepEqual(result, [
    { name: 'dntzhang5', age: 5 },
    { name: 'dntzhang6', age: 6 },
    { name: 'dntzhang7', age: 7 },
    { name: 'dntzhang8', age: 8 }])

})

star & fork & pr & repl & follow me

Go 1.4正式釋出支援Android開發
2014-12-12
GoAndroid
.NET 8正式釋出
2023-11-15
【開源】合摩 WeexBox 正式釋出
2018-12-20
CoreWCF 1.0.0 釋出，微軟正式支援WCF
2022-04-29
微軟
【開源框架】SqlSugarRepository 全庫ORM 正式釋出
2016-11-20
框架SqlSugarORM
WGCLOUD 叢集監控平臺 v2.1，正式釋出原始碼，支援開源
2019-12-22
GCCloud原始碼
Kubernetes 1.25正式釋出！
2022-08-25
飛冰 2.0 正式釋出並支援 Vue 專案開發
2019-03-04
Vue
BSN正式釋出開源外掛DDC保管箱
2022-06-06
開源新聞速遞：Solus 1.2 "Shannon" 正式釋出
2016-06-21
OpenSSL 1.1.1釋出正式支援TLS1.3
2018-09-12
TLS
網易智企釋出“易+”開源計劃，網易會議元件正式開源
2022-03-08
元件
.NET 7 Preview 1 已正式釋出
2022-02-27
View
小辣椒國民大聖手機正式釋出：支援微信八開
2016-09-28
釋出 JavaScript 開源專案的學習指南
2015-08-04
JavaScript
開源專案buffalo2.0最終版正式釋出
2007-05-10
.NET 6 Preview 6 正式釋出：關注網路開發
2021-07-15
View
RoadFlow 1.8.2 釋出，.NET開源工作流
2015-03-02
.NET開源工作流 RoadFlow 1.5 釋出
2014-09-24
如約而至，.NET 5.0 正式釋出
2020-11-11
正式釋出 | .NET 7 預覽版 2
2022-03-25
【開源】Skatch 正式釋出 – 極速渲染抽象派草圖
2019-02-24
抽象
【開源】Skatch 正式釋出 - 極速渲染抽象派草圖
2018-07-30
抽象
【京東開源專案】微前端框架MicroApp 1.0正式釋出
2023-10-16
前端框架APP
開源問答社群軟體 Answer 1.0 正式版釋出！
2022-12-19
GitLab Web IDE正式釋出10.7版本並開源
2018-04-26
GitlabWebIDE
Google釋出VS Code,支援Kubernetes應用開發
2019-05-19
Go
Taro 正式釋出 3.4 版本: 全面支援 Preact & Vue 3.2
2022-01-21
ReactVue
PHP 5.5 正式版釋出不再支援 Windows XP
2013-06-25
PHPWindows
.NET MVC 開源工作流 RoadFlow 1.7 釋出
2014-12-19
MVC
里程碑事件丨.NET MAUI 正式釋出
2022-06-03
事件UI
J2PaaS 低程式碼平臺，正式釋出開源版！
2021-10-13
Pigsty v2 正式釋出：更好的RDS PG開源替代
2023-02-28
開源新聞速遞：Lumina 桌面環境 1.0 正式釋出
2016-08-12
紅帽開源作業系統CentOS 6.6 正式版釋出
2014-10-29
作業系統CentOS
開源媒體中心 Kodi 15.0 Isengard 正式版釋出
2015-07-23
.NET 開源匯入匯出庫 Magicodes.IE 2.5釋出
2020-12-08
Xiuno 開發手冊正式釋出。
2016-07-15