帮酷LOGO
0 0 评论
  • 显示原文与译文双语对照的内容
文章标签:Javascript库  队列  消息队列  数据  JAVA  Message  Javascript  
JavaScript library for working with dataLayer message queues.

  • 源代码名称:data-layer-helper
  • 源代码网址:http://www.github.com/google/data-layer-helper
  • data-layer-helper源代码文档
  • data-layer-helper源代码下载
  • Git URL:
    git://www.github.com/google/data-layer-helper.git
  • Git Clone代码到本地:
    git clone http://www.github.com/google/data-layer-helper
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/google/data-layer-helper
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
  • 数据层 helper-库

    这个库提供处理传递到dataLayer队列的消息的能力。

    什么是dataLayer队列?

    一个dataLayer队列只是一个位于网页上的JavaScript array。

    <script> dataLayer = [];</script>

    页面作者可以在队列中附加消息,以便发出关于页面及其状态的信息。

    <script>dataLayer.push({ title:"Migratory patterns of ducks", category:"Science", author:"Bradley Wogulis" });</script>

    这些消息只是包含键/值对的层次结构的JavaScript对象。 它们可以是关于页面内容。访问者信息或者页面中发生事件的数据的元数据。 系统允许分析库和标签管理系统以标准方式访问这些数据,因此页面作者可以避免使用一组专有的。重复的api。

    • 它提供了一个通用的。定义良好的系统。
    • 它不会减慢页面呈现速度。
    • 它不会污染全局的JavaScript命名空间。
    • 它不需要页面作者学习不同的,每个新工具的API。
    • 它不要求页面作者多次公开相同的数据。
    • 它允许页面作者轻松添加。删除或者更改供应商。

    我们为什么需要图书馆?

    dataLayer系统使页面作者非常容易。 语法很简单,不需要额外的代码来加载。 但是这个系统让那些想使用数据的厂商和工具变得更加困难了。 图书馆就是这样来的。

    这个项目提供了监听dataLayer消息和读取所有先前消息设置的键/值对的能力。 工具可以由提到 上面的工具/供应商使用,或者由需要读取它的发出的数据的页面作者来使用。

    要使用这个库,你需要把它放到页面上。 你可以通过在页面上承载一个复制并将它的从页面中编译到你自己的JavaScript库来。 在页面上,你可以像这样创建一个新的helper 对象:

    var helper =newDataLayerHelper(dataLayer);

    这里 helper 对象将在给定的dataLayer上侦听新消息。 每条新消息将被合并到 helper"抽象数据模型"的 这里内部模型对象保存在 helper 处理的消息上设置的所有键的最新值。

    你可以使用 helper 方法的get() 从数据模型中检索值:

    helper.get('category'); // Returns"Science".

    如上所述,传递到的消息可以是层次的。 例如页作者可能按下以下消息,该消息的数据深度为:

    dataLayer.push({
     one: {
     two: {
     three:4 }
     }
    });

    使用 helper,你可以使用点表示法来检索嵌套值:

    helper.get('one.two.three'); // Returns 4.helper.get('one.two'); // Returns {three: 4}.

    抽象数据模型

    正如 上面 所提到的,抽象数据模型是内部表示,它为dataLayer消息设置的所有键保持最新值。 这意味着,当每个消息被推到dataLayer时,必须更新抽象数据模型。 helper 库使用定义良好的过程执行这里操作。

    在处理每个消息时,它的键/值对将被添加到抽象数据模型。 如果模型中当前不存在键,则这里操作很简单。 这对简单地添加到模型对象中。 但是对于关键冲突,我们必须指定如何覆盖和/或者合并值。

    将键/值对合并到抽象模型时,有两种可能的操作:覆盖现有值或者递归地将新值合并到现有值上。 所采取的操作将取决于两个值的类型。 为此,我们定义了三种类型的值:

    • JavaScript数组
    • "Plain对象"
    • 其他事项

    希望JavaScript数组是自解释的。 "Plain对象是通过对象文字符号( 比如 ) 创建的。 {one: 2 }) 或者通过"新建对象"。 空值,日期,regexp,Windows,DOM元素,等等 不是"普通"。 那些属于"其他一切"的类别,以及字符串。数字。布尔值。未定义的等等。

    一旦新的和现有的值类型已经分类,我们可以使用下表描述对该键/值对的操作:

    现有值新值合并操作
    ArrayArray递归合并
    Array普通对象覆盖现有值
    Array其它覆盖现有值
    普通对象Array覆盖现有值
    普通对象普通对象递归合并
    普通对象其它覆盖现有值
    其它Array覆盖现有值
    其它普通对象覆盖现有值
    其它其它覆盖现有值

    覆盖现有值

    当合并操作为"覆盖exsting值"时,操作的结果非常简单。 现有的值将被完全丢弃,新值将在抽象数据模型中取代它。 下表提供了一些示例:

    现有值覆盖的新值结果
    [1, 2, 3 ]'hello''hello'
    {ducks:'quack'}[1, 2, 3 ][1, 2, 3 ]
    {ducks:'quack'}'hello''hello'
    'hello'[1, 2, 3 ][1, 2, 3 ]
    'hello'{ducks:'quack'}{ducks:'quack'}
    'hello'4242

    递归合并值

    当合并操作为"递归合并"时,操作的结果是遍历新值中的每个属性,并决定如何将该子键/值复制到。 如果现有值上不存在键,则将新值简单地分配给抽象模型。 下面的示例演示了这一点:

    现有值覆盖的新值结果
    {one: 1,3: 3 }{two: 2 }{one: 1,3: 3,2: 2 }
    {one: 1,3: 3 }{three: 4 }{one: 1,3: 4 }
    {one: {two: 3 }}{one: {four: 5 }}{one: {two: 3,4: 5 }}
    {one: {two: 3 }}{two: 4 }{one: {two: 3 }, 2: 4 }
    [ ]['hello' ]['hello' ]
    [1 ][undefined, 2 ][1, 2 ]
    [ 1,{two: 3 }][ 未定义,{two: 4,六个:8 }][ 1,{two: 4,六:8 }]

    元命令

    单独使用 上面 方法,抽象模型上的一些操作有些麻烦。 例如,将项目追加到现有 array的末尾需要了解现有 array的长度,然后才能将 array 合并到现有值。 为了使这些情况更容易,我们提供了一组替代的语法,用于更新抽象数据模型中的值。

    第一个语法允许你调用现有类型所支持的任何方法。 例如,如果抽象模型中的现有值是 array,则可以调用多种可以调用的api ( 比如 )。 推,弹出,连接,移动,无偏移,等等。 要调用这里语法,可以将"命令 array"推到dataLayer而不是普通的消息对象上。

    dataLayer.push(['abc.push', 4, 5, 6]);

    命令 array 是普通的JavaScript array,其中第一个元素是字符串。 字符串包含要更新的值的键,后面是点(。),后面是要在值上调用的方法的NAME。 在 上面 示例中,要更新的键是'abc',要调用的方法是'推'方法。 字符串后面可以跟零个或者多个参数,这些参数将传递给调用的方法。

    在现有值上不存在给定的方法,或者调用抛出异常,则将忽略赋值,并将警告消息记录到浏览器控制台的开发人员。

    本机方法

    浏览器有几十个有用的api,如果不是数百个。 可以使用命令 array 语法调用现有值所支持的任何方法。 以下是一些其他示例:

    现有密钥:abc
    现有值:[1, 2, 3 ]
    命令 array:dataLayer.push( ['abc.push', yf_num_ea2a8888_yf_num, yf_num_ea2q8888_yf_num, yf_num_ea3a8888_yf_num ] )
    结果:[1, 2, 3, 4, 5, 6 ]

    在下面的示例中,不提供任何参数:

    现有密钥:abc
    现有值:[1, 2, 3 ]
    命令 array:dataLayer.push( ['abc.pop'] )
    结果:[1, 2 ]

    在下面的示例中,更新( bbb )的值是嵌套的inside,它是顶级对象( aaa ):

    现有密钥:aaa.bbb
    现有值:[1, 2, 3 ]
    命令 array:dataLayer.push( ['aaa.bbb.push', yf_num_ea2a8888_yf_num ] )
    结果:[1, 2, 3, 4 ]

    下面的示例演示了对日期对象的操作。 请记住,所有类型都受支持,而不仅仅是数组:

    现有密钥:时间
    现有值:Fri: 23:: 22 GMT-0800 ( PST )
    命令 array:dataLayer.push( ['time.setYear', yf_num_eazdamju_yf_num ] )
    结果:Fri: 23:: 22 GMT-0800 ( PST )

    注意因为命令数组是异步处理的,所以不能用这些方法调用的返回值来完成任何操作。 这给我们带来了在抽象数据模型中更新值的第二个语法。

    自定义方法

    至此,我们已经看到了对象( 邮件) 可以被推送到 dataLayer,以及数组的( 命令数组)。 将函数推送到dataLayer上也可以更新抽象数据模型,但使用自定义代码。 这里技术增加了能够处理从函数中所做的任何本机方法调用返回值的好处。

    在处理函数时,它将在抽象数据模型的上下文中执行。 "这个"的值将是一个表示当前抽象数据模型的接口。 这里interfact将提供两个 api: get(key) 和设置( 键,值)。下面的示例演示如何使用这些api来更新抽象数据模型中的值。

    现有密钥:时间
    现有值:Fri: 23:: 22 GMT-0800 ( PST )
    自定义函数:
    dataLayer.push(function() {
     this.get('time').setMonth(0); 
    })
    结果:Fri 20: 23: 22: GMT-0800 ( PST )

    下面的示例演示如何更新嵌套值:

    现有密钥:aaa.bbb.ccc
    现有值:[1, 2, 3 ]
    自定义函数:
    dataLayer.push(function() {
     var ccc = this.get('aaa.bbb.ccc');
     ccc.push(ccc.pop() * 2);
    })
    结果:[1, 2, 6 ]

    下面的示例演示如何覆盖值:

    现有密钥:abc
    现有值:[1, 2, 3 ]
    自定义函数:
    dataLayer.push(function() {
     this.set('abc', {xyz: this.get('abc')});
    })
    结果:{xyz: [1, 2, 3 ] }

    正在侦听消息

    创建DataLayerHelper对象时,只要将消息推到给定的dataLayer上,就可以指定要调用的回调函数。 这允许你在更新dataLayer时立即通知你的代码,这是消息队列方法的一个关键优势。

    functionlistener(model, message) {
     // Message has been pushed. // The helper has merged it onto the model.// Now use the message and the updated model to do something.}var helper =newDataLayerHelper(dataLayer, listener);

    处理过去

    异步或者延迟加载到页面上的工具会感谢你也可以选择过去的dataLayer处理消息。 这可以通过在DataLayerHelper构造函数中传递 true 作为第三个参数来完成。

    functionlistener(model, message) {
     // Message has been pushed. // The helper has merged it onto the model.// Now use the message and the updated model to do something.}var helper =newDataLayerHelper(dataLayer, listener, true);

    使用这里选项意味着你的侦听器回调将被调用一次,每一条消息都被推送到给定的dataLayer。 在每次调用回调时,模型将在消息的时候表示抽象模型。

    摘要

    我们已经看到 上面 为页面作者提供了一个简单的API。 他们仅仅定义一个叫做dataLayer的array,然后把消息推到它上面。

    有三种类型的消息:

    • 标准消息( 对象)
    • 本机方法调用( 命令数组)
    • 自定义方法调用( 函数)

    这个 helper 库提供了使用这些消息的工具和供应商。 它自动监听新消息并将它的合并到它的抽象数据模型。 可以使用 get() API查询模型,也可以使用回调函数获取消息通知。

    现在,我们强烈建议你阅读代码并浏览测试以了解库的工作原理以及如何使用它。

    插件构建和测试

    一些先决条件:

    通过运行以下命令克隆项目 repo的副本:

    git clone --recursive git://github.com/google/data-layer-helper.git

    如果你以前没有安装过 grunt-cli软件包。 这应该作为全局安装完成:

    npm install -g grunt-cli

    输入data-layer-helper目录并安装 node 依赖项,此时不需要指定全局安装,请执行这里操作:

    cd data-layer-helper
    npm install

    输入 third_party/关闭linter目录并安装关闭 linter:

    cd third_party/closure-linter
    python setup.py install

    确保已经安装 grunt。 从项目的root 目录中运行:

    grunt -version

    这应该是一切。你可以尝试运行构建,运行 linter,编译/缩小JavaScript并运行测试。

    grunt

    构建版本( data-layer-helper。js ) 将在 dist/ 子目录中。

    许可证

    版权所有 2012 Google公司保留所有权利。

    在Apache许可以证下许可以证版本 2.0 ("许可以证") ;你可以能不使用这里文件,除了符合许可以证。 你可以获得许可证的副本在*

    
     http://www.apache.org/licenses/LICENSE-2.0
    
    
    
    

    在规定的法律或者书面许可下,在许可条款下分发的软件在不保证任何种类的担保或者条件的前提下分发,或者明示或者隐含。 查看许可协议下特定语言的许可权限和限制的许可证。



    文章标签:JAVA  数据  Javascript  Message  Javascript库  队列  消息队列  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语