JavaScript

2011/May/18

แบบจำลอง Terminal Emulator ที่สร้างด้วย Javascript สามารถเรียนรูปคำสั่ง ต่างๆ หรือหลัการทำงานของ Linux OS ได้ด้วยแบบจำลองตัวนี้  

 

2009/Sep/02

     



      มาต่อกันเลยนะครับจาก สนุกกับ "Ubiquity" Firefox Add on จากโลกอนาคต จาก entry ที่แล้ววันนี้เราลองมาสร้าง  Ubiquity Command เล่นกัน command ที่ใช้เขียนมาจาก javascript  ดังนั้นคนที่เขียน javascript อยู่แล้วก็สบายหน่อย  เราอาจจะเขียน command ที่เราใช้งานบ่อยๆขึ้นมาเองโดยใช้เวลาไม่นาน และ coding เองก็มีไม่กี่บรรทัด ยิ่งถ้าเราเขียน JQuery  ได้แล้วล่ะก็ยิ่งทำให้การเขียนของเราสั้นและก็ยืดหยุ่นมากขึ้น เพราะ  Ubiquity สนับสนุน Jquery เป็นทุนเดิมอยู่แล้ว  

 

    Ubiquity มี APIs หลักๆ หรือ  Utility Class ให้เราสามารถเรียกใช้งานอยู่เยอะพอสมควร เช่น

    * Utils
    * CmdUtils
    * NounUtils
    * EventHub
    * WebJsModule
    * FeedManager
    * AnnotationService
    * Message Services
    * Locked-Down Feed Plugin
    * Parser 2
    * Built-in Noun Types 


     การใช้งานและวิธีการพัฒนาสามารถดูได้จากที่นี้ https://wiki.mozilla.org/Labs/Ubiquity/Ubiquity_0.5_Author_Tutorial (สำหรับ version 0.5 )  เราสามารถเขียน คำสั่งโดยใช้  command Template  โดยการพิมพ์  about:ubiquity ที่ช่อง address แล้ว click ตรงเมนู  hack ubiquity ก็จะมี  editor และ command template  ให้เราได้ใช้ หรือจะใช้ code editor อย่างเช่น editplus ในเครื่องเราก็สามารถเลือกใช้ได้  




ดูตัวอย่างการเขียน command   "say hello"

CmdUtils.CreateCommand({
names: ["say hello"],
execute: function hello_execute() {
displayMessage("Hello, World!");
}
});

 

CmdUtils.CreateCommand เป็น  Utility Class ที่ใช้ในการสร้าง Command ในที่นี้จะสร้างคำสั่งที่ีมีชื่อว่า "say hello" ถ้ามีการเรียกใช้งานคำสั่งนี้ จะแสดงข้อความแสดงคำว่า "Hello, World!" ขึ้นมา

 

 ผลลัพธ์

 
การติดตั้ง Commands

    ทำได้โดย สร้างและบันทึก  code เป็น sayhello.js  และสร้างหน้า page  html  ขึ้นมาแ้ล้วทำการ reference code  javascript ตามตัวอย่างด้านล่าง

<html>
<head>
<title>Say Hello</title>
<link rel="commands" href="sayhello.js"/>
</head>
<body>
</body>
</html>

เมื่อเรา run  html page หน้านี้ขึ้นมาจะมี tab ตามรูปด้านล่าง




ให้กด Subscribe จะขึ้นหน้าต่างตามรูปด้านล่าง




ให้กด "I  Know what I'm doin. Subscribe to it!" ก็เป็นอันเรียบร้อย นอกจากนั้นเราสามารถเข้าไป unsubscribe ที่ about:ubiquity > your commands

*Tips
     เราสามารถแก้ไข code จาก souce code ได้เลยหลังจาก subscribe  ไปแล้ว  เพราะ   Ubiquity จะอับเดต code ให้เราเองโดยอัตโนมัติ

 
ทีนี้เรามาลองเขียน command ที่ชื่อว่า  "exteen recent blog

เป้าหมาย
command นี้จะดึงเอา  Recenly Updated หรือ  blog ล่าสุดที่มีคนเขียนขึ้นมาแบบ Realtime และเมื่อเราำื enter command จะทำการ redirect ไปหน้า http://www.exteen.com/recent เพื่อทำการดูข้อมูลทั้งหมด

 

หลักการและวิธีการ
  เป็นการดึงโดยใช้ Http Request หรือ Ajax โดยใช้ Method GET และใช้  Utility  ของ  Ubiquity APIs ในการดึงและใช้ jQuery Parse Html ผลที่ได้พร้อมกับ filtter เฉพาะค่าที่เราต้องการโดยใช้ JQuery Selectors แล้วทำการจัดรูปแบบการแสดงใหม่


ส่วนของ Command Code

