2. Proficient in JavaScript modular development of front-end series technology

Before using SEAJS Modular development, directly on the page reference JS will be prone to conflict and dependency related issues, the specific problems are as follows

Issue 1: Many people develop scripts prone to conflict (such as global parameter conflicts, method name conflicts), you can use namespaces to reduce conflicts, not completely avoid conflicts

// JavaScript Document /* var a = 10;function tab () {}function drag () {}function dialog () {} */ var miaov = {};  // the name is longer, can only reduce the conflict, not completely avoid   ten== = function () {};

Issue 2: Dependency problem, JS reference dependency, the following code b.js depends on A.js, then b.js can not be loaded before a.js.

Scripts that traditional scripts rely on must all be referenced in

<! DOCTYPE Html>"Content-type"Content="text/html; Charset=utf-8"><title> Untitled Document </title><script>/*one page: <script src= "a.js" ></script><script src= "b.js" ></script><script src= "C.js" ></script><script src= "D.js" ></script>*/show.js: Calendar widget for your colleagues:<script src="A.js"></script><script src="Show.js"></script>Show (); your colleague:<script src="A.js"></script><script src="B.js"></script><script src="Show.js"></script>Show (); your colleague:<script src="A.js"></script><script src="B.js"></script><script src="Show.js"></script><script src="Hide.js"></script>Show ();</script>
When the Web site development is more and more complex, often encounter conflicts, dependency problems, how to solve these problems, is our JS module to solve the problem.
JS Modular
How to solve? The Seajs Library solves the problem that just appeared, promoting the concept of Code maintainability module http: // seajs.org The difference between Seajs and jquery
Query is like a soldier in a rush (manipulating DOM operations for practical development), SEAJS is like a pipe logistics (module development, no logic involved)
1. Using Seajs
Seajs How to solve? ① introduction of Sea.js library ② How to become a module? Define③ How do I invoke a module? How does Exportsseajs.use④ depend on modules? Require
// JavaScript Document Define (function (require,exports,module) {  //Sea parameter        : No modification allowed //  Exports: Object function for externally supplied interface         Show () {        alert (1);    }         = Show;    });
The parameters under JavaScript documentdefine (require,exports,module) {  //sea: The//require that are not allowed to be modified: the interface that is dependent on the module var a = Require ('./module3.js '). A;   When introducing a module under sea, the result of require execution is exportsfunction show () {alert (a);} Exports.show = Show;});
// JavaScript Document // var a = +; Define (function (require,exports,module) {        //alert (module.exports = = exports);        /* Require.async ('. Js/module2.js ', function () {        alert (' Module loaded callback ');    }); */        var  - ;         = {        a:a    };    });
<! DOCTYPE Html>"Content-type"Content="text/html; Charset=utf-8"><title> Untitled Document </title><script src="Sea/sea.js"></script><script>//two parameters: first parameter: Address of module The second parameter: callback function (the parameter of the callback function represents exports)//Localhost/seajs+gruntjs/sea/js/module1.js//the default root of sea: sea.js this fileSeajs.use ('./js/module1.js', Function (ex) {ex.show (); //1Show (); //2function Show () {alert (2); }}); Seajs.use ('./js/module2.js', Function (ex) {ex.show (); //3Show (); //4function Show () {alert (4); }    });</script>
2. Proficient in JavaScript modular development of front-end series technology