Zend_View-Helpers-HeadScript.xml 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <sect3 id="zend.view.helpers.initial.headscript">
  2. <title>HeadScript 助手</title>
  3. <para>
  4. HTML <code>&lt;script&gt;</code> 元素用来提供内嵌的客户端脚本元素或链接到远程包含客户端脚本代码的资源。你可以用<code>HeadScript</code> 助手来管理它们。
  5. </para>
  6. <para>
  7. <code>HeadScript</code> 助手支持下列方法来设置和添加脚本:
  8. </para>
  9. <itemizedlist>
  10. <listitem><para><code>appendFile($src, $type = 'text/javascript',
  11. $attrs = array())</code></para></listitem>
  12. <listitem><para><code>offsetSetFile($index, $src, $type = 'text/javascript',
  13. $attrs = array())</code></para></listitem>
  14. <listitem><para><code>prependFile($src, $type = 'text/javascript',
  15. $attrs = array())</code></para></listitem>
  16. <listitem><para><code>setFile($src, $type = 'text/javascript',
  17. $attrs = array())</code></para></listitem>
  18. <listitem><para><code>appendScript($script, $type = 'text/javascript',
  19. $attrs = array())</code></para></listitem>
  20. <listitem><para><code>offsetSetScript($index, $script, $type = 'text/javascript',
  21. $attrs = array())</code></para></listitem>
  22. <listitem><para><code>prependScript($script, $type = 'text/javascript',
  23. $attrs = array())</code></para></listitem>
  24. <listitem><para><code>setScript($script, $type = 'text/javascript',
  25. $attrs = array())</code></para></listitem>
  26. </itemizedlist>
  27. <para>
  28. 对于所有<code>*File()</code>方法,<code>$src</code> 是要加载的脚本的远程位置,常常以 URL 或路径的形式表示。 对于所有<code>*Script()</code>方法,<code>$script</code>是客户端你想用于元素中的脚本。
  29. </para>
  30. <para>
  31. <code>HeadScript</code>也允许抓取脚本,然后放到其它地方,如果你想通过程序生成客户端脚本,这将很有用。下面的例子里有它的用法。
  32. </para>
  33. <para>
  34. 最后,你也可以用 <code>headScript()</code>方法 来快速地添加脚本元素,它的用法是: <code>headScript($mode = 'FILE', $spec, $placement = 'APPEND')</code>。<code>$mode</code> 是指链接一个文件还是一个脚本,可以是'FILE' 或 'SCRIPT' ,<code>$spec</code> 是链接的脚本文件或脚本代码。$placement必须为'APPEND', 'PREPEND', 或'SET'其中之一.
  35. </para>
  36. <para>
  37. <code>HeadScript</code> 覆盖 <code>append()</code>, <code>offsetSet()</code>,<code>prepend()</code> 和 <code>set()</code> 中的每一个来加强上述特殊方法的用法。在内部,它存储每个条目为 <code>stdClass</code> 令牌,它在稍后用 <code>itemToString()</code> 方法 serializes 。这允许在堆栈里检查条目,并可选地通过修改返回的对象来修改这些条目。
  38. </para>
  39. <para>
  40. The <code>HeadScript</code> 助手是 <link linkend="zend.view.helpers.initial.placeholder"> 占位符助手 </link> 的一个具体实现。
  41. </para>
  42. <note>
  43. <title>在HTML Body中使用 InlineScript </title>
  44. <para>
  45. 当包含脚本内嵌在 HTML <code>body</code>里时,应当使用<code>HeadScript</code> 的兄弟助手,<link linkend="zend.view.helpers.initial.inlinescript">InlineScript</link>。为了加速页面的加载,提高用户访问速度,特别是当使用第三方分析脚本(比如Google Analytics等流量统计系统的javascript文件 --Haohappy注),把脚本放在文档的最后是一个好的习惯。
  46. </para>
  47. </note>
  48. <note>
  49. <title> 任意的属性缺省关闭 (Disabled)</title>
  50. <para>
  51. 缺省地,<code>HeadScript</code> 将只解析(render)由 W3C 赋予的 <code>&lt;script&gt;</code> 属性,包括 'type'、 'charset'、 'defer'、 'language' 和 'src' 。 然而,一些 javascript 框架,如 <ulink url="http://www.dojotoolkit.org/">Dojo</ulink>,利用定制的属性来修改行为。为了允许这样的属性,可以通过 <code>setAllowArbitraryAttributes()</code> 方法来打开(enable)它们:
  52. </para>
  53. <programlisting role="php"><![CDATA[<?php
  54. $this->headScript()->setAllowArbitraryAttributes(true);
  55. ?>]]></programlisting>
  56. </note>
  57. <example id="zend.view.helpers.initial.headscript.basicusage">
  58. <title>HeadScript 助手基本用法 </title>
  59. <para>
  60. 在任何时候可以指定一个新的脚本。如上所述,可以链接到外部资源文件或脚本自己。
  61. </para>
  62. <programlisting role="php"><![CDATA[
  63. <?php // adding scripts
  64. $this->headScript()->appendFile('/js/prototype.js')
  65. ->appendScript($onloadScript);
  66. ?>
  67. ]]></programlisting>
  68. <para>
  69. 在客户端脚本编程中,顺序常常很重要,因为依赖的缘故,需要确保按特定的顺序来加载库,使用 append、 prepend 和 offsetSet 指令来帮助完成任务:
  70. </para>
  71. <programlisting role="php"><![CDATA[
  72. <?php // 按顺序放置脚本文件
  73. //设置偏移量来确保这个文件最后加载
  74. $this->headScript()->offsetSetScript(100, '/js/myfuncs.js');
  75. //使用scriptaculous效果文件,这时append动作使用索引101,接上行代码的索引
  76. $this->headScript()->appendScript('/js/scriptaculous.js');
  77. //但总是保证prototype文件首先加载
  78. $this->headScript()->prependScript('/js/prototype.js');
  79. ?>
  80. ]]></programlisting>
  81. <para>
  82. 当准备好输出所有脚本到布局脚本,简单地 echo 这个助手:
  83. </para>
  84. <programlisting role="php"><![CDATA[
  85. <?= $this->headScript() ?>
  86. ]]></programlisting>
  87. </example>
  88. <example id="zend.view.helpers.initial.headscript.capture">
  89. <title>Capturing Scripts Using the HeadScript Helper</title>
  90. <para>
  91. 有时候,需要“编程式”地生成客户端脚本。你可以使用字符串串联、heredoc或类似的技术(字符串串联即$string1.$string2这种形式,heredoc即使用&lt;&lt;&lt;操作符--Haohappy注),通常通过创建脚本和在PHP标签里做手脚会更容易些。<code>HeadScript</code> 可以实现这个功能,把一段JavaScript代码抓取到堆栈中暂存(道理同缓冲输出--Haohappy注):
  92. </para>
  93. <programlisting role="php"><![CDATA[
  94. <?php $this->headScript()->captureStart() ?>
  95. var action = '<?= $this->baseUrl ?>';
  96. $('foo_form').action = action;
  97. <?php $this->headScript()->captureEnd() ?>
  98. ]]></programlisting>
  99. <para>
  100. 下面是上例中的一些假设:
  101. </para>
  102. <itemizedlist>
  103. <listitem><para>
  104. 脚本将追加到堆栈。如果需要替换或者追加到堆栈顶部,那么需要分别把 'SET' 或 'PREPEND' 作为第一个参数传递给 <code>captureStart()</code> 。
  105. </para></listitem>
  106. <listitem><para>
  107. 脚本 MIME 类型假定为 'text/javascript',如果想指定一个不同的类型,需要把它作为第二个参数传递给 <code>captureStart()</code> 。
  108. </para></listitem>
  109. <listitem><para>
  110. 如果需要为 <code>&lt;script&gt;</code> 标签指定附加属性, 把它们放入数组作为第三个参数传递给 <code>captureStart()</code> 。
  111. </para></listitem>
  112. </itemizedlist>
  113. </example>
  114. </sect3>
  115. <!--
  116. vim:se ts=4 sw=4 et:
  117. -->