Home > Developer > Web Develop
Write in front
What is SEAJS?
One: Use
File directory:
Demo_1.html
<!DOCTYPE HTML><HTML><Head> <title></title> <Scriptsrc= "Seajs/sea.js"></Script> <Scriptsrc= "Seajs-config.js"></Script></Head><Body><Script> //seajs.use (['./model.js ', './model_2.js '])//no aliases usedSeajs.use (['m','m_2']) //using the base path notation</Script></Body></HTML>
* * Notes:
Seajs.use: Used to load one or more modules in a page.
Seajs-config.js file
// two kinds of writing, one is paths, one is base /* paths:{' baseUrl ': '. ' }, alias:{ ' m ': ' Baseurl/model.js ', ' m_2 ': ' Baseurl/model_2.js ' }*/ base:'./', alias:{ ' m ': ' Model.js ', ' m_2 ': ' Model_2.js ' }})* * Notes:
Base: Is the base path of Sea.js, which is the path of sea.js.
Paths: You can use paths to simplify writing when the directory is deep, or if you need to call the module across directories.
Such as:
seajs.config ({paths: {' Gallery ': ' Https://a.alipayobjects.com/gallery ', ' app ': ' Path/to/app ', ... }});//in the moduleDefinefunction(Require, exports, module) {varunderscore = require (' Gallery/underscore ')); //the Https://a.alipayobjects.com/gallery/underscore.js is loaded. varBiz = require (' app/biz '); //the Path/to/app/biz.js is loaded.});
The paths configuration can be used in conjunction with the alias configuration to make the module reference very convenient.
There is an error in the path problem in use.
Path problem:https://github.com/seajs/seajs/issues/258 Seajs has a relevant explanation.
Alias: Aliases configuration, representing files with variables, resolving path levels too deep and implementing path mappings
Model.js file:
Define (function() { alert ("AAA")})* * Notes:
Define: Used to define a module.
Model_2.js file:
Define (function() { alert ("BBB")})Results: The AAA and BBB were ejected according to the loading order of two files in Seajs.
Two: Use
Page:
<!DOCTYPE HTML><HTML><Head> <title></title> <Scriptsrc= "Seajs/sea.js"></Script> <Scriptsrc= "Seajs-config.js"></Script></Head><Body><Div></Div></Body><Script>Seajs.use (['jquery','M_3'],function($,m_3) {//this is callback . //$ corresponds to jquery, aliases used in callbacks
Calling interface variables
alert (m_3.msg);
})</Script></HTML>
Seajs-config.js file
seajs.config ({ /*paths:{ ' baseUrl ': '. ' }, alias:{ ' m ': ' baseurl/ Model.js ', ' m_2 ': ' Baseurl/model_2.js ' }*/ base:'./', alias: { ' jquery ': ' Jquery.js ', ' m ': ' Model.js ', ' m_2 ': ' Model_2.js ', ' m_3 ': ' Model_3.js ' }})Model_3.js file:
Define (function(require, exports, module) { var $=require (' jquery '); $ ("div"). Text (called jquery operation Dom in the module); Exports.msg= "External interface, variable a";})Results:
* * Notes:
Require: The interface used to get the specified module.
Exports: Used to provide an interface to the inside of a module.
Three: The use of jquery in Seajs
You need to use SEAJS to define the package as a module.
Define (function() { //jquery source code return $.noconflict ( );});IV: Sometimes, when we add a front-end frame, we need to introduce a CSS file.
Take Bootstrap as an example: two files, bootstrap.js and bootstrap.css files.
Bootstrap.js file to make a change can be.
Define (function(require, exports, module) { require (' bootstrap.css '); // })Use of Seajs
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
