सारांश :

कुछ उच्च-क्रम वाले फ़ंक्शंस लें, फ़ंक्शंस का एक आंशिक अनुप्रयोग जोड़ें, मानचित्र के साथ गुना सीज़न करें, और DOM के साथ काम करने के लिए जावास्क्रिप्ट DSL प्राप्त करें।

मानव भाषा में :
शुद्ध और स्पष्ट जावास्क्रिप्ट में कार्यात्मक प्रोग्रामिंग के लिए एक सरल और स्पष्ट परिचय।

हास्केल थ्रोंस के विपरीत , सब कुछ चबाया जाता है (शायद बहुत अधिक) और अलमारियों पर बिछाया जाता है।

लेख को पढ़ने से वास्तविक जीवन में वायुसेना की अनुपयुक्तता के मिथक का खुलासा होगा। आप एक ही समस्या के समाधान को विभिन्न दृष्टिकोणों से देख सकते हैं। जैसा चित्र में है।

कार्यों

चलिए एक साधारण फ़ंक्शन परिभाषा के साथ शुरू करते हैं।

function add(a,b){ console.log(a+b); }; 

आप एक ही कोड को अलग तरीके से लिख सकते हैं।

 var add = function(a,b){ console.log(a + b); }; 

जावास्क्रिप्ट के महान लाभों में से एक यह है कि इसमें कार्य पूर्ण-ऑब्जेक्ट हैं। वास्तविक प्रथम श्रेणी के नागरिक।
इसके विपरीत, उदाहरण के लिए, जावा, जहां एक फ़ंक्शन किसी ऑब्जेक्ट से अलग से मौजूद नहीं हो सकता है।

उपरोक्त फ़ंक्शन साइड इफेक्ट्स के साथ काम करता है, अर्थात यह बाहरी दुनिया की स्थिति को बदलता है। यह कंसोल.लॉग () का उपयोग करके व्यक्त किया गया है।

अब एक शुद्ध कार्य के एक उदाहरण पर विचार करें।

 var add = function(a,b){ return a + b; }; 

शुद्ध कार्य साइड इफेक्ट का उत्पादन नहीं करते हैं। आप उन्हें कुछ डेटा स्थानांतरित करते हैं, और वे आपको डेटा वापस देते हैं। उनका विश्लेषण करना बहुत आसान है। वे परीक्षण करने में आसान होते हैं। बाहरी निर्भरता की जांच करने की आवश्यकता नहीं है। इसलिए, ज्यादातर मामलों में, साइड इफेक्ट्स वाले कार्यों के लिए शुद्ध कार्य बेहतर होते हैं।
लेकिन, दूसरी ओर, विशेष रूप से शुद्ध कार्यों से युक्त एक कार्यक्रम व्यावहारिक अर्थ नहीं रखता है। वह कुछ भी पढ़ या आउटपुट नहीं करती है।
इसलिए, इस तरह से प्रोग्राम लिखना इस तरह से तार्किक होगा कि साइड इफेक्ट्स के साथ कार्यों से शुद्ध कार्यों को अलग किया जाए और इस प्रकार आपके जीवन को सरल बनाया जाए।

इसलिए, कार्यात्मक प्रोग्रामिंग का पहला नियम - हम लड़ाई क्लब के बारे में बात नहीं करते हैं - हम शुद्ध कार्यों का उपयोग करते हैं।

उच्च आदेश कार्य

हम और आगे जा रहे हैं। चूंकि फ़ंक्शंस ऑब्जेक्ट हैं, हम उन्हें अन्य फ़ंक्शंस में पास कर सकते हैं। और उच्च-क्रम फ़ंक्शन फ़ंक्शन हैं जो फ़ंक्शंस लौटाते हैं, या जो फ़ंक्शंस पैरामीटर के रूप में लेते हैं।

यहाँ एक फ़ंक्शन का एक सरल उदाहरण है जो एक फ़ंक्शन भी देता है।

 function makeAdder(base){ return function(num){ return base + num; } } 

और इसके उपयोग का एक उदाहरण है।

 var add2 = makeAdder(2); add2(3); //5 add2(7); //9 

सरल और स्पष्ट।

और यहाँ एक उच्च क्रम फ़ंक्शन का एक काफी प्रसिद्ध उदाहरण है

 var el = document.getElementById("btn"); el.addEventListener("click", function (event){ }); 

AddEventListener एक पैरामीटर के रूप में एक फ़ंक्शन प्राप्त करता है। यही है, addEventListener एक उच्च क्रम फ़ंक्शन है।

और जब कोई घटना घटती है तो हैंडलर फ़ंक्शन को बुलाया जाएगा।