CmdUtils.CreateCommand({
name:["exteen recent blog"],
icon:"http://g.exteen.com/i/g/logo.gif",
_baseUrl:"http://www.exteen.com/recent",
preview:function(pBlock){
CmdUtils.previewGet(pBlock,this._baseUrl, function(recent) {
var msg="<b>Exteen Command RecentUpdate</b> 
By CodeSnippet.exteen.com <br/><br/> ";
jQuery(recent).find("#recent > ul > li").each(function(e){
msg+= _ ('<img src="${blogavatar}">&nbsp;${blogname} 
<b>Wrote: ${entryname}</b><br/>',
{blogname:$(this).find(".blogname").text()
,entryname:$(this).find(".entryname").html()
,blogavatar:$(this).find("img").attr("src")});
});
pBlock.innerHTML=  msg;     
});
},
execute:function(){
Utils.openUrlInBrowser(this._baseUrl);
}    
});

การติดตั้ง
     
     เหมือนกับการติดตั้งที่ได้อธิบายด้านบน หรือ สามารถ ติดตั้งได้จากที่นี้   Subscribe "exteen recent blog"


การใช้งาน

     ก่อนอื่นต้องติดตั้ง  Ubiquity Add on  ใน  firefox โดยไปที่ https://addons.mozilla.org/en-US/firefox/addon/9527  หลังจากนั้น กด Clrt+Space พิมพ์คำสั่ง  exteen recent blog ก็จะแสดง  entry ที่เพิ่ง post ล่าสุดของ exteen 
    

 ขอให้สนุกนะครับ :P

2009/Mar/13

1. Be lazy  

JQuery ควรจะเรียก   fuction  โดยตรงไม่จำเป็นต้องมีการตรวจสอบซ้ำซ้อน

// Don't
if ($('#item').get(0)) {
    $(
'#item').someFunction();
}

// Or
if ($('#item').length) {
    $(
'#item').someFunction(); }

// Just do
$('#item').someFunction();

2.  Use shortcuts
เลือกที่จะเขียนแบบลัด เร็วกว่าที่จะเขียนแบบยาว โดยที่มีความหมายเหมือนกัน

// You can but..
$(document).ready(function(){
   
// ...
});

// There is a shorter equivalent
$(function(){
  
// ...
});

 3.  Chain

จุดเด่นข้อหนึ่งของ Jquery  คือการเขียนแบบต่อเนื่องหรือการเขียนแบบห่วงโซ่

// Don't
$('#frame').fadeIn();
$(
'#frame .title').show();
$(
'#frame a:visited').hide;

// Do
$('#frame').fadeIn()
    .find(
'.title').show().end()
    .find(
'a:visited').hide();

4.  Group queries

การ  selector แบบกลุ่มเราสามารถใช้เครื่องหมาย  , (comma)  หมายถึง  Or (หรือ)

// Ugly
$('div.close').click(closeCallback);
$(
'button.close').click(closeCallback);
$(
'input.close').click(closeCallback);

// Not ugly
$('div.close, button.close, input.close')
    .click(closeCallback);

 5.   Select siblingd like a pro

// Don't
$('#nav li').click(function(){
    $(
'#nav li').removeClass('active');
    $(
this).addClass('active');
});

// Do
$('#nav li').click(function(){
    $(
this).addClass('active')
        .siblings().removeClass(
'active');
});

6.  Use each and map

ควรใช้ $.each  หรือ $.map  กับ  Array  Object

// Try to avoid
var output = [];
for (var i=0;i < arr.length; i++) {
    output.push(arr[i]);
}

// Do
var output = $.map(arr, function() {
    ...
});

// Or
var output = [];
$.each(arr,
function(index, value) {
    output.push(value);
});

7.  Use namespace

การกำหนด namespace  ใน event

$(
'input').bind('blur.validation', function(e){
   
// ...
});

ใน data method ยอมรับการใช้ namespaces

$(
'input').data('validation.isValid', true);

8.  triggerHandler is great

triggerHandler มีประโยชน์ในการสร้าง custom events แทนที่เราจะเขียนแบบนี้


var refreshFrame = function() {
    $(
'#frame').load('http://reddit.com');
};

$(
'.button').click(refreshFrame);

refreshFrame();

เราควรจะเขียนแบบนี้


$(
'.button').click(function() {
    $(
'#frame').load('/page/frame.html');
}).triggerHandler(
'click');

// You can also use a shortcut
$('.button').click(function() {
    $(
'#frame').load('/page/frame.html');
}).click();

9.  Custom events

ในบางสถานการณ์ครั้งมันอาจจะช่วยเรามาก อย่างเช่น การห่อหุ้ม(Encapsulate) plugins

$('.button').click(function() {
    $(
'div#frame').load('/page/frame.html', function(){
        $(
this).triggerHandler('frameLoaded');
    });
});

// PluginA.js
$('#frame').bind('frameLoaded', function(){
    $(
this).show('slide', {direction: 'top'});
});

// PluginB.js
$('div').bind('frameLoaded', function(){
   
// do something else
});

10. Test

JQuery สามารภทำ  Unit Testing  ได้จาก  QUnit    เช่น

module("A simple test");

test(
"The frame should appear #button is clicked", function() {
  expect(
1);
  $(
'#button').click();
  ok($(
'#frame').is(':visible'),