编写浏览器和Node.js通用的JavaScript模块
长期以来JavaScript语言本身不提供模块化的支持, ES6中终于给出了 from, import等关键字来进行模块化的代码组织。 但CommonJS、AMD等规范已经被广为使用,如果希望你的JavaScript同时支持浏览器和Node.js, 现在只有这几种方式:
通过 browserify等工具进行转换。 提供浏览器端CommonJS框架,比如这个简易的 CommonJS 实现。 通过小心的编码来支持多种环境。
browserify几乎可以保证Node.js下测试通过的代码在浏览器中仍然能够正常使用。 但缺点也很显然:很容易产生冗余代码并生成一个巨大的JavaScript库。 对于微型的JavaScript工具,小心地编码再合适不过了!见下文。
避开全局的名称空间
CommonJS中,每个源文件中的局部变量在其他文件中不可见。 然而浏览器中,所有全局名称空间的变量对所有JavaScript文件都可见。 这意味着我们需要包装所有的代码。例如:
(function(){ // your code goes here...})();
不同于常见编程语言,JavaScript采取函数作用域, 用一个 function来包裹你的代码可以隐藏里面的局部变量。
如果你对整个文件都被缩进的代码很反感,可以在构建时再添加上述代码。例如Makefile中:
person.js: index.js echo '(function(){' > $@ cat $^ >> $@ echo '})();' >> $@
如果你对Make构建前端项目感兴趣,可以看看Harttle的尝试:Makefile构建前端项目
一个简单的类
当然,『类』指的就是一个函数。假设我们的JavaScript模块提供一个叫做 Person的类:
(function(){ function Person(){ this.name = 'harttle'; }})();
下文将会考虑如何将这个类提供给其他模块使用。
检测CommonJS环境
要使用 typeof来检测一个变量是否曾被声明,因为 if对于未声明的变量会抛出错误。 例如:
// Uncaught ReferenceError: foo is not definedif(foo == undefined){ console.log('foo does not exist');}// 正常运行if(typeof foo == 'undefined'){ console.log('foo does not exist');}
检测CommonJS我们只需要检测 module, exports, require是否存在,比如:
// CommonJSif (typeof module !== 'undefined' && typeof module.exports !== 'undefined') { module.exports = Person;} 检测浏览器环境
浏览器环境也包括引入了AMD框架的,以及没有做模块化的。 对于前者我们应当使用AMD框架来声明一个模块,而对于后者我们只需要暴露一个全局变量。
// Browserif (typeof define === 'function' && define.amd) { define('Person', [], function() { return Person; });} else { window.Person = Person;}
当然这些浏览器检测相关逻辑也应当一并包裹在 function中。
编写浏览器和Node.js通用的JavaScript模块的更多相关文章
- 如何写兼容浏览器和Node.js环境的Javascript代码
如果有打开过jQuery的源码(从1.11及以后),或者Vue.js.React.js的源码,都会在文件的前面看见这样一段代码: ( function( global, factory ) { &qu ...
- 使用node.js 进行服务器端JavaScript编程
node.js 入门 node.js 可以运行在 Linux.Windows 和 Macintosh 等主流的操作系统上.在 Windows 平台上运行 node.js ...
- 编写原生的Node.js模块
导语:当Javascript的性能遭遇瓶颈,或者需要增强Javascript能力的时候,就需要依赖native模块来实现了. 应用场景 日常工作中,我们经常需要将原生的Node.js模块做为依赖并在项 ...
- node.js第二天之模块
一.模块的定义 1.在Node.js中,以模块为单位划分所有功能,并且提供了一个完整的模块加载机制,这时的我们可以将应用程序划分为各个不同的部分. 2.狭义的说,每一个JavaScript文件都是一个 ...
- node.js(七) 子进程 child_process模块
众所周知node.js是基于单线程模型架构,这样的设计可以带来高效的CPU利用率,但是无法却利用多个核心的CPU,为了解决这个问题,node.js提供了child_process模块,通过多进程来实现 ...
- node.js中使用http模块创建服务器和客户端
node.js中的 http 模块提供了创建服务器和客户端的方法,http 全称是超文本传输协议,基于 tcp 之上,属于应用层协议. 一.创建http服务器 const http = require ...
- 创业笔记-Node.js入门之JavaScript与Node.js
JavaScript与Node.js JavaScript与你 抛开技术,我们先来聊聊你以及你和JavaScript的关系.本章的主要目的是想让你看看,对你而言是否有必要继续阅读后续章节的内容. 如果 ...
- Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户 ...
- 基于promise用于浏览器和node.js的http客户端的axios
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支 ...
随机推荐
- [MyEclipse]转:设置注释格式
Window --> Java --> Code Style --> Code Templates --> Comments --> types --> Edit ...
- Using Oracle Database In-Memory with Oracle E-Business Suite
Database In-Memory is one of a number of options that can be deployed to address Oracle E-Business S ...
- Ubuntu下配置舒服的Python开发环境
Ubuntu 提供了一个良好的 Python 开发环境,但如果想使我们的开发效率最大化,还需要进行很多定制化的安装和配置.下面的是我们团队开发人员推荐的一个安装和配置步骤,基于 Ubuntu 12.0 ...
- jquery下跨域请求之代码示例
场景描述: 在域A下异步获取B域下的接口: 实现方法: $.ajax({ url : (Q.lottery.serverTimeUrl || 'about:blank'), error : funct ...
- 移动端点击(click)事件延迟问题的产生与解决方法
http://blog.csdn.net/xjun0812/article/details/64919063 问题的发现 上班做项目的时候碰到一个移动端项目,其中有个小游戏,相当于天上掉馅饼,用户需要 ...
- C++复习9.面向对象编程
C++ 面向对象编程概述 20131001 一些基本概念:封装.继承.组合.虚函数.抽象基类.动态绑定.多态性等等 1.一个笑话:如果坐在后排聊天的同学能够像中间打牌的同学那样安静的话,那么就不会影响 ...
- hdu 4081 Qin Shi Huang's National Road System 树的基本性质 or 次小生成树思想 难度:1
During the Warring States Period of ancient China(476 BC to 221 BC), there were seven kingdoms in Ch ...
- HDU 3779 Railroad(记忆化搜索)
Railroad Time Limit : 4000/2000ms (Java/Other) Memory Limit : 32768/32768K (Java/Other) Total Subm ...
- 修改myelipse中部署路径deploy location内容的方法
在new web project 中的project name等内容,可以打开.mymetadata文件进行修改 <?xml version="1.0" encoding=& ...
- kmeans实现文本聚类
需求 拿到的需求是输入n个文本,对文本进行聚类,由于这些输入不能通过历史数据进行训练,所以这个主要就是用无监督学习来解决. kmeans 谈到聚类就会想到kmeans,它的核心思想是给定的K值和K个初 ...