seajs实现JavaScript 的 模块开发及按模块加载

seajs实现了JavaScript 的 模块开发及按模块加载。用来解决繁琐的js命名冲突,文件依赖等问题,其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载。

  官方文档:http://seajs.org/docs/#docs

  首先看看seajs是怎么进行模块开发的。使用seajs基本上只有一个函数“define”

fn.define
 = function(id,
 deps, factory) {

    //code  of function…

}

使用define函数来进行定义一个模块,根据 CMD (Common Module Definition)模块定义规范。一个文件就是一个模块。所以一个js文件中只有一个define,即一个文件是一个模块,SeaJS中模块的概念有点类似于面向对象中的类——模块可以拥有数据和方法,数据和方法可以定义为公共或私有,公共数据和方法可以供别的模块调用。

  官方实例中,define只传入一个参数: 一个工厂函数

define(function(require,
 exports, module) {

    //code  of the module...

});

在看参数之前,我们先看看define是如何处理参数的:

  fn.define = function(id, deps, factory)

define可以接收的参数分别是模块ID,依赖模块数组及工厂函数;

如果只有一个参数,则赋值给factory。

如果有两个参数,第二个赋值给factory;第一个如果是array则赋值给deps,否则赋值给id。

如果有三个参数,则分别赋值给id,deps和factory。

  根据官方实例,建议还是根据官方的来就传递一个参数,即只有factory参数,这样的话模块id默认为js文件路径。

  在来看看工厂函数的参数:

require,  exports, module

  require——模块加载函数,用于记载依赖模块。通过这个参数来进行对其他模块的加载。

  exports——接口点,将数据或方法定义在其上则将其暴露给外部调用。通过这个参数,来将这个模块的方法进行暴露

  module——模块的元数据。其是一个对象,有属性:

        module.id——模块的ID。

        module.dependencies——一个数组,存储了此模块依赖的所有模块的ID列表。

        module.exports——与exports指向同一个对象。

使用factory的参数的使用:

