如何创建Vorlon.js插件

最新推荐文章于 2024-09-14 18:52:56 发布

dingshi7798

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量125

点赞数

文章标签： javascript 操作系统 json ViewUI

本文是Microsoft的Web开发系列的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。

在最近// BUILD 2015大会的主题演讲中，我们的Microsoft团队发布了Vorlon.js （一种用于调试您的网站的工具）。 Vorlon.js主要由仪表板组成，该仪表板显示来自您站点的数据。要使其工作，您仅需在站点代码中引用脚本。

在您网站的代码中引用Vorlon.js

我们（ Pierre Lagarde ， David Catuhe ， David Rousset和我自己）构建此文件主要是为了帮助Web开发人员在移动设备上调试其网站。当然，专有的解决方案已经存在，例如用于调试chrome mobile的Chrome开发人员工具，或者与Safari和Visual Studio for Internet Explorer甚至Weinre等效的解决方案。但这些都不是真正与技术和平台无关的。这是我们想要填补Vorlon.js的空白。

目标的图形表示

您可以从npm安装Vorlon.js，也可以克隆GitHub存储库并使用gulp使其准备使用。

您可以在我们的网站（ http://vorlonjs.io/ ）或我的朋友戴维（David）撰写的博客文章中找到有关此信息的更多信息。

要为Vorlon创建插件，可以使用TypeScript或直接将其与JavaScript一起使用。

我将为您提供JavaScript和TypeScript代码，以便您可以使用自己喜欢的语言阅读它：)

我们将要创造什么

在本文中，我选择创建一个将获取设备信息的插件。该网站基于RaphaëlGoetter创建的网站http://mydevice.io/。为简单起见，我只会从“我的屏幕”类别的“大小”部分中获取数据。

从mydevice.io获取插件信息

激活此插件后，Vorlon.js仪表板将显示来自客户端的尺寸信息。

在详细介绍之前，请看一下此快速视频，该视频向您展示了我们将创建的内容。

在此视频中，我在台式机浏览器上进行了演示，但显然也可以在手机或平板电脑上使用。

第一步：在Vorlon.js之外编写代码

vorlon.js插件只不过是HTML，CSS和JavaScript代码。您的插件正在从客户端获取数据并将其发送到服务器以在仪表板上显示。

这意味着您可以首先在没有Vorlon.js的情况下执行此操作，将所有内容写在一个简单的Web项目中，然后将其包含在Vorlon.js插件体系结构中。

我们的插件将获取一些与客户端大小有关的信息，并将其显示在HTML列表中。调整浏览器大小时，它还将刷新数据。您可以在此处看到完整的示例（它虽然不漂亮，但是可以完成工作！;-)）。

HTML样本

HTML代码非常简单：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <title></title> 
        <link href="control.css" rel="stylesheet" /> 
        <script src="vorlon.deviceinfo.js"></script> 
    </head> 
    <body> 
        <div id="deviceinfo" class="deviceinfo-container"> 
            <h2>My Screen</h2> 
            <ul> 
                <li>CSS device-width: <span id="devicewidth"></span></li> 
                <li>CSS device-height: <span id="deviceheight"></span></li> 
                <li>JS screen.width: <span id="screenwidth"></span></li> 
                <li>JS window.innerWidth: <span id="windowinnerwidth"></span></li> 
                <li>JS body.clientWidth: <span id="bodyclientwidth"></span></li> 
                <li>JS screen.availWidth: <span id="screenavailwidth"></span></li> 
            </ul> 
        </div> 
    </body> 
</html>

它使用以下control.css文件：

.deviceinfo-container { 
    font-family: "Verdana", "Comic Sans MS"; 
} 

.deviceinfo-container h2 { 
    font-weight: normal; 
} 

.deviceinfo-container ul li { 
    font-weight: bold; 
} 

.deviceinfo-container ul span { 
    font-weight: normal; 
}

页面加载后，每次调整窗口大小并更新列表时，JavaScript代码都会获取数据：

(function(){ 
    var compute = function() { 
        document.getElementById('devicewidth').innerText = document.documentElement.clientWidth + 'px'; 
        document.getElementById('deviceheight').innerText = document.documentElement.clientHeight + 'px'; 
        document.getElementById('screenwidth').innerText =  screen.width + 'px';; 
        document.getElementById('windowinnerwidth').innerText = window.innerWidth + 'px'; 
        document.getElementById('bodyclientwidth').innerText = document.body.clientWidth + 'px'; 
        document.getElementById('screenavailwidth').innerText = screen.availWidth + 'px'; 
    }; 
     
    window.onresize = function(event) { 
        compute(); 
    }; 
     
    document.addEventListener("DOMContentLoaded", compute); 

})();

所以，到目前为止，我们只在编写简单的经典Web代码：)

现在让我们看一下如何将其转换为Vorlon.js插件！

为插件创建基本的JavaScript / TypeScript代码

在Vorlon.js中，插件是从Plugin类继承的JavaScript类。最少的代码包含一个constructor和getID函数。

的JavaScript

