Figure cubs cut key concepts of self-cultivation -SeaJs analysis

Foreword

High-energy warning, front Rugged Mountain Path

In the last article a brief discussion about the modular Js, first to review the current modular two specifications:

CommonJs synchronous load module specifications
AMD / CMD asynchronous loading module specifications

CMD output specification of which is the currently very popular SeaJs, This article is to explain some important concepts SeaJs encounter of use

Named module
Anonymous module
That is the principle path ID

Anonymous module

SeaJs modules generally define an anonymous manner as follows:

define(function(require,exports,module){xx})

Named module

SeaJs In addition to defining the definition of anonymous module, the module can also define named

//define(BlockID,[Deps],function(require,exports,module){})
 define(‘A’,[],function(require,exports,module){xx})

Which can

The first parameter defines the name of the module (i.e., ID), used to uniquely identify the module
The second parameter to the module dependent parameter from the reference module function body to identify the module also depends on which modules
The third parameter module body

Why do we need to be named module?

Indeed, we can put all the modules are written anonymously. But it has a big drawback is modular Js file can cause a particularly large number, this would effectively increase the number of http requests
we know, relatively small in file when the file size does not significantly affect the http download speeds, but if split the file into two files to download, the increased cost is indeed a great http
Therefore, we need to fragmented Js modules are combined into one file in many cases. But so many modules combined in one document, all anonymous, the system how to distinguish which is which module it? Therefore, we need to identify these modules to a different ID. So those with the ID of the module, the module is called to be named

I.e., the path ID

The above named module explains what is, why you need the name of the module appliances, we now come to be named module name

SeaJs遵循的是路径即ID命名规则，意思就是具名模块的ID名是路径的一部分. 而沿着最终拼接出来的路径，肯定可以找得到这个具名模块

Sounds around, but this rule is very, very important . Author also in the process of understanding SeaJs step on the path of countless pit, here to highlight some
first look at the kind of writing path SeaJs, in general, it can be divided into 3 types.

Relative path (relative path beginning character, for example ../js/), the path to this page as a starting point
Direct path (beginning with direct directory, for example js/), as a starting point the path to baseUrl
Root path (beginning with the root path, for example /app/js/) path to the root directory of the project as a starting point

Here take the entrance index.html file, for example:


<!--例1-->
<script>
    seajs.config({
    base: "../js/",      
    alias:{"JQ":"lib/jquery"}        
    })
    
    seajs.use("src/index.js")  
</script>

baseParameter is the current page (index.html) as a reference, the relative path is set based baseUrl.
In the present embodiment the baseset employed in the form of a relative path, thenbaseUrl ＝ (index.html的位置) ＋ (../js/)
aliasA module can be named (example of the anonymous ID module lib / jquery) alias (JQ), take advantage of aliases that can be very long path name named module itself becomes small fresh short, generally required for page reference libraries.
in this embodiment the path is a direct path JQ form, then the path = JQ (baseUrl) + (lib/jquery) = (index.html的位置)+ (../js/) + (lib/jquery/)
sea.useSeaJS loader is used to specify the inlet, through the inlet js required reload page 7788 JS demand loading module to achieve the purpose of
the present embodiment, sea.use path is a direct path form, the inlet index.js file path =(baseUrl) + (src/index.js) = (index的位置) + (../js/) + (src/index.js)

If you write in a different form:

<!--例2-->
<script>
    seajs.config({
    base: "../js/",      
    alias:{"JQ":"../js/lib/jquery"}        
    })
    
    seajs.use("../js/src/index.js")  
</script>

setting base in the form of a relative path, then baseUrl = (index.html的位置) ＋ (../js/)
JQ alias path after the path is in the form of a relative, then the path JQ = (index.html的位置) ＋ (../js/lib/jquery)
sea.use path is in the form of a relative path, the path of an entry file = index.js (index.html的位置) + (../js/src/index.js)

Now take for example 1:

<!--例1-->
<script>
    seajs.config({
    base: "../js/",      
    alias:{"JQ":"lib/jquery"}        
    })
    
    seajs.use("src/index.js")  
</script>

Since the alias named module called lib / jquery, jquery then your ID define defined by the module must be lib / jquery

define(‘lib/jquery’,[],function(require,exports,module){xx})

Also, because aliasthe named module (lib/jquery)uses a direct path, based on the principle that is the path ID, you should be able to follow (baseUrl) + (lib/jquery)to find the location named module, if found, will certainly be an error

Now take for example 2:

<!--例2-->
<script>
    seajs.config({
    base: "../js/",      
    alias:{"JQ":"../js/lib/jquery"}        
    })
    
    seajs.use("../js/src/index.js")  
</script>

Since the alias named module called ../js/lib/jquery, then your module ID define jquery by definition must be ../js/lib/jquery

define(‘../js/lib/jquery’,[],function(require,exports,module){xx})

Also, because aliasthe named module (../js/lib/jquery)uses a relative path of the way, according to the principle that is the path ID, you should be able to follow index.html当前位置 + (../js/lib/jquery)to find the location named module, if found, will certainly be an error

actual use

But on the actual use, we~~Basic~~Not to write anonymous module, but all write anonymous module
and then build automation through plug-in tools (such as grunt, gulp, fis3) of the module to automatically resolve anonymous anonymous of issues, such as the provision of related grunt plug-ins:

grunt-cmd-transport module to convert the anonymous module named
grunt-cmd-concat merge module will be named to a compressed file Js

Epilogue

SeaJs Dafa is good, Grunt Dafa is good, but at the time of using these tools, not simply one or two demo copy on the bin. In many cases you want to adjust the directory structure according to the characteristics of their own works, and 模块所在的路径, and 模块的ID, and finally JS合并压缩the process are closely related. Therefore, they must understand the rules, it can be even easier to use