这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文将使用 javascript 实现一个极其简单的路由实例。web 开发中路由概念并不陌生,我们接触到的有前端路由和后端路由。后端路由在很多框架中是一个重要的模块, 同样前端路由在单页面应用也很常见,它使得前端页面体验更流畅。
前言
前端路由在很多开源的 js 类库框架中都得到支持,如 angularJS,Backbone,Reactjs 等等。前端路由和后端路由原理一样,是让所有的交互和展现在一个页面运行以达到减少服务器请求,提高客户体验的目的,越来越多的网站特别是 web 应用都用到了前端路由。
页面中有一个导航菜单 ul,和一个 div#result 用来显示结果,当点击导航菜单时,#result 中会显示不同的结果内容。
- <ul>
- <li>
- <a href="#/">
- 首页
- </a>
- </li>
- <li>
- <a href="#/product">
- 产品
- </a>
- </li>
- <li>
- <a href="#/server">
- 服务
- </a>
- </li>
- </ul>
- <div id="result">
- </div>
JAVASCRIPT
说一下前端路由实现的简要原理,以 hash 形式(也可以使用 History API 来处理)为例,当 url 的 hash 发生变化时,触发 hashchange 注册的回调,回调中去进行不同的操作,进行不同的内容的展示。
- function Router() {
- this.routes = {};
- this.curUrl = '';
- this.route = function(path, callback) {
- this.routes[path] = callback ||
- function() {};
- };
- this.refresh = function() {
- this.curUrl = location.hash.slice(1) || '/';
- this.routes[this.curUrl]();
- };
- this.init = function() {
- window.addEventListener('load', this.refresh.bind(this), false);
- window.addEventListener('hashchange', this.refresh.bind(this), false);
- }
- }
上面代码中路由系统 Router 对象实现,主要提供三个方法:
init 监听浏览器 url hash 更新事件。
route 存储路由更新时的回调到回调数组 routes 中,回调函数将负责对页面的更新。
refresh 执行当前 url 对应的回调函数,更新页面。
Router 调用方式如下:
点击触发 url 的 hash 改变,并对应地更新内容,运行后你会发现每次点击菜单时,#result 中会变换背景色和内容。
- var R = new Router();
- R.init();
- var res = document.getElementById('result');
- R.route('/',
- function() {
- res.style.background = 'blue';
- res.innerHTML = '这是首页';
- });
- R.route('/product',
- function() {
- res.style.background = 'orange';
- res.innerHTML = '这是产品页';
- });
- R.route('/server',
- function() {
- res.style.background = 'black';
- res.innerHTML = '这是服务页';
- });
总结
来源: http://www.phperz.com/article/17/0524/331945.html