seajs的作者是玉伯,具体好处优点等详见官方网址

介绍

1 模块定义define

define(function(require,exports,module){
//require 引入需要的模块如jquery等
//var $ = require('./jquery'); //exports可以把方法或属性暴露给外部
exports.name = 'hi'; exports.hi = function(){
alert('hello');
} //module提供了模块信息
});

  

2 使用定义好的模块seajs.use

<!doctype html>
<html>
<head>
<title>SeaJs Test</title>
<meta charset="UTF-8"> <script type="text/javascript" src="seajs/sea.js"></script> <script type="text/javascript">
//第一个参数是模块标识,即要使用模块的路径,这里是t1.js
//第二个参数是一个回调函数
seajs.use('./js/t1',function(t){
t.hi();
});
</script>
</head>
<body> </body>
</html>

3 加载依赖项require

//名称必须是require,可以理解为一个关键词一样,接收一个参数
var $ = require('./jquery');

4 向外部提供接口exports

define(function(require,exports,module){
//exports可以把方法或属性暴露给外部
exports.name = 'hi'; exports.hi = function(){
alert('hello');
}
});

5 当前模块信息module

  这里只介绍几个基本的,具体可以参考https://github.com/seajs/seajs/issues/242

  1 module.id 模块标识

  2 module.uri 根据模块系统的路径解析规则得到的模块绝对路径

  3 module.dependencies 表示当前模块的依赖列表,是一个数组

  4 module.status 当前模块的状态,是一个数值

示例

代码结构

代码文件

index.html

<!doctype html>
<html>
<head>
<title>SeaJs Test</title>
<meta charset="UTF-8"> <script type="text/javascript" src="seajs/sea.js"></script> <script type="text/javascript">
seajs.use('./js/init',function(init){
init.init();
}); seajs.config({
charset: 'utf-8'
});
</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>

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;
}
});

main.css

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

seajs 学习笔记的更多相关文章

  1. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

  2. seaJs学习笔记之javascript的依赖问题

    之前分别为大家介绍了有关javascript中的冲突和性能问题,今天为大家介绍一下有关javascript中的依赖问题.我们将继续就之前javascript中性能问题继续介绍. 先来回顾一下性能问题的 ...

  3. seajs学习笔记

    seajs配置 seajs.config({ //别名配置 alias:{ 'es5-safe':'gallery/es5-safe/0.9.3/es5-safe', 'jquery':'jquery ...

  4. SeaJS学习笔记(一) ./ 和 ../ 区别

    最近要去实习,公司里使用sea.js进行模块化开发 具体下载安装就不多说了,请参见SeaJS官网 <!DOCTYPE html> <html> <head> < ...

  5. seajs教程之seajs学习笔记 seajs.use用法

    seajs.use 用来在页面中加载模块.通过 use 方法,可以在页面中加载任意模块. 实例地址:http://www.android100.org/html/201405/23/12807.htm ...

  6. seaJS学习资料参考

    seajs官方文档:http://seajs.org/docs/#docs http://wenku.it168.com/d_000096482.shtml http://blog.codinglab ...

  7. amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules

    amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...

  8. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  9. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

随机推荐

  1. Linux学习3——磁盘文件管理系统与压缩和打包操作

    一.写在前面  本节将对Linux的磁盘文件系统.文件的压缩打包等操作进行简要介绍. 二.完成目标 1.了解磁盘文件系统的接本知识 2.操作文件和目录的相关命令 3.文件系统的简单操作命令 4.Lin ...

  2. 使用VS2003 发送Email

    使用VS2003发送Email与之后VS2005版本及以上VS版本不一样,记录一下, 需要引用using System.Web.Mail; public void SendEmail() { try ...

  3. Http的Post和Get

    原文:http://www.cnblogs.com/hyddd/archive/2009/03/31/1426026.html Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET, ...

  4. 在一个apk中调用另外一个apk中的activity

    今天忽然想到如果要在一个activity中调用另外一个activity该怎么办呢? 感觉这个应该比较简单,应为activity的启动方式就两种:显式启动.隐式启动: 显式启动的话肯定不行,那就只能使用 ...

  5. Oracle游标cursor1基础和隐式游标

    --指向表行的指针,一次一行,一般向前移动 Resultset --游标永远代代表的是一行数据. /* 使用步骤 第一步:声明游标,就像是声明一个变量样. 游标的关键字就是cursor. Declar ...

  6. Do Palapala (this)

    Description 伟大的中国人民有宝箱容量为S(0<=S<=20000),有m个物品(0<m<=30,每个物品有一个体积(正整数).任取若干个装入箱内,使箱子的剩余空间为 ...

  7. mysql学习(六)-索引

    主键索引: 确定唯一的一条记录,只能有一个主键(primary key) 主键不能为空 1.create table if not exists t1(id int not null auto_inc ...

  8. php 垃圾回收机制----写时复制和引用计数

    PHP使用引用计数和写时复制来管理内存.写时复制保证了变量间复制值不浪费内存,引用计数保证了当变量不再需要时,将内存释放给操作系统. 要理解PHP内存管理,首先要理解一个概念----符号表. 符号表的 ...

  9. td太多内容显示...

    table style="table-layout:fixed;"td style="text-overflow: ellipsis;white-space: nowra ...

  10. 列表checkbox全选

    $(document).ready(function(){ $(":checkbox:eq(0)").change(function(){ if ($(this).is(" ...