GM_xmlhttpRequest({
    method: 'GET',
    url: 'http://bash.org.ru/quote/390892/rulez',
    onload: function(responseDetails) {
        // ... 
    }
  });

Почитав thinking-about-markup, я озарился сделать аналогичную штуку для js и Jquery.

<span id="ttt">AA</span>

at("#ttt").html("b");

<span id="ttt">b</span>

Как же это работает?

jQuery.fn.outer = function() {
  return $( $('<div></div>').html(this.clone()) ).html();
}

alert( $("#toolbar #save").outer() );

Еще один шаблонный движок для джаваскрипта. Отличается малым объемом кода и простотой (75 строк, вместе с комментариями). Простота, мало кода — это очень хорошо, надежно, в духе GR и XP. Шаблоны помещаются в скрытой <textarea>. В оригинале используются значки «[:» и «:]», но мне они не понравились, и я их изменил на «<%» и «%>».

<ul>
  <% $_.map(function(el) { %>
    <%= include ("#li_tmpl", el) %>
  <% }) %>
</ul>

<li id="t<%= $_.id %>"><%= include ("#li-inside_tmpl", $_) %></li>

<span class='name'><%= $_.name %></span> <a href='javascript://' class='edit'>edit</a>
<% if ($_.notes) { %>
  <br /><span class='notes'><%= $_.notes %></span>
<% } %>
<% if ($_.tags) { %>
  <br /><span class='tags'>
    <% $_.tags.map(function(el, i, len) { %>
      <span class='tag'><%= db.tags.get(el) %></span><%= i+1<len? " ? " : "" %>
    <% }) %>
  </span><br />
<% } %>

— javascript-templating-with-sxooptemplate

BeyondJS — это библиотека, которая… гм….

Приведу лучше пример кода. Простой такой примерчик. Звездочка двигается за курсором мышки особым образом.

if(!document.getElementById("doStar").checked) return;
var x = event.clientX;
var y = event.clientY;
setTimeout(function(){
  var angle = (new Date)/50;
  var star = document.getElementById("star");
  star.style.left = (30*Math.sin(angle))+x + "px";
  star.style.top  = (30*Math.cos(angle))+y + "px"; 
}, 1000);

Function.from("star", "moveTo").delay(1000).using(
    "+".using(
        Function.from(event, "x"), 
        "*".using(
            "radius",
            Function.from(Math, "sin", "angle")
        )
    ),
    "+".using(
        Function.from(event, "y"), 
        "*".using(
            "radius",
            Function.from(Math, "cos", "angle")
        )
    )
).curry({
    radius: 30,
    angle : function() {return (new Date)/50;}.asValue()
}).gate(
    Function.from("doStar".element(),"checked")
);

В библиотеку так же входит, например, beyondLazy — ленивые вычисления и ленивые списки.

В чем проблема? Не очень понятно что и как. Ну… я как-то не вижу документации. Кроме поста в la.ma.la ))) Но пост же на японском!! :)))

— http://w3future.com/html/beyondJS/
— http://la.ma.la/blog/diary_200508220821.htm

MiniWeb models an entire web site in a single HTML page. All of the site files are stored in a JSON object which you can navigate with a UNIX-like shell or the system browser. It has a built-in templating system and has an approximate separation of client and server

Вдохновившись JKL.Hina, написал собственную шаблонную библиотечку. Они очень похожи, но есть и отличия. Теперь использую ее вместо jsonT. Под катом примеры работы.

Нашел интересную библиотеку, JKL.Hina. Сразу буду на примерах кода показывать

var data = {
  title: "hello world",
  body: "Hina is yet another html template libraly for JavaScript."
};

<h1>[/title]</h1>
<p>[/body]</p>

<h1>hello world</h1>
<p>Hina is yet another html template libraly for JavaScript.</p>

var data = {
  list1: [ 1, 2, 3 ]
};

<ul>
  <li title="@foreach i [/list1]">[/i]</li>
</ul>

var data = {
  table1: [
    { name: "Ruby", author: "matz" },
    { name: "Perl", author: "Larry Wall" },
    { name: "Python", author: "Guido van Rossum" }
  ] 
};

<table border="1">
  <tr><th>name</th><th>author</th></tr>
  <tr title="@foreach line1 [/table1]">
    <td>[/line1/name]</td>
    <td>[/line1/author]</td>
  </tr>
</table>

Так же можно использовать условия (они, кстати, сделаны весьма интересно) и другие штуки.

В общем, довольно интересная библиотечка. Мне особенно понравился подход с аттрибутом title.

Вот только существует два затруднения: 1) она написана два года назад 2) она на японском %)

// 1
assertEqual("Hello, Pasha!",
    [{name: "Pasha", sign: "!", _: "Hello, {name}{sign}"}].map(function(el) {
        return el._.match(/\{.*?\}/ig).map(function(m) {
            el._ = el._.replace(eval('/'+m+'/ig'), el[m.replace(/^\{+|\}+$/g, "")]);
        }), el._;
    })
);

