代码库强迫症 - CLOCD

引言

当一位在与微软有劳务合同的公司工作的人，并且正在为你面试一个职位时，问道“有哪些 JavaScript 类型？”，然后在你回答“布尔型”（Boolean）时茫然地盯着你，你就知道麻烦来了！这种麻烦不会通过展示你开发的十几个甚至更多的网站的作品集来解决，尽管 Google 的一项调查在《纽约时报》上被引用，该调查显示教育背景与工作表现之间没有相关性，除了刚毕业但没有实际工作经验的大学生。而且，告诉他根据 Google 人力资源副总裁的说法，“……我们发现脑筋急转弯是完全浪费时间！”可能也无济于事。

你是否也注意到，如今招聘网页开发人员的职位列表包含一个通常很长的代码库列表，要求你必须有相关经验？就好像知道特定的库代码就能使程序员无需做出良好的设计决策，无需了解底层语言的编程，也无需熟悉现有网站使用的独特代码一样。

正如问应聘者无用的问题无法找到优秀候选人一样，盲目使用这些库也与使网站更具响应性的目标背道而驰。依赖大型“核心”文件库的特定代码，在库加载之前无法在浏览器中运行，因此网站响应用户需要更多时间，这可能会导致用户在阅读任何内容之前就放弃网站。

背景

在这里，我将展示如何用几百或几千字节的代码实现与需要数十万字节核心代码文件的库相同的结果。例如，angular.min.js 大约是 110 Kb，jquery-1.7.min.js 大约是 94 Kb，这两个文件都经过最小化处理，并且在编写任何实际的网站代码之前，这些代码量必须包含在你的应用程序中才能使用这些库。

如果你曾经想知道所谓的“AJAX 库”实际上做什么，或者 MVC 到底是什么，那么实现 AJAX 功能只需要不到 1 Kb 的 Javascript 代码，再加上一个用于将 AJAX 调用返回的结果放置到网站代码相应位置的网页——参见下面的 <iFrame>。

几十年来，MVC 模型已被现代的“Web 2.0”单页应用程序（SPA）模型所取代。这使得实现高度交互、响应迅速和自适应的网站设计和代码成为可能，而无需任何库。

Web 2.0 SPA 模型

Web 2.0 模型通过采用 SPA 网站来实现交互性、响应性和最大的可用性，这些网站是用 HTML、CSS 和 Javascript 构建的，在客户端浏览器中运行，而不是人为地将功能分离为模型、视图和控制器。目的是使用户界面（UI）中的用户体验（UX）尽可能用户友好（UF？ :)）。

在 Web 2.0 SPA 模型中，需要访问服务器端资源的函数在服务器上运行，例如数据库 SQL 查询，而所有其他内容都在客户端浏览器中运行。在客户端的“index.html”页面中，HTML 代码形成一个骨架，内容被插入其中，常用项目的内​​容预先加载在主页面中，而其他不常查看的内容部分则根据用户在网站上的导航按需使用 AJAX 加载。这些加载操作在后台异步进行，因此用户在加载的同时可以继续使用网站。

AJAX 加载的内容可以在服务器上以任何所需的格式创建，从数据库 SQL 查询的结果集，到手工编写的 HTML 文本，再到内容专家使用内容管理系统（CMS）创建的内容，这些内容专家可能对 HTML 了解很少或完全不了解。任何类型的网页都可以通过 AJAX 调用——HTML、PHP、C#，或者任何需要的——并且内容可以在客户端浏览器中使用 Javascript 进行适当的操纵，例如过滤或排序返回的数据集中的结果，以及/或以与接收时不同的格式显示信息，也许将 JSON 数据转换为可显示的 HTML 格式，如上所示，或者提供标准 HTML 页面元素中不存在的其他功能。

向 HTML 元素添加额外功能的例子可能是，在客户端使用 Javascript 修改标准的 HTML <table> 标签，以提供带有固定页眉的可滚动表格。这种新的表格功能在用户上下滚动数据行时，能够保持页眉可见，从而无需在大型表格中查看数十、数百或数千行数据来确定某个单元格属于哪个列。这种以及其他小部件可以在 www.web2ria.com/widgets.zip 的模块化开源库中找到，该库包含独立的、不需要核心库文件的小部件。这些 Web 2.0 风格的小部件的构建，在 Javascript 脚本（以前是“控制器”）和网页上的 HTML 和 CSS 显示（以前是“视图”）之间没有功能分离。

