Apriso 开发葵花宝典之五 Process Builder JavaScript 篇

本文作者陈捌华，感谢捌老师倾情奉献

概述

Process builder是Delmia Apriso中主要的业务流程管理工具，也是DELMIA更广泛的Apriso制造运营管理解决方案的核心应用程序，Process Builder允许使用屏幕流管理设计方法和实体（如项目、屏幕、布局、视图和操作（函数））创作用户界面和业务逻辑。该应用程序能够快速方便地管理和修改开发的设计，使您能够根据需要随时更改业务流程。由于增强了对可重用性的支持，以前开发的逻辑可以在新的设计中快速重用。

本文介绍几个在常规培训学习中容易被忽略，但又能有效提升开发效率的Process builder中JavaScript使用技巧。

JavaScript应用说明

以下是在Process Builder中使用JavaScript的场景:

1、使用javascript进行数据验证，例如:验证输入的productNo是否在系统中存在。

2、转换数据-通常可以将查询的数据集转换为单个数据。或者将数据转换为所需的类型。

3、建立一些业务逻辑-您可以通过PB的公式建立一些特殊的业务逻辑。例如，控制操作步骤的路由。

4、控制UI元素-你可以建立一些html输出包括一些特殊的UI元素，包括一些特殊的javaScript函数到客户端或执行一些函数库或输出html。

5、ajax等web应用的先进特性

• HTML选项卡中的JavaScript脚本将包含在此操作的每个实例中。
• JavaScript选项卡中的JavaScript脚本将仅在此操作的所有实例中包含一次。
• 在JavaScript选项卡中链接的JavaScript文件对于所有操作只包含一次。脚本链接将根据src属性(不区分大小写)进行合并。
• 如果使用相同的JavaScript函数有许多不同的操作，请将它们保存到一个外部文件中，并将其链接到JavaScript选项卡中。

JavaScript使用方法

JavaScript主要用法有

1、 直接在HTML代码中使用，如：

<button onclick="alert('Hello World!')">Try it</button>

2、 在 <script>标签中使用

<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>

3、 在JavaScript Tab页中使用

Html Tab页中：

<button onclick="myFunction()">Try it</button>

Javascript Tab页中：

function myFunction()
{
alert("Hello World!");
}

4、 包含外部Iavascript文件：

在Html和Javascript Tab页中都可以使用占位符链接到外部Javascript文件，如：

• [AprisoScripts] (e.g, <script src="[AprisoScripts]/myscript.js"></script>), 对应<drive>\Program Files\Dassault Systemes\DELMIA Apriso 2023\WebSite\Portal\Scripts目录
• [Apriso] (e.g, <script src="[Apriso]/myscript.js"></script>), 对应当 <drive>\Program Files\Dassault Systemes\DELMIA Apriso 2023\WebSite\Portal目录

选择器语法

有关选择器语法的内容，可以参照https://www.w3school.com.cn/html/index.asp，这里只列出几个主要和常见的用法

1、使用ID选择页面上的单个元素，而使用class 样式名称选择相似类型的多个元素，如：

2、属性选择器

选择器

1、一般都使用JQuery选择器：

• 所有Selector (“*”): 选择所有元素.

如：设置样式: $( ".ErrorZone *" ).css( "border", "3px solid red" );

获取样式: $( ".ErrorZone *" ).css( "border");

• 样式选择(“.class”): 选择指定样式的所有元素

如: $(“.myClass”).text ("Hello world!");

$(". myClass").attr('class', 'newClass');

• 元素选择(“element”): 选择所有指定名称的元素

如: ("p").text("Some text");

