Primefaces Query WidgetVar By Css Selector : javascript

        เอาไว้ query primefaces widgetVar instance ด้วย css class selector ครับ เช่น บางทีเราอยากได้ widgetVar dialog ของ primefaces เราก็จะใช้ classSelector = 'ui-dialog'

 PrimefacesQuery.js

/**
 * @author redcrow  
 * create 20/05/2014
 * code http://na5cent.blogspot.com/2014/05/primefaces-query-widgetvar-by-css.html 
 */
PrimefacesQuery = (function(global) {

    function forEachProperty(object, callback, ctx) {
        for (var prop in object) {
            if (object.hasOwnProperty(prop)) {
                callback.call(ctx, object[prop], prop, object);
            }
        }
    }

    function getWidgetVar(classSelector) {
        var list = [];
        forEachProperty(global, function(value) {
            is(value, classSelector) && list.push(value);
        });

        return list;
    }

    function is(object, classSelector) {
        try{  
            return object && object.jq
                    && object.jq.attr
                    && object.jq.attr('class')
                    && object.jq.attr('class').indexOf(classSelector) !== -1;
        }catch(e){ //protect security policy for accessing some object, can't access by external script
            return false;
        } 
    }

    return {
        /**
         * @param {String} classSelector - css class selector (of widgetVar) such as 'ui-dialog'
         * @returns {Array} array of widgetVar objects
         */
        queryWidgetVar: function(classSelector) {
            return getWidgetVar(classSelector);
        }
    };
})(window);

Example to use

//multiple widget dialogs
var widgetVarDialogs = PrimefacesQuery.queryWidgetVar('ui-dialog');
//

jQuery plugin photo center

        สำหรับจัดภาพ ให้อยู่กึ่งกลางของ  parent tag <img/> ไม่ว่าภาพจะมีขนาดเท่าใดก็ตาม และ parent tag จะมีรูปทรง 4 เหลี่ยมขนาดเท่าใดก็ตาม ภาพจะถูกจัดให้อยู่กึ่งกลางเสมอ (ตามอัตราส่วน parent)

TextHighlighter javascript

Primefaces dialog listener javascript

move marker position google map : jsf primefaces

get arguments name from function javascript

การดึง arguments name จาก funtion javascript พอดีช่วงนี้ผมกำลังหาวิธีทำ Dependency injection javascript อยู่ครับ ด้วยการใช้ arguments name ใน function ไปค้นหา implementation ของ arguments นั้นๆ ตอนนี้ทำแบบ eager load script ได้แล้ว เหลือแต่ lazy load script ครับ

 Functions.js

        
var Functions = (function(String) {

    //This regex is from require.js
    var FUNCTION_ARGUMENT_REGEX_PATTERN = /^function\s*[^\(]*\(\s*([^\)]*)\)/m;

    // protect old browser not support method trim
    if (!String.prototype.trim) {
        String.prototype.trim = function() {
            return this.replace(/^\s+|\s+$/g, '');
        };
    }

    return {
        /**
         * regular expression pattern for get arguments name in the function
         */
        FUNCTION_ARGUMENT_REGEX_PATTERN: FUNCTION_ARGUMENT_REGEX_PATTERN,
        /**
         * code from http://stackoverflow.com/questions/20058391/javascript-dependency-injection
         *
         * @param {Function} func
         * @throws Error
         * @returns {Array<String>} - array of arguments name
         */
        getArgumentsName: function(func) {
            if (typeof func !== 'function') {
                throw new Error('require parameter as a function');
            }

            var args = func.toString().match(FUNCTION_ARGUMENT_REGEX_PATTERN)[1].split(',');
            var length = args.length;
            for (var i = 0; i < length; i++) {
                args[i] = args[i].trim();
            }

            return args;
        }
    };
}).call(this, String);

Example to use

function test1(id, name, info){
 
}

function test2(userService){
 
}

function test3(pid, hcode, budgetYear, departmentId){
 
}

