Sausage.js - किसी भी कोड को कॉल की श्रृंखला में बदलने के लिए एक पुस्तकालय

मुझे लगता है कि हर कोई जो कम से कम एक बार अपने तरीके से कैनवस के पार आया था, वह बहुत असहज नहीं था। किसी भी संदर्भ पैरामीटर को बदलने या किसी विधि को कॉल करने के लिए कैनवस के साथ काम करते समय, आपको पहले संदर्भ का उपयोग करना होगा, और फिर विधि / संपत्ति - यह बहुत कष्टप्रद है।

मुझे हमेशा यह कोड चाहिए:

var ctx = document.querySelectorAll('canvas')[0].getContext('2d'); ctx.fillStyle = '#eee'; ctx.strokeStyle = 'blue'; ctx.beginPath(); ctx.moveTo(10, 10) ctx.lineTo(100, 10) ctx.lineTo(100, 100) ctx.lineTo(10, 100) ctx.lineTo(10, 10) ctx.closePath() ctx.stroke() ctx.fill(); 

एक श्रृंखला में बदलो:

 ctx .fillStyle('#eee') .strokeStyle('blue') .beginPath() .moveTo(10, 10) .lineTo(100, 10) .lineTo(100, 100) .lineTo(10, 100) .lineTo(10, 10) .closePath() .stroke() .fill(); 

Sausage.js - 1268 बाइट्स (जल्द ही एक किलोबाइट से कम होगा), आपकी समस्याओं को हल कर रहा है।
"ल्यूक, __noSuchMethod__ का उपयोग करें" - और सभी चीजें, आप कहते हैं। लेकिन प्रागैतिहासिक ब्राउज़र समर्थन के बारे में क्या?
सभी जो कैनवस के प्रति उदासीन नहीं हैं, कॉल की श्रृंखला और लिस्प के लिए मैं कैट के तहत पूछता हूं

क्यों सॉसेज और लिस्प का इससे क्या लेना-देना है?

यह कोड (क्रॉस-ब्राउज़र, पहले ब्लॉक के समान है) का उपयोग Sausage.js द्वारा किया जा सकता है।

 //     (function(getContext, querySelectorAll, fillStyle, strokeStyle, beginPath, moveTo, lineTo, closePath, stroke, fill){ var canvasContext = $$(document)(querySelectorAll, 'canvas')(0)(getContext, '2d')(); $$(canvasContext, {fixedContext: true}) (fillStyle, '#eee') (strokeStyle, 'blue') (beginPath) (moveTo, 10, 10) (lineTo, 100, 10) (lineTo, 100, 100) (lineTo, 10, 100) (lineTo, 10, 10) (closePath) (stroke) (fill) (); }('getContext', 'querySelectorAll', 'fillStyle', 'strokeStyle', 'beginPath', 'moveTo', 'lineTo', 'closePath', 'stroke', 'fill')); 

ऐसी जंजीरें सॉसेज की तरह होती हैं - इसीलिए सॉसेज.जेएस कहा जाता है, यहां कोई लिस्प नहीं है, निश्चित रूप से, प्रेमी बड़ी संख्या में कोष्ठकों की सराहना करेंगे :)

__NoSuchMethod__ का अनुकरण क्यों नहीं?

हर बार जब मैंने संदर्भ बदला, तो मुझे संदर्भ के सभी तरीकों और गुणों के आसपास जाना होगा और सभी के लिए एक फ़ंक्शन बनाना होगा - यह महंगा और लंबा था, इसलिए मैंने इनकार कर दिया (मैं इसे बाद में करूंगा), लेकिन फ़ंक्शन चेन का उपयोग करके समान दृश्य के लिए नेतृत्व किया।

प्रारंभ में, मैंने __noSuchMethod__ को जोड़ने की योजना नहीं बनाई थी, लेकिन फिर मैंने फैसला किया कि यह सही होगा। और सॉसेज लाइब्रेरी का नाम अब आंशिक रूप से अपना अर्थ खो चुका है।

__NoSuchMethod__ का समर्थन करने वाले ब्राउज़र किसी भी सुविधाजनक रूप में सॉसेज के साथ काम कर सकते हैं:

 $$(canvasContext, {fixedContext: true}) (fillStyle, '#eee') (strokeStyle, 'blue') .beginPath() (moveTo, 10, 10) (lineTo, 100, 10) .lineTo(100, 100) (lineTo, 10, 100) (lineTo, 10, 10) (closePath) .stroke() .fill() (); 

