腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

JavaScript 模塊化開發(fā)實例詳解【seajs、requirejs庫使用】

更新時間：2020年05月12日 11:59:17 作者：alogy

這篇文章主要介紹了JavaScript 模塊化開發(fā),結(jié)合實例形式詳細(xì)分析了基于seajs、requirejs庫的JavaScript模塊化使用相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了JavaScript 模塊化開發(fā)。分享給大家供大家參考，具體如下：

JS開發(fā)的問題

沖突
依賴
JS引入的文件,產(chǎn)生依賴.

使用命名空間解決：

命名空間的弊端
調(diào)用的時候名字比較長.
只能減低沖突，不能完全避免

SeaJs使用

引入sea.js的庫
如何變成模塊？ define
如何調(diào)用模塊？ exports 和 seajs.use
如何依賴模塊？ require

//html：
<script src="js/sea.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

//      console.log( seajs );

seajs.use('./js/main.js',function ( main ) {
  
  
  main.show();
  
});      
  
</script>

//main.js
define(function ( require,exports,module ) {
  
  var header = require('./header.js');
  
  function show () {
    
    alert(123);
    
  }
  
  
  exports.show = show;
  
});

seajs.use()

加載一個或多個模塊

// 加載一個模塊
seajs.use('./main.js');

// 加載一個模塊，在加載完成時，執(zhí)行回調(diào)
seajs.use('./main.js', function ( main ) {
 
});

// 加載多個模塊，在加載完成時，執(zhí)行回調(diào)
seajs.use(['./main.js', './b'], function(a, b) {
 a.doSomething();
 b.doSomething();
});

seajs.use 與 DOM ready 事件沒有任何關(guān)系。如果某些操作要確保在 DOM ready 后執(zhí)行，需要使用 jquery 等類庫來保證。

seajs.use(['jquery','./main'],function ( $,main ) {
  
  $(function () {

    main.init();

  })

});

use方法第一個參數(shù)一定要有，但是可以是null，也可以是一個變量

var app = ['app.js', 'header.css', 'header.js'];

seajs.use(app, function( app ) {
  //do something
});

seajs.use() 只用于加載啟動，不應(yīng)該出現(xiàn)在define的模塊代碼中，如果模塊代碼里需要加載其它模塊時，使用 require() ，需要加載異步其它異步模塊時，使用 require.async()

seajs.use 是模塊加載器必備的一個接口

define函數(shù)

當(dāng)傳遞一個參數(shù)時候，那么這個參數(shù)就是一個模塊，參數(shù)可以是任意類型
傳遞一個字符串，那么這個模塊就是一個字符串模塊
傳遞一個對象的時候，那么這個模塊就是一個對象模塊

傳遞一個函數(shù)（最常用的方式）
這函數(shù)自帶三個參數(shù)
Require：引用其他模塊的工廠方法
Exports：返回的接口對象
Module：模塊module屬性

當(dāng)傳遞過參數(shù)時（兩個，或者三個）
如果傳遞兩個參數(shù)的時候，第一個該模塊依賴的模塊數(shù)組集合，最后一個參數(shù)是function
如果傳遞三個參數(shù)的時候，第一個表示該模塊的名稱，第二個參數(shù)表示該模塊依賴的模塊集合，第三個

//第一個參數(shù)，當(dāng)前模塊的ID，也就是當(dāng)前模塊的地址
//第二個參數(shù)，以來模塊的地址的數(shù)組

define('./main.js',['./drag.js'],function( require,exports,moduels ){
  
  
});

三個參數(shù)解釋

require

require不能簡寫
require不能被重定義
不能賦值：var req = require
不能定義函數(shù)：function require
不能被子函數(shù)當(dāng)成參數(shù)
不能在子函數(shù)作用域內(nèi)重定義

// 錯誤 - 重命名 "require"！
var req = require, mod = req("./mod");

// 錯誤 - 重定義 "require"!
require = function() {};

// 錯誤 - 重定義 "require" 為函數(shù)參數(shù)！
function F(require) {}

// 錯誤 - 在內(nèi)嵌作用域內(nèi)重定義了 "require"！
function F() {
```
 var require = function() {};
```
}
require的參數(shù)只能是完整的字符串 require(‘a(chǎn)bc' + ‘bcd')是不允許的

