Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to create a small Javascript extension language?
    primarykey
    data
    text
    <p>I refactored my JS code recently and stumbled upon this pattern:</p> <pre><code>APP = (function() { var x,y,z; function foo() {} function bar() {} return {x:x, y:y, z:z, foo:foo: bar:bar}; })(); </code></pre> <p>The advantage to this is that it creates non-global variables with the functions having access to everything defined in <code>APP</code>. So <code>APP.foo</code> can access <code>x, y, z</code>, and bar without typing <code>APP.bar()</code>, <code>APP.x</code>, etc. Everything can also be accessed globally with <code>APP.bar()</code>, <code>APP.x</code>, etc. You can also nest them:</p> <pre><code>APP = (function() { var x,y,z; function foo() {} function bar() {} var WIDGETS = (function() { var a,b,c; function hello() {} function world() {} return {a:a, b:b, c:c, hello:hello, world:world}; })(); return {x:x, y:y, z:z, foo:foo: bar:bar, WIDGETS:WIDGETS}; })(); </code></pre> <p>So <code>WIDGETS</code> would have access to variables in <code>APP</code>, but not visa versa (<code>APP.WIDGETS.hello</code> can use <code>foo()</code>, but <code>APP.foo</code> has to use <code>WIDGETS.hello()</code>).</p> <p>I tried creating this pattern using ERB (I'm on Rails), but it turned out messy. So I'm thinking of writing a small source-to-source compiler for this - something like CoffeeScript (with the minimal difference/extended language philosophy of SASS) that just compiles a few functions to alternative javascript.</p> <p>I just want a shorthand.</p> <p>For example, this would compile to my second code block above:</p> <pre><code>//NAMESPACE is a magical function I compile down to the long version in the second code block APP = NAMESPACE(function() { var x,y,z; function foo() {} function bar() {} var WIDGETS = NAMESPACE(function() { var a,b,c; function hello() {} function world() {} //**notice the missing return statement that I don't need to manage and map to my variables** }); //**notice the missing return statement that I don't need to manage and map to my variables** }); </code></pre> <p>Simple and small - just so you don't need to keep track of the variables. Would also like to separate the namespace like thus (so I can split it to multiple files):</p> <pre><code>APP = NAMESPACE(function() { var x,y,z; function foo() {} function bar() {} //**notice the missing return statement that I don't need to manage and map to my variables** }); APP = NAMESPACE(function() { var WIDGETS = NAMESPACE(function() { var a,b,c; function hello() {} function world() {} //**notice the missing return statement that I don't need to manage and map to my variables** }); }); </code></pre> <p>Any thoughts on how to do this? I'm not sure about everything, but I think if this existed, I'd like Javascript a lot more.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload