SeaJS入门教程系列之SeaJS介绍（一）

来源：互联网发布：淘宝店铺红包怎么使用编辑：程序博客网时间：2024/06/05 02:24
<span style="font-size:14px;">   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.jsvar module1 = {    run: function() {        return $.merge(['module1'], $.merge(module2.run(), module3.run()));    }}//module2.jsvar module2 = {    run: function() {        return ['module2'];    }}//module3.jsvar module3 = {    run: function() {        return $.merge(['module3'], module4.run());    }}//module4.jsvar 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.jsdefine(function(require, exports, module) = {    //原jquery.js代码...    module.exports = $.noConflict(true);});//init.jsdefine(function(require, exports, module) = {    var $ = require('jquery');    var m1 = require('module1');    exports.initPage = function() {        $('.content').html(m1.run());       }});//module1.jsdefine(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.jsdefine(function(require, exports, module) = {    exports.run = function() {        return ['module2'];    }});//module3.jsdefine(function(require, exports, module) = {    var $ = require('jquery');    var m4 = require('module4');    exports.run = function() {        return $.merge(['module3'], m4.run());       }});//module4.jsdefine(function(require, exports, module) = {    exports.run = function() {        return ['module4'];    }});    乍看之下代码似乎变多变复杂了，这是因为这个例子太简单，如果是大型项目，SeaJS代码的优势就会显现出来。不过从这里我们还是能窥探到一些SeaJS的特性：一是html页面不用再维护冗长的script标签列表，只要引入一个sea.js即可。二是js代码以模块进行组织，各个模块通过require引入自己依赖的模块，代码清晰明了。通过这个例子朋友们应该对SeaJS有了一个直观的印象，下面本文具体讨论SeaJS的使用。</span>
0 0