简单的使用Seajs
?
什么是Seajs
兼容性
- Chrome 3+
- Firefox 2+
- Safari 3.2+
- Opera 10+
- IE 5.5+
基本應(yīng)用
導(dǎo)入Seajs庫(kù)
<script src="/site/script/sea.js"></script>
然后在它下面寫模塊的配置和入口。
// seajs 的簡(jiǎn)單配置 seajs.config({base: "../sea-modules/", alias: { "jquery": "jquery/jquery/1.10.1/jquery.js" } }); // 加載入口模塊 seajs.use("../static/hello/src/main");配置和入口
這里解釋下配置和入口的意思。
配置
通常在配置上修改seajs的路徑和別名。
?
seajs的?路徑是相對(duì)于前面引入的seajs文件的?。假如是這樣的目錄結(jié)構(gòu)：
examples/|-- index.html|`--about| |-- news.html|`-- script|-- seajs.js |-- jquery.js `-- main.js?
我們平時(shí)如果我們?cè)趇ndex.html上引用main.js路徑應(yīng)該是這樣寫的?script/main.js?，從news.html引用main.js就要這樣寫，?../script/main.js?。
而在seajs是相對(duì)于seajs文件的，一律直接使用?main.js?就OK了，是不是很方便呢？
既然這么方便那在什么情況需要配置呢？一般情況是用不到的。但是假如你的路徑特別深 或者要做路徑映射的時(shí)候它的作用就來了。下面介紹下常用的幾個(gè)配置。
seajs.config({// Sea.js 的基礎(chǔ)路徑（修改這個(gè)就不是路徑就不是相對(duì)于seajs文件了）base: 'http://example.com/path/to/base/', // 別名配置（用變量表示文件，解決路徑層級(jí)過深和實(shí)現(xiàn)路徑映射） alias: { 'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe', 'json': 'gallery/json/1.0.2/json', 'jquery': 'jquery/jquery/1.10.1/jquery' }, // 路徑配置（用變量表示路徑，解決路徑層級(jí)過深的問題） paths: { 'gallery': 'https://a.alipayobjects.com/gallery' } });查看更多
入口
入口即加載，需要加載什么文件（模塊加載器）就在這里引入。?sea.js 在下載完成后，會(huì)自動(dòng)加載入口模塊。
seajs.use("abc/main"); //導(dǎo)入seajs.js同級(jí)的abc文件夾下的main.js模塊的（后綴名可略去不寫）seajs.use()還有另外一種用法。
有時(shí)候我們寫一個(gè)簡(jiǎn)單的單頁并不想為它單獨(dú)寫一個(gè)js文件，選擇在直接把js代碼寫在頁面上，seajs通過?seajs.use()?實(shí)現(xiàn)了這個(gè)。?接收兩個(gè)參數(shù)第一個(gè)是文件依賴(單個(gè)用字符串?dāng)?shù)組都可以，多個(gè)需用數(shù)組表示)，第二個(gè)是回調(diào)函數(shù)。
加載單個(gè)依賴
//加載模塊 main，并在加載完成時(shí)，執(zhí)行指定回調(diào) seajs.use('./main', function(main) { main.init(); });加載多個(gè)依賴
//并發(fā)加載模塊 a 和模塊 b，并在都加載完成時(shí)，執(zhí)行指定回調(diào) seajs.use(['./a', './b'], function(a, b) { a.init(); b.init(); });?
這里回掉函數(shù)中的a和b參數(shù)是與前面的模塊暴露出來的接口一一對(duì)應(yīng)的。有時(shí)候也許只需要使用b的接口，但是也要把a(bǔ)參數(shù)寫上。什么是暴露接口下面會(huì)解釋。
模塊開發(fā)
這里才是重點(diǎn)，其實(shí)也很簡(jiǎn)單就是一個(gè)書寫規(guī)范（CMD）而已。
// 所有模塊都通過 define 來定義 define(function(require, exports, module) { // 通過 require 引入依賴 var $ = require('jquery'); var Spinning = require('./spinning'); // 通過 exports 對(duì)外提供接口 exports.doSomething = ... // 或者通過 module.exports 提供整個(gè)接口 module.exports = ... });?
模塊是通過define()方法包裝的，然后內(nèi)部痛過require()方法引入需要的依賴文件(模塊)。（也可以引入.css文件哦~）
模塊最好是面向?qū)ο箝_發(fā)的，這樣最后可以方便的通過?exports.doSomething?或?module.exports?把模塊的接口給暴露出來。如果你是寫的是jq插件的話就不需要這個(gè)功能了，因?yàn)槟愕慕涌谑菍懺趈query的對(duì)象里的。如果你不需要提供接口的話也可以不使用這兩個(gè)屬性哦！
?
事實(shí)上define方法還有另外幾個(gè)參數(shù)，一般情況我們用不到。具體看?官方API?。
小結(jié)
其實(shí)Seajs的基本使用就這么簡(jiǎn)單，日常使用足夠了，之前看官網(wǎng)的?5分鐘教程?楞是沒看懂，后來想想真的是5分鐘學(xué)會(huì)啊,悟性太低- -||
注意事項(xiàng)
---恢復(fù)內(nèi)容結(jié)束---
我們希望一個(gè)頁面按需引入，這個(gè)頁面需要什么功能就引入什么功能。現(xiàn)在主流的工具有兩種，amd規(guī)范的RequireJS、cmd規(guī)范的Seajs。
什么是Seajs
兼容性
- Chrome 3+
- Firefox 2+
- Safari 3.2+
- Opera 10+
- IE 5.5+
基本應(yīng)用
導(dǎo)入Seajs庫(kù)
<script src="/site/script/sea.js"></script>
然后在它下面寫模塊的配置和入口。
// seajs 的簡(jiǎn)單配置 seajs.config({base: "../sea-modules/", alias: { "jquery": "jquery/jquery/1.10.1/jquery.js" } }); // 加載入口模塊 seajs.use("../static/hello/src/main");配置和入口
這里解釋下配置和入口的意思。
配置
通常在配置上修改seajs的路徑和別名。
?
seajs的?路徑是相對(duì)于前面引入的seajs文件的?。假如是這樣的目錄結(jié)構(gòu)：
examples/|-- index.html|`--about| |-- news.html|`-- script|-- seajs.js |-- jquery.js `-- main.js?
我們平時(shí)如果我們?cè)趇ndex.html上引用main.js路徑應(yīng)該是這樣寫的?script/main.js?，從news.html引用main.js就要這樣寫，?../script/main.js?。
而在seajs是相對(duì)于seajs文件的，一律直接使用?main.js?就OK了，是不是很方便呢？
既然這么方便那在什么情況需要配置呢？一般情況是用不到的。但是假如你的路徑特別深 或者要做路徑映射的時(shí)候它的作用就來了。下面介紹下常用的幾個(gè)配置。
seajs.config({// Sea.js 的基礎(chǔ)路徑（修改這個(gè)就不是路徑就不是相對(duì)于seajs文件了）base: 'http://example.com/path/to/base/', // 別名配置（用變量表示文件，解決路徑層級(jí)過深和實(shí)現(xiàn)路徑映射） alias: { 'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe', 'json': 'gallery/json/1.0.2/json', 'jquery': 'jquery/jquery/1.10.1/jquery' }, // 路徑配置（用變量表示路徑，解決路徑層級(jí)過深的問題） paths: { 'gallery': 'https://a.alipayobjects.com/gallery' } });查看更多
入口
入口即加載，需要加載什么文件（模塊加載器）就在這里引入。?sea.js 在下載完成后，會(huì)自動(dòng)加載入口模塊。
seajs.use("abc/main"); //導(dǎo)入seajs.js同級(jí)的abc文件夾下的main.js模塊的（后綴名可略去不寫）seajs.use()還有另外一種用法。
有時(shí)候我們寫一個(gè)簡(jiǎn)單的單頁并不想為它單獨(dú)寫一個(gè)js文件，選擇在直接把js代碼寫在頁面上，seajs通過?seajs.use()?實(shí)現(xiàn)了這個(gè)。?接收兩個(gè)參數(shù)第一個(gè)是文件依賴(單個(gè)用字符串?dāng)?shù)組都可以，多個(gè)需用數(shù)組表示)，第二個(gè)是回調(diào)函數(shù)。
加載單個(gè)依賴
//加載模塊 main，并在加載完成時(shí)，執(zhí)行指定回調(diào) seajs.use('./main', function(main) { main.init(); });加載多個(gè)依賴
//并發(fā)加載模塊 a 和模塊 b，并在都加載完成時(shí)，執(zhí)行指定回調(diào) seajs.use(['./a', './b'], function(a, b) { a.init(); b.init(); });?
這里回掉函數(shù)中的a和b參數(shù)是與前面的模塊暴露出來的接口一一對(duì)應(yīng)的。有時(shí)候也許只需要使用b的接口，但是也要把a(bǔ)參數(shù)寫上。什么是暴露接口下面會(huì)解釋。
模塊開發(fā)
這里才是重點(diǎn)，其實(shí)也很簡(jiǎn)單就是一個(gè)書寫規(guī)范（CMD）而已。
// 所有模塊都通過 define 來定義 define(function(require, exports, module) { // 通過 require 引入依賴 var $ = require('jquery'); var Spinning = require('./spinning'); // 通過 exports 對(duì)外提供接口 exports.doSomething = ... // 或者通過 module.exports 提供整個(gè)接口 module.exports = ... });?
模塊是通過define()方法包裝的，然后內(nèi)部痛過require()方法引入需要的依賴文件(模塊)。（也可以引入.css文件哦~）
模塊最好是面向?qū)ο箝_發(fā)的，這樣最后可以方便的通過?exports.doSomething?或?module.exports?把模塊的接口給暴露出來。如果你是寫的是jq插件的話就不需要這個(gè)功能了，因?yàn)槟愕慕涌谑菍懺趈query的對(duì)象里的。如果你不需要提供接口的話也可以不使用這兩個(gè)屬性哦！
?
事實(shí)上define方法還有另外幾個(gè)參數(shù)，一般情況我們用不到。具體看?官方API?。
小結(jié)
其實(shí)Seajs的基本使用就這么簡(jiǎn)單，日常使用足夠了，之前看官網(wǎng)的?5分鐘教程?楞是沒看懂，后來想想真的是5分鐘學(xué)會(huì)啊,悟性太低- -||
注意事項(xiàng)
轉(zhuǎn)載于:https://www.cnblogs.com/pms01/p/7041606.html
總結(jié)
以上是生活随笔為你收集整理的简单的使用Seajs的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MyBaties异常之 ORA-0091
- 下一篇： Lumen中启用session