问Peg.js在AngularJS应用程序中的应用

EN

简短回答

• 在CriteriaValue.js中，将第一行的module.exports更改为parser
• 在index.html中，交换<script>标记，以便CriteriaValue.js优先
• (可选)在script.js中，将解析结果输出为格式化的JSON字符串，以查看实际值

下面是柱塞：http://plnkr.co/edit/kiBp2Na9s4PXpenCzQjx?p=preview

长答案

运行原始柱塞并检查控制台日志；您将注意到两个错误：

• ReferenceError: Can't find variable: parser (script.js:3)
• ReferenceError: Can't find variable: error (CriteriaValue.js:1)

第一个错误是由于没有parser对象在全局范围内由script.js或CriteriaValue.js创建。

查看CriteriaValue.js，您可以看到它实际上是将生成的解析器对象分配给一个不存在的modules.export。这是PEG.js的默认行为，因为它假定您将在node.js中使用解析器。您看到错误的原因是没有module对象，所以我们不能分配给这个不存在的对象的export属性。将赋值更改为parser，这是我们可以分配的(因为PEG.js不使用严格模式)，避免了这个错误，并使parser可以在script.js中使用。

最后，需要在script.js使用解析器之前创建解析器；这就是<script>交换的原因。

对于CriteriaValue.js的未来创建，请如下所示：

pegjs --export-var parser CriteriaValue.pegjs

这将生成文件，以便将对象分配给变量parser而不是module.exports。

AngularJS进来的地方

正如@dirkk在注释中所说的，将解析器定义为全局变量是错误的做法，当然不是AngularJS方法，即将解析器实现为服务。

最快(但不一定是最好的)方法是使用您已经生成的CriteriaValue.js代码并围绕它包装一个服务。例如：

angular.module('yourApp.services', [])
.factory('Parser', function() {
  // The generated code, except replace "parser = " with "return "
});

另一种选择是获取.pegjs文件&在客户机上使用PEG.buildParser()生成解析器。

angular.module('yourApp.services', [])
.factory('Parser', ['$http', '$q', function($http, $q) {
  var deferred = $q.defer();
  $http.get('path/to/CriteriaValue.pegjs')
  .success(function(grammar) {
    try {
      deferred.resolve(PEG.buildParser(grammar));
    } catch (e) {
      deferred.reject(e);
    }
  })
  .error(function(message) {
    deferred.reject('Unable to load grammar: ' + message);
  });

  return deferred.promise;
}]);

这使得更新语法变得更容易，因为您不必每次都重写服务，但这会增加加载应用程序的延迟。这是否可行取决于语法有多复杂&它实际需要改变的频率有多大。

尽管您如何构建解析器，也不一定需要将生成的解析器对象直接公开给其他的角度应用程序。相反，您可以为应用程序实际使用这个解析器(例如validate(input)、getAST(input)等)实现更高级别的API。这样，如果您将来决定切换到另一个解析器(例如Jison)，那么您需要更改的代码就少得多。