有哪些值得一读的优秀开源 JS 代码

发布网友 发布时间：2022-04-23 01:18

我来回答

共2个回答

懂视网 时间：2022-04-20 06:18

二、界面和基本操作

　　程序基于新版的Chrome浏览器编写和调试，需要设备上具有独立或集成显卡，并且需要用户具有通过浏览器调用显卡的权限。目前测试可以在windows7和Centos7操作系统上运行。

　　程序主界面如下图所示：

　　主界面本身是一个简单的Babylonjs场景，由天空盒与地面网格组成，应用半球形光照（？）。在场景中可以使用“wasd、空格、ctrl”控制视点位置，使用鼠标拖动控制视角；界面上部是十二个快捷菜单，可以通过鼠标单击打开或使用“1”到“=”键打开，打开菜单后可以使用“tab”键上下移动菜单项，“Enter”键选定菜单项或打开下一级菜单，“ESC”键取消选择，“/”键隐藏菜单按钮。

　　“调整”菜单栏下的“按住鼠标”选项可以使鼠标一直保持按下的状态（类似FPS游戏的鼠标控制），但因为运行在浏览器中的JavaScript无权限直接控制鼠标复位到屏幕中心，所以这种控制模式有一定的范围限制。
　　“视角切换”选项可以在“当前载具”的第一人称和第三人称视角之间切换，未来计划设置多种不同载具，不同载具具有不同的默认速度和默认功能，使用者可以在不同载具之间自由切换。
　　“调整速度”选项可以调整视点移动速度、编辑器中网格的调整幅度、鼠标灵敏度等控制参数。
　　“自由浏览”选项可以使视点脱离载具的限制自由移动，这时的移动按键由wasd键改为上下左右键

三、网格调整
　　选择“添加-》新增网格-》正方体”可以在场景中添加一个默认的正方体网格如下图所示：

　　在这里可选物体是可以自由配置的，使用者也可以把自己设计的网格添加进来，配置代码位于mymesh.js文件的309行左右：

1 //可以加载的网格的列表2 var arr_choosemesh=3 [4  ["code","BABYLON.MeshBuilder.CreateBox('","',{size:1},scene)"]5  ,["code","BABYLON.MeshBuilder.CreateSphere('","',{segments:10,diameter:1},scene);"]6  ,["babylon","", "../MODEL/allbase/", "2017512_8_13_30testscene.babylon"]7  ,["babylon","Cube", "../MODEL/octocat/", "octocat.babylon"]8  ,["babylon","Cube", "../MODEL/test3/", "test3.babylon"]9 ];

　　“code”表示通过执行后面的代码生成网格，“Babylon”表示按后面的参数加载现有的babylon格式模型。

　　网格上的坐标轴指示网格的局部坐标系坐标，也表示这个网格正处于选中状态中。对于选中的网格，点击调整菜单栏下的“调整位置”、“调整姿态”、“调整缩放”可以调整当前选中的网格的位置、姿态、缩放属性，调整时可以直接在对应的属性处输入值，也可以使用脚本即时生成值，也可以使用“上下左右、PgUp、PgDn”键进行属性调整，如下图所示：

　　因为可能需要输入JavaScript脚本，在做以上调整时移动控制按键会失效。

　　调整完毕后按Enter键坐标轴消失网格属性固定，在这一步时也会对网格的纹理坐标进行重新分配，为下面的纹理配置做准备。通过类似的方式固定多个网格可以生成较为复杂的网格对象，比如下面的人形网格：

　　点击“文件-》导出”可以将这个网格对象以文本文件形式导出（默认的导出文件后缀名是txt需要手工修改成babylon）

四、纹理设置
　　点击“选择-》选择三角形”光标会变为“crosshair”，这时点击网格中的三角形，被选中的三角形会突出显示：

　　在右侧的对话框中填写RGB分量可以设置选中三角形的颜色，点击“选择颜色”会在正方形的canvas里绘制出这个三角形图元对应的图素，同时被选中的三角形会以canvas中的对应图素作为纹理（透明度A暂时不好使）：

　　再次点击选择-》选择三角形可以对其他的三角形进行设置，可以点击“从图片中选取”使用本地图片作为这个三角形的图素提供者：

　　图片左下角黄线围成的区域是一个透明的p，对应纹理图片中的三角形色块（没有找到制作透明三角形p的方法，只能用弧线代替斜边）。可以使用鼠标拖拽p来设置选择图素的区域，调整“u长度、v长度”可以设置p的宽高，下面的四个按钮可以水平旋转图片：

　　点击确定，选择的图素会被应用到网格上：

　　从图片提取纹理时有两个思路：一是使用canvas的像素提取功能将素材图片中被选取的像素提取出来灌入纹理图片中；二是记录素材图片的偏移量和缩放量，使用canvas变形和剪切把素材图显示在纹理图片里。考虑到大部分情况下素材图和纹理图的像素点不能一一对应，采用第二种思路。
　　点击文件-》导出图片可以将纹理图片以PNG格式导出，再点击文件-》导出可以导出以这张图片作为纹理的模型文件。
　　load_mesh.html是一个简单的babylon模型查看器，在本地部署后加载模型即可查看效果：

　　因为纹理图片其他区域都是白色，所以模型的其他区域也都是白色。

五、总结

　　在未来的世界，不懂编程等于文盲。

　　当然，只要遵守别人设置好的规则，文盲也可能生活的很好。但如果一个人想要对所生活世界的运行方式有所了解，甚至加以影响，他就不可能安于做一个文盲。

　　在各种编程形式中，3D编程具有最为直观的表现力和影响力，而JavaScript则是一门简单易用又受众广泛的编程语言，作为二者结合的WebGL编程技术正是业余编程爱好者涉猎编程技术的最佳途径之一。

　　而对于专业的3D编程人员来讲，当代3D编程技术正处在向GPU加速运算和多终端3D呈现转变的三叉路口，WebGL技术作为多终端3D呈现方向的核心技术之一，也值得专业程序员深入研究。

　　限于时间，Newland编辑器的介绍就到这里，以后有新的进展会继续更新。希望大家能在评论区里和我交流意见和建议，您的正面评论将是对我的巨大鼓励。

　　谢谢。

热心网友 时间：2022-04-20 03:26

　　jQuery

　　jQuery 是一个无需介绍的库。它凭一己之力让跨浏览器网站使用成为现实，同时把 web 带到今天的位置。Web 标准已经被大多数浏览器制造商采纳并真正地尊重，jQuery 是其中的原因之一。jQuery 基金会的使命是“通过开源软件的开发和支持，以及开发社区的合作，改善开放的 web，让每一个人都可以访问它。”

　　jQuery 是世界上最常用的 JavaScript 库，所有应用程序都应该使用它，除非你不在意程序员的工作效率。它使得 DOM 遍历、事件处理、动画、AJAX 在所有浏览器上变得更简单、更容易。

　　何时使用 jQuery？一直使用，除非你想使用一个像 Zepto 的轻量级版本。

　　GitHub:https://github.com/jquery/jquery/jquery

　　AngularJS

　　Angular 是流行的企业级框架，许多开发人员都在使用它来构建和维护复杂的 web 应用程序。Angular 的人气非常高，包括 Domino’s Pizza, Ryanair, iTunes Connect, PayPal Checkout, 谷歌等企业都在使用它。Angular 是一个由谷歌支持的开源框架。Angular 自称是 HTML 的一个扩展，用来构建复杂的 web 应用程序。另外如果你熟悉 TypeScript， Angular 2就是用它构建的。

　　Angular 是一个 MVC 类型的框架。它提供了模型和视图之间的双向数据绑定。该数据绑定允许每当数据改变时，两边自动更新。  它使你能够构建可复用的视图组件。它提供了一个服务框架，使得后端-前端服务通信更容易。最后，它只是普通的 JavaScript。

　　何时使用 AngularJS？当你正在构建一个复杂的 web 前端应用程序，同时需要一个模块化的框架来处理一切时。

　　GitHub:https://github.com/angular/angular.js

　　React

　　React 是今年最受欢迎的 JavaScript 项目！每个人都似乎在谈论 ReactJS。去年我参加的每一个会议，至少有好几个议题是关于 React 和同家族的其他库（Flux, Rex）的。React 是开源软件，主要由 * 开发，其他大型科技公司也有贡献。React 自称是一个用于构建用户界面的 JavaScript 库。

　　React 主要是 MVC 中的 V。它的重点完全在 MVC 的 V 部分，忽视应用程序架构的其余部分。它提供了一个组件层，使得创建 UI 元素，组合元素变得更容易。它使用虚拟 DOM，因此优化了渲染，且允许从 node.js 渲染 React。此外，它实现了单向响应的数据流，因此比其他框架更容易理解和使用。

