Sea.js 三分钟快读入门

最新推荐文章于 2023-03-02 14:50:56 发布

提莫拌一团蘑菇

最新推荐文章于 2023-03-02 14:50:56 发布

阅读量262

点赞数 2

分类专栏：技术博文文章标签：模块化前端 javascript js sea-js

本文链接：https://blog.csdn.net/dujing_15620553271/article/details/73468983

版权

技术博文专栏收录该内容

6 篇文章 0 订阅

订阅专栏

引言

这篇文章是写给前端刚刚入门的小猿们的，大神请绕路，嗷嗷~
因为公司的项目中一直在用Sea.js，从而接触到了前端模块化的一些东西。刚接触的时候，觉得“模块”很像是java当中“类”的概念；
我想很多刚入门的小猿们，和我刚入门时候的代码习惯是一致的，将自己的逻辑代码从上到下写在一个js文件中（ps:哈哈，中枪没:-）这样做的弊端呐，就是可维护性不高，当我们想要回过头来修改某个需求和逻辑的时候就会发现，几个月前自己明明思路清晰的逻辑，忘得差不多了，只能从头再读一遍自己的代码咯，浪费时间唉有木有~
Sea.js创始人玉伯给SeaJs的定义是：”它只解决了一个问题就是前端代码的模块化,一个模块就是一个文件”
通过Sea.js，我们可以将大量JavaScript代码封装成一个个小模块，然后就能实现模块的加载和依赖管理，让每一个模块的代码只解决唯一的某个问题。废话不多说，下面简单介绍一下SeaJs。

Sea.js的发展史

Sea的产生是由于CMD规范的出现，CMD又是由CommonJS的基础上发展而来，那咱们先简单说说CommonJS。大概 09 年 – 10 年期间，CommonJS 社区大牛云集。CommonJS 原来叫 ServerJS，推出 Modules/1.0 规范后，在Node.js 环境下取得了很不错的实践。09年下半年这帮牛逼爱折腾的大神们想把 ServerJS 的成功经验进一步推广到浏览器端，于是将社区改名叫 CommonJS，同时激烈争论 Modules 的下一版规范。分歧和冲突由此诞生，逐步形成了三大流派：Modules/1.x （完全基于1.0的功能，只是增加一个转换功能），Modules/Async ，Modules/2.0 。

Modules/1.x 流派：就是现在的 component 和es6 module。
Modules/Async 流派：就是现在的 AMD 规范及其实现RequireJS
Modules/2.0 流派：就是现在的 CMD规范和 seaJS

下载和安装

SeaJS项目目前托管在GitHub上，主页为 https://github.com/seajs/seajs/ 。
可以到其Git库的build目录下下载sea.js（已压缩）或sea-debug.js（未压缩）。

使用

给大家贴上我写的demo的代码链接：https://code.csdn.net/dujing_15620553271/aimeelia_seajs_demo/tree/master

demo 目录的结构

目录结构

index.html

- 这个主文件引入sea.js
- 引入index.js配置sea.js，启动脚本

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Sea.js三分钟入门</title>
</head>
<body>
<div id="test">你好，世界</div>

<!--在html中引入sea.js-->
<script src="js/sea.js" charset="utf-8"></script>

<!--Sea 配置文件+启动-->
<script src="js/index.js" charset="utf-8"></script>

</body>
</html>

index.js

index.js是一个主函数

- 第一个作用是使用seajs.config来配置sea的参数 - 加载单入口模块或者多入口模块，启动脚本

//1.配置(更多配置请参考下面的文档)

seajs.config({
    base: "http://localhost:63342/demo/js",//默认根目录(自己修改)
    alias: {//别名的配置（当模块标识很长时，可以使用 alias 来简化）
        "jquery": "sea_jquery_min.js"
    }, 
    paths: {// 路径配置
        'gallery': 'https://a.alipayobjects.com/gallery'
    },
    charset: 'utf-8'
});

//2.加载入口

//加载单个入口模块 
seajs.use('app', function(app) {
    app.main();
});

//加载多个入口模块
seajs.use(['app','show'], function(app,show) {
   app.main();
   show.show();
});

app.js

用define(function(require,export))的方法，来构建一个模块
exports作为模块对外的接口，调用init方法
require()这个方法可以将其他的模块引入到当前定义的模块中来

define(function (require, exports) {
    // 加载jquery模块
    var $ = require('jquery');

    // 这是个共有方法，用exports提供给别的模块使用
    var init = function () {
        _demo1();
    };

    // 这是个内部的私有方法，默认下划线开始命名
    var _demo1 = function () {
        $("#test").html("hello world");
    };

    exports.main = init;
});

show.js

用define(function(require,export))的方法，来构建一个show模块，方法同上

define(function(require, exports) {
    // 这是个内部的私有方法，默认下划线开始命名
    var _demo1 = function() {
        console.log("呵呵");
    };

    // 这是个共有方法，用exports提供给别的模块使用
    var init = function() {
        _demo1();
    };

    exports.show = init;
});

样式展示

初始样式
最终样式

结语

Sea的核心API并不是很多，也不需要你来死记硬背，那么理解他当中的设计模式就很重要啦~ 。即使你在工作中不会用到sea也没有关系，我们可以把他的思想应用到我们的代码中，将你写的函数模块化，每一个函数只执行单一的一个逻辑。看懂了这个demo，那么你已经了解了sea.js核心，怎么样sea的入门还是很简单的吧，下面有几篇好的文档，大家可以进行进一步的学习。

http://www.zhangxinxu.com/sp/seajs/docs/zh-cn/module-definition.html

http://www.tuicool.com/articles/FfEJv2u

http://cyj.me/why-seajs/zh/#intro
这里写图片描述