Javascript development guide

  • Shopping malls are encouraged to define and use the naming guidelines and namespacing of Javascript for global resources (objects, functions and variables), because they can use multiple apps (including script and jquery).

Purpose of using Javascript namespaces

  • The shopping malls can be used with multiple apps selected and installed. In this case, the naming of the global resources (objects, functions, variables, etc.) used by the scripts provided by each app cannot be consistent with each app, module or even filenames.
  • This can lead to inevitable errors or inoperability due to crashes between apps.
  • To prevent this in advance, we provide and recommend guidelines for naming and use of namespaces.
  •  
  • The goals for the content provided in this guide are as follows:
  •  1) Maintain consistency with naming for prevention and development of script crashes between each app
  •  2) Prevent function errors on using global resources (variables, functions) with the same names

Javascript naming guide

  • The naming guide for scripts is recommended for the purpose of preventing mutual crashes due to script naming.
  • File path and filename naming rules
File path and filename naming rules
Classification Namespace format Example of namespace Example of filename
App-dependent JS {{App name}}_ADMIN_{{Detailed path name}}_{{File name}} SMARTVIEW_ADMIN_MENU_LNB {{Domain}}/admin/menu/lnb.js
{{App name}}_FRONT_{{Detailed path name}}_{{File name}} SMARTVIEW_FRONT_AUTH_CS {{Domain}}/front/auth/cs.js
{{App name}}_UTIL_{{Detailed path name}}_{{File name}} SMARTVIEW_UTIL_DATE_DIFF {{Domain}}/util/date/diff.js

Javascript namespacing guide

  • The namespace usage guide for the script is recommended for the purpose of preventing mutual crashes due to the creation of global objects.
  • Patterns in which crashes may occur in general
// Risky pattern

var MYAPP = {};
 

// Improved pattern

if(typeof MYAPP === 'undefined') {
   var MYAPP = {};
}
 

// Can be written shorter.

var MYAPP = MYAPP || {};

  • Pattern for basically recommended Javascript usage
    If you declare a global variable inside an immediately executable function and put the resources that use the global variable into the execution function, naming crashes can be prevented because the function is localized.
// How to write JavaScript with as little library dependence as possible

(function(){
   // Enter the JavaScript to be executed
})();

  • Pattern that defines a namespace using an object

var MYAPP = MYAPP || {};

MYAPP.makenamespace = function (ns_string) {
var parts = ns_string.split('.'),
    parent = MYAPP, i;

   // Remove the name of the first duplicate global object.
if(parts[0] === MYAPP) {
     parts = parts.slice(1);
   }

for (i = 0; i < parts.length; i +=1 ) {
     // Create the property if it does not exist.
if(typeof parent[parts[i]] === 'undefined') {
       parent[parts[i]] = {};
     }
     parent = parent[parts[i]];
   }
return parent;
   };

// Use the namespace creation function.
MYAPP.makenamespace('MYAPP.modules.module2');

// The above namespace function returns the following result.

var MYAPP = {
   modules : {
     module2 : {}
   }
};