如今，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. mysql 导出行数据到txt文件，指定字符分割

    select id,name, concat('tel:',phone) from user order by time INTO outfile 'user.txt' FIELDS terminat ...

  2. 『Linux基础 - 3』 Linux文件目录介绍

    Windows 和 Linux 文件系统区别 -- 结构 Windows 下的文件系统 - 在 Windows 下,打开 "计算机",我们看到的是一个个的驱动器盘符: - 每个驱动 ...

  3. centos配置NTP服务器

    时间服务器: NTP(Network Time Protocol,网络时间协议)是用来使用网络中的各个计算机时间同步的一种协议,NTP服务器就是利用NTP协议提供时间同步服务的. 一.环境准备: 1. ...

  4. HDOJ：6333-Problem B. Harvest of Apples(组合数学+莫队算法+逆元）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6333 解题心得: 这个题可以说是十分精彩了,首先推组合数学的公式,其中一个很重要的公式是Cnm = C ...

  5. 13 内建属性 _getattribute_ 内建函数

    1.内建属性 2.__getattribute__ 属性访问时拦截器 class Itcast(object): def __init__(self,subject1): self.subject1 ...

  6. 【POJ1733】Parity game

    [POJ1733]Parity game 题面 vjudge 题解 比较简单的分类并查集 将一个查询操作看作前缀和\(s_r-s_{l-1}\)的奇偶性 将每个点拆成一奇一偶然后分别连边即可 如果一个 ...

  7. IOI 2017 Practice Contest mountains

    Mountains 题面 题意: 选最多的点使得两两看不见. 分析: 分治,solve(l,r)为区间[l,r]的答案.那么如果不选最高点,分治两边即可,选了最高点,那么在最高点看不见的区间里分治. ...

  8. 数据爬取后台（PHP+Python）联合作战

    一. 项目声明 本项目从前端,到后台,以及分布式数据抓取,乃我一个人所写,因此项目并不太完善!在语义分析以及数据处理上并不能尽如意.但是极大的减轻了编辑的工作量! 二. 项目所用技术 本项目中前端采用 ...

  9. 【完美解决】Spark-SQL、Hive多 Metastore、多后端、多库

    [完美解决]Spark-SQL.Hive多 Metastore.多后端.多库 [完美解决]Spark-SQL.Hive多 Metastore.多后端.多库 SparkSQL 支持同时连接多种 Meta ...

  10. libevent学习八（evbuffer）

    1.evbuffer以队列的形式管理字节,从尾部添加,从头部取出(FIFO) 2.evbuffer内部存储形式是多个独立的连续内存       接口 //创建和删除 struct evbuffer * ...