　　作为 MVC 中的 V，很多项目将 React 结合 Angular 或 Ember 这样的框架使用。

　　何时使用 React？当你想要一个强大的视图层，但不需要在应用程序的其余部分使用一个复杂的框架，或者你在 Angular、Backbone 或 Ember 应用上需要一个视图层时。当你正试图建立一个同构 web 框架时。

　　GitHub:https://github.com/*/react

　　Backbone

　　Backbone 是一个著名的简易框架，适合单个 JavaScript 文件。Backbone 已经存在有一段时间了，是以 CoffeeScript 和 Underscore 闻名的 Jeremy Ashkenas 所开发的。对于一些为小型 web 应用寻找一个结构简单的框架，而不想引入如 Angular 或 Ember 这些大型框架的团队，Backbone 特别受欢迎。

　　Backbone 提供一个完整的 MVC 框架以及路由。模型允许键-值绑定和数据变化的事件处理。模型（和集合）可以连接到RESTful API。视图具有声明式事件处理，路由在处理 URL 和状态管理上做的很出色。它包含你创建一个单页面应用程序所需要的一切，且没有提供太多东西，没有不必要的复杂度。

　　何时使用 Backbone？Backbone 是我创建简单 web 应用程序的首选框架。

　　GitHub:https://github.com/jashkenas/backbone/

　　Ember

　　Ember 是一个固执的 web 应用程序框架，关注程序员的工作效率。Ember 比较流行，它的核心团队包括像曾是 Ruby on Rails 和 jQuery 核心团队成员的 Yehuda Katz 的聪明人。Ember 自称是“一个用于创建大规模 web 应用程序的框架”，且不浪费你的时间。它很固执，为你提供了很多选择。

　　Ember 也是一个 MVC 框架。它包括一个模板和视图引擎，当数据变化时自动更新，就像 Angular，Backbone 和 React 一样。它包含 web组件 的思想，让你使用自己标签扩展 HTML（就像 Angular 一样）。它也有一个知道如何与你的 RESTful API 一起工作的路由和模型引擎。

　　何时使用 Ember？当你只需要一个可以运行的框架时。当你因为预算紧张或工期很短而不需要灵活性时，请使用 Ember。

　　GitHub:https://github.com/emberjs/ember.js

　　Underscore &lodash

　　有时候 JavaScript 内置的功能导致程序员的效率并不高。总是缺少一个工具函数或一个可以简化代码的函数。Underscore（和 lodash）是一个 JavaScript 库，它提供了一整套工具函数，不需要对内置 JavaScript 对象打补丁。两个库均提供超过 100 个功能助手和其他专用功能，包括 map，filter，invoke，rece，template, throttle, bind, extend, pick, clone 等更多的函数。

　　何时使用 Underscore？当你需要一个单独的 JavaScript 文件，来立即提升程序员的工作效率时。

　　GitHub:https://github.com/jashkenas/underscore

　　何时使用 lodash？当你需要模块化和性能稍强版本的 Underscore，同时更容易地支持 AMD 和社区插件时。

　　LodashGitHub:https://github.com/lodash/lodash

　　D3.js

　　数据可视化和图表是一种常见的 web 应用程序需求。D3.js 是任何数据操作和可视化的事实标准。它是 GitHub上最受欢迎的项目之一，被数以百计的组织使用。大量的图形，图表和可视化库在 D3 上构建。

　　D3 允许你操作任何来源的数据文档，转换成 DOM 或/和 SVG 或/和 CSS。D3 关注现代 web 标准，确保你不受任何专有格式的约束，比如 Flash 和 Silverlight。

　　何时使用 D3.js？在你需要任何形式的可视化的时候。

　　GitHub:https://github.com/mbostock/d3

　　Babylon.js

　　想要构建完全符合现代 web 标准且跨浏览器的视频游戏吗？看看 Babylon.js，它是基于 WebGL 和 JavaScript 的 3d 游戏引擎。你可以创建令人难以置信的包含物理、音频和粒子系统等等的高质量游戏。

　　何时使用 Babylon.js？无论何时，只要你想做一个视频游戏或任何类型的复杂三维场景，都能用上。

　　GitHub:https://github.com/BabylonJS/Babylon.js

　　Three.js

　　想要构建一个 3D 可视化场景，但不需要一个完整的游戏引擎？three.js 提供了一个轻量级的 3d 库，允许渲染 3d 为 HTML5 画布、SVG 和 WebGL。它是相当简单的库，在 three.js 的展示里有数百个优美的例子。

