JavaScript 之 SeaJS 学习

最新推荐文章于 2024-09-14 18:52:56 发布

mingdry0304

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量335

点赞数

分类专栏： javascript 文章标签： javascript SeaJS

本文链接：https://blog.csdn.net/mingdry0304/article/details/47313047

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

好的，马上就要开始一个新的项目，在熟悉架构的过程中，在新的架构中，引用了一个比较有意思的 JS 框架吧，就是 SeaJS

具体是个什么东西，我也不是很清楚，反正看上去与我之前所写的js部分，写法不一样，询问老大后的结果是，这算是个比较好的东西，就这样，我去找度娘去问了一下，有重大发现：

一、介绍 SeaJS

SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制。SeaJS不会扩展封装语言特性，而只是实现JavaScript的模块化及按模块加载。SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载，将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来，可以专注于代码本身的逻辑。解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题，方便代码的编写和维护。

seaJS也是一种工具，是一种开发状态，是javascript的前进的可能方向。

seaJS的官网：http://seajs.org

二、SeaJS的目录结构

SeaJS的目录结构如下所示：

examples/
  |-- sea-modules      存放 seajs、jquery 等文件，这也是模块的部署目录
  |-- static           存放各个项目的 js、css 文件
  |     |-- hello
  |     |-- lucky
  |     `-- todo
  `-- app              存放 html 等文件
        |-- hello.html
        |-- lucky.html
        `-- todo.html

我们从 Hello.html 入手，来瞧瞧使用 Sea.js 如何组织代码。

<script src="lib/back/sea.js"></script>
<script>
       // seajs 的简单配置
       seajs.config({
              base: "../sea-modules/",
              alias: {
                      "jquery": "jquery/jquery/1.10.1/jquery.js"
               }
        })

        // 加载入口模块
        seajs.use("../static/hello/src/main");
</script>

模块的入口：

seajs.use("../static/hello/src/main", function(s){

s.show();

})

使用js文件夹下面的second.js启动项，启动完毕执行该模块下的show方法。这里的目录必须是相对运行文件为准的路径

模块遵循统一的写法：

// 所有模块都通过 define 来定义
define(function(require, exports, module) {
       // 通过 require 引入依赖
       var $ = require('jquery');
       var Spinning = require('./spinning');

       // 通过 exports 对外提供接口
       exports.doSomething = ...

       // 或者通过 module.exports 提供整个接口
       module.exports = ...
       <span class="pln">exports</span><span class="pun">.</span><span class="pln">show</span><span class="pun">=</span><span class="kwd">function</span>()<span class="pln">{</span><span class="pun"></span><span class="pln">
            $</span><span class="pun">(</span><span class="pln">document</span><span class="pun">.</span><span class="pln">body</span><span class="pun">).</span><span class="pln">append</span><span class="pun">(</span><span class="str">'<div>seaJS的second模块被正常加载。</div>'</span><span class="pun">);
       </span><span class="pln"></span><span class="pun">}</span><span class="pun"></span>
});

这是一个模块的书写方法，全局函数define，参数是一个function，其中的function有3个参数，参数名分别为require、exports、module。

注意：三个参数名不能修改，也不能被重新定义。否则的话会影响错误加载的。