你们中的许多人都知道，Google 提供了一个 API，您可以通过调用一个简单的函数来加载特定的模块/库：

我目前正在开发自己的代码库，我想轻松有效地在我的网站中分发这些代码库，我想不出比上述方法更好的方法。

但是，我不太确定为此编写代码的最佳方法是什么。显然我的库将是一个对象，所以将从这样的开始（我想，如果我错了，请纠正我）：

上述方法是正确的方法吗？然后如何从单独的文件中加载模块？

一点背景

我在 javascript/jQuery 中编写了一个方法，该方法循环遍历字段并根据它们是什么来设置它们，即下拉列表、自动完成、文本等...

这样做的原因是我专门设置了输入和文本区域的样式，并且一旦页面加载，它们必须在 javascript 中初始化。此类中的方法循环遍历页面上的每个字段并根据其内容设置事件。

目前我通过给字段容器一个类来检测每个字段是什么，jQuery 读取这个类并相应地设置字段，如下所示：

jQuery 看起来像这样：

上面的大部分代码都可以忽略，但它应该让你知道我在做什么......

问题

我最近注意到 HTML5 属性data-*，*可以是任何东西。我的问题是：

1. 我应该使用 HTML5data-*属性而不是类吗？
2. 有比data-*属性或类更好的方法吗？
3. 属性虽然data-*是HTML5，但只要DOCTYPE定义正确，是否兼容早期的浏览器？

一点背景...

我有一个名为的对象SineMacula，其中包含许多用于创建表单元素并使这些表单元素在页面上执行操作的方法。

首先，当页面加载时，setFields()会调用一个方法，该方法会遍历页面上的所有字段并适当地设置它们，即自动完成、复选框等...

的代码setFields()如下所示：

上面的大部分代码都可以忽略，但我已经插入了所有代码，这样你就可以准确地看到我在做什么。

我的问题

我有很多SineMacula对象的方法，例如setCheckbox()，setDropdown()...

我想知道的是，我是否应该将这些方法本身视为对象？

所以我的代码应该是这样的：

在调用方法之前注意new关键字。dropdown()

这是一种更好的工作方法吗？会使用更少的内存等吗？

解释

首先，我可能混淆了 jQueryconstructor和init函数，如果是这样，请忽略我下面的术语。

我有一个名为 的对象SineMacula，目前它只是充当方法库的命名空间。

但是，我将要为对象编写一些方法SineMacula，我想将其用作 jQuery 扩展。

这里出现了复杂性，而不是使用 jQuery 别名$，我想使用该SineMacula对象来运行 jQuery 构造。如此有效地，我的代码将如下所示：

代替：

但是，如果不是因为我的下一点，我认为这不会太难：

我不想给整个 jQuery 起别名，我只是想让 jQuery 构造函数在我调用时运行SineMacula('something')，然后将任何方法应用于SineMacula('something')

我的问题

问这个问题的最好方法是通过说明。以下可能吗？

但是，我不想这样做（完全别名 jQuery）：

我知道这可能是不可能的，但觉得值得一问:-)

更新 1

为了清楚起见，这是我目前用于该SineMacula对象的一些代码：

该SineMacula对象在每个页面的顶部启动，如下所示：

---

更新 2 - 忽略以上

是的，我发现很难解释我想要实现的目标。下面我会尽我所能分步完成，忽略上面的内容。

第1步

我有一个名为 的类SineMacula，它包含许多可以做各种事情的方法。把它想象成一个像 jQuery 一样的库。

这是这样定义的：

第2步

该类SineMacula在每个页面的顶部使用以下代码启动：

第 3 步

然后，该对象通过调用例如加载该SineMacula对象所需的任何库和扩展。这会将任何扩展动态加载到网页中。SineMaculasm.load({package:'all'})

第4步

扩展定义如下：

第 5 步 - 这是事情变得更复杂的地方

到目前为止，该SineMacula对象一直充当诸如doSomething()etc之类的方法的命名空间。

我现在想定义的方法不仅仅是作为一个函数。

在我本来可以调用的地方SineMacula.doSomething()，我现在希望能够调用SineMacula('#test').doSomething()where与 jQuery 中SineMacula('#test')的行为相同$('#test')。

所以我可以像这样访问我的功能：

与您可以调用的方式相同：

因此，如果将参数传递给SineMacula对象，则使用 jQuery选择器函数对其进行处理，并作为主题传递给被调用的方法。

例如：

总结...

SineMacula('selector')就像提供了$('selector')一样'selector'，这被传递给子方法。但SineMacula不是 jQuery 的扩展。我不想SineMacula成为一个别名$。

我当前的代码

我已经开始编写一个 API，它使用 PHP 加载、缩小和返回 javascript 文件到一个文件中。script这是通过从HMTL 中的标记指向 PHP 文件来实现的，如下所示：

此jsapi.php页面处理 javascript 文件并输出缩小的 javascript，其标题为：

我的问题

这是加载 javascript 文件的坏方法吗？通过简单地指向属性中的文件来单独加载javascript文件会更快更可靠吗？.jssrc

如果您希望查看我的完整 API 代码，请查看此. 提到的链接还详细解释了我在做什么以及为什么。

问题和我的问题

我目前正在尝试优化我网站上返回大量缩小 javascript 的页面。

通过优化，我的意思是加快速度:-)

