Các tính năng ẩn của MooTools

Question

Các tính năng ẩn hoặc che khuất của MooTools mà mọi nhà phát triển MooTools cần lưu ý là gì?

Một tính năng cho mỗi câu trả lời, vui lòng.

Answer 1

Có rất nhiều tính năng mà người ta có thể sử dụng nếu bạn đọc mã nguồn, mặc dù dòng chính thức là: if it's not in the documentation, it is not in the api and it's not supported so do not base your code around it as it may change

đó đang được nói, có một vài điều mà thực sự có thể khá hữu ích. Một trong những yêu thích của tôi tính năng cung cấp tài liệu là:

Elements Được tham chiếu có một uid

Bất kỳ yếu tố đó đã hoặc đang được tạo ra hoặc được chuyển qua một chọn, được giao một tài sản uid, đó là gia tăng và độc đáo . Kể từ MooTools 1.4.2, điều này chỉ có thể đọc được qua Slick.uidOf(node) và không thông qua attr phần tử cũ .uid. Bây giờ bạn có thể sử dụng thuộc tính uniqueNumber mới của bất kỳ đối tượng Phần tử MooTools nào.

Làm cách nào để sử dụng? Để bắt đầu, lưu trữ phần tử. Nó dựa trên uid là khóa trong đối tượng Storage bên trong một đóng, mà sẽ có bất cứ điều gì bạn có .store 'd cho phần tử đó.

element.store('foo', 'bar'); 

dịch để:

Storage[Slick.uidOf(element)].foo = 'bar'; 

và

element.retrieve('foo'); // getter of the storage key 
element.eliminate('foo'); // delete Storage[Slick.uidOf(element)].foo 

Khởi tạo lưu trữ cho một yếu tố bạn đã tạo ra bên ngoài, ví dụ như, qua var foo = document.createElement('div') và không tố constructor

Slick.uidOf(foo); // makes it compatible with Storage 

// same as: 
document.id(foo); 

Th ing được lưu trữ bởi các khuôn khổ vào lưu trữ cũng bao gồm tất cả các cuộc gọi lại events, validators trường hợp, Fx trường hợp (tween, morph vv) và vv.

Bạn có thể làm gì khi biết UID của các phần tử? Vâng, nhân bản một phần tử KHÔNG nhận được sự lưu trữ hoặc các sự kiện của phần tử. Bạn thực sự có thể viết một mẫu thử nghiệm Element.cloneWithStorage mới cũng sẽ sao chép tất cả các giá trị được lưu trữ mà bạn có thể có, rất hữu ích cho một điểm - trường hợp tham chiếu đến một phần tử cụ thể (chẳng hạn như Fx.Tween) sẽ tiếp tục tham chiếu thành phần cũ. có kết quả không mong muốn. Điều này có thể hữu ích trong việc di chuyển bộ nhớ của riêng bạn, tuy nhiên, tất cả những gì bạn cần là một phương pháp tương tự sẽ ghi lại những gì bạn đã lưu trữ và cho phép bạn sao chép nó.

Ví dụ lưu trữ thủng dữ liệu khác của Element:

var foo = new Element('div'), 
    uid = foo.uniqueNumber; 

foo.store('foo', 'foo only'); 

var bar = new Element('div'); 

console.log(bar.retrieve('foo')); // null 

bar.uniqueNumber = uid; // force overwrite of uid to the other el 

console.log(bar.retrieve('foo')); // foo only - OH NOES 

console.log(Object.keys(foo)); // ["uniqueNumber"] - oh dear. enumerable! 

Answer 2

Function.prototype.protect là có thể là một ít được biết đến một tốt đẹp.

Được sử dụng đã được bảo vệ phương pháp trong các lớp:

var Foo = new Class({ 

    fooify: function(){ 
     console.log('can\'t touch me'); 
    }.protect(), 

    barify: function(){ 
     this.fooify(); 
    } 

}); 

var foo = new Foo(); 
foo.fooify(); // throws error 
foo.barify(); // logs "can't touch me" 

Cá nhân tôi không sử dụng nó rất thường xuyên, nhưng nó có thể có ích trong một số trường hợp.

Answer 3

Function.prototype.overloadGetter và Function.prototype.overloadSetter

Xem bài đăng này: What does MooTools' Function.prototype.overloadSetter() do?

Answer 4

Lớp Đột biến

MooTools có một tính năng tuyệt vời cho phép bạn tạo mutators Lớp của riêng bạn. Ví dụ, để thêm một logger cho các phương pháp lớp học đặc biệt được tham khảo, bạn có thể làm:

// define the mutator as 'Monitor', use as Mointor: ['methodname', 'method2'...] 
Class.Mutators.Monitor = function(methods){ 
    if (!this.prototype.initialize) this.implement('initialize', function(){}); 
    return Array.from(methods).concat(this.prototype.Monitor || []); 
}; 

Class.Mutators.initialize = function(initialize){ 
    return function(){ 
     Array.from(this.Monitor).each(function(name){ 
      var original = this[name]; 
      if (original) this[name] = function() { 
       console.log("[LOG] " + name, "[SCOPE]:", this, "[ARGS]", arguments); 
       original.apply(this, arguments); 
      } 
     }, this); 
     return initialize.apply(this, arguments); 
    }; 
}; 

và sau đó trong Class:

var foo = new Class({ 

    Monitor: 'bar', 

    initialize: function() { 
     this.bar("mootools"); 
    }, 

    bar: function(what) { 
     alert(what); 
    } 

}); 

var f = new foo(); 
f.bar.call({hi:"there from a custom scope"}, "scope 2"); 

Thử jsfiddle: http://jsfiddle.net/BMsZ7/2/

đá quý nhỏ này có là công cụ để tôi bắt gặp các vấn đề về điều kiện đua ngựa trong một ứng dụng web không đồng bộ HUUUGE mà rất khó để theo dõi ngược lại.

Answer 5

tôi khuyên bạn nên đọc tuyệt vời Up the Moo Herd loạt bởi Mark Obcena, tác giả của Pro Javascript With MooTools     :)

Answer 6

Một trong những tính năng yêu thích của tôi mà tôi học được sau nhưng ước gì tôi biết ngay từ đầu - pseudos sự kiện, đặc biệt là :once.

Xem http://mootools.net/docs/more/Class/Events.Pseudos#Pseudos:once