არქივი February, 2009

JavaScript: arrayChunk

Feb 20 2009

დღეს კოდის წერისას დამჭირდა მასივის რამდენიმე თანაბარ ნაწილად დაყოფა, PHP – ს ამ ამოცანის გადასაჭრელად გააჩნია შესაბამისი array_chunk() ფუნქცია, მაგრამ, JavaScript – ს მსგავსი არაფერი გააჩნია.

ეს არის ე.წ. quick solution ამ ამოცანის გადასაჭრელად:

1
2
3
4
5
6
7
function arrayChunk(array, size) {
    var start = 0, result = [], chunk = [];
    while((chunk = array.slice(start, start += size)).length) {
        result.push(chunk);
    }
    return result;
}

ფუნქცია ღებულობს ორ პარამეტრს 1) მასივი რომელიც გვინდა დავყოთ; 2) თითოეული დანაყოფის ზომა;

თუ ამ ფუნქციას შეასრულებთ FireBug – ის კონსოლში:

var a = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(arrayChunk(a, 2));

მიიღებთ შემდეგ შედეგს:

 [[1, 2], [3, 4], [5, 6], [7, 8], [9]]

შედეგიდან გამომდინარე ფუნქციის საბოლოო რეზულტატი თვალსაჩინოა, იგი აბრუნებს სასურველი(ამ შემთხვევაში 2) ზომის მასივების მასივს.

დამატებითი დეტალების ახსნისგან თავს შევიკავებ რადგან ფუნქცია უმარტივესია, თუმცა ძალიან სასარგებლო :)

ტეგები:

კომენტარები »

jCSS – რელიზის კანდიდატი

Feb 18 2009

დაუღალავი და საკმაოდ მძიმე შრომის შემდეგ დღეს ყველა ჩემს ხელთ არსებულ ვებ ბრაუზერში უნიტ ტესტებმა მწვანე აანთო :D რაც ნიშნავს იმას რომ jCSS – მა ყველა მითითებული ტესტი გაიარა წარმატებით(იხ. jCSS Test Suite).

picture-31

ამ ეტაპისთვის ცოტას შევისვენებ და შემდეგ მოვუვლი კოდში არსებულ ინდუიზმს რომლისაც ცოტა არ იყოს და მრცხვენია. იმედი მაქვს რომ კვირის ბოლოს 1.0 ვერსიის რელიზს მოვასწრებ.

ტეგები: , ,

6 კომენტარი »

jCSS – CSS Selector Engine

Feb 12 2009

Hi all, ესე იგი მინდა წარმოგიდგინოთ ჩემი ერთერთი პატარა პროექტი სახელად jCSS. იგი წარმოადგენს JavaScript – ზე დაწერილ ე.წ. CSS Selector Engine – ს რომლის მეშვეობითაც მარტივად შეძლებთ HTML დოკუმენტის DOM ელემენტების ძებნას და რეზულტატის მიღებას ტიპიური CSS სელექტორების გამოყენებით.

მინდა აღვნიშნო რომ არავისთვის კონკურენციის გაწევას არ ვაპირებ ანუ jQuery, Mootools, Seezle და ა.შ. :D ეს არის ჩემი პირადი ექსპერიმენტი რომელსაც გარდა პრაქტიკული დანიშნულებისა გააჩნია წმინდა შემეცნებითი დატვირთვა და ამ მინი პროექტზე მუშაობისას ჩემს ძირითად ამოცანას წარმოადგენდა DOM ელემენტებში ნავიგაციისა და ციკლების წარმადობის კვლევა. ნებისმიერ შემთხვევაში სკრიპტი სრულად ფუნქციონალურია და შეგიძლიათ გამოიყენოთ.

წარმადობისა და რეალიზებული CSS სელექტორების ტესტი შეგიძლიათ ნახოთ აქვე. ტესტირებისათვის ვიყენებ Mootools – ის ავტორის მიერ შექმნილ ტესტირების სისტემას სახელად SlickSpeed ასე რომ შედეგებში ტენდენციურობა გამორიცხული :D შედარებისათვის გარდა jCSS – ისა ტესტში გამოვიყენე jQuery – ისა და Mootools – ის ბოლო სტაბილური ვერსიები.

გადაწერეთ jCSS!

გამოყენების მაგალითები:

1
2
3
4
var els = jCSS('#my-element-id div.my-class-name ul a');
for (var i = 0; i < els.length; i++) {
   //do something wit elements
}

