Note that there are some explanatory texts on larger screens.

plurals
  1. POEvaluation of JavaScript Package Concept
    primarykey
    data
    text
    <p>I have an idea for a new JavaScript architecture style for web applications and I was hoping anyone here could help me flesh it out and think through it.</p> <p>I have multiple web application projects where the amount of JavaScript used is tremendous - especially using frameworks such as jQuery, ExtJS, OpenLayers, etc. All of these frameworks obviously provide an easy one-line way to include them in a given page for use.</p> <p>However, I always end up writing an extremely large amount of JavaScript for the webapp myself. I like to keep things structured. I use a namespace schema that looks something like this:</p> <p><code>WebAppName.category.pageName.method = function() { ... }</code></p> <p>...or something similar. So for instance, if I'm building a utility function for an administration page of a webapp called "JSMapper" it would look like this:</p> <p><code>JSMapper.util.administration.someMethod = function() { ... }</code></p> <p>Using this keeps things structured, but after adding dozens and dozens of methods, a JavaScript file can become ridiculously long, even if it's split into different files for different pages (for instance administration.js would hold all the <code>JSMapper.xxx.administration</code> functions or something).</p> <p>So I've come up with a PHP script that lets me separate each JavaScript method into its own file, and use a directory structure to regulate how everything is defined. So in essence, I can take this directory structure:</p> <pre><code>JSMapper |-index.php |-scripts | |-JSMapper | | |-repository | | | |-administration | | | | |-someRepositoryMethod.js | | |-util | | | |-administration | | | | |-someMethod.js | | | | |-someOtherMethod.js | | | |-aGeneralUtilityMethod.js |-treescript | |-treescript.php </code></pre> <p>...and include the treescript.php file with a parameter in a <code>&lt;script&gt;</code> tag:</p> <p><code>&lt;script type='text/javascript' src='treescript/treescript.php?package=JSMapper'&gt;&lt;/script&gt;</code></p> <p>The PHP script goes out and gets all the files, defines the namespaces based on the directory structure, and gives me the contents of all the files requested:</p> <pre><code>if(typeof window.JSMapper == "undefined") JSMapper = {}; if(typeof JSMapper.util == "undefined") JSMapper.util = {}; if(typeof JSMapper.util.administration == "undefined") JSMapper.util.administration = {}; JSMapper.util.admin.someMethod = function() { // do something }; JSMapper.util.admin.someOtherMethod = function() { // do something else }; JSMapper.util.aGeneralUtilityMethod = function() { // this method is not specific to the administration page }; if(typeof JSMapper.repository == "undefined") JSMapper.repository = {}; if(typeof JSMapper.repository.administration == "undefined") JSMapper.repository.administration = {}; JSMapper.repository.admin.someRepositoryMethod = function() { // do something }; </code></pre> <p>It can also take a subpackage as an argument, for instance <code>JSMapper.util</code> and it will only retrieve the methods from that subpackage.</p> <p>I have started using this method successfully on one project, and it's wonderful to have all my JavaScript organized into packages, and all my methods within each namespace are alphabetized and easy to locate and manage.</p> <hr> <p>So my question is this: is this a practical approach? Is it appropriate for enterprise-grade web development? Any disadvantages I'm overlooking? Any thoughts, comments, alternative solutions are welcome. I can provide the PHP script file upon request. Thanks.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    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.
    1. This table or related slice is empty.
    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