cnCt - क्लाइंट js टेम्पलेट इंजन

अभी या बाद में, टेम्प्लेटिंग क्लाइंट को ले जाता है। फिलहाल, कई आम तौर पर स्वीकार किए जाते हैं क्लाइंट साइड टेंपलेटर्स ; ये मूंछें और अंडरस्कोर हैं। टेमप्लेट या ऐसा ही कुछ (आप सर्गेई बेरेज़ी की रिपोर्ट में अधिक पा सकते हैं)। क्लाइंट प्लानर्स की भारी संख्या के बावजूद, दुर्लभ अपवादों के साथ बहुमत, लोअरकेस हैं।

स्ट्रिंग टेम्पलेट समस्याएं - स्ट्रिंग प्रबंधन

यह वास्तव में भयानक है क्योंकि
सबसे पहले , टेम्पलेट बेमानी हैं (html के संबंध के बारे में नीचे वर्णित किया जाएगा) और दलिया जैसा। विज्ञापन के उदाहरण में भी

var template = '<div class="entry"><h1>{{title}}</h1><div class="body">{{body}}</div></div>'; 

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

यद्यपि यह स्वीकार करने योग्य है कि प्रारूपण समस्या आंशिक रूप से एक अपरिभाषित स्क्रिप्ट टैग में टेम्पलेट को सम्मिलित करके हल की गई थी, जो बदले में एक नई समस्या पैदा करती है: आपके आवेदन के सभी टेम्पलेट index.html (php?) पर समाप्त होते हैं, और जब उन्हें टाइप किया जाता है तो उन्हें कलेक्टर द्वारा लिखा जाना चाहिए, क्योंकि phpStorm ' यह 32GB रैम के साथ भी दुखी है।

दूसरे , तर्क के साथ काम करने की समस्याएं

