sea.js模块化工具

sea.js

一、

sea.js向全局中引入了两个变量seajs、define;

1、seajs用加载文件

  seajs.use(deps,callback)异步引入入口模块

  路径要以sea.js文件所在的目录为准

  参数:

    deps:可以是一个字符串,也可以是一个数组;如果是一个字符串表示要引入的文件地址;如果是一个数组,表示加载多个模块文件。

    callback:回调函数,模块文件加载进来之后执行的事情

        回调函数的参数是对应的模块向外暴露的内容

eg:seajs.use(["js/A.js", "js/B.js"])

  注意:seajs.use不能引入具备id的模块,因为第一个参数既是文件的路径又是文件的id

2、define定义模块

  只有当参数是函数的时候才有意义

  (1)一个参数定义模块

  define(content)当content为非函数时,定义即暴露;当content是函数时,暴露如下:

  

define(function(require, exports, module) {
       这种定义方式默认暴露一个对象出去
})

  (2)两个参数定义模块

    第一种方式:define(id,handler)

    参数:id:当前模块的id;handler:当前模块的函数体

    第二种方式:define(deps,handler)

    参数:deps:当前模块所依赖的其他模块,数组类型;handler:当前模块的函数体

  (3)三个参数定义模块

    define(id,deps,handler)

    参数:id:当前模块id;deps:当前模块所依赖的其他模块,数组类型;handler:当前模块的函数体

二、模块暴露

(1)定义即暴露

  define(非函数)

(2)使用exports向外暴露

  打点或方括号添加属性

define(function(require,exports,module){
   exports.a = 10;
})

(3)使用module.exports向外暴露

  打点或方括号添加属性

  module.exports.a  = 10;

(4)使用this向外暴露,只可以打点向外暴露内容

(5)使用return向外暴露

三、加载具备id的模块

  seajs.use无法引入 具备id的模块

  原因:seajs.use方法的参数接收的既是文件的路径有事模块的id,所以能加载默认模块,因为默认模块的路径和id一致;

  当模块具备id时,seajs.use只可以完成第一步:加载文件;但是第二步:加载模块完成不了。

//把A文件作为入口文件,然后把BB(带id的模块)模块暴露,在A文件里面通过require引入BB模块文件;在index.html文件中引入A模块文件
//想要引入BB.js模块文件中的a模块,无法使用seajs.use;
//所以使用A.js引入BB.js文件中的a模块
index.html:
seajs.use("A.js",function(b) {
            // console.log(b)
        })
A.js:
define(["js/BB.js"],function(require, exports, module) {
    var b = require("a")
     console.log(b)
})
BB.js:
define("a",function(require,exports,module) {
    module.exports.a = 12;
})

四、require.async()用法同seajs.use

五、模块配置

配置需要使用seajs.config方法

  1、paths:值是一个对象,用来配置路径,方便跨目录调用

  用法:

seajs.config({
     psth:{
           key: value;//用所有的key代替value
     }
});

案例:

index.html:
seajs.config({
        //paths值是一个对象,用来配置路径,所有的key代替value
            paths: {
                "j":"js"//AA.js文件在js文件夹下,用j来代替js路径
            }
        })
//此处在引用模块文件时就可以用j
        seajs.use("j/AA",function(a) {
            console.log(a)    //输出111
        })
AA.js:
define(function(require,exports,module) {
    module.exports.aa = 111;
})

  2、alias:值是一个对象,用来给文件起别名

用法:

seajs.config({
     alias:{
           key: value;//用所有的key代替value
     }
});

案例:

index.html:
seajs.config({
            //alias给一个文件起别名
            alias: {
                "b": "js/AA"      //把AA模块文件起别名为b
            }
        })
//此处引入AA.js文件时就可以用b代替
        seajs.use("b",function(a) {
            console.log(a)      //输出111
        })
AA.js:
define(function(require,exports,module) {
    module.exports.aa = 111;
})

  3、map:映射,可用于路径转换;例如,将数组中的第一个全部按照规则映射成第二个

案例:

