如今，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. Delphi的TValue探索（一）

    TValue是Delphi的RTTI系统的重要类型. 经过摸索,发现TValue功能强大,可以实现很多功能.本文章中所有程序采用XE3运行通过. 一.TValue结构 TValue定义在System. ...

  2. day2-exercise

    # Author: 刘佳赐-Isabelle October 22,2018 """ 1.有变量name = "aleX leNb" 完成如下操作: ...

  3. Python学习：5.函数以及基础语句

    函数 一.创建函数 Python的函数的学习是Python基础的一个重要部分,函数可以重复利用,减少代码量,接下来我们就学习一下如何创建一个函数,以及函数的使用. 1.创建一个函数的基本格式 def ...

  4. python 爬虫 5i5j房屋信息 获取并存储到数据库

    from lxml import etree from selenium import webdriver import pymysql def Geturl(fullurl):#获取每个招聘网页的链 ...

  5. php+IIS 配置环境（windows环境）

    继php7+apache2.4 配置环境(window环境)后,由于B2C项目准备上线:特此小编在阿里云上搭建PHP7环境,为此特写上搭建过程希望正处于搭建php7+IIS(windows环境)中的朋 ...

  6. 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。

    自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...

  7. Solr第二讲——SolrJ客户端的使用与案例

    一.Solrj的使用 1.什么是Solrj solrj是访问Solr服务的java客户端(就像通过jedis操作redis一样),提供索引和搜索的请求方法,SolrJ通常在嵌入在业务系统中,通过Sol ...

  8. CLR via c#读书笔记八：泛型

    1.定义泛型类型或方法时,为类型指定的任何变量(比如T)都称为类型参数.使用泛型类型或方法时指定的具体数据类型称为类型实参. 2.System.Collections.Concurrent命名空间提供 ...

  9. web漏洞原理 （需要每周更新此篇文章）

    SQL注入攻击简介 结构化查询语言SQL是用来和关系数据库进行交互的文本语言.它允许用户对数据进行有效的管理,包含了对数据的查询.操作.定义和控制等几个方面,例如向数据库写入.插入数据,从数据库读取数 ...

  10. Qt-QML-安卓编译问题

    Qt的强大在于跨平台,但是在某些地方做的还是不好,想我这种白痴,在编译安卓的时候就遇到新的问题,我在PC上面编译没有问题的,跑到安卓上面就会出现问题,我猜测应该是Qt的下面的编译的时候,用的还是旧的安 ...