Kingcean-CSDN博客

翻译获取和设置大小（下）

我们已经拥有了获取和设置大小的通用方法了，接下来，我们还想提供一项服务，即绑定大小。先以宽度来说吧，如果我们需要把宽度，和窗口的宽度或另一 DOM 元素的宽度进行绑定，我们需要一个函数，允许传入这两个元素，外加一个可选的计算函数，方便自定义控制，然后这个我们即将实现的函数，还需要返回一个对象，里面包含 dispose 方法，用于随时解除这个绑定关系。

2016-07-05 11:25:15 336

在 HTML 的世界里，我们经常需要对文档或是其中的 DOM 的大小进行了解和控制，比如这些场景：获取或设置某个 DOM 的尺寸；获取窗口内容的尺寸；获取整个文档的尺寸；将某个 DOM 的宽度，与窗口内容或是其它 DOM 进行可定义的关联绑定；以及，将某个 DOM 的高度，与窗口内容或是其它 DOM 进行可定义的关联绑定。那么，如果说需要一套完整的工具，来支持这些场景，该如何是好呢？让我们一起来实现一套这样的服务吧。

2016-07-05 11:07:15 309

翻译 Web 前端本地化（四）

前面的三篇文章中，我们已经拥有了本地化所需的一些基本功能，但如果在无法精准匹配当前语言的情况下，如何寻找上一层级的语言包，则是获取语言文本的最重要的一环。为此，我们需要实现以下步骤。尝试获取预期语言的对应文本，有的话则返回之，没有的话继续。检查语言代号标识中是否包含短横线（-），有的话则继续，没有的话则返回从默认语言的语言包中检索的结果。找到最后一个短横线。删除该短横线后面的内容。返回第一

2016-07-05 09:42:52 842

翻译 Web 前端本地化（三）

前面两篇文章介绍了语言的设置和获取，以及语言包的加载与扩展。接下来，也是一个比较核心的东西，那就是如何去读取和设置某一具体的文本。获取本地的某一文本，首先当然是要获取该语言包。因此，我们需要一些辅助方法，来先行做到这一点。然后，我们可以实现 Local.specificString 成员方法，以来支持获取或设置某一特定语言的文本了。另外，也可以提供一个直接获取本地语言的某一文本的方法。

2016-07-04 19:12:09 773

翻译 Web 前端本地化（二）

好极了！我们要开始实现一项很重要的功能，即注册语言包。通常情况下，使用者会希望以一个 JSON 的形式，批量将语言文本集合以 Key-Value 对的形式扔进来，Key 即用来作为索引的标识，而 Value 则为对应语言的文本内容。所支持的不同语言各需要一个对应的 JSON 数据，理论上里面应当包含相同的内容。当然，由于我们计划支持类似于继承的模型，以及事后更改的能力，所以关于所有 JSON 字段

2016-07-04 17:44:05 497

翻译 Web 前端本地化（一）

有时候，我们需要设计和制作全球化的站点，这些站点有一个特点，那就是要适应许多地区和文化，其中包括，站点中的一些内容要根据实际使用情况进行本地化。许多情况下，后端会输出本地化之后的内容，甚至有时候，不同地区和语言的网站都是不同的。然而，如果在某一场景内，需要通过 Web 前端来进行已知内容的本地化控制，例如一些文本的设置，这时便需要通过 Web 前端本地化技术来实现。然而，这似乎并不是当前 JavaScript 版本本身所支持的内置功能，需要通过一些方式，来实现这一切。

2016-07-04 17:29:23 2866

翻译 JavaScript Promise 实现（三）

前面我们介绍了 JavaScript 中的 Promise 的简单使用方式和实现原理，但 Promise 除了作为可实例化的类来使用，其本身也包含了许多静态方法，用于处理与之相关的多任务事务。例如，利用 Promise.all 函数，可以传入多个 Promise 对象，当这些对象全部成功完成。那么，这些是如何实现的呢？我们继续以 Promise.all 函数为例，其本质是通过计数器等方式来记录结果

2016-07-04 16:18:33 664

翻译 JavaScript Promise 实现（二）

在前文中，我们已经搭建好了 Promise 的一个基本“外形”。现在，我们要开始具体实现这些待实现的代码了。由于在构造函数中，传入的主要业务逻辑函数中，需要传入两个参数，即成功和失败的触发器，因此，我们先实现这两个触发器。那么，成功触发器里需要做一些什么呢？

2016-07-04 16:05:01 567

翻译 JavaScript Promise 实现（一）

