当一个ejs文件编译时,它变成了一个javascript函数。例如,这个ejs文件
<h3> Users Index</h3>
<ul>
<% users.each(function (user) { %>
<li><%= user.get("name") %></li>
<% })%>
</ul>
编译为以下javascript函数:
(function() { this.JST || (this.JST = {}); this.JST["users/index"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<h3> Users Index</h3>nn<ul>n '); users.each(function (user) { ; __p.push('n <li>', user.get("name") ,'</li>n '); }); __p.push('n</ul>nn');}return __p.join('');};
}).call(this);
在上面的javascript函数中,this
指的是什么?(即主干视图等)
如果运行类似的自执行函数构造
(function() { console.log(this) }).call(this);
你会注意到它会输出(Chrome控制台输出)
Window {external: Object, chrome: Object, document: document, i: undefined, StackExchange: Object…}
因此,所做的只是简单地将变量JST
添加到全局(window
)命名空间中,以便在接下来的每个脚本中都可以访问它。
行this.JST || (this.JST = {});
将确保如果window.JST
(如我们所见,window
=this
)存在,如果不存在,则创建它,并且它的值将是一个空对象(this.JST = {}
)。