<div id='logged_out'>
 <%= link_to "login", :controller => 'members', :action => 'login' %>
 <br />
 <%= link_to "register", :controller => 'members', :action => 'signup' %>
</div>
<div id='logged_in' style="display: none;">
 <%= link_to "your profile", :controller => 'profiles', :action => 'show' %>
 <%= link_to "logout" , :controller => "members", :action => "logout" %>
</div>

  def index
    redirect_to my_profile_url
  end

def login
 if request.post"htmlcode">

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

function handle_cached_user() {
 var login_cookie = readCookie('login');
  var logged_in = document.getElementById('logged_in');
  var logged_out = document.getElementById('logged_out');
  if(login_cookie == null) {
   logged_in.style.display = 'none';
   logged_out.style.display = 'block';
  } else {
   logged_out.style.display = 'none';
   logged_in.style.display = 'block';
  }
}




第一个函数从 Javascript 中读取 cookie 值，第二个函数处理此 DOM。可以通过使用 Prototype 库简化这段代码，但我包括了基本的 DOM 查找以便于读者理解。最后一步是在页面加载时调用 JavaScript 函数。我向布局中添加了如下代码：

清单 5. 当页面加载时调用 JavaScript 函数


  <script type="text/javascript">
   window.onload = function() {
     handle_cached_user();

     <%= render_nifty_corners_javascript %>
      <%= yield :javascript_window_onload %>
   }
  </script>




上述 JavaScript 代码十分简单。在页面加载时，将加载 handle_cached_user 函数，而它会相应地显示或隐藏正确的内容。现在，我尽可以通过向控制器中添加如下代码来启用页面缓存：


  caches_page :index




上述代码效果极佳。我还是需要定期地从缓存中删除前页，这样我才能使该页期满终止。为此，我只需简单地定期删除 public/index.html。hide-and-seek 方式对于有几类用户的页面十分有效，但对于如图 2 中所示的用户 partial 效果却不佳。对于后者，需要综合使用 hide-and-seek 和 show-and-tell 技巧。

实现 show-and-tell
再来看看 图 2。我将使用 hide-and-seek — 根据用户是否已登录 — 选择 partial 的正确版本，然后使用 show-and-tell 技巧根据我之前在清单 3 的行 4 和行 5 中所写的 cookies 的内容填充页面的动态部分。请记住，对于 show-and-tell，我特别更改了页面的元素以符合单个用户的情况。
首先，完成在这两个 partial （即登出用户和登录用户）上呈现的静态内容。我假设用户已经登出，所以我会通过附加 display: none 风格隐藏 logged_in div。之后，如果必要，我就可以用 JavaScript 显示或隐藏它们。请注意，我使用了相同的两个名称：logged_in 和 logged_out，来识别每个 div，这样便无需对我为这个主页所编写的 JavaScript 进行修改：

清单 6. 呈现登录和登出这两个 partial


<div class="boxRight sideColumnColor">
  <div id='logged_in'>
    <%= render :partial => 'common/logged_in' style="display: none; %>
  </div>
  <div id='logged_out'>
    <%= render :partial => 'common/logged_out' %>
  </div>
</div>




接下来，完成 logged_in partial 的内容。注意，每个包含动态内容的 HTML 组件都有一个 ID，从而我可以使用 JavaScript 找到它并随后将其替换：

清单 7. 显示 logged_in partial


<div id='logged_in' style="display: none;">

 <%= link_to %(<span class="mainBodyDark">Hi, </span>) +
    %(<span class="textLarge mainBodyDark"><b id='bold_link'>) + "my_login" +
    %(</b></span>), {:controller => 'profiles', :action => 'show', :id => 'my_login'},
 {:id => 'profile_link'} %>
 <br/>

 <div id='picture_and_link'>
   <a href="http://member/my_login" id='link_for_member_thumbnail'>
     <img id='member_thumbnail'
        alt="Def_member_thumbnail"
        src="/UploadFiles/2021-04-08/def_member_thumbnail.gif">

如果对 Rails 有足够的了解，您可能会注意到其中的几个定制帮助程序函数。从中可以看到四处很明显的动态内容，我需要使用 JavaScript 为每个加载的页面替换这些内容：三处登录，一处会员图像。此处的 JavaScript 代码对 handle_cached_user 函数作了一处修改，并且还含有一个为动态用户处理页面更新的方法。针对本文的具体情况，我稍微对这段代码做了少许简化。可以将如下函数添加到 application.js 文件中：

清单 8. 替换用户 partial 的元素


function handle_user_partial() {
 var login_cookie = readCookie('login');
 var image_cookie = readCookie('image');

  var profileLink = document.getElementById('profile_link');
  profileLink.href = '/member/' + login_cookie;

  document.getElementById('bold_link').firstChild.nodeValue=login_cookie;

  document.getElementById('not_mine').firstChild.nodeValue="Not " + login_cookie + "";

  document.getElementById('link_for_member_thumbnail').href="/member/" + login_cookie;

  document.getElementById('member_thumbnail').src=image_cookie.replace(/%2[Ff]/g,"/");

  document.getElementById('member_thumbnail').alt=login_cookie;

}




在清单 8 中，这个 JavaScript 函数首先读取此 cookies 并获取 DOM 树的一部分：即到当前的用户配置文件的链接，称为 profile_link。然后是 handle_user_partial 函数：

  
    将登录用户的名称（存储在 login_cookie 内）替换成 my_login 以为用户配置文件页创建正确的 URL。
  
    将登录用户名插入到 DOM 元素中，此元素使用粗体文本表示登录用户。
  
    将简单的句子 “Not login"htmlcode">

function handle_cached_user() {
 var login_cookie = readCookie('login');
  var logged_in = document.getElementById('logged_in');
  var logged_out = document.getElementById('logged_out');
  if(login_cookie == null) {
   logged_in.style.display = 'none';
   logged_out.style.display = 'block';
  } else {
  handle_user_partial();
   logged_out.style.display = 'none';
   logged_in.style.display = 'block';
  }
}




请注意，else 条件中的 handle_cached_user 函数下面还有额外两行代码。这两行代码可以在使 logged_in DOM 元素可见之前进行适当的替代。剩下所需做的就是使用本篇文章和 上个月 的那篇文章中所介绍的页面缓存指令来缓存整个页。

结束语
本篇文章中介绍的这种高级技巧为我们打开了许多方便之门。在 ChangingThePresent.org 上，我们估计使用非常简单的基于时间的清除器能够缓存超过 75% 的页面。通过使用稍微有些复杂的清除技巧，我们就能缓存超过 90% 的页面，而且还可能更多。如果您想试图影响我们的图像缓存计划，那么您只能触及应用服务器 1% 到 3% 的 Web 请求。
但同时，我们也应该看到不利的一面。我向此系统添加了明显的复杂性。我必须维护更加复杂的 HTML 代码，并确保 HTML 和 JavaScript 能够保持同步。但好的一面是在需要获得更好的性能时，我就能够使用最为简单和有效的缓存技术。您也可以尝试使用这种技巧 — 访问 ChangingThePresent.org 并加载主页。接下来，加载每个顶端的菜单。您会发现我们会页面缓存六个顶端菜单中的四个。创建一个帐号并重载每一个菜单。您能猜到哪个页面被缓存了么？在下一篇文章中，在继续深入真实世界中的 Rails 的同时，我将带您探究能增进 ActiveRecord 性能的一些技巧。