exports

模塊的接口
第一種，直接對exports添加屬性，如exports.color = 'red'
第二種，通過module來定義，module.exports.color = 'red'
第三種，通過module來定義，module.exports = {color: 'orange'}
第四種，通過return來定義， return {color: 'green'}
在一個模塊中定義接口時候要用一種方式，不能混用
注意，不可以直接對exports賦值新對象

module

模塊的屬性
id：表示模塊的id
uri：表示該模塊文件對應(yīng)的url
exports：表示模塊返回的接口集合
dependencies：表示依賴模塊集合（數(shù)組表示形式）
deps：表示依賴模塊集合（對象表示形式）

CMD 模塊定義規(guī)范

一個模塊就是一個文件

define 是一個全局函數(shù)，用來定義模塊

define( facotry )

facotry可以是一個函數(shù)，也可以是一個對象或字符串

definde( { color: 'tan' } );

當(dāng)參數(shù)為函數(shù)時。默認(rèn)會有三個參數(shù) ：require，exports，module

definde( function ( require,exports,module ) {
  
} );

define ([id,deps],factory)

define 也可以接受兩個以上的參數(shù)，字符串id表示模塊標(biāo)識。deps是模塊依賴。

define('main',['mina.js'],function ( require,exports,module ) {
  //模塊代碼
});

id ,deps 參數(shù)省略，可以通過構(gòu)建工具自動生成。
id和 deps 參數(shù)，不屬于CMD規(guī)范。

require function

require 是一個方法，接受模塊標(biāo)識作為唯一參數(shù)，用來獲取其他模塊提供的接口。

deifne(function ( requrie,exports ) {
  
  //獲取模塊 main 的接口
  var main = require('./main');

  //調(diào)用 模塊 main 中的定義方法
  main.init();

});

require.async(id,[cb]);
模塊內(nèi)部異步加載模塊，并在加載完成后執(zhí)行指定的回調(diào)函數(shù)。

require.async('./a',function(){});
//加載多個異步模塊
require.async(['./a','./b'],function(){});

//異步加載 所需要的模塊
define(function ( require,expotrs,module ) {
  
  var loadSync = false;

  if ( loadSync ) {

    var skin = require.async('./skin');

  } else {

    var header = require.async('./header');

  }

});

exports

exports , 用來向外提供模塊接口

define(function ( require, exports,module ) {

 // 對外提供 foo 屬性
 exports.color = 'pink';

 // 對外提供 doSomething 方法
 exports.doSomething = function() {};

});

通過return 提供接口

define(function () {
  
  //通過 return 直接提供接口
  return {
    color: 'deeppink',
    sayName: function () {}
  }

});

CMD模塊中，經(jīng)常使用的API 有：define，require,require.async,exports,module.expotrs

seajs 配置

seajs.config()

alias

定義模塊別名
當(dāng)引用一些基礎(chǔ)庫的時候，涉及到基礎(chǔ)庫升級，在alias中定義這個模塊時，修改只需要修改這個別名配置。

seajs.config({
  alias: {
    jquery: 'lib/jquery.1.10.1'
  }
});

模塊中使用

require('jquery');

paths

定義模塊路徑
一些模塊創(chuàng)建目錄結(jié)構(gòu)很深的時候，可以將這個層級定義成一個簡寫的path，引用這個模塊的時候，直接通過 pathName+模塊名稱。

seajs.config({

paths: {
  hd: './modules/header'
}

});

模塊中使用

require('hd/header.js');

vars

在某些情況下，模塊路徑在運行時才能確定，可以使用 vars 變量來配置。

seajs.config({
  vars: {
    skin: 'header/skin'
  }
});

模塊中使用

require('{skin}/skin.js'); //需要使用 {} 來標(biāo)識

map

映射配置,匹配文件，做映射處理
開發(fā)完一些模塊時候，需要打包或壓縮處理，此時文件名可能會不同，可以通過map映射，來找到這個文件，修改成對應(yīng)的文件名

seajs.config({
  map: [
    ['main.js','main-min.js']
  ]
});

seajs.use(['main'],function ( main ) {
  // do ...
});

base

設(shè)置模塊的根目錄
有時候開發(fā)用seajs不一定在當(dāng)前頁面目錄下，此時想引用這個模塊比較麻煩，可以通過base來重定義該頁面模塊文件根目錄。