शायद एक और विकल्प आपके लिए अधिक परिचित है:

 $("input[type=submit]").on("clink", function(event){ // ... }); 

या एक और हजार और एक तरह से jQuery हैंडलर का वर्णन करने की अनुमति देता है।

तो एक बार फिर परिभाषा:
FVP फ़ंक्शंस हैं जो या तो फ़ंक्शंस लौटाते हैं या फ़ंक्शंस को पैरामीटर के रूप में स्वीकार करते हैं।

चक्र

पुराने परिचित हैं।
चक्र से हमारा मतलब है मानक ललाट समाधान। कुछ इस तरह

 for(var i =0; i<n; ++1){ // } 

या ऐसे

 while(n--){ // ... } // ... 

हम छोरों का उपयोग क्यों करते हैं? आइए कुछ मानक उपयोग के मामलों को देखें और देखें कि लूप हमेशा सबसे अच्छा समाधान नहीं होते हैं।

पहला विकल्प सरणियों और सूचियों को पार करना है

 for(var i =0; l< arr.length; i<l; ++i){ console.log(arr[i]); } 

आमतौर पर, इस बाईपास का उपयोग साइड इफेक्ट के साथ किया जाता है। और आमतौर पर ये प्रभाव साधारण कंसोल आउटपुट की तुलना में थोड़ा अधिक उपयोगी होते हैं।

दूसरा विकल्प - सूचियों से डेटा खींचना

 var names = []; for (var i =0; l= tweeps.length; i< l; ++i) { names.push(tweeps[i].name); } 

इस मामले में, ट्विटर उपयोगकर्ताओं की एक सूची।
लूप का उपयोग करके, हमें अपने उपयोगकर्ता नामों की एक सूची मिलती है

एक अन्य उपयोग मामला एक सूची में डेटा एकत्रीकरण है:

 var html = ""; for(var i =0; l = items.length, i<l, i++){ html += '<li>' + items[i] + '</li>'; } this.list.innerHTML = html; 

यही है, हम सूची डेटा को एकत्र करते हैं, और हमें आउटपुट पर एक अलग डेटा संरचना मिलती है।

foreach

मैंने कहा कि लूप हमेशा सबसे अच्छा समाधान नहीं होते हैं, लेकिन विकल्प क्या हैं?

एक समान चक्र को क्या बदल सकता है?

 for (var i =1; l = arr.length; i< l; ++i){ console.log(arr[i]); } 

उदाहरण के लिए foreach ।

 Array.prototype.forEach arr.forEach(function(item){ console.log(item); }); 

अपने हाथों से सूची के माध्यम से चलने के बजाय, हम उपयोग कर सकते हैं
सरणी विधि। हम प्रत्येक तत्व को संसाधित करने वाले फ़ंक्शन में पास होते हैं और आवश्यक परिणाम प्राप्त करते हैं।

लेकिन इसके बीच बुनियादी अंतर क्या है?

 for (var i =1; l = arr.length; i< l; ++i){ console.log(arr[i]); } 

और यह

 arr.forEach(function(item){ console.log(item); }); 

?

दुर्भाग्य से, जेएस में कार्यों का वर्णन करने के लिए वाक्यविन्यास पर्याप्त है, इसलिए हमें लिखित पाठ की मात्रा में महत्वपूर्ण बचत नहीं मिली।

लेकिन कुछ और भी है। कोड को देखते हुए, हम कह सकते हैं कि प्रत्येक कार्यान्वयन में क्या ध्यान दिया जाता है।

पहला खंड चक्र के यांत्रिकी पर केंद्रित है। एक संख्या लें, इसे एक से बढ़ाएं, सूचकांक द्वारा एक सरणी तत्व प्राप्त करें, एक क्रिया करें।

दूसरा उदाहरण समझने में बहुत आसान है। हम सूची के प्रत्येक तत्व के साथ कुछ करते हैं।

दूसरे उदाहरण में, अमूर्तता का स्तर बहुत अधिक है। और यह आपको दूसरी तरफ से समस्या के समाधान के लिए दृष्टिकोण करने की अनुमति देता है।

तो, हम लूप का उपयोग करने के लिए क्या कर सकते हैं:

• साइड इफेक्ट
• परिवर्तन
• फिल्टर
• तत्वों का संयोजन
• विकल्पों का एक और गुच्छा

नक्शा

आइए एक और फ़ंक्शन देखें जो जावास्क्रिप्ट में है।

 var names = []; for( var i =0, l= tweeps.length, i< l; ++i){ names.push(tweeps[i].name); } 

यह एक अमूर्तता है जो एक सूची परिवर्तन से मेल खाती है।
मानचित्र का उपयोग करके , हम इस समस्या को बहुत आसान हल कर सकते हैं।

  //Array.prototype.map var names = tweeps.map(function (tweep){ return tweep.name; }); 

हमें चक्र के विवरण से अस्थायी चर से छुटकारा मिल गया। प्रत्यक्ष और स्पष्ट कोड। और चूंकि प्रोसेसिंग फ़ंक्शन काफी कम है, हम एक लाइन पर सब कुछ फिट कर सकते हैं।

 var names = tweeps.map(function(t){return t.name;}); 

मैं एक पंक्ति पर कोड लिखने का कट्टरपंथी नहीं हूं। लेकिन कितने विचारों को एक पंक्ति में व्यक्त किया जा सकता है, यह आपके एपीआई की अभिव्यक्ति के बारे में बोलता है।
अब ट्विटर पर उल्लेखों की तलाश करें।

 var str = "mentioned by"; for(var i =0; l= tweeps.length; i < l; ++i){ str += tweeps[i].name; if(i< tweeps.length-1) {str += ", "} } 

एक बल्कि भद्दी मिसाल। अनुक्रमणिका और सरणी तत्व प्राप्त करने के साथ त्रुटियों का एक गुच्छा हो सकता है।
आइए विश्लेषण करें कि हम वास्तव में इस उदाहरण में क्या करते हैं:

• हम उपयोगकर्ता के नाम निकालते हैं
• उपयोगकर्ता नाम मिलाएं (इस स्थिति में, सूची के अंत में अल्पविराम नहीं होना चाहिए)
• विभाजक के रूप में अल्पविराम का उपयोग करें

मानचित्र का उपयोग करके जुड़ना और इसमें शामिल होना

 var str = "mentioned by " + tweeps.map(function(t){ return t.name; }).join(", "); 

गलतियाँ करने के अवसर बहुत कम हो गए।
लेकिन क्या इसे बेहतर किया जा सकता है? :)
आइए एक और उच्च क्रम फ़ंक्शन का परिचय दें जिसका उपयोग हम वस्तुओं के गुणों तक पहुंचने के लिए करेंगे।

चलो उसे प्रोप कहते हैं

 function prop(name){ return function (object){ return object[name]; } } 

पहली नज़र में, यह काफी अर्थहीन है। हम इसमें नाम देते हैं,
और यह हमें उस फ़ंक्शन में लौटाता है जहां से ऑब्जेक्ट स्थानांतरित किया जाता है, जिसमें से हम आवश्यक फ़ील्ड को बाहर निकालते हैं।

किसी तरह का भ्रामक स्पष्टीकरण सामने आया। आइए इस फ़ंक्शन को वास्तविक कार्य पर उपयोग करने का प्रयास करें।

 var str = "Mentioned by " + tweeps.map(prop ("name")).join(", "); 

तो, एक और एक लाइनर। बहुत अच्छी अभिव्यक्ति। और प्रोप फ़ंक्शन इतना बेकार नहीं है।

को कम

यह, महामारी, जबकि अन्य और इसी तरह की संरचनाओं के लिए महान-दादी है। इस फ़ंक्शन को गुना के रूप में भी जाना जाता है।

आइए एक आदिम उदाहरण के साथ फिर से शुरू करें।

 var totalLength = 0; for(var i=0; i< buffers.length; i++){ total.Length += buffers[i].length; } 

बस बफ़र्स की लंबाई जोड़ें।
हमें किन चरणों का पालन करना चाहिए?

• बफर लंबाई प्राप्त करें
• सम लंबाई

फ़ंक्शन का उपयोग करें, ल्यूक।

पहले हम बफर लंबाई वाली एक सूची प्राप्त करने के लिए मानचित्र का उपयोग करते हैं

 var totalLength = buffers. map(function (buffer) {return buffer.length; }) 

और दूसरे चरण में, हम उनकी राशि प्राप्त करने के लिए कम लागू करते हैं।

 var totalLength = buffers. map(function (buffer) {return buffer.length; }). reduce(function(sum, curr){return sum+curr;}, 0); 

यदि आप कम से परिचित नहीं हैं, तो यह बहुत सरलता से काम करता है। बैटरी फ़ंक्शन को प्रेषित किया जाता है, जिसे प्रत्येक तत्व पर लागू किया जाएगा और बैटरी फ़ंक्शन के लिए प्रारंभिक मूल्य।

एक बार फिर, यह बहुत जटिल है। आइए देखें कि क्या होता है अगर हम एक साधारण सूची में कम लागू करते हैं।

 [10, 5, 15, 10, 10].reduce(function(sum, curr){return sum+curr;}, 0); // [10, 5, 15, 10, 10] // sum curr // => 0, 10 => 10 // => 10, 5 => 15 // => 15, 15 => 30 // => 30, 10 => 40 // => 40, 10 => 50 

तो, कम करने के साथ, हम आसानी से सूची आइटम जोड़ सकते हैं।

लेकिन हमारे पास पहले से ही कुछ ऐसा ही था। की तुलना करें।

 function (prev, curr){return prev + curr;} 

और

 function add(a,b){ return a+b; } 

इसलिए, हम बफ़र्स की कुल लंबाई की गणना करने के लिए हमारे फ़ंक्शन को सरल कर सकते हैं।

 var totalLength = buffers. map(function (buffer) {return buffer.length; }). reduce(add, 0); 

क्या यह अब स्पष्ट है? जोड़ने के समारोह का उपयोग कर सूची के सभी तत्वों को कम करें । राशि का प्रारंभिक मूल्य शून्य है। क्या आसान हो सकता है?

लेकिन सरलीकरण वहाँ समाप्त नहीं होता है। तुलना

 function (buffer) {return buffer.length; } 

और

 prop("length") 

पैंट बारी ...

 var totalLength = buffers. map(prop("length")). reduce(add, 0); 

सुरुचिपूर्ण शॉर्ट्स में।

ठीक है, निश्चित रूप से, हम इसे एक पंक्ति में लिख सकते हैं

 var totalLength = buffers.map(prop("length")).reduce(add, 0); 

लूप्स के बजाय कनवल्शन (कम) का उपयोग करने से हम अमूर्तता के एक अलग स्तर पर सोच सकते हैं। हम सूची पर संचालन करते हैं, न कि प्रत्येक तत्व के स्तर पर।

अतुल्यकालिक कॉल

लेकिन सूचियों को सारांशित करने के लिए उर्फ ​​गुना को कम करना एक बहुत ही सरल उदाहरण है। विचार अधिक शक्तिशाली है। आइए एक और उदाहरण देखें।

एक ब्राउज़र में जावास्क्रिप्ट का उपयोग करने में समस्याओं में से एक यह है कि सब कुछ एक ही धागे पर चलता है, और इसलिए हमें कॉलबैक का उपयोग करना चाहिए।

टास्क।

• कुछ स्क्रिप्ट डाउनलोड करें
• उन्हें गोंद
• ग्लूइंग करते समय स्क्रिप्ट का क्रम बनाए रखें

यही है, आपको कुछ इस तरह का कार्य लिखने की आवश्यकता है:

 combine(["/jquery.js", "/underscore.js", "/backbone.js"], function(content){ // content    ,    . }); 

आइए कंबाइन फ़ंक्शन के कार्यान्वयन को लिखें। पहला - ललाट दृष्टिकोण।

 function combine(scripts, callback){ var data []; for(var i =0; l = scripts.length; i< l; ++i){ // .... } } 

स्क्रिप्ट के लिए, jQuery.ajax का उपयोग करना तर्कसंगत होगा:

 function combine(scripts, callback){ var data []; for(var i =0; l = scripts.length; i< l; ++i){ jQuery.ajax({ url: scripts[i], success : function(response){ // .... } }); } } 

ऐसा कोड ब्राउज़र को धीमा नहीं करेगा, क्योंकि सर्वर से अनुरोधों को एसिंक्रोनस रूप से भेजा जाएगा। यही है, जब निष्पादित किया जाता है, तो 3 समानांतर प्रश्न होंगे।

हम सफल स्क्रिप्ट डाउनलोड के लिए एक हैंडलर लिखेंगे।

 function combine(scripts, callback){ var data []; for(var i =0; l = scripts.length; i< l; ++i){ jQuery.ajax({ url: scripts[i], success : function(response){ data[i] = response; if(data.length === scripts.length){ callback(data.join("")); } } }); } } 

ऐसा लगता है कि फ़ंक्शन तैयार है। लेकिन दो हैं लेकिन।
सबसे पहले, बदसूरत, और दूसरी बात - यह काम नहीं करेगा।

यहाँ क्या समस्या हो सकती है? जावास्क्रिप्ट स्कोप्स के साथ। इस भाषा में, गुंजाइश ब्लॉक-आधारित नहीं है, लेकिन कार्यात्मक है। अर्थात्, सभी 3 फ़ंक्शंस वैरिएबल i का समान मान देखेंगे। चूंकि सर्वर से प्रतिक्रिया आने से पहले चक्र काम करेगा, इसलिए सभी तीन कार्य i == 3 के साथ काम करेंगे;
यह समस्या एक मानक तरीके से हल की गई है - हम लूप चर के मूल्य को कैश करते हैं। लेकिन आप यह नहीं कह सकते कि इससे कोड अधिक सुंदर हो गया है।

 function combine(scripts, callback){ var data []; for(var i =0; l = scripts.length; i< l; ++i){ (function (i){ jQuery.ajax({ url: scripts[i], success : function(response){ data[i] = response; if(data.length === scripts.length){ callback(data.join("")); } } }); }(i)); } } 

लगभग काम भी करता है। क्लोजर और ट्रिकी वैरिएबल से छुटकारा पाने के लिए, आप फोरचेक का उपयोग कर सकते हैं

 function combine(scripts, callback){ var data []; scripts.forEach(function(script,i){ jQuery.ajax({ url: scripts[i], success : function(response){ data[i] = response; if(data.length === scripts.length){ callback(data.join("")); } } }); }); } } 

बेशक, बेहतर है, लेकिन अभी भी डरावना है। वैसे, कोड अभी भी सही ढंग से काम नहीं करेगा। इसे एक स्वस्थ स्थिति में जोड़ा जा सकता है, लेकिन इससे विकास और बाद के समर्थन में अतिरिक्त कठिनाइयां पैदा होंगी।

कंटीन्यू पासिंग स्टाइल

सिरदर्द से छुटकारा पाने के लिए, हम पुस्तकालय का उपयोग करेंगे

github.com/caolan/async

काम के लिए, हम सीपीएस जैसी चीज का उपयोग करेंगे।

यह वास्तव में है की तुलना में बहुत बुरा लगता है। यह एक ऐसा फंक्शन है जो एक अन्य फ़ंक्शन को एक पैरामीटर के रूप में प्राप्त करता है, और जब पहला फ़ंक्शन समाप्त होता है, तो यह रिट्रुन के बजाय पैरामीटर फ़ंक्शन को कॉल करता है।

वांछित परिणाम प्राप्त करने के लिए इस तरह से jQuery.ajax लपेटें।

 function ajax(url, callback){ jQuery.ajax({url: url, success: callback}); } 

फ़ंक्शन पैरामीटर के रूप में कॉलबैक प्राप्त करता है, और हमने एक त्रुटि हैंडलर का वर्णन नहीं किया है। यह वास्तविक कोड में होना चाहिए, लेकिन प्रस्तुति की सादगी के लिए, हम इसके बारे में भूल जाएंगे।
यदि आप Async लाइब्रेरी का उपयोग करते हैं तो क्या होता है? यह कुछ इस तरह से बाहर हो जाएगा:

 function combine(scripts, callback){ async.map(scripts, ajax, function(contents){ callback(contents.join("")); }); } 

हमारे पास एक रेडीमेड मैप फ़ंक्शन है जो अतुल्यकालिक दुनिया में काम करता है। वैसे, वर्तमान कार्यान्वयन हमारे ललाट उदाहरण के विपरीत, ग्लूइंग स्क्रिप्ट के लिए सही क्रम प्रदान करेगा।

जो था उससे तुलना करें:

 function combine(scripts, callback){ var data []; for(var i =0; l = scripts.length; i< l; ++i){ (function (i){ jQuery.ajax({ url: scripts[i], success : function(response){ data[i] = response; if(data.length === scripts.length){ callback(data.join("")); } } }); }(i)); } } 

चूँकि मैप मेरे लिए पहले से ही प्रोग्राम लिखने का एक स्वाभाविक तरीका है, इसलिए मैं ऊपर दिए गए कोड को कभी नहीं लिखूंगा। मुझे लगता है कि एक अतुल्यकालिक वातावरण के लिए नक्शे को कैसे अनुकूलित किया जाए। और अगर कोई एसिंक्स लाइब्रेरी नहीं होती, तो मैं खुद एसिंक्रोनस मैप लिखता।

एक कार्यात्मक दृष्टिकोण चीजों को देखने के लिए बहुत आसान बनाता है। और अधिक सुंदर समाधान लागू करें।

कार्यों का आंशिक उपयोग

एक और विचार जो कार्यात्मक प्रोग्रामिंग से आया है, और यह बहुत उपयोगी हो सकता है यदि आप इसे सही ढंग से पका सकते हैं।

एक उदाहरण के रूप में, हम DOM तत्व बनाएंगे।
(अनुवादक का ध्यान दें: cull.dom लेखक का पुस्तकालय है जिसे उसने एक प्रोजेक्ट के लिए बनाया है। लेकिन इसमें कार्य स्पष्ट और सरल हैं।)

 var ul = cull.dom.el("ul"); //document.createElement("ul") ul.nodeType === 1 // true 

आप संपत्ति गुण भी सेट कर सकते हैं।

 var ul = cull.dom.el("ul", {className: "bands"}); 

और बच्चों को इंगित करें

 var li = cull.dom.el("li", "Tom Waits"); var ul = cull.dom.el("ul", {className: "bands"}, li); 

यदि आप उन्हें एक दूसरे के अंदर उपयोग करते हैं, तो आप HTML के लिए कुछ प्रकार के डीएसएल प्राप्त कर सकते हैं।

 va ul = cull.dom.el("ul", className:"bands"}, cull.dom.el("li", "Tom Waits")); 

अब, चलिए फ़ंक्शन के आंशिक उपयोग पर चर्चा करने के लिए नीचे आते हैं। पहले उदाहरणों में से एक याद है?

 function makeAdder(base){ return function(num){ return base + num; } } 

यह एक फ़ंक्शन देता है जो दो नंबर का योग करेगा। स्वाभाविक रूप से, यदि आवश्यक हो, तो हम नामित कार्यों का उपयोग कर सकते हैं।

 function makeAdder(base){ return function(num){ return add(base, num); } } 

और अब हम देखते हैं कि मेकअडर फ़ंक्शन ऐड फ़ंक्शन लेता है और इसके एक तर्क को कैप्चर करता है। आपको एक अतिरिक्त फ़ंक्शन मिलता है जिसमें एक तर्क एक स्थिर है

 var add2 = cull.partial(add, 2); add2(5); //7 

अब हमें एक दिलचस्प अवसर मिला - हमारे DSL को DOM तत्वों को और भी सुंदर बनाने के लिए।

 var ul = cull.partial(cull.dom.el, "ul"); var li = cull.partial(cull.dom.el, "li"); 

और हम HTML सूचियों का निर्माण कुछ इस तरह से कर सकते हैं

 var list = ul({className: "bands"}, [li("Diamanda Galas"), li(" "), li("John Zorn")]); 

यदि आप, मेरी तरह, स्ट्रिंग चर के स्तर पर प्रोग्रामिंग पसंद नहीं करते हैं, तो यह आपके जीवन को आसान बनाने का एक शानदार तरीका है। अब आपके पास कोड पूरा होने और अन्य अच्छी चीजें होंगी। और आपका कोड नियमित HTML के समान है।
और चूंकि हमारा दृष्टिकोण काफी सुंदर है, इसलिए हम दस्तावेज़ के सभी तत्वों के लिए पहले से ही कार्य कर सकते हैं:

 ["a", "br", "code", "div", ...].forEach(function(tagName){ cull.dom.el[tagName] = cull.partial(cull.dom.el, tagName); }); 

इस प्रकार, हम प्रत्येक HTML तत्व के लिए एक फंक्शन बनाएंगे।
बेशक, नाम स्थान हमेशा पूरी तरह से उपयोग करने के लिए सुविधाजनक नहीं है, इसलिए हम इसे आगे भी सरल करेंगे।

 var e = cull.dom.el; var list = ul({className: "bands"}, [e.li("Pan Sonic"), e.li(" "), e.li("Muslimgauze")]); 

अब हम वैश्विक चर और कार्यों से बंधे नहीं हैं, जो अच्छा है।

समारोह रचना

यहाँ एक सरल अनुप्रयोग का एक और उदाहरण है - एक प्रश्नावली।


आपको प्रत्येक ब्लॉक का उत्तर देना चाहिए। प्रत्येक ब्लॉक में कई प्रश्न होते हैं। एक ब्लॉक का जवाब देने के बाद, हम अगले पर जाते हैं।

प्रत्येक ब्लॉक को एक पैनल के रूप में दर्शाया जा सकता है, जो प्रश्न मोड, परिणाम मोड या निष्क्रिय हो सकता है।



प्रत्येक पैनल में अलग-अलग क्षेत्र हो सकते हैं। स्ट्रिंग, संख्यात्मक, दिनांक।
फ़ील्ड दो मोड में हो सकते हैं - संपादन या परिणाम।

आइए देखें कि आप एक कार्यात्मक दृष्टिकोण का उपयोग करके इस समस्या का सामना कैसे कर सकते हैं।

हमारी पसंदीदा प्रोप सुविधा याद है?

 tweeps.map(prop("name")); 

उसका एक जुड़वां भाई है।

 tweeps.map(func("to.String")); 

यह एक फ़ंक्शन देता है जिसे आप ऑब्जेक्ट पर लागू कर सकते हैं।

अब प्रश्नावली में प्रत्येक ब्लॉक के परिणाम की गणना करते हैं

 buildSummary: function(){ return div(this.components.map(func("buildSummary"))); } 

सिद्धांत स्पष्ट होना चाहिए। हम एक div लौटाते हैं जिसमें प्रत्येक प्रश्नावली ब्लॉक के लिए buildSummary फ़ंक्शन द्वारा बनाए गए तत्व होंगे।

इस उदाहरण में, प्रत्येक घटक स्वयं जानता है कि उसका परिणाम कैसे प्रस्तुत किया जाए। लेकिन कभी-कभी पैनल को एक विशिष्ट तरीके से परिणाम प्रदर्शित करने की आवश्यकता होती है।

इसलिए, हम 2 कार्य लिख सकते हैं: buildSummary और getSummary ।

पहला HTML टैग्स सहित एक पूर्ण प्रस्तुति का निर्माण कर रहा है।
दूसरा - एक वस्तु देता है जिसमें आवश्यक परिणाम होते हैं।

और जैसे ही हमें परिणामों की एक चालाक प्रसंस्करण की आवश्यकता थी, सभी सुंदरता उखड़ने लगी।

 buildSummary: function(){ var div = document.createElement("div"); for(var i =0; l=this.components.length; i<l; ++i) { p = document.CreateElement("p"); p.innerHTML = this.components[i].getSummary().text; div.appendChild(p); } return div; } 

हालाँकि, हम कोड के इस टुकड़े को बेहतर बनाने के लिए पहले से ही कार्यात्मक रूप से उन्मुख हैं। पहले स्पष्ट सुधार के लिए लागू किया जाता है foreach।

 buildSummary : function(){ var div = document.createElement("div"); this.components.forEach(function(component){ var p = document.createElement("p"); p.innerHTML = component.getSummary().text; div.appendChild(p); }); return div; } 

हमें लूप चर से छुटकारा मिल गया, लेकिन क्या मानचित्र का उपयोग करना संभव है?

 buildSummary : function(){ return div(this.components.map(function(component){ var p = document.createElement("p"); p.innerHTML = component.getSummary().text; return p; })); } 

लघु लेकिन आदर्श से बहुत दूर। इस अभिव्यक्ति में मुख्य समस्या:

 component.getSummary().text; 

समस्या यह है कि एक नहीं, तीन चीजें हो रही हैं:

1. GetSummary () के माध्यम से परिणाम प्राप्त करना
2. पाठ संपत्ति प्राप्त करना
3. पी टैग में परिणाम लपेटकर

कुछ मानचित्र कार्यों के बारे में क्या?

 buildSummary: function() { return div(this.components. map(function(component){ return component.getSummary(); }).map(function(summary){ return summary.text; }).map(function(text){ var p = document.createElement("p"); p.innerHTML = text; return p; })); } 

कार्यात्मक शैली है, लेकिन यह डरावना लग रहा है। और पढ़ना बहुत असुविधाजनक है।

लेकिन एक बार कोड पर एक नज़र डालते हैं। हमारे यहाँ क्या है?

 return component.getSummary(); 

यहाँ हम ऑब्जेक्ट मेथड कहते हैं। लेकिन हमने इसके लिए एक विशेष समारोह बनाया, फंक ।

 buildSummary: function() { return div(this.components. map(func("getSummary")). map(function(summary){ return summary.text; }).map(function(text){ var p = document.createElement("p"); p.innerHTML = text; return p; })); } 

और यहाँ?

 function(summary){ return summary.text; } 

हमें ऑब्जेक्ट की संपत्ति तक पहुंच मिलती है। और इसके लिए, एक सुविधाजनक कार्य भी है।

 buildSummary: function() { return div(this.components. map(func("getSummary")). map(prop("text")). map(function(text){ var p = document.createElement("p"); p.innerHTML = text; return p; })); } 

आखिरी खंड रह गया।

 function(text){ var p = document.createElement("p"); p.innerHTML = text; return p; } 

यहां हम एक DOM एलीमेंट बनाते हैं और इसकी आंतरिक संपत्ति सेट करते हैं। हम अपने डीएसएल में कुछ समान हैं, है ना?

 buildSummary: function() { return div(this.components. map(func("getSummary")). map(prop("text")). map(p)); } 

अब यह लगभग सुंदर है। लेकिन एक कैविएट है। हम सूची में 3 पास करते हैं। कुछ मामलों में, यह सामान्य हो सकता है, लेकिन कुल मिलाकर कुछ हद तक उप-रूपी। क्या किया जा सकता है?

यह सुविधा संरचना का उपयोग करने का समय है। हम एक कार्य करना चाहते हैं जो तीन करते हैं।

 var summarize = compose( [p, prop("text"), func("getSummary")]); 

हम रचना कैसे लागू करते हैं?

भागों में। पहले, चलो समानार्थक शब्द बनाते हैं ताकि बहुत सारे कोड न लिखें।

 var callGetSummary = func("getSummary"); var getText = prop("text"); var summarize = compose([p, getText, callGetSummary]); 

सब कुछ सरल और स्पष्ट है। हम और आगे जा रहे हैं। आइए देखें कि जब हम सारांश फ़ंक्शन को कहते हैं तो क्या होता है।

पहला कदम

 var callGetSummary = func("getSummary"); var getText = prop("text"); var summarize = compose([p, getText, callGetSummary]); // summarize(obj); // => callGetSummary(obj) 

ऑब्जेक्ट को सूची से अंतिम फ़ंक्शन में स्थानांतरित कर दिया जाता है, जिसका नाम गेटस्मरी है । यह हमें एक प्रकार का सारांश देता है । और यह ऑब्जेक्ट अगले फ़ंक्शन के लिए दिया जाता है, गेटटेक्स्ट

दूसरा कदम

 var callGetSummary = func("getSummary"); var getText = prop("text"); var summarize = compose([p, getText, callGetSummary]); // summarize(obj); // => getText(callGetSummary(obj)) 

दूसरे चरण के परिणामस्वरूप, हमें वह स्ट्रिंग मिलती है जो टेक्स्ट प्रॉपर्टी में निहित होती है। और उसके बाद, लाइन फ़ंक्शन में गिर जाएगी जो हमारे लिए पोम डोम ऑब्जेक्ट बनाएगी।

चरण तीन

 var callGetSummary = func("getSummary"); var getText = prop("text"); var summarize = compose([p, getText, callGetSummary]); // summarize(obj); // => p(getText(callGetSummary(obj))) 

यह सरल रचना का एक उदाहरण है जब एक पैरामीटर फंक्शन से फ़ंक्शन में क्रम से पारित किया जाता है। जब आप प्रत्येक फ़ंक्शन के लिए एक पैरामीटर पास करते हैं, तो एक रचना बना सकते हैं, और आउटपुट परिणामों की एक सूची होगी। या कुछ और।

तो, हमारे लंबे समय से पीड़ित उदाहरण के लिए वापस।

 builSummary: function() { var summarize = compose( [p, prop("text"), func("getSummary")]); return div(this.components.map(summarize)); } 

सबसे पहले, हमने परिणामों की गणना के लिए एक फ़ंक्शन बनाया। और फिर हमने नक्शा लागू किया।
एक ही समय में, ध्यान दें कि संक्षेप फ़ंक्शन पूरी तरह से नहीं जानता कि यह किस ऑब्जेक्ट के साथ काम करता है। ये तीन अलग-अलग सार हैं जो पूरी तरह से रचना फ़ंक्शन के माध्यम से जुड़ते हैं। इसलिए, हम एक अलग इकाई में संक्षेप बना सकते हैं।

 var summarize = compose( [p, prop("text"), func("getSummary")]); // ... builSummary: function() { return div(this.components.map(summarize)); } 

यह शांत और सुंदर दिखता है, लेकिन प्रदर्शन के बारे में क्या?

प्रदर्शन के मुद्दे

for - 5M संचालन प्रति सेकंड
forEach - 1.5M संचालन प्रति सेकंड
कम - 1.5M संचालन प्रति सेकंड

DOM - 50K संचालन प्रति सेकंड के साथ कार्य करें

इसलिए आपको कार्यात्मक दृष्टिकोण के बारे में चिंता नहीं करनी चाहिए, लेकिन DOM के साथ काम करने के ब्रेक के बारे में। बेशक, यह सब आपके काम पर निर्भर करता है, इसलिए यदि संदेह है, तो माप लें। खासकर मोबाइल उपकरणों पर।

निष्कर्ष

हम शुद्ध कार्यों का उपयोग करते हैं।
हम उच्च-क्रम के कार्यों का उपयोग करते हैं (नक्शा, कम करें)।
हम छोटे सार का उपयोग करते हैं।
कई छोटे अमूर्त आसानी से एक बड़ी शक्तिशाली चीज में इकट्ठे हो सकते हैं।

मूल प्रस्तुति के PS स्लाइड को cjohansen.no/talks/2012/javazone
PPS पर देखा जा सकता है, कोई कार्यात्मक प्रोग्रामिंग हब क्यों नहीं है?