requirejs和seajs使用感受
这几天看了下前端模块化的知识,主要是requirejs和seajs相关的知识,还未看es6的模块化知识。
由于目前项目组内的开始推广使用vue,并且开始简单的封装组件,但发现组件js的使用方式依然是原先的script标签引用方式,同时组件的template文件需作为字符串变量在组件js文件内封装,无法使用html标签的验证、补全、语法高亮等功能,此外多个小型组件组合成大型组件时,需要在每个使用到大型组件的html页面中把所有的小型组件js引入,代码重复并且容易出现遗漏情况。于是想到了前端模块化相关的知识,将组件封装为模块,使用前端模块化相关的工具,解决模块之间的依赖关系,只需引入单一的js文件即可,方便维护管理。
AMD和requirejs
AMD是Asynchronous Module Definition,异步模块定义。
AMD规范定义了一个define函数。AMD规范 https://github.com/amdjs/amdjs-api/wiki/AMD
define( id?, dependencies?, factory );
第一个参数,id 为字符串类型,为可选参数,为模块的标识。如果此标识不存在,模块的标识则为此脚本的文件名称,必要时还包含此文件的路径。
第二个参数,dependencies为字符串数组,为当前模块依赖的其他模块标识。
第三个参数,factory为function,其参数对应依赖模块,是一个需要进行实例化的函数或者一个对象。
requirejs是一个基于javascript语言的文件和模块加载器。
其实用非常简单,官方资料也比较充分。模块体现在requirejs中,可如下所示:定义了一个名称为myModule的模块,它依赖于dep1和dep2两个模块,此模块返回了一个对象,此对象包含一个名称为name的属性。
define('myModule',['dep1','dep2'],function(dep1,dep2){
return {
name:'hello world'
}})
模块可以使用依赖模块的文件路径,此时依赖模块的相对路径是相对当前模块所在的路径。
define('myModule',['./modules/dep1','dep2'],function(dep1,dep2){
return {
name:'hello world'
}})
在requirejs中,可以直接将vue作为一个模块引入使用。
使用插件:当存在模板文件时,依赖的模块名称前面增加"text!"即表示此依赖为文本文件,这样即可将vue的模板文件异步加载进来,使用“css!”,css文件也可这样引用。
requirejs使用感受
requirejs可以说是一种先声明再使用的方式,所有依赖的模块加载完毕后,再执行此模块的内容。
唯一害怕的是,添加依赖模块时,需要同时修改两个地方,还要保证映射关系不错,当依赖的模块太多时,害怕。好在暂时没想到需要依赖很多模块的模块。
当然也有另一种方式使用依赖的模块,require是使用模块的函数定义,不用担心模块会被重复加载。仍需再define中定义依赖的模块,只不过在需要时使用require获取即可。
define(['a'], function () {
var a = require('a');
});
CMD和seajs
玉伯写的seajs,使用方式如下所示
define(function(require,exports,module){
//此处如果需要某XX模块,可以引入
var xx=require('XX');
});
这样,代码在运行时遇到require时,才会同步加载所需的模块。
模块内容定义,需使用exports和module实现,可以同requirejs一样,返回对象即可。
通过使用seajs-text插件,可以将文本文件作为模块加载进来,完成vue组件的代码模板分开编写的目的。
seajs使用感受
抛除seajs和requirejs中的define的不同,二者在使用上没有什么区别。requirejs可以require一个依赖模块,只不过需先定义下。
seajs是执行时发现需要依赖模块再异步加载,requirejs异步加载定义依赖模块后再执行。
http://huangxuan.me/js-module-7day/这个PPT讲解清晰明了
最新文章
- C#基础知识八之访问修饰符
- DIR 按文件名中数字大小进行排序
- C#.net Winform获取文件路径
- [LeetCode] Copy List with Random Pointe
- html文本框(input)不保存缓存记录
- HDU 1026
- cocos2d-x载入texture
- JQuery slideToggle闪烁问题及解决办法
- Spring JdbcTemplate用法整理
- Grafana中整个Dashboard报错问题解决
- 关于极光推送Jpush的demo
- 数字三角形-poj
- IP地址段遍历
- Python的伪造数据生成器:Faker
- linux命令: 两个查找工具 locate,find
- poj3130 (半平面交
- python 判断 txt 编码方式
- Windows7 jmeter3.1安装(咋个安装?)
- Hibernate 组合主键映射
- 每天一个linux命令:【转载】rm命令