• ID 选择 (“#id”): 根据指定id属性的元素.

如: ("#test").text();

• 组合选择 (“selector1, selector2, selectorN”): 选择所有指定选择器的组合结果，通过组合选择，可以很方便的选择到Apriso form视图的元素

如: $("h2, div, span").css("background-color", "yellow");

2、有些设备可能不支持JQuery选择器，则可以使用原生的Javascript进行DOM元素的选择：

querySelector: document.querySelector(“div”);

ID选择: document.getElementById(id)

样式选择: document.getElementsByClassName(names)

3、Apriso 元素样式选择：

• 控件标题：$("Label, fl_***")，其中***为控件Code
• 控件：$("Control fc_***")，其中***为控件Code
• Grid：需要在Grid->属性中设置Class Name，$(" ***")，其中***为所设置的样式ClassName名称
• 按钮：$("input[value='***']")，其中***为所设置的状态项的系统参数Key值，或者按钮Code

常用代码片段和方法

性能相关建议

• 使用局部变量，局部变量在这个链中位于首位，所以它们总是比全局变量更快。因此，当你多次使用一个全局变量时，你应该在本地重新定义它，如：

var doc = document,
blah = doc.getElementById('myID'),
blah2 = doc.getElementById('myID2');

• 避免嵌套太多，嵌套得太过也会使你很难理解你要做的事情。嵌套的另一个问题是变量名和循环。就像你通常以i作为迭代器变量开始第一个循环一样，你将继续使用j,k,l等等。这很快就会变得一团糟，如

function renderProfiles(o){
  var out = document.getElementById(‘profiles’);
  for(var i=0;i<o.members.length;i++){
    var ul = document.createElement(‘ul’);
    var li = document.createElement(‘li’);
    li.appendChild(document.createTextNode(data.members[i].name));
    li.appendChild(addMemberData(o.members[i]));
  }
  out.appendChild(ul);
}
function addMemberData(member){
  var ul = document.createElement(‘ul’);
  for(var i=0;i<member.data.length;i++){
    var li = document.createElement(‘li’);
    li.appendChild(
      document.createTextNode(
        member.data[i].label + ‘ ‘ +
        member.data[i].value
      )
    );
  }
  ul.appendChild(li);
  return ul;
}

• 优化循环，最常见的错误之一是在每次迭代时读取数组的length属性，正确的写法如下：

var names = ['George','Ringo','Paul','John'];
var all = names.length;
for(var i=0;i<all;i++){
  doSomeThingWith(names[i]);
}

更短的写法是新建一个变量：

var names = ['George','Ringo','Paul','John'];
for(var i=0,j=names.length;i<j;i++){
  doSomeThingWith(names[i]);
}

• 构建字符串的最快方法，当你需要遍历数组或对象时，不要总是使用方便的“for”语句。使用原生的方法(如join())通常比任何非原生方法快得多，如：

var arr = ['item 1', 'item 2', 'item 3', ...];
var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';

• 不要使用with语句，任何时候调用任何变量，JavaScript引擎都必须遍历with()变量
• 对象属性和数组项比变量慢，多次引用对象属性或数组项时，都可以通过定义变量来提高性能，可以使用{}代替New Object()，Use [] 代替New Array()，如

var o = {};
var a = ['Joe','Plumber'];

• 不要引用数据太深，如果你经常引用foo。你可以通过定义var Bar = foo.bar来获得性能提升
• 避免for-in循环(和基于函数的迭代), for-in不仅可能循环遍历额外的数组项，而且还需要更多的工作。为了循环遍历这些项，JavaScript必须为每个项设置一个函数
• 使用循环时，结合控制条件和控制变量变化, 在定义循环时将控制条件和控制变量结合起来, 如果你只是对数组中的某些项进行迭代，你可以通过翻转迭代并使用while循环来减少其中一个操作，如：

var x = 9;
do { } while( x-- );

• DOM操作可能会影响性能;你要尽可能避免操纵它, JQuery在1.4版中引入了detach()来帮助解决这个问题，允许您在使用一个元素时从DOM中删除它。如：

var table = $( "#myTable" );
var parent = table.parent();
 
table.detach();
 
// ... add lots and lots of rows to table
 parent.append( table );

• 不要对不存在的元素采取行动 ，JQuery不会告诉您是否试图在一个空选择上运行大量代码—它会继续运行，就好像没有任何问题一样。由您来验证您的选择是否包含某些元素，如：

// Bad: This runs three functions before it
// realizes there's nothing in the selection
$( "#nosuchthing" ).slideUp();
 
// Better:
var elem = $( "#nosuchthing" );
 
if ( elem.length ) {
 
    elem.slideUp();
 
}
 
// Best: Add a doOnce plugin.
jQuery.fn.doOnce = function( func ) {
 
    this.length && func.apply( this );
 
    return this;
 
}
 
$( "li.cartitems" ).doOnce(function() {
 
    // make it ajax!
 });

• 使用样式表更改许多元素的CSS,如果要使用. CSS()更改超过20个元素的CSS，请考虑在页面中添加样式标记，这样可以将速度提高近60%,如

// Fine for up to 20 elements, slow after that:
$( "a.swedberg" ).css( "color", "#0769ad" );
 
// Much faster:
$( "<style type=\"text/css\">a.swedberg { color: #0769ad }</style>").appendTo( "head" );

最佳实践

• 将代码放入$View.onLoaded(function())中，如

$(View).onLoaded(function(){


  // jQuery methods go here...
});

• 不要使用#id选择器，HTML元素的ID会在运行时发生变化，因此要避免使用ID选择器。用户类选择器
• 使用Java Script选项卡输入JQuery代码。尽量不要使用HTML选项卡中的代码
• 检查边界条件，常用边界条件检查数据长度，数据类型，可被0整除等
• 输入输出使用不同的变量名称
• 开始于前一行代码的同一行上的左花括号，如

if(myState === 'testing') {
   console.log('You are in testing');
} else {
   console.log('You are in production');
}

• 使用var声明和初始化变量
• 在语句外面声明变量
• 通过将全局占用空间减少到单个名称，可以显著减少与其他应用程序、小部件或库进行不良交互的可能性。如

var DudeNameSpace = {
name : 'Jeffrey',
lastName : 'Way',
doSomething : function() {...}
}
console.log(DudeNameSpace.name); // Jeffrey

• 使用分号结束语句
• 避免使用eval
• 使用加号“+”将类型转换成数字，如：

var theform = document.forms["myform"];
    var total = (+theform.elements["val1"].value) + (+theform.elements["val2"].value);
alert(total); // This will alert 3

• 小心使用Decimal，JavaScript使用二进制浮点数。0.1 + 0.2不等于0.3?要解决这个问题，可以将数字相乘，去掉小数部分。例如，如果你要把两件商品的成本加起来，你可以把每件商品的价格乘以100，然后把总和除以100，如：

var hamburger = 8.20;
var fries = 2.10;
var total = hamburger + fries;
console.log(total); //Outputs 10.299999999999999
hamburger = hamburger * 100;
fries = fries * 100;
total = hamburger + fries;
total = total / 100;

• 对于类型敏感，使用===代替==,如

if(1 === '1') //Returns false
if(1 == '1') //Returns true
if(0 === '') //Returns false
if(0 == '') //Returns true

• 引入的javascript文件统一保存到Portal目录下指定的文件夹中，编译打包发布。