console.log(Functions.getArgumentsName(test1));
console.log(Functions.getArgumentsName(test2));
console.log(Functions.getArgumentsName(test3));

custom css console log google chrome

syntax

//
var logMessage = '%c YOUR_WORDING %c YOUR_WORDING  %c YOUR_WORDING';
console.log(logMessage , style1, style2, style3, styleN...);
//

วิธีการ

1. เราอยากให้ style ที่เราเขียนเกิดขึ้นที่ไหน เราก็ใส่ %c หน้าตัวอักษรของ logMessage ตัวนั้น
2. %c แต่ละตัว  ส่งผ่าน parameter ต่อท้าย string logMessage เป็น style1, style2, style3, styleN...

จากที่ผมลองทดสอบดู firefox ก็ได้เหมือนกันครับ

query string matcher javascript

javascript library สำหรับเอาไว้ check ว่า browser query string นั้นตรงตาม parameter ที่เราใส่เข้าไปหรือไม่  ซึ่งถ้าตรงตามทั้งหมดมันก็จะเรียกที่ callback function นั้นๆ

ผมเอาไว้ทำระบบ auto อะไรสักอย่าง  เวลาที่เราทำการ refresh หน้าเว็บ หรือเปลี่ยน url ของ web site แล้ว query string นั้นตรงตามที่เราต้องการ  มันก็จะทำตามคำสั่งที่เราได้เขียนไว้ใน callback function ครับ

integrate period algorithm : javascript

บทความนี้เป็นการแปลง code จากบทความที่แล้ว (integrate period algorithm : java) ให้มาเป็น javascript ครับ

สิ่งที่นำไปประยุกต์ใช้
การ highlight keyword ที่เกิดการเหลื่อมกัน ระหว่างคำ https://github.com/jittagornp/index-search-javascript/blob/master/src/main/webapp/indexsearch.js

Utils.js

function empty(list) {
    return list === null || list.length === 0;
}

function notEmpty(list) {
    return !empty(list);
}

function isUndefined(object) {
    return typeof object === 'undefined';
}

function defined(object) {
    return !isUndefined(object);
}

function notDefined(object) {
    return isUndefined(object);
}

blogspot search plugin

นำ code ต่อไปนี้ไปวางใน blog
parameter ที่ต้องใส่เข้าไปคือ

1. {string} blogspotURL (require) - url blog ของคุณ 
2. {string} targetElementId (require) - html id ที่ต้องการให้แสดงผล
3. {object} languages - ภาษา ตาม key เลยครับ
4. {array} additionalDictionaries - keyword เพิ่มเติม  เพิ่มให้ง่ายต่อการค้นหา

แค่นี้ก็สามารถใช้งาน blog search เหมือน na5cent ได้แล้วครับ

simple

/**
 * blogspot search plugin
 * by index methodology
 * url : https://github.com/jittagornp/index-search-javascript
 * 
 * @author jittagorn pitakmetagoon
 * create 10/12/2013
 */
(function(document, settings) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.setAttribute('class', 'ns-blogsearch-script');
    script.setAttribute('data-blogspot-url', settings.blogspotURL);
    script.setAttribute('data-element-id', settings.targetElementId);
    script.setAttribute('data-slide-search', settings.slideSearch);
    script.async = true;

    script.src = 'https://rawgithub.com/jittagornp/index-search-javascript/master/blogspot/blogspot.js';
    document.getElementsByTagName('head')[0].appendChild(script);
})(document, {
    //settings
    blogspotURL: 'http://na5cent.blogspot.com', //url of your blogspot
    targetElementId: 'mySearch', //target html element id for search box
    slideSearch : true //for make left slide search
});

additional

/**
 * blogspot search plugin
 * by index methodology
 * url : https://github.com/jittagornp/index-search-javascript
 * 
 * @author jittagorn pitakmetagoon
 * create 10/12/2013
 */
(function(document, JSON, settings) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.setAttribute('class', 'ns-blogsearch-script');
    script.setAttribute('data-blogspot-url', settings.blogspotURL);
    script.setAttribute('data-element-id', settings.targetElementId);
    script.setAttribute('data-languages', JSON.stringify(settings.languages || {}));
    script.setAttribute('data-additionalDictionaries', (settings.additionalDictionaries || []).join(','));
    script.setAttribute('data-slide-search', settings.slideSearch);
    script.async = true;

    script.src = 'https://rawgithub.com/jittagornp/index-search-javascript/master/blogspot/blogspot.js';
    document.getElementsByTagName('head')[0].appendChild(script);
})(document, JSON, {
    //settings
    blogspotURL: 'http://na5cent.blogspot.com', //url of your blogspot
    targetElementId: 'mySearch', //target html element id for search box
    slideSearch : true, //for make left slide search
    languages: {//language for show in search box
        SEARCH: 'search',
        FOUND: 'found',
        NOT_FOUND: 'not found',
        POSITIONS: 'positions on',
        SENTENCES: 'sentences',
        DO_YOU_MEAN: 'do you mean',
        CLEAR: 'clear',
        PLACE_HOLDER : 'search...'
    },
    additionalDictionaries : [
         //array of string (keywords)
    ]
});

reference : https://github.com/jittagornp/index-search-javascript

คำสั่ง call และ apply javascript

        call และ apply มีหน้าที่การทำงานเหมือนกัน  คือ

"เอาไว้เรียกใช้งาน method javascript ที่ต้องการ  โดยสามารถส่ง parameter ผ่านทาง call และ apply ไปยัง method นั้นๆ ได้"

        สิ่งที่แตกต่างกันคือ 

call ส่งผ่าน parameter แบบ one by one ไปยัง method ที่ถูกเรียก (ส่วนมากจะใช้ในกรณีที่รู้ parameter แบบแน่นอนตายตัว)

