如今，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小很多。

本文结束。

2019年7月21日

今天回顾了requirejs的使用，突然明白作者为什么不更新了。webpack确实是一种更高层次的模块化升级。

seaj和requirejs模块化的简单案例的更多相关文章

  1. Selenium(十四)：自动化测试模型介绍、模块化驱动测试案例、数据驱动测试案例

    1. 自动化测试模型介绍 随着自动化测试技术的发展,演化为了集中模型:线性测试.模块化驱动测试.数据驱动测试和关键字驱动测试. 下面分别介绍这几种自动化测试模型的特点. 1.1 线性测试 通过录制或编 ...

  2. Aurelia – 模块化，简单，可测试的 JS 框架

    Aurelia 是下一代 JavaScript 客户端框架,利用简单的约定来激发你的创造力.凭借其强大的专注于开发经验, Aurelia 可以使您不仅创造惊人的应用程序,同时也享受这个过程.它经过精心 ...

  3. Servlet请求头response应用简单案例

    Servlet请求头response应用简单案例:访问AServlet重定向到BServlet,5秒后跳到CServlet,并显示图片: AServlet package cn.yzu; import ...

  4. winform 通过 html 与swf 交互 简单案例

    在上一篇 winform 与 html 交互 简单案例 中讲了winform与html之间的简单交互,接下来的内容是在winform中以html为中转站,实现将swf嵌入winform中并实现交互. ...

  5. [Design Pattern] Front Controller Pattern 简单案例

    Front Controller Pattern, 即前端控制器模式,用于集中化用户请求,使得所有请求都经过同一个前端控制器处理,处理内容有身份验证.权限验证.记录和追踪请求等,处理后再交由分发器把请 ...

  6. [Design Pattern] Observer Pattern 简单案例

    Observer Pattern,即观察者模式,当存在一对多关系,例如一个对象一有变动,就要自动通知被依赖的全部对象得场景,属于行为类的设计模式. 下面是一个观察者模式的简单案例. Observer ...

  7. [Design Pattern] Mediator Pattern 简单案例

    Meditor Pattern,即调解模式,用一个调解类类处理所有的沟通事件,使得降低多对象之间的沟通难度,属于行为类的设计模式.为了方便理解记忆,我也称其为,沟通模式. 下面是一个调解模式的简单案例 ...

  8. [Design Pattern] Iterator Pattern 简单案例

    Iterator Pattern,即迭代时模式,按照顺序依次遍历集合内的每一个元素,而不用了解集合的底层实现,属于行为类的设计模式.为了方便理解记忆,我也会称其为遍历模式. 下面是一个迭代器模式的简单 ...

  9. [Design Pattern] Command Pattern 简单案例

    Command Pattern, 即命令模式,把一个命令包裹在一个对象里面,将命令对象传递给命令的执行方,属于行为类的设计模式 下面是命令模式的一个简单案例. Stock 代表被操作的对象.Order ...

随机推荐

  1. Ubuntu12.04下zxing源码编译

    1.下载zxing源码 git clone https://github.com/15903016222/zxing-cpp.git 2.安装依赖工具cmake sudo apt-get instal ...

  2. 找球号（三）南阳acm528（异或' ^ '）

    找球号(三) 时间限制:2000 ms  |  内存限制:10000 KB 难度:2   描述 xiaod现在正在某个球场负责网球的管理工作.为了方便管理,他把每个球都编了号,且每个编号的球的总个数都 ...

  3. java 学习知识汇总

    一:常见模式与工具 学习Java技术体系,设计模式,流行的框架与组件是必不可少的: 常见的设计模式,编码必备 Spring5,做应用必不可少的最新框架 MyBatis,玩数据库必不可少的组件 二:工程 ...

  4. 在CentOS7中搭建Zookeeper集群

    前几天装了CentOS7.并安装了一些基本的工具,现在我手上有三台机器:分别是master,slave1,slave2. 今天我将搭建zookeeper,使用的版本是zookeeper-3.4.11. ...

  5. postgresql 数据库schema 复制

    ------ --- 导出 pg_dump -h *.*.*.* -p 5432 -d you_databasename -n you_schema -f you_sqlfile.sql ---- 替 ...

  6. vue相关ajax库的使用

    相关库: vue-resource: vue插件, 多用于vue1.x axios: 第三方库, 多用于vue2.x vue-resource使用 // 引入模块 import VueResource ...

  7. Java设计模式（17）——行为模式之观察者模式（Observer）

    一.概述 概念 UML简图 我们根据一个示例得类图来分析角色 角色 抽象主题:保存观察者聚集(集合),管理(增删)观察者 抽象观察者:定义具体观察者的抽象接口,在得到主题通知后更新自己 具体主题:将有 ...

  8. VMWare虚拟机的网络类型配置选择详解

    VMWare虚拟机网络有三种类型,当然还有最后一种类型就是“不使用网络连接”,哈哈....... VMWare在安装会有让选择网络类型的选项,如果不确认使用那一种网络类型,也可以先随便选择一种网络类型 ...

  9. 20145234黄斐《Java程序设计》第六周学习总结

    教材学习内容总结 第十章 输入/输出 文件的读写 网络上传数据的基础 父类 InputStream与OutputStream 流(Stream)是对「输入输出」的抽象,注意「输入输出」是相对程序而言的 ...

  10. 全球订单最多的成都优步推出"南北通勤线"业务

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...