创建JS控制台（Creating a JS Console）

下面这个小的例子我们将创建一个JS控制台。我们需要一个输入区域允许用户输入表达式，和一个结果输出列表。由于这更像一个桌面应用程序，我们使用QtQuick控制模块。

注意

在你下一个项目中包含一个JS控制台可以更好的用来测试。增加Quake-Terminal效果也有助于对你的客户留下更好的印象。为了更好的使用它，你需要评估JS控制台的控制范围，例如当前可见屏幕，核心数据模型，一个单例对象或者其它的东西。

创建JS控制台（Creating a JS Console） - 图1

我们在Qt Creator中使用QtQuick controls创建一个Qt Quick UI项目。把这个项目取名为JSConsole。完成引导后，我们已经有了一个基础的应用程序框架，这个框架包含一个应用程序窗口和一个菜单。

我们使用一个TextFiled来输入文本，使用一个Button来对输入求值。表达式求值结果使用一个机遇链表模型（ListModel）的链表视图（ListView）显示，每一个链表项使用两个标签显示表达式和求值结果。

  1. // part of JSConsole.qml
  2. ApplicationWindow {
  3.   id: root
  5.   ...
  7.   ColumnLayout {
  8.       anchors.fill: parent
  9.       anchors.margins: 9
  10.       RowLayout {
  11.           Layout.fillWidth: true
  12.           TextField {
  13.               id: input
  14.               Layout.fillWidth: true
  15.               focus: true
  16.               onAccepted: {
  17.                   // call our evaluation function on root
  18.                   root.jsCall(input.text)
  19.               }
  20.           }
  21.           Button {
  22.               text: qsTr("Send")
  23.               onClicked: {
  24.                   // call our evaluation function on root
  25.                   root.jsCall(input.text)
  26.               }
  27.           }
  28.       }
  29.       Item {
  30.           Layout.fillWidth: true
  31.           Layout.fillHeight: true
  32.           Rectangle {
  33.               anchors.fill: parent
  34.               color: '#333'
  35.               border.color: Qt.darker(color)
  36.               opacity: 0.2
  37.               radius: 2
  38.           }
  40.           ScrollView {
  41.               id: scrollView
  42.               anchors.fill: parent
  43.               anchors.margins: 9
  44.               ListView {
  45.                   id: resultView
  46.                   model: ListModel {
  47.                       id: outputModel
  48.                   }
  49.                   delegate: ColumnLayout {
  50.                       width: ListView.view.width
  51.                       Label {
  52.                           Layout.fillWidth: true
  53.                           color: 'green'
  54.                           text: "> " + model.expression
  55.                       }
  56.                       Label {
  57.                           Layout.fillWidth: true
  58.                           color: 'blue'
  59.                           text: "" + model.result
  60.                       }
  61.                       Rectangle {
  62.                           height: 1
  63.                           Layout.fillWidth: true
  64.                           color: '#333'
  65.                           opacity: 0.2
  66.                       }
  67.                   }
  68.               }
  69.           }
  70.       }
  71.   }
  72. }

求值函数jsCall不会做求值操作，而是将它的内容移动到JS模块（jsconsole.js）完成清晰的分离。

  1. // part of JSConsole.qml
  3. import "jsconsole.js" as Util
  5. ...
  7. ApplicationWindow {
  8.   id: root
  10.   ...
  12.   function jsCall(exp) {
  13.       var data = Util.call(exp);
  14.       // insert the result at the beginning of the list
  15.       outputModel.insert(0, data)
  16.   }
  17. }

为了安全我们不在JS中调用eval函数，这可能导致用户修改局部作用域。我们使用constructor函数在运行时创建JS函数，并在我们的作用域中传入变量值。由于函数可能随时都在创建，它不能扮演关闭和存储它私有作用域的角色，我们需要使用 this.a = 10 来存储值10在这个函数的作用域。这个作用域由脚本设置到变量作用域。

  1. // jsconsole.js
  2. .pragma library
  4. var scope = {
  5.   // our custom scope injected into our function evaluation
  6. }
  8. function call(msg) {
  9.     var exp = msg.toString();
  10.     console.log(exp)
  11.     var data = {
  12.         expression : msg
  13.     }
  14.     try {
  15.         var fun = new Function('return (' + exp + ');');
  16.         data.result = JSON.stringify(fun.call(scope), null, 2)
  17.         console.log('scope: ' + JSON.stringify(scope, null, 2) + 'result: ' + result)
  18.     } catch(e) {
  19.         console.log(e.toString())
  20.         data.error = e.toString();
  21.     }
  22.     return data;
  23. }

调用函数返回的数据是一个JS对象，包含了一个结果，表达式和错误属性：data: { expression: {}, result: {}, error: {} }。我们可以直接在链表模型（ListModel）中使用这个JS对象，并且可以通过代理（delegate）访问它，例如model.expression会得到输入的表达式。为了让例子更加简单，我们忽略了错误的结果。