萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> SeaJS入門教程系列之SeaJS介紹(一)

SeaJS入門教程系列之SeaJS介紹(一)

 這篇文章主要介紹了SeaJS入門教程,講述了SeaJS的由來,JavaScript傳統開發模式和模塊化開發的對比,需要的朋友可以參考下

前言 SeaJS是一個遵循CommonJS規范的JavaScript模塊加載框架,可以實現JavaScript的模塊化開發及加載機制。與jQuery等JavaScript框架不同,SeaJS不會擴展封裝語言特性,而只是實現JavaScript的模塊化及按模塊加載。SeaJS的主要目的是令JavaScript開發模塊化並可以輕松愉悅進行加載,將前端工程師從繁重的JavaScript文件及對象依賴處理中解放出來,可以專注於代碼本身的邏輯。SeaJS可以與jQuery這類框架完美集成。使用SeaJS可以提高JavaScript代碼的可讀性和清晰度,解決目前JavaScript編程中普遍存在的依賴關系混亂和代碼糾纏等問題,方便代碼的編寫和維護。 SeaJS的作者是淘寶前端工程師玉伯。 SeaJS本身遵循KISS(Keep It Simple, Stupid)理念進行開發,其本身僅有個位數的API,因此學習起來毫無壓力。在學習SeaJS的過程中,處處能感受到KISS原則的精髓——僅做一件事,做好一件事。 本文首先通過一個例子直觀對比傳統JavaScript編程和使用SeaJS的模塊化JavaScript編程,然後詳細討論SeaJS的使用方法,最後給出一些與SeaJS相關的資料。   傳統模式 vs SeaJS模塊化 假設我們現在正在開發一個Web應用TinyApp,我們決定在TinyApp中使用jQuery框架。TinyApp的首頁會用到module1.js,module1.js依賴module2.js和module3.js,同時module3.js依賴module4.js。 傳統開發 使用傳統的開發方法,各個js文件代碼如下: 代碼如下://module1.js var module1 = {     run: function() {         return $.merge(['module1'], $.merge(module2.run(), module3.run()));     } }   //module2.js var module2 = {     run: function() {         return ['module2'];     } }   //module3.js var module3 = {     run: function() {         return $.merge(['module3'], module4.run());     } }   //module4.js var module4 = {     run: function() {         return ['module4'];     } } 此時index.html需要引用module1.js及其所有下層依賴(注意順序): 代碼如下:<!DOCTYPE HTML> <html lang="zh-CN"> <head>     <meta charset="UTF-8">     <title>TinyApp</title>     <script src="./jquery-min.js"></script>     <script src="./module4.js"></script>     <script src="./module2.js"></script>     <script src="./module3.js"></script>     <script src="./module1.js"></script> </head> <body>     <p class="content"></p>     <script>         $('.content').html(module1.run());     </script> </body> </html> 隨著項目的進行,js文件會越來越多,依賴關系也會越來越復雜,使得js代碼和html裡的script列表往往變得難以維護。 SeaJS模塊化開發 下面看看如何使用SeaJS實現相同的功能。 首先是index.html:  代碼如下:<!DOCTYPE HTML> <html lang="zh-CN"> <head>     <meta charset="UTF-8">     <title>TinyApp</title> </head> <body>     <p class="content"></p>     <script src="./sea.js"></script>     <script>         seajs.use('./init', function(init) {             init.initPage();         });     </script> </body> </html> 可以看到html頁面不再需要引入所有依賴的js文件,而只是引入一個sea.js,sea.js會處理所有依賴,加載相應的js文件,加載策略可以選擇在渲染頁面時一次性加載所有js文件,也可以按需加載(用到時才加載響應js),具體加載策略使用方法下文討論。 index.html加載了init模塊,並使用此模塊的initPage方法初始化頁面數據,這裡先不討論代碼細節。 下面看一下模塊化後JavaScript的寫法:  代碼如下://jquery.js define(function(require, exports, module) = {       //原jquery.js代碼...       module.exports = $.noConflict(true); });   //init.js define(function(require, exports, module) = {     var $ = require('jquery');     var m1 = require('module1');       exports.initPage = function() {         $('.content').html(m1.run());         } });   //module1.js define(function(require, exports, module) = {     var $ = require('jquery');     var m2 = require('module2');     var m3 = require('module3');       exports.run = function() {         return $.merge(['module1'], $.merge(m2.run(), m3.run()));         } });   //module2.js define(function(require, exports, module) = {     exports.run = function() {         return ['module2'];     } });   //module3.js define(function(require, exports, module) = {     var $ = require('jquery');     var m4 = require('module4');       exports.run = function() {         return $.merge(['module3'], m4.run());         } });   //module4.js define(function(require, exports, module) = {     exports.run = function() {         return ['module4'];     } }); 乍看之下代碼似乎變多變復雜了,這是因為這個例子太簡單,如果是大型項目,SeaJS代碼的優勢就會顯現出來。不過從這裡我們還是能窺探到一些SeaJS的特性: 一是html頁面不用再維護冗長的script標簽列表,只要引入一個sea.js即可。 二是js代碼以模塊進行組織,各個模塊通過require引入自己依賴的模塊,代碼清晰明了。 通過這個例子朋友們應該對SeaJS有了一個直觀的印象,下面本文具體討論SeaJS的使用。  
copyright © 萬盛學電腦網 all rights reserved