在浏览器中使用节点模块

Question

我正在使用非常简单的Refify npm模块来处理循环结构JSON。它将Node.js中的循环结构JSON对象字符串化，然后发送到客户端。我的Angular前端收到字符串化的JSON，需要调用parse refify方法将其转换回可用对象。

如何在我的Angular前端中包含refify节点模块，以便引用refify？

后端使用情况如下：

var refify = require("refify");
app.get("/api/entries, function(req, res){ 
  var circularJSON = //a circular JSON object
  res.send(refify.stringify(circularJSON));
});

前端参考将如下所示：

$http.get("/api/entries").success(function(data){
  $scope.entries = refify.parse(data);
});

Answer 1

您可以使用browserify作为构建步骤，也可以使用wzrd.in CDN，它是npm模块的CDN。

browserify作为构建步骤

使用节点样式require()来组织浏览器代码并加载由npm安装的模块。 Browserify将递归分析您应用中的所有require（）调用，以便构建一个可以在单个<script>标记中提供给浏览器的包。有关更多信息和示例，click here。

wzrd.in CDN

<script src="https://wzrd.in/standalone/refify@latest"></script>
<script>
    window.refify // You can use refify now!
</script>

您可以转到https://wzrd.in/standalone/refify@latest，复制代码，然后根据需要将其粘贴到您自己的文件中。请参阅jsfiddle here。

Answer 2

如果你想在浏览器中使用模块，你可以使用Commonjs和AMD

例如：

requirejs.org

browserify

commonjs.org

systemjs

您可以将refify转换为模块（browserify，requirejs，commonjs，...）并使用。

有用的链接：

create module in RequireJS

writing modular js/

Answer 3

以下是您可以在node.js和浏览器中使用的Refify的分叉版本。

<强> Forked Refify

您只需下载index.js并将其包含在AngularJS应用程序中即可。并使用它。

请参阅下面的代码，我已将整个分叉index.js文件添加到代码段和示例中。

＆＃13;

＆＃13;

(function(obj) {
  if (typeof exports === 'undefined') {
    obj.refify = refify;
  } else {
    module.exports = refify;
  }


  function refify(obj) {
    var objs = [];
    var paths = []

    var keyStack = [];
    var objStack = [];

    return walk(obj);

    function walk(it) {
      if (typeof it !== 'object') {
        return it;
      }
      objs.push(it);
      paths.push(keyStack.slice())
      objStack.push(it)
      var copy = initCopy(it);
      for (var k in it) {
        keyStack.push(k);
        var v = it[k];
        var i = objs.indexOf(v);
        if (i == -1) {
          copy[k] = walk(v)
        } else {
          var $ref = '#/' + paths[i].join('/');
          copy[k] = {
            $ref: $ref
          };
        }
        keyStack.pop();
      }
      objStack.pop();
      return copy;
    }
  }

  refify.parse = function(it) {
    if (typeof it !== 'object') it = JSON.parse(it);

    var keyStack = [];
    var copy = initCopy(it);

    walk(it);

    return copy;

    function walk(obj) {
      if (typeof obj !== 'object') {
        set(copy, keyStack.slice(), obj);
        return;
      }
      for (var k in obj) {
        keyStack.push(k);
        var current = obj[k];
        var objPath = parseRef(current);
        while (objPath) {
          current = get(copy, objPath);
          objPath = parseRef(current);
        }
        if (current === obj[k]) {
          // We did *not* follow a reference
          set(copy, keyStack.slice(), initCopy(current));
          walk(current);
        } else {
          // We *did* follow a reference
          set(copy, keyStack.slice(), current);
        }
        keyStack.pop();
      }
    }
  }

  refify.stringify = function(obj, replacer, spaces) {
    return JSON.stringify(refify(obj), replacer, spaces)
  }

  function parseRef(value) {
    if (typeof value !== 'object') return false;
    if (!value.$ref) return false;
    var path = value.$ref == '#/' ? [] : value.$ref.split('/').slice(1);
    return path
  }

  function get(obj, path) {
    if (!path.length) return obj;
    if (typeof obj !== 'object') return;
    var next = obj[path.shift()];
    return get(next, path);
  }

  refify.set = set;

  function set(obj, path, value) {
    if (path.length === 0) throw new Error("Cannot replace root object");
    var key = path.shift();
    if (!path.length) {
      obj[key] = value;
      return;
    }
    switch (typeof obj[key]) {
      case 'undefined':
        obj[key] = isNaN(parseInt(key, 10)) ? {} : [];
        break;
      case 'object':
        break;
      default:
        throw new Error("Tried to set property " + key + " of non-object " + obj[key]);
    }
    set(obj[key], path, value);
  }

  function initCopy(obj) {
    if (typeof obj !== 'object') return obj;
    return Array.isArray(obj) ? [] : {}
  }

}(this));


// Example with forked version

var obj = {
  inside: {
    name: 'Stackoverflow',
    id: '98776'
  }
};

obj.inside.parent = obj;

var refifyObject= refify(obj);

document.getElementById("out").innerHTML = JSON.stringify(refifyObject);

＆＃13;

<div id="out"></div>

＆＃13;

＆＃13;

＆＃13;