Seajs使用實例入門介紹

時間 2019-11-13

標籤 seajs 使用實例入門介紹简体版

原文原文鏈接

seajs是啥，能夠看看這篇前端模塊化（CommonJs,AMD和CMD）javascript

本文所用例子的代碼目錄結構：html

seajs example
    |--sea-module //存在依賴文件 |--jquery |--jqeury.js |--sea.js |--static //存放自定義模塊js |--main.js |--index.html //調用頁面

seajs頁面引入

下面開始，首先看下index：前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>seajs example</title> </head> <body> <h1 id="title">seajs demo</h1> <script src="sea-module/sea.js"></script> <script> seajs.use('./static/main.js'); </script> </body> </html>

首先引入sea.js文件，而後經過seajs.use加載main.js文件。咱們再來看看main.js:java

define(function(require,exports,module) { var title= document.getElementById('title'); title.innerHTML = "yes it works" })

define()用來定義模塊文件，具體參數等介紹能夠參考文章開頭介紹的文章。此處，頁面會輸出yes it works,是main.js修改了id爲title的標籤的文本內容，並無引用其餘模塊文件。jquery

模塊文件引入

咱們自定一個模塊changeText.js:面試

define(function (require, exports, module) { var textContent = 'yes it works'; exports.text = textContent; //or //module.exports = { //text: textContent //} })

changeText模塊輸出了一個text變量，而後咱們在main中引用它：typescript

define(function (require, exports, module) { var changeText = require('../static/changeText.js'); var title = document.getElementById('title'); title.innerHTML = changeText.text; })

咱們經過require將changText模塊的輸出對象賦值給changeText變量，而後將對象的text屬性賦值給節點的文本值,此時頁面輸出效果是同樣的。數組

別名設置

引入一個模塊要寫他的相對路徑，咱們能夠給它取個別名，在seajs.use()上面加入這一段代碼：less

<script> seajs.config({ alias:{ 'changeText':'../static/changeText.js' } }); seajs.use('./static/main.js'); </script>

經過config中alias給'../static/changeText.js'設置了別名changeText，如今main中引用changeText模塊就能夠直接寫成這樣了var changeText = require('changeText')。dom

模塊調用

下面試着引入一個模塊的方法，將changeText改成：

define(function (require, exports, module) { var init= function() { var textContent = [ 'yes it works', 'seajs demo', 'it is a lucky day', 'wish this help you', 'thank you for reading' ]; var index = Math.floor(Math.random()*textContent.length); return textContent[index]; } module.exports = { init:init } })

模塊中定義了一個init方法，它隨機返回數組中的一條。而後咱們將main修改下：

define(function (require, exports, module) { var changeText = require('changeText'); var title = document.getElementById('title'); title.innerHTML = changeText.init(); })

這時候咱們每次刷新頁面都會隨機出現一條文字。

第三方文件引用

下載一個jquery源文件，按以下修改：

define(function (require, exports, module) { jquery 源碼 })

使其模塊化，能被外部調用。

而後再設置別名：

seajs.config({ alias:{ 'changeText':'../static/changeText.js', 'jquery':'jquery/jquery', 'main':'./static/main.js' } }); seajs.use('./static/main.js');

在main中引入jquery，並使用：

define(function (require, exports, module) { var changeText = require('changeText'); var $ = require('jquery'); $('#title').text(changeText.init()); })

回調函數

seajs.use([module],callback),加載一個或多個模塊，並執行回調函數。咱們將main修改下：

define(function (require, exports, module) { var changeText = require('changeText'); var $ = require('jquery'); var showText = function () { $('#title').text(changeText.init()); } exports.showText = showText; })

而後增長回調函數：

seajs.use(['main','jquery'],function(main,$) { $('#title').after('<button id="show">showText</button>'); $('#show').on('click',function() { main.showText() }) });

上述代碼咱們加載了兩個模塊，並把它們輸出的對象傳參給main和$變量,經過點擊事件調用main中的showText方法，而showText方法調用了changeText中的init方法。

路徑問題

咱們先來搞清幾個問題：

./是表示當前目錄；../是上級目錄；
seajs.config 裏alias的別名設置只是給路徑取個別名，減小書寫；
seajs裏主要兩個用到路徑的地方：一個是seajs.use()；一個是require()。
base路徑是seajs文件所在目錄，本例子爲 （file:///Users/linyuhua/code/seajs/sea-module/）

先來說seajs.use()路徑

seajs.use()調用模塊文件的路徑默認是seajs文件的父文件夾目錄；以本例子來解釋：
首先來回看下咱們的目錄結構：

seajs example
|--seajs |--sea-module //存在依賴文件 |--jquery |--jqeury.js |--sea.js |--static //存放自定義模塊js |--main.js |--changeText.js |--index.html //調用頁面

調用main能夠經過如下路徑：

seajs.config({
     alias:{
         'changeText':'../static/changeText.js', 'jquery':'jquery/jquery', 'main':'./static/main.js' } }); seajs.use(['main','jquery'],function(main,$) { ... }) }); // ./表示當前路徑,seajs.use的默認路徑是seajs文件的父文件夾的目錄；即file:///Users/linyuhua/code/seajs/； // 所以，此時main的調用路徑爲file:///Users/linyuhua/code/seajs/static/main.js

在舉個例子來證實，此次咱們使用../來設置路徑：

seajs.config({
     alias:{ 'changeText':'../static/changeText.js', 'jquery':'jquery/jquery', 'main':'../seajs/static/main.js' } }); seajs.use(['main','jquery'],function(main,$) { ... }) }); // ../表示上級目錄，seajs.use()的目錄爲file:///Users/linyuhua/code/seajs/； // 他的上級目錄爲file:///Users/linyuhua/code/，所以此時main的別名設置爲../seajs/static/main.js; // 合併以後就是file:///Users/linyuhua/code/seajs/static/main.js

最後再來看看jquery的調用，直接以文件名開頭，在seajs中直接以文件名開頭的路徑是相對於base路徑，也就是說當把jquery別名設置爲'jquery':'jquery/jquery',時，他的調用路徑爲
base+‘jquery/jquery’（.js能夠省略）；即file:///Users/linyuhua/code/seajs/sea-module/+jquery/jquery;

require()調用路徑

下面咱們來看看require調用的路徑

首先是./和../
在define(function (){ }), 則是相對於當前的js文件所在目錄，還記得main中怎麼調用changeText.js和jquery的嗎：

//對照別名設置 seajs.config({ alias:{ 'changeText':'../static/changeText.js', 'jquery':'jquery/jquery', 'main':'../seajs/static/main.js' } }); define(function (require, exports, module) { var changeText = require('changeText'); var $ = require('jquery'); var showText = function () { $('#title').text(changeText.init()); } exports.showText = showText; })

因爲在define(function (){ }), 則是相對於當前的js文件所在目錄，因此../表示changeText.js的上級目錄即file:///Users/linyuhua/code/seajs，加上別名就是file:///Users/linyuhua/code/seajs/static/changText.js;

咱們也能夠直接require('./changeText.js')來調用，./表示當前目錄，而changeText.js與main.js在同一個目錄下;

若是路徑以文件名開頭則是相對base路徑，與前面seajs.use()同樣，jquery:jqeury/jquery就是相對base路徑調用的。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。