कहीं ऐसा है

 {{#repo}} <b>{{name}}</b> {{/repo}} {{^repo}} No repos :({ {/repo}} 

कहीं न कहीं लाइनों में (मुझे उम्मीद है कि पर्यावरण पहले से ही जानता है कि इसके साथ कैसे काम किया जाए, अन्यथा मुझे इसके साथ काम करने वालों के लिए खेद है)

 var list = "<% _.each(people, function(name) { %> <li><%= name %></li> <% }); %>"; _.template(list, {people: ['moe', 'curly', 'larry']}); // "<li>moe</li><li>curly</li><li>larry</li>" 

स्ट्रिंग्स इकट्ठा करने वाले अलग-अलग कार्यों में कहीं

 {{#list people}}{{firstName}} {{lastName}}{{/list}} { people: [ {firstName: "Yehuda", lastName: "Katz"}, {firstName: "Carl", lastName: "Lerche"}, {firstName: "Alan", lastName: "Johnson"} ] } Handlebars.registerHelper('list', function(items, options) { var out = "<ul>"; for(var i=0, l=items.length; i<l; i++) { out = out + "<li>" + options.fn(items[i]) + "</li>"; } return out + "</ul>"; }); 

(मैं Stepan Reznikov से विधि द्वारा ग्राहक-आधारित मानकीकरण के अपने पहले अनुभव को अनजाने में याद करता हूं)

तीसरा , वस्तुओं की खोज। समस्या इतनी भयानक नहीं है जितनी पहले की दो थी, लेकिन किसी भी तरह मुझे समझ नहीं आया कि मुझे बस जो करना चाहिए था, वह क्यों दिखना चाहिए?

यह आमतौर पर ऐसा दिखता है

 var templateWrapper = document.getElementById('templateWrapper'); something.render(template, templateWrapper); var templateElemet = templateWrapper.getElementsByClassName('templateElement'); //      

_small_ (टेम्पलेट में टेम्पलेट का ठीक से उपयोग करने की क्षमता की कमी से आंशिक रूप से परेशान है, हालांकि ऊपर दिए गए गहरे निराशा के कारण इस विषय पर यह अस्पष्ट हो सकता है।) _ / small_

cnCt

CnCt के मुख्य लाभ हैं DOM तरीकों से DOM का निर्माण और json के रूप में टेम्पलेट का वर्णन।

jsfiddle उदाहरण

 //  var template = function(data){ // 'e'  ,   div return {c: 'user', C: [ {e: 'a', h: 'http://facebook.com/' + data.facebookId, c: 'user-avatar-wrapper', C: {e: 'img', c: 'user-avatar', S: 'http://graph.facebook.com/' + data.facebookId + '/picture?width=200&height=200'} }, {c: 'user-name', t: data.fristName + ' ' + data.lastName, n: 'userName'}, ]}; }; // .  tp     var build = cnCt.tp(template, {fristName: 'swf', lastName: 'dev', facebookId: '100005155868851'}, document.body); //       build.r.addEventListener('click', function(){console.log('hello')}); //build.r (r   root)  div.user build.userName.addEventListener('click', function(){console.log(this.textContent)}); //    n: 'userName' 

जटिल वेब इंटरफेस विकसित करते समय, हम सिद्धांत रूप में टैग से दूर जाने की कोशिश करते हैं, क्योंकि हम HTML को व्यू ब्लॉक्स की संरचना के रूप में समझते हैं, इसलिए हम केवल / a / input / textarea / (...) टैग का उपयोग व्यू ब्लॉक के लिए आवश्यक कार्यक्षमता के आधार के रूप में करते हैं, जिसके परिणामस्वरूप यह दृष्टिकोण विकसित हुआ।

लड़ाई में, यह इस तरह दिखता है (jsfiddle)

 //    function dataToStr(_date){ var date = _date instanceof Date ? _date : new Date(_date); return date.getDate() + '/' + date.getMonth() + '/' + date.getFullYear(); } // function l10n(key){ return l10Keys[key] || key; } var l10Keys = { youFriendsList: '  ', sendMessage: ' ' }, //  templates = { // basis: function(){ return [ // {c: 'header', n: 'header', t: l10n('youFriendsList')}, {c: 'content-view', n: 'contentView'}, {c: 'footer', t: ' SoftWear LLC'} ]; }, //     icon: {c: 'icon'}, // button: function(data){ return {c: 'button', t: data.t, n: data.n, C: templates.icon, a: data.a}; }, //  friendsList: function(friends){ var items = [], i = 0, iMax = friends.length; // js   (  ,     ) for(; i < iMax; i += 1){ items[i] = {c: 'friend', C: [ {e: 'a', h: 'http://facebook.com/' + friends[i].facebookId, c: 'friend-avatar-wrapper', C: //     {e: 'img', c: 'friend-avatar', S: 'http://graph.facebook.com/' + friends[i].facebookId + '/picture?width=200&height=200'} }, {c: 'friend-name', t: friends[i].firstName + ' ' + friends[i].lastName}, //   {c: 'friend-birthday', t: dataToStr(friends[i].birthday)}, //   templates.button({n: 'sendMessage', t: l10n('sendMessage'), a: {'data-friend-id': friends[i].facebookId}}) ]}; } return {c: 'friend-list', C: items}; } }, //   friends = [ { facebookId: 1, firstName: '', lastName: '', birthday: 1 }, { facebookId: 2, firstName: '', lastName: '', birthday: 111111111 }, { facebookId: 3, firstName: '', lastName: '', birthday: 123123123 } ], build, $contentView, $buttons, i; //       (      ) cnCt.bindTemplates(templates); //  $contentView = cnCt.tp('basis', document.body).contentView; function getByFacebookId(id){ var i = friends.length; id = +id; for (; i-- ;){ if (friends[i].facebookId === id){ return friends[i]; } } return null; } $buttons = cnCt.tp('friendsList', friends, $contentView).sendMessage; //    ..   function sendMessage(){ var friend = getByFacebookId(this.getAttribute('data-friend-id')); console.log('hello ' + friend.firstName); } for (i = friends.length; i-- ;){ $buttons[i].addEventListener('click', sendMessage); } 

पेशेवरों:

1. शुद्ध जे.एस.
2. Html सार
3. मोबाइल पर लोअरकेस की तुलना में बहुत तेज, ओपेरा और डेस्कटॉप को छोड़कर हर जगह तेज (मैं परीक्षणों की कल्पना करता हूं), और टीवी और कियोस्क पर तेजी से :)
4. पैटर्न में पैटर्न
5. अंदर खोजें और वर्ग के नाम या आईडी से बंधे नहीं
6. सभी के लिए पर्याप्त
7. ऑटो बैकलाइट और सब कुछ में जेसी प्लग इन के बिना समझता है
8. इनलाइन एसवीजी और वीएमएल का समर्थन करता है का समर्थन करता है।
9. एक्सएमएल आपके जीवन को छोड़ रहा है
10. यह जीवन में काम करता है ( उत्तरार्द्ध तक पहुंच ), हालांकि यह एक अलग रूप में नहीं है, हम तदनुसार समर्थन करेंगे

विपक्ष:

1. इसमें धीमी गति से (मोबाइल फोन, कियोस्क (हम उन्हें क्रोम में अनुवाद करते हैं) और टेल्ली हमारे लिए अधिक महत्वपूर्ण हैं)
2. समझ से बाहर है (एक सप्ताह के उपयोग के बाद, HTML समझ से बाहर लगता है)
3. कमजोर दस्तावेज (जल्द ही सब कुछ होगा)
4. नोड पर बेकार (क्योंकि यह उसके लिए नहीं है / हालाँकि आप cnCt json को str ब्रांच में लिख सकते हैं, लेकिन क्यों?)

हम दस्तावेज और विकास करेंगे।

पुनश्च: हम क्योंकि खोलने का फैसला किया हमारे साथ नहीं किया गया था कि एक परियोजना के साथ काम करते समय अंडरस्कोर से जुड़े सहयोगियों।