seajs和requirejs模块化简单案例分析


Posted in Javascript onAugust 26, 2019

本文实例讲述了seajs和requirejs模块化。分享给大家供大家参考,具体如下:

如今,webpack、gulp等构件工具流行,有人说seajs、requirejs等纯前端的模块化工具已经被淘汰了,我不这么认为,毕竟纯前端领域想要实现模块化就官方来讲,还是有一段路要走的。也因此纯前端的模块化工具依然有价值,而且就我了解一些中小企业一直都在用纯前端的模块化手段。

如今,重新关注seajs和requirejs,不求理解多么深刻,要求会用能用就可以。

模块化的起因是传统的直接引入js方法存在问题:

  1. 必须通过全局变量共享模块,有可能会出现命名冲突的问题;
  2. 依赖的文件必须手动地使用标签引入到页面中。

下面是seajs和requirejs的简单案例。

seajs 我用的seajs版本是2.2.3

html部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>极客学院首页</title>
</head>
<body>
  <button id="testbtn0">测试按钮0</button>
  <button id="testbtn1">测试按钮1</button>
  <script type="text/javascript" src="./js/sea.js"></script>
  <script type="text/javascript">
       seajs.use('./js/main');
  </script>
</body>
</html>

main.js文件

define(function(require,exports,module){
  //引入两个js文件
  require("test0");
  require("test1");
})

test0.js

define(function(require,exports,module){
  var $$=require("common").$$;
  var testbtn0=$$("#testbtn0");  
  testbtn0.addEventListener("click",function(e){
    alert(e.target.innerText);
  });
})

test1.js

define(function(require, exports, module) {
  var $$ = require("common").$$;
  var testbtn1 = $$("#testbtn1");
  testbtn1.addEventListener("click", function(e) {
    alert(e.target.innerText);
  });
})

coomm.js

define(function(rerquire,exports,module){
  /*//第一种导出方案
  exports.$$=function(tag){
      return document.querySelector(tag);
  }*/
  //第二种导出方案
  module.exports={
     $$:function(tag){
      return document.querySelector(tag);
     },
     test:"测试数据"
  }
  //第三种导出方案
 /* return {
     $$:function(tag){
      return document.querySelector(tag);
     },
     test:"测试数据"
  }*/
})

以上是为seajs的,而requirejs的直接就是该一下html文件就可以了,真是哭笑不得啊。才发现二者是通过的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>极客学院首页</title>
</head>
<body>
  <button id="testbtn0">测试按钮0</button>
  <button id="testbtn1">测试按钮1</button>
  <script type="text/javascript" data-main="./js/main" src="./js/require.js"></script>
</body>
</html>

关于导出接口有三种,分别是exports,用来导出变量;然后是module.exports用于导出对象;最后是return直接返回。

最后对seajs和requirejs的不通点做个总结,选择seajs作者github:

  1. 定位有差异。RequireJS 想成为浏览器端的模块加载器,同时也想成为 Rhino / Node 等环境的模块加载器。Sea.js 则专注于 Web 浏览器端,同时通过 Node 扩展的方式可以很方便跑在 Node 环境中。
  2. 遵循的规范不同。RequireJS 遵循 AMD(异步模块定义)规范,Sea.js 遵循 CMD (通用模块定义)规范。规范的不同,导致了两者 API 不同。Sea.js 更贴近 CommonJS Modules/1.1 和 Node Modules 规范。
  3. 推广理念有差异。RequireJS 在尝试让第三方类库修改自身来支持 RequireJS,目前只有少数社区采纳。Sea.js 不强推,采用自主封装的方式来“海纳百川”,目前已有较成熟的封装策略。
  4. 对开发调试的支持有差异。Sea.js 非常关注代码的开发调试,有 nocache、debug 等用于调试的插件。RequireJS 无这方面的明显支持。
  5. 插件机制不同。RequireJS 采取的是在源码中预留接口的形式,插件类型比较单一。Sea.js 采取的是通用事件机制,插件类型更丰富。

个人总结的不同是:

CMD,seajs 推崇依赖就近,AMD ,requirejs推崇依赖前置,实际是两者在简单实现上,是可以一致的。就比如本文的例子。

seajs比如requirejs小很多。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javaScript数组迭代方法详解
Apr 14 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
AngularJS中$http使用的简单介绍
Mar 17 Javascript
页面间固定参数,通过cookie传值的实现方法
May 31 Javascript
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
vue页面使用阿里oss上传功能的实例(二)
Aug 09 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
JQuery 又谈ajax局部刷新
Nov 27 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
JS原型和原型链原理与用法实例详解
Feb 05 Javascript
JS定时器如何实现提交成功提示功能
Jun 12 Javascript
JavaScript实现身份证验证代码实例
Aug 26 #Javascript
基于vue、react实现倒计时效果
Aug 26 #Javascript
tweenjs缓动算法的使用实例分析
Aug 26 #Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 #Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 #Javascript
小程序实现层叠卡片滑动效果
Aug 26 #Javascript
微信小程序 数据缓存实现方法详解
Aug 26 #Javascript
You might like
重置版宣传动画
2020/04/09 魔兽争霸
PHP生成便于打印的网页
2006/10/09 PHP
php 地区分类排序算法
2013/07/01 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
PHP与以太坊交互详解
2018/08/24 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
浅析JavaScript中的常用算法与函数
2013/11/21 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
[15:39]教你分分钟做大人:龙骑士
2014/10/30 DOTA
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
深入理解Python 代码优化详解
2014/10/27 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
简单的Python调度器Schedule详解
2019/08/30 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
机电专业大学生职业规划书范文
2014/02/25 职场文书
《锄禾》教学反思
2014/04/08 职场文书
信息技术课后反思
2014/04/27 职场文书
超强台风观后感
2015/06/09 职场文书
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL