资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/seajs和requirejs的那些事儿

seajs和requirejs的那些事儿

zorpan / 3290人阅读

摘要：遵循的是异步模块定义规范，遵循的是通用模块定义规范。规范的不同，导致了两者的不同。在尝试让第三方类库修改自身来支持，目前只有少数社区采纳。是没有明显的，是明显没有。无这方面的支持。

发布之后发现存在一个显示的问题，大家可以移步到我的简书参考，谢谢大家！！！
我的简书《seajs和requirejs技术指导文档》

昨天到今天，老衲翻阅数十篇技术文档，为了搞明白seajs（CMD）和 requireJS（AMD）到底是个什么鬼，
当然也包括官网了，只是都不太尽如人意，理解起来感觉好费解，然后跟我的小伙伴交流了一晚上之后发现
了一个很形象的比喻，对于AMD和CMD的模式，其实理解的时候我借助了MVC这个结构来理解，感觉理解起来
相对容易一点儿，对于MVC这个结构我不做过多介绍，有兴趣的可以去看看
http://www.cnblogs.com/aaronj...
下面进入我们正题，说的不好的地方欢迎指正，一块学习进步.

咱们说道说道这两个模块儿开发的有趣的地方吧，我会用咱们常说的一句“我负责貌美如花，你负责挣钱养家”来
说道说道，其实说白了就是分工明确：
第一步、前端页面的引入接口，他的作用就是进去接口；（PS:前端页面直接展示给用户，相当于你的女朋友只负责貌美如
花，但是你需要提供，提供一切的物质支持就是money[对于requirejs和seajs来说就是给前端页面提供一个接口]）；
第二步、这个接口负责所有的依赖文件，还有需要的配置各种参数，支持文件等等。
换句话说就是页面上最直观的显示内容的调用方法，还有各种事件等等
（就相当于你，准备怎样让你的女朋友貌美如花。你要给提供化妆品、衣服之类的，没事肯定少不了）；
第三步、到了这一层，其实就是具体的逻辑的处理了，这一层的逻辑处理也是给第二层提供依赖的文件（
就相当于，你要给你的女朋友买这买那，你具体的工作是什么，做多少份兼职可以满足你的女朋友的物质需求）

上边儿说了这么多，其实就是为了想让大家理解一下requirejs和seajs这两种模块化开发的形式是什么，怎样分工的，
是不是多少有点儿进入状态了

first.咱们先来说一下requirejs


页面的引入接口

其中 r-index.js 就是相当于分工的第二步所在的位置，在这里边儿，我们进行依赖文件的配置，
和对第一步前端页面的显示的支持
我们来看一下r-index.js是怎样写的

requirejs.config({


baseUrl: "js/",
paths: {
    hammer: "lib/hammer.min",
    jquery:"lib/jquery.min",
    cookie:"lib/jquery.cookie",
    template:"lib/template"
} });



