├── LICENSE └── README.md /LICENSE: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 2, June 1991 3 | 4 | Copyright (C) 1989, 1991 Free Software Foundation, Inc., 5 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA 6 | Everyone is permitted to copy and distribute verbatim copies 7 | of this license document, but changing it is not allowed. 8 | 9 | Preamble 10 | 11 | The licenses for most software are designed to take away your 12 | freedom to share and change it. By contrast, the GNU General Public 13 | License is intended to guarantee your freedom to share and change free 14 | software--to make sure the software is free for all its users. This 15 | General Public License applies to most of the Free Software 16 | Foundation's software and to any other program whose authors commit to 17 | using it. (Some other Free Software Foundation software is covered by 18 | the GNU Lesser General Public License instead.) You can apply it to 19 | your programs, too. 20 | 21 | When we speak of free software, we are referring to freedom, not 22 | price. Our General Public Licenses are designed to make sure that you 23 | have the freedom to distribute copies of free software (and charge for 24 | this service if you wish), that you receive source code or can get it 25 | if you want it, that you can change the software or use pieces of it 26 | in new free programs; and that you know you can do these things. 27 | 28 | To protect your rights, we need to make restrictions that forbid 29 | anyone to deny you these rights or to ask you to surrender the rights. 30 | These restrictions translate to certain responsibilities for you if you 31 | distribute copies of the software, or if you modify it. 32 | 33 | For example, if you distribute copies of such a program, whether 34 | gratis or for a fee, you must give the recipients all the rights that 35 | you have. You must make sure that they, too, receive or can get the 36 | source code. And you must show them these terms so they know their 37 | rights. 38 | 39 | We protect your rights with two steps: (1) copyright the software, and 40 | (2) offer you this license which gives you legal permission to copy, 41 | distribute and/or modify the software. 42 | 43 | Also, for each author's protection and ours, we want to make certain 44 | that everyone understands that there is no warranty for this free 45 | software. If the software is modified by someone else and passed on, we 46 | want its recipients to know that what they have is not the original, so 47 | that any problems introduced by others will not reflect on the original 48 | authors' reputations. 49 | 50 | Finally, any free program is threatened constantly by software 51 | patents. We wish to avoid the danger that redistributors of a free 52 | program will individually obtain patent licenses, in effect making the 53 | program proprietary. To prevent this, we have made it clear that any 54 | patent must be licensed for everyone's free use or not licensed at all. 55 | 56 | The precise terms and conditions for copying, distribution and 57 | modification follow. 58 | 59 | GNU GENERAL PUBLIC LICENSE 60 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 61 | 62 | 0. This License applies to any program or other work which contains 63 | a notice placed by the copyright holder saying it may be distributed 64 | under the terms of this General Public License. The "Program", below, 65 | refers to any such program or work, and a "work based on the Program" 66 | means either the Program or any derivative work under copyright law: 67 | that is to say, a work containing the Program or a portion of it, 68 | either verbatim or with modifications and/or translated into another 69 | language. (Hereinafter, translation is included without limitation in 70 | the term "modification".) Each licensee is addressed as "you". 71 | 72 | Activities other than copying, distribution and modification are not 73 | covered by this License; they are outside its scope. The act of 74 | running the Program is not restricted, and the output from the Program 75 | is covered only if its contents constitute a work based on the 76 | Program (independent of having been made by running the Program). 77 | Whether that is true depends on what the Program does. 78 | 79 | 1. You may copy and distribute verbatim copies of the Program's 80 | source code as you receive it, in any medium, provided that you 81 | conspicuously and appropriately publish on each copy an appropriate 82 | copyright notice and disclaimer of warranty; keep intact all the 83 | notices that refer to this License and to the absence of any warranty; 84 | and give any other recipients of the Program a copy of this License 85 | along with the Program. 86 | 87 | You may charge a fee for the physical act of transferring a copy, and 88 | you may at your option offer warranty protection in exchange for a fee. 89 | 90 | 2. You may modify your copy or copies of the Program or any portion 91 | of it, thus forming a work based on the Program, and copy and 92 | distribute such modifications or work under the terms of Section 1 93 | above, provided that you also meet all of these conditions: 94 | 95 | a) You must cause the modified files to carry prominent notices 96 | stating that you changed the files and the date of any change. 97 | 98 | b) You must cause any work that you distribute or publish, that in 99 | whole or in part contains or is derived from the Program or any 100 | part thereof, to be licensed as a whole at no charge to all third 101 | parties under the terms of this License. 102 | 103 | c) If the modified program normally reads commands interactively 104 | when run, you must cause it, when started running for such 105 | interactive use in the most ordinary way, to print or display an 106 | announcement including an appropriate copyright notice and a 107 | notice that there is no warranty (or else, saying that you provide 108 | a warranty) and that users may redistribute the program under 109 | these conditions, and telling the user how to view a copy of this 110 | License. (Exception: if the Program itself is interactive but 111 | does not normally print such an announcement, your work based on 112 | the Program is not required to print an announcement.) 113 | 114 | These requirements apply to the modified work as a whole. If 115 | identifiable sections of that work are not derived from the Program, 116 | and can be reasonably considered independent and separate works in 117 | themselves, then this License, and its terms, do not apply to those 118 | sections when you distribute them as separate works. But when you 119 | distribute the same sections as part of a whole which is a work based 120 | on the Program, the distribution of the whole must be on the terms of 121 | this License, whose permissions for other licensees extend to the 122 | entire whole, and thus to each and every part regardless of who wrote it. 123 | 124 | Thus, it is not the intent of this section to claim rights or contest 125 | your rights to work written entirely by you; rather, the intent is to 126 | exercise the right to control the distribution of derivative or 127 | collective works based on the Program. 128 | 129 | In addition, mere aggregation of another work not based on the Program 130 | with the Program (or with a work based on the Program) on a volume of 131 | a storage or distribution medium does not bring the other work under 132 | the scope of this License. 133 | 134 | 3. You may copy and distribute the Program (or a work based on it, 135 | under Section 2) in object code or executable form under the terms of 136 | Sections 1 and 2 above provided that you also do one of the following: 137 | 138 | a) Accompany it with the complete corresponding machine-readable 139 | source code, which must be distributed under the terms of Sections 140 | 1 and 2 above on a medium customarily used for software interchange; or, 141 | 142 | b) Accompany it with a written offer, valid for at least three 143 | years, to give any third party, for a charge no more than your 144 | cost of physically performing source distribution, a complete 145 | machine-readable copy of the corresponding source code, to be 146 | distributed under the terms of Sections 1 and 2 above on a medium 147 | customarily used for software interchange; or, 148 | 149 | c) Accompany it with the information you received as to the offer 150 | to distribute corresponding source code. (This alternative is 151 | allowed only for noncommercial distribution and only if you 152 | received the program in object code or executable form with such 153 | an offer, in accord with Subsection b above.) 154 | 155 | The source code for a work means the preferred form of the work for 156 | making modifications to it. For an executable work, complete source 157 | code means all the source code for all modules it contains, plus any 158 | associated interface definition files, plus the scripts used to 159 | control compilation and installation of the executable. However, as a 160 | special exception, the source code distributed need not include 161 | anything that is normally distributed (in either source or binary 162 | form) with the major components (compiler, kernel, and so on) of the 163 | operating system on which the executable runs, unless that component 164 | itself accompanies the executable. 165 | 166 | If distribution of executable or object code is made by offering 167 | access to copy from a designated place, then offering equivalent 168 | access to copy the source code from the same place counts as 169 | distribution of the source code, even though third parties are not 170 | compelled to copy the source along with the object code. 171 | 172 | 4. You may not copy, modify, sublicense, or distribute the Program 173 | except as expressly provided under this License. Any attempt 174 | otherwise to copy, modify, sublicense or distribute the Program is 175 | void, and will automatically terminate your rights under this License. 176 | However, parties who have received copies, or rights, from you under 177 | this License will not have their licenses terminated so long as such 178 | parties remain in full compliance. 179 | 180 | 5. You are not required to accept this License, since you have not 181 | signed it. However, nothing else grants you permission to modify or 182 | distribute the Program or its derivative works. These actions are 183 | prohibited by law if you do not accept this License. Therefore, by 184 | modifying or distributing the Program (or any work based on the 185 | Program), you indicate your acceptance of this License to do so, and 186 | all its terms and conditions for copying, distributing or modifying 187 | the Program or works based on it. 188 | 189 | 6. Each time you redistribute the Program (or any work based on the 190 | Program), the recipient automatically receives a license from the 191 | original licensor to copy, distribute or modify the Program subject to 192 | these terms and conditions. You may not impose any further 193 | restrictions on the recipients' exercise of the rights granted herein. 194 | You are not responsible for enforcing compliance by third parties to 195 | this License. 196 | 197 | 7. If, as a consequence of a court judgment or allegation of patent 198 | infringement or for any other reason (not limited to patent issues), 199 | conditions are imposed on you (whether by court order, agreement or 200 | otherwise) that contradict the conditions of this License, they do not 201 | excuse you from the conditions of this License. If you cannot 202 | distribute so as to satisfy simultaneously your obligations under this 203 | License and any other pertinent obligations, then as a consequence you 204 | may not distribute the Program at all. For example, if a patent 205 | license would not permit royalty-free redistribution of the Program by 206 | all those who receive copies directly or indirectly through you, then 207 | the only way you could satisfy both it and this License would be to 208 | refrain entirely from distribution of the Program. 209 | 210 | If any portion of this section is held invalid or unenforceable under 211 | any particular circumstance, the balance of the section is intended to 212 | apply and the section as a whole is intended to apply in other 213 | circumstances. 214 | 215 | It is not the purpose of this section to induce you to infringe any 216 | patents or other property right claims or to contest validity of any 217 | such claims; this section has the sole purpose of protecting the 218 | integrity of the free software distribution system, which is 219 | implemented by public license practices. Many people have made 220 | generous contributions to the wide range of software distributed 221 | through that system in reliance on consistent application of that 222 | system; it is up to the author/donor to decide if he or she is willing 223 | to distribute software through any other system and a licensee cannot 224 | impose that choice. 225 | 226 | This section is intended to make thoroughly clear what is believed to 227 | be a consequence of the rest of this License. 228 | 229 | 8. If the distribution and/or use of the Program is restricted in 230 | certain countries either by patents or by copyrighted interfaces, the 231 | original copyright holder who places the Program under this License 232 | may add an explicit geographical distribution limitation excluding 233 | those countries, so that distribution is permitted only in or among 234 | countries not thus excluded. In such case, this License incorporates 235 | the limitation as if written in the body of this License. 236 | 237 | 9. The Free Software Foundation may publish revised and/or new versions 238 | of the General Public License from time to time. Such new versions will 239 | be similar in spirit to the present version, but may differ in detail to 240 | address new problems or concerns. 241 | 242 | Each version is given a distinguishing version number. If the Program 243 | specifies a version number of this License which applies to it and "any 244 | later version", you have the option of following the terms and conditions 245 | either of that version or of any later version published by the Free 246 | Software Foundation. If the Program does not specify a version number of 247 | this License, you may choose any version ever published by the Free Software 248 | Foundation. 249 | 250 | 10. If you wish to incorporate parts of the Program into other free 251 | programs whose distribution conditions are different, write to the author 252 | to ask for permission. For software which is copyrighted by the Free 253 | Software Foundation, write to the Free Software Foundation; we sometimes 254 | make exceptions for this. Our decision will be guided by the two goals 255 | of preserving the free status of all derivatives of our free software and 256 | of promoting the sharing and reuse of software generally. 257 | 258 | NO WARRANTY 259 | 260 | 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY 261 | FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN 262 | OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES 263 | PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED 264 | OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 265 | MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS 266 | TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE 267 | PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, 268 | REPAIR OR CORRECTION. 269 | 270 | 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 271 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR 272 | REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, 273 | INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING 274 | OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED 275 | TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY 276 | YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER 277 | PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE 278 | POSSIBILITY OF SUCH DAMAGES. 279 | 280 | END OF TERMS AND CONDITIONS 281 | 282 | How to Apply These Terms to Your New Programs 283 | 284 | If you develop a new program, and you want it to be of the greatest 285 | possible use to the public, the best way to achieve this is to make it 286 | free software which everyone can redistribute and change under these terms. 287 | 288 | To do so, attach the following notices to the program. It is safest 289 | to attach them to the start of each source file to most effectively 290 | convey the exclusion of warranty; and each file should have at least 291 | the "copyright" line and a pointer to where the full notice is found. 292 | 293 | {description} 294 | Copyright (C) {year} {fullname} 295 | 296 | This program is free software; you can redistribute it and/or modify 297 | it under the terms of the GNU General Public License as published by 298 | the Free Software Foundation; either version 2 of the License, or 299 | (at your option) any later version. 300 | 301 | This program is distributed in the hope that it will be useful, 302 | but WITHOUT ANY WARRANTY; without even the implied warranty of 303 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 304 | GNU General Public License for more details. 305 | 306 | You should have received a copy of the GNU General Public License along 307 | with this program; if not, write to the Free Software Foundation, Inc., 308 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. 309 | 310 | Also add information on how to contact you by electronic and paper mail. 311 | 312 | If the program is interactive, make it output a short notice like this 313 | when it starts in an interactive mode: 314 | 315 | Gnomovision version 69, Copyright (C) year name of author 316 | Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 317 | This is free software, and you are welcome to redistribute it 318 | under certain conditions; type `show c' for details. 319 | 320 | The hypothetical commands `show w' and `show c' should show the appropriate 321 | parts of the General Public License. Of course, the commands you use may 322 | be called something other than `show w' and `show c'; they could even be 323 | mouse-clicks or menu items--whatever suits your program. 324 | 325 | You should also get your employer (if you work as a programmer) or your 326 | school, if any, to sign a "copyright disclaimer" for the program, if 327 | necessary. Here is a sample; alter the names: 328 | 329 | Yoyodyne, Inc., hereby disclaims all copyright interest in the program 330 | `Gnomovision' (which makes passes at compilers) written by James Hacker. 331 | 332 | {signature of Ty Coon}, 1 April 1989 333 | Ty Coon, President of Vice 334 | 335 | This General Public License does not permit incorporating your program into 336 | proprietary programs. If your program is a subroutine library, you may 337 | consider it more useful to permit linking proprietary applications with the 338 | library. If this is what you want to do, use the GNU Lesser General 339 | Public License instead of this License. 340 | 341 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 开发无框架单页面应用 -- 老码农的祖传秘方 2 | # 3 | 4 | ## 什么是单页面应用（SPA）？ 5 | [维基百科上的描述](http://en.wikipedia.org/wiki/Single-page_application )是这样的： 6 | ``` 7 | “A single-page application (SPA), is a web application or web site 8 | that fits on a single web page with the goal of providing a more 9 | fluid user experience akin to a desktop application.” 10 | ``` 11 | 也就是说，单页面应用是仅包含单个网页的应用，目的是为了提供类似于本地应用的流畅用户体验。 12 | 13 | ## 需不需要框架？ 14 | 要实现单页面应用，现在已经有很多现成的框架了，比如`AngularJS`, `Ember.js`, `Backbone.js`等等。它们都是很全面的开发平台，为单页面应用开发提供了必需的页面模板、路径解析和处理、后台服务api访问、DOM操作等功能。 15 | 16 | 事实上，现代的web应用开发基本都离不开一个甚至多个框架，开发无框架应用的想法听起来蛮不靠谱的，对吧？ 17 | 18 | 但是我总觉得现在是时候抛弃框架了。前两年我都在用 `AngularJS` 做开发，可以说已经比较熟悉它了，我的第一个单页面应用就是在 `AngularJS` 的启发下做出来的。框架曾经是我的挚爱。 19 | 20 | 但是现在每次看着它们那庞大臃肿的身躯和晦涩的语法，我都有一种鸡肋的感觉。还有不同框架下各种工具、插件难以混用的现状，让我不得不经常需要自己写原生代码解决很多问题。时间长了，我自然冒出一个想法：“为啥不干脆抛弃框架，直接写原生代码呢？毕竟，框架也是原生代码写出来的嘛。” 21 | 22 | ## 怎么实现无框架SPA？ 23 | 无框架单页面应用看似可行，但难度有多大？我还是心里没底，需要一点理论依据给自己壮胆。所以我就在网上到处寻摸了一番，偶然找到了这篇 Google 工程师 Joe Gregorio 写的文章[《别再用JS框架了》](http://coderlmn.github.io/frontEndCourse/nomoreJSF.html )，里面的分析有一种与我心有戚戚的感觉，看完还给它翻译成中文了。 24 | 25 | 不过，他提出的方法是更超前的，例如 `imports` 和 `Polymer`，我曾经试过，印象中只有 Google 的 Chrome Canary 才有支持，而且要先在选项中打开一些试验功能，浏览器会变得不那么稳定。`X-Tag` 和 `Bosonic` 也要依赖于一个小的库。而我想做的是现在的浏览器就已经能支持的功能，用原生代码来实现。所以他这篇文章只能让我坚定方向，但是具体的做法还得靠自己去发现。 26 | 27 | 后来又看了几篇比较偏学术的文章，例如这篇 Mixu 写的[《Single page apps in depth》](http://singlepageappbook.com/single-page.html )，对我也不太适用。他的模板都需要先编译为JS对象存放，和 AngularJS 的方法类似，但我觉得在一个小规模应用里应该有更加优雅的实现方法。 28 | 29 | 找了好几天文档，我突然意识到自己浪费了不少时间。所谓理论依据应该是高层次的，解决可行性的问题，剩下的就是自己去想办法实现了。可行性不是明摆着的嘛，那么多框架不也是用原生代码实现的么？ 30 | 31 | 想到这儿，我就开始自己尝试了。前后一共只花了两三天时间，写出来一共一两百行JS，就基本解决了问题。其实把代码写完了回顾一下，这些方法都算不上什么创新，都是标准的东西而已。肯定有别人也这么做了，只是我不知道而已吧。 32 | 33 | 可能有读者看到这儿不耐烦了：`“Talk is cheap. Show me the code.”` 好吧，下面就是代码的描述。 34 | 35 | ## 老码农的实现方法 36 | 37 | ### 基础对象 38 | 首先是定义缺省的两个页面片段（缺省页面和出错页面，这两个页面是基础功能，所以放在库里）相关代码，对每个片段对应的 uri（例如 `home`）定义一个同名的对象，里面存放了对应的 html 片段文件路径、初始化方法。 39 | ```javascript 40 | var home = {}; //default partial page, which will be loaded initially 41 | home.partial = "lib/home.html"; 42 | home.init = function(){ //bootstrap method 43 | //nothing but static content only to render 44 | } 45 | 46 | var notfound = {}; //404 page 47 | notfound.partial = "lib/404.html"; 48 | notfound.init = function(){ 49 | alert('URL does not exist. please check your code.'); 50 | } 51 | ``` 52 | 53 | 随后是全局变量，包含了 html 片段代码的缓存、局部刷新所在 div 的 DOM 对象和向后端服务请求返回的根数据（`rootScope`，初始化时未出现，在后面的方法中才会用到）： 54 | ```javascript 55 | var settings = {}; //global parameters 56 | settings.partialCache = {}; //cache for partial pages 57 | settings.divDemo = document.getElementById("demo"); //div for loading partials, defined in index.html 58 | ``` 59 | 60 | ### 主程序 61 | 下面就是主程序了，所有的公用方法打包放到一个对象 `miniSPA` 中，这样可以避免污染命名空间： 62 | ```javascript 63 | // Main Object here 64 | var miniSPA = {}; 65 | ``` 66 | 67 | 然后是 changeUrl 方法，对应在 `index.html` 中有如下触发定义： 68 | ```html 69 | 70 | ``` 71 | 72 | `onhashchange` 是在location.hash发生改变的时候触发的事件，能够通过它获取局部 url 的改变。在 `index.html` 中定义了如下的链接： 73 | ```html 74 |

Demo Contents:

75 | Home (Default) 76 | POST request 77 | GET request 78 | Invalid url 79 |
80 | ``` 81 | 82 | 每个 uri 都以 `#` 号开头，这样就能被 `onhashchange` 事件抓取到。最后的 div 就是局部刷新的 html 片段嵌入的位置。 83 | ```javascript 84 | miniSPA.changeUrl = function() { //handle url change 85 | var url = location.hash.replace('#',''); 86 | if(url === ''){ 87 | url = 'home'; //default page 88 | } 89 | if(! window[url]){ 90 | url = "notfound"; 91 | } 92 | miniSPA.ajaxRequest(window[url].partial, 'GET', '',function(status, page){ 93 | if(status == 404){ 94 | url = 'notfound'; //404 page 95 | miniSPA.ajaxRequest(window[url].partial,'GET','',function(status, page404){ 96 | settings.divDemo.innerHTML = page404; 97 | miniSPA.initFunc(url); //load 404 controller 98 | }); 99 | } 100 | else{ 101 | settings.divDemo.innerHTML = page; 102 | miniSPA.initFunc(url); //load url controller 103 | } 104 | }); 105 | } 106 | ``` 107 | 上面的代码先获取改变后的 url，先通过 `window[url]` 找到对应的对象（类似于最上部定义的 `home` 和 `notfound`），如对象不存在（无定义的路径）则转到 `404` 处理，否则通过 `ajaxRequest` 方法获取 `window[url].partial` 中定义的 html 片段并加载到局部刷新的div，并执行 `window[url].init` 初始化方法。 108 | 109 | `ajaxRequest` 方法主要是和后端的服务进行交互，通过 `XMLHttpRequest` 发送请求（ `GET` 或 `POST`），如果获取的是 html 片段就把它缓存到 `settings.partialCache[url]` 里，因为 html 片段是相对固定的，每次请求返回的内容不会变化。如果是其他请求（比如向 Github 的 markdown 服务 POST 一个字符串）就不能缓存了。 110 | ```javascript 111 | miniSPA.ajaxRequest = function(url, method, data, callback) { //load partial page 112 | if(settings.partialCache[url]){ 113 | callback(200, settings.partialCache[url]); 114 | } 115 | else { 116 | var xmlhttp; 117 | if(window.XMLHttpRequest){ 118 | xmlhttp = new XMLHttpRequest(); 119 | xmlhttp.open(method, url, true); 120 | if(method === 'POST'){ 121 | xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 122 | } 123 | xmlhttp.send(data); 124 | xmlhttp.onreadystatechange = function(){ 125 | if(xmlhttp.readyState == 4){ 126 | switch(xmlhttp.status) { 127 | case 404: //if the url is invalid, show the 404 page 128 | url = 'notfound'; 129 | break; 130 | default: 131 | var parts = url.split('.'); 132 | if(parts.length>1 && parts[parts.length-1] == 'html'){ //only cache static html pages 133 | settings.partialCache[url] = xmlhttp.responseText; //cache partials to improve performance 134 | } 135 | } 136 | callback(xmlhttp.status, xmlhttp.responseText); 137 | } 138 | } 139 | } 140 | else{ 141 | alert('Sorry, your browser is too old to run this app.') 142 | callback(404, {}); 143 | } 144 | } 145 | } 146 | ``` 147 | 对于不支持 `XMLHttpRequest` 的浏览器（主要是 IE 老版本），本来是可以在 else 里加上 **xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');** 的，不过，我手头也没有那么多老版本 IE 用于测试，而且老版本 IE 本来就是我深恶痛绝的东西，凭什么要支持它啊？所以就干脆直接给个 `alert` 完事。 148 | 149 | 150 | `render` 方法一般在每个片段的初始化方法中调用，它会设定全局变量中的根对象，并通过 `refresh` 方法渲染 html 片段。 151 | ```javascript 152 | miniSPA.render = function(url){ 153 | settings.rootScope = window[url]; 154 | miniSPA.refresh(settings.divDemo, settings.rootScope); 155 | } 156 | ``` 157 | 158 | 获取后端数据后，如何渲染 html 片段是个比较复杂的问题。这就是 DOM 操作了。总体思想就是从 html 片段的根部入手，遍历 DOM 树，逐个替换属性和文本中的占位变量（例如`` 和 `