define(function(require,
 exports, module) {

    var a  = require(‘./a‘);//引入a模块    

    exports.fun2= function(){
            alert("fun2");
            a.dosomething();
   }    

}

  使用require对象来进行加载模块,其实使用正则表达式进行验证加载的,所以其参数必须是特定的字符串,不能是表达式。

  seajs会自动在require的参数中加入".js"来进行加载,即不需要写上后缀名,但是在某些情况下,seajs不会为其添加“.js”:

  1.载入css:    

require("./module1-style.css");

  2.路径中含有“?”: 

require(<a  href="http://example/js/a.json?b=func">http://example/js/a.json?cb=func</a>);

  3.路径以“#”结尾:

require("http://example/js/a.json#");

使用exports来向外部暴露方法,或者属性。暴露属性有几种方式,如上面中的例子是一种方式,另外还有:

使用return:

define(function(require)
 {
    var data1 = 1; //私有数据
    var func1  = function() { //私有方法
        returna.run(data1);
    }

    //暴露
    return{
        data2: 2,
        func2:function() {
            return‘hello‘;
        }
    };
});

直接返回json对象:

define({
    data: 1,
    func:function() {
        return‘hello‘;
    }
});

页面中调用seajs

前面说了seajs用来解决模块开发,和繁琐的文件依赖问题,所以所有的文件依赖都是通过require对象进行加载,或者可以使用require.async(“./a”)来进行异步加载,即当使用到的时候才进行加载,

  注:无论是require()还是require.async()都可以有第二个参数为回调函数,当文件加载成功时调用:

require.async(‘/path/to/module/file‘,function(m) {

    //code of callback...

});

有了这个加载依赖的方式,我们无需再页面上书写大量的<script ></script>标签,而仅仅使用一个

  

 <script src="./sea.js" data-main="./init"></script>

即可,其中data-main="./init" 为入口模块,表示加载这个模块,在进行迭代加载其所依赖的模块,使用这个属性可以省略seajs.use。这个后面说。

使用seajs.config进行全局配置:

seajs.config({

    base:‘path/to/jslib/‘,

    alias: {
      ‘app‘:‘path/to/app/‘
    },

    charset:‘utf-8‘,

    timeout: 20000,

    debug:false

});

这是对seajs进行全局配置,

base表示基址寻址时的基址路径

alias可以对较长的常用路径设置缩写。

charset表示下载js时script标签的charset属性。

timeout表示下载文件的最大时长,以毫秒为单位。

debug表示是否工作在调试模式下。

使用seajs.use 载入入口模块,相当于java的main函数,

//单模块模式
seajs.use(‘./a‘);

//回调模式

seajs.use(‘./a‘,function(a)
 {

  a.dosomething();

});

//多模块模式

seajs.use([‘./a‘,‘./b‘],function(a,
 b) {

  a.dosomething();

  b.dosomething();

});

下面可以看其官方给的simple例子中的页面怎么写的,基本上就明白了sea.js 是怎么用的了:

来自:http://www.cnblogs.com/lic309/p/4136389.html

<script src="../sea-modules/seajs/seajs/2.2.0/sea.js"></script>
<script>

  // Set configuration
  seajs.config({
    base: "../sea-modules/",
    alias: {
      "jquery": "jquery/jquery/1.10.1/jquery.js"
    }
  });

  // For development
  if (location.href.indexOf("?dev") > 0) {
    seajs.use("../static/hello/src/main");
  }
  // For production
  else {
    seajs.use("examples/hello/1.0.0/main");
  }
</script>

//mian.js

//hello/mian.js
define(function(require) {

  var Spinning = require(‘./spinning‘);

  var s = new Spinning(‘#container‘);
  s.render();

});
时间: 2025-01-01 23:39:44

seajs实现JavaScript 的 模块开发及按模块加载的相关文章

【前端开发】提高网站加载速度

尊重原创:但是出处不明...... YSlow是yahoo美国开发的一个页面评分插件,非常的棒,从中我们可以看出我们页面上的很多不足,并且可以知道我们改怎么却改进和优化. 仔细研究了下YSlow跌评分规则主要有12条: 1. Make fewer HTTP requests 尽可能少的http请求..我们有141个请求(其中15个JS请求,3个CSS请求,47个CSS background images请求),多的可怕.思考了下,为什么把这个三种请求过多列为对页面加载的重要不利因素呢,而过多的I

iOS开发UI篇—懒加载

iOS开发UI篇—懒加载 1.懒加载基本 懒加载——也称为延迟加载,即在需要的时候才加载(效率低,占用内存小).所谓懒加载,写的是其get方法. 注意:如果是懒加载的话则一定要注意先判断是否已经有了,如果没有那么再去进行实例化 2.使用懒加载的好处: (1)不必将创建对象的代码全部写在viewDidLoad方法中,代码的可读性更强 (2)每个控件的getter方法中分别负责各自的实例化处理,代码彼此之间的独立性强,松耦合 3.代码示例 1 // 2 // YYViewController.m 3

javascript实现js脚本的的异步加载

javascript实现js脚本的的异步加载,和图片的异步加载稍有不同,script的异步加载需要借助dom,因此有了局限性 <html> <head> <meta charset="utf-8" /> <title>Javascript</title> <meta http-equiv="X-UA-Compatible" content="IE=7"> </head&

iOS开发UI基础—懒加载

iOS开发UI基础-懒加载 1.懒加载基本 懒加载--也称为延迟加载,即在需要的时候才加载(效率低,占用内存小).所谓懒加载,写的是其get方法. 注意:如果是懒加载的话则一定要注意先判断是否已经有了,如果没有那么再去进行实例化 2.使用懒加载的好处: (1)不必将创建对象的代码全部写在viewDidLoad方法中,代码的可读性更强 (2)每个控件的getter方法中分别负责各自的实例化处理,代码彼此之间的独立性强,松耦合 3.代码示例 1 // 2 // YYViewController.m

iOS开发网络篇 —— OC加载HTML代码

html代码 图1 样式一:"<p><img src=\"/upload/image/20170609/1496978712941664.jpg\" title=\"1496978712941664.jpg\" alt=\"7.jpg\"/>测试内容信息无错</p>" 样式二:<h1 style=\"font-size: 32px; font-weight: bold; bo

js 模块开发之一(模块开发价值)

首先引用我们的今天的主角 ----<前端模块化开发的价值> 1,前端开发最常见的两个问题 ---命名冲突和文件依赖 2,对于命名冲突的基本解决办法就是学习其他语言的习惯,添加命名空间 var org = {}; org.CoolSite = {}; org.CoolSite.Utils = {}; org.CoolSite.Utils.each = function (arr) { // 实现代码 }; org.CoolSite.Utils.log = function (str) { //

专题5-内核模块开发3-内核模块可选项

1.模块申明 a.MODULE_LICENSE("遵守的协议") 申明该模块遵守的许可证协议,如:"GPL","GPL V2"等 b.MODULE_AUTHOR("作者") 申明模块的作者 c.MODULE_DESCRIPTION("模块的功能描述") 申明模块的功能 d.MODULE_VERSION("V1.0") 申明模块的版本 2.模块参数 在应用程序中 int main(int

JavaScript模块化:使用requireJS按需加载

模块加载器的概念可能稍微接触过前端开发的童鞋都不会陌生,通过模块加载器可以有效的解决这些问题: JS文件的依赖关系. 通过异步加载优化script标签引起的阻塞问题 可以简单的以文件为单位将功能模块化并实现复用 主流的JS模块加载器有requireJS,SeaJS等,加载器之间可能会因为遵循的规范不同有微妙的差别,从纯用户的角度出发,之所以选requireJS而不是SeaJS主要是因为: 功能实现上两者相差无几,没有明显的性能差异或重大问题. 文档丰富程度上,requireJS远远好于SeaJS

iOS开发UI中懒加载的使用方法

1.懒加载基本 懒加载——也称为延迟加载,即在需要的时候才加载(效率低,占用内存小).所谓懒加载,写的是其getter方法.说的通俗一点,就是在开发中,当程序中需要利用的资源时.在程序启动的时候不加载资源,只有在运行当需要一些资源时,再去加载这些资源. 我们知道iOS设备的内存有限,如果在程序在启动后就一次性加载将来会用到的所有资源,那么就有可能会耗尽iOS设备的内存.这些资源例如大量数据,图片,音频等等,所以我们在使用懒加载的时候一定要注意先判断是否已经有了,如果没有那么再去进行实例化 2.使