JavaScript in ASP (MVC4 bundle) technology

When it comes to modularization of JavaScript in WEB applications, it's easy to think of Requirejs, Seajs, and ECMAScript 6. ES6 to full application there is a time, Requirejs and Seajs modularity in the actual application of two branches: first, loading and creating modules on demand, the second is to package the tool into a single file, one-time loading, on-demand module creation. The bundled (bundle) technology of ASP. NET MVC4 is similar to the latter.

MVC4 bundles are primarily used to optimize the loading of JavaScript and CSS resources. For an introduction to this technology, you can refer to "ASP. MVC4 Bunlde bundled compression technology" or "CSS programming: Bundling and Shrinking." Its characteristics are very distinct, there are mainly two points:

1. In the development environment, loading the original file, easy to locate and Debug;

2. In a production environment, all resource classifications are packaged and compressed by configuration, optimizing browser-to-resource loading.

Because of its two features, it is difficult to use existing JAVASCRIPT modular tools for development If you are using Bundle technology. Turned down Baidu and Google, did not find the right solution, so decided to write a simple module loader, mainly to achieve the following goals:

1. Modular development

2. Most JavaScript files are loaded by MVC4 once, but modules are created on demand

3. Some pages of the script, can be loaded by the page, but also the modular

Analysis of objectives, consolidation, probably the following points need to achieve

2. Modules that need to be reused should be named modules because they cannot be file-based after the Bundle. This scenario can be defined as an anonymous module, considering that the specific page's own module does not need to be reused. So the module defines the function like this:

   Funciton define (name, factory) {if (isfunction (name)) {factory = name name = undefined}//..... .}

   The uniqueness of the module name is controlled by a person, but a check mechanism should be provided, so if a duplicate definition occurs, an exception is thrown. By being in a project, naming conflicts should not be the principal contradiction. If the unfortunate naming conflict becomes the principal contradiction, it can basically be solved by defining a namespace. The simplest namespace is to include the namespace part in the module name, for example "app.core.codec.hexcode" .

   
   

4. Load on demand, use require functions

   function require (modulename) {//...}

   
   

5. The

6. Executes the portal of the module. Although you can use require as a portal, require requires a module name as a parameter and cannot be used as a portal for an anonymous module. Imagine the following scenario:

   define (function ()  {    //  ......}). Use () 

   To implement this scenario, you need define to return an object that has the use method and can invoke the current module's The factory function. A straightforward way to do this is to define a module class internally to load the module configuration, generate a module object at define , and return it.

   function define (name, factory)  {     // ......    var module = new module (Factory)      // ......    return module} 

   
   

8. Internal module management. Manage all the module definitions through a map<name, Module> , which is an ordinary JavaScript object on the implementation. Anonymous modules do not need to be managed because they are used immediately. The core of module management is actually the module class, which needs to be done to create modules, cache exported objects, provide export objects, and so on. and other methods should be hidden except when the use method needs to be exposed.

   After reference, scrutiny, and experimentation, the following code framework is obtained

In the final implementation, there is also a need to deal with fault tolerance, as well as a number of details. The final code is named js-modular.js and can be downloaded in the attachment. Only one thing to be aware of when using it is to remember to put the script on the page js-modular.js before all the module definition scripts.

Demo Download (vs2013,mvc4,nuget) (still awaiting approval)

This article from "Border Town Inn," the blog, please be sure to keep this source http://jamesfancy.blog.51cto.com/2516291/1598533

JavaScript in ASP (MVC4 bundle) technology