这几天看了下前端模块化的知识,主要是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. Python【变量】

    本文介绍 1.Python运算符 运算符分类 运算符分为:算数运算.比较运算.逻辑运算.赋值运算.成员运算.身份运算.位运算 一.算数运算:返回数字 假设变量a=10,b=20 运算符: + 相加a+ ...

  2. oracle ocp题库变化,052最新考试题及答案整理-30

    30.Which is true when a database instance is shut down? A. Only transactional and normal modes wait ...

  3. linux安装报错之:ifconfig command not found解决

    问题描述: 用虚拟机VMware安装linux系统(镜像文件是从官网下载的CentOS-7.0-1406-x86_64-DVD.iso), 在安装完成之后,输入ifconfig命令报错:ifconfi ...

  4. 用API爬取天气预报数据

    1.注册免费API和阅读技术文档: 注册地址:https://console.heweather.com 文档地址:https://www.heweather.com/documents/api-ur ...

  5. 在Mondrian Virtual OLAP Cube中观察星座模型多事实表度量值的聚合

    这样设置的Schema文件会怎么样呢?用Saiku预览一下. 如果这时候想同时引用两个项目进行计算就会出问题了.那么这种情况怎么解决? 参考网上一段实现思路 <VirtualCube name= ...

  6. Smarty带来的神秘的数字1

    问题的引发:在htmly页面通过smarty模板引擎开启session_start()后,突发发现页面无故多了一个  神秘的数字 1 问题界面: 代码: 测试:在session_start()行末加2 ...

  7. React第二篇:组件的生命周期

    前言:因为生命周期是必须要掌握的,所以React的第二篇咱就写这. (版本:16.3.2) React的生命周期大致分为四个状态:分别是Mouting.Updating.Unmounting.Erro ...

  8. 2019 CCPC-Wannafly Winter Camp Day7(Div2, onsite)

    solve 6/11 补题: A.迷宫 Code:zz Thinking:zz kk 把每个节点的深度都处理出来,同一深度的点的冲突度为 (x-1),x为同层次点数减一. 然后冲突度不断下传(冲突度为 ...

  9. 2.使用ngx_http_auth_basic_module模块为不带认证的资源添加授权

    1.首先需要生成用户名和密码 使用openssl来生成,生成命令(openssl在安装nginx的时候已经安装) echo "kibana:$(openssl passwd -crypt y ...

  10. 决策树C4.5算法——计算步骤示例

    使用决策树算法手动计算GOLF数据集 步骤: 1.通过信息增益率筛选分支. (1)共有4个自变量,分别计算每一个自变量的信息增益率. 首先计算outlook的信息增益.outlook的信息增益Gain ...