Archive

文章標籤 ‘javascript’

用YUI Compressor精簡你的肥肥Javascript及CSS檔案吧

2010年10月13日 尚無評論

   小弟先前有個客戶網站用了大量特效及圖片,在監控時發現,讀取首頁時瀏覽者讀了3.1MB才能讀完,在進行瘦身後瀏覽者只要讀700KB左右就能讀完,如果不考慮網站頻寬,以現今效多瀏覽者使用的網路頻寬為2M/256K為例,前者需要12秒而後者只需3秒左右,是不是落差很大呢? 如果是你,你會想上前者這樣的網站嗎?

     網站使用者都是希望你的網站是很友善、美觀及很快速的,在現今友善化的網站,大多都使用很多javascript及css,所以相對的你將會降低的是你的網站執行效能。 為此,如何將這些javascript 及css sytle 減少系統及頻寬的loading,這就是當務首要,也是現今網站規畫中,要注意的一環。

     會影響網站效能的原因很多,今天就介紹如何做好一些上版時的動作來增加效能,先前有提及可以針對你的網站伺服器開啟使用gzip 來進行網頁的壓縮,以減少網站頻寬的使用;今天來介紹可以使用YUI Compressor工具來降低你的javascript及css style檔案的大小,因為這些都是原始碼,為了方便編輯及辨識,所以開發人員往往加上許多顯示格式所需要的字元,再加上web 2.0盛行,大量的函式庫的引用,都會讓你的檔案不小心就會慢慢變的很大。以jquery-v1.3.js來看,一百多K的檔案精簡後jquery-min-v1.3.js 只剩不到60K如果再加上gzip傳輸應該頻寬會省更大。

     以下則為該工具的介紹 :

YUI Compressor – The Yahoo! JavaScript and CSS Compressor Download
下載地址 : http://www.julienlecomte.net/yuicompressor/
The YUI Compressor requires Java version >= 1.4. (機器需要Java 1.4以上的環境)

可建立一個批處理文件,例如YUICompressor.bat,文件內容如下:

@echo off
::設置YUI Compressor啟動目錄
SET YUIFOLDER=D:\yuicompressor-2.4.2\build
::設置你的JS和CSS根目錄,腳本會自動按目錄層次查找和壓縮所有的JS和CSS
SET JSFOLDER=D:\mySite\myJS
echo 正在查找 JavaScript, CSS …
chdir /d %JSFOLDER% for /r . %%a in (*.js *.css) do (
@echo 正在壓縮 %%~a …
@java -jar %YUIFOLDER%\yuicompressor-2.4.2.jar –charset UTF-8 %%~fa -o %%~fa
)
echo 完成!
pause & exit

參考資料:http://hi.baidu.com/zdz8207/blog/item/d644ae6ea0f2c5d181cb4ab7.html

Categories: WebDesign Tags: , ,

showModalDialog 在同視窗轉到下一頁

2009年12月25日 尚無評論

平常很少用window.showModalDialog 來開啟視窗,
原因是他參數的傳遞及運用上,其實都蠻不順手的
不過因為window.open目前在使用上,九成九都會被瀏覽器擋住
所以還是只能轉用window.showModalDialog

先前如果使用window.showModalDialog 如果要到下一頁,而就要在<head> 標籤之中加上

<BASE target=”_self”>

不然就會另跳視窗開啟這連結;不過發現在使用javascript 的location.href 轉到下一頁時,
還是會另跳視窗,去查詢了一下是否有解法,才知在五六年前早就有解法
真是孤陋寡聞呀!!

只要有和小弟一樣的需求,可以改成用以下方式就可以在showModalDialog連到下一頁

  <script>  
  window.name=”__self”;  
  window.open(“yoururl”,”__self”)  
  </script>

而且很有趣的,這樣並不會被瀏覽器擋住,看來這問題是迎刃而解了

Categories: WebDesign Tags: ,

網頁表格隔行變色大整理

2009年8月12日 2 則評論

什麼是表格隔行變色呢?  看下圖就知道我要說的是什麼了!!

用戶插入圖片

整理目前在網路上針對網頁表格隔行變色的處理方式,用背景圖及一行一行設定的方法就不列入啦,其它大致如下:

CSS Expression

文字:color:expression(this.sourceIndex%2 ? '#ff0000':'#000000');
背景:background-color:expression(this.sourceIndex%2 ? '#ff0000':'#000000');

這是先前有在使用的方法,當初看上他是因為簡短的code就能達到該效果,不過後來才知CSS Expression並不是W3C標準的語法,只能在IE7以下使用,IE8 (微軟想開了,還是回歸標準了)及 FireFox都不支援,所以大家看看就好,還是不要用這個來處理!! 不是標準就是不會長長久久的。

CSS 定義

<style type=”text/css”><!–
#raw0 {background:#cccccc;}
#raw1 {background:#ecf6fc; }
–></style>
<!– 以下為html code–>
<table>
   <tr class=”raw0″>…
   <tr class=”raw1″>…
