hash值是啥,单页面应用的实质
1.什么hash
Location hash属性,http://www.runoob.com/jsref/prop-loc-hash.html,hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分)。通俗地说,就是html中#号及#号后面的所有字符串。比如:file:///C:/Users/wulinzi/Desktop/test/index.html#??####????haha#123?234,console.info(window.location.hash);
//#??####????haha#123?234
Location对象:http://www.runoob.com/jsref/obj-location.html可以参考。
2.单页面应用实际上就是:利用hash值的改变(进行监听),一旦改变hash就切换单页面,利用壳儿load或ajax加载html页面及对应的js。
$( container ).load( router.view, function() {
container
.find( "script[type='amd']" )
.each( function() {
var module = this.src;
module = module.substr( module.indexOf( "src/modules" ) ).substr(4).replace( /\.js$/i, "" );
require( [ module ], function( module ) {
module( container.children() );
} );
} );
/**
* require( [ module ], function( module ) {
module( container.children() );
} );
* require( [ "modules/bindTip/index" ], function( func ) {
func( container.children() );
} );
*
* 单页js返回一整个方法,而且是define,所有这里可以require,并且可以立即执行。
*
*/
} );
加载:app.js里很多when()执行完----otherwise()----listen(监听window.onhashchange==dispatch)----dispatch(previous,current,window.hash)----run(ajax,load,js);一个页的加载结束。
切换页:path.where(”hash“,window.hash=hash)----监听到了改变onhashchange()----dispatch()----run().换页结束。
hash值是啥,单页面应用的实质的更多相关文章
- 利用hash或history实现单页面路由
目录 html代码 css代码 JavaScript代码 hash方式 history 方式 浏览器端代码 服务器端 在chrome(版本 70.0.3538.110)测试正常 编写涉及:css, h ...
- window.location.hash(hash应用)---跳转到hash值制定的具体页面
location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url.而location. ...
- 单页面实现之hash
至学了angularJs后,发现这个单页面应用不知道在没有angularJs的情况下怎么实现. 所以就此对这个思考与资料并行,终于知道这个的实现基本原理. 首先angularJs的实现是hash值的变 ...
- 单页面SPA应用路由原理 history hash
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
每天记录一点:NetCore获得配置文件 appsettings.json 用NetCore做项目如果用EF ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...
- 快速构建H5单页面切换骨架
在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...
- IOS9.0中hash值的bug与解决方案
事件起因 事情是这样的:产品上线发布,突然出现了问题.运营Gg过来反应,当场给露珠演示,运营同事的手机是iphone,bug确实是存在的.奇怪的是露珠用了其他iphone手机(借别人的,露珠的是吊死安 ...
- 浅谈HTML5单页面架构(二)——backbone + requirejs + zepto + underscore
本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)--requirejs + angular + a ...
- 关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转
还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p ...
随机推荐
- maven公布jar、aar、war等到中央库(Central Repository)的步骤
步骤一:注冊账号.申请ticket. 注冊在这里:https://issues.sonatype.org 申请ticket:创建一个issue.注意这里要选OSSRH,且是PROJECT而不是TASK ...
- hdu 2141:Can you find it?(数据结构,二分查找)
Can you find it? Time Limit: 10000/3000 MS (Java/Others) Memory Limit: 32768/10000 K (Java/Others ...
- Linux命令之乐--script和scriptplay
script和scriptplay可以把终端会话记录到一个文件中,可以用来制作命令行教学视屏. 开始录制会话 [root@new test]# script -t >timing.log -a ...
- Socket通信编程实例(SIB和SS'SOB)
客户端: package socket; import java.io.BufferedReader; import java.io.IOException; import java.io.Input ...
- Android Studio添加assets文件夹
Step #1:调出项目结构管理区域 View->Tool Windows->Project Step #2:结构管理区域选择“Project” Step #3:新建"asset ...
- Cognos组织架构介绍
Cognos只是一个工具,说到Cognos相信大部分人都知道BI(商业智能,Business Intelligence). Cognos也是属于SOA架构,面向服务的体系结构,是一个组件模型,它将应用 ...
- JavaScript匿名函数的使用
JavaScript匿名函数的使用: http://www.cnblogs.com/skykang/archive/2010/12/03/1895274.html 一.什么是匿名函数? 在Javas ...
- 170413、怎么精确理解leader布置的任务(技术外的话)
[缘起] 和一个同学交代了一个很重要的事情,结果执行的结果并不是自己想要的,微微生气之余,简单的聊聊“如何精确的理解leader布置的任务”. [员工角度的潜在困惑] 1)leader讲了很多,脑子记 ...
- Struts2---输入验证
1. Struts2 的验证 1). 验证分为两种: > 声明式验证* 需要解决的问题如下: >> 确定对哪个 Action 或 Model 的那个字段进行验证 >> 使 ...
- Python全栈day19(函数补充)
一,深浅拷贝 看拷贝列子day19-1.py s=[1,'zhangsan','lisi'] #s2是s的拷贝 s2=s.copy() #打印s2和s是一样的 print(s2) #修改s2 s2[0 ...