Sea.js简单使用

最新推荐文章于 2024-05-02 23:47:59 发布

看主炮

最新推荐文章于 2024-05-02 23:47:59 发布

阅读量484

点赞数 1

分类专栏： js 文章标签： sea.js

本文链接：https://blog.csdn.net/duyuehan/article/details/51889402

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

什么是Sea.js？有什么作用？

Sea.js是一个小巧的模块加载器，它只解决一个问题：前端代码的模块化。通过Sea.js，可以将大量JavaScript代码封装成一个个小模块，然后轻松实现模块的加载和依赖管理。

在前端开发过程中，经常会出现一个单文件几千行甚至近万行的情况。这种大文件，对协作开发、后续维护、性能调优等都不利。Sea.js是帮助前端开发工程师将大文件拆分成小文件，能保持小颗粒度的模块化开发，同时不需要过多考虑依赖关系，让依赖管理轻松自如，让模块化开发变得更自然，就像浏览器原生提供的一样。

Sea.js的本质意义是通过模块化开发，来提高代码的可维护性。对工程师而言，是关注度分离，更将更多精力聚焦在代码本身的逻辑上。

Sea.js是采用延自CommonJS Modules/2.0规范的通用模块定义规范CMD。

在 Sea.js 中，所有 JavaScript 模块都遵循 CMD（Common Module Definition）模块定义规范。该规范明确了模块的基本书写格式和基本交互规则。

Sea.js兼容性：

Chrome 3+
Firefox 2+
Safari 3.2+
Opera 10+
IE 5.5+

Sea.js的基本使用：

1.下载Sea.js最新文件：官网http://seajs.org/docs/#downloads

2.引入文件：

<script src="/site/script/sea.js"></script>

3.模块的定义：

文件名为init.js

define(function(require,exports,module){
    //require 引入需要的模块如jquery或者自己之前定义过的模块等；
    //名称必须是require，可以理解为一个关键词一样，接收一个参数; 
    //var $ = require('./jquery');
 
	//以下为两种暴露接口方式
    //exports可以把方法或属性暴露给外部，引入该模块后就可以调用该方法或属性
    exports.name = 'hi';
    exports.hi = function(){
        alert('hello');
    }; 
    
   /* //module.exports提供了模块接口，
    module.exports = {
    		name: 'hi',
    		hi: function() { 
    			alert('hello');
    			}
    };*/
});

4.基础的配置：

seajs.config({
	// Sea.js 的基础路径（修改这个就不是路径就不是相对于seajs文件了）一般不配base路径，将sea.js放在合适路径往往更简单
	base: 'http://example.com/path/to/base/',
        //别名配置，配置后引入模块时可以通过别名进行引入
	alias: { 
          'jquery': 'jquery.js' ,
           'init':'init.js'
        },
        // 路径配置（用变量表示路径，解决路径层级过深的问题）
        paths: {
          'path': 'https://a.application.com/path'
        }
});

别名设置后再定义模块时引入相关模块：

define(function(require, exports, module) {
     //引用jQuery模块
     var $ = require('jquery');
     //引入init模块
     var init = require('init');
});

5.使用定义好的模块：

//加载模块 init，并在加载完成时，执行指定回调
seajs.use('init', function(main) {
  init.init();
});

//并发加载模块 1 和模块 2，并在都加载完成时，执行指定回调
seajs.use(['module1', 'module2'], function(module1,module2) {
	module1.init();
	module2.init();
});

6.简单示例文档结构：

具体代码：

main.css:

*{
    font-size: 18px;
    font-family: "Tahoma,Arial,Helvetica,sans-serif";
}
.main{
    width: 500px;
    height: 300px;
    margin: 50px auto;
}

init.js:

define(function(require,exports,module){
    var man = require('man');
    var css = require('../css/main.css');
 
    var $ = function(id){
        return document.getElementById(id);
    }
 
    exports.init = function(){
        var s1 = $('s1');
        var s2 = $('s2');
        var s3 = $('s3');
 
        var name = man.getName();
        var age = man.getAge();
        var msg = man.say();
 
        s1.innerHTML = name;
        s2.innerHTML = age;
        s3.innerHTML = msg;
    }
});

man.js:

define(function(require,exports,module){
    var msg = require('./msg');
 
    var _name = 'tom';
    var _age = '20';
 
    exports.myName = _name;
 
    exports.say = function(){
        return msg.getMsg();
    }
 
    exports.getName = function(){
        return _name;
    }
 
    exports.getAge = function(){
        return _age;
    }
});

msg.js:

define(function(require,exports,module){
    var _msg = 'not set msg!';
 
    exports.setMsg = function(msg){
        _msg = msg;
    }
 
    exports.getMsg =function(){
        return _msg;
    }
});

sea.config.js:

var version = '1.0';
seajs.config({
   
    	// Sea.js 的基础路径（修改这个就不是路径就不是相对于seajs文件了）一般不配base路径，将sea.js放在合适路径往往更简单  
        //base: 'http://example.com/path/to/base/',  
        //别名配置，配置后引入模块时可以通过别名进行引入  
        alias: {   
               'init':'init.js',
               'man':'man.js',
               'msg':'msg.js'
            },            
        charset: 'utf-8'    
});

sea.js:官方文件；

index.html:

<!doctype html>
<html>
<head>
<title>SeaJs Test</title>
<meta charset="UTF-8">
 
<script type="text/javascript" src="../js/sea.js"></script>
<script type="text/javascript" src="../js/sea.config.js"></script>
 
<script type="text/javascript">
    seajs.use('init',function(init){
        init.init();
    });
</script>
</head>
<body>
    <div class="main">
        <h1>信息</h1>
        <ul>
            <li id="s1"></li>
            <li id="s2"></li>
            <li id="s3"></li>
        </ul>
    </div>
</body>
</html>

以上便是Sea.js的简单使用，更多用法参见官方API 。

看主炮

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Sea.js简单使用

什么是Sea.js？有什么作用？Sea.js是一个小巧的模块加载器，它只解决一个问题：前端代码的模块化。通过Sea.js，可以将大量JavaScript代码封装成一个个小模块，然后轻松实现模块的加载和依赖管理。在前端开发过程中，经常会出现一个单文件几千行甚至近万行的情况。这种大文件，对协作开发、后续维护、性能调优等都不利。Sea.js是帮助前端开发工程师将大文件拆分成小文件，能保持
复制链接

扫一扫