seajs入门教程

2019年8月30日 174次阅读 来源: 司想君

本文转自张洋，由于SeaJS更新版本很快，所以原文中许多处所不太实用，在这里宣布一个更新版。

怎样运用SeaJS

下载及装置在这里不赘述了，不相识的请查询官网。

基础开辟准绳

  • 统统皆为模块：SeaJS中的模块观点有点相似于面向对象中的类–模块可以具有数据和要领，数据和要领可以定义为大众或私有，大众数据和要领可以供别的模块挪用。

  • 每一个模块应当都定义在一个零丁的js文件中，即一个对应一个模块。

模块的定义和编写

模块定义函数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会赋值为 http://example.com/a.js ，没有迥殊的必要发起不要传入id。deps平常也不须要传入，须要用到的模块用require加载即可。

工场函数factory剖析

  工场函数是模块的主体和重点。它的三个参数离别是：

  • require：模块加载函数，用于纪录依靠模块

  • exports：接口点，将数据或要领定义在其上则将其暴露给外部挪用

  • module：模块的元数据
    这三个参数可以依据须要挑选是不是须要显现指定。

module是一个对象，存储了模块的元信息，详细以下：

  • module.id：模块的ID

  • module.dependencies：一个数组，存储了此模块依靠的一切模块的ID列表。

  • module.exports：与exports指向同一个对象

三种编写模块的形式

第一种是基于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。

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>

require

require是seajs重要的模块加载要领，当在一个模块中须要用到其他模块时平经常使用require加载：

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

require.async

上文说过seajs会在html页面翻开时经由过程静态剖析一次性纪录一切须要的js文件，假如想要某个js文件在用时才加载，可以运用require.async。
如许只要在用到这个模块时，对应的js文件才会被下载，也就完成了JavaScript代码的按需加载。

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 字符串

    原文作者：司想君
    原文地址: https://segmentfault.com/a/1190000004553278
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