动用SeaJS完毕模块化JavaScript开辟(新卡塔尔【分

作者:分分快三计划

require.async

  方法用来在模块内部异步加载模块,并在加载完成后执行指定回调。callback 参数可选。

define(function(require, exports, module) {
  // 异步加载一个模块,在加载完成时,执行回调
  require.async('./b', function(b) {
    b.doSomething();
  });

  // 异步加载多个模块,在加载完成时,执行回调
  require.async(['./c', './d'], function(c, d) {
    c.doSomething();
    d.doSomething();
  });
});
注意:require 是同步往下执行,require.async 则是异步回调执行。require.async 一般用来加载可延迟异步加载的模块

本文转自张洋,因为SeaJS更新版本很快,所以原文中很多地方不太适用,在这里发布一个更新版。

基本开发原则
 •一切皆为模块:SeaJS中的模块概念有点类似于面向对象中的类--模块可以拥有数据和方法,数据和方法可以定义为公共或私有,公共数据和方法可以供别的模块调用。

  上面的代码就是模拟了一下加载模块的原理,其实就是自己新建了一个script标签,将那个引入的模块添加到了当前页面当中,和JSONP差不多的原理,模块中的define函数自己执行,将里面的函数传递到sea.js插件中,然后再去做处理,sea.js将模块中的module.exports

的东西提取出来,回调函数传递给index中,接受到了这个模块中的module.exports。

  其实我写的不是很清楚了,哈哈,可以用自己的方式去实现一下,我在这里写的这篇主要是对这两天学的一些东西做一下总结。

  当然,如果你能从中收获一些我会非常高兴的,如果看到这里感觉什么都没用可以去官网去查看,上面讲的非常清楚。sea.js官网

SeaJS的全局配置

seajs提供了一个seaj.configd的方法可以设置全局配置,接收一个表示全局配置的配置对象,具体方法如下:

seajs.config({
base:'path',
alias:{
    'app':'path/app/'
},
charset:'utf-8',
timeout:20000,
debug:false
})

其中,

  • base表示基址路径
  • alias可以对较长的常用路径设置缩写
  • charset表示下载js时script标签的charset属性。
  • timeout表示下载文件的最大时长,以毫秒为单位。

    Seajs如何与现有的JS库配合使用

    要将现有的JS库与seajs一起使用,只需根据seajs的模块定义规则对现有库进行一个封装。例如,下面是对jQuery的封装方法:

    define(function(){
    /*
    此处为jquery源码
    */
    
    })
    

一个完整的例子:
上文说了那么多,知识点比较分散,所以最后我打算用一个完整的SeaJS例子把这些知识点串起来,方便朋友们归纳回顾。这个例子包含如下文件:

  • index.html 主页面
  • sea.js
  • jquery.js
  • init.js init模块,入口模块,依赖data、jquery、style三个模块,又主页面载入
  • data.js data模块,纯json数据模块
  • style.css css样式表

html:

<!DOCTYPE HTML>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content">
    <p class="author"></p>

    <p class="blog"><a href="#">Blog</a></p>
</div>
<script src="sea.js"></script>
<script>
        seajs.use('init');
</script>
</body>
</html>

javascript:

//init.js
define(function(require, exports, module) {
    var $ = require('./jquery');
    var data = require('./data');
    var css = require('./style.css');

    $('.author').html(data.author);
    $('.blog').attr('href', data.blog);
});

//data.js
define({
    author: 'ZhangYang',
    blog: 'http://blog.codinglabs.org'
});

css:

.author{color:red;font-size:10pt;}
.blog{font-size:10pt;}

请注意:
1.请讲jquery.js源码文件包含在seajs模块加载代码中;

2.在Sea.js < 2.3.0版本之前是可以加载css文件的,新版本中此功能移除,为了兼容考虑,加载css功能将作为一个插件存在。

使用方法

  • 可以在sea.js标签后引入这个插件使用
  • 也可以将插件代码混入sea.js当中
  • 和seajs-style的区别
    • seajs-css是使 Sea.js 能够加载一个css文件,和link标签一样
    • seajs-style是指提供一个seajs.importStyle方法用于加载一段 css 字符串

  id是一个模块的标识字符串,define只有一个参数时,id会被默认赋值为此js文件的绝对路径。如example.com下的a.js文件中使用define定义模块,则这个模块的ID会赋值为 ,没有特别的必要建议不要传入id。deps一般也不需要传入,需要用到的模块用require加载即可。

有一些需要注意的地方

define(function(require,exports,module){
    //这里的require就把他当成一个关键字就可以了,不要去改变他
})

另外这一种判断使用哪个模块的

//条件 这种情况就不推荐使用下面这种方式了,下面的会把两种都编译还是什么的,推荐使用require.async
define(function(require,exports,module){
    if(a){
        require('hello');
    }else{
        require('word');
    }
})

require.async

上文说过seajs会在html页面打开时通过静态分析一次性记载所有需要的js文件,如果想要某个js文件在用时才加载,可以使用require.async。
这样只有在用到这个模块时,对应的js文件才会被下载,也就实现了JavaScript代码的按需加载。

您可能感兴趣的文章:

  • 把jQuery的类、插件封装成seajs的模块的方法
  • 深入探寻seajs的模块化与加载方式
  • seajs中模块的解析规则详解和模块使用总结
  • seaJs的模块定义和模块加载浅析
  • 基于gulp合并压缩Seajs模块的方式说明
  • seajs模块之间依赖的加载以及模块的执行
  • Seajs 简易文档 提供简单、极致的模块化开发体验
  • seajs学习之模块的依赖加载及模块API的导出
  • seajs中模块依赖的加载处理实例分析
  • seajs模块压缩问题与解决方法实例分析

模拟他的原理

  步骤如下:

​   1.html文件: seajs.use(1,2)执行

​   2.插件: 模块插件 创建一个script标签 通过script把模块引入进来

​   3.插件: 定义一个全局函数define,用来获取模块里面所写的代码

​   4.模块:模块文件里 执行defined(传入一个函数)

​  5.插件: seajs.use插件 执行上一步的函数 并且传入三个参数

​   6.再执行模块里传入的参数过程中,改变了module

​   7.插件:插件里:执行回调函数,插件的第二个参数

  ​ 8.插件:删除掉上面加入的script标签

sea.js

let seajs = {};
seajs.use = function seajs(url,cb) {
    let oScript = document.createElement('script');
    let s = document.getElementsByTagName('script')[0];
    oScript.src = url;
    s.parentNode.insertBefore(oScript,s);

    /*function fn(dom) {
        return document.querySelector(dom);
    }*/

    let require,
        exports,
        module = {};
    window.define = function (fn) {
        fn(require,exports,module);
        cb(module.exports);
        s.parentNode.removeChild(oScript);
    };
}

index.html

seajs('./a.js',function(fn){
   let a = fn('#box');
   console.log(a);      
})

a.js

define(function (require,exports,module) {
    //这里是定义模块的地方
    function fn(dom) {
        return document.querySelector(dom);
    }
    module.exports = fn;
});

seajs.use

seajs.use主要用于载入入口模块。入口模块相当于C语言的main函数,同时也是整个模块依赖树的根。seajs.use
的用法如下:

//第一模式
seajs.use('./a');
//回调模式
seajs.use('./a',function(a){
    a.run();
})
//多模块模式
seajs.use(['./a','./b'],function(a,b){
    a.run();
    b.run();
})

其中多模块的用法和KISSY中的模块加载方法类似,不亏是一个人写的啊!
一般seajs.use只用在页面载入入口模块,SeaJS会顺着入口模块解析所有依赖模块并将它们加载。如果入口模块只有一个,也可以通过给引入seajs的script标签加入“data-main”属性来省略seajs.use,例如一下写法:

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>TinyApp</title>
</head>
<body>
    <p class="content"></p>
    <script src="./sea.js" data-main="./init"></script>
</body>
</html>

一个完整的例子:

使用方法

  使用方法特别简单,首先在官网中下载sea.js,然后在页面中引入。

index.html

// 1.路径
// 2.回调 (在js文件里定义的module.exports里定义的)
seajs.use('./js/part1.js',function (dom) {
    console.log(dom);
    let a = dom('#box');
    console.log(a);
}); 

part1.js

// 1.在js文件里互相引用模块
// 2.暂时不用管
// 3.导出(告诉别的文件可以使用我的xxx东西)
define(function (require,exports,module) {
    //这里是定义模块的地方
    function fn(dom) {
        return document.querySelector(dom);
    }
    module.exports = fn;
});

模块定义函数define

SeaJS中使用define函数定义一个模块。define可以接收三个参数:

/**
* Defines a module.
* @param {string=} id The module id.
* @param {Array.|string=} deps The module dependencies.
* @param {function()|Object} factory The module factory function.
*/
fn.define = function(id, deps, factory) {
    //code of function…
}

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

  • 如果只有一个参数,则赋值给factory
  • 如果有两个参数,第二个赋值给factory,第一个如果是数组则赋值给deps,否则赋值给id
  • 如果有三个参数,则分别赋值

但是,包括SeaJS官网示例在内几乎所有用到define的地方都只传递一个工厂函数进去,类似于如下代码:

define(function(require,exports,module){
    //code of the module
})

个人建议遵循SeaJS官方示例的标准,用一个参数的define定义模块。那么id和deps会怎么处理呢?

  id是一个模块的标识字符串,define只有一个参数时,id会被默认赋值为此js文件的绝对路径。如example.com下的a.js文件中使用define定义模块,则这个模块的ID会赋值为 ,没有特别的必要建议不要传入id。deps一般也不需要传入,需要用到的模块用require加载即可。

define(function(require){
  var a=require('a');
  var b=require('b'); //引入模块
  var data1=1;
  var fun1=function(){
    return a.run(data1);
  }
  return{
    data2:2,
    fun2:function(){
      return 'hello';
    }
  }
})

seajs模块化开发

  模块化开发,把整个文件分割成一个一个小文件。

工厂函数factory解析

  工厂函数是模块的主体和重点。它的三个参数分别是:

  • require:模块加载函数,用于记载依赖模块
  • exports:接口点,将数据或方法定义在其上则将其暴露给外部调用
  • module:模块的元数据
    这三个参数可以根据需要选择是否需要显示指定。

module是一个对象,存储了模块的元信息,具体如下:

  • module.id:模块的ID
  • module.dependencies:一个数组,存储了此模块依赖的所有模块的ID列表。
  • module.exports:与exports指向同一个对象

第三种写法对于定义纯JSON数据的模块非常合适。

exports

exports 是一个对象,用来向外提供模块接口。

define(function(require, exports) {
​
  // 对外提供 foo 属性
  exports.foo = 'bar';
​
  // 对外提供 doSomething 方法
  exports.doSomething = function() {};
​
});

除了给 exports 对象增加成员,还可以使用 return 直接向外提供接口。

define(function(require) {
​
  // 通过 return 直接提供接口
  return {
    foo: 'bar',
    doSomething: function() {}
  };
});

如果 return 语句是模块中的唯一代码,还可简化为:

define({
  foo: 'bar',
  doSomething: function() {}
});

上面这种格式特别适合定义 JSONP 模块。

特别注意:下面这种写法是错误的!

define(function(require, exports) {
  // 错误用法!!!
  exports = {
    foo: 'bar',
    doSomething: function() {}
  };
});

正确的写法是用 return 或者给 module.exports 赋值:

define(function(require, exports, module) {
  // 正确写法
  module.exports = {
    foo: 'bar',
    doSomething: function() {}
  };
});

提示exports 仅仅是 module.exports 的一个引用。在 factory 内部给 exports 重新赋值时,并不会改变 module.exports 的值。因此给 exports 赋值是无效的,不能用来更改模块接口。

 

前言

  SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。使用SeaJS可以提高JavaScript代码的可读性和清晰度,解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题,方便代码的编写和维护。
SeaJS本身遵循KISS(Keep it Simple,Stupid)理念进行开发,后续的几个版本更新也都是吵着这个方向迈进。

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

require

require是seajs主要的模块加载方法,当在一个模块中需要用到其他模块时一般用require加载:

var m=require('./a');

1.请讲jquery.js源码文件包含在seajs模块加载代码中;

基本开发原则

  • 一切皆为模块:SeaJS中的模块概念有点类似于面向对象中的类--模块可以拥有数据和方法,数据和方法可以定义为公共或私有,公共数据和方法可以供别的模块调用。
  • 每个模块应该都定义在一个单独的js文件中,即一个对应一个模块。

seajs.use

三种编写模块的模式

第一种是基于exports的模式:

define(function(require,exports,module){
    var a=require('a');
    var b=require('b'); //引入模块

    var data1=1; //私有数据

    var fun1=function(){//私有方法
        return a.run(data1);
    }

    exports.data2=2; //公有数据

    exports.fun2=function(){
        return 'hello';
    }

})

上面是一种比较“正宗”的模块定义模式。除了讲公共数据和方法附加在exports上,也可以直接返回一个对象表示模块,如下面的代码与上面的代码功能相同:

define(function(require){
    var a=require('a');
    var b=require('b'); //引入模块

    var data1=1;

    var fun1=function(){
        return a.run(data1);
    }

    return{
        data2:2,
        fun2:function(){
            return 'hello';
        }
    }
})

如果模块定义没有其他代码,只返回一个对象,还可以有如下简化写法:

define({
    data2:2,
        fun2:function(){
            return 'hello';
        }
    })

第三种写法对于定义纯JSON数据的模块非常合适。

根据应用场景的不同,SeaJS提供了三个载入模块的API,分别是:seajs.use,require和require.async。

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>TinyApp</title>
</head>
<body>
  <p class="content"></p>
  <script src="./sea.js" data-main="./init"></script>
</body>
</html> 
require

模块的定义和编写

define(function(require,exports,module){
  var a=require('a');
  var b=require('b'); //引入模块
  var data1=1; //私有数据
  var fun1=function(){//私有方法
    return a.run(data1);
  }
  exports.data2=2; //公有数据
  exports.fun2=function(){
    return 'hello';
  }
})

如何使用SeaJS

下载及安装在这里不赘述了,不了解的请查询官网。

seajs.config({
base:'path',
alias:{
  'app':'path/app/'
},
charset:'utf-8',
timeout:20000,
debug:false
})
/**
* Defines a module.
* @param {string=} id The module id.
* @param {Array.|string=} deps The module dependencies.
* @param {function()|Object} factory The module factory function.
*/
fn.define = function(id, deps, factory) {
  //code of function…
}

模块的定义和编写

seajs提供了一个seaj.configd的方法可以设置全局配置,接收一个表示全局配置的配置对象,具体方法如下:

SeaJS的全局配置

  SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。使用SeaJS可以提高JavaScript代码的可读性和清晰度,解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题,方便代码的编写和维护。

请注意:

根据应用场景的不同,SeaJS提供了三个载入模块的API,分别是:seajs.use,require和require.async。

第一种是基于exports的模式:

define(function(){
  /*
  此处为jquery源码
  */
  }) 

SeaJS本身遵循KISS(Keep it Simple,Stupid)理念进行开发,后续的几个版本更新也都是吵着这个方向迈进。

require是seajs主要的模块加载方法,当在一个模块中需要用到其他模块时一般用require加载:

模块定义函数define

上文说过seajs会在html页面打开时通过静态分析一次性记载所有需要的js文件,如果想要某个js文件在用时才加载,可以使用require.async。

以上内容是小编给大家分享的JavaScript模块化开发之SeaJS,希望对大家学习javascript模块化开发有所帮助,谢谢大家一直以来对脚本之家网站的支持。!

module是一个对象,存储了模块的元信息,具体如下:
 •module.id:模块的ID
 •module.dependencies:一个数组,存储了此模块依赖的所有模块的ID列表。
 •module.exports:与exports指向同一个对象

前言

Seajs如何与现有的JS库配合使用

如何使用SeaJS

 这样只有在用到这个模块时,对应的js文件才会被下载,也就实现了JavaScript代码的按需加载。

•如果有三个参数,则分别赋值

 •base表示基址路径
 •alias可以对较长的常用路径设置缩写
 •charset表示下载js时script标签的charset属性。
 •timeout表示下载文件的最大时长,以毫秒为单位。

 •sea.js
 •jquery.js
 •init.js init模块,入口模块,依赖data、jquery、style三个模块,又主页面载入
 •data.js data模块,纯json数据模块
 •style.css css样式表

下载及安装在这里不赘述了,不了解的请查询官网。

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

这三个参数可以根据需要选择是否需要显示指定。

 •每个模块应该都定义在一个单独的js文件中,即一个对应一个模块。

  工厂函数是模块的主体和重点。它的三个参数分别是:

html:
<!DOCTYPE HTML>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="content">
  <p class="author"></p>
  <p class="blog"><a href="#">Blog</a></p>
</div>
<script src="sea.js"></script>
<script>
    seajs.use('init');
</script>
</body>
</html> 
javascript:
//init.js
define(function(require, exports, module) {
  var $ = require('./jquery');
  var data = require('./data');
  var css = require('./style.css');
  $('.author').html(data.author);
  $('.blog').attr('href', data.blog);
});
//data.js
define({
  author: 'ZhangYang',
  blog: 'http://blog.codinglabs.org'
}); 
css:
.author{color:red;font-size:10pt;}
.blog{font-size:10pt;} 

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

 •require:模块加载函数,用于记载依赖模块
 •exports:接口点,将数据或方法定义在其上则将其暴露给外部调用
 •module:模块的元数据

 •可以在sea.js标签后引入这个插件使用
 •也可以将插件代码混入sea.js当中
 •和seajs-style的区别 •seajs-css是使 Sea.js 能够加载一个css文件,和link标签一样
 •seajs-style是指提供一个seajs.importStyle方法用于加载一段 css 字符串

个人建议遵循SeaJS官方示例的标准,用一个参数的define定义模块。那么id和deps会怎么处理呢?

define({
  data2:2,
    fun2:function(){
      return 'hello';
    }
  }) 

工厂函数factory解析

//第一模式
seajs.use('./a');
//回调模式
seajs.use('./a',function(a){
  a.run();
})
//多模块模式
seajs.use(['./a','./b'],function(a,b){
  a.run();
  b.run();
}) 

2.在Sea.js < 2.3.0版本之前是可以加载css文件的,新版本中此功能移除,为了兼容考虑,加载css功能将作为一个插件存在。

 一般seajs.use只用在页面载入入口模块,SeaJS会顺着入口模块解析所有依赖模块并将它们加载。如果入口模块只有一个,也可以通过给引入seajs的script标签加入“data-main”属性来省略seajs.use,例如一下写法:

var m=require('./a'); 
require.async

使用方法

但是,包括SeaJS官网示例在内几乎所有用到define的地方都只传递一个工厂函数进去,类似于如下代码:

其中多模块的用法和KISSY中的模块加载方法类似,不亏是一个人写的啊!

seajs.use主要用于载入入口模块。入口模块相当于C语言的main函数,同时也是整个模块依赖树的根。seajs.use
 的用法如下:

define(function(require,exports,module){
  //code of the module
}) 

三种编写模块的模式

 上文说了那么多,知识点比较分散,所以最后我打算用一个完整的SeaJS例子把这些知识点串起来,方便朋友们归纳回顾。这个例子包含如下文件:
 •index.html 主页面

上面是一种比较“正宗”的模块定义模式。除了讲公共数据和方法附加在exports上,也可以直接返回一个对象表示模块,如下面的代码与上面的代码功能相同:

如果模块定义没有其他代码,只返回一个对象,还可以有如下简化写法:

其中,

SeaJS中使用define函数定义一个模块。define可以接收三个参数:

要将现有的JS库与seajs一起使用,只需根据seajs的模块定义规则对现有库进行一个封装。例如,下面是对jQuery的封装方法:

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划 SeaJS 模块化