小型、轻量级的 SPA 网站 www.web2ria.com 伴随我的 Web 2.0 网站开发书籍，总大小约为 104 Kb，包括所有 HTML、CSS 和 Javascript，但不包括图形文件。有关带有固定页眉的可滚动表格的示例，请访问 web2ria.com 网站的“Widgets”选项卡下的“Table Funcs”子菜单项，或参见下文，其中默认的可滚动表格带有固定页眉，显示从通过 AJAX 加载的 CSV 文件中获取的数据。此默认表格还可以通过 Javascript 在浏览器中本地排序，只需单击任何页眉一次进行升序排列，再次进行降序排列，而无需运行服务器端 SQL 查询。

现在尝试选择页面左侧下拉菜单中的一个数据库。然后，会显示其他字段，允许在浏览器上针对所选数据库和表构建和运行 SQL 查询，以及针对所选数据库和表的默认 SQL 查询的结果集。

选择“MySQL world”数据库会显示默认查询在 4000 行数据库表中的前 1000 行结果，也以带有固定页眉的可滚动 HTML 表格显示。另一个示例是在选择“MySQL genome”数据库和“geolpNode”表时，可以看到一个包含超过 164,000 行数据的数据库表中的前 1000 行数据。这些默认查询限制一次返回 1000 行数据，以减少数据加载时间，但使用常规宽带互联网连接，可以在超时发生之前处理“geolpNode”表上的 10,000 行查询。在“End record”字段中输入 10000，在“Select Field”下拉菜单中选择“*”，单击“Run Query”按钮，然后等待大约 75 秒……

无论内容是什么，网站骨架都必须以跨浏览器兼容的方式编写，以便在 Internet 上当前使用的所有常用浏览器（Microsoft Edge 和 IE（包括旧版本）、Chrome、Firefox、Opera 和 Safari）中都能运行并显示相同。最简单的方法是使用嵌套的 <div> 页面元素来包含网页上的所有内容——无需所谓的跨浏览器兼容库。

此外，不要使用“眼球糖果”功能，例如，导致文本在加载和显示后在页面上滑动或跳跃。这只会迫使用户去寻找他们之前正在阅读的文本，而这种干扰可能会导致他们放弃有问题的网站。这些类型的函数只会延迟用户与页面进行交互，并且在库代码大小和页面加载时间方面会付出高昂的代价，而没有任何有用的功能。如果滑动的/跳跃的文本遮盖了页面上的信息和/或字段，或者将视口大小减小到信箱尺寸，那就更糟糕了——是的，在我写下这段文字时，我正在看一个商业网页，它做了所有这些可怕的事情，而且几乎无法使用！

对“面向对象”、“MVC”和/或“MVVM”网页设计方法的痴迷已经过时。使用这些方法是适得其反的，因为 MVC 设计与现代网页中使用的编码语言和方法的功能相悖。代码库也是如此，大型核心文件会极大地膨胀页面，才能实现任何功能，导致页面加载缓慢。如前所述，angular.min.js 需要大约 110 Kb，jquery-1.7.min.js 需要大约 94 Kb，在实际编写任何网站代码之前，这两者所需的约 100 Kb 的代码量可以更好地用于 HTML、CSS 和 Javascript 代码来构建一个完整的、大小合适的网站，例如前面提到的 web2ria.com 104 Kb 网站。

至于“面向对象”（OO），它已经成为另一个流行词，最多意味着代码应该被编写成可重用的，但用于构建网页的核心语言（HTML、CSS 和 Javascript）不是面向对象的。然而，正如 Douglas Crockford（《Javascript: The Good Parts》的作者）所说，Javascript 中的一切都是对象，如果你愿意，可以在 Javascript 中模拟 OO 功能。

Bootstrap 库，旨在使页面“自适应”以在智能手机等小屏幕设备上使用，是另一个具有文件大小问题的代码库的例子。他们的 9 Kb 演示页面需要 344 Kb 的支持文件，但与 Bootstrap 相同的功能可以通过 Javascript 在一个 8 Kb 的 **总** 文件大小页面（包括所有 HTML、CSS 和 Javascript）中提供，如下面的屏幕截图所示。请参阅 www.philpearl.us/BootstrapDemo.html 和 www.philpearl.us/adaptive/，并在下面的屏幕截图下查看“Make This Responsive” <iFrame>。

