| 1 |
lars |
1 |
<com:TContent ID="body" >
|
|
|
2 |
|
|
|
3 |
<h1>TClientScriptLoader</h1>
|
|
|
4 |
|
|
|
5 |
<com:DocLink ClassPath="System.Web.UI.WebControls.TClientScriptLoader" />
|
|
|
6 |
|
|
|
7 |
<com:SinceVersion Version="3.1b" />
|
|
|
8 |
|
|
|
9 |
<p class="block-content">
|
|
|
10 |
<tt>TClientScriptLoader</tt> mempublikasikan koleksi file javascript sebagai assets. Contohnya, anggap kita mempunyai direktori bernama "<tt>mylib</tt>" dalam direktori <tt>protected/pages</tt> pada aplikasi kita.</p>
|
|
|
11 |
<com:TTextHighlighter Language="prado" CssClass="source block-content">
|
|
|
12 |
assets/
|
|
|
13 |
protected/
|
|
|
14 |
pages/
|
|
|
15 |
mylib/
|
|
|
16 |
file1.js
|
|
|
17 |
file2.js
|
|
|
18 |
file3.js
|
|
|
19 |
file4.js
|
|
|
20 |
packages.php
|
|
|
21 |
</com:TTextHighlighter>
|
|
|
22 |
|
|
|
23 |
<p class="block-content">Properti <tt>PackagePath</tt> bisa berupa direktori asset yang sudah ada atau path namespace ke direktori yang berisi file javascript. Sebagai contoh, untuk mempublikasikan file javascript dalam direktori <tt>mylib</tt>, kita dapat menetapkan <tt>PackagePath</tt> sebagai berikut.
|
|
|
24 |
Tag pertama <tt>TClientScriptLoader</tt> tergantung pada tag template asset dan menganggap bahwa template halaman berisi turunan tag <tt>TClientScriptLoader</tt> ada dalam direktori <tt>protected/pages</tt>.
|
|
|
25 |
Tag kedua <tt>TClientScriptLoader</tt> menggunakan notasi namespace ke untuk menetapkan path.
|
|
|
26 |
</p>
|
|
|
27 |
|
|
|
28 |
<com:TTextHighlighter Language="prado" CssClass="source block-content">
|
|
|
29 |
<com:TClientScriptLoader PackagePath=<%~ mylib %> />
|
|
|
30 |
<com:TClientScriptLoader PackagePath="Application.pages.mylib" />
|
|
|
31 |
</com:TTextHighlighter>
|
|
|
32 |
|
|
|
33 |
<p class="block-content">
|
|
|
34 |
Ketika file dalam <tt>PackagePath</tt> dipublikasikan sebagai asset, pengambil naskah file php "<tt>clientscripts.php</tt>" secara otomatis di-copiy ke direktori asset tersebut. Pengambil naskah, menggabungkan file javascript dan bertindak sebagai gzip jika memungkinkan.
|
|
|
35 |
</p>
|
|
|
36 |
<h2>Mengelompokan File Javascript</h2>
|
|
|
37 |
<p class="block-content">
|
|
|
38 |
Naskah yang dibolehkan dan naskah ketergantungan bisa dikelompokan dengan menggunakan file "<tt>packages.php</tt>" dengan format berikut. "<tt>packages.php</tt>" ini adalah opsional, jika tidak ada nama file tanpa ekstensi ".js" yang dipakai. "<tt>packages.php</tt>" harus berada dalam direktori yang diberikan oleh <tt>PackagePath</tt>.
|
|
|
39 |
</p>
|
|
|
40 |
|
|
|
41 |
<com:TTextHighlighter Language="php" CssClass="source block-content">
|
|
|
42 |
<?php
|
|
|
43 |
$packages = array(
|
|
|
44 |
'package1' => array('file1.js', 'file2.js'),
|
|
|
45 |
'package2' => array('file3.js', 'file4.js'));
|
|
|
46 |
|
|
|
47 |
$deps = array(
|
|
|
48 |
'package1' => array('package1'),
|
|
|
49 |
'package2' => array('package1', 'package2')); //package2 memerlukan package1 pertama.
|
|
|
50 |
|
|
|
51 |
return array($packages,$deps); //harus mengembalikan $packages dan $deps dalam array ?>
|
|
|
52 |
</com:TTextHighlighter>
|
|
|
53 |
|
|
|
54 |
<p class="block-content">Elemen pertama dari array yang dihasilkan oleh <tt>packages.php</tt> harus berisi sebuah array file javascripts relatif ke <tt>packages.php</tt> yang mengaitkan pengelompokan tertentu. Sebagai contoh, dalam <tt>packages.php</tt> di atas, pengelompokan '<tt>package1</tt>' menggabungkan dua file javascript, yaitu '<tt>file1.js</tt>'
|
|
|
55 |
dan '<tt>file2.js</tt>'.
|
|
|
56 |
</p>
|
|
|
57 |
|
|
|
58 |
<p class="block-content">Elemen kedua dari array yang dihasilkan oleh <tt>packages.php</tt> harus berisi array pengelompokan ketergantungan yang diurut dalam cara di mana grup harus digabungkan. Sebagai contoh, mengelompokan
|
|
|
59 |
'<tt>package1</tt>' hanya bergantung pada file pengelompokan'<tt>package1</tt>'
|
|
|
60 |
(misalnya '<tt>file1.js</tt>' dan '<tt>file2.js</tt>'). Sementara <tt>package2</tt>' tergantung pada pepngelompokan '<tt>package1</tt>' dam '<tt>package2</tt>'. Yakni '<tt>package2</tt>' akan menggabung dengan urutan
|
|
|
61 |
'<tt>file1.js</tt>', '<tt>file2.js</tt>', '<tt>file3.js</tt>', dan '<tt>file4.js</tt>'.
|
|
|
62 |
</p>
|
|
|
63 |
|
|
|
64 |
<h2>Mengambil Paket Javascript</h2>
|
|
|
65 |
|
|
|
66 |
<p class="block-content">Untuk mengambil file javascript atau paket tertentu, setel properti <tt>PackageScripts</tt> dengan nilai '<tt>package1</tt>' guna mengambil naskah '<tt>package1</tt>'. Maksimum 25 paket dipisahkan dengan koma yang dibolehkan. Ketergantungan paket secara otomatis dipecahkan oleh file php pengambil naskah.
|
|
|
67 |
</p>
|
|
|
68 |
|
|
|
69 |
<com:TTextHighlighter Language="prado" CssClass="source block-content">
|
|
|
70 |
<com:TClientScriptLoader PackagePath=<%~ mylib %> PackageScripts="package2" />
|
|
|
71 |
<script type="text/javascript">
|
|
|
72 |
//kode javascript memanfaatkan kode javascript yg diambil ke dalam 'package2' di atas </script>
|
|
|
73 |
</com:TTextHighlighter>
|
|
|
74 |
|
|
|
75 |
<p>Setiap <tt><com:TClientScriptLoader></tt> membuat elemen HTML <tt><script></tt> untuk mengambil file javascript yang diperlukan.</p>
|
|
|
76 |
|
|
|
77 |
<h2>Menghapus Komentar Javascript</h2>
|
|
|
78 |
<p class="block-content">Properti <tt>DebugMode</tt> bila false menghapus komentar dan spasi dari file javascript yang dipublikasikan. Jika properti
|
|
|
79 |
<tt>DebugMode</tt> tidak disetel, mode debug ditentukan dari
|
|
|
80 |
<a href="?page=Advanced.Performance">mode aplikasi</a>.
|
|
|
81 |
</p>
|
|
|
82 |
<div class="note"><b class="note">Catatan:</b>
|
|
|
83 |
Jika <tt>DebugMode</tt> adalah false baik secara eksplisit ataupun ketika mode aplikasi adalah non-debug, maka header cache juga dikirimkan untuk memberitahu
|
|
|
84 |
browser dan proxy untuk melakukan cache file.
|
|
|
85 |
Lebih lanjut, pasca proses (komentar dihapus dan di-zip) disimpan dalam direktori asset untuk permintaan berikutnya. Yaitu mode non-debug, naskah di-cache dalam direktori asset sampai ia dihapus.
|
|
|
86 |
</div>
|
|
|
87 |
|
|
|
88 |
<h2>Memadatkan Javascript dengan GZip</h2>
|
|
|
89 |
<p class="block-content">
|
|
|
90 |
Properti <tt>EnableGzip</tt> (standarnya true) membolehkan javascripts yang dipublikasikan untuk dilayani sebagai zipped jika browser dan server php mengijinkannya.
|
|
|
91 |
</p>
|
|
|
92 |
<div class="last-modified">$Id: ClientScript.page 1650 2007-01-24 06:55:32Z wei $</div>
|
|
|
93 |
|
|
|
94 |
</com:TContent>
|