Electronic Joint Business

Solution for E-Business

dom

编写 Google Chrome 浏览器扩展 — CodeProject Reputation Watcher

本文将探讨如何利用 jQuery 和 jQuery UI 来构建 Chrome 浏览器扩展,并将之集成到 Chrome 中。文中讨论的扩展会读取 CodeProject 的会员信息,并查看荣誉值,它会将这些信息存储在本地,日后再查询 CodeProject 时会将这些变化呈现到表格中。该扩展还可以读取并显示会员的荣誉值走势图。1

背景
编写 Chrome 扩展所需的文档可以在 Google Chrome Externsion 上找到。用到的 javascript 类库可参见jQueryjQuery UI

Chrome 浏览器扩展
Chrome 扩展本质上是一些嵌入 JavaScript 和 CSS 的 HTML 文件。为了让 Chrome 知道该如何处理这些文件并呈现给用户,必须在项目的根目录中的清单文件(manifest)中加以规定。该清单文件的文件名固定为:“manifest.json”。

我们先来看看本范例的清单文件:

{
  "manifest_version": 2,
  "name": "CodeProject Reputation Watcher",
  "short_name": "CPRepWatcher",
  "version": "2.0",
  "content_security_policy": "script-src ‘self’ https://ssl.google-analytics.com ‘unsafe-eval’; object-src ‘self’ ",
  "description": "Extension to retrieve a CodeProject accounts reputation points.",
  "icons": {
      "48":"images/bob48.png",
      "128":"images/bob128.png"
  },
  "browser_action": {
    "default_icon": "images/bob.png",
    "default_popup": "cprepwatch.html"
  },
  "options_page": "options.html",
  "permissions": [
    "http://*.codeproject.com/"
  ]
}

开始的一些基本属性比如:“name”、 “version” 和 “description” 含义相当直观无需解释。“icons” 属性定义了扩展可以使用的多个图标文件,安装扩展后,这些图标会显示在 Chrome 扩展页及工具栏上。

>>> 阅读全文

 

, , , , ,

IE 10 开发者指南之文档对象模型

