Поиск
Календарь
«  Август 2011  »
ПнВтСрЧтПтСбВс
1234567
891011121314
15161718192021
22232425262728
293031
Главная » 2011 » Август » 10 » JavaScript. Простой шаблонизатор
13:49
JavaScript. Простой шаблонизатор
Когда работаешь с JavaScript, то приходиться часто работать с DOM страницы. Есть задачи, когда нужно вставить в какой-то узел документа - кусочек готового шаблона с подстановкой в него данных. Самым простым вариантом будет склейка готового текста из кусочков, например:
var classname = "myclass"; 
var value = "test"; 
var content = " 
  • "+value+"
    "+"
    • "; 
    $("#div_id").append(content);

    Но это не совсем удобно, особенно если "склеивать" большое количество частей. jQuery 1.6.x предлагает свой шаблонизатор, но он пока в бета-версии. Есть куча сторонних решений, но они, как правило, громоздкие и надо всегда оценивать целесообразность их применения. Когда-то нашел интересный пример реализации шаблонизатора, который и покажу в действии.

    Расширяем стандартный класс String:
    String.prototype.supplant = function(o) { 
     return this.replace(/{([^{}]*)}/g, function(a, b) { 
     var r = o[b]; 
     return typeof r === 'string' || typeof r === 'number' ? r : a; 
     }); 
    };

    Пример его использования:
    var template = " 
  • {value}
    •  
    "; 
    var content = template.supplant({classname: 'myclass', value: 'test'});

    Такой подход позволяет держать шаблоны вставки отдельно от логики скрипта, что позволяет удобно править верстку без правки логики.

    Такой шаблон сохраняется один раз и используется для всего приложения, что также исключает повторную реализацию одинакового кода. Операция замены ключей шаблона значениями входящего объекта не является ресурсоемкой.


    Просмотров: 2486 | Добавил: Sergey Saenko | Рейтинг: 0.0/0
    Всего комментариев: 0
    Имя *:
    Email *:
    Код *: