Zanaatta Maymun Yama Yapıyor | Biliş

0
20

Başlangıç ​​olarak, Monkey Patching günlük rutininizin bir parçası olmamalı ve bu uygulamayı sık sık kullanmamalısınız. Bu teknik, son çare olarak veya özellikle başka bir yaklaşım mümkün olmadığında kullanılmalıdır. Bu teknik aynı zamanda yalnızca “yama” mevcut işlevselliği etkilemediğinde kullanılmalıdır. Bunu müşteri projelerine uygularken, yalnızca duruma göre dikkate alınmalıdır. Paylaşmak istedik çünkü ilginç ve bazen bir sorunu çözmenin tek yolu bu, ancak kesinlikle farkında olunması gereken dezavantajlar var.

Asset Bundles aracılığıyla kendi JS’mizi yönetici kontrol paneline eklemek oldukça basittir, ancak bazen mevcut işlevsellik üzerinde piggyback yapmamız ve nadir durumlarda onu tamamen değiştirmemiz gerekir – örneğin, yakın tarihli bir projede yeni bir “sekme düğmesi” eklememiz gerekiyordu varsayılan Asset Image Editor’a. Monkey Patching adlı bir kavramın çok kullanışlı olduğu yer burasıdır.

Bekle, Maymun Yaması nedir?

Monkey Patching, kendinize ait “yamalı” bir sürüm sağlayarak bir programın işlevselliğini genişlettiğiniz veya değiştirdiğiniz bir tekniktir (Wikipedia’nın tanımına buradan bakın). Aşağıdaki örnekler JavaScript’te olacaktır, ancak Monkey Patching herhangi bir dilde kullanılabilen bir tekniktir

Hızlı bir örnek

Çoğunuz zaten bilmeden Monkey Patching kullanıyor olabilirsiniz. Her aradığınızda tarihi gösterecek olan console.log işlevini geçersiz kılmanın hızlı bir örneğini burada bulabilirsiniz. Tarayıcınızda deneyin.

const log = console.log; console.log = function () {const date = new Date log.apply (konsol,
[date.toUTCString()].concat (… bağımsız değişkenler)); } console.log (‘Foo Bar’); console.log ({Foo: ‘Bar’});

Şimdi, nitty-cesurca

Daha önce belirttiğim gibi, senaryomuzda, varsayılan Varlık Görüntü Düzenleyicisine yeni bir “sekme düğmesi” eklemeye çalışıyoruz. Bu düğmeyi tıkladığınızda, kullanıcının seçebileceği ve görüntünün nasıl görüneceğini önizleyebileceği önceden tanımlanmış farklı “kırpma boyutları” olan yeni bir panel görmelisiniz.

Bizim sorunumuz, kullanıcıyı Varlık Görüntü Düzenleyicisini açan “dinlemek” için bir yol bulmamız gerektiğidir, böylece editör yüklendiğinde düğmemizi ve görünümlerimizi ekleyebiliriz. Maalesef bizim için, Craft’ın JS’si çok sıkı bir şekilde birleştirilmiştir (bu genellikle kötü bir şey değildir!), Bu da sınıflarının ve işlevlerinin yalnızca birbirleriyle çalışması amaçlanan belirli bir amacı olduğu anlamına gelir. Garnish kullandığından, bazı olaylar, stopPropagation () özelliğine sahip oldukları için DOM ağacını köpürmez. Düzenleyici yüklendiğinde görüşlerimizin de eklenmesi gerekir. Ek olarak, bir kullanıcı “kaydet” i tıkladığında, seçimini yeni bölmemize kaydedebilmemiz için “dinlememiz” gerekir.

Üç ana hedefimiz var:

Asset Image Editor açılışını dinleyin. Editor yüklendiğinde görünümlerimizi ekleyin. Save butonuna tıklayarak kullanıcıyı dinleyin.

Monkey Patching bize nasıl yardımcı olabilir?

