2.2.2 General JavaScript Development 常规 JavaScript 开发

2.2.2.1 JavaScript Obfuscation/ JavaScript 混淆

[翻译]
默认情况下，当您将 JavaScript 交付到浏览器客户端时，您将整个 JavaScript 源代码交付给客户端。然后，该 JavaScript 在浏览器中被解释和运行。在客户端运行时，无法对 JavaScript 进行任何程度的加密，因为 JavaScript 源代码必须被 JavaScript 解释器理解，而解释型语言没有二进制中间形式。

[原文]
By default, when you deliver JavaScript to a browser client, you deliver the entire source to that JavaScript. That JavaScript is then interpreted and run on the browser. It is not possible to encrypt the JavaScript to any extent on the client at the point it is run, since the JavaScript source must be understood by the JavaScript interpretor and interpreted languages do not have a binary intermediate form.

• deliver /d'lvr/ 交付
• interpreted /n'trprtd/ 解释的
• encrypt /n'krpt/ 加密
• interpretor /n'trprtr/ 解释器
• binary /'banri/ 二进制的

[翻译]
可以在传输中加密 JavaScript，并在客户端解密后运行，但客户端仍然可以在解密后访问源代码。

[原文]
It would be possible to encrypt the JavaScript in transmission and have it decrypted and run on the client, but the client would still be able to access the source after decryption.

• transmission /traens'mn/ 传输
• decrypted /di'krptd/ 解密的
• access /'aekses/ 访问

[翻译]
我们不进行混淆，因为方法名称构成了公共 API，并且输入/输出需要在通信两端理解混淆。

[原文]
We do not obfuscate because the method names form a public API and I/O would need to understand the obfuscation at both communication ends.

• obfuscate /'ɑbfsket/ 混淆
• public /'pblk/ 公共的
• API /e pi 'a/ 应用程序编程接口
• communication /kmjun'ken/ 通信

2.2.2.2 Namespaces 命名空间

[翻译]
标准 JavaScript 中不存在命名空间的概念，因此在创建新类名称时要格外小心。在 mxGraph 中，所有类都以“mx-”前缀开头，以避免意外冲突或覆盖原型。

[原文]
The concept of namespaces does not exist in standised JavaScript, so take great care when creating new class names. In mxGraph, all of the classes begin with the prefix “mx-”, to avoid clashes or overriding prototypes unintentionally.

• namespaces /'nemspesz/ 命名空间
• standardised /'staendrdazd/ 标准化的
• prefix /'prifks/ 前缀
• clashes /klaez/ 冲突
• overriding /ovr'rad/ 覆盖

2.3 Hello World! 你好，世界！

[翻译]
mxGraph 的“你好，世界！”是一个简单的客户端示例，显示两个带标签“Hello”和“World!”的连接顶点。该示例展示了以下内容：

• 创建一个链接 mxGraph 客户端 JavaScript 的 HTML 页面，
• 创建一个放置 mxGraph 的容器，
• 向该图添加所需的单元。

[原文]
Hello World in mxGraph consists of a simple client-side example that displays two connected vertices with the labels “Hello” and “World!”. The example demonstrates the following things:

• Creating an HTML page that links the mxGraph client JavaScript,
• Creating a container to place the mxGraph into,
• Adds the required cells to that graph.

• consists /kn'ssts/ 包含
• client-side /'klant sad/ 客户端
• vertices /'vrtsiz/ 顶点
• labels /'leblz/ 标签
• container /kn'tenr/ 容器

[翻译]
示例的源代码 helloworld.html 可以在 mxGraph 的评估版和完整版的示例目录中找到。HTML 源代码包含两个主要部分：头部和主体。这些部分包含以下主要元素，您可以将其视为构建基本 mxGraph 应用程序的模板：

[原文]
The source code for the example, helloworld.html, can be found below and in the examples directory of both the evaluation and full versions of mxGraph. The HTML source contains two main sections, the head and the body. These contain the following main elements that you can consider a template for building a basic mxGraph application:

• source /srs/ 源代码
• evaluation /vaelju'en/ 评估
• sections /'seknz/ 部分
• head /hed/ 头部
• template /'templt/ 模板

[翻译]

• mxBasePath：这是一个 JavaScript 变量，定义了 css、images、resources 和 js 目录所在的目录。它是 JavaScript 代码，需要放在 script 标签内。此变量必须在加载 mxClient.js 之前定义，且不应以斜杠结尾。
• mxClient.js：这是 mxGraph 库的路径。如果 HTML 文件在本地执行，路径可能是本地计算机或公共互联网路径。如果 HTML 页面从 Web 服务器下载，路径通常是公共互联网路径。
• 容器创建：在代码底部，在 body 元素中，定义了网页加载时调用的函数（onload 的值）。它传入一个 div 容器作为参数，该容器定义在下方。此 div 是 mxGraph 组件将放置的容器。在本例中，应用了网格背景，常用于图表应用程序。在创建容器时，除背景和容器宽度高度外，未描述图的其他视觉部分。 注意：如果您不希望出现滚动条，应始终使用 overflow:hidden 样式。

[原文]