尝试将“BootstrapDemo”和“Adaptive”页面加载到智能手机中，并在桌面浏览器中查看它们，并调整浏览器窗口的宽度变窄和变宽，您也可以在下面的 <iFrame> 中看到自适应性。使用其垂直滚动条上下滚动 <iFrame>，以查看不同浏览器窗口宽度下的格式变化，并请注意，在智能手机上，“viewport”元标签“<meta name='viewport' content='width=device-width'>”允许以其折叠的、垂直方向的页面模式显示全尺寸页面视图，而不是以水平方向的模式显示整个页面的微小视图，并缩小以适应小（移动）屏幕宽度。

SPA 网站上小型、响应式、交互式的、主 index.html 网页应包含最少量的组件，以供用户查看初始的特定于网站的信息、徽标、菜单和其他页面元素，这些元素在 index.html 页面的所有不同“视图”中都是通用的，并允许用户在网站中导航。Javascript 用于在用户请求时即时隐藏和显示页面部分/元素，例如通过单击菜单选项，并且默认选项已预先加载。

如果部分已预先加载，则显示将是即时的。如果它们需要通过 AJAX 在后台异步加载，则延迟应该很小且可接受，因为只需要从服务器加载小的部分页面。

当然，初始加载的网站元素应尽可能小且数量最少，尤其是图形图像，它们可能很大，并且应该使用最紧凑的格式显示。例如，.jpg 屏幕截图的尺寸可能只有相同图像以 .png 格式保存尺寸的 1/3，在屏幕上显示时具有相同的可读性，如下面的屏幕截图所示（为了阅读文本，您可能需要最大化浏览器窗口以全屏宽度查看屏幕截图）。

代码库的目的是提供小型、可重用、预先编写的代码块，这些代码块需要最少的时间和精力才能集成到网站中，从而避免在用户访问生产网站时因加载大型核心库代码文件而降低可用性。如果需要使用多个库来集成网站中所有必需的功能，例如 Bootstrap 对 JQuery 的依赖（参见上面的屏幕截图），代码大小问题就会加剧，更不用说如果通过无线连接不理想的移动设备访问网站了。

遵循 Douglas Crockford 的理念，您应该使用一种跨浏览器安全、跨操作系统安全的 Javascript 子集，以及 HTML 和 CSS，它们在所有常用浏览器中都能正常工作。并且应该在编写代码时进行测试驱动开发（TDD），以确保在所有浏览器中的正确功能，然后唯一剩余的问题应该是跨浏览器在页面上的元素定位，对于这些类型的检查，需要手动、视觉测试来确保正确性。

结论

有数百个 Javascript 库（www.javascripting.com 列出了超过 1000 个），因此不可能知道它们的所有组合和排列，公司既不应该期望也不应该希望您预先了解他们网站上的专有代码，无论代码部分是来自免费提供的库，还是专门为特定网站定制编写的。所以，如果你看到求职广告说“……必须了解面向对象的 MVC 库、JQuery、Bootstrap……”，不要被它们欺骗。

它们已经采用了过时、臃肿的库，并且可能对用户将接受其解决方案的限制程度，以及对你作为程序员试图让这些不尽如人意的选择奏效的期望不切实际。如果你的潜在未来雇主开始吹嘘 MVC 或其他过于宽泛的首字母缩略词，告诉他/她重要的是网站设计，以及用于编码网站的编程语言提供的功能，而不是用来通过过度简化构建网站的复杂性来将方钉塞入圆孔的标签。关键是，将 300 Kb - 400 Kb 的库文件用于解决问题，例如移动设备的适应性，或实现 AJAX，并不是唯一的解决方法，更不用说最佳方法了——试试写一千字节的 Javascript 代码吧。

当一家公司聘请新程序员时，必须预期并欢迎学习过程，以便他/她能够了解正在处理的网站的独特代码。学习期使程序员能够熟悉他们之前未曾工作过的任何网站的结构、设计和编码，包括代码库的使用方式，无论是内部还是第三方库。如果你被期望“知道库代码”，并且你必须成为他人代码库强迫症的促成者，你就患上了 CLOCD！这完全违背了使用代码库的初衷。