文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何进行Node.js模块格式在浏览器中的尝试

2024-04-02 19:55

关注

本篇文章给大家分享的是有关如何进行Node.js模块格式在浏览器中的尝试,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

前面提到Node.js有一套简洁的格式写模块,它遵循的就是 Moudles。

浏览器里的JavaScript呢? 尽管语言本身暂不支持模块,但可以用现有的API包装一个写法出来。

毫无疑问,首先想到的是Node.js的Modules格式,它是***的效仿对象。因为前后端有一个统一的方式写JS模块岂不乐哉!

但一开始就有碰到一些难题

1,服务器端JS模块文件就在本地,浏览器端则需要通过网络请求。

2,服务器端可以很容易的实现同步或异步请求模块,浏览器端则问题多多。

如下

var event = require("event");     event.bind(el, 'click', function() {      // todo  });

这段代码中require如果是异步执行的,则event.bind的执行有可能会出错。

那实现同步的require不就行了吗?

的确可以使用 XHR 实现同步载入模块JS文件。但XHR的缺点也是明显的,它不能跨域,这点让人很难接受,因为有些场景需要模块部署在不同的服务器。

那只能通过script tag来实现模块加载了!

但script tag默认就是异步的,要实现Node.js的一模一样风格(Modules)很难,几乎是不可能。

这时,又一模块格式出现了:Modules/Wrappings ,顾名思义包裹的模块。该规范约定如下

1,定义模块用module变量,它有一个方法declare

2,declare接受一个函数类型的参数,如称为factory

3,factory有三个参数分别为require、exports、module

4,factory使用返回值和exports导出API

5,factory如果是对象类型,则将该对象作为模块输出

描述有拗口,代码却很简单,使用了一个function包裹模块(Node.js模块则无需包裹)。

一个基本的模块定义

module.declare(function(require, exports, module)  {      exports.foo = "bar";   });

直接使用对象作为模块

module.declare(  {      foo: "bar" });

Modules/Wrappings的出现使得浏览器中实现它变得可能,包裹的函数作为回调。即使用script tag作为模块加载器,script完全下载后去回调,回调中进行模块定义。

好了,截止目前我们已经看到了两种风格的模块定义:Modules 和 Modules/Wrappings。

CommonJS Modules有1.0、1.1、1.1.1三个版本。

Node.js、SproutCore实现了 Modules 1.0。

SeaJS、AvocadoDB、CouchDB等实现了Modules 1.1.1。

SeaJS、FlyScript实现了Modules/Wrappings。

注:

1,SeaJS未实现全部的 Modules 1.1.1。如require函数的main,paths属性在SeaJS中没有。但SeaJS给require添加了async、resolve、load、constructor。

2,SeaJS没有使用 Modules/Wrappings 中的module.declare定义模块,而是使用define函数(看起来象AMD中的define,实则不然)。

以上就是如何进行Node.js模块格式在浏览器中的尝试,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