seajs.config({
 // 映射
 map: [
    // 将数组中的第一个 全部按照规则映射成第二个
  [‘http://example.com/js/app/‘, ‘http://localhost/js/app/‘]
  ]
 });

  4、vars:变量配置

案例:

index.html:
seajs.config({
        vars: {
            a: "BB"
        }
    })
    seajs.use("js/AA",function(a) {

    })
AA.js:
define(["js/BB"],function(require,exports,module) {
    var lang = require("js/{a}")//加载的是js/BB.js
    console.log(lang)        //输出12
})
BB.js:
define(function(require,exports,module) {
    module.exports.dd = 12;
})

  5、base:配置根目录

六、require.async:模块内部异步加载一个或多个模块;用法跟seajs.use一样。

案例:

define(function(require){
    require.async([‘aModule‘,‘bModule‘],function(a,b){  // 异步加载多个模块,在加载完成时,执行回调
    a.func();
    b.func();
    })
});

原文地址:https://www.cnblogs.com/zjp-/p/9194293.html

时间: 2024-10-20 10:54:37

sea.js模块化工具的相关文章

JS模块化工具requirejs教程(一):初识requirejs

随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作.模块复用.单元测试等等一系列复杂的需求. RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的RequireJS压缩后只有14K,堪称非常轻量.它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端代码质量得以提升. requirejs能带来什么好处 官方对requ

JS模块化工具requirejs教程(二):基本知识

前一篇:JS模块化工具requirejs教程(一):初识requirejs我们以非常简单的方式引入了requirejs,这一篇将讲述一下requirejs中的一些基本知识,包括API使用方式等 基本API require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短 define 从名字就可以看出这个api是用来定义一个模块 require 加载依赖模块,并执行加载完后的回调函数 前一篇中的a.js:

【转】JS模块化工具requirejs教程(二):基本知识

前一篇:JS模块化工具requirejs教程(一):初识requirejs 我们以非常简单的方式引入了requirejs,这一篇将讲述一下requirejs中的一些基本知识,包括API使用方式等. 基本API require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短 define 从名字就可以看出这个api是用来定义一个模块 require 加载依赖模块,并执行加载完后的回调函数 前一篇中的a.j

【转】JS模块化工具requirejs教程(一):初识requirejs

随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作.模块复用.单元测试等等一系列复杂的需求. RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的RequireJS压缩后只有14K,堪称非常轻量.它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端代码质量得以提升. requirejs能带来什么好处 官方对requ

JS模块化工具requirejs教程02

基本API require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短 define 从名字就可以看出这个api是用来定义一个模块 require 加载依赖模块,并执行加载完后的回调函数 前一篇中的a.js: define(function(){ function fun1(){ alert("it works"); } fun1(); }) 通过define函数定义了一个模块,然后再页面

Javascript模块化工具requirejs教程

转自:http://www.w3cschool.cc/w3cnote/requirejs-tutorial-1.html, http://www.w3cschool.cc/w3cnote/requirejs-tutorial-2.html 随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作.模块复用.单元测试等等一系列复杂的需求. RequireJS是一个非常小巧的JavaScript模

sea.js,spm学习

安装spm 下载sea.js 运行spm npm install [email protected] -g npm install spm-build -g 下载sea.js git clone https://github.com/seajs/examples.git cd examples/static/hello spm-build #编译到dist make deploy #复制到正式环境 下一步:运用sea.js 构建工具,创建web页面

JS中的模块化开发之Sea.JS

模块化开发的好处: 1:减少冲突 2:提高性能 用sea.js为例:sea.js模块库下载地址:http://seajs.org/docs/#downloads 例子:获取非行间样式的模块化开发: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="

模块化开发--sea.js

当你的网站开发越来越复杂的时候,会经常遇到一下问题吗?1.冲突2.性能3.依赖如果在多人开发或者是复杂的开发过程中会经常遇到这些问 题,就可以用模块化开发来解决.以上问题是如何产生的?1.冲突:如果你写了一个commen.js,这个JS文件主要是写一些 公用的方法,比如选项卡tab,拖拽等等...当你写好这些JS之后 可能交给同事用.同事首先引入这个JS文件,有可能这个页面又 交给新同事开发,这个同事写了一个function,名为tab,这时这 个tab就和你写的公用JS文件里的tab方法起了冲