Craft eklentimiz Asset Bundles kullanarak JavaScript’imizi ekledikten sonra, kodumuzla “maymunluk” yapmaya başlayabiliriz. Craft’ın Asset Image Editor yöntemlerine “yama” uygulamak için bir yardımcı program işlevi oluşturarak başlayacağız:

// utils.js dışa aktarma işlevi monkeypatch (Sınıf, yöntem, geri arama, geçersiz kılma = yanlış) {const methodFn = Sınıf.prototype[method]; Sınıf. Prototip[method] = işlev (… değiştirgeler) {if (! geçersiz kıl) {methodFn.apply (bu, bağımsız değişkenler); } callback.call (bu, args[0]); }}

Parçalayalım! Bu işlev 4 argüman kabul eder: yamalamaya çalıştığımız yöntemi içeren JS sınıfı; gerçek yöntem adı; geri arama işlevimiz; ve isteğe bağlı bir geçersiz kılma yöntemi.

Yaptığımız ilk şey, daha sonra kullanmamız gerekirse diye mevcut yöntemin bir örneğini kaydetmektir. Daha sonra sınıfın prototipinde yamalamaya çalıştığımız yöntemi bir işlevle geçersiz kılıyoruz. Bu işlev, mevcut yöntemin geçersiz kılınmaması gerekip gerekmediğini kontrol eder – öyleyse, çağırın ve son olarak, orijinal yöntemle aynı bağlam ve bağımsız değişkenlerle geri arama işlevimizi çağırın.

Ana JS dosyamızda şöyle bir şey yapabiliriz:

// main.js {monkeypatch} dosyasını ‘./utils’den içe aktarır; ‘./patches’dan {loadEditorPatch, showViewPatch, saveImagePatch} içe aktarın; const AssetImageEditorClass = Craft.AssetImageEditor; monkeypatch (AssetImageEditorClass, ‘EditorLoad’, loadEditorPatch, true); monkeypatch (AssetImageEditorClass, ‘showView’, showViewPatch, true); monkeypatch (AssetImageEditorClass, ‘saveImage’, saveImagePatch, true);

Artık bir yardımcı program işlevimiz olduğuna ve onu içe aktardığımıza göre, Asset Image Editor Class için bazı yöntemleri yamalamaya başlayabiliriz. Kaynak koduna baktıktan sonra yama yapmamız gereken yöntemlerin ‘EditorLoad’, ‘showView’ ve ‘saveImage’ olduğunu buldum.

“EditorLoad” yöntemine yönelik yamamız, Asset Image Editor açılışını dinlememize olanak tanır ve görünümlerimizi ekler; “showView” yöntemi, düzenleyicideki farklı bölmeler arasında geçiş yapmamızı sağlar; ve son olarak, “saveImage” yöntemi, kullanıcı seçimini arka uca kaydetmemizi sağlar. Yama işlevlerimizin içindekiler, bu örnek için mutlaka önemli değildir, ancak bu, Monkey Patching’in başka türlü mümkün olmayacak işlevleri eklemenize nasıl izin verdiğini gösterir.

Sonuç olarak, Monkey Patching, başka hiçbir yaklaşımın uygulanabilir görünmediği uç durumlar için harika bir tekniktir. Kaynak koda erişiminiz olmayan mevcut çerçevelerden işlevselliği genişletmenize veya tamamen değiştirmenize olanak tanır. Her şeyde olduğu gibi, kullanım durumlarına ve sürdürülebilirliğe karşı dikkatli olmalısınız. Hızlı sürümler, yamanızın çalışmayı durdurmasına ve daha da kötüsü kırılmasına neden olabilir, ancak doğru kullanılırsa, bu tekniği yalnızca Craft’ın Kontrol Panelini değil, hemen hemen her şeyi genişletmek için kullanabilirsiniz.

* Sorumluluk Reddi: Lütfen riski size ait olacak şekilde kullanın. Belgelenen API’lerin dışına çıkarken değişiklikler herhangi bir anda bozulabilir. Mutlu Kodlama!

Başa dönüş

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz