Home > Developer > Web Develop
Understand the back-end language of children's shoes must have heard the concept of modular development, such as Java, Python and other back-end languages have their own modular features, but compared to the back-end language, JavaScript has not yet implemented a modular function, although later versions may introduce the concept of modular development, But at this stage we can do it through third-party controls.
Today I would like to introduce you to help us achieve the front-end modular tool--SEAJS. If the seajs already have practical experience with the small partners can directly ignore this article.
If you have a small partner to understand Requirejs, then learning Seajs will be quite easy, because Requirejs is also one of the front-end modular building tools, the main difference is that Requirejs is based on AMD specifications, and Seajs is based on the CMD specification.
As for what is AMD and CMD, do not do a detailed introduction here, want to know the children's shoes can see Seajs author Yuber answer: http://www.zhihu.com/question/20351507/answer/14859415
Well, let's cut to the chase, first introduce the next Seajs download and configuration.
I. Download and configuration of Seajs
Download: http://seajs.org/docs/#downloads (currently the latest version is 3.0.0, also available with SMP download)
Configuration: (1) Move the downloaded sea.js file to your website directory (Sea.js is located in Sea-modules\seajs\seajs);
My Site Directory is as follows:
(2) load in demo.html under Templates, as shown below:
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "Utf-8">5 <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge,chrome=1">6 <title>Examples</title>7 <Linkhref=""rel= "stylesheet">8 </Head>9 <Body>Ten <Pclass= "text">111</P> One <Scripttype= "Text/javascript"src=".. /static/seajs_module/jquery/2.1.4/jquery-2.1.4.min.js "></Script> A <Scripttype= "Text/javascript"src=".. /static/seajs_module/seajs/2.2.0/sea.js "></Script> - <Script> - Seajs.config ({ the Base:".. /static/seajs_module"//Benchmark file directory - }); - Seajs.use (".. /static/app/src/demo.js")</Script> //ingress module - </Body> + </HTML>
Configuration includes: Loading the sea.js file, seajs.config configuration and using the Ingress module three pieces, here I do not do a detailed introduction, the official documentation is very detailed http://seajs.org/docs/#quick-start
The following are the main configuration items of Seajs.config:
1 Seajs.config ({2 //alias Configuration alias: {3' jquery ': '/static/lib/jquery/2.1.4/jquery ',4 },5 map: [6[ /^(.*\. (?: CSS|JS|TPL)) (. *) $/i, ' $ $? ' +Seajstimestamp]7 ],8 9 //path configuration paths: {Ten' Lib ': '/static/lib ', One' Util ': '/static/component/base/util ' A }, - - //variable Configuration//vars: {//' locale ': ' ZH-CN '//},//mapping configuration//map: [//[' http://example.com/js/app/', ' Http://localhost/js/app /']//],//pre-add- ONS thePreload: [' jquery ', ' seajs-text ', ' common '], - //preload: [' jquery ', ' seajs-text ', ' Seajs-combo '],//debug mode -Debugtrue, - + //sea.js Base Path//base: ' http://example.com/path/to/base/',//File encoding -CharSet: ' Utf-8 ' +});
Second, the preparation of SEAJS module
Seajs follows the rules of a file, which is a module, where dependencies can exist between modules and modules.
The modules are written in the following ways:
Demo.js file
1 define (function(require, exports, module) { 2 var// Introduce the required module (ie the corresponding JS file )3 // Your code 4 $ (". Text"). CSS ("Color", "red"); 5 // call a method in until 6 });The code above shows that the code in Demo.js depends on the code in Until.js
Untils.js file
1 define (function(require, exports, module) {2 exports.rule=function () {3 console.log (' 111 '); 4 }5 });The rule method is exposed to the global through exports in Untils.js.
So we realized the JS module and the module between the writing and function implementation, the effect is as follows:
Although we have not introduced untils.js in the page, but through the dependencies between the modules, SEAJS will automatically help us to load, and demo.js is loaded as an ingress module.
It is important to note that if the jquery module is introduced in Demo.js in the Require way, it will be reported uncaught TypeError: The error of a function with a not a. The reason for this is that jquery is a non-CMD standard, and the following solutions can be used if necessary:
(1) Introduce jquery files directly to the page, just as in the demo.html above this article
(2) Delete the corresponding code in jquery, 2.14 version of the bottom of the source of the deletion of the && DEFINE.AMD can (pro-test feasible).
(3) Official solution please view https://github.com/seajs/seajs/issues/286
In short, this is also the use of seajs more deep pits.
Third, using the SPM compression merge module
Just shown above the module loading example, we can see the browser run time automatically will be loaded into our module, then if we build a slightly complex function, we use the module will be more and more, if this suddenly loaded a lot of JS file is obviously very affect performance, then how to solve it, The SEAJS Package management tool SPM is needed here.
Kids with NPM must know that it's a node. js package Management tool, where we need to download node and NPM to install SPM.
As for how to download and install node. js do not introduce, you can access https://nodejs.org/en/to download.
After the download installation is complete, open the command line (CMD) and enter NPM install-g SPM to start downloading the SPM
Wait a while after the download is complete we can use the SPM command.
Enter the JS directory where we want to compress the merged items, and enter the SPM build Demo.js--combine to compress our demo module files:
Successful compression will create a new dist folder in the Demo.js directory to hold the compressed JS file.
Then we'll open the Web page and look at the loaded file and we'll see that the demo.js is loaded:
OK, finished, our front-end Modular road is a step forward, as for the detailed SPM command please see Http://spmjs.io/documentation/develop-a-package#build
The follow-up will also introduce the front-end automation development, although none of the new things, but the process of their own exploration is the most important, it is worth sharing records.
Welcome to watch, share, and comment.
Original articles, reproduced please note from a radish a pit-blog Park [Http://www.cnblogs.com/luozhihao]
This address: http://www.cnblogs.com/luozhihao/p/4818782.html
The seajs of front-end modularization development
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
