如何处理现有的JavaScript代码库？ （由于动态打字） [英] How do I work with an existing Javascript codebase? (Because of dynamic typing)

问题描述

问题标题可能听起来太笼统，但让我解释一下。我一直使用Java（至少用于>小型项目），它具有明确的键入。因此，当必须使用现有代码时，您可以看到很多关于定义事物的位置，还可以通过查看将参数的类型传递给函数来轻松查看文档。例如： void eat（Pear p）{...} 其中Pear是类型。在这里我只是检查梨的定义和瞧。

但是，Javascript没有明确的类型，例如： eat：function（pear）{...} 我不知道什么样的对象被传递到函数中，甚至更糟糕的是，我不知道一个很好的方法来找到它。我不知道我应该检查哪个文件，以查看WHO调用此函数，或者传入什么内容，因此我也找不到文档（是的，现有.js文件中有文档）。

我希望我的问题在stackoverflow的范围内，我绝对不会对Javascript或某事发表任何错误。我的问题只是：你如何开始使用现有的JavaScript代码库（太大了，只能读取所有的东西），试图找出调用层次结构和函数传递？

解决方案

仅在过去几年中，为构建大型JavaScript应用程序已经建立了常见的模式/实践。我想有两个答案：

1。如果应用程序使用公认的应用程序框架构建并遵循以下约定：

• 花点时间阅读并了解文档。开始使用概念等


• 做一个教程，您可以使用模块，路由，视图等将简单的东西放在一起。


• 浏览项目结构并检查使用的第三方库及其用途。


• 从应用程序的入口点开始。通过代码读/调试，直到你说等一下，这个值来自哪里，然后继续检查代码和研究，直到你明白这一点。然后移动到下一个未知数。通常会有第三方库，它有助于浏览GitHub等文档/源代码。

2。如果没有应用程序框架：

• 如果它是一个jQuery事件处理程序的hodge-podge，并且显示非常紧密地耦合到DOM，你可能会被拧紧：）


• 许多JS开发人员使用模块模式的一些变体来定义应用程序组件 - http://www.bnbatelygood.com/JavaScript-Module-Pattern-In-Depth.html - 了解这种方法并认识到这一点

一些一般提示

• 熟练使用Chrome开发工具。


• 不要害怕撕开应用程序，开始将其重新放在一起。显然，将应用程序分解成组件可以使其更易消化，并清楚每一个位。即使您不打算持久进行这些更改，也可以了解有关应用程序的问题，以及在进行增强时可能遇到的问题。


• 有时JS中的封装和范围限制可以使检查元素和隔离运行代码变得尴尬。当我试图通过执行一个较大的应用程序的一个小组件来了解代码时，我有时会创建一个全局变量（例如window.app）。然后，当我要在Chrome控制台中的模块上执行功能时，我将该模块附加到此全局变量（例如window.app.authService）。在生产代码中拥有这些全局变量是不好的建议 - 如果要对代码执行断言，或者为了以后记录行为，请使用像qUnit这样的库编写一些测试。

The question title may sound too general, but let me explain. I've always used Java (at least for >small sized projects), which has explicit typing. Therefore when having to work with existing code you can see a lot about where things are defined, and also see documentation easily by looking what Types of parameters are passed to a function. Eg: void eat(Pear p){...} where Pear is the type. Here I would just check where Pear is defined and voila.

However with Javascript there's no explicit type, e.g: eat: function(pear){...} and I'd have no idea what sort of object is passed into the function, and worse even, I don't know a good way to find that out. I have no idea in which file I should check to see WHO calls this function, or WHAT is passed in, and also I can't find the documentation therefore (Yes there is documentation inside existing .js files).

I hope my question is inside stackoverflow's scope, and i'm definately not trying to say anything bad about Javascript or something. My question is just: How do you get started in existing Javascript codebases (that is too big to just read everything of) trying to find out call hierarchies and function passings?

解决方案

It's only in the last few years that common patterns/practices have been established for composing large JavaScript applications. I suppose there are two answers:

1. If the application is built using a recognised application framework and follows the conventions:

• Take time to read and understand the documentation.. getting started, concepts etc
• Do a tutorial where you put together something simple using modules, routing, views etc
• Explore the project structure and check out the third-party libraries used and their purposes.
• Start with the entry point to the application. Read/debug through the code until a point where you say "wait a minute.. where did that value come from", then keep inspecting the code and researching until you understand that bit. Then move onto the next unknown. Often there will be third-party libraries and it helps to explore the docs/source code on GitHub etc

2. If there is no application framework:

• If it's a hodge-podge of jQuery event handlers and appears very tightly coupled to the DOM, you may be screwed :)
• Many JS developers use some variant of the module pattern to define application components - http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html - understanding this approach and recognising it will make the codebase more readable.

Some general tips

• Get proficient with using Chrome Dev Tools.
• Don't be afraid to rip apart the application and start putting it back together piece by piece. Obviously breaking an application into components makes it more digestible and makes clear what each bit does. Even if you don't plan to persist these changes, it can be a useful exercise for learning about an application and problems you may encounter later on when making enhancements.
• Sometimes the encapsulation and scoping in JS can make it awkward to inspect elements and run code in isolation. When I'm trying to understand code by executing a small component of a larger app, I sometimes create a global variable (E.g. "window.app"). Then when I want to execute functions on a module in Chrome console, I just attach the module to this global variable (e.g. "window.app.authService"). It's bad advice to have these global variables in production code - if you want to do assertions on the code, or to document behaviour for later, write some tests using a library like qUnit.

这篇关于如何处理现有的JavaScript代码库？ （由于动态打字）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！