Why should I learn SeaJs ?
[First]: In order to solve the problems in project resource file version numbers, as well as packing compression merger and other issues.
[Second]: curiosity and thirst for knowledge. [I found a lot of well-known sites are also in use ( QQ space , MSN , Taobao , etc.), and SeaJs has also been a good promotion and application].
[Third]: after understanding that Taobao Yu Bo is Yanling who think he is very cattle X.
[Strongly] recommend a little fellows Yu Bo told the SeaJs PDF learning materials, download address: http://pan.baidu.com/s/1CCz4C
[The first step to solve the problem of the version number] : First you can go to the official website to download a seaJs.org seajs example, as well as file version sea.js now has come to the V 2.1.1
Then introduced sea.js file in the project.
Figure : my project directory as shown below:
index.html source as follows:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>SeaJsDemo-操作</title> <script src="script/src/sea.js"></script> </head> <body> <div style="margin: 100px;"> <!----------------------> <div the above mentioned id = " idTest " class = " claTest1 " > SeaJS- you can </ div> <br /> <!----------------------> <div the above mentioned id = " btnClick " class = " claTest2 " > jQuery - callback test to see </ div> </div> <script type="text/javascript"> seajs.config({ // Alias Configuration Paths: { " urlSite " : " http://gdboc.sell.uni2uni.com/ " // cross call directory module may be used; may be used when obtaining relatively deep directory } // Alias Configuration alias : { ' jQuery ' : ' jQuery ' , ' style ' : ' /style/a.css ' , " a styleUrl " : " urlSite / style / the style.css " }, PRELOAD: [ ' jQuery ' ], // preloaded Base : ' / Script / the src / ' , // base path map: [[/^(.*\.(?:css|js))(.*)$ / I, ' $ 20.13101 million. 1 = V? ' ]], // Map, batch update timestamp charset: ' UTF-. 8 ' // file encoding }); // ------- seajs.use inlet module, or with data-main = ""; (The difference is that use can load multiple entry function, and do some operation callbacks) ------ ------ seajs.use ([ ' the init ' , ' jQuery ' ], function (I, $) { Alert ( " pro, all loads are done! " ); // ---------- init call interface in publicly ------------------------------- - i.alertFun (); // ---------- accustomed to the page <script> $ written on it ------------------- $ (function () { $("#btnCLick").click(function () { Alert ( " jQuery is modular, and I'm not used to it! " ); }) }) }); </script> </body> </html>
SeaJs, you have to know those things :
【1】. define
define Is a global function that defines each module [js file is a small module]
define(function(require, exports, module){
// require: is a method, as the only parameter identification accepting module for obtaining an interface provided by other modules
// exports: is an object to provide an interface module outwardly
// module: is an object stored thereon a current block properties and methods associated
})
init.js file Source :
//-------------------------------------------- define(function (require, exports, module) { require('test'); require('style'); // ---- provide external common interface ------ exports.alertFun = function () { // ...................... Alert ( " Interface init in to provide both been called! " ); }; // ---- exposed to the global ------------- // module.exports = function () { // // .............. ........ // }; });
【2】. seajs.config
Configure some global things, the version where you can solve the problem in detail as follows:
<script type="text/javascript"> seajs.config({ // path configuration Paths: { " urlSite " : " http://gdboc.sell.uni2uni.com/ " // cross call directory module may be used; may be used when obtaining relatively deep directory } // Alias Configuration alias : { ' jQuery ' : ' jQuery ' , ' style ' : ' /style/a.css ' , " a styleUrl " : " urlSite / style / the style.css " }, PRELOAD: [ ' jQuery ' ], // preloaded Base : ' / Script / the src / ' , // base path map: [[/^(.*\.(?:css|js))(.*)$ / I, ' $ 20.13101 million. 1 = V? ' ]], // Map, batch update timestamp charset: ' UTF-. 8 ' // file encoding });
</ Script>
【3】. seajs.use
seajs.use is seajs inlet module. May also be directly written as: <Script the src = " Script / the src / sea.js " Data-main = " Init.js " > </ Script>
seajs.use ( " Init.js "), and Data-Mian = " Init.js difference" is that seajs.use can load multiple entry function, and do some operation callback
<Script type = " text / JavaScript " > // ------- seajs.use inlet module, or with data-main = ""; (The difference is that use can load multiple entry function, as well as do some callback operation) ----------------------- seajs.use ([ ' the init ' , ' jQuery ' ], function (I, $) { Alert ( " pro, all loads are done! " ); // ---------- init call interface in publicly ------------------------------- - i.alertFun (); // ---------- accustomed to the page <script> $ written on it ------------------- $ (function () { $ ( " #BtnCLick " ) .click (function () {Alert ( " jQuery is modular, and I'm not used to it! " );}) }) }); </script>
[4]. Do not think SeaJs really just something I say so, and I'm not very in-depth refinement speaking, took a few I think the most important, it is omitted ........... .
Step : [ combined] solve the problem of compression can be used ( spm , Grunt , Combo, spmx , or regressed Fis , etc.) solution, with the present example spm to do.
1. Download and install different system versions of Node
2. Download npm package management
3. download and install spm (using NPM the install spm -g ) mounted spm
[ Reminder: Before compression you should do ]
[1]. Ready to compress the file, and remember to put a man named " src " folder in the directory.
[2] Create a new package.json . Parameter configuration to compress the merged file
{ "family":"examples", "name":"script", "version":"1.0.0", "spm": { "alias":{ "jquery": "jquery" }, "output": ["init.js","test.js","jquery.js"] } }
[3]. Do ([1], [2]) steps, then execute the command spm build, it will generate a compressed file
Generate compressed files placed automatically create a named dist folder directory , each containing a group called xx.js and xx-debug.js file
As to why this generation, because Package.json configuration of [2] has been specified.
----------------------------------------------------------------------------------------------------------------------
The first step in solving the version number as shown in (to solve the version number in seajs.config inside) :
The second step of compression solutions Figure:
------------------------------------------------------------------------------------------------------------------------
Finally , to sum up, I there are several questions not solved:
[1]. The Data-Mian way to provide access to functions, I have not succeeded, do not know the version of the problem (the current version seajs v2.1.1)
[2]. Dependence merge files are not merged into a js file.
------------- If you have a small partner to solve the two questions above, please exhibitions --------------------- ------------------------------------------
Thank you very much @ yuanyiasd reply: [1] question has been answered (SeaJs removed out support for data-main / config's )
Address as follows: https://github.com/seajs/seajs/issues/734
Reproduced in: https: //www.cnblogs.com/Kummy/p/3363985.html