开发者社区> 异步社区> 正文

《扩展 jQuery》——第6章 函数插件 6.1定义插件

简介: 基于5.5.2节中描述的本地化方案,这个工具假定相关的JavaScript文件只由它们的语言或地区码来区别。当发生请求时,这个插件以语言和地区码的升序来加载这些文件,每个都覆盖前一个,这样能得到给定的语言和地区的最佳匹配结果。
+关注继续查看

本节书摘来自异步社区《扩展 jQuery》一书中的第6章,第6.1节,作者:【美】Keith Wood著,更多章节内容可以访问云栖社区“异步社区”公众号查看

第6章 函数插件

因为函数插件不操作元素集合,也通常不与UI组件打交道,所以它们非常容易实现。尽管开发者可以把这些函数定义为独立的JavaScript函数,但是把它们创建在jQuery的命名空间中可以得到很多好处。这样做可以降低全局命名空间的混乱,同时也降低了命名冲突的风险。它们通常也会使用jQuery本身,把它们包含在jQuery中能提供一致的使用方式。它们还旨在提供更易用的功能以及隐藏跨浏览器的差异(jQuery背后的核心原则)。

6.1 定义插件

作为函数插件的一个具体例子,开发者可以开发一个工具来协助自己网页的本地化。它根据特定的语言和地区,只加载必需的JavaScript文件来定制开发者的站点。

6.1.1 本地化插件
基于5.5.2节中描述的本地化方案,这个工具假定相关的JavaScript文件只由它们的语言或地区码来区别。当发生请求时,这个插件以语言和地区码的升序来加载这些文件,每个都覆盖前一个,这样能得到给定的语言和地区的最佳匹配结果。

例如,假定开发者有表6.1中的这些文件。每一个都代表不同的语言和地区组合,并设置一个公共变量(greeting)来显示消息。
screenshot

为了把自己的页面欢迎词本地化为一种特定语言,开发者可以使用这段代码:

screenshot

这个插件将顺序加载下列文件,从最少匹配到最佳匹配——greeting.js,greeting- en.js,greeting-en-AU.js——得到最匹配的澳大利亚英语:“G’day”。如果请求的语言是加拿大英语(en-CA),因为没有greeting-en-CA.js文件,链条将在第二个文件时停止(标准英语),它将产生欢迎语“Good day”。如果请求了科萨语(xh),会得到默认欢迎词:“Hello”。

当这个文件被加载和执行之后,就可以以通常的方式访问它们设置的那个变量。

如果调用localise()时没有指定任何语言,它就使用浏览器的默认语言。可以通过$.localise.default
Language容易地得到这个默认语言。

本地化不仅限于显示给最终用户的文本,还可以影响显示和外观的其他方面。图6.1展示了Datepicker的一些本地化。

除了文本的变化,这些版本之间还有一些不同:

screenshot

  • 选择年和月的下拉列表顺序不同;
  • 每个日历中一周的开始日不同:法语是周一,日语是周日,阿拉伯语是周六;
  • 阿拉伯语从右往左读,其他两个从左往右读。

现在读者应该知道这个插件的设计目的了,可以使用前一章中介绍的原则和框架来实现它。

6.1.2 框架代码
尽管上一章中介绍的插件框架大部分都不适用于函数插件,但是还是有几个应该保留的特性。开发者应该继续坚持“利用作用域隐藏实现细节”和“不要依赖$与jQuery的等同性”。解决方案与前面介绍的相同。

程序清单6.1 封装插件代码

screenshot

通过定义一个匿名函数来创建一个作用域1,立即调用它来创建它的作用域并执行它内部的代码2。通过定义一个参数$并且在调用时为其提供jQuery的引用,保证了它们在函数体内指向同一个对象。

这个插件同时也遵守了“在所有地方使用唯一的名字”和“把一切都放在jQuery对象中”原则。这里不必支持链式调用,因为不牵扯jQuery集合。当没有指定语言时使用浏览器的默认语言,这遵守了”使用合理的默认值”原则。

6.1.3 加载本地化文件
程序清单6.2展示的localise函数实现了插件的主要功能:根据请求的语言和地区,加载一个或多个本地化文件。

程序清单6.2 声明插件函数

screenshot

通过把这个函数声明为一个属性,把它直接附加到jQuery中1。然后就可以在开发者的页面上通过 jQuery 对象来访问这个函数。不需要为它选择任何操作元素,因为它应用于整个页面。

这个函数通过多个参数来改变它的行为。除了第一个参数,其余都是可选的。如果没有设置,则使用一个合适的默认值。使用它们的类型来确定它们所代表的含义。程序清单6.3展示了如何处理这些参数。

开发者必须指定一个(string)或一组(string)包名,以供这个函数使用。因为其余的参数都是可选的,代码就必须能区分它们。第二个参数是一个可选的语言代码(string)或者一组设置(object),它的每个属性都是一个独立的参数。为了使后续的处理更容易,所有单独的参数值都被收集到一个设置对象中,就像最初就提供了这个对象一样。如果第二个参数不是这些类型,这些参数被顺序移动1并继续处理下一个。

其余的参数包括一个用来指定是否需要重新加载基础本地化文件的可选标志(boolean)2,一个(string)或一组(string)可选的路径用来指定从哪里找到本地化文件3,一个可选的超时时间(number)4,一个可选的异步标志(boolean)5,以及一个可选的加载完成时的回调函数。缺失的参数被设置为默认值。

