Rebol Tutorial

A nice interactive editor to create Javascript Objects Fast (with or without Object Prototype)

javascript-object As David Crockford puts it JavaScript’s syntax looks like “C-like syntax, including curly braces and the clunky for statement”. So here’s a nice interactive editor to alleviate the clunly stuffs by allowing you to create a Javascript Object by just typing:


to-js Product

or for a more refined version (see at the end of the article):


to-js/prototype Product

where Product is just an example of an Object you will create by typing minimistically:


Class Product [
   Id: 1
   ProductName: "Orange"
]

The result will be copied directly to the clipboard with a nicely indented javascript code:

function Product() {

	this.Id=1;
	this.ProductName="Orange";

	this.getId = function() {
		return this.Id;
	}

	this.getProductName = function() {
		return this.ProductName;
	}

}

The source code to generate js code is below and you can adapt it furthermore to suit your own coding style (see at the end a more refined version for prototype):


to-js: func['ObjectName [Word!] /local Obj body javascript-code][

  if not value? 'class [
      ;load oop library
      do http://reboltutorial.com/oop
  ]

  Obj: get ObjectName
  Body: third Obj

  javascript-code: rejoin [
    "function " ObjectName "() {"
     newline newline
  ]

  Foreach [property value] Body [
    if (type? value) = string! [
        value: rejoin [{"} value {"}]
    ]
    append javascript-code rejoin [
      tab "this." property "=" value ";" newline
    ]
  ]

  append javascript-code rejoin [newline]

  Foreach [property value] Body [
    append javascript-code rejoin [
      tab "this.get" property " = function() {" newline
      tab tab "return this." property ";" newline
      tab "}"
      newline
      newline
    ]
  ]

  append javascript-code rejoin ["}" newline]

  write clipboard:// javascript-code
]

The instruction


do http://reboltutorial.com/oop

loads our class and extend function to create our Product as already seen:


Class Product [
   Id: 1
   ProductName: "Orange"
]

Or add properties dynamically to your object before converting it with to-js:


extend Product [
    CategoryId: 1
]
to-js Product

which will then copy this js snippet to the clipboard:

function Product() {

	this.Id=1;
	this.ProductName="Orange";
	this.CategoryId=1;

	this.getId = function() {
		return this.Id;
	}

	this.getProductName = function() {
		return this.ProductName;
	}

	this.getCategoryId = function() {
		return this.CategoryId;
	}

}

A more refined version of the script is to accept the prototype (or proto for shortcut) to be able to output the prototype syntax version:


to-js: func['ObjectName [Word!] /proto /Prototype /local Obj body javascript-code][

  if not value? 'class [
      ;load oop library
      do http://reboltutorial.com/oop
  ]

  Obj: get ObjectName
  Body: third Obj

  javascript-code: rejoin [
    "function " ObjectName "() {"
     newline newline
  ]

  Foreach [property value] Body [
    if (type? value) = string! [
        value: rejoin [{"} value {"}]
    ]
    append javascript-code rejoin [
      tab if/else (not any [proto prototype])
      [ "this"][rejoin [ObjectName ".prototype"]] "." property "=" value ";"
      newline
    ]
  ]

  append javascript-code rejoin [newline]

  Foreach [property value] Body [
    append javascript-code rejoin [
      tab if/else (not any [proto prototype])
      [ "this"][rejoin [ObjectName ".prototype"]]
      ".get" property " = function() {" newline
      tab tab "return this." property ";" newline
      tab "}"
      newline
      newline
    ]

  ]

  append javascript-code rejoin ["}" newline]

  write clipboard:// javascript-code
]

Output:

function product() {

	product.prototype.Id=1;
	product.prototype.ProductName="Orange";

	product.prototype.getId = function() {
		return this.Id;
	}

	product.prototype.getProductName = function() {
		return this.ProductName;
	}

}

For a tutorial on Javascript OOP see for example this article or this article.

1 people like this post.