var __extends = this.__extends || function (d, b) { 
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; 
    function __() { this.constructor = d; } 
    __.prototype = b.prototype; 
    d.prototype = new __(); 
}; 
var VORLON; 
(function (VORLON) { 
    var MyDeviceInfo = (function (_super) { 
        __extends(MyDeviceInfo, _super); 
        function MyDeviceInfo() { 
            _super.call(this, "mydeviceinfo", "control.html", "control.css"); 
            this._ready = true; 
        } 
        MyDeviceInfo.prototype.getID = function () { 
            return "MYDEVICEINFO"; 
        }; 
        return MyDeviceInfo; 
    })(Plugin); 
    VORLON.MyDeviceInfo = MyDeviceInfo; 

    //Register the plugin with vorlon core 
    Core.RegisterPlugin(new MyDeviceInfo()); 
})(VORLON || (VORLON = {}));
TypeScript 
module VORLON { 
    export class MyDeviceInfo extends Plugin { 

        constructor() { 
            super("mydeviceinfo", "control.html", "control.css"); 
            this._ready = true; 
        } 

        public getID(): string { 
            return "MYDEVICEINFO"; 
        } 
    } 

    //Register the plugin with vorlon core 
    Core.RegisterPlugin(new MyDeviceInfo()); 
}

ID只是一个可以选择的字符串。将插件添加到仪表板时将需要它。

构造函数调用super函数并为其命名，即control.html和control.css文件。这是了解这些文件并在必要时加载它们的先决条件。

代码的最后一行是将插件注册到Core管理的列表中。核心角色是处理客户端与仪表板之间的所有通信和数据交换。

在仪表板上渲染

每次加载插件时，仪表板都会在其右窗格中创建一个新选项卡。这是您的插件呈现的空间。

Vorlon.js插件的布局部分包含在HTML文件中。在我们要创建的示例中，它称为control.html，这是Vorlon.js插件中的约定。默认情况下不显示它，您必须在插件代码中对其进行管理。这是使用_insertHtmlContentAsync完成的，通常是在startDashboardSide函数中完成的。

当仪表板在服务器端实例化您的插件时，将调用startDashboardSide 。它只有一个参数，即HTML div，您可以在其中呈现控件。基本上，它是显示在插件标签上的div。

_insertHtmlContentAsync是一个帮助程序，用于异步加载您在插件构建过程中提供的所有文件。第一个参数是render div，第二个参数是一个回调函数，可在一切完成后为您提供已加载的div。

的JavaScript

MyDeviceInfo.prototype.startDashboardSide = function (div) { 
    if (div === void 0) { div = null; } 
    this._insertHtmlContentAsync(div, function (filledDiv) { 
        //load data 
    }); 
};
TypeScript 
public startDashboardSide(div: HTMLDivElement = null): void { 
    this._insertHtmlContentAsync(div, (filledDiv) => { 
        //load data 
    }) 
}

在control.html部分，您只需要删除JavaScript引用即可生成以下代码：

的HTML

< !DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <title></title> 
        <link href="control.css" rel="stylesheet" /> 
    </head> 
    <body> 
        <div id="mydeviceinfocontainer" class="deviceinfo-container"> 
            <h2>My Screen</h2> 
            <ul> 
                <li>CSS device-width: <span id="devicewidth"></span></li> 
                <li>CSS device-height: <span id="deviceheight"></span></li> 
                <li>JS screen.width: <span id="screenwidth"></span></li> 
                <li>JS window.innerWidth: <span id="windowinnerwidth"></span></li> 
                <li>JS body.clientWidth: <span id="bodyclientwidth"></span></li> 
                <li>JS screen.availWidth: <span id="screenavailwidth"></span></li> 
            </ul> 
        </div> 
    </body> 
</html>

将数据从客户端发送到插件

因此，既然您正在控制面板中呈现控件模板，则需要从客户端向其发送数据。在初始代码上，它是在同一页面上完成的。现在，您需要打包所有内容并将其发送。

所有的沟通过程都为您服务。您只需要创建一个包含数据的对象并调用正确的函数即可。它是Core.Messenger名为sendRealTimeMessage的帮助sendRealTimeMessage 。

在MyDeviceInfo类中，我们添加了一个名为sendClientData的自定义函数。它将获取所有当前大小信息并发送。

的JavaScript

MyDeviceInfo.prototype.sendClientData = function () { 
    var data = { 
        "devicewidth": document.documentElement.clientWidth, 
        "deviceheight": document.documentElement.clientHeight, 
        "screenwidth": screen.width, 
        "windowinnerwidth": window.innerWidth, 
        "bodyclientwidth": document.body.clientWidth, 
        "screenavailwidth": screen.availWidth 
    }; 
    VORLON.Core.Messenger.sendRealtimeMessage(this.getID(), data, 0 /* Client */); 
};
TypeScript 
public sendClientData(): void { 
    var data = { 
        "devicewidth" : document.documentElement.clientWidth, 
        "deviceheight" : document.documentElement.clientHeight, 
        "screenwidth" :  screen.width, 
        "windowinnerwidth" : window.innerWidth, 
        "bodyclientwidth" : document.body.clientWidth, 
        "screenavailwidth" : screen.availWidth 
    }; 
             
    Core.Messenger.sendRealtimeMessage(this.getID(), data, RuntimeSide.Client); 
}

