前台代码模块化 seajs

最新推荐文章于 2022-05-06 15:30:55 发布

iteye_4679

最新推荐文章于 2022-05-06 15:30:55 发布

阅读量138

点赞数

分类专栏： js 文章标签： js 前端模块化 seajs ViewUI

js 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用seajs进行模块化管理，解决前端代码复杂性增加的问题。通过实例演示如何定义模块、引入依赖以及在页面中调用，实现文件间依赖的清晰化，提高代码维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

随着程序的增加，前台代码变的越来越复杂，重复的js 模块会变多，文件间的依赖也会变复杂，会经常出现引用了一个文件就忘了它所依赖的文件是哪个。seajs 很好的解决了这个问题，它属于模块级管理，能搞让我们引用文件时减少文件间的依赖。

如果用过nodejs 的话，会发现seajs的用法和nodejs的模块语法相似，使用简单

1.下载seajs 文件，下载地址http://seajs.org/docs/#downloads

2.将文件放到工程文件里，并在页面上引用

<script type="text/javascript" src="/javascripts/libs/seajs/2.2.0/sea.js"></script>

3.定义自己的模块

创建文件a.js

define( 'myModule', function(require, exports, module ){
    module.exports ={
       init:function(){}
    };
})

4.页面调用

<script type="text/javascript">

    seajs.use('myMoudle', function(practiceStarter) {
        practiceStarter.init('first');
    });

</script>

这个就完成的了页面调用，但是这个只是单一的文件加载没有看到页面的模块化，seajs 最大的好处就是把文件间的依赖写在文件中，前台不需要关心

例如 a.js的运行需要b.js

b.js

define(function(require, exports, module ){
    var Other = function(){
    }
    module.exports = Other;
})

在a.js中引入b.js

define( 'myModule', function(require, exports, module ){
    module.exports ={
       init:function(){
          var Other = require('b_path')
       }
    };
})

如果页面上要引入多个模块可以

 <script type="text/javascript">

    seajs.use(["/javascripts/editor_layout.js", "/javascripts/paper_practice_starter.js"], function(editor_layout, practiceStarter) {
       
    });

</script>

也可以在页面上在seajs.use 前加入

seajs.config({
    base: '/'  //或者 . 
});

指定加载文件的其实位置，如果不设置，默认为当前页面的上级目录