</table>

這雖然和一行一行寫顏色差不多,但至少他用了CSS 所以方便以後更換Style,所以還是介紹一下

CSS + Javascript

<style type=”text/css”><!–
#senfe {
   width: 300px;
   border-top: #000 1px solid;
   border-left: #000 1px solid;
}
#senfe td {
   border-right: #000 1px solid;
   border-bottom: #000 1px solid;
}
–></style>
<script language=”javascript”><!–
function senfe(o,a,b,c,d){
   var t=document.getElementById(o).getElementsByTagName(“tr”);
   for(var i=0;i<t.length;i++){
       t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;
       t[i].onclick=function(){
           if(this.x!=”1″){
               this.x=”1″;//本來打算直接用背景色判斷,FF獲取到的背景是RGB值,不好判斷
               this.style.backgroundColor=d;
           }else{
               this.x=”0″;
               this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
           }
       }
       t[i].onmouseover=function(){
           if(this.x!=”1″)this.style.backgroundColor=c;
       }
       t[i].onmouseout=function(){
           if(this.x!=”1″)this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
       }
   }
}
//senfe(“表格名稱”,”奇數行背景”,”偶數行背景”,”鼠標經過背景”,”點擊後背景”);
senfe(“senfe”,”#fff”,”#ccc”,”#cfc”,”#f00″);

–></script>

這個方式不錯,只要載入javascript並執行一行即可達到,不過每頁都要載入是真的有點麻煩,但也只能這樣才能簡化針對Style寫的code

CSS + JQuery

<style type=”text/css”> /*注意選擇器的層疊關係*/
.stripe_tb th{background:#B5CBE6; color:#039; line-height:20px; height:30px}
.stripe_tb td{padding:6px 11px; border-bottom:1px solid #95bce2; vertical-align:top; text-align:center}
.stripe_tb td *{padding:6px 11px}
.stripe_tb tr.oddalt td{background:#cccccc} /*這行將給所有偶數行加上背景色*/
.stripe_tb tr.alt td{background:#ecf6fc} /*這行將給所有偶數行加上背景色*/
.stripe_tb tr.over td{background:#FEF3D1} /*這個將是鼠標高亮行的背景色*/
</style>

<
script type=text/javascript>
$(document).ready(function(){
$(.stripe_tb tr).mouseover(function(){ //如果鼠標移到class為stripe_tb的表格的tr上時,執行函數
$(this).addClass(over);}).mouseout(function(){ //給這行添加class值為over,並且當鼠標一出該行時執行函數
$(this).removeClass(over);}) //移除該行的class
$(.stripe_tb tr:odd).addClass(oddalt); //給class為stripe_tb的表格的奇數行添加class值為oddalt
$(.stripe_tb tr:even).addClass(alt); //給class為stripe_tb的表格的偶數行添加class值為alt
});
</script>

即然javascript可以做到,那JQuery有何做不到的,程式碼更減少了,所以如果本身系統已經使用JQuery了,可以考慮用這個方法

參考資料:
http://chinaz.com/Design/Pages/0Q23513H008.html
http://www.wowbox.com.tw/blog/article.asp?id=3077
http://www.cnblogs.com/css/archive/2008/07/23/1249622.html

如何用javascript控制css margin-left 參數

2009年2月12日 尚無評論

最近有case要用javascript控制css margin-left 參數

用了以下的語法控制,是沒有用的

function
setMargin()
{
document.getElementById(“Picture”).style.margin-left =
“200px”;
}


去查了一下,才知-這個符號是要拿掉才行的

function
setMargin()
{
document.getElementById(“Picture”).style.marginLeft =
“200px”;
}


這個命名的小小注意事項,看來沒有常用的人,會一直忘掉要這樣調整的
寫下來怕忘了

資料來源:
http://bytes.com/groups/javascript/527124-how-set-margin-left-ie-w-javascript

Categories: Java Script Tags: ,

jQuery抓取跨網域外的資料(cross-domain) 運用JSONP

2009年1月21日 5 則評論

最近在測如何用jQuery讀取其它網頁的資料顯示,在網路上找到一篇簡單利用jQuery取得yahoo RSS新聞的範例,在本機可以執行,但一上server後就出現了沒有使用權限的問題

先前大概瞭解Javascript因為安全性問題,所以無法進行cross-domain的讀取,所謂cross-domain就是跨網域讀資料簡單來說就是a.com的網頁程式要去取b.com網頁資料,不過在現在web 2.0的時代,常會有需要進行跨網域的讀取,所以一樣大致上網整理了一下,目前有的作法如下:

JSONP

jQuery的文件有提到,從1.2版本開始支援使用 jQuery.getJSON(url,[data],[callback])
來進行跨網域讀取資料,原文如下:

As of jQuery 1.2, you can load JSON data located on another domain if you
specify a JSONP
callback, which can be done like so: “myurl?callback=?”. jQuery automatically
replaces the ? with the correct method name to call, calling your specified
callback.

如果要懂JSONP是什麼,小弟先前有篇文章就有提到,在此不多說啦,JSONP其實就是運用json資料格式,及回呼程式(callback=?)的方式達到可以取得到其它網域的資料並且執行後續callback的function,現在目前很多open API 例如yahoo,google, flickr 等都有支援callback的方式。

不過一般要使用JSONP,就是要你Client及Server之間的偶合度要高,除了其它有提供支援的網站可以使用外,所以適用度是有點限制的,不過還是要介紹一下,如何運作,在國王的新衣: JSONP 這篇網誌有提供取得flickr的圖片,小弟稍做修改成jQuery的寫法:

Client端:

$(function() {
   $('#button1').click(function(){
  var strURL='http://api.flickr.com/services/feeds/photos_public.gne?tags=羅平,油菜花,sunset&tagmode=all&format=json&jsoncallback=doPhoto';
  $.ajax({
     type:'GET',
     dataType:'jsonp',
     url:strURL,
   error: function(xmlHttpRequest,error) {
     alert('Ajax request ERROR');
   }
  })
   })
});
function doPhoto(result) { 
  var div = document.getElementById(“flickr”); 
  for(var i=0; i < result.items.length; i++) { 
   var img = document.createElement(“img”); 
   img.setAttribute(“src”,result.items[i].media.m); 
   img.setAttribute(“alt”,result.items[i].title); 
   var a = document.createElement(“a”); 
   a.setAttribute(“href”,result.items[i].link); 
   a.setAttribute(“target”,”_blank”); 
   a.appendChild(img); 
   div.appendChild(a); 
  } 

<input name=”button1″ id=”button1″ type=”button” value=”test” />
<div id=”flickr”></div>

Server端:

doPhoto({ 
“title”: “每個人的相片 已標籤 羅平, 油菜花 和 sunset”, 
“link”: “http://www.flickr.com/photos/”, 
“description”: “”, 
“modified”: “2007-04-22T14:19:09Z”, 
“generator”: “http://www.flickr.com/”, 
“items”: [
{
“title”: “羅平金雞嶺夕陽”, 
“link”: “http://www.flickr.com/photos/38362352@N00/468370409/”, 
“media”: {“m”:”http://farm1.static.flickr.com/211/468370409_319f383a24_m.jpg”}, 
“date_taken”: “2007-04-22T22:19:09-08:00”, 
“description”: “…”, 
“published”: “2007-04-22T14:19:09Z”, 
“author”: “nobody@flickr.com (Nature RGB)”, 
“author_id”: “38362352@N00”, 
“tags”: “sunset yunnan 油菜花 羅平” 
}
]
}) 

當Server端回傳json格式的資料時,會依callback傳的doPhoto回傳,剛好client我們有個doPhoto function去執行接收到json的資料,大致就是這樣,而http://a.webvm.net/也有一個很簡單的範例,是呼叫另一個domain的json格式的 hello world 。

跨域代理(Cross Domain
Proxy)

主要原理就是用php或者其他語言寫一個代理請求的轉發過程。客戶端請求自己的服務器,服務器把請求轉發到目標地址並且得到回應,服務器再
把結果返回給客戶端。這個過程,對於開發者來說還是不錯的選擇,因為你可以在服務器上對回應的結果做自己的處理,可以決定需不需把結果要返回給客戶端。 不過還是一樣,需要有伺服端的配合,不過至少不用限制說一定要被請求端回傳json格式的資料才行,而這個proxy寫起來不然但小心有心人士利用,所以還是要判斷一下是不是由你認定的客戶端下的請求或是限定只proxy哪些網址。

而參考範例,以參考 Javascript 抓取跨網域外的資料  Tsung's Blog 的文章,但也是調整一下來看:

Client端:

$(function() {
  $('#button1').click(function(){
  $.ajax({
    type:'Post',
    dataType:'html',
    data: {
    strURL:'http://tw.yahoo.com/'
    },
    url: “proxy.jsp”,
  error: function(xmlHttpRequest,error) {
    alert('Ajax request ERROR');
  },     
     success:function(html){
       $(“#flickr”).html(html);
     }
  })
  })
});

<input name=”button1″ id=”button1″ type=”button” value=”test” />
<div id=”flickr”></div>

Server端:

<?php
if (isset($_POST['url']) && !empty($_POST['url']))
{
    // 記得檢查此 URL 是不是你發出的 request
   echo
file_get_contents($_POST['url']);
}
?>

參考資料:
http://www.dotblogs.com.tw/topcat/archive/2008/08/08/4846.aspx
http://blog.zol.com.cn/859/article_858048.html
http://plog.longwin.com.tw/programming/2008/12/15/javascript-ajax-get-cross-domain-data-2008
http://carffuca.javaeye.com/blog/65239
http://happytemplate.blogspot.com/2007/11/jsonp.html
http://ibox.blog.sohu.com/107171814.html
http://www.javaeye.com/topic/169765
http://a.webvm.net/

Categories: Java Script Tags: , ,
分頁: 1 2 3 下一頁