Nodejs 与 jquery-direct.js 结合使用 大大简化js 异步调用服务器端的方法

Nodejs 与 jquery-direct.js 结合使用 大大简化js 异步调用服务器端的方法

最近几天利用工作的空余时间自己仿ext.direct 的技术写的一个jquery-direct插件，ext.direct 是个很不错的技术，只是ext js文件太大，加载慢，学习起来比较费劲，懂得人较少不太适合，程序员比较熟悉的是jquery框架，所以花了几天的时间写了这个插件 下面介绍使用方法： 1.创建项目并准备好jquery,jquery-code.js,jquery-direct.js (jquery-code.js,jquery-direct.js 下载地址 http://pan.baidu.com/s/1sjHMubr#path=%2F%E6%8A%80%E6%9C%AF%E8%B5%84%E6%BA%90%2FJs)

![PWR$]%22ROOR{VLE~9Q$@YE.jpg](//static.cnodejs.org/Fk3V2swKgLJqbP83XZHn0Zesdnec) 2.引用dll jack.direct.dll ,Newtonsoft.Json.dll(要6.0.5以上的版本，3.5,4.0我试过不行)下载地址：http://pan.baidu.com/s/1sjHMubr#path=%2F%E6%8A%80%E6%9C%AF%E8%B5%84%E6%BA%90%2F.NET%2FDirect.NET 3.新建一般的处理文件ashx,这里我建了一个EchoHandler.ashx 代码里面的类继承Jack.Direct.DirectHandler 并重写ProviderName，Namespace属性 ![G6I3JO{MF[QIL2B{8]}4]PB.png](//static.cnodejs.org/FrO4726PGcf1jOyOzen4I2ItsicI) 4.把上面EchoHandler.ashx 里面类加上DirectAction 标记 ![VGSY8FN5YBWLS)QV]GZAG(S.png](//static.cnodejs.org/Ft7r9V5ONrWRsJGzgfDxpB6012Jx) 5.接下来就可以写自己的业务处理的方法，要注意的是方面上面加上DirectMethod 标记 表示这个方法可以用客户端js 的direct插件的访问 VSET$@}6RBHJGGI{_WYK3M1.png 6.新建一个页面导入js文件 注意顺序 ![11E4SQJ]]5TJP)U}[6])_E0.png](//static.cnodejs.org/Fuf9jrdEp6g7Hpn2sxO3r4nYCJE1) 7.接下来就可以写测试js代码了 ![7BEUOGKIVU~O8QF$H{FJH8.png 8.在浏览器打开页面测试 L1M$FE}$6%GT3O88W0F1BF4.jpg


2 回复

Nodejs 与 jquery-direct.js 结合使用 大大简化js 异步调用服务器端的方法

最近几天利用工作的空余时间自己仿ext.direct 的技术写了一个jquery-direct插件。ext.direct 是个很不错的技术，只是 ext.js 文件太大，加载慢，学习起来比较费劲，懂得人较少，不太适合。程序员比较熟悉的是 jQuery 框架，所以花了几天的时间写了这个插件。

使用方法：

  1. 准备项目 创建一个新项目，并准备好以下文件：

    • jquery.js
    • jquery-code.js
    • jquery-direct.js

    可以从以下链接下载这些文件： 下载地址

  2. 引用必要的DLL 需要引用以下两个 DLL 文件：

    • jack.direct.dll
    • Newtonsoft.Json.dll（需要6.0.5以上的版本）

    下载地址： 下载地址

  3. 创建处理文件 新建一个一般的处理文件 .ashx，例如 EchoHandler.ashx，并在其中创建一个类继承自 Jack.Direct.DirectHandler，并重写 ProviderName 和 Namespace 属性。

    public class EchoHandler : Jack.Direct.DirectHandler
{
    public override string ProviderName => "EchoProvider";
    public override string Namespace => "EchoNamespace";
    
    // 直接方法标记
    [DirectMethod]
    public string Echo(string message)
    {
        return $"Echo: {message}";
    }
}

  4. 标记直接方法 在 EchoHandler.ashx 中，为需要通过客户端JS插件访问的方法添加 [DirectMethod] 标记。

    [DirectMethod]
public string Echo(string message)
{
    return $"Echo: {message}";
}

  5. 编写前端页面 创建一个新的HTML页面，并导入 jquery.js 和 jquery-direct.js 文件。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Page</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="jquery-direct.js"></script>
</head>
<body>
    <button id="echoButton">Echo Message</button>
    <div id="result"></div>

    <script>
        $(document).ready(function () {
            $.direct({
                url: 'EchoHandler.ashx',
                namespace: 'EchoNamespace'
            }).on('Echo', function (response) {
                $('#result').text(response.data);
            });

            $('#echoButton').click(function () {
                $.direct.EchoNamespace.Echo({ message: 'Hello World' });
            });
        });
    </script>
</body>
</html>

  6. 测试 打开浏览器，访问该页面并点击按钮进行测试。

以上就是结合 Node.js 和 jquery-direct.js 简化异步调用服务器端的方法。这种方式不仅简化了开发过程，还提高了代码的可维护性和可读性。


在这个帖子中，作者介绍了一种结合Node.js和jquery-direct.js来简化异步调用服务器端的方法。jquery-direct.js是作者自己编写的一个插件，旨在模仿Ext Direct的技术，但使用更轻量的jQuery框架。

虽然这个帖子中的大部分内容都是关于.NET环境下的配置（如使用Ashx处理文件、dll文件等），但是我们可以借鉴其核心思想，即通过定义特定的标记或接口来简化客户端JavaScript与服务器端方法之间的通信。对于Node.js来说，我们可以使用类似的思想，通过一些中间件或库来简化这一过程。

以下是一个简单的示例，展示如何在Node.js环境中使用Express框架结合一个自定义的路由处理函数来实现类似的功能：

const express = require('express');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json());

// 假设这是我们的后端服务
const backendService = {
    echo: (params) => {
        return { result: `Received ${params.message}` };
    }
};

app.post('/api/direct', (req, res) => {
    const methodName = req.body.method;
    const params = req.body.data;

    if (backendService[methodName]) {
        try {
            const result = backendService[methodName](params);
            res.json(result);
        } catch (e) {
            res.status(500).json({ error: e.message });
        }
    } else {
        res.status(404).json({ error: 'Method not found' });
    }
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

客户端可以使用jquery-direct.js或其他方式来调用这些方法，就像在.NET环境中一样。这只是一个非常基础的示例，实际应用中可能需要考虑更多的安全性和错误处理机制。

请注意，上述代码仅展示了如何在Node.js环境中设置一个基本的API端点，实际应用中还需要考虑安全性、数据验证等问题。

回到顶部