程序清单6.3 参数的默认值和标准化

screenshot

根据参数中提供的设置对象(覆盖所有默认值)或者单个参数值来创建一个累积设置对象6。检查path是一个还是多个路径,然后把它转换为后面需要的格式7。把后面Ajax需要用到的一些选项收集起来以便于后续使用8。

当参数处理完成之后,这个插件接下来依次处理所有指定的包。

程序清单6.4 加载本地化文件

screenshot

开发者定义了一个内部函数1来处理单个包。每个都加载为基础文件(如果设置了加载基础)2,然后加上2字符的语言代码3,最后再加上一个5字符的语言和地区代码(如果有)4。这些文件被放在一个队列中以便顺序读取。

使用jQuery内置的ajax函数来加载单个文件5,从队列中的第一个文件开始,指定返回内容是“script”并以这个类型执行。因为默认使用同步加载(为了保证后续的代码可以依赖返回的内容),所以有一个超时时间。或者可以在调用localise时指定一个额外的参数来使用异步加载,同时指定一个在加载完成时调用的回调函数6。如果队列中还有其他文件,则递归调用处理下一个7。

当单个包和其中文件的处理流程定义好之后,找到需要的语言和地区8,然后依次加载每个包9。

为了实现这个插件所宣扬的功能,这里定义了另一个函数来提供地方化的版本:
screenshot

本书的网站上可以下载到这个插件的完整代码。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JavaScript 各版本介绍和特性
JavaScript 1.1 Netscape Navigator 3.0在1996年8月19发布,是支持JavaScript的浏览器的第二个主要的版本。
6 0
R可视乎|交互式图形库 Plotly
之前公众号介绍过的绘图工具:如何快速画出美观的图形?,图表这么多,该用哪种展示我的数据呢?使用的语言都为 python,对于一些 R 语言爱好者就不是那么方便啦,今天小编为大家介绍一个支持 R 语言的开源图形库—— Plotly,赶紧收藏起来,迅速 get 绘制美观实用的图形技能吧~
4 0
Markdown 规范
Rules This document contains a description of all rules, what they are checking for, as well as an examples of documents that break the rule and corrected versions of the examples. Any rule whose heading is struck through is deprecated, but still provided for backward-compatibility. <a name="md001">
5 0
markdown 替代品 asciidoc 介绍
AsciiDoc,它的设计初衷就是为了解决写书规模的问题,并且是 O’Reilly 的在线出版平台 Atlas 的推荐语言。经过一番学习,我觉得 Asciidoc 确实很适合电子书制作。 AsciiDoc 相比 Markdown 支持更多的格式,包括而不限于: • 文档属性,设置作者、版本信息等。 • 语法高亮。 • 表格。 • Include 功能,将大文档拆分几个文件。 • 自定义块语法,可扩展性。
6 0
Javascript 字符串与文本格式化
字符串 JavaScript中的 String 类型用于表示文本型的数据. 它是由无符号整数值(16bit)作为元素而组成的集合. 字符串中的每个元素在字符串中占据一个位置. 第一个元素的index值是0, 下一个元素的index值是1, 以此类推. 字符串的长度就是字符串中所含的元素个数.你可以通过String字面值或者String对象两种方式创建一个字符串。
3 0
D3 不到20行代码就能实现世界地图的绘制
每到农历年末,相信很多小伙伴和本作者一样,都忍不住会去看江苏卫视的一档脑力比拼节目《最强大脑》,尽管上一季最强大脑喷点确实很多,但依旧没有减弱"追剧"的热情。今年最强大脑(第5季)的赛制有很大的变化,挑战的人数从百人大战,到最强30脑,再到现从第三场的一对一PK,确实与以往有了很大的不同。此外,今年更加强调了选手在生活中的光环,例如本文要引用的一场比赛就是最近一期来自清华的孙勇与北京的陈泽坤的一场以地图投影为背景的比赛,孙勇就是顶着2016安徽省高考理科状元的光环来的。今年没了叨叨魏,节目的流程显得自然了很多。好了,不扯了,来、来、来来来!我们开始说本文要讲的主题--地图。
4 0
JS Array(数组)简单入门
数组是什么? 数组通常被描述为“像列表一样的对象”; 简单来说,数组是一个包含了多个值的对象。数组对象可以存储在变量中,并且能用和其他任何类型的值完全相同的方式处理,区别在于我们可以单独访问列表中的每个值,并使用列表执行一些有用和高效的操作,如循环 - 它对数组中的每个元素都执行相同的操作。 创建数组
3 0
API接口性能优化总结
在web开发过程中,经常会遇到接口RT高的情况,除了通过监控事后优化的方式,我们还需要掌握一些常用的手段,避免写出慢的接口。从前端发起调用到后端一般经过网关层、应用层、存储层。每一层都可以优化,本篇文章主要是应用层优化。
7 0
从零开始学设计模式(十四):中介者模式(Mediator Pattern)
中介者模式(Mediator Pattern)又被称为调停者模式。它定义了一个中介对象来封装一系列对象之间的交互关系。中介者使各个对象之间不需要显式地相互引用,从而使耦合性降低,而且可以独立地改变它们之间的交互行为。它是一种对象行为型模式。
3 0
中文分词工具 MiNLP-Tokenizer
中文分词工具 MiNLP-Tokenizer
4 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
12049
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载