charset

設(shè)置模塊的編碼格式

seajs.config({
  charset: 'utf-8'
});

seajs.config({
 charset: function(url) {

  // xxx 目錄下的文件用 gbk 編碼加載
  if (url.indexOf('http://example.com/js/xxx') === 0) {
   return 'gbk';
  }

  // 其他文件用 utf-8 編碼
  return 'utf-8';

 }
});

常用的配置項： alias，paths，base

seajs插件

seajs-preload.js

seajs.config({
  //預(yù)加載jquery文件
  preload: ['jquery.js']
});

模塊中文件使用

definde(function ( require,exports,module ) {
  $(document).css('background','tan');
});

seajs-css.js

加載css文件

definde(function ( require,expotrs,module ) {
  require('../css/css.css');
});

requireJs

引入模塊文件時候，requirejs是根據(jù)引用了require文件的script標(biāo)簽中data-main屬性對應(yīng)的文件所在的目錄

define定義模塊

傳遞一個對象可以
傳遞一個函數(shù)(commonjs規(guī)范的實現(xiàn))
區(qū)別在于module

id表示模塊的id，id沒有后綴名(注意：seajs有后綴名)
沒有依賴的模塊集合
config配置屬性

模塊接口

在AMD規(guī)范定義的模塊中，沒有exports參數(shù)，只能通過return將接口暴露出來。

return 對象，這種方式可以將模塊內(nèi)部多個屬性多個方法暴露出來。
return 方法，這種方式將一個方法返回出來，引用這個模塊就是引用這個接口方法，在它父模塊(引用它的模塊中)可以直接調(diào)用該方法。是在自己模塊的作用域中。

requirejs配置

baseUrl

設(shè)置根目錄
用途：有時候啟動文件不在預(yù)期的位置，可以通過baseUrl來設(shè)置根目錄

require.config({
  baseUrl: 'lib'
});

paths

簡寫路徑

require.config({
  paths: {
    hd: 'module/header'
  }
});

map

當(dāng)存在多個頁面，可能每個頁面引用代碼庫不一樣，可以通過map進(jìn)行配置，對每個文件配置不同的代碼庫文件。

require.config({
  map: {
    //modules 模塊下的dom模塊引用的是lib/dom
    'modules': {
      'dom': 'lib/dom'
    },
    //modules-new 模塊下的dom模塊引用的是lib/dom.2.0
    'modules-new': {
      'dom': 'lib/dom.2.0'
    }
  }

});

使用css插件

requireJs 加載css 插件

//配置
require.config({
  map: {
    '*': {
      'css': 'lib/css'
    }
  }
});

//使用 

define(['css!css/index.css'],function () {
});

shim

表示配置模塊依賴關(guān)系
對于一些定義在全局作用域下的代碼庫，常常獲取不到這類庫的模塊，此時通過定義shim的莫開依賴關(guān)系，可以在模塊中獲取到這類代碼庫。

require.config({
  shim: {
    'lib/jquery': {
      //依賴的模塊集合
      deps: [],
      expotrs: '$'  
    }
  }
});

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript 模塊化開發(fā)實例詳解【seajs、requirejs庫使用】

目錄

JS開發(fā)的問題

SeaJs使用

seajs.use()

define函數(shù)

CMD 模塊定義規(guī)范

define( facotry )

define ([id,deps],factory)

require function

exports

seajs 配置

seajs.config()

alias

paths

vars

map

base

charset

seajs插件

seajs-preload.js

seajs-css.js

requireJs

define定義模塊

模塊接口

requirejs配置

baseUrl

paths

map

shim

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript 模塊化開發(fā)實例詳解【seajs、requirejs庫使用】

目錄

JS開發(fā)的問題

SeaJs使用

seajs.use()

define函數(shù)

CMD 模塊定義規(guī)范

define( facotry )

define ([id,deps],factory)

require function

exports

seajs 配置

seajs.config()

alias

paths

vars

map

base

charset

seajs插件

seajs-preload.js

seajs-css.js

requireJs

define定義模塊

模塊接口

requirejs配置

baseUrl

paths

map

shim

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

JavaScript 模塊化開發(fā)實例詳解【seajs、requirejs庫使用】