由单页应用引出的胡言乱语

原创 2015年07月09日 22:48:51

单页应用很火。翻开知乎,看到“单页应用的好处”,到处可见:前后端分离等等云云。

它是个啥?《单页Web应用----JavaScript从前端到后端》赫然写着,“单页应用指的是在浏览器中运行的应用,在使用期间页面不会重新加载”。

举个例子,传统web的导航条,点一个菜单,啪发送一个请求给服务器,然后展示一个新页面;然后点另外一个菜单,啪又发送一个请求个服务器,然后又展示一个新页面。这页面是重新加载的,是崭新的。但是【单页应用】不会,你点击一个导航条,它甚至都不会发送请求给服务器,只是默默的局部刷新一下内容页(比如AngularJS的路由)。

这是怎样实现的?抛开一堆花里胡哨的JS库不看,就从它们的根---JavaScript看起。JS语言的两个重点:1.DOM操作 2.Ajax请求。

00:我们先最猥琐的方式实现一个单页应用:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <script type="text/javascript">
        var pages = {1:"这是页面1",2:"这是页面2"};
        window.onload = function(){
            document.getElementById("content").innerHTML = pages[1];
        }
        function clickPage(id){
            document.getElementById("content").innerHTML = pages[id];
        }
        </script>
    </head>
    <body>
        <div style="width:100%;height:80px;">
            <a href="javascript:clickPage(1)">页面1</a>
            <a href="javascript:clickPage(2)">页面2</a>
        </div>
        <div id="content">
        </div>
    </body>
</html>


其实就是根据点击的菜单,用innerHTML将页面嵌入到div中;pages中的内容可以发散思维啊,就是可以填入巨复杂的html串,里面包含js进行ajax请求来刷新自己/展示数据等等。这就是一个单页应用,只不过写代码的人应该是相当痛苦。

01:然后就有人说,把每个页面的html独立到单独的代码文件中吧。不要直接放在字符串中,要不然太痛苦了。然后就有了下面的一种实现:

index1.html

index2.html

里面各种html/js代码,利用ajax请求来读取数据发送请求等等。

然后index.html这样实现:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"?>
        <script type="text/javascript" src="jquery-1.10.2.js"></script>
        <script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery("#content").load("index1.html");
        });
        function clickPage(id){
            jQuery("#content").load("index"+id+".html");
        }
        </script>
    </head>
    <body>
        <div style="width:100%;height:80px;">
            <a href="javascript:clickPage(1)">页面1</a>
            <a href="javascript:clickPage(2)">页面2</a>
        </div>
        <div id="content">
        </div>
    </body>
</html>

是不是清爽了很多?导航切换时也只是局部刷新了content的内容,没有重新加载页面。

02:有人说,还是太复杂了,再让它清爽一点吧。于是就有了类似下面的实现:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"?>
        <script type="text/javascript" src="jquery-1.10.2.js"></script>
        <script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery("#content").load("index1.html");
            jQuery("a").bind("click",function(event){
                if(jQuery(this).attr("href")=="#page1"){
                    jQuery("#content").load("index1.html");
                }else if(jQuery(this).attr("href")=="#page2"){
                    jQuery("#content").load("index2.html");
                }
                event.stopPropagation(); 
            });
        });
        </script>
    </head>
    <body>
        <div style="width:100%;height:80px;">
            <a href="#page1">页面1</a>
            <a href="#page2">页面2</a>
        </div>
        <div id="content">
        </div>
    </body>
</html>

03.这时又有人说了,我甚至不希望关心点击导航时,页面是如何局部刷新的。我只期望指定某个导航对应哪个页面即可。OK,那我们就对它的方法进行一下抽象吧。

route.js

function routeProvider(menu){
    var dict = Array();
    for(var key in menu){
        dict[key] = menu[key]["template"];
    }
    jQuery("a").bind("click",function(event){
        jQuery("#content").load(dict[jQuery(this).attr("href")]);
        event.stopPropagation(); 
    });
}

index.html的实现:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"?>
        <script type="text/javascript" src="jquery-1.10.2.js"></script>
        <script type="text/javascript" src="route.js"></script>
        <script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery("#content").load("index1.html");
            routeProvider({
                "#page1":{"template":"index1.html"},
                "#page2":{"template":"index2.html"},
            });
        });
        </script>
    </head>
    <body>
        <div style="width:100%;height:80px;">
            <a href="#page1">页面1</a>
            <a href="#page2">页面2</a>
        </div>
        <div id="content">
        </div>
    </body>
</html>

OK,你甚至可以沿着这个思路,继续封装,最后实现一个类似AngularJS路由功能类似的东东。

框架API是我非常不愿意记忆的API之一,我觉得毫无意义,只是他人提出来的理念,让你照着他的意思玩。太耗费大脑的存储空间了,而且现在的JS库也实在太多了。







版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

关于RAC节点重启的一点胡言乱语

关于RAC的io fence,一直想写点什么作为总结,毕竟干了这么多年,遇见的大大小小的节点重启也很多次了,今天,月黑风高,LOL被人骂成翔,还是静下心来写写技术文档吧 RAC的io fence,中文...

【胡言乱语】游戏产业已经日趋成熟了……

一个成熟产业最大的特点就在于工种的确定。 不是说策划、美术、程序这种级别的工种。 而是从整个产业的角度来说,引擎提供者、中间件提供者、内容提供者、销售者,这些工种的确立。 国内几年前的开发思路还...

转帖 胡言乱语计算机2

 中断和异常处理是OS中非常重要的组成部分,当然windows也不例外,他们是我们理解OS一些概念、机制的基础。中断和异常简单的来说,就是在程序正常执行流程中,突发一个事件,导致程序的执行流程转向另外...

其实我想说——胡言乱语

1、我为什么会对软件的名字那么在意? 经常会去询问应该起个什么名字。但是得到的回答往往是随便一个都可以。 虽然我回头真的给软件起了个随便的名字,但是我心里挺难受,觉得大家并不太关心我的工作成果。 ...

h5 单页应用 首页效果

  • 2017年11月22日 10:37
  • 29KB
  • 下载

使用Vue.js创建一个时间跟踪的单页应用

Vue.js很简单。正因为如此简单,人们常常认为其适合于小项目。虽然真正的Vue.js核心知识只是一个视图层库,实际上有一组工具,将使您能够使用Vue.js构建完整的大规模SPA(单页应用程序)。 ...

单页应用跳转实现浅析-demo篇

单页应用跳转实现浅析demo篇
  • guo8ke
  • guo8ke
  • 2017年05月02日 13:42
  • 886
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:由单页应用引出的胡言乱语
举报原因:
原因补充:

(最多只允许输入30个字)