博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
seajs和requirejs技术指导文档
阅读量:5895 次
发布时间:2019-06-19

本文共 3374 字,大约阅读时间需要 11 分钟。

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

咱们说道说道这两个模块儿开发的有趣的地方吧,我会用咱们常说的一句“我负责貌美如花,你负责挣钱养家”来 说道说道,其实说白了就是分工明确: 第一步、前端页面的引入接口,他的作用就是进去接口;(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/felumanman/blog/263330?p=1 https://github.com/seajs/seajs/issues/277 http://yslove.net/seajs/ https://github.com/seajs/seajs/issues/242 http://blog.csdn.net/wl110231/article/details/8283512

转载于:https://juejin.im/post/5a3229e06fb9a0452a3c58a0

你可能感兴趣的文章
常见的海量数据处理方法
查看>>
C语言博客作业03--函数
查看>>
web.xml 中CharacterEncodingFilter类的学习
查看>>
显示刚刚添加的最后一条数据,access,选择语句,select
查看>>
贪吃蛇逻辑代码
查看>>
实现c协程
查看>>
ASP.NET视频教程 手把手教你做企业论坛网站 视频教程
查看>>
[LeetCode] Meeting Rooms II
查看>>
从Swift学习iOS开发的路线指引
查看>>
3.1链表----链表(Linked List)入门
查看>>
异步编程思想
查看>>
"数学口袋精灵"bug(团队)
查看>>
2017python第六天作业 面向对象 本节作业: 选课系统
查看>>
Scribes:小型文本编辑器,支持远程编辑
查看>>
为什么要使用 SPL中的 SplQueue实现队列
查看>>
ssh 安装笔记
查看>>
游戏音效下载网站大全
查看>>
实验五
查看>>
记那次失败了的面试
查看>>
程序包+创建包规范+创建包体+删除程序包
查看>>