您的位置:首頁 > 設計資源 > 插件資源 > 內頁

Sea.js的運行原理及入門講解

核心提示: Sea js 追求簡單、自然的代碼書寫和組織方式,提供常用插件,非常有助于開發調試和性能優化,并具有豐富的可擴展接口。

Sea.js 是一款現代的用于Web開發的模塊加載工具,提供簡單、極致的模塊化體驗。Sea.js 由阿里、騰訊等公司共同維護。

為什么使用 Sea.js ?

Sea.js 追求簡單、自然的代碼書寫和組織方式,具有以下核心特性:

  • 簡單友好的模塊定義規范:Sea.js 遵循 CMD 規范,可以像 Node.js 一般書寫模塊代碼。
  • 自然直觀的代碼組織方式:依賴的自動加載、配置的簡潔清晰,可以讓我們更多地享受編碼的樂趣。

Sea.js 還提供常用插件,非常有助于開發調試和性能優化,并具有豐富的可擴展接口。

兼容性

Sea.js 具備完善的測試用例,兼容所有主流瀏覽器:

  • Chrome 3+ ?
  • Firefox 2+ ?
  • Safari 3.2+ ?
  • Opera 10+ ?
  • IE 5.5+ ?

Sea.js 可運行在 Mobile 端,包括 Hybrid 模式的 App 上。理論上,Sea.js 可以運行在任何瀏覽器引擎上。

使用 Sea.js 的產品

使用Sea.js的公司很廣泛:

騰訊朋友、騰訊微博、百姓網、支付寶、網易微博、有道云筆記、愛奇藝、阿里巴巴、一淘、淘寶、來往、麥包包、好知、clicki、雪球、 DNSPOD、PPTV,等等。

Sea.js 遵循 MIT 協議,無論個人還是公司,都可以免費自由使用。

5 分鐘上手 Sea.js

這是個小游戲,調皮的字母來自神秘的大海深處。當鼠標輕輕滑過時,字母會旋轉到正確位置。

下面花 5 分鐘時間,來看看這個小項目如何實現。

目錄結構

所有源碼都存放在 GitHub 上:seajs/examples,目錄結構為:

examples/
  |-- sea-modules      存放 seajs、jquery 等文件,這也是模塊的部署目錄
  |-- static           存放各個項目的 js、css 文件
  |     |-- hello
  |     |-- lucky
  |     `-- todo
  `-- app              存放 html 等文件
        |-- hello.html
        |-- lucky.html
        `-- todo.html

我們從 hello.html 入手,來瞧瞧使用 Sea.js 如何組織代碼。

在頁面中加載模塊

hello.html 頁尾,通過 script 引入 sea.js 后,有一段配置代碼:

javascript// seajs 的簡單配置
seajs.config({
  base: "../sea-modules/",
  alias: {
    "jquery": "jquery/jquery/1.10.1/jquery.js"
  }
})

// 加載入口模塊
seajs.use("../static/hello/src/main")

sea.js 在下載完成后,會自動加載入口模塊。頁面中的代碼就這么簡單。

模塊代碼

這個小游戲有兩個模塊 spinning.jsmain.js,遵循統一的寫法:

javascript// 所有模塊都通過 define 來定義
define(function(require, exports, module) {

  // 通過 require 引入依賴
  var $ = require('jquery');
  var Spinning = require('./spinning');

  // 通過 exports 對外提供接口
  exports.doSomething = ...

  // 或者通過 module.exports 提供整個接口
  module.exports = ...

});

上面就是 Sea.js 推薦的 CMD 模塊書寫格式。如果你有使用過 Node.js,一切都很自然。

構建部署

對于正式項目,在發布上線前,還需要對源碼進行壓縮、合并等操作。這可以通過 spm 或 Grunt 等工具來實現。簡明教程請參考:構建工具

結束語

怎么樣,Sea.js 入門真的只需 5 分鐘吧:)

使用 Sea.js,可以規范模塊的書寫格式、能自動處理模塊的依賴,還非常有助于代碼組織、開發調試和性能優化。Sea.js 期待能給你提供簡單、極致的模塊化開發體驗。我相信,你會愛上她的。

文檔

sea.js的文檔相當豐富。

Sea.js文檔:http://seajs.org/docs/

Sea.js下載:https://github.com/seajs/seajs

------------------------------------------------------------------------------------------------------------------------------

Sea.js采用了和Node相似的CMD規范,使用require、exports和module來組織模塊。但Sea.js比起Node的不同點在于,前者的運行環境是在瀏覽器中,這就導致A依賴的B模塊不能同步地讀取過來,所以Sea.js比起Node,除了運行之外,還提供了兩個額外的東西:

   a.模塊的管理

   b.模塊從服務端的同步

即Sea.js必須分為模塊加載期和執行期。加載期需要將執行期所有用到的模塊從服務端同步過來,在再執行期按照代碼的邏輯順序解析執行模塊。本身執行期與node的運行期沒什么區別。

Sea.js需要三個接口:define 用來wapper模塊,指明依賴,同步依賴;use 用來啟動加載期;require 實際上是加載期到執行期的橋梁。

模塊標識:模塊id的標準參考Module Identifiers,簡單說來就是作為一個模塊的唯一標識。

Factory:一個可以產生模塊的工廠。node中的工廠就是新的運行時,而在Sea.js中(Tea.js中也同樣),factory就是一個函數。這個函數接受三個參數。

依賴(Dependencies):依賴就是一個id的數組,即模塊所依賴模塊的標識

文章源自 設計聯盟 www.610640.tw 中國最具影響力的創意設計綜合網站

下載地址

*提示:下載碰到問題,或者下載地址失效,請在下方評論區留言,我們會及時更新。

編輯:Beach

資訊標簽: Sea Js 運行 原理 入門 講解
搜索推薦
設計聯盟官方微信
設計聯盟官方微信
微信公眾號:designlinks
掃一掃 訂閱最新資訊
回到頂部
排列三试机号的金马