　　何时使用Three.js？当你需要一个能输出为 Canvas 的简单的 3D 可视化场景时。

　　GitHub:https://github.com/mrdoob/three.js/

　　Mocha& Chai

　　JavaScript 在很长一段时间内是非常烦人的。测试任何代码通常都被认为是恼人的，但它却是每个开发人员都应该做的事情。每个开发人员似乎总是蔑视和忽略它，而不测试他们的代码。这个恼人的东西有一个解决办法，那就是 Mocha 和 Chai。两个库的名字都来自美味的热饮料，它们都能帮你测试代码，但方式不同。

　　Mocha 是一个 JavaScript 测试框架，使得你在 node 模块和浏览器 app 中测试异步代码变得更容易。Mocha 测试可以串联运行，可以为正确的测试用例添加异常跟踪的能力。

　　Chai 是一个行为驱动开发/测试驱动开发的断言库，可以搭配 Mocha 使用。它可以把你需要测试的东西用可读的风格简单地表达出来。

　　何时使用 Mocha & Chai？总是！请测试你的代码，让世界变得更美好。

　　Chai GitHub:https://github.com/chaijs/chai

　　Karma

　　既然已经把 Mocha 和 Chai 包含在这个列表中了，如果不包含用来运行这些测试或设置持续集成测试的测试运行器，那将是不完整的。Karma 是一款旨在帮助你在不同的浏览器上自动运行测试的工具。它可以帮助你在所有浏览器上运行 Mocha 和 Chai 测试。

　　不是每个浏览器都运行在所有平台，但幸运的是可以使用一些免费工具来测试其他浏览器，看看 Browser Screenshots。如果你正在 OS X 上运行代码，想测试 Edge 或 IE，可以 免费 使用这个工具。

　　何时使用 Karma？当你的应用程序有一个完善的测试套件，并希望确保测试在所有浏览器上通过时。

　　GitHub:https://github.com/karma-runner/karma

　　PhantomJS

　　运行完整的浏览器来测试你的代码比较耗内存和 CPU。PhantomJS 允许你运行一个轻量的 WebKit —— Safari 和Chrome（现在是 Blink）后台的渲染引擎。它允许你通过 JavaScript API 运行测试，捕捉截图，监控网络和自动浏览页面。

　　何时使用 PhantomJS ?当你需要进行更多的测试，操作页面和监视网络请求时。

　　GitHub:https://github.com/ariya/phantomjs

　　Grunt & Gulp

　　为生产环境构建网站，通常涉及到提高性能的任务，比如 JavaScript 和 CSS 的压缩， CoffeeScript/TypeScript 的编译，单元测试，语法检查。也许你已经有一个为网站发布到生产环境的工具链，如果没有，你可以使用任务运行器，比如 Grunt 或Gulp。两者都有大量关于网站的任何转换的插件，为发布到生产环境做好准备。

　　何时使用 Grunt？当你喜欢写配置文件同时不介意你的任务运行器生成中间文件时。

　　Grunt GitHub:https://github.com/gruntjs/grunt

　　何时使用 Gulp？当你喜欢在配置上写代码和利用 node.js 的流功能来加快任务执行时。

　　Gulp GitHub:https://github.com/gulpjs/gulp

　　Babel

　　JavaScript 语言正在迅速发展。ECMAScript2015 于去年夏天发布，它的许多新特性在最新的浏览器上实现了。如果你想看看 ECMAScript 2015 的兼容性，你可以看看来自 @kangax 的这个 表。你会注意到，最新版本的 Edge，Firefox 和 Chrome 已经几乎完全兼容了。

　　我们并不是生活在一个完美的世界。作为开发人员，我们需要继续支持旧的浏览器，它们没有最新最好的 JavaScript 特性。我们要推进 web 和改善我们的代码库。Babel 是一个 JavaScript 编译器，用于把最新的 JavaScript 标准编译成可在 IE9 等老浏览器上运行的兼容ES5的 JavaScript。它有一些插件，使得 React 开发更容易，甚至可以使用一些不属于该规范的特性（例如ES7）。

　　何时使用 Babel？当你想使用新的 JavaScript 语言特性，同时还要支持老版本浏览器时。

　　GitHub:https://github.com/babel/babel

　　引自：

　　最佳的 JavaScript 前端框架、库和工具

　　http://web.jobbole.com/84644/