SendRealtimeMessage具有3个必填参数：

插件ID（这是您在getID函数上返回的字符串）
您要发送的对象（此处包含尺寸信息）
请求来自的承租人。（客户端或仪表板）

每当仪表板要求它时（例如，当用户切换到此客户端时），并且每次浏览器大小发生变化时，都需要调用此函数。

我们添加了startClientSide函数，该函数将在客户端初始化时调用以注册到window.onresize事件：

的JavaScript

MyDeviceInfo.prototype.startClientSide = function () { 
    var that = this; 
    window.onresize = function (event) { 
        that.sendClientData(); 
    }; 
};
TypeScript 
public startClientSide(): void { 
    var that = this; 
    window.onresize = (event) => { 
        that.sendClientData(); 
    }; 
}

每次用户更改浏览器大小时，此代码会将新信息发送到仪表板。

最后，我们需要添加refresh功能。每当仪表板需要来自客户端的当前信息时，它将被调用。

的JavaScript

MyDeviceInfo.prototype.refresh = function () { 
    this.sendClientData(); 
};
TypeScript 
public refresh(): void { 
    this.sendClientData(); 
}

仅此而已！ :-)

在仪表板上显示数据

现在，数据已从客户端发送到仪表板，您仍然需要在另一端进行处理。

为此，可以使用onRealtimeMessageReceivedFromClientSide函数。每次客户端通过Core.Messenger发送消息时都会调用该方法。它只有一个参数，您可以在其中获取发送的对象。

在此示例中，我们仅需使用每个值并设置正确的DOM元素即可使用新值更新列表。

的JavaScript

MyDeviceInfo.prototype.onRealtimeMessageReceivedFromClientSide = function (receivedObject) { 
    document.getElementById('devicewidth').innerText = receivedObject.devicewidth + 'px'; 
    document.getElementById('deviceheight').innerText = receivedObject.deviceheight + 'px'; 
    document.getElementById('screenwidth').innerText = receivedObject.screenwidth + 'px'; 
    ; 
    document.getElementById('windowinnerwidth').innerText = receivedObject.windowinnerwidth + 'px'; 
    document.getElementById('bodyclientwidth').innerText = receivedObject.bodyclientwidth + 'px'; 
    document.getElementById('screenavailwidth').innerText = receivedObject.screenavailwidth + 'px'; 
};

打字稿

public onRealtimeMessageReceivedFromClientSide(receivedObject: any): void { 
    document.getElementById('devicewidth').innerText = receivedObject.devicewidth + 'px'; 
    document.getElementById('deviceheight').innerText = receivedObject.deviceheight + 'px'; 
    document.getElementById('screenwidth').innerText =  receivedObject.screenwidth + 'px';; 
    document.getElementById('windowinnerwidth').innerText = receivedObject.windowinnerwidth + 'px'; 
    document.getElementById('bodyclientwidth').innerText = receivedObject.bodyclientwidth + 'px'; 
    document.getElementById('screenavailwidth').innerText = receivedObject.screenavailwidth + 'px'; 
}

让我们测试一下！

为了能够测试此插件，您需要执行一些简单的步骤。

编译并缩小

如果选择了TypeScript，则需要使用npm上可用的TypeScript编译器之类的工具，或者通过修改/ Plugins文件夹中可用的gulpfile.js将自己集成到gulp进程中。

从TypeScript到JavaScript的编译完成后，您需要缩小JS文件。使用此约定很重要：

yourPluginName.js（用于最大化版本）
yourPluginName.min.js（缩小版）

复制服务器中的所有内容

第二步是将所有文件复制到/ Server / public / vorlon / plugins文件夹中。在这里，您必须使用插件名称创建一个文件夹，并将所有内容放在其下。这包括您的html，css和js文件。

这是我们在本文中创建的插件的完成方式：

插件的JS / TypeScript代码

将您的插件添加到catalog.json文件

下一步是在服务器中注册插件。为此，请在Server / public / catalog.json文件中添加一行：

JSON 
{ 
    "IncludeSocketIO": true, 
    "plugins": [ 
        { "id": "CONSOLE", "name": "Interactive Console", "panel": "bottom", "foldername" : "interactiveConsole"}, 
        { "id": "DOM", "name": "Dom Explorer", "panel": "top", "foldername" : "domExplorer" }, 
        { "id": "MODERNIZR", "name": "Modernizr","panel": "bottom", "foldername" : "modernizrReport" }, 
        { "id" : "OBJEXPLORER", "name" : "Obj. Explorer","panel": "top", "foldername" : "objectExplorer" }, 
        { "id" : "MYDEVICEINFO", "name" : "My Device Info","panel": "top", "foldername" : "mydeviceinfo" } 
    ] 
}

您可以在此处找到有关此的更多信息： http : //vorlonjs.io/documentation/#vorlonjs-server-advanced-topics