我试图加快此页面速度的方法之一是减少浏览器发送到服务器的标头。24 小时前，我不认为这是可能的，但是，从那时起，我发现了一个可以做到这一点的页面，并想知道如何以及是否值得进一步调查。

我的页面位于https://libraries.sinemaculammviii.com/

我要比较的页面是https://www.google.com/jsapi

我已经使用http://tools.pingdom.com测试了这两个页面的速度，其中清楚显示的一件事是缺少Google 页面发送的请求标头

他们怎么做到的？我应该这样做吗？

有人对我如何加快此页面的速度有任何其他建议吗？

我目前正在使用：

1. gzip 压缩页面
2. JSPacker 缩小 javascript
3. 我将应用缓存标头（我还没有这样做）
4. 虽然这可能不会有所作为，因为页面不是静态的，但我已经通过 CloudFlare CDN 路由了我的站点

解决方案的证据

如果您比较以下链接中的标头（显示在展开的结果中），您可以清楚地看到 Google 页面没有发送请求标头：

我的页面

谷歌页面

更新 1

我想我可能已经想出了第一步，或者至少是可能的第一步。Apache是​​否有可能只是删除标题？

更新 2

解释

我有一个传递参数的函数options。此参数可以是对象、数组或字符串。根据参数是什么，将确定要做什么。

---

更新：我忘了提到，options必须始终以相同结构的对象结束（换句话说，它必须始终设置默认值）。

我只想定义一次默认值，所以像你们中的一些人建议的那样使用过程 if 语句不是我的首选解决方案，但如果有必要我会使用它。

我不想这样做（如果可能的话）：

例子

如果参数是一个对象，则扩展它以设置默认值，如下所示：

如果参数是字符串，则将 设置options.bar为等于字符串并扩展默认值（类似这样）：

如果参数是数组，则将 设置options.baz为等于数组，并扩展默认值（类似这样）：

问题

如此有效，我希望能够以任何格式提供参数，并且该函数将从options提供的内容构建相同的对象。如果没有提供这些值，那么它们将使用它们的默认值。

抱歉，这太不清楚了，很难解释。

附加示例

我（jQuery）可以演示的另一种潜在方法是查看animate() 之类的函数。请注意，您可以提供：

或者

这个额外的例子并不完全是我希望实现的，但它是正确的

简要说明

这并不像听起来那么基本，所以在您阅读并理解我想要做的事情之前，请不要跳到回答:-)。

我有一个名为的对象SineMacula，其中包含一些像这样的基本函数（ready暂时忽略该函数）：

该load()函数通过将相关的脚本标签附加到页面的 来简单地加载页面的所有相关插件/库head。

加载页面中的所有脚本都作为调用函数的回调运行run。这样可以确保两者jQuery和SineMacula都传递给插件。

问题

这就是问题所在，因为库正在加载到SineMacula对象中，无法检测它们是否已加载。

例如，如果其中一个库包含一个名为 的函数插件setDate()，我运行：

这不一定有效，因为该setDate()函数可能尚未加载到SineMacula对象中，因此它将返回“未捕获的 TypeError ...”。

任何人都可以建议对SineMacula.ready()功能进行良好的调整以检测库是否存在？

请不要对jQuery.load()功能提出建议，我很清楚。

我不希望解决方案是函数的回调load()，除非绝对必要。

我希望这是有道理的，如果不让我知道，我会发布更多信息。想让它尽可能简短。

提前致谢

更新

忘了提到我在这里有一个测试页面，您可以在其中看到我遇到的错误并更好地了解我在做什么:-)

这可能是不可能的，但值得一问。我正在将脚本标签动态插入head我的页面部分。目前我正在使用document.write你们中的许多人会皱眉头，但它确实做得很好。

但是，出于此处概述的原因，我想找到document.write.

因此，我需要一个可以执行此操作的函数：

任何人都可以建议任何使用 jQuery 或纯 javascript 将在页面上插入元素的东西，但也符合这些要求：

1. 将元素放置在调用函数的位置。例如，脚本标签被放置在调用它的脚本标签之后
2. 脚本同步加载，因此会阻塞其他脚本，直到它完成

谷歌用他们的Google.load()方法做到这一点，他们使用 document.write 吗？肯定不是...

简要说明

我目前正在构建一个包含三列的画廊，每列包含的图像都具有相同的宽度，但高度可以不同。

glob()列的图像从目录中收集并使用 PHP函数放入数组中。这是简单的部分...

画廊的外观示例：

问题

由于这些图像被动态加载并放置到列中，因此列的高度可能会有很大差异。

例如，如果将两张肖像照片放在第 1 列中，而将两张风景照片放在第 2 列中，那么这些列将非常不均匀，如下所示：

列的高度不太可能匹配，但我希望它们与给定的图像尽可能接近，因此想形成一个算法来查看检索到的图像并将它们放在列中返回尽可能接近高度的三列。

因此，例如，脚本将通过重新排序图像并像这样放置它们来纠正上述问题：

如果我有正确的算法，我可以写这个，我只是想不出最好的步骤来做到这一点。任何人都可以建议任何步骤吗？

可能的解决方案

我想到的一种方法（我认为会有更好的方法，因为我认为这是有缺陷的）：

1. 将所有图像的高度相加，然后除以列数 (3)。这将为我们提供目标高度
2. 将图像分配到列数组，当它超过列的高度时，溢出到下一列。
3. 将任何剩余的图像放入第一列，然后是第二列等...

提前致谢