Question

我想在Javascript中解析以下文件，保存为example.yml：

images:
    main   : [tester_tester/dic.jpg]
    red    : [tester_tester/red.jpg]
    blue   : [tester_tester/blue.jpg]
    green  : [tester_tester/green.jpg,tester_tester/green2.jpg]
categories:
    cat1   : [Yes, No]
    cat2   : [Aa,Bb,Cc]
    cat3   : []
    cat4   : [1,2,3,4,5]

我在js-yaml.min.js中使用YAML解析器，但我只能使用以下内容来解析YAML的字符串：

var fake = "images: {red: boat}\ncategories: {cat1 : []}";  
var YAMLfile = jsyaml.load(fake);

然后将YAML存储为嵌套对象。我如何使用此库来加载和解析YAML文件而不是仅仅给它字符串？在他们的网站https://github.com/nodeca/js-yaml上，API说要使用require函数，但这不起作用。有什么想法吗？

我基本上在寻找这里的功能：http://nodeca.github.com/js-yaml/

Answer 1

该示例使用textarea的值和YAML。解析它并更新结果元素内容。

这是您正在寻找的真实代码：

    /*global window, document, location, CodeMirror, jsyaml, inspect, base64, hasher*/


window.runDemo = function runDemo() {
  'use strict';

  var source, result, initial, permalink, timer1, timer2 = null,
      fallback = document.getElementById('source').value || '';

  var SexyYamlType = new jsyaml.Type('!sexy', {
    kind: 'sequence', // See node kinds in YAML spec: http://www.yaml.org/spec/1.2/spec.html#kind//
    construct: function (data) {
      return data.map(function (string) { return 'sexy ' + string; });
    }
  });

  var SEXY_SCHEMA = jsyaml.Schema.create([ SexyYamlType ]);

  function parse() {
    var str, obj;

    try {
      str = source.getValue();
      obj = jsyaml.load(str, { schema: SEXY_SCHEMA });

      permalink.href = '#yaml=' + base64.encode(str);

      result.setOption('mode', 'javascript');
      result.setValue(inspect(obj, false, 10));
    } catch (err) {
      result.setOption('mode', 'text/plain');
      result.setValue(err.stack || err.message || String(err));
    }
  }

  function updateSource() {
    var yaml;

    if (location.hash && '#yaml=' === location.hash.toString().slice(0,6)) {
      yaml = base64.decode(location.hash.slice(6));
    }

    source.setValue(yaml || fallback);
    parse();
  }

  permalink = document.getElementById('permalink');

  source = CodeMirror.fromTextArea(document.getElementById('source'), {
    mode: 'yaml',
    undoDepth: 1,
    onKeyEvent: function (_, evt) {
      switch (evt.keyCode) {
        case 37:
        case 38:
        case 39:
        case 40:
          return;
      }

      if (evt.type === 'keyup') {
        window.clearTimeout(timer1);
        timer1 = window.setTimeout(parse, 500);

        if (null === timer2) {
          timer2 = setTimeout(function () {
            window.clearTimeout(timer1);
            window.clearTimeout(timer2);
            timer2 = null;
            parse();
          }, 1000);
        }
      }
    }
  });

  result = CodeMirror.fromTextArea(document.getElementById('result'), {
    readOnly: true
  });

  // initial source
  updateSource();

  // start monitor hash change
  hasher.prependHash = '';
  hasher.changed.add(updateSource);
  hasher.initialized.add(updateSource);
  hasher.init();
};

js-yaml - 在Javascript中解析YAML文件

1 个答案: