javascript/JavaScript-Design-Patterns/The-Adapter-Pattern/3 - Adapting an email API.html at master · Xiaogang310/javascript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Mail API Demonstration</title>
      <style type="text/css" media="screen">
        body {
          font: 62.5% georgia,times,serif;
        }
        #doc {
          margin: 0 auto;
          width: 500px;
          font-size: 1.3em;
        }
      </style>
      <!-- 导入基本工具集 -->
      <script src="lib-utils.js"></script>
      <script type="text/javascript">
        // application utilities
        var DED = {};
        // 添加一些应用程序工具
        DED.util = {
          // 用第二个参数传入的对象的属性值替换第一个参数传入的字符串中的相关部分
          substitute: function (s, o) {
            return s.replace(/{([^{}]*)}/g,
              function (a, b) {
                var r = o[b];
                return typeof r === 'string' || typeof r === 'number' ? r : a;
              }
            );
          },
          // ajax请求
          asyncRequest: function() {
            function handleReadyState(o, callback) {
              var poll = window.setInterval(
                function() {
                  if(o && o.readyState == 4) {
                    window.clearInterval(poll);
                    if ( callback ){
                      callback(o);
                    }
                  }
                },
                50
              );
            }
            var getXHR = function() {
              var http;
              try {
                http = new XMLHttpRequest;
                getXHR = function() {
                  return new XMLHttpRequest;
                };
              }
              catch(e) {
                var msxml = [
                  'MSXML2.XMLHTTP.3.0',
                  'MSXML2.XMLHTTP',
                  'Microsoft.XMLHTTP'
                ];
                for (var i=0, len = msxml.length; i < len; ++i) {
                  try {
                    http = new ActiveXObject(msxml[i]);
                    getXHR = function() {
                      return new ActiveXObject(msxml[i]);
                    };
                    break;
                  }
                  catch(e) {}
                }
              }
              return http;
            };
            return function(method, uri, callback, postData) {
              var http = getXHR();
              http.open(method, uri, true);
              handleReadyState(http, callback);
              http.send(postData || null);
              return http;
            };
          }()
        }

        // dedMail application interface.
        //
        var dedMail = (function() {
          function request(id, type, callback) {
            DED.util.asyncRequest(
              'GET',
              'mail-api.php?ajax=true&id=' + id + '&type=' + type,
              function(o) {
                callback(o.responseText);
              }
            );
          }
          return {
          	// 该例子只实现了getMail方法，根据所提供的ID从服务器获取邮件，消息加载结束后，
          	// 作为参数传给getMail方法的回调函数callback将被调用。
            getMail: function(id, callback) {
              request(id, 'all', callback);
            },
            sendMail: function(body, recipient) {
              // Send mail with body text to the supplied recipient.
            },
            save: function(id) {
              // Save a draft copy with the supplied email ID.
            },
            move: function(id, destination) {
              // Move the email to the supplied destination folder.
            },
            archive: function(id) {
              // Archive the email. This can be a basic facade method that uses
              // the move method, hardcoding the destination.
            },
            trash: function(id) {
              // This can also be a facade method which moves the message to
              // the trash folder.
            },
            reportSpam: function(id) {
              // Move message to spam folder and add sender to the blacklist.
            },
            formatMessage: function(e) {
              var e = e || window.event;
              try {
                e.preventDefault();
              }
              catch(ex) {
                e.returnValue = false;
              }
              var targetEl = e.target || e.srcElement;
              var id = targetEl.id.toString().split('-')[1];
              dedMail.getMail(id, function(msgObject) {
                var resp = eval('('+msgObject+')');
                var details =  '<p><strong>From:</strong> {from}<br>';
                details += '<strong>Sent:</strong> {date}</p>';
                details += '<p><strong>Message:</strong><br>';
                details += '{message}</p>';
                messagePane.innerHTML = DED.util.substitute(details, resp);
              });
           }
          }
        } )();

        // Set up mail implementation.
        addEvent(window, 'load', function() {
          var threads = getElementsByClass('thread', 'a');
          var messagePane = $('message-pane');
          for (var i=0, len=threads.length; i<len; ++i) {
            addEvent(threads[i], 'click', formatMessage);
          }
        });
      </script>
    </head>

    <body>
      <div id="doc">
        <h1>Email Application Interface</h1>
          <ul>
            <li>
              <a class="thread" href="#" id="msg-1">
                load message Sister Sonya
              </a>
            </li>
            <li>
              <a class="thread" href="#" id="msg-2">
                load message Lindsey Simon
              </a>
            </li>
            <li>
              <a class="thread" href="#" id="msg-3">
                load message Margaret Stoooart
              </a>
            </li>
          </ul>
          <div id="message-pane"></div>
        </div>
    </body>
</html>