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. SQL————高级查询

    高级查询 --连接查询 select * from 表1,表2 ————形成笛卡尔积 select * from 表1,表2 where 表1.主键=表2.外键  ————主外键位置可以互换 --jo ...

  2. hibernate-annotation CascadeType.PERSIST不起作用的解决方法

    有如下两个实体类 , Student和Grade 为多对一关系. Student.java @Entity public class Student { private Integer id; pri ...

  3. C#中in,out,ref,params的作用和区别

    ref和out的区别在C# 中,既可以通过值也可以通过引用传递参数.通过引用传递参数允许函数成员更改参数的值,并保持该更改.若要通过引用传递参数, 可使用ref或out关键字.ref和out这两个关键 ...

  4. 如何将java web项目上线/部署到公网

    关于如何将java web上线,部署到公网,让全世界的人都可以访问的问题. 1.在myeclipse中开发好项目,打包成war格式,不会的同学参考以下 http://zhidao.baidu.com/ ...

  5. matlab求方差，均值，均方差，协方差的函数

    1. 均值 数学定义: Matlab函数:mean >>X=[1,2,3] >>mean(X)=2 如果X是一个矩阵,则其均值是一个向量组.mean(X,1)为列向量的均值,m ...

  6. 一.ubuntu14.04安装、亮度设置、显卡设置等一体化讲解

    一.ubuntu14.04安装 安装步骤很简单的,相信你只要知道并且决定安装ubuntu,你就不会在安装上有问题,下载网址 http://www.ithome.com/html/soft/81539. ...

  7. 解决HTML5中placeholder属性兼容性的JQuery插件

    //调用方法 $(function () {   $(".pHolder").jason(); }); //HTML代码 <input type="text&quo ...

  8. your local changes would be overwritten by merge. commit stash or revert them to proceed. view them

    error log: your local changes would be overwritten by merge. commit stash or revert them to proceed. ...

  9. Javascript 拖拽的一些高级的应用——逐行分析代码，让你轻松了解拖拽的原理

    我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图 我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来 ...

  10. 用python开发简单ftp程序

    根据alex老师视频开发的简单ftp程序,只能实现简单的get功能 ftp客户端程序: #!/usr/bin/env python #_*_ coding:utf-8 _*_ import socke ...