ส่วน apply  จะส่งผ่าน parameter แบบ array ไปยัง method ที่ถูกเรียก (ใช้ในกรณีที่ parameter เป็นแบบ dynamic : http://na5cent.blogspot.com/2013/04/dynamic-callback-argument-javascript.html) 

call และ apply สามารถเปลี่ยน context ของ method ที่ถูกเรียกได้  โดยการส่ง context จากภายนอกเข้าไปแทน context ภายใน

มาดูตัวอย่างการใช้งานกันดีกว่า ผมขอยกตัวอย่างง่ายๆ  เพื่อง่ายต่อความเข้าใจน่ะครับ

var Computation = function(a, b){
   this.a = a || 0;
   this.b = b || 0;
};

Computation.prototype.add = function(a, b){
   this.a = a || this.a;
   this.b = b || this.b;

   return this.a + this.b;
};

Computation.prototype.minus = function(a, b){
   this.a = a || this.a;
   this.b = b || this.b;

   return this.a - this.b;
};

การเรียกใช้แบบทั่วๆ ไป ก็ไม่มีอะไรมากครับ

Agents.js (modify code jquery browser)

Agents.js

var Agents = (function(window) {
    var userAgent = window.navigator.userAgent.toLowerCase();

    var match = /(chrome)[ \/]([\w.]+)/.exec(userAgent) ||
            /(webkit)[ \/]([\w.]+)/.exec(userAgent) ||
            /(opera)(?:.*version|)[ \/]([\w.]+)/.exec(userAgent) ||
            /(msie) ([\w.]+)/.exec(userAgent) ||
            userAgent.indexOf('compatible') < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec(userAgent) || [];

    var platformMatch = /(ipad)/.exec(userAgent) ||
            /(iphone)/.exec(userAgent) ||
            /(android)/.exec(userAgent) || [];

    var name = match[1] || '';
    var version = match[2] || '';
    var platform = platformMatch[0] || '';
    var engine = '';

    if (name === 'chrome') {
        engine = 'webkit';
    } else if (name === 'webkit') {
        name = 'safari';
        engine = 'webkit';
    } else if (name === 'mozilla') {
        name = 'firefox';
        engine = 'mozilla';
    } else if (name === 'msie') {
        engine = 'trident';
    }

    var isChrome = (name === 'chrome');
    var isFirefox = (name === 'firefox');
    var isMSIE = (name === 'msie');
    var isSafari = (name === 'safari');
    var isWebkit = (engine === 'webkit');
    var isTrident = (engine === 'trident');
    var isMozilla = (engine === 'mozilla');

    return{
        getName: function() {
            return name;
        },
        getVersion: function() {
            return version;
        },
        getPlatform: function() {
            return platform;
        },
        getEngine: function() {
            return engine;
        },
        isChrome: function() {
            return isChrome;
        },
        isFirefox: function() {
            return isFirefox;
        },
        isMSIE: function() {
            return isMSIE;
        },
        isSafari: function() {
            return isSafari;
        },
        isWebkit: function() {
            return isWebkit;
        },
        isTrident: function() {
            return isTrident;
        },
        isMozilla: function() {
            return isMozilla;
        }
    };
})(window);

/**
* example to use
*
* Agents.getName();
* Agents.getVersion();
* Agents.getPlatform();
* Agents.getEngine();
*
* Agents.isChrome();
* Agents.isFirefox();
* Agents.isMSIE();
* Agents.isSafari();
*
* Agents.isWebkit();
* Agents.isTrident();
* Agents.isMozilla();
*/

thank you :  http://api.jquery.com/jQuery.browser/

ผลงาน open source ชิ้นที่ 2 index search javascript

Index Search Javascript 
githup :  https://github.com/jittagornp/index-search-javascript

(ชิ้นที่ 1 google cloud print for java : https://github.com/jittagornp/GoogleCloudPrint)


        มันคือระบบ search  ของ blog ผมเองครับ  ไอ้ที่ดำๆ สไลด์ๆ  ด้านข้างนั่นแหล่ะครับ
เอาไปใช้ได้เลยครับ  free เพราะนี่คือ opensource  แต่อย่าลืมดู licence น่ะครับ  ว่าเขาบังคับอะไรบ้างครับ

มันทำอะไรได้บ้าง  ทำไมผมต้องทำใหม่  ในเมื่อ blog เองก็มีระบบ search ให้ ?

คำตอบ คือ  ผมต้องการมากกว่าที่ blog มีให้ผม  และอีกอย่างผมอยากลองสร้างอะไรเจ๋งๆ  ที่มีประโยชน์  ด้วยตัวเองดูครับ

แล้วอะไรบ้างล่ะที่บอกว่าต้องการมากกว่า

ข้อดี

ความเร็ว 
        blog จะไป search จาก server ของ google แต่ระบบนี้ search จาก browser เลยครับ  ซึ่งมันเร็วกว่ากันอยู่แล้ว  และที่เร็วกว่านั้นอีก  เร็วกว่าการเขียน search ด้วย javascript ธรรมดาๆ  คือ เพราะผมทำเป็น index search ครับ  คือแทนที่จะ scan จากบทความทั้งหมด  ก็ให้ไป search จาก index  แทน  พอรู้ตำแหน่งว่าบทความนั้นอยู่ตรงไหน  ก็ไปดึงออกบทความนั้นๆมาโดยตรงเลย

สะดวก
        ช่วยตัดความรำคาญ จากการ search ของ blog ครับ  เพราะ search แต่ละทีต้อง refresh หน้าเว็บ  ไปๆ  มาๆ  ทุกครั้ง  และอีกอย่างไม่รู้ด้วยว่าไอ้บทความที่เรา search ไปมันจะมีหรือไม่มี  ตัวก็  blog ไม่ได้บอกด้วยครับ พอเรา search ปั๊ป  มันกระโดดไปหน้าผลลัพธ์เลย  ซึ่งตรงนี้แหละที่ผมรำคาญมากๆ  เสียเวลาทำมาหากินหมด  และสำหรับ blog ผมๆ ก็ทำให้มันเป็น slide search อยู่ด้านข้างซ่ะ  สะดวกดีครับ

keyword highlighting
        มี highlight ระหว่าง search รู้ได้ทันทีว่าคำนี้มีอยู่ใน blog หรือไม่  ซึ่งมันก็ช่วยให้เราไม่ต้อง click เปลี่ยนหน้าไปๆ  มาๆ  เหมือนระบบ search blog

หมวดหมู่
        มีการจัดเก็บข้อมูลในลักษณะที่เป็น tree คือทำข้อมูลที่จะ search จะเป็น tree กีชั้นก็ได้  เหมาะกับการจัดทำหมวดหมู่ของบทความขึ้นมาครับ

แนะนำคำใกล้เคียง
        มีระบบแนะนำคำใกล้เคียง  ในกรณีที่เราพิมพ์แล้วไม่มีคำๆนั้นอยู่ใน blog  มันก็จะไปดึงเอาคำใกล้เคียงมาให้แทน  ซึ่งก็ช่วยผมได้เยอะเลยครับ  เวลาผมจำอะไรไม่ได้  หรือสะกดคำไม่ถูก

auto post menu
        มี plugin สำหรับดึง post ทั้งหมดของ blog มาให้โดยที่เราไม่ต้อง add บทความเอง คือ post ปุ๊ป  มันจะไปอยู่ใน list search ทันที

        มันช่วยผมได้เยอะจริงๆ น่ะครับ  ผมอยากจะบอกว่าคุ้มมาก  กับระบบ search ที่ผมทำไว้  เพราะผมต้องทำงาน  แก้งาน  อยู่ทุกวัน  เรื่องใหม่ก็เข้ามาเรื่อยๆ  เรื่องเก่าก็ต้องจำให้ได้  พูดตามตรง  ผมจำไม่หมดหรอกครับ  ระบบ search นี่แหล่ะที่ช่วยชีวิตผมไว้  ถ้าคุณมีบทความเยอะๆ  แล้วได้ใช้ระบบนี้  คุณจะติดใจครับ  ผมรับประกัน  เพราะมันสะดวกมากกกกกก



พูดถึงข้อดีไปเยอะล่ะ  มาดูข้อเสียกันบ้างครับ

ข้อเสีย

ค้นหาบางคำ  อาจจะไม่เจอ
        การค้นหาบางคำ  อาจจะไม่เจอ  เนื่องจากผมทำเป็น index  จึงทำให้ การค้นหาคำภาษาไทยบางคำ  หรือคำภาษาอังกฤษบางคำ  อาจจะไม่เจอ เพราะผมยังทำระบบตัดคำไม่ได้ครับ  ผมใช้วิธีการแยกคำด้วยช่องว่าง (white space) มาใช้สำหรับการตัดหรือแยกคำ  ซึ่งมันก็ได้ผลดีสำหรับคำภาษาอังกฤษ  ส่วนภาษาไทย  ก็ไม่ค่อยได้ครับ  เพราะภาษาไทยนั้นเราเขียนคำติดกัน  แต่ผมก็มีวิธีแก้  ด้วยการใช้  dictionary มาตัดคำ  ซึ่งก็คือเอาไอ้ที่แยกด้วย white space นั่นแหล่ะครับ  มาทำ dictionary เพื่อตัดคำ  แต่มันก็ได้บ้างไม่ได้บ้าง แต่ว่าผมก็มีทางแก้อื่นอีก  ด้วยการยอมให้ add dictionary จากภายนอกเพิ่มเติมได้  ก็เลยทำให้สามารถค้นหาคำบางคำเจอครับ  ทำให้มีประสิทธิภาพมากขึ้น

ยังไม่เป็น full text search
        ตอนนี้ยังไม่เป็น full text search  แต่อนาคตต้องเป็นแน่ๆ  ครับ



        ต่อไปในอนาคต  ผมตั้งใจจะทำระบบตัดคำภาษาไทยเอง  คือให้โปรแกรมมันเรียนรู้คำและตัดคำเองครับ  ก็คงต้องใช้เวลาอีกสักพักครับ  ถ้าได้  ผมก็จะเอามาแชร์ให้ทุกคนเอาไปใช้งานอีก

        ทำไมผมต้องทำแจก  เพราะผมอยากให้ web ไม่ใช่แค่ในไทย  แต่รวมถึงทั้งหมด  มีระบบ search เจ๋งๆ  บ้างเถอะครับ  เพราะบางทีผมหาข้อมูล  พอไปเจอ web ดีๆ  ก็ search ซ่ะยากเลย  กว่าจะ search ได้ความขี้เกียจ + ความรำคาญมาก่อนล่ะ

        ทีนี้สำหรับคนที่มาเห็นบทความนี้  พอได้อ่านแล้ว  ผมก็อยากให้ลองเอาไปใช้ดูน่ะครับ  ผมเชื่อว่า web คุณจะดูหล่อขึ้นเยอะเลย  เพราะผมเชื่อว่าส่วนน้อยครับ  ที่จะมีแบบนี้

 ขอให้สนุกกับการใช้งานครับ

AVL tree : javascript

AVLNode.js

/**
 * @author   redcrow
 * @link     http://na5cent.blogspot.com/2013/06/avl-tree-javascript.html
 * @create   25/06/2013
 */
var AVLNode = function(item) {
    var item_ = item || null;
    var left_ = null;
    var right_ = null;
    var height_ = 0;

    this.getItem = function() {
        return item_;
    };

    this.getLeft = function() {
        return left_;
    };

    this.setLeft = function(node) {
        left_ = node;
    };

    this.getRight = function() {
        return right_;
    };

    this.setRight = function(node) {
        right_ = node;
    };

    this.getHeight = function() {
        return height_;
    };

    this.size = function(node) {
        if (node === null) {
            return 0;
        } else {
            return size(node.getLeft()) + size(node.getRight()) + 1;
        }
    };

    this.preorderPrint = function(padding) {
        padding = padding || '';
        padding = '--' + padding;

        console.log(padding + item_);

        if (left_ !== null) {
            left_.preorderPrint(padding);
        }

        if (right_ !== null) {
            right_.preorderPrint(padding);
        }
    };

    this.inorderPrint = function(padding) {
        padding = padding || '';
        padding = '--' + padding;

        if (left_ !== null) {
            left_.inorderPrint(padding);
        }

        console.log(padding + item_);

        if (right_ !== null) {
            right_.inorderPrint(padding);
        }
    };

    this.postorderPrint = function(padding) {
        padding = padding || '';
        padding = '--' + padding;

        if (left_ !== null) {
            left_.postorderPrint(padding);
        }

        if (right_ !== null) {
            right_.postorderPrint(padding);
        }

        console.log(padding + item_);
    };
};

ImageLoader (lazy load image and automatic reposition) : javascript, jQuery

คงมีคำถามว่าเอาไว้ทำอะไร โผล่ขึ้นมาในหัวแน่นอน ใช่มั้ยครับครับ

        ผมเอาไว้ load image แบบ lazy ครับ  คือไว้โหลดรูปภาพมาทีหลัง  หลังจากที่ load หน้าเว็บ หรือ ขึ้นโครงหน้าเว็บเสร็จ  สำหรับคนที่ทำ page speed ก็คงจะเข้าใจครับ  ว่านี่เป็นวิธีการนึง  ที่จะทำให้หน้าเว็บ  คุณโหลดเร็วขึ้น

        และมันยังจัด position ให้เราอัตโนมัติด้วย  เช่น  บางทีโหลดมาแล้ว  เราต้องมานั่งคำนวณเองว่า image size ขนาดนี้  ต้อง margin เท่านี้  เพื่อจัดให้มันอยู่ตรงกลางพอดี    ถ้า image เล็กไป  มันก็ไม่เต็ม frame  หรือ image ใหญ่ไป  มันก็ล้นออกจาก frame อีก  น่าปวดหัวครับ  ถ้าจะต้องมานั่งคำนวณใหม่  เองทั้งหมด

        ใช้นี่แหล่ะครับ  ง่ายสุดๆล่ะ  ให้ผมปวดหัวคนเดียวก็พอครับ  คนอื่นๆ  เชิญเอาไปใช้ ง่ายๆ  สบายๆ  เลยครับ

example to use
html

    <div style="width : 100px; height : 200px;">
        <img class="lazy" src="http://na5cent.blogspot.com/images/fakeImage.jpg" data-source="http://na5cent.blogspot.com/images/user.jpg"/>
    </div>

src="http://na5cent.blogspot.com/images/fakeImage.jpg" คือ image ที่มี size เป็น 1x1 pixel ไว้ป้องกัน image error ตอน load หน้าเว็บครับ
data-source="http://na5cent.blogspot.com/images/user.jpg" คือ image จริงๆ ที่จะแสดงครับ

css

    .image-wrapper{
        overflow : hidden;
    }

javascript

    var imageLoader = new ImageLoader();
    imageLoader.load('img.lazy').then(function(image, status){
        console.log(image.attr('src'));
    }); 

AMD : Asynchronous Module Definition

        การเขียน  web application ขนาดใหญ่  การจัดการ javascript ถือเป็นเรื่องยุ่งยากมากๆ
เพราะจะมี  file javascript นับพัน หนับหมื่น file   มันคงจะลำบากน่าดู  ถ้าเราจะใช้ tag <script src=""></script> ในการ include script ต่างๆ  เข้ามาด้วยตัวเราเอง  และปัญหาเรื่องของการขึ้นตรงต่อกัน (dependencies)ของ javascript ในแต่ละ file  เช่น  file A ขึ้นตรงต่อ file B ถ้า file A ไม่ถูก load มา  file B ก็ จะ  error  เพราะไม่สามารถเรียกใช้งาน module ที่อยู่ใน file A ได้

        ตอนนี้มี tool หลายๆตัวที่โปรแกรมเมอร์ ระดับโลกเขาเขียนขึ้นมา  เพื่อช่วยในการจัดการ ปัญหานี้   (facebook ก็ใช้ในการจัดการ javascript เหมือนกัน) tool ตัวนี้คือ AMD เป็น javascript  design pattern สมัยใหม่ (AMD : Asynchronous Module Definition)  ที่เอาไว้ประกาศ (define) module แบบ asynchronous แล้วก็เรียกใช้งาน  module ที่ประกาศไว้แบบ  asynchronous เช่นกัน  คือ  มันจะทำการ load module ต่างๆ  ที่เราได้ประกาศไว้มาให้เอง ครับ

ถ้าใครสนใจ  ก็ลองหาศึกษาดูครับ   ซึ่งตอนนี้ตัวที่ผมกำลังมองๆ อยู่ก็จะเป็น require js ตาม link นี้
http://requirejs.org/

cookie serializer javascript

example to use

var values =  [
    { name : 'AAA', value : 'aaa' },
    { name : 'BBB', value : 'bbb' },
    { name : 'CCC', value : 'ccc' }
];

var options = {
    separateKeyValue : ':',
    separateBlock = ',',
    path = '/',
    expire = 1 //day
};

var serializer = new na5cent.CookieSerializer('CKL', values, options); 
//CKL=AAA:aaa,BBB:bbb,CCC:ccc

serializer.get('AAA'); //aaa
serializer.set('AAA', 'xyz');
serializer.get('AAA'); //xyz
serializer.get('BBB'); //bbb

Singleton pattern javascript

        Singleton pattern คือ pattern การเขียน class ที่มี instance เดียว  ไม่สามารถ new instance ขึ้นมาใหม่ได้  เอาไว้ใช้ในกรณีที่เราต้องการทำอะไรซักอย่างที่มันมี instance เดียว  มี reference ถึงตัวเดียว  เช่น  class ที่เอาไว้เก็บค่า config ต่างๆ ไว้ครับ

var Context = (function() {

    var _instance;

    var _init = function() {
        var map_ = {};

        this.getAttribute = function(key) {
            return map_[key];
        };

        this.setAttribute = function(key, value) {
            map_[key] = value;

            return this;
        };

        this.removeAttribute = function(key) {
            delete map_[key];

            return this;
        };

        this.attributeSize = function() {
            return map_.length;
        };
    };

    return{
        getInstance: function() {

            if (!_instance) {
                _instance = new _init();
            }

            return _instance;
        }
    };
})();


/**
 * example to use
 *
 * var context = Context.getInstance();
 * if (!context.getAttribute('class')) {
 *       context.setAttribute('class', {});
 * }
 */

dynamic callback argument : javascript

var dynamic = function(arguments, callback){
    callback.apply(this, arguments);
};
  
//ส่ง array parameter เข้าไป 2 ตัว ได้ callback  arguments  ออกมา 2 ตัว 
dynamic([1, 2], function(a, b){
    console.log('a =>' + a);
    console.log('b => ' + b);
});
   
console.log('-------------------------------------');
   
//ส่ง array parameter เข้าไป 3 ตัว ได้ callback  arguments  ออกมา 3 ตัว
dynamic([1, 2, 3], function(a, b, c){
    console.log('a =>' + a);
    console.log('b => ' + b);
    console.log('c => ' + c);
});
   
console.log('-------------------------------------');
 
//ส่ง array parameter เข้าไป 5 ตัว ได้ callback  arguments  ออกมา 5 ตัว  
dynamic([1, 2, 3, 4, 5], function(a, b, c, d, e){
    console.log('a =>' + a);
    console.log('b => ' + b);
    console.log('c => ' + c);
    console.log('d => ' + d);
    console.log('e => ' + e);
});

ก็จะมีคำถามว่าผมเอามาใช้ทำอะไร?

check type javascript

var na5cent = {};

na5cent.Types = (function() {

    function _is(data, type) {
        return Object.prototype.toString.call(data) === '[object ' + type + ']';
    }

    return {

        isFunction: function(data) {
            return _is(data, 'Function');
        },

        isArray: function(data) {
            return _is(data, 'Array');
        },

        isString: function(data) {
            return _is(data, 'String');
        },

        isNumber: function(data) {
            return _is(data, 'Number');
        },

        isObject: function(data) {
            return _is(data, 'Object');
        },

        isRegExp: function(data) {
            return _is(data, 'RegExp');
        }
    };
})();



console.log('na5cent.Types.isFunction(function(){}) => ' + na5cent.Types.isFunction(function() {}));
console.log('na5cent.Types.isFunction("nascent") => ' + na5cent.Types.isFunction('nascent'));
console.log('na5cent.Types.isArray([]) => ' + na5cent.Types.isArray([]));
console.log('na5cent.Types.isArray("nascent") => ' + na5cent.Types.isArray('nascent'));
console.log('na5cent.Types.isString("nascent") => ' + na5cent.Types.isString('nascent'));
console.log('na5cent.Types.isString(5) => ' + na5cent.Types.isString(5));
console.log('na5cent.Types.isNumber("nascent") => ' + na5cent.Types.isNumber('nascent'));
console.log('na5cent.Types.isNumber(2) => ' + na5cent.Types.isNumber(2));
console.log('na5cent.Types.isObject("nascent") => ' + na5cent.Types.isObject('nascent'));
console.log('na5cent.Types.isObject({}) => ' + na5cent.Types.isObject({}));
console.log('na5cent.Types.isRegExp({}) => ' + na5cent.Types.isRegExp({}));
console.log('na5cent.Types.isRegExp(/w/) => ' + na5cent.Types.isRegExp(/w/));
//