requirejs(["hammer", "jquery", "cookie","template","app/data"],
function(a,b,c,template,service) {     service.getAll();


service.getOne(); }

对这个就是进行基础的业务的处理，

"app/data"就是具体的逻辑的处理，这些给第二步提供了所有的逻辑支持

下面我们来看一下 data.js data.js 所有第二步用到的逻辑都放在这里边进行处理

define(["jquery","cookie"],function () {


  return {
         /*所有数据*/
         getAll:function (){
           return alldata;
         },
         /*指定id的数据*/
         getOne:function (id){
             
         }
     }
 })

有了上边儿requirejs 的案例基础我们来理解seajs的时候就方便的多了。
second.下面我们来看一下seajs的书写规范


首先说一下第一步，接口



然后看一下第二步的书写方式


define(function (requie, exports, module) {


//依赖可以就近书写
var hammer = require("js/lib/hammer.min");     ...     var app = requie("app/data");       
app.getAll();
app.getOne();
...
//软依赖
if (status) {

    var b = requie("./b");
    b.test();
} });




然后看一下第三步的书写方式


 module.export =  {
            /*所有数据*/
            getAll:function (){
              return alldata;
            },
            /*指定id的数据*/
            getOne:function (id){
                
            }
        }
    //需要注意的以下的写法是错误的
    export =  {
            /*所有数据*/
            getAll:function (){
              return alldata;
            },
            /*指定id的数据*/
            getOne:function (id){
                
            }
        }


最后我们说一下requirejs和seajs的相同点和不同点
相同之处


RequireJS 和 SeaJS 都是模块加载器，倡导的是一种模块化开发理念， 核心价值是让 JavaScript
的模块化开发变得更简单自然。


不同之处，两者的区别如下：


定位有差异。RequireJS 想成为浏览器端的模块加载器，同时也想成为 Rhino / Node 等环境的模块加载器。 SeaJS
则专注于 Web 浏览器端，同时通过 Node 扩展的方式可以很方便跑在 Node 服务器端。


遵循的规范不同。RequireJS 遵循的是 AMD（异步模块定义）规范，SeaJS 遵循的是 CMD （通用模块定义）规范。
规范的不同，导致了两者 API 的不同。SeaJS 更简洁优雅，更贴近 CommonJS Modules/1.1 和 Node
Modules 规范。


社区理念有差异。RequireJS 在尝试让第三方类库修改自身来支持 RequireJS，目前只有少数社区采纳。 SeaJS
不强推，采用自主封装的方式来“海纳百川”，目前已有较成熟的封装策略。


代码质量有差异。RequireJS 是没有明显的 bug，SeaJS 是明显没有 bug。


对调试等的支持有差异。SeaJS 通过插件，可以实现 Fiddler 中自动映射的功能， 还可以实现自动 combo
等功能，非常方便。RequireJS 无这方面的支持。


插件机制不同。RequireJS 采取的是在源码中预留接口的形式，源码中留有为插件而写的代码。SeaJS 采取的插件机制则与
JavaScript 语言 以及Node 的方式一致：开放自身，让插件开发者可直接访问或修改，从而非常灵活，可以实现各种类型的插件。




还有不少细节差异就不多说了。


总之，SeaJS 从 API 到实现，都比 RequireJS 更简洁优雅。如果说 RequireJS 是 Prototype 类库的话，则 SeaJS 是 jQuery 类库。


谢谢一下文档的参考


https://my.oschina.net/feluma...
https://github.com/seajs/seaj... http://yslove.net/seajs/
https://github.com/seajs/seaj...
http://blog.csdn.net/wl110231...
GPU云服务器 云服务器 回事儿 Requirejs 那些奇怪的错误 SeaJs

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91151.html

相关文章

  • 前端模块化的那些事儿

    摘要：规范异步模块声明规范公共模块声明模块化的核心价值模块化最核心的价值在于解决不同文件之间的分工和调用问题，即依赖关系。 一、什么是模块？ 定义：具有相同属性和行为的事物的集合在前端中：将一些属性比较类似和行为比较类似的内容放在同一个js文件里面，把这个js文件称为模块目的：为了每个js文件只关注与自身有关的事情，让每个js文件各行其职 二、什么是模块化？CommonJS是什么？AMD和C...

    aaron 评论0 收藏0

  • Javascript模块全揽

    摘要：要求模块编写必须在真正的代码之外套上一层规定的代码包装，样子看起来是这样的模块代码通过传递一个签名为的回调函数给函数，就可以把需要注入的变量和函数注入到模块代码内。 之前写的文章急速Js全栈教程得到了不错的阅读量，霸屏掘金头条3天，点赞过千，阅读近万，甚至还有人在评论区打广告，可见也是一个小小的生态了；）。看来和JS全栈有关的内容，还是有人颇有兴趣的。 showImg(https://...

    lily_wang 评论0 收藏0

  • JS异步那些事 五 （异步脚本加载）

    摘要：遵循的是异步模块定义规范，遵循的是通用模块定义规范。不同的脚本加载这个模块，得到的都是同一个实例。关于异步那些事就写到这里了，很多地方理解的不够深刻希望大家多多指教。 JS异步那些事 一 （基础知识）JS异步那些事 二 （分布式事件）JS异步那些事 三 （Promise）JS异步那些事 四（HTML 5 Web Workers）JS异步那些事 五 （异步脚本加载） 异步脚本加载 阻塞性...

    terasum 评论0 收藏0

  • JavaScript模块发展变迁史

    摘要：前两天有朋友拿了这样一段代码来问我，我想把一段代码写成模块化的样子，你帮我看看是不是这样的。的一个好处在与依赖前置，所有被使用到的模块都会被提前加载好，从而加快运行速度。 前两天有朋友拿了这样一段代码来问我，我想把一段代码写成模块化的样子，你帮我看看是不是这样的。，代码大概是这样的： (function(global) { var myModules = { n...

    姘存按 评论0 收藏0

  • 再谈JavaScript模块化

    摘要：应用日益复杂，模块化已经成为一个迫切需求。异步模块加载机制。引用的资源列表太长，懒得回调函数中写一一对应的相关参数假定这里引用的资源有数十个，回调函数的参数必定非常多这就是传说中的 简述 缘起 模块通常是指编程语言所提供的代码组织机制，利用此机制可将程序拆解为独立且通用的代码单元。 模块化主要是解决代码分割、作用域隔离、模块之间的依赖管理以及发布到生产环境时的自动化打包与处理等多个方面...

    MorePainMoreGain 评论0 收藏0

发表评论

登陆后可评论

0条评论

zorpan

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<