- 博客(17)
- 收藏
- 关注
翻译 获取和设置大小(下)
我们已经拥有了获取和设置大小的通用方法了,接下来,我们还想提供一项服务,即绑定大小。先以宽度来说吧,如果我们需要把宽度,和窗口的宽度或另一 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
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人