// 2
assertEqual("Hello, Pasha!",
    [{name: "Pasha", sign: "!", _: "Hello, {name}{sign}"}].map(function(el) {
        return el._.replace(/\{(.*?)\}/ig, function(w, g) {
            el._ = el._.replace(w, el[g]);
        }), el._;
    })
);

// 3
assertEqual("Hello, Pasha!",
    "Hello, {name}{sign}".replace(/\{(.*?)\}/ig, function(w, g) {
        return ({name: "Pasha", sign: "!"})[g];
    })
);

О реальной пользе такого подхода судить сложно, тем более, что принцип DRY никто не отменял. Но зато я сделал это без явных циклов и временных перменных))

upd: только что меня осенило третим вариантом. Он такой простой… Это просто смешно))

Number.prototype.rand = function() {
  return Math.floor(Math.random()*this+1);
}
Number.prototype.to = function(to) {
    var array = [Number(this)];
    if (this < to) for (var i = this + 1; i <= to; ++i)    array.push(i);
    else for (var i = this - 1; i >= to; --i)    array.push(i);
    return array;
}
Number.prototype.times = function(callback) {
  if (typeof callback == 'string') callback = new Function('i', callback);
  for (var i = 0; i < this; i++) callback(i)
}

Array.prototype.map = Array.prototype.forEach = function(callback, thisObject) {
  if (typeof callback == 'string') callback = new Function('el', 'i', 'array', 'return ' + callback);
  var array = [];
  for (var i = 0, len = this.length; i < len; ++i)
    array.push(callback.call(thisObject, this[i], i, this));
  return array;
}
Array.prototype.filter = function(pred, thisObject) {
  if (typeof pred== 'string') pred= new Function('el', 'i', 'array', 'return ' + pred);
  var array = [];
  for (var i = 0, len = this.length, ret; i < len; ++i)
   if (pred.call(thisObject, this[i], i, this))
     array.push(this[i]);
  return array;
}
Array.prototype.foldRight = function(proc, seed) {
  for (var i = this.length - 1; i >= 0; --i) seed = proc.call(null, this[i], seed);
  return seed;
}
Array.prototype.deleteItem = function(item, eq, thisObject) {
  if (!eq) eq = function(x, y) { return x == y } 
    return this.remove(function(y) { return eq.call(null, item, y) }, thisObject);
}
Array.prototype.remove = function(pred, thisObject) {
  var array = [];
  for (var i = 0, len = this.length, ret; i < len; ++i)
    if (!pred.call(thisObject, this[i], i, this)) array.push(this[i]);
  return array;
}
Array.prototype.uniq = function(eq, thisObject) {
  return this.foldRight(function(item, array) { return [item].concat(array.deleteItem(item, eq, thisObject)) }, []);
}

people = 10;
days = 356;
bdays = 1 .to(people).map('days.rand()');
alert(bdays); // 151,264,286,135,17,34,266,108,135,274

collision = function(a) {
  return a.length != a.uniq().length;
}
alert(collision(bdays)); // true

collided = 0;

1000 .times("if ( collision(1 .to(people).map('days.rand()')) ) collided++");
alert(collided); // 112

alert(0 .to(1000).map("collision(1 .to(people).map('days.rand()'))")); 
// false, false, false, false, false, false, false, false, true, false, false, ...

alert(0 .to(1000).map("collision(1 .to(people).map('days.rand()'))").filter("!!el").length); // 110

alert(0 .to(1000).map("collision(1 .to(23).map('days.rand()'))").filter("!!el").length); // 499

alert(0 .to(1000).map("collision(1 .to(25).map('days.rand()'))").filter("!!el").length); // 570

Animal = new AJS.Class({
  init: function(name) {
    this.name = name;
  }
});

amoeba = new Animal('Greenie');

Dog = Animal.extend({
  bark: function() {
    return this.name + " says woof!";
  }
});

lassie = new Dog('Lassie');
alert(lassie.bark()); // Lassie says woof!

Animal = clone({}, {}, {});
amoeba = clone(Animal, {name: 'Greenie'}, {});

Dog = clone(Animal, {}, {bark: 'this.name + " says woof!"'});
lassie = clone(Dog, {name: 'Lassie'}, {});
alert(lassie.bark()); // Lassie says woof!

function clone(myObj, members, gets){
  if(typeof(myObj) != 'object') return myObj;
  if(myObj == null) return myObj;
  var myNewObj = new Object();
  for(var i in myObj) myNewObj[i] = clone(myObj[i]);
  for(var i in members) myNewObj[i] = clone(members[i]);
  for(var i in gets) myNewObj[i] = new Function("return " + gets[i]);
  return myNewObj;
}

send = function(msg)
{
  return {
    to: function(name){
      alert('"' + msg + '" to "' + name + '"');
    }
  }
}

send("hello").to("Pasha"); // "hello" to "Pasha"

 javascript
 functional

var data = 
  [
    [null, 'name1', ['Р.', 'Бах']],
    [null, 'name2', ['В.', 'Бах']],
    [null, 'name3', ['Л.', 'Баг']],
    [null, 'name4', ['Р.', 'Бах']],  
  ]