標題其實是想說 elementA.onclick = func; 這樣一回事
之前都已經看慣&習慣這個寫法倒也沒有想太多
直到今天寫了一個要輸入參數的function
function specialSetting(obj){
.... //original code
}
然後就直覺寫上了 elementA.onclick = specialSetting(elementA);
畢竟一開始學寫JavaScript都是 <div ... onClick="specialSetting(this);" > 這樣開始
然後執行時就發現函式一開始就馬上被呼叫一次...
仔細想想才覺得應該是圓括號的關係
猜測 JavaScript 的執行方式是 elementA.onclick = specialSetting(elementA);
先執行一次呼叫 specialSetting(obj); 之後才綁定事件
function在JavaScript中是物件
elementA.onclick = specialSetting; 表明事件綁了個函式物件，而不是要立刻執行函式
那如果要傳入參數呢? 改用匿名函式就好了
elementA.onclick = functionn(){ specialSetting(elementA); };
回想要傳入事件作參數給函式的作法是
elementA.onclick = functionn(evt){ func(); };
從這裡其實就看得出端倪了
2012年11月13日 星期二
JavaScript 常用事件整理
常見事件整理：
事件 觸發時機
onabort 圖片下載被中斷時
onblur 當游標離開元件時
onchange 當使用者更改欄位內容時
onclick 滑鼠單擊物件時
ondblclick 滑鼠雙擊物件時
onDragDrop 物件被拉入瀏灠器視窗時
onerror 載入文件或圖片發生錯誤時
onfocus 當游標定位在元件上時
onkeydown 當鍵盤的按鍵被壓下時
onkeypress 當鍵盤的按鍵被壓下再放開時
onkeyup 當鍵盤的按鍵被放開時
onload 當網頁或圖片載入完成時
onmousedown 滑鼠按鍵被壓下時
onmousemove 滑鼠指標移動時
onmouseout 滑鼠指標離開物件時
onmouseover 滑鼠指標移到物件上時
onmouseup 滑鼠按鍵被放開時
onreset 當reset按鍵被點擊時
onresize 當視窗或框架被改變大小時
onselect 當文字被選取時
onsubmit 當sumbit按鍵被點擊時
onunload 當使用者離開畫面時
事件 觸發時機
onabort 圖片下載被中斷時
onblur 當游標離開元件時
onchange 當使用者更改欄位內容時
onclick 滑鼠單擊物件時
ondblclick 滑鼠雙擊物件時
onDragDrop 物件被拉入瀏灠器視窗時
onerror 載入文件或圖片發生錯誤時
onfocus 當游標定位在元件上時
onkeydown 當鍵盤的按鍵被壓下時
onkeypress 當鍵盤的按鍵被壓下再放開時
onkeyup 當鍵盤的按鍵被放開時
onload 當網頁或圖片載入完成時
onmousedown 滑鼠按鍵被壓下時
onmousemove 滑鼠指標移動時
onmouseout 滑鼠指標離開物件時
onmouseover 滑鼠指標移到物件上時
onmouseup 滑鼠按鍵被放開時
onreset 當reset按鍵被點擊時
onresize 當視窗或框架被改變大小時
onselect 當文字被選取時
onsubmit 當sumbit按鍵被點擊時
onunload 當使用者離開畫面時
2012年11月12日 星期一
Tomcat，Apache配置GZip壓縮(HTTP壓縮)功能
*修改自網路文章，文章源頭不確定
HTTP 壓縮可以大大提高瀏覽網站的速度
它的原理是，在客戶端請求網頁後，從Server將網頁文件壓縮
再下載到Client，由Client的瀏覽器負責解壓縮並瀏覽
相對於普通的瀏覽過程HTML ,CSS,JavaScript , Text ，它可以節省40%左右的流量
更為重要的是，它可以對動態生成的
包括CGI、PHP、JSP、ASP、Servlet、SHTML等輸出的網頁也能進行壓縮
一，對於Tomcat5.0以後的版本支持對輸出內容進行壓縮，使用的是gzip壓縮格式.
要使用gzip壓縮功能，你可以在Connector實例中加上如下屬性即可
1. compression="on" 打開壓縮功能
2. compressionMinSize="2048" 啟用壓縮的輸出內容大小，這裡預設2KB
3. noCompressionUserAgents="gozilla, traviata" 對於以下的瀏覽器，不啟用壓縮
4. compressableMimeType="text/html,text/xml" 壓縮類型
下面是$tomcat_home$/conf/server.xml的配置內容
<Connector port="8080" protocol="HTTP/1.1"
compression="on"
compressionMinSize="2048"
connectionTimeout="20000"
compressableMimeType="text/html,text/xml,text/plain,
text/css,text/json,text/javascript,
application/x-javascript,application/javascript,
application/jsp,application/json,image/jpeg,image/png"
redirectPort="8443" />
對於某些text文件比如：log、txt等，我們也可以讓Server採用gzip壓縮傳輸
修改conf目錄下web.xml，添加
<mime-mapping>
<extension>log</extension>
<mime-type>text/plain</mime-type>
</mime-mapping>
就可以指定壓縮傳輸了
通常情況下，壓縮傳輸能大幅度提高展示速度
二，對於Apache而言，有兩種情況
1.針對Apache2.0之前的版本，它原本是不支持的
不過可以通過添加第三方的module_gzip模組來啟用
2.針對Apache2.0及之後的版本，Apache提供支持；不過不叫gzip，而叫mod_deflate
下面就對Apache2.0及之後的版本作一個說明
1. 去掉#LoadModule headers_module modules/mod_headers.so前面的註釋#,
2. 添加LoadModule deflate_module modules/mod_deflate.so
3. 在VirtualHost中添加
<Location "/">
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary
</Location>
以下為完整範例
# 加載deflate模組
LoadModule headers_module modules/mod_headers.so
LoadModule deflate_module modules/mod_deflate.so
<VirtualHost *:80>
DocumentRoot f:/apacheTest
<Location "/">
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary
</Location>
</VirtualHost>
HTTP 壓縮可以大大提高瀏覽網站的速度
它的原理是，在客戶端請求網頁後，從Server將網頁文件壓縮
再下載到Client，由Client的瀏覽器負責解壓縮並瀏覽
相對於普通的瀏覽過程HTML ,CSS,JavaScript , Text ，它可以節省40%左右的流量
更為重要的是，它可以對動態生成的
包括CGI、PHP、JSP、ASP、Servlet、SHTML等輸出的網頁也能進行壓縮
一，對於Tomcat5.0以後的版本支持對輸出內容進行壓縮，使用的是gzip壓縮格式.
要使用gzip壓縮功能，你可以在Connector實例中加上如下屬性即可
1. compression="on" 打開壓縮功能
2. compressionMinSize="2048" 啟用壓縮的輸出內容大小，這裡預設2KB
3. noCompressionUserAgents="gozilla, traviata" 對於以下的瀏覽器，不啟用壓縮
4. compressableMimeType="text/html,text/xml" 壓縮類型
下面是$tomcat_home$/conf/server.xml的配置內容
<Connector port="8080" protocol="HTTP/1.1"
compression="on"
compressionMinSize="2048"
connectionTimeout="20000"
compressableMimeType="text/html,text/xml,text/plain,
text/css,text/json,text/javascript,
application/x-javascript,application/javascript,
application/jsp,application/json,image/jpeg,image/png"
redirectPort="8443" />
對於某些text文件比如：log、txt等，我們也可以讓Server採用gzip壓縮傳輸
修改conf目錄下web.xml，添加
<mime-mapping>
<extension>log</extension>
<mime-type>text/plain</mime-type>
</mime-mapping>
就可以指定壓縮傳輸了
通常情況下，壓縮傳輸能大幅度提高展示速度
二，對於Apache而言，有兩種情況
1.針對Apache2.0之前的版本，它原本是不支持的
不過可以通過添加第三方的module_gzip模組來啟用
2.針對Apache2.0及之後的版本，Apache提供支持；不過不叫gzip，而叫mod_deflate
下面就對Apache2.0及之後的版本作一個說明
1. 去掉#LoadModule headers_module modules/mod_headers.so前面的註釋#,
2. 添加LoadModule deflate_module modules/mod_deflate.so
3. 在VirtualHost中添加
<Location "/">
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary
</Location>
以下為完整範例
# 加載deflate模組
LoadModule headers_module modules/mod_headers.so
LoadModule deflate_module modules/mod_deflate.so
<VirtualHost *:80>
DocumentRoot f:/apacheTest
<Location "/">
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary
</Location>
</VirtualHost>
資料結構容量大小的調整
StringBuilder 和 StringBuffer 底層都使用char[]來做為資料儲存庫
而且常常需要調整容量大小
調整容量大小的方法就是配置一個容量更大的新的char[]
接著將舊資料複製過來後再拋棄舊的char[]
類似的調整過程也可能發生在使用陣列當作底層資料儲存庫的Java SE Collection
依OpenJDK的實作方式
當儲存文字超過底層資料儲存庫的容量時
會配置一個原本容量兩倍大的新char陣列，而底層的char陣列大小預設為16
實務上很少StringBuffer 或StringBuilder的物件最後只使用了16以內的char元素
要避免StringBuffer 或StringBuilder調整大小的動作，我們可以指定大小給其建構子
如ArrayList、Vector、HashMap和ConcurrenthashMap等Collections因使用陣列儲存資料
同StringBuffer 或StringBuilder，很容易在增加元素時引發調整大小的動作
需要額外的CPU週期來配置新陣列、複製舊陣列的資料，將來也需要回收舊陣列
以HashMap為例，預設建構子的容量是16筆資料，也是經常不夠用
其資料擴張時也是使用原本陣列2倍大的新陣列
又因每次調整時都要計算雜湊(hash)值，當資料量大時耗費的成本也更驚人
遇到這種情形時，比較好的處理方式就是直接將計算容量的算式傳給HashMap的建構子
而且常常需要調整容量大小
調整容量大小的方法就是配置一個容量更大的新的char[]
接著將舊資料複製過來後再拋棄舊的char[]
類似的調整過程也可能發生在使用陣列當作底層資料儲存庫的Java SE Collection
依OpenJDK的實作方式
當儲存文字超過底層資料儲存庫的容量時
會配置一個原本容量兩倍大的新char陣列，而底層的char陣列大小預設為16
實務上很少StringBuffer 或StringBuilder的物件最後只使用了16以內的char元素
要避免StringBuffer 或StringBuilder調整大小的動作，我們可以指定大小給其建構子
如ArrayList、Vector、HashMap和ConcurrenthashMap等Collections因使用陣列儲存資料
同StringBuffer 或StringBuilder，很容易在增加元素時引發調整大小的動作
需要額外的CPU週期來配置新陣列、複製舊陣列的資料，將來也需要回收舊陣列
以HashMap為例，預設建構子的容量是16筆資料，也是經常不夠用
其資料擴張時也是使用原本陣列2倍大的新陣列
又因每次調整時都要計算雜湊(hash)值，當資料量大時耗費的成本也更驚人
遇到這種情形時，比較好的處理方式就是直接將計算容量的算式傳給HashMap的建構子
2012年11月10日 星期六
[轉載] require.js的用法
原文
一、為什麼要用require.js？
最早的時候，所有Javascript代碼都寫在一個文件裡面，只要加載這一個文件就夠了
後來，代碼越來越多，一個文件不夠了，必須分成多個文件，依次加載
下面的網頁代碼，相信很多人都見過
<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
<script src="4.js"></script>
<script src="5.js"></script>
<script src="6.js"></script>
這段代碼依次加載多個js文件
這樣的寫法有很大的缺點
首先，加載的時候，瀏覽器會停止網頁渲染
加載文件越多，網頁失去響應的時間就會越長
其次，由於js文件之間存在依賴關係，因此必須嚴格保證加載順序
比如上例的1.js要在2.js的前面
依賴性最大的模塊一定要放到最後加載
當依賴關係很複雜的時候，代碼的編寫和維護都會變得困難
require.js的誕生，就是為瞭解決這兩個問題：
（1）實現js文件的異步加載，避免網頁失去響應；
（2）管理模塊之間的依賴性，便於代碼的編寫和維護。
二、require.js的加載
使用require.js的第一步，是先去官方網站下載最新版本。
下載後，假定把它放在js子目錄下面，就可以加載了。
<script src="js/require.js"></script>
有人可能會想到，加載這個文件，也可能造成網頁失去響應
解決辦法有兩個，一個是把它放在網頁底部加載，另一個是寫成下面這樣：
<script src="js/require.js" defer async="true" ></script>
async屬性表明這個文件需要異步加載，避免網頁失去響應
IE不支持這個屬性，只支持defer，所以把defer也寫上
加載require.js以後，下一步就要加載我們自己的代碼了
假定我們自己的代碼文件是main.js，也放在js目錄下面
那麼，只需要寫成下面這樣就行了：
<script src="js/require.js" data-main="js/main"></script>
data-main屬性的作用是，指定網頁程序的主模塊
在上例中，就是js目錄下面的main.js，這個文件會第一個被require.js加載
由於require.js默認的文件後綴名是js，所以可以把main.js簡寫成main
三、主模塊的寫法
上一節的main.js，我把它稱為"主模塊"，意思是整個網頁的入口代碼
它有點像C語言的main()函數，所有代碼都從這兒開始運行
下面就來看，怎麼寫main.js。
如果我們的代碼不依賴任何其他模塊，那麼可以直接寫入javascript代碼。
// main.js
alert("加載成功！");
但這樣的話，就沒必要使用require.js了
真正常見的情況是，主模塊依賴於其他模塊
這時就要使用AMD規範定義的的require()函數
// main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
// some code here
});
require()函數接受兩個參數
第一個參數是一個數組，表示所依賴的模塊，上例就是['moduleA', 'moduleB', 'moduleC']
即主模塊依賴這三個模塊
第二個參數是一個回調函數，當前面指定的模塊都加載成功後，它將被調用
加載的模塊會以參數形式傳入該函數，從而在回調函數內部就可以使用這些模塊
require()異步加載moduleA，moduleB和moduleC，瀏覽器不會失去響應
它指定的回調函數，只有前面的模塊都加載成功後才會運行，解決了依賴性的問題
下面，我們看一個實際的例子
假定主模塊依賴jquery、underscore和backbone這三個模塊，main.js就可以這樣寫：
require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
// some code here
});
require.js會先加載jQuery、underscore和backbone，然後再運行回調函數
主模塊的代碼就寫在回調函數中
四、模塊的加載
上一節最後的示例中，主模塊的依賴模塊是['jquery', 'underscore', 'backbone']
默認情況下，require.js假定這三個模塊與main.js在同一個目錄
文件名分別為jquery.js，underscore.js和backbone.js，然後自動加載
使用require.config()方法，我們可以對模塊的加載行為進行自定義
require.config()就寫在主模塊（main.js）的頭部
參數就是一個對象，這個對象的paths屬性指定各個模塊的加載路徑
require.config({
paths: {
"jquery": "jquery.min.js",
"underscore": "underscore.min.js",
"backbone": "backbone.min.js"
}
});
上面的代碼給出了三個模塊的文件名，路徑默認與main.js在同一個目錄（js子目錄）
如果這些模塊在其他目錄，比如js/lib目錄，則有兩種寫法。一種是逐一指定路徑
require.config({
paths: {
"jquery": "lib/jquery.min.js",
"underscore": "lib/underscore.min.js",
"backbone": "lib/backbone.min.js"
}
});
另一種則是直接改變基目錄（baseUrl）。
require.config({
baseUrl: "js/lib",
paths: {
"jquery": "jquery.min.js",
"underscore": "underscore.min.js",
"backbone": "backbone.min.js"
}
});
如果某個模塊在另一台主機上，也可以直接指定它的網址，比如：
require.config({
paths: {
"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
}
});
require.js要求，每個模塊是一個單獨的js文件
這樣的話，如果加載多個模塊，就會發出多次HTTP請求，會影響網頁的加載速度
因此require.js提供了一個優化工具
當模塊部署完畢以後，可以用這個工具將多個模塊合併在一個文件中，減少HTTP請求數
五、AMD模塊的寫法
require.js加載的模塊，採用AMD規範
也就是說，模塊必須按照AMD的規定來寫
具體來說，就是模塊必須採用特定的define()函數來定義
如果一個模塊不依賴其他模塊，那麼可以直接定義在define()函數之中
假定現在有一個math.js文件，它定義了一個math模塊。那麼，math.js就要這樣寫：
// math.js
define(function (){
var add = function (x,y){
return x+y;
};
return {
add: add
};
});
加載方法如下：
// main.js
require(['math'], function (math){
alert(math.add(1,1));
});
如果這個模塊還依賴其他模塊，那麼define()函數的第一個參數，必須是一個數組
指明該模塊的依賴性
define(['myLib'], function(myLib){
function foo(){
myLib.doSomething();
}
return {
foo : foo
};
});
當require()函數加載上面這個模塊的時候，就會先加載myLib.js文件
六、加載非規範的模塊
理論上，require.js加載的模塊，必須是按照AMD規範、用define()函數定義的模塊
實際上雖然已經有一部分流行的函數庫（比如jQuery）符合AMD規範，更多的庫並不符合
那麼，require.js是否能夠加載非規範的模塊呢？
回答是可以的
這樣的模塊在用require()加載之前，要先用require.config()方法，定義它們的一些特徵
舉例來說，underscore和backbone這兩個庫，都沒有採用AMD規範編寫
如果要加載它們的話，必須先定義它們的特徵
require.config({
shim: {
'underscore':{
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
}
});
require.config()接受一個配置對象，這個對象除了有前面說過的paths屬性之外
還有一個shim屬性，專門用來配置不兼容的模塊
每個模塊要定義
（1）exports值（輸出的變量名）表明這個模塊外部調用時的名稱
（2）deps數組，表明該模塊的依賴性
比如，jQuery的插件可以這樣定義：
shim: {
'jquery.scroll': {
deps: ['jquery'],
exports: 'jQuery.fn.scroll'
}
}
七、require.js插件
require.js還提供一系列插件，實現一些特定的功能
domready插件，可以讓回調函數在頁面DOM結構加載完成後再運行
require(['domready!'], function (doc){
// called once the DOM is ready
});
text和image插件，則是允許require.js加載文本和圖片文件
define([
'text!review.txt',
'image!cat.jpg'
],
function(review,cat){
console.log(review);
document.body.appendChild(cat);
}
);
類似的插件還有json和mdown，用於加載json文件和markdown文件
一、為什麼要用require.js？
最早的時候，所有Javascript代碼都寫在一個文件裡面，只要加載這一個文件就夠了
後來，代碼越來越多，一個文件不夠了，必須分成多個文件，依次加載
下面的網頁代碼，相信很多人都見過
<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
<script src="4.js"></script>
<script src="5.js"></script>
<script src="6.js"></script>
這段代碼依次加載多個js文件
這樣的寫法有很大的缺點
首先，加載的時候，瀏覽器會停止網頁渲染
加載文件越多，網頁失去響應的時間就會越長
其次，由於js文件之間存在依賴關係，因此必須嚴格保證加載順序
比如上例的1.js要在2.js的前面
依賴性最大的模塊一定要放到最後加載
當依賴關係很複雜的時候，代碼的編寫和維護都會變得困難
require.js的誕生，就是為瞭解決這兩個問題：
（1）實現js文件的異步加載，避免網頁失去響應；
（2）管理模塊之間的依賴性，便於代碼的編寫和維護。
二、require.js的加載
使用require.js的第一步，是先去官方網站下載最新版本。
下載後，假定把它放在js子目錄下面，就可以加載了。
<script src="js/require.js"></script>
有人可能會想到，加載這個文件，也可能造成網頁失去響應
解決辦法有兩個，一個是把它放在網頁底部加載，另一個是寫成下面這樣：
<script src="js/require.js" defer async="true" ></script>
async屬性表明這個文件需要異步加載，避免網頁失去響應
IE不支持這個屬性，只支持defer，所以把defer也寫上
加載require.js以後，下一步就要加載我們自己的代碼了
假定我們自己的代碼文件是main.js，也放在js目錄下面
那麼，只需要寫成下面這樣就行了：
<script src="js/require.js" data-main="js/main"></script>
data-main屬性的作用是，指定網頁程序的主模塊
在上例中，就是js目錄下面的main.js，這個文件會第一個被require.js加載
由於require.js默認的文件後綴名是js，所以可以把main.js簡寫成main
三、主模塊的寫法
上一節的main.js，我把它稱為"主模塊"，意思是整個網頁的入口代碼
它有點像C語言的main()函數，所有代碼都從這兒開始運行
下面就來看，怎麼寫main.js。
如果我們的代碼不依賴任何其他模塊，那麼可以直接寫入javascript代碼。
// main.js
alert("加載成功！");
但這樣的話，就沒必要使用require.js了
真正常見的情況是，主模塊依賴於其他模塊
這時就要使用AMD規範定義的的require()函數
// main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
// some code here
});
require()函數接受兩個參數
第一個參數是一個數組，表示所依賴的模塊，上例就是['moduleA', 'moduleB', 'moduleC']
即主模塊依賴這三個模塊
第二個參數是一個回調函數，當前面指定的模塊都加載成功後，它將被調用
加載的模塊會以參數形式傳入該函數，從而在回調函數內部就可以使用這些模塊
require()異步加載moduleA，moduleB和moduleC，瀏覽器不會失去響應
它指定的回調函數，只有前面的模塊都加載成功後才會運行，解決了依賴性的問題
下面，我們看一個實際的例子
假定主模塊依賴jquery、underscore和backbone這三個模塊，main.js就可以這樣寫：
require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
// some code here
});
require.js會先加載jQuery、underscore和backbone，然後再運行回調函數
主模塊的代碼就寫在回調函數中
四、模塊的加載
上一節最後的示例中，主模塊的依賴模塊是['jquery', 'underscore', 'backbone']
默認情況下，require.js假定這三個模塊與main.js在同一個目錄
文件名分別為jquery.js，underscore.js和backbone.js，然後自動加載
使用require.config()方法，我們可以對模塊的加載行為進行自定義
require.config()就寫在主模塊（main.js）的頭部
參數就是一個對象，這個對象的paths屬性指定各個模塊的加載路徑
require.config({
paths: {
"jquery": "jquery.min.js",
"underscore": "underscore.min.js",
"backbone": "backbone.min.js"
}
});
上面的代碼給出了三個模塊的文件名，路徑默認與main.js在同一個目錄（js子目錄）
如果這些模塊在其他目錄，比如js/lib目錄，則有兩種寫法。一種是逐一指定路徑
require.config({
paths: {
"jquery": "lib/jquery.min.js",
"underscore": "lib/underscore.min.js",
"backbone": "lib/backbone.min.js"
}
});
另一種則是直接改變基目錄（baseUrl）。
require.config({
baseUrl: "js/lib",
paths: {
"jquery": "jquery.min.js",
"underscore": "underscore.min.js",
"backbone": "backbone.min.js"
}
});
如果某個模塊在另一台主機上，也可以直接指定它的網址，比如：
require.config({
paths: {
"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
}
});
require.js要求，每個模塊是一個單獨的js文件
這樣的話，如果加載多個模塊，就會發出多次HTTP請求，會影響網頁的加載速度
因此require.js提供了一個優化工具
當模塊部署完畢以後，可以用這個工具將多個模塊合併在一個文件中，減少HTTP請求數
五、AMD模塊的寫法
require.js加載的模塊，採用AMD規範
也就是說，模塊必須按照AMD的規定來寫
具體來說，就是模塊必須採用特定的define()函數來定義
如果一個模塊不依賴其他模塊，那麼可以直接定義在define()函數之中
假定現在有一個math.js文件，它定義了一個math模塊。那麼，math.js就要這樣寫：
// math.js
define(function (){
var add = function (x,y){
return x+y;
};
return {
add: add
};
});
加載方法如下：
// main.js
require(['math'], function (math){
alert(math.add(1,1));
});
如果這個模塊還依賴其他模塊，那麼define()函數的第一個參數，必須是一個數組
指明該模塊的依賴性
define(['myLib'], function(myLib){
function foo(){
myLib.doSomething();
}
return {
foo : foo
};
});
當require()函數加載上面這個模塊的時候，就會先加載myLib.js文件
六、加載非規範的模塊
理論上，require.js加載的模塊，必須是按照AMD規範、用define()函數定義的模塊
實際上雖然已經有一部分流行的函數庫（比如jQuery）符合AMD規範，更多的庫並不符合
那麼，require.js是否能夠加載非規範的模塊呢？
回答是可以的
這樣的模塊在用require()加載之前，要先用require.config()方法，定義它們的一些特徵
舉例來說，underscore和backbone這兩個庫，都沒有採用AMD規範編寫
如果要加載它們的話，必須先定義它們的特徵
require.config({
shim: {
'underscore':{
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
}
});
require.config()接受一個配置對象，這個對象除了有前面說過的paths屬性之外
還有一個shim屬性，專門用來配置不兼容的模塊
每個模塊要定義
（1）exports值（輸出的變量名）表明這個模塊外部調用時的名稱
（2）deps數組，表明該模塊的依賴性
比如，jQuery的插件可以這樣定義：
shim: {
'jquery.scroll': {
deps: ['jquery'],
exports: 'jQuery.fn.scroll'
}
}
七、require.js插件
require.js還提供一系列插件，實現一些特定的功能
domready插件，可以讓回調函數在頁面DOM結構加載完成後再運行
require(['domready!'], function (doc){
// called once the DOM is ready
});
text和image插件，則是允許require.js加載文本和圖片文件
define([
'text!review.txt',
'image!cat.jpg'
],
function(review,cat){
console.log(review);
document.body.appendChild(cat);
}
);
類似的插件還有json和mdown，用於加載json文件和markdown文件
2012年10月30日 星期二
範例 - JavaScript 等比例縮小圖片
max-width、max-height以及這兩個的 min 版本是偶爾能在某些CSS中看到的屬性設定
不過因為IE不會辨識這些屬性，所以就直接寫JavaScript 調整圖片大小
var img = this.getElementsByTagName("img")[0];
img.onload = function(){
var maxWidth = "300", maxHeight = "80";
if(img.offsetHeight >= (maxHeight / maxWidth) * img.offsetWidth){
img.style.width = img.offsetWidth / img.offsetHeight * maxHeight + "px";
img.style.height = maxHeight + "px";
}else{
img.style.height = img.offsetHeight / img.offsetWidth * maxHeight + "px";
img.style.width = maxWidth + "px";
}
}
不過因為IE不會辨識這些屬性，所以就直接寫JavaScript 調整圖片大小
var img = this.getElementsByTagName("img")[0];
img.onload = function(){
var maxWidth = "300", maxHeight = "80";
if(img.offsetHeight >= (maxHeight / maxWidth) * img.offsetWidth){
img.style.width = img.offsetWidth / img.offsetHeight * maxHeight + "px";
img.style.height = maxHeight + "px";
}else{
img.style.height = img.offsetHeight / img.offsetWidth * maxHeight + "px";
img.style.width = maxWidth + "px";
}
}
轉換AJAX取得的XML結構為DOM操作結構
這次的目的是要用AJAX取得的 responseText ，作為節點底下的結構
取得的 responseText 會是 <div>....</div><div>...</div> 這樣的結構
再以DOM方式去操作
通常查詢到的都是用framework的解決方式
例如JQuery - $("...").html( responseText );
Pototype.js也有update() method可以滿足這類需求
不過...沒看到用native JavaScript的過程
想想也是啦...畢竟這樣應該就是要自己去解析字串了
查到較相近的是XML結構的操作
雖然不符合我的需求，但還是值得記錄起來
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","rss.xml",false);
xmlhttp.send();
xmlText = xmlhttp.responseText;
if (window.DOMParser){
parser = new DOMParser();
xmlDoc = parser.parseFromString(xmlText,"text/xml");
} else{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); //for IE
xmlDoc.loadXML(xmlText);
}
如果是直接取得XML的話用以下形式即可
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","rss.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
取得的 responseText 會是 <div>....</div><div>...</div> 這樣的結構
再以DOM方式去操作
通常查詢到的都是用framework的解決方式
例如JQuery - $("...").html( responseText );
Pototype.js也有update() method可以滿足這類需求
不過...沒看到用native JavaScript的過程
想想也是啦...畢竟這樣應該就是要自己去解析字串了
查到較相近的是XML結構的操作
雖然不符合我的需求，但還是值得記錄起來
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","rss.xml",false);
xmlhttp.send();
xmlText = xmlhttp.responseText;
if (window.DOMParser){
parser = new DOMParser();
xmlDoc = parser.parseFromString(xmlText,"text/xml");
} else{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); //for IE
xmlDoc.loadXML(xmlText);
}
如果是直接取得XML的話用以下形式即可
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","rss.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
訂閱：
文章 (Atom)