• mxBasePath: This is a JavaScript variable that defines the directory within which the css, images, resources and js directories are expected to be found. It is JavaScript code and needs to be placed with in a script tag. This must come before the line loading mxClient.js and should not have a trailing slash.
• mxClient.js: This is the path to mxGraph library. If the HTML file is executed locally, the path might be local to the computer or a public Internet path. If the html page were downloaded from a web server, the path would generally be a public Internet path.
• Creation of the container: At the bottom of the code, in the body element, the function that is called on loading the web page is defined (the value of onload). It passes in a div container as a parameter, that is defined underneath. This div is the container the mxGraph component will be placed within. In this example a grid background is applied, as commonly used in diagramming applications. No other part of the graph visuals are described at container creation, other than the background and the container width and height.
  Note that the overflow:hidden style should always be used if you want no scrollbars to appear.

• variable /'vaeribl/ 变量
• directory /d'rektri/ 目录
• script /skrpt/ 脚本
• trailing /'trel/ 末尾的
• scrollbars /'skrolbɑrz/ 滚动条

[翻译]

• 入口函数：文件的主要代码是页面加载时执行的入口方法，在本例中是 JavaScript 代码，必须位于 JavaScript 脚本元素内。任何 mxGraph 应用程序的前几行应检查浏览器是否受支持，如果不支持则适当退出。如果浏览器受支持，则在 div 容器中创建 mxGraph，并在 begin/end 更新调用之间向图添加三个单元。

[原文]

• The entry function: The main code of the file is the entry method executed on page load in this case. This is JavaScript code and must be within a JavaScript script element. The first lines of any mxGraph application should be to check the browser is supported and exit appropriately if not. If the browser is supported, a mxGraph is created within the div container and three cells are added to the graph between the begin/end update calls.

• entry /'entri/ 入口
• executed /'ekskjutd/ 执行
• appropriately /'propritli/ 适当地
• supported /s'prtd/ 支持的
• cells /selz/ 单元

mxGraph 你好世界示例 / The mxGraph HelloWorld example

<html>  
<head>  
   <title>Hello, World! example for mxGraph</title>  

   <!-- Sets the basepath for the library if not in same directory -->  
   <script type="text/javascript">  
      mxBasePath = '../src';  
   </script>  

   <!-- Loads and initializes the library -->  
   <script type="text/javascript" src="../src/js/mxClient.js"></script>  

   <!-- Example code -->  
   <script type="text/javascript">  
      // Program starts here. Creates a sample graph in the  
      // DOM node with the specified ID. This function is invoked  
      // from the onLoad event handler of the document (see below).  
      function main(container)  
      {  
         // Checks if the browser is supported  
         if (!mxClient.isBrowserSupported())  
         {  
            mxUtils.error('Browser is not supported!', 200, false);  
         }  
         else  
         {  
            // Creates the graph inside the given container  
            var graph = new mxGraph(container);  

            // Enables rubberband selection  
            new mxRubberband(graph);  

            // Gets the default parent for inserting new cells. This  
            // is normally the first child of the root (ie. layer 0).  
            var parent = graph.getDefaultParent();  

            // Adds cells to the model in a single step  
            graph.getModel().beginUpdate();  
            try  
            {  
               var v1 = graph.insertVertex(parent, null,  
                        'Hello,', 20, 20, 80, 30);  
               var v2 = graph.insertVertex(parent, null,  
                        'World!', 200, 150, 80, 30);  
               var e1 = graph.insertEdge(parent, null, '', v1, v2);  
            }  
            finally  
            {  
               // Updates the display  
               graph.getModel().endUpdate();  
            }  
         }  
      };  
   </script>  
</head>  

<!-- Page passes the container for the graph to the program -->  
<body onload="main(document.getElementById('graphContainer'))">  

   <!-- Creates a container for the graph with a grid wallpaper -->  
   <div id="graphContainer"  
      style="overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif')">  
   </div>  
</body>  
</html>  

[翻译]
本练习中需要注意的重要概念包括：

• mxClient.js 是一个将 mxGraph 所有 JavaScript 源代码合并的 JavaScript 文件。从 Web 服务器下载时，将所有 JavaScript 作为一个文件获取比多个单独文件快得多，因为每个文件都需要请求/确认的开销。通常速度提升至少为 2 倍，尽管这取决于服务器与一个客户端保持并行套接字的能力。
• JavaScript 代码及其依赖项都放置在 head 元素中。
• Internet Explorer 默认启用了安全选项，当尝试从本地文件系统运行 JavaScript 时会提示用户。此选项可在选项菜单中禁用，但请注意，从本地文件系统运行不是 mxGraph 的部署场景，仅在开发期间可能发生。
• 您的应用程序可以编写并链接到应用程序中，可以在 HTML 文件内，也可以在单独的 JavaScript 源代码中，通过类似于示例中 mxClient.js 文件的方式链接到 HTML 中。

[原文]
Important concepts to note in this exercise are:

• mxClient.js is a JavaScript file combining all of the JavaScript source code of mxGraph. When downloading from a web server, obtaining all the JavaScript as one file is much faster than as lots of separate files, due to the overhead of the requests/acknowledgements required for each file. The speed increase is usually at least x2, although it varies with the capacity of the server to have parallel sockets open with one client.
• The JavaScript code and its dependencies are all placed within the head element.
• Internet Explorer has, by default, security options enabled that cause a user prompt when attempting to run JavaScript from the local file system. This can be disabled in the options menu, but note that running from the local file system is not a deployment scenario of mxGraph, this would only happen during development.
• Your application can be written and linked into the application either within the HTML file, or in separate JavaScript source code that is linked into the html in the way the mxClient.js file is in the example.

• combining /km'ban/ 合并
• overhead /'ovrhed/ 开销
• acknowledgements /k'nɑldmnts/ 确认
• sockets /'sɑkts/ 套接字
• prompt /prɑmpt/ 提示