jQuery grep()

jQuery grep()

甚麼是grep?

就字面上的翻譯，grep可以瞭解為在某文件中逐一尋找某個字詞，在jQuery，grep用來篩選某陣列的內容，該方法會返回一個新的陣列。


怎麼使用grep? 

假如我們要在某陣列中列出值大於1000的整數，此時grep方法就可以很輕易的派上用場，如下範例:
var array = [1, 10 ,100, 1000, 10000];  $.grep(array, function(obj){   return (obj > 100);  }); 


更多範例  

除了上面簡單的型態的方法，grep還能夠處理更複雜的型態，例如自己定義的object，如下範例:

<script> var objectArray = [ {name : "augus", tel : "123"}, {name : "john", tel : "456"}, {name : "jack", tel : "789"}, ]; var grepArray = $.grep(objectArray, function(obj){ return (obj.name.indexOf("a") != -1); }); console.log(grepArray); </script> 


output :

有了grep這樣的方法，往後在處理陣列內容篩選的時候就可以輕易的解決了!!




參考 

jQuery-Utils
http://api.jquery.com/jQuery.grep/ 

Posts by 奧格士(Augus)

Hi,I my name is Augus. I am a author of this blog.I love blogging and I like to share things which I know.
Follow Me On Twitter Or Facebook

CSS優化技巧總整理

 

談CSS優化

使用重置樣式表(reset css)

為瞭解決不同瀏覽器對css渲染方式不同的問題，可以是用重置樣式表來解決。重置樣式來保證瀏覽器渲染的結果是一致的，以下是Yahoo YUI所推薦使用的重置表 ： http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css


/* YUI 3.4.1 (build 4118) Copyright 2011 Yahoo! Inc. All rights reserved. Licensed under the BSD License. http://yuilibrary.com/license/ */ html { color: #000; background: #FFF } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0 } table { border-collapse: collapse; border-spacing: 0 } fieldset, img { border: 0 } address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal } ol, ul { list-style: none } caption, th { text-align: left } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal } q:before, q:after { content: '' } abbr, acronym { border: 0; font-variant: normal } sup { vertical-align: text-top } sub { vertical-align: text-bottom } input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit } input, textarea, select {* font-size: 100% } legend { color: #000 } 

這樣的方法讓我們可以保證瀏覽器之間的初始值不同導致的問題，解決許多在css編寫上的困擾。

用類選擇器代替內嵌style程式碼

如果直接在html標籤中直接使用style屬性來賦予css樣式，這樣也許會造成HTML程式碼過多的問題，例如下面範例

<ul> <li style="color:red; font-size:large"> SEO is important issues! </li> <li style="color:red; font-size:large"> SEO is important issues! </li> <li style="color:red; font-size:large"> SEO is important issues! </li> </ul>  

如果將這個範例的style屬性拉出撰寫在css中，這樣可以節省更多的html程式碼

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>new_file</title> <meta name="author" content="Augus" /> <style> li.red { color: red; font-size: large; } </style> </head> <body> <ul> <li class="red"> SEO is important issues! </li> <li class="red"> SEO is important issues! </li> <li class="red"> SEO is important issues! </li> </ul> </body> 

這樣的好處除了簡化了html複雜度以外，還提高了內容代碼比這個重要的SEO優化的技巧呢！

&  註：

所謂內容代碼比就是實際網頁的內容與網頁程式碼的比值，這會影響搜尋引擎爬蟲程式認定是否為關鍵網站十分重要的議題。

使用後代選擇器

後代選擇器又叫Contextual Selectors，只的是選擇某元件內的DOM元素，適時的使用後代選擇器（不濫用類選擇器）可以節省大量的程式碼量並且也提高了內容代碼比。

<head> <style> li p{ color: red; font-size: large; } </style> </head> <body> <ul> <li> <p>SEO is important issues!</p> </li> <li> <p>SEO is important issues!</p> </li> <li> <p>SEO is important issues!</p> </li> </ul> </body> 

除了使用後代選擇器之外，也可以使用精細度更高的子選擇器（Children Selector）來選取直接後代，使用方法為div > p。

將含有相同的選擇器合併

CSS中可以將共同宣告的多個選擇器使用逗號的方式合併，這樣優化的技術可以讓更多的選擇器共享同樣的樣式節省了程式碼量。
<head> <style> li p, .myfont{ color: red; font-size: large; } .myfont { text-align: center; } </style> </head> <body> <h2 class=」myfont」>SEO is important issues!</h2> <ul> <li> <p>SEO is important issues!</p> </li> <li> <p>SEO is important issues!</p> </li> <li> <p>SEO is important issues!</p> </li> </ul> </body> 

將相同選擇器的不同宣告合併

CSS允許相同選擇器而不同宣告合併為一個組，使用逗號分隔，讓多個選擇器可以放入一個宣告中，縱而節省空間
ul { background-color: black; font-size: 1em; } ul { padding: 10px; } ul li { background-color: black; font-size: 1em; } ul li p { font-size: 1em; color: red; } 


修改後
ul, ul li, ul li p { background-color: black; font-size: 1em; color: red; } 

將相同的樣式合併為共享類

利用繼承來消除重複宣告

Posts by 奧格士(Augus)

Hi,I my name is Augus. I am a author of this blog.I love blogging and I like to share things which I know.
Follow Me On Twitter Or Facebook

JavaScript prototype chain

 

在js裡雖然沒有類, 但是有一個在類編程裡常用的的概念, Constructor構造器, 或者叫構造函數. 語法上Constructor跟普通的js函數沒有區別, 但是Constructor前面加上new關鍵字就可以產生新的對象.

那麼」new Constructor()」這樣調用時到底做了什麼事情呢?
1. js運行環境首先創建一個空對象
2. 把this變量指向這個對象
3. 把__proto__指向這個構造器的prototype屬性
4. 通過this把屬性和方法加在這個對象上
5. 最後會把this指向的對象return出來(當然你也可以顯示的return別的對象,這是情況跟我討論的有點不一樣)

這裡有2個概念比較重要, 第一是Constructor的prototype屬性, 它是Constructor的一個保持共享屬性和方法的對象. 二通過該Constructor生成的對象的__proto__屬性, 它指向了那個prototype對象. 對象的Constructor可以通過該對象的constructor屬性獲得.

我們定義一個簡單的Constructor Demo(), 然後通過他生成一個aDemo對象, 在Chrome的console裡把aDemo打出來看到的結果是這樣的,這是我們能很清楚的看出這種關係.
function DemoA(){ this.title = "this is a demo constructor"; this.f1 = function(){} } var aDemo = new DemoA(); console.log(aDemo); 

換一種寫法,
function DemoB(){ this.title = "this is a demo constructor"; } DemoB.prototype.f2 = function () {}; var bDemo = new DemoB(); console.log(bDemo); 

其實跟前面沒多大區別, 不過這一次f2()不在創建出來的對象上, 而是在對象的__proto__指向的構造器DemoB上. 這樣的好處是當使用DemoB創建很多對象時, 比較節省內存.

js的prototype搜索鏈 prototype Chain
js的運行環境是這樣使用構造器的prototype的. 當我們對第一個對象調用其方法時, js運行環境首先看, 這個對象本身有沒有這個方法, 如果有就直接調用. 如果沒找到, 就查找這個對象的__proto__屬性指向的對象(就是前面說的該對象的構造器的prototype屬性), 如果有該方法就調用, 沒有繼續查找__proto__屬性指向對象的__proto__屬性指向的對象, 以此類推. 直到最後, 找到js所有的對象都會指向默認指向的Object(算是js的根對象吧). 所以如果我們給Object上增加個方法, 所以的js對象都能使用.

由於js有對對象函數的prototype chain搜索的特性, 我們可以利用這點來模擬類似其他語言裡類(class)的效果. 如:
function DemoA(){ this.title = "this is a demo constructor"; this.f1 = function(){} } function DemoB(){ this.title = "this is b demo constructor"; this.f2 = function(){} } DemoB.prototype = new DemoA(); var bDemo = new DemoB(); console.log(bDemo); 

這時我們通過bDemo對象, 不但能調用bDemo上的DemoB的f2()方法, 也能__proto__同對對prototype的搜索, 在bDemo上直接調用DemoA的f1()方法.
function inherit(Child, Parent) { Child.prototype = new Parent(); } 

由於這種寫法在語法上太囉嗦, 不容易理解, 我可以定義一個這樣的函數.

這樣我們前面的例子可以寫成這樣, 效果是一樣的:
function DemoA(){ this.title = "this is a demo constructor"; this.f1 = function(){} } function DemoB(){ this.title = "this is b demo constructor"; this.f2 = function(){} } inherit(DemoB, DemoA); var bDemo = new DemoB(); console.log(bDemo); 

原文章出處　：　http://www.leonzhang.com/2011/12/20/javascript-prototype/

JavaScript 依物件某個值排序

 



JavaScript array sort()

甚麼是array sort?

sort 方法將 Array 對象進行適當的排序；在執行過程中並不會創建新的 Array 對象。

如果為 sortfunction 參數提供了一個函數，那麼該函數必須返回下列值之一：

• 負值，如果所傳遞的第一個參數比第二個參數小。
• 零，如果兩個參數相等。
• 正值，如果第一個參數比第二個參數大。

function sortRscData() { var data = [...]; data.sort(function(a, b){ if(a.itemCtpye.charCodeAt(0) > b.itemCtpye.charCodeAt(0)) return 1; return -1; }); }

Posts by 奧格士(Augus)

Hi,I my name is Augus. I am a author of this blog.I love blogging and I like to share things which I know.
Follow Me On Twitter Or Facebook

判斷元件是否顯示

if($("#element").is(':visible') == true)

Java BufferedImage Low Quality 解決方法

在Java中常常使用java.awt.Image庫所提供的方法進行圖像的縮放、及裁切。我們可以使用Graphics2D g = image.createGraphics()的方式得到Graphics物件，並且可以對其繪製圖案上去，但是縮放圖片時，若直接使用draw方法繪製會產生極大的問題，如題Qualtiy降低的問題，在這裡我也提供了解決的方案與原始程式碼的比照。

低畫質的縮圖程式碼

if (imgtype == BufferedImage.TYPE_BYTE_INDEXED || imgtype == BufferedImage.TYPE_BYTE_BINARY) {      IndexColorModel icm = (IndexColorModel) source.getColorModel();      image = new BufferedImage(width, height, imgtype, icm); } else {      image = new BufferedImage(width, height, imgtype); } Graphics g = image.getGraphics(); g.drawImage(source, 0, 0, width, height, null);

Smooth解法程式碼

ColorModel dstCM = source.getColorModel(); image = new BufferedImage(dstCM, dstCM.createCompatibleWritableRaster(width, height),          dstCM.isAlphaPremultiplied(), null); Image scaleImage = source.getScaledInstance(width, height, Image.SCALE_SMOOTH); Graphics2D g = image.createGraphics(); g.drawImage(scaleImage, 0, 0, width, height, null);

縮圖品質比較 :

總表比較 :

總類	畫質	檔案大小
低畫質縮圖	低	7.84kb
Smooth解法	高	7.84kb

由此可以下個結論，直接使用draw繪圖不僅得到低畫質的圖片，也無法得到較低的檔案大小，所以以後使用縮圖就要使用Smooth解法來解。

[剪貼]取得TinyMce中的所有img標籤

var srcs = new Array();

// 取得tinyMce內容
var editContent = $('#elm1').html();

// 取得全部的img標籤
var imgs = $(editContent).find('img');


// 去重複
imgs.each(function(index){
srcs[index] = $(this).attr('src');
});

function removeRepeat(a) {
var b = [], n = a.length, i, j;
for (i = 0; i < n; i++) {
for (j = i + 1; j < n; j++)
if (a[i] === a[j]){j=false;break;}
if(j)b.push(a[i]);
}
//console.info((new Date).getTime()-a1)  
return b.sort(function(a,b){return a-b});
}

srcs = removeRepeat(srcs);