სულ ეს არის და ეს, ამ ეტაპზე მეტის დაწერას აზრი არ აქვს. თუ თქვენს მოსაზრებებსაც გამიზიარებთ ძალიან ძალიან გამახარებთ.

enjoy :)

Update:
განვაახლე jCSS აწი უფრო სწრაფია FF, Opera და IE – ში.

SlickSpeed Benchmark: http://www.code.ge/jcss-test/slickspeed/

დავამატე Unit Test Suite ბრაუზერებს შორის და სხვადასხვა ტიპის სელექტორების იმპლემენტაციის სისწორის კონტროლისათვის:
Unit Test Suite: http://www.code.ge/jcss-test/slickspeed/frameworks/test/

Update:

  • დაიფიქსა ყველა ძირითადი ბაგი;
  • დაიხვეწა და განვითარდა Query Parser;
  • დაემატა ყველა ე.წ. ფსევდო კლასების მხარდაჭერა გარდა nth-child და nth-last-child ფსევდო კლასებისა;
  • კომპლექსური ფსევდო კლასების მხარდაჭერა;
  • დავამატე DOM ელემენტების სორტირება ნეითივ სელექტორების მიერ დაბრუნებულ რეზულტატებთან თავსებადობის გამო. თუმცა ამან წარმადობა შედარებით დაწია IE – სა და Opera – ში.
  • დაიხვეწა კონტექსტური პარამეტრების მხარდაჭერა, გარდა DOM ელემენტისა კონტექსტურ პარამეტრად შესაძლებელია გამოვიყენოთ როგორც სელექტორი ასევე DOM ელემენტების მასივი. მაგ:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
      var nodes = jCSS(
       'div > p.paragraph-class-name',
       document.getElementById('my-element-id')
     );

     var nodes = jCSS(
       'div > p.paragraph-class-name',
       '#my-element-id:visible'
     );

     var nodes = jCSS(
      'a em',
      document.getElementsByTagName('h1')
     );
  • განვაახლე SlicckSpeed ანუ დავამატე YUI!, Prototype და Peppy სელექტორ ენჯინები;

    SlickSpeed Benchmark: http://www.code.ge/jcss-test/slickspeed/

  • განვაახლე და გავამდიდრე UnitTest ფრეიმვორკი:

    Unit Test Suite: http://www.code.ge/jcss-test/slickspeed/frameworks/test/

კომპლექსური სელექტორების იმპლემენტაცია საშუალებას იძლევა ელემენტები მოვძებნოთ დაახლოვებით მსგავსი სელექტორების გამოყენებით:

1
2
3
4
5
#form option:not(:contains('Nothing'),#option1b,:selected)

#form option:not(:not(:selected))[id^='option3']

:input:not(:image,:input,:submit)

ამ ეტაპზე ნეითივ სელექტორები გათიშული მაქვს Safari, Chrome, IE8 და FF3.1 – სთვის უკუთავსებადობის სრული ტესტირებისათვის. გარდა მაგისა არც ნეიტივ სელექტორები არ არის სრულყოფილად რეალიზებული და ნებისმიერ შემთხვევაში საჭიროა ე.წ. Custom Implmentation(განსაკუთრებით ეს ეხება IE8 – ს).

ტეგები: , , ,

4 კომენტარი »

PHP: Array Tricks Part 1

Feb 07 2009

ამ პოსტს ჩემი ერთი მეგობრის თხოვნით ვწერ რომელთანაც გუშინ საუბარი მქონდა PHP – ს მასივებსა და for/foreach კონსტრუქციებთან მუშაობის შესახებ.

მასივები PHP – ს ერთერთი ყველაზე ძლიერი და განვითარებული მხარეა და შესაბამისად შეიცავს უამრავ ნიუანსს. ხშირ შემთხვევაში ასეთი ნიუანსები გამოუცდელი თუ გამოცდილი პროგრამისტების მიერ იგნორირებული რჩება და ამის შედეგად ვღებულობთ საკმაოდ დაუხვეწავ და სრულიად ზედმეტ კოდს.

ამ პოსტში მაქსიმალურად შევეცდები გადმოვცე ის დეტალები რაც PHP – სთან წლების მანძილზე მუშაობით შევიძინე და იმედი მაქვს რომ ეს ინფორმაცია თქვენთვისაც სასარგებლო იქნება. სრულად »

ტეგები:

8 კომენტარი »