大家在进行前端开发的时候，想必都经常会接触到 Promise 对象类型，这在使用或基于 jQuery、Node.js 和 ES6 等的开发过程中会经常见到。Promise 对象通常被用来设定延迟和异步的计算，例如，当一个 AJAX 请求提出后，返回一个 Promise 对象，我们可以在这个对象里追增接下来要做到事情，而这些事情其实会等到这个 AJAX 请求结束后才会被执行，而非立即。所以，Prom

2016-07-04 14:30:06 1205

翻译网页元素的滑动事件（四）

嗯，我们还需要完成一些事情，才能搞定这个方法。目前，我们已经实现了触控手势和鼠标拖拽。现在我们来处理返回值。这将是一个包含能够注销滑动事件的方法的对象。至此，大功告成！我们来看一下最终代码。我们来测试一下。

2016-04-05 22:00:59 431

翻译网页元素的滑动事件（三）

除了触控手势支持，鼠标拖拽自然也不能少。针对鼠标拖拽的支持，我们还需要做一些准备工作。我们需要有一套方案来获得当前鼠标的位置，具体方案如下。先看看事件参数中是否包含了当前鼠标所处的坐标。如果有，那么好极了，我们直接用；否则继续下一步操作。获取当前页面滚动的位置，以及鼠标相对于页面可视区域的位置，然后相加。另外，作为一个与本文主题无关的改进，你也可以增加获得触控时的位置，可通过

2016-04-05 21:47:33 913

翻译网页元素的滑动事件（二）

我们已经准备好了以下基本代码，现在要开始实现触控手势支持。触控包括通过使用手指、笔和其它类型的触控输入方式进行输入。添加触控手势支持，我们需要先了解浏览器对此的事件处理机制。1.当开始进行触碰时，会产生一个触控开始的事件。2.当触控进行中时，会由一系列连续不断的触控移动的事件被触发。3.当离开触屏时，会产生一个触控结束的事件。

2016-04-05 21:23:31 442

翻译网页元素的滑动事件（一）

有时候，我们希望在网页中添加一些滑动事件，以改善最终用户的体验，例如，手势翻页、幻灯片、滑条等。在前端开发中，或许我们可以找到一些事件或对应的脚本库来实现。然而，如果希望实现一个全功能型的通用滑动支持事件机制，该如何是好呢？为了理清思路，我们先约定好我们的目标，如下列表所述。可以绑定到某一个 DOM 元素上。支持向上、下、左、右四个方向的翻动事件定制。可以设定触发上述事件的水平和垂直滑动时

2016-04-05 20:57:10 2442

翻译 JavaScript 实现暴击事件

在许多场景中，我们可能会遇到需要处理一种快速多次触发某事件，并处于某种阈值时，执行某一指定操作。例如，双击（即快速按鼠标左键两次）或更多击、连按键盘某键、某方法被执行数次等。其中，双击有对应的事件可以注册；然而，更多的情况是没有的类似事件方便我们注册使用的。那么，现在只能依靠我们勤劳的双手，来创造一个支持该功能的任务。那么如何实现呢？

2016-03-29 22:32:20 1749

翻译 JavaScript 实现延迟合并处理任务

我们经常会遇到一种情况，在带有智能提示的文本框，在输入内容时，会实时或准实时弹出提示下拉框，里面包含系统猜测你可能要输入的内容。当这些搜索建议来自服务器的时候，有时你会觉得这种智能提示对服务器的负载有点大，毕竟但用户输入完一定内容之前，会产生多余的流量和服务器运算，在此过程中所产生的结果甚至用户根本不会留意，因此还不如忽略掉这期间的过程。那么，如何做到这一点呢？延迟合并处理任务应运而生。

2016-03-24 22:53:13 1520 1

翻译解析 DOM 元素里的复杂属性值（下）

我们之前描述过如何从 DOM 元素的属性中，解析出复杂的值，并转成合适的对象。然而，我们还希望拥有一项更酷炫的技能，那就是提供一个方法，提供一个 DOM 和一些想要获取的属性的名称，然后输出一个对象，这个对象包含一些属性，这些属性刚好就是那个 DOM 上的属性，当 DOM 上的那些属性更新后，对象上的属性也可以支持更新。由此，我们可以拥有一个更面向前端友好的方式去动态获取某个 DOM 节点上所关心

2016-03-24 09:35:36 485

翻译解析 DOM 元素里的复杂属性值（上）

在设计一些复制页面应用时，特别是涉及到数据视图绑定或 Web Component 开发时，我们可能需要在 DOM 元素里设置一些，以存储一些信息。然而，这些存储在 DOM 属性里的值，可能形式较为复杂。一个常见的内置属性是 style，当然，浏览器会自动识别这个属性并作为样式的设定依据来进行处理。然而，如果我们也想自定义一些类似这样的 DOM 属性，我们通过常规的 DOM 访问所获取的值，却是一个

2016-03-23 22:25:59 442

前端开发 - Kingcean