सॉसेज.जेएस उदाहरण

उदाहरण 1. संदर्भ को बदलना

 context = {'foo': {'bar': '100500'}, 'bar': '888', 'zoo': /./}; //     {'foo': {'bar': '100500'}, 'bar': '888', 'zoo': /./} result = $$(context) ('foo') //     {'bar': '100500'} ('bar', -1) //   ('zoo') //    zoo (); //    - undefined ..   foo  / zoo 

उदाहरण 2. निश्चित संदर्भ

 context = {'foo': {'bar': '100500'}, 'bar': '888', 'zoo': /./}; //     {'foo': {'bar': '100500'}, 'bar': '888', 'zoo': /./} result = $$(context, {fixedContext: true}) ('foo') //     {'bar': '100500'} ('bar', -1) //   ('zoo') //    zoo (); //    - /./ 

उदाहरण 3. कॉलिंग फ़ंक्शन - संदर्भ मान को बदलना

 context = {'foo': 1}; //     {'foo': 1} result = $$(context) ('foo', 1000) //     (function (context) { //      return '' + context.foo / 2; //    -  '500' }) ('length') //      (function (context) { return typeof context; //    -  'number' }) (); //    number 

उदाहरण 4. DOM आवरण

 result = $$(document) ('getElementById', 'div1') ('style') ('width', '100px') //   ({ //     /    height: '100px', color: 'red', border: 'solid 1px blue' }) (); // CSSStyleDeclaration Object 

उदाहरण 5. एक jQuery आवरण

 result = $$(jQuery) (['#div2']) //       - ,        ('css', {width: '100px', height:'100px', color: 'red', border: 'solid 1px blue'}) ('animate', {width: '200px', height:'200px'}) (); // jQuery 

रूपरेखा

प्रोफाइलिंग शुरू करने के लिए, आपको संस्करण को प्रोफाइलर से चालू करने और प्रोफाइलिंग शुरू करने की आवश्यकता है।

 $$.profile(); //    console && console.dir($$.profileEnd()); 

नतीजतन, हम प्राप्त करते हैं

 [anonymous function] Object { calls=2, time=0} [context call] Object { calls=1, time=0} [switching context] Object { calls=7, time=0} animate Object { calls=1, time=5} bar Object { calls=2, time=0} width Object { calls=1, time=0} 

विपक्ष

- सुविधा के लिए, विधियों / गुणों के एक शब्दकोश को संकलित करना आवश्यक है (यदि आप सॉसेज नोटेशन का उपयोग करते हैं)
- अलविदा स्वसंचालित (यदि आप सॉसेज नोटेशन का उपयोग करते हैं)
- थोड़ा धीमा चुनौती
- बिंदु संकेतन के मामले में, उन विधियों / गुणों को कॉल करना असंभव है जो फ़ंक्शन हैं (लंबाई, कॉल, लागू, ...) यह असंभव है - $$([1,2,3]).length()(); , यह संभव है - $$([1,2,3])('length')();

आकर्षण आते हैं

- शब्दकोश के कारण, एक बिंदु की कमी और जंजीरों का उपयोग - संपीड़न के बाद कोड की मात्रा में एक महत्वपूर्ण कमी
- प्रोफाइल प्रोफाइल को पार करने और कॉल की संख्या गिनने की क्षमता
- प्रसंस्करण "बंडल"

संदर्भ

लाइव उदाहरण jsfiddle.net/azproduction/LUXwY
टिप्पणियों के साथ अन पैक संस्करण (9168 बाइट्स) सॉसेज- js.googlecode.com/svn/trunk/Sausage.js
पैकेज्ड वर्जन (1268 बाइट्स) सॉसेज- js.googlecode.com/svn/trunk/Sausage.min.ds
सॉसेज- js.googlecode.com/svn/trunk/Sausage-profile.js प्रोफाइलर के साथ संस्करण

आलोचना, सुझाव और सुझाव का स्वागत है।

यूपीडी प्रोफाइलिंग विवरण जोड़ा गया