如何创建与环境无关的 JavaScript 库

     2023-02-22     107

关键词:

【中文标题】如何创建与环境无关的 JavaScript 库【英文标题】:how to create an environment agnostic javascript library 【发布时间】:2014-05-18 20:23:36 【问题描述】:

我正在创建一个 javascript 库,并且我希望它与环境无关(它不会使用 DOM、AJAX 或 NodeJS api。它将是 vanilla javascript)。因此,它应该可以在任何 javascript 环境中运行(浏览器、npm、meteor 智能包、V8 C 绑定......)。

我目前的方法是使用库创建 git repo,将所有库都放在一个全局变量中,而不考虑像 CommonJS 或 AMD 这样的模式。 稍后,我将创建另一个 git repo,使用我的库作为 git 子模块,并创建将其作为 npm 模块发布所需的内容。我担心这是否是一个好方法,我没有发现有人这样做。 优点:代码将是 vanilla javascript,无需了解环境模式。它不会将自己绑定到 CommonJS。它将可重新打包(复制和粘贴或 git 子模块)到任何 javascript 环境。它将与发送到浏览器所需的一样小。 缺点:我必须维护与我想要支持的环境一样多的 git。至少要在 npm 上交付第二个 git repo。

以 jQuery 为例,它可以在浏览器和 nodejs 中运行,只有一个 git repo。有一些代码需要注意要在 nodejs 或其他 CommonJS 兼容环境上运行的“exports”变量。 优点:只需一个 git repo 即可维护。 缺点:它将绑定到 CommonJS 模式(以实现 npm 兼容性)

我的问题是:我是否遵循正确(或可接受)的方法?或者我应该遵循 jquery 的路径,并尝试创建一个 git repo?

更新 1:Browserify 和其他 require() 库不是有效答案。我的问题不是如何在浏览器上使用require(),而是关于实现环境不可知论的架构模式。

更新 2: 创建一个浏览器/nodejs 模块不是问题,it's known。问题是:可以制作一个真正与环境无关的库吗?此示例绑定到 CommonJS 模式,在 NodeJS 中使用。

【问题讨论】:

相关问题:***.com/questions/5171213/… 相关文章:addyosmani.com/writing-modular-js 这样做 -> ***.com/a/23251110/2626313 问题在于模式与环境无关,不兼容(请参阅更新 2)。但这是一个有用的链接,谢谢。 我不得不查找“与环境无关”通常是什么意思:)英语不是我的母语。你有我的答案基于对你需要什么的新理解↓ 【参考方案1】:

如果您正在为您未来的库工作寻找设计建议,那么我认为您可以着眼未来,只需使用在其他语言、系统和库中得到充分证明的常用面向对象实践。

主要关注您设计的 UML 视图。

忘记“一个变量”的要求。

使用计划的下一版 JavaScript 中提出的功能。

http://wiki.ecmascript.org/doku.php?id=strawman:maximally_minimal_classes http://wiki.ecmascript.org/doku.php?id=harmony:modules_rationale

现在有一个实验性编译器可以让你编写 ES6 风格的代码(参见 https://www.npmjs.org/package/es6-module-transpiler-rewrite)。

Node.js 有一个 --harmony 命令行开关,它允许相同(参见 What does `node --harmony` do?)

所以在我看来,正确的做法是遵循最佳实践并“思考未来”

【讨论】:

【参考方案2】:

“使用构建工具”是这个问题的答案。使用构建工具,您可以使用最佳代码实践进行开发,而无需使您的代码符合当今的某些环境标准(AMD、commonjs...),并且仍然可以将您的代码发布到这些环境中。

例如,我使用Grunt.js 来运行一些任务,例如构建、lint、测试等。 它执行繁琐的操作(缩小、编译...),例如 Make、Maven、Gulp.js 和其他各种操作。

构建任务可以处理已编译代码的标准(如 commonjs)。因此,该库可以完全与环境无关,并且构建过程可以处理环境适应。 请注意,我不是在谈论编译为二进制文件。它将源代码编译为另一个源代码,例如将 CoffeScript 编译为 JavaScript。就我而言,它是将没有环境标准的 JavaScript 编译为具有 commonjs 标准的 JavaScript(以 Node.js module 运行)。 最终的结果是我可以将我的项目编译成各种标准而不会弄乱我的代码。

此外,在构建阶段,我可以“思考未来”,例如 xmojmr answered 并在我的 JavaScript 代码上使用 EcmaScript 6 功能,使用 Grunt 插件(例如 grunt-es6-transpiler 或 grunt-traceur)从 ES 编译 JavaScript 代码6 到 5(因此它可以在当今的环境中运行)

【讨论】:

【参考方案3】:

根据您的库模块化(如果您需要模块)。阅读这个问题Relation between CommonJS, AMD and RequireJS?

以 bootstrap 为例,它使用 npm 管理项目依赖关系,并使用 bower 发布为其他 Web 应用的静态内容。

看看 browserify 作为参考,它有点重,因为它提供了将依赖的 npm 模块捆绑为浏览器资源的能力。

【讨论】:

当您在浏览器上加载 jQuery 文件时,您将拥有 jQuery 和 $ 全局变量。 @Josmar 你是对的。关键是 jquery 只引入了很少的全局变量(据我所知$jQuery)。我反对在 javascript 中使用全局变量,因为它是 javascript 中最糟糕的 1 部分。见Appendix A, Awful parts 就像我在我的问题中所说:“一个全局变量中的所有库内容”。 Browserify 不是一个可接受的答案,因为问题不在于如何在浏览器上使用“require()”。更新问题以避免此类答案。 Bootstrap 不是一个可接受的示例。 twitter-bootstrap npm 不在服务器上运行,只在浏览器中运行。它与环境无关。

PHP - Smarty 模板 - 如何创建与上下文无关的模板

】PHP-Smarty模板-如何创建与上下文无关的模板【英文标题】:PHP-Smartytemplates-Howtocreatecontextindependanttemplates【发布时间】:2013-04-2419:31:24【问题描述】:我已经开始学习Smarty模板引擎,希望它能让我做一些我很难用PHP内置模板做的... 查看详情

JavaScript:与文化无关、不区分大小写的字符串比较

】JavaScript:与文化无关、不区分大小写的字符串比较【英文标题】:JavaScript:Culture-independentcase-insensitivestringcomparison【发布时间】:2013-08-2114:05:58【问题描述】:如果之前有人问过这个确切的问题,请指出相关问题。tl;dr:如何... 查看详情

如何在javascript中运行.netcore代码(代码片段)

前言在.NETCore中运行JavaScript代码,目前已经有很多实现方案。但是,如果你希望在纯JavaScript环境中运行.NETCore代码呢?那么,DotNetJS可能对你有所帮助。DotNetJSDotNetJS可以将C#项目编译为与任何环境兼容的单文件JavaS... 查看详情

persistencejs:异步javascript数据库映射库

persistence.js是一个异步的JavaScript对象数据库映射(ORM)框架。拥有数据库无关的独立抽象层,可轻松支持新的数据库。该软件最开始是为浏览器设计的,利用HTML5的WebSQL数据库。而后persistence.js被扩展以便支持各种JavaScript环境,包... 查看详情

如何从 JavaScript 调用使用 DDC 创建的 Dart 库?

】如何从JavaScript调用使用DDC创建的Dart库?【英文标题】:HowcanIcallaDartlibrarycreatedwithDDCfromJavaScript?【发布时间】:2017-11-1917:18:38【问题描述】:我在Dart中创建了一个需要从JavaScript调用的大型库。如果可能,我想避免使用JSInterop... 查看详情

extjs

...Js?ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端Ajax框架。因此,可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJS的前身来自于YUI... 查看详情

创建一个跨平台的 JavaScript 库

】创建一个跨平台的JavaScript库【英文标题】:Creatingacrossplatformjavascriptlibrary【发布时间】:2020-06-1805:30:24【问题描述】:我目前正在开发一个针对不同javascript运行时环境(即节点、现代浏览器)的库。因此,我有一个npm项目,... 查看详情

如何实现平台无关的异步写入文件?

】如何实现平台无关的异步写入文件?【英文标题】:Howtoimplementplatformindependentasynchronouswritetofile?【发布时间】:2012-11-1616:15:55【问题描述】:我正在创建一个程序,该程序将从远程机器接收消息,并且需要将消息写入磁盘上的... 查看详情

Kafka Connect 如何使命名空间与数据库名称无关

】KafkaConnect如何使命名空间与数据库名称无关【英文标题】:KafkaConnectHowtomakenamespaceagnostictodatabasename【发布时间】:2020-09-1012:41:37【问题描述】:我的环境MySQL(5.7):我们有多个模式,命名约定是application_name_env。示例:假设我... 查看详情

如何在 C++ 中构建与运行时版本无关的 DLL?

】如何在C++中构建与运行时版本无关的DLL?【英文标题】:HowdoIbuildaruntimeversionagnosticDLLinC++?【发布时间】:2011-06-0118:29:21【问题描述】:我的产品是一个C++库,它在Windows上以dll形式分发。它很少使用c-runtime(基本的iostream就是... 查看详情

Grails 与语言环境无关的十进制数据绑定

】Grails与语言环境无关的十进制数据绑定【英文标题】:Grailslocale-independentdecimaldatabinding【发布时间】:2015-12-1711:03:57【问题描述】:什么问题:在我的应用程序中,前端的数字始终以,作为小数分隔符。当用户更改其语言环境... 查看详情

如何为现有的 Javascript 库创建 Angular 库包装器?

】如何为现有的Javascript库创建Angular库包装器?【英文标题】:HowdoesonegoaboutcreatinganAngularlibrarywrapperforanexistingJavascriptlibrary?【发布时间】:2018-12-2313:46:26【问题描述】:假设存在一个用纯Javascript编写的Javascript库,通常用于普通... 查看详情

优雅的创建一个javascript库(代码片段)

...JS库。在我们深入之前,我做了两点假设:你知道简单的JavaScript或C语言。你不打算使用jQuery。通常情况下,一个JavaScript库不需要任何依赖。首先,我遇到了第一个麻烦,即如何正确的看待一个JavaScript库。在C/C++中,一个库是功... 查看详情

tvm在linux环境下的安装与编译及vscode如何配置tvm的远程连接调试环境(代码片段)

...篇文章介绍一下tvm在linux环境下的安装与编译,以及如何使用vscode来配置tvm的远程连接调试环境。  所需软硬件环境:环境版本localsystemwindows10servicesystemubuntu18.04tvmlatest(0.9.dev0)python(conda)python3.8.13localIDEvscode1.安装TVM1.1下... 查看详情

如何在 anaconda 环境中安装 Julia?

】如何在anaconda环境中安装Julia?【英文标题】:HowtoinstallJuliainananacondaenvironment?【发布时间】:2014-10-1123:20:51【问题描述】:Anaconda的主要特点之一是它与语言无关,如其blog所述:您可以创建任何二叉依赖树的环境(不同的Python... 查看详情

如何解决 Python“找不到与平台无关的库 <prefix>”

】如何解决Python“找不到与平台无关的库<prefix>”【英文标题】:HowcanItroubleshootPython"Couldnotfindplatformindependentlibraries<prefix>"【发布时间】:2013-10-1801:08:09【问题描述】:我正在尝试使用Fontcustom使用svg文件和fontforg... 查看详情

js的解析与执行过程(javascript面向对象一)

JS的解析与执行过程全局中的解析和执行过程预处理:创建一个词法环境(LexicalEnvironment,在后面简写为LE),扫描JS中的用声明的方式声明的函数,用var定义的变量并将它们加到预处理阶段的词法环境中去。一、全局环境中如何... 查看详情

linux下的静态库创建与查看,及如何查看某个可执行依赖于哪些动态库

linux下的静态库创建与查看,及如何查看某个可执行依赖于哪些动态库 创建静态库:ar-rcstest.a*.o查看静态库:ar-tvtest.a解压静态库:ar-xtest.a查看程序依赖的动态库:readelf-axxx|greplibrary如:可以看到,下面的交叉程序hello执行... 查看详情