sea.js使用方法

// DOM元素加载完成之后执行

$(function(){

    // 按钮点击事件（执行）

})

$(document)是一个选择器，选中的是整个html所有元素的集合。

 

sea.js:提升代码可维护性。如果一个网站的JS文件超过三个，就适合用sea.js来组织和维护代码。

CMD模块定义规范：

define: 是一个全局函数，用来定义模块。

define (factory)：

define接受factory参数，factory可以是一个参数，也可以是一个对象或字符串。

// 定义一个JSON数据模块
define({ "foo": "bar" });

// 通过字符串定义模板模块
define('I am a template. My name is {{name}}.');

// 模块的构造方法。执行该构造方法，可以得到模块向外提供的接口
define(function(require, exports, module) {
  
    //模块代码

});

require:是一个方法，接受模块标识作为唯一参数，用来获取其他模块提供的接口。

define(function(require, exports) {

  // 获取模块 a 的接口
  var a = require('./a');

  // 调用模块 a 的方法
  a.doSomething();

});

export:是一个对象，用来向外提供模块接口。

对外提供属性，提供方法

define(function(require, exports) {

  // 对外提供 foo 属性
  exports.foo = 'bar';

  // 对外提供 doSomething 方法
  exports.doSomething = function() {};

});

module:是一个对象，上面存储了与当前模块相关联的一些属性和方法。

sea.js使用方法：

seajs.config

创建config.js用来对sea.js进行配置。

seajs.config({

  // 设置路径，方便跨目录调用
  paths: {
    'arale': 'https://a.alipayobjects.com/arale',
    'jquery': 'https://a.alipayobjects.com/jquery'
  },

  // 设置别名，方便调用
  alias: {
    'class': 'arale/class/1.0.0/class',
    'jquery': 'jquery/jquery/1.10.1/jquery'
  }

});

config.js

seajs.config({

  // 设置路径，方便跨目录调用
  paths: {
    'js': '/resources/define-js'
  },

  // 设置别名，方便调用
  alias: {
    'util': 'js/Util.js'
  }

});

exports、module.exports

用来在模块内部对外提供接口。

define(function(require, exports, module) {

  // 对外提供接口
  module.exports = {
    name: 'a',
    doSomething: function() {};
  };

});

util.js

define(function(require, exports, module) {

  exports.sayHello = function() {
		  alert("Hello");
		  console.log("11");
  };
});

seajs.use

在页面中使用seajs.use加载配置好的模块

// 加载一个模块
seajs.use('./a');

// 加载一个模块，在加载完成时，执行回调
seajs.use('./a', function(a) {
  a.doSomething();
});

// 加载多个模块，在加载完成时，执行回调
seajs.use(['./a', './b'], function(a, b) {
  a.doSomething();
  b.doSomething();
});

 

require 

用来获取指定模块的方法

define(function(require) {

  // 获取模块 a 的接口
  var a = require('./a');

  // 调用模块 a 的方法
  a.doSomething();
});

require.async

用来在模块内部异步加载一个或多个模块。

login.html

  <script type="text/javascript">
    // 加载入口模块
    var config = "/resources/define-js/config.js";
    seajs.use([config]);
    
    define(function(require, exports, moudule ) {
    	var util = require("util");
   		$("#loginBtn").click(function(){
   			util.sayHello();
        })
    })
    </script>