Windows 开发者预览版中的 IE10 或者 Metro 风格应用包含了许多新的文档对象模型的特性,包括:

  • 高级点击测试API — Advanced Hit Testing APIs
  • CSSOM 浮点值支持 — CSSOMFloating Point Value Support
  • 媒体查询监听器 — Media Query Listeners
  • 触摸和姿态 DOM 事件 — Pointer and Gesture DOM Events
  • 注意:这些特性在 IE10 或使用 HTML 的 Metro 风格应用都一样能工作。

    高级点击测试API
    IE10 和 Metro 风格应用中的文档对象模型 (DOM)都支持 elementFromPoint 方法,该方法返回某个视区(viewport)中位于坐标(X,Y)处的元素。这个方法对单一元素仍然有效,比如说点击页面上的某个图片。但是,对于游戏、图形编辑器之类使用多个图层的应用,点击屏幕,是无法获得相交于该点的所有东西的。

    IE10 引入了 msElementsFromPoint 和 msElementsFromRect 方法,这两个方法可以获得所有相交于指定的(X,Y)坐标或者矩形区域的所有元素,并返回节点列表。

    msElementsFromPoint 方法
    msElementsFromPoint 方法以某点的坐标 (X,Y)为参数,返回所有相交于该点的元素节点集合。. 该列表按 Z 顺序排序,这意味着第一个元素就是最顶层的元素。

    >>> 阅读全文

     

    , , , ,

    在 Javascript 中用 Promise 进行异步编程

    对 Javascript 这类单线程的语言来说,避免同步执行对创建能即时响应高效执行的应用来说是十分必要的。Windows Library for Javascript (即 WinJS) 提供了一种称为 promise 的机制,大大简化了异步编程。

    JavaScript 用异步编程的必然
    JavaScript 是单线程的语言。这意味着调用耗时的过程时,其他所有过程的执行会被阻塞,直到该过程结束。假设有个类库用于查询某个 web service,我们这样来调用:

    var result = myWebService.get("http://www.contoso.com");

    在结果返回前的这段时间,其所在环境内的所有执行都被暂停了。这意味着UI界面失去了响应,动画效果暂停了,应用中的其他代码也无法被执行。

    解决这个问题的方法是尽可能的避免同步执行。通常我们会遵循一些基本的模式。这些模式可以归纳外将某项功能的执行推迟到未来某个时点。基于什么样的模式取决于使用何种 API。例如,处理 HTML DOM 的时候,大多数的元素都有一些事件。订阅这些事件允许以异步的形式执行代码。假如上面的 web service 库遵循这样的模式,代码看起来是这样的:

    myWebService.addEventListener(‘completed’, function(result) { /* do something */});
    myWebService.get("http://www.contoso.com");

    现在在这段 javascript 里调用 get 方法就不会阻塞执行了。(这里假定从 Web Service 获得结果的实际工作发生在 Javascript runtime 之外)。实际上,这儿只是初始化了该工作,当它结束时,“结束”事件被触发,处理器函数则被调用。当你有多个函数需要在费时操作结束时才被运行时,这个模式就十分有用。

    >>> 阅读全文

     

    , , , ,

    在C/C++中使用LIBXML2

    文章评价:
    C/C++ 标准库中并没有提供任何操作 XML 的方法,因此必须借助第三方函数库,您可以使用免费的诸如 Microsoft MSXML SDK 的商业版软件,也可以使用开源实现 expat 和 libxml2,在xmlbench上罗列了一些常见的 XML 类库及其性能比较,可以供您参考选择。这里我们主要介绍 libxml2,libxml2 是一个 C 语言的 XML 程序库,它可以包括 Windows, Linux, Mac 等等多种操作系统上使用,不但支持 DOM 和 SAX2 等等标准 XML 的解析方法,还从 C# 中借鉴了 XmlTextReader 这种简洁易懂的 pull 解析方式,此外 libxml2 支持 XPATH 查询,并且部分支持 XSLT 转换,在许多著名函数库中都有 libxml2 的身影,比如 Glib 等等。

    libxml 的官方地址是XmlSoft,您可以在上面下载最新的源代码。接下来,我们先将源代码编译成平台所需的二进制文件。

    编译 libxml2
    在 Linux 或者 Windows 上使用 GCC 的读者可以参考用MinGW64编译Readline GetText等类库一文。这儿我们介绍一下 VC++ 的编译方法。Libxml2 依赖于 iconv 和 zlib 库。libiconv 库是一个字符编码转换工具,它提供了一个iconv()的函数,以实现一个字符编码到另一个字符编码的转换。分别下栽这些源代码,包括Zlib 1.2.5, libiconv 1.11.1 和 libxml2 2.7.8。

    首先编译 libiconv,需要用 admin 权限打开 VC++ 的命令提示窗口,然后运行:

    nmake -f Makefile.msvc NO_NLS=1 MFLAGS=-MT

    如果需要成共享库的话,可以在参数中的添加上”DLL=1”。编译结束之后,运行 nmake -f Makefile.msvc install,默认会在 C 盘创建 usr 目录,保存得到的头文件、库文件和二进制文件。

    >>> 阅读全文

     

    , , , , , ,

    JSON简介

    文章评价:
    虽然 XML 已在不少应用程序中大显身手,但它并不是十全十美的,特别是遇到 AJAX 应用的时候,XMLHttpRequest 会检查返回数据的 MIME 类型,如果是 text/xml 类型,XMLHttpRequest 就会运行 XML Parser 来解析返回的文档,并在内存中构建出对应的 DOM 树,之后,你可以用 JavaScript 标准的 DOM 方法来操作 DOM 树。由于众所周知 DOM 的诟病,这显然不是有效率的方法。另外一个问题是,如果你想使用 JavaScript 对象而不是直接用 XM L数据的话,你还得自己遍历整个 DOM 树来创建相应对象。

    于是 JSON 出现在我们面前。

    JSON 提供了一种更适合 AJAX 应用的标准数据交换格式。JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。

    XML 和 JSON 都利用结构化来标记数据。我们将通过一个地址簿的例子来展示它们之间的不同。

    该地址簿用XML如下表示:

    >>> 阅读全文

     

    , , , ,

    MongoDB 开发手册 (二) 连接串和mongo操作台概述

    数据库连接
    MongoDB是数据库服务器,它可以在前台或者后台运行并等待用户连接。因此,当你启动MongoDB的时候,你会看到这样的字句:

    ~/$ ./mongod
    #
    # some logging output
    #
    Tue Mar  9 11:15:43 waiting for connections on port 27017
    Tue Mar  9 11:15:43 web admin interface listening on port 28017

    这时屏幕会暂停输出,但并未死机,它会在27017端口上侦听用户的连接。一旦用户连接上数据库并开始发送命令,它又会再次记录它所做的一切。任何一款MongoDB驱动或者Mongo操作台都可以用来连接数据库。

    不能通过在浏览器输入”http://localhost:27017″来连接MongoDB,数据库不能通过27017端口上的HTTP协议来存取。

    标准连接串格式
    这儿介绍的URI schema不一定为所有的驱动程序所支持,你可以参考相关的驱动程序文档以获知该驱动支持多少种标准连接URI。所有的驱动都支持某种指定连接格式的替代方式,如果该格式不被支持。

    mongodb://[username:password@]host1[:port1][,host2[:port2],…[,hostN[:portN]]][/database]
    • mongodb://是必选的前缀,表明该字串是标准的连接格式
    • username:password@是可选项,如果指定了该项,驱动程序在连接数据库服务器之后,尝试用它连接数据库。
    • host1是URI中唯一的必选项,表明所连接的服务器地址。
    • :portX是可选项,未指定的话默认为27017。
    • /database是要登录的数据库名称,只有指定了username:password@之后,该项才有意义,如果未指定,默认将连接到”admin”数据库。

    你可以在URI中指定多个主机连以便连接到同步复制对或同步复制集(replica pairs/sets). 下面是一些例子:

    >>> 阅读全文

     

    , , , ,