未加星标

编写浏览器和Node.js通用的JavaScript模块

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

长期以来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 defined if(foo == undefined){ console.log('foo does not exist'); } // 正常运行 if(typeof foo == 'undefined'){ console.log('foo does not exist'); }

检测CommonJS我们只需要检测 module , exports , require 是否存在,比如:

// CommonJS if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') { module.exports = Person; } 检测浏览器环境

浏览器环境也包括引入了AMD框架的,以及没有做模块化的。 对于前者我们应当使用AMD框架来声明一个模块,而对于后者我们只需要暴露一个全局变量。

// Browser if (typeof define === 'function' && define.amd) { define('Person', [], function() { return Person; }); } else { window.Person = Person; }

当然这些浏览器检测相关逻辑也应当一并包裹在 function 中。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:编写浏览器和Node.js通用的JavaScript模块
本站链接:http://www.codesec.net/view/481646.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(37)