Sea.js简单使用

什么是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 。

Sea.js简单使用相关推荐

sea.js简单配置
seajs.config({alias: {'jquery': 'jquery/jquery/1.10.1/jquery'},base: '/web/sea-modules/jquery/',path ...
模块化开发之sea.js实现原理总结
seajs官网说:seajs是一个模块加载器,所以学习它并不难. 在我的理解就是:本来我们是需要手动创建 script标签引入 js文件的,但用seajs后,它就自动帮我们完成这些工作. 这里只说实 ...
Sea.js 使用总结(1)
因工作原因开始学习使用 sea.js,以此进行记录 Sea.js 是一个适用于 web 浏览器端的模块加载器.在sea.js中,一切皆是模块在前端开发中,模块可以是js模块.css模块或者templ ...
sea.js引入css,5分钟上手Sea.js
基本应用导入Seajs库在页尾引入seajs: 然后在它下面写模块的配置和入口.// seajs 的简单配置 seajs.config({ base: "../sea-modules/& ...
Sea.js入门教程
下载与安装要在项目中使用SeaJS,你所有需要做的准备工作就是下载sea.js然后放到你项目的某个位置. SeaJS项目目前托管在GitHub上,主页为 https://github.com/sea ...
读玉伯之Sea.js、开源与前端之路
下面是CSDN访谈正文: CSDN:先介绍一下自己和目前的工作吧! 玉伯:我叫王保平,阿里花名玉伯.目前在支付宝前端技术部工作,从事前端基础类库.工具等产品的研发.喜欢编码.热爱思考,努力把每一天过得 ...
【开源专访】Sea.js创始人玉伯的前端开发之路
摘要:玉伯,淘宝前端类库 KISSY.前端模块化开发框架SeaJS.前端基础类库Arale的创始人.本期[开源专访]我们邀请玉伯来为我们分享一些关于前端框架.前端开发的那些事,以及前端大牛是如何炼成的 ...
Seajs是什么及sea.js 由来，特点以及优势
Seajs是什么及sea.js 由来,特点以及优势这篇文章主要介绍了Seajs的相关知识和和学习心得,适合刚接触SeaJS的同学,需要的朋友可以参考下,有更好的新手教程或文档,欢迎推荐.分享 1.S ...
Sea.Js的运行原理
Sea.Js的运行原理 1.CMD(Common Module Definition)规范 Sea.js采用了和Node相似的CMD规范,使用require.exports和module来组织模块.但 ...

Sea.js简单使用

Sea.js简单使用相关推荐

最新文章

热门文章