如何通过sea.js进行模块化开发

来源:互联网 发布:aⅴ淘宝在线视频超碰 编辑:程序博客网 时间:2024/05/18 22:11

简介:

模块化开发:前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来,使得前端项目越来越复杂,然而,JavaScript却没有为组织代码提供任何明显帮助,甚至没有类的概念,因而在团队合作的过程中不易于工程管理,变量名容易造成冲突。模块化开发就是要解决这个问题。模块化开发需要遵循一定的规范,在前端开发方向需要遵循AMD规范(AMD 即Asynchronous Module Definition,中文名是“异步模块定义”的意思。)
SeaJS:SeaJS是一个遵循CMD规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。通过SeaJs很容易在前端实现模块化开发。提高团队协同能力和效率。

步骤:

1.引入Seajs

    SeaJs是一个前端插件,我们通过SeaJs进行模块化开发首先要通过script标签引入该框架,该框架可以从github项目中去下载。

2.定义模块

    定义模块以便供其他模块调用。
define(function (require, exports, module) {    //定义可供外部调用的函数    function fn() {       ...........    }    //定义可供外部调用的变量    var b=null;    //为外部调用暴露接口    exports.drag = fn;    exports.b = b;});

3.调用模块

调用其他模块的函数或变量,用于执行特定任务。
define(function (require, exports, module) {   require("./test/drag.js").drag();//调用模块方法(require参数指定定义模块的文件名)   var i=require("./test/drag.js").b;//调用模块属性(require参数指定定义模块的文件名)});

4.加载模块

seajs.use 用来在页面中加载模块。通过 use 方法,可以在页面中加载任意模块。
    seajs.use('模块的路径', function(ex){});

备注:

1.define(id?, dependencies?, factory);
id:指定义中模块的名字,可选;如果没有提供该参数,模块的名字应该默认为模块加载器请求的指定脚本的名字。如果提供了该参数,模块名必须是“顶级”的和绝对的(不允许相对名字)。
依赖dependencies:是一个当前模块依赖的,已被模块定义的模块标识的数组字面量。
依赖参数是可选的,如果忽略此参数,它应该默认为[“require”, “exports”, “module”]。然而,如果工厂方法的长度属性小于3,加载器会选择以函数的长度属性指定的参数个数调用工厂方法。
工厂方法factory:模块初始化要执行的函数或对象。如果为函数,它应该只被执行一次。如果是对象,此对象应该为模块的输出值。

2.模块名的格式
模块名用来唯一标识定义中模块,它们同样在依赖性数组中使用:
模块名是用正斜杠分割的有意义单词的字符串
单词须为驼峰形式,或者”.”,”..”
模块名不允许文件扩展名的形式,如“.js”
模块名可以为 “相对的” 或 “顶级的”。如果首字符为“.”或“..”则为相对的模块名
顶级的模块名从根命名空间的概念模块解析
相对的模块名从 “require” 书写和调用的模块解析

0 0
原创粉丝点击