javascript - Use node module in browser - Stack Overflow

admin管理员组

文章数量:1026380

I'm using the very simple Refify npm module to handle circular structure JSON. It stringifies a circular structure JSON object in Node.js to then send to the client. My Angular frontend receives the stringified JSON and needs to call the parse method of refify to convert it back to a usable object.

How do I include the refify node module in my Angular frontend so I can reference refify?

Backend usage looks like so:

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

The frontend reference would look like this:

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

I'm using the very simple Refify npm module to handle circular structure JSON. It stringifies a circular structure JSON object in Node.js to then send to the client. My Angular frontend receives the stringified JSON and needs to call the parse method of refify to convert it back to a usable object.

How do I include the refify node module in my Angular frontend so I can reference refify?

Backend usage looks like so:

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

The frontend reference would look like this:

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

• javascript
• json
• angularjs
• node.js

Share Improve this question Follow edited May 18, 2015 at 14:00 CaribouCode asked May 18, 2015 at 13:54 CaribouCodeCaribouCode 14.5k3333 gold badges111111 silver badges187187 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You can either use browserify as a build step, or you could use wzrd.in CDN, which is a CDN for npm modules.

browserify as a build step

Use node-style require() to organize your browser code and load modules installed by npm. Browserify will recursively analyze all the require() calls in your app in order to build a bundle you can serve up to the browser in a single <script> tag. For more information, and examples, click here.

wzrd.in CDN

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

You can go to https://wzrd.in/standalone/refify@latest, copy the code, and paste it into your own file if you want. See jsfiddle here.

Here is the forked version of Refify you can use in node.js as well as browsers.

Forked Refify

You can simply download the index.js and include it in your AngularJS application. and use it.

see the below code, I have added the whole forked index.js file in snippet and example at the end.

(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);

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

if you want use module in browser, you can use Commonjs and AMD

for example :

requirejs

browserify

monjs

systemjs

you can convert refify to module ( browserify ,requirejs,monjs,...) and use.

Useful Links :

create module in RequireJS

writing modular js/

I'm using the very simple Refify npm module to handle circular structure JSON. It stringifies a circular structure JSON object in Node.js to then send to the client. My Angular frontend receives the stringified JSON and needs to call the parse method of refify to convert it back to a usable object.

How do I include the refify node module in my Angular frontend so I can reference refify?

Backend usage looks like so:

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

The frontend reference would look like this:

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

I'm using the very simple Refify npm module to handle circular structure JSON. It stringifies a circular structure JSON object in Node.js to then send to the client. My Angular frontend receives the stringified JSON and needs to call the parse method of refify to convert it back to a usable object.

How do I include the refify node module in my Angular frontend so I can reference refify?

Backend usage looks like so:

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

The frontend reference would look like this:

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

• javascript
• json
• angularjs
• node.js

Share Improve this question Follow edited May 18, 2015 at 14:00 CaribouCode asked May 18, 2015 at 13:54 CaribouCodeCaribouCode 14.5k3333 gold badges111111 silver badges187187 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You can either use browserify as a build step, or you could use wzrd.in CDN, which is a CDN for npm modules.

browserify as a build step

Use node-style require() to organize your browser code and load modules installed by npm. Browserify will recursively analyze all the require() calls in your app in order to build a bundle you can serve up to the browser in a single <script> tag. For more information, and examples, click here.

wzrd.in CDN

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

You can go to https://wzrd.in/standalone/refify@latest, copy the code, and paste it into your own file if you want. See jsfiddle here.

Here is the forked version of Refify you can use in node.js as well as browsers.

Forked Refify

You can simply download the index.js and include it in your AngularJS application. and use it.

see the below code, I have added the whole forked index.js file in snippet and example at the end.

(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);

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

if you want use module in browser, you can use Commonjs and AMD

for example :

requirejs

browserify

monjs

systemjs

you can convert refify to module ( browserify ,requirejs,monjs,...) and use.

Useful Links :

create module in RequireJS

writing modular js/

本文标签： javascriptUse node module in browserStack Overflow