sea.js的模块化开发起步

最新推荐文章于 2022-04-25 10:08:42 发布

原创最新推荐文章于 2022-04-25 10:08:42 发布 · 681 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#模块化 #sea.js

开发工具/技巧专栏收录该内容

26 篇文章

订阅专栏

本文介绍Sea.js模块化开发的基本概念与实践，通过一个简单的示例展示如何使用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 可以运行在任何浏览器引擎上。

参考文档：http://seajs.org/docs/

下面我用一个简单示例来开启sea.js的模块化开发之旅：

目录结构：

hello.html文档代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试sea.js的API</title>
    <style>
        #container{
            width:200px;
            height: 200px;
            margin: 0 auto;
            border: 1px solid #669991;
        }
        .init{
            background-color: #ff6600;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script src="../sea-modules/seajs/2.2.0/sea.js"></script>
<script>
    // seajs 的简单配置
    seajs.config({
        // Sea.js 的基础路径
        base:"../sea-modules/",
        // 设置别名，方便调用
        alias:{
            "jquery":"jquery/jquery/1.10.1/jquery.js"
        }
    });
    //for 开发阶段
    if(location.href.indexOf("?dev")>0){
        //加载一个main.js模块
        seajs.use("../static/hello/src/main");
    }
    //for上线阶段
    else{
        //加载一个main.js模块
        seajs.use("examples/hello/1.0.0/main");
    }
</script>
</body>
</html>

main.js的代码：

//定义一个模块
define(function(require){
    //获取start.js的接口
    var Start=require('./start');
    //生成Start的实例
    var s=new Start('#container');
    //调用Start的方法
    s.render();
});

start.js的代码：

define(function(require,exports,module){
    //获取jQuery的接口
    var $=require('jquery');

    //定义名为Start的构造函数对象
    function Start(container){
        this.container=$(container);
    }
    //对外提供接口
    module.exports=Start;
    //定义Start对象的原型方法
    Start.prototype.render=function(){
        this._init();
        this.container.css('border','5px solid #f00');
    };
    Start.prototype._init=function(){
        this.container.addClass('init');
        return this;
    }
});

示例效果如下：