这几天看了下前端模块化的知识,主要是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语言的文件和模块加载器。

https://github.com/requirejs

其实用非常简单,官方资料也比较充分。模块体现在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一样,返回对象即可。

https://github.com/seajs

通过使用seajs-text插件,可以将文本文件作为模块加载进来,完成vue组件的代码模板分开编写的目的。

seajs使用感受

抛除seajs和requirejs中的define的不同,二者在使用上没有什么区别。requirejs可以require一个依赖模块,只不过需先定义下。

seajs是执行时发现需要依赖模块再异步加载,requirejs异步加载定义依赖模块后再执行。

http://huangxuan.me/js-module-7day/这个PPT讲解清晰明了

requirejs和seajs使用感受的更多相关文章

  1. RequireJS与SeaJS模块化加载示例

    web应用越变的庞大,模块化越显得重要,尤其Nodejs的流行,Javascript不限用于浏览器,还用于后台或其他场景时,没有Class,没有 Package的Javascript语言变得难以管理, ...

  2. RequireJS和seaJS的区别与联系

    RequireJS和seaJS的区别与联系联系:都是模块加载器,倡导模块化开发理念,核心价值是让 JavaScript 的模块化开发变得简单自然.              RequireJS(除了是 ...

  3. 从Java的角度理解前端框架,nodejs,reactjs,angularjs,requirejs,seajs

    [前端神秘的面纱] 对后端开发来说,前端是神秘的, 眼花缭乱的技术,繁多的框架, 如果你还停留在前端等于只用jquery做开发,那么你out了, 本文从Java的角度简述下目前前端流行的一些框架. 水 ...

  4. LABjs、RequireJS、SeaJS 哪个最好用?为什么?

    感谢玉伯在知乎的奉献,下面全文转载:http://www.zhihu.com/question/20342350/answer/14828786 LABjs 的核心是 LAB(Loading and ...

  5. LABjs、RequireJS、SeaJS 哪个最好用?为什么?- 玉伯的回答

    LABjs 的核心是 LAB(Loading and Blocking):Loading 指异步并行加载,Blocking 是指同步等待执行.LABjs 通过优雅的语法(script 和 wait)实 ...

  6. RequireJS 与 SeaJS 的异同

    相同之处 RequireJS 和 SeaJS 都是模块加载器,倡导的是一种模块化开发理念,核心价值是让 JavaScript 的模块化开发变得更简单自然. 不同之处 两者的区别如下: 定位有差异.Re ...

  7. 模块化以及requirejs和seajs

    我们用模块化的思想进行网页的编写是为了更好的管理我们的项目 模块与模块之间是独立存在的,每个模块可以独立的完成一个子功能. 模块化所涉及的规范commonjs,AMD,CMD,UMD 其中的commo ...

  8. RequireJS 和 SeaJS

    RequireJS SeaJS CMD规范 CommonJS的规范: 根据CommonJS规范,一个单独的文件就是一个模块.加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部的 ...

  9. RequireJs 与 SeaJs的相同之处与区别

    相同之处: RequireJS 和 Sea.js 都是模块加载器,倡导模块化开发理念,核心价值是让 JavaScript 的模块化开发变得简单自然. 不同之处: 定位有差异.RequireJS 想成为 ...

随机推荐

  1. HTTP响应状态码参考

    HTTP响应状态码参考: 1xx:信息 Continue 服务器仅接收到部分请求,但是一旦服务器并没有拒绝该请求,客户端应该继续发送其余的请求. Switching Protocols 服务器转换协议 ...

  2. Codeforces Round #549 (Div. 2)B. Nirvana

    B. Nirvana time limit per test 1 second memory limit per test 256 megabytes input standard input out ...

  3. JMeter—系统性能分析思路

    系统在工作负载中的性能受到许多因素影响,处理器速度.内存容量.网络或磁盘I/O控制器的数量以及磁盘的容量和速度是所以工作负荷的重要性能特征组件.还有其他应用程序自身的性能特征.工作负荷的特性.应用程序 ...

  4. ORACLE中的KEEP()使用方法

    转载至:http://blog.csdn.net/aqszhuaihuai/article/details/6434160 ====================================== ...

  5. 最新的PHP trait使用方法详解

    说通俗点,PHP中使用trait关键字是为了解决一个类既想集成基类的属性和方法,又想拥有别的基类的方法,而trait一般情况下是和use搭配使用的. 具体案例,查看php中文网这篇文章.http:// ...

  6. SD与SE的关系,以及异常值

    很多刚进入实验室的同学对实验数据的标准差(SD)与标准误(SE)的含义搞不清,不知道自己的数据报告到底该用SD还是SE.这里对这两个概念进行一些介绍. 标准差(SD)强调raw data的Variat ...

  7. 基础篇:3.2)规范化:3d零件建模

    本章目的:规范化零件建模,这是机械的基本功夫. 1.建模的总体原则和总体要求 1.1 建模总体原则 a)零件模型应能准确表达零件的设计信息:b)零件模型包含零件的几何要素.约束要素和工程要素:c)零件 ...

  8. SQL数据库Truncate的相关用法

    数据库中 Truncate的用法:这个是删除表中的所有数据语法是 Truncate Table tablename他与delete的区别在于1 delete 可以有条件的删除 而truncate 是删 ...

  9. linux使用curl命令行进行接口测试

    cURL介绍cURL 是很方便的Rest客戶端,可以很方便的完成许多Rest API测试的需求,甚至,如果是需要先登入或认证的rest api,也可以進行测试,利用curl指令,可以送出HTTP GE ...

  10. MM 后台配置(转)

    本文转自:https://www.cnblogs.com/yanglikun/p/4124797.html 一.全局配置 1.一般配置 SPRO->SAP NETWEAVER -> GEN ...