DWikiClass.js功能解析与应用

### DWikiClass.js 功能解析与应用 #### 1. DWikiClass.js 概述 DWikiClass.js 是 DWiki 客户端的核心文件，其中包含了 DWikiClass 类。由于代码量较大，这里不会完整列出，而是会按需讲解部分代码。 #### 2. DWikiClass 类的公共成员 - **currentArticle**：存储着对客户端版本的服务器端 Article 类对象的引用。当检索文章时，服务器会创建一个 Article 对象并通过 DWR 返回，这个对象会以 JavaScript 对象的形式呈现，currentArticle 就存储了对该对象的引用。 - **currentMode**：表示 DWiki 当前所处的模式，共有四种模式： - “article”：查看文章模式 - “edit”：编辑文章模式 - “history”：查看文章历史模式 - “comments”：查看文章评论模式 - **lockTimer**：是一个 JavaScript 定时器的引用，用于在页脚显示锁定超时时间。 - **lockCountdown**：表示锁定到期前剩余的秒数。 - **statusBarMarkup**：是页脚初始的标记，用于在锁定到期时替换倒计时显示。 #### 3. 类的方法 ##### 3.1 init() 方法 该方法在页面加载时调用，其唯一功能是加载首页，即用户最初看到的文章。这通过调用 getArticle() 方法实现。 ##### 3.2 getArticle() 方法 ```javascript this.getArticle = function(inArticleTitle, inExtraData1, inExtraData2) { this.showLoading(); ArticleDAO.getArticle(inArticleTitle, inExtraData1, inExtraData2, true, { callback : function(inResp) { DWiki.currentArticle = inResp; DWiki.switchMode("article"); } } ); } // End getArticle(). ``` 当点击如 Help 链接时会调用此方法。第一个参数是文章标题，用于查找文章；另外两个参数 inExtraData1 和 inExtraData2 仅在执行搜索时使用，inExtraData1 是要搜索的文本，inExtraData2 是搜索范围（文章标题、文章文本或两者）。 此方法首先调用 showLoading() 方法，该方法会隐藏四种模式对应的 `<div>` 并显示 “请稍候” 消息。然后通过 DWR 调用 ArticleDAO 的 getArticle() 方法，其中布尔参数设置为 true 表示是否将文章链接扩展为可点击链接。回调函数会将返回的 Article 对象赋值给 currentArticle，并调用 switchMode() 方法切换到 “article” 模式。 ##### 3.3 switchMode() 方法 ```javascript this.switchMode = function(inMode) { this.currentMode = ""; Rollovers.imgOut(dwr.util.byId("article")); Rollovers.imgOut(dwr.util.byId("edit")); Rollovers.imgOut(dwr.util.byId("history")); Rollovers.imgOut(dwr.util.byId("comments")); dwr.util.byId("articleContents").style.display = "none"; dwr.util.byId("articleEditing").style.display = "none"; dwr.util.byId("articleHistory").style.display = "none"; dwr.util.byId("articleComments").style.display = "none"; dwr.util.byId("loadingMessage").style.display = "none"; this.currentMode = inMode; if (inMode == "article") { dwr.util.byId("articleContents").style.display = ""; var lastEdited = ""; if (this.currentArticle.lastEdited != null) { lastEdited = "<br><hr><br>Last edited " + this.currentArticle.lastEdited + " by " + this.currentArticle.lastEditedBy; } dwr.util.byId("articleContents").innerHTML = "<pre>" + this.currentArticle.text + "</pre>" + lastEdited; } else if (inMode == "edit") { dwr.util.byId("articleEditing").style.display = ""; } else if (inMode == "history") { dwr.util.byId("articleHistory").style.display = ""; } else if (inMode == "comments") { dwr.util.byId("articleComments").style.display = ""; } Rollovers.imgOver(dwr.util.byId(this.currentMode)); } // End switchMode(). ``` 该方法用于切换 DWiki 的模式。首先重置顶部导航栏所有模式按钮的翻转状态，隐藏所有模式的 `<div>`，并将 currentMode 设置为空字符串，然后再将其设置为要切换的模式。根据不同的模式进行不同的处理： - “article” 模式：显示对应的 `<div>`，构造文章最后编辑信息并插入到 `<div>` 中，同时将文章内容用 `<pre>` 标签包裹。 - 其他模式：只需显示对应的 `<div>`。 最后，使用 RolloversClass 实例突出显示顶部相应的模式导航行。 ##### 3.4 addArticle() 方法 ```javascript this.addArticle = function(inArticleTitle) { if (dwr.util.getValue("userInfo").replace(/^\s*(.*\S|.*)\s*$/, '$1') == "Anonymous User") { alert("You must be a registered user to add this article"); } else { ArticleDAO.addArticle(inArticleTitle, { callback : function(inResp) { DWiki.getArticle(inArticleTitle); } } ); } } // End addArticle(). ``` 该方法用于添加文章。首先检查用户是否为注册用户，如果是 “Anonymous User”，则提示用户必须注册才能添加文章。否则，调用 ArticleDAO 的 addArticle() 方法添加文章，回调函数会调用 getArticle() 方法立即显示新创建的文章。 ##### 3.5 与顶部导航按钮相关的方法 - **articleClicked() 方法** ```javascript this.articleClicked = function() { if (this.currentMode != "article") { this.switchMode("article"); } } // End articleClicked(). `` ```