{{emojis.key}}

`），匹配和替换是在 `feedData()` 方法中完成的。 159 | 160 | 对于 img 元素，src 属性一开始是未知的，也不能直接把变量定义到它里面，不然浏览器会报404错误，虽然不影响用户使用，但对于代码来说总归是不好看的。所以需要在获取了 `data-src` 属性值后再复制到 src 中去，这样一开始 `src` 属性是空的，就不会报错了。 161 | 162 | 这里最麻烦的是 `data-repeat` 属性，这是为了批量渲染格式相同的一组元素用的。比如从 Github 获取了全套的 emoji 表情，共计 888 个（也许下次升级到1000个），就需要渲染 888 个元素，把 888 个图片及其说明放到 html 片段中去。而 html 片段中对此只有一条定义： 163 | 164 | ```html 165 | 173 | ``` 174 | 等 888 个 emoji 表情来了之后，就要自动把 `
  • ` 元素扩展到 888 个。这就需要先 `clone` 定义好的元素，然后根据后台返回的数据逐个替换元素中的占位变量。 175 | ```javascript 176 | miniSPA.refresh = function(node, scope) { 177 | var children = node.childNodes; 178 | if(node.nodeType != 3){ //traverse child nodes, Node.TEXT_NODE == 3 179 | for(var k=0; k')+'","mode": "gfm","context": "github/gollum"}'; 299 | miniSPA.ajaxRequest('https://api.github.com/markdown', 'POST', data,function(status, page){ 300 | document.getElementById('spinner').style.visibility = 'hidden'; 301 | md.innerHTML = page; //render markdown partial returned from the server 302 | }); 303 | mdText.value = ''; 304 | } 305 | miniSPA.changeUrl(); //initialize 306 | ``` 307 | 308 | 这两个对象对应的 html 片段如下： 309 | 310 | getEmoji.html : 311 | ```html 312 |

    GET request: Fetch emojis from Github pulic API.

    313 |

    This is a list of emojis get from https://api.github.com/emojis:

    314 | 315 | 316 |

    Get {{emojis.length}} items totally.

    317 |
    318 |
      319 |
    • 320 |
      321 | 322 |
      {{data.key}}
      323 |
      324 |
      • 325 |
    326 |     327 | ``` 328 | 329 | postMD.html : 330 | ```html 331 |

    POST request: send MD text and get rendered HTML

    332 |

    markdown text here (for example: Hello world github/linguist#1 **cool**, and #1! ):

    333 | 334 | 335 |
    336 |

    Rendered elements from Github API (https://api.github.com/markdown):

    337 | 338 |
    339 | ``` 340 | 341 | 342 | ## 完整源代码 343 | 源代码在 [gh-pages](https://github.com/coderLMN/framework-free-single-page-app/tree/gh-pages) 分支里可以看到。 344 | 345 | ## 演示地址 346 | 以上代码的在线演示可以在 [我的 Github 项目页面](https://coderlmn.github.io/framework-free-single-page-app/ ) 看到。 347 | 348 | 以上演示代码已经在 `Chrome`, `Firefox`, `Safari` 和 `Opera` 较新版本上测试过。`IE 9` 以上版本估计也可以，不过没测过。 349 | 350 | 另外，这些代码还有不少值得优化的地方，不过时间有限，主要是为了达到演示目的，让代码保持精简为好，所以暂时就不去改它了。 351 | 352 | ## 前端技术探讨 353 | 354 | 我的[另外一个 repo](https://github.com/coderLMN/frontEndCourse) 里有我自己关于前端技术的一些思考和尝试。它对应的 [gh-pages](https://coderlmn.github.io/frontEndCourse/) 分支里有一些演示，还有几篇翻译文章，也欢迎讨论和指正。 355 | 356 | 357 | ## 补充讨论 358 | 有同学提出了事件处理的问题，我更新了一下演示，说明如下： 359 | 360 | 事件的处理可以直接添加到元素上，不用改动现有代码。对于 data-repeat 元素，可以在事件响应方法的参数里传递它的 id 等唯一标识，例如在 361 | 362 | ```html 363 |