Assume you use the Select2 plugin and want to have two callbacks. One is defined via the option templateResult and used for formatting select items in dropdown. Another is defined via the option templateSelection and used for formatting the displayed value in select field.
$(this).select2({ ... templateResult: formatResultTemplate, templateSelection: formatSelectionTemplate }); function formatResultTemplate(data) { ... } function formatSelectionTemplate(data) { ... }Assume, in both cases, the HTML code and formatting are similar except small differences in CSS styles. The functions have much repeated code and we would like to follow the don't-repeat-yourself principle (DRY). What is about to pass CSS style as parameter? And here you go (real example from project).
$(this).select2({ ... templateResult: formatTemplate('margin:0 6px 0 0;'), templateSelection: formatTemplate('height:28px;') }); function formatTemplate(style) { function formatWithStyle(data) { var imgSrc = $(data.element).data('image'); if (imgSrc) { return "<img src='" + imgSrc + "' style='" + style + "'/>;<span class='option-text'>" + data.text + "</span>;"; } else { return "<span class='option-text'>" + data.text + "</span>"; } } return formatWithStyle; }The code is optimized now. The outer function formatTemplate returns the inner one formatWithStyle, "parametrized" with style. This inner function can be reused as "formatting callback".
I hope you got the idea.
This is a superb idea to use this formula to use Java script closure. Explained very easily to understand
ReplyDeletesoftware development