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 ...
随机推荐
- WebGL中的OpenGL着色器语言
在webgl中,调用了OpenGL-ES-2.0的API,而在OpenGL-ES专为嵌入式设备设计,其和其它设备一样,都是使用GLSL(GL Shading Language)来编写片段程序并执行于G ...
- android硬件返回
1.第一种 @Override public boolean onKeyUp(int keyCode, KeyEvent event) { //点击回退键 if(Ke ...
- chkcofnig-minimal-script
author :headsen chen date: 2018-06-04 12:02:27 #!/bin/bash for i in `chkconfig --list |awk '{print ...
- iOS 引导页面启动一次
#import "AppDelegate.h" @implementation AppDelegate - (BOOL)application:(UIApplication *)a ...
- 怎么在android实现通过浏览器点击链接打开apk
intent://scan/#Intent;scheme=appname://appname/[频道]/[id];package=com.appname.package;end http://m.ch ...
- 在Windows上手动安装php开发环境
安装MySQL 使用官方提供提供的安装包一键安装即可. 打开 mysql,选择Windows,MSI Installer点击下载.附:最新版mysql5.7.18下载地址 点击installer安装, ...
- 英语知识(与字面意思 相反的) Corner office
Corner office 角落办公室是一种身份 角落办公室,即处于公司最佳位置的高级办公室,通常指总裁或总经理办公室.喻某人在公司或单位里的最高职务或在社会上与众不同的身份地位. 这里的角落是指方形 ...
- CSDN BI Flume
https://so.csdn.net/so/search/s.do?q=bytebuf&t=%20&u=
- 新团建立时间 timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
w 不根据当前时间戳更新. `wtime` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
- HTTP代理服务器基本知识
http://www.cnblogs.com/TankXiao/archive/2012/12/12/2794160.html https://blog.csdn.net/xiaoxiaorenky/ ...