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 ...
随机推荐
- db2 导入cvs
1) 打开DB2 命令行 2) 如果是第一次连接到远程的DB2 数据库:如果不是,请直接跳转到3) 在DB2 命令行窗口执行: catalog tcpip node DB21 ...
- matlab获取图片的size属性,长宽
width=size(imread(‘文件名'),2): %获取图像宽length=size(imread(‘文件名'),1): %获取图像长 g=imread(['D:\文件及下载相关\桌面\代码 ...
- 编程之美 set 21 24点游戏
题目 输入: n1, n2, n3, n4 (1~13) 输出: 若能得到运算结果为 24, 则输出一个对应的运算表达式 如: 输入: 11, 8, 3, 5 输出: (11-8) * (3*5) = ...
- WPF进阶之接口(1):IValueConverter,IMultiValueConverter
看一个例子,FontFamily="Trebuchet MS, GlobalSansSerif.CompositeFont" .这样一条简单的语句,熟悉WPF的人在xaml中可能经 ...
- Intent讲解
什么是Intent? Intent是一个消息传递对象,可以使用它来启动其它应用组件.Intent使组件之间通信更加便利,主要用于以下三点: 启动Activity: 可以将intent作为参数调用Con ...
- Influxdb时序数据库阅读笔记
时序数据库 2017年2月Facebook开源了beringei时序数据库:到了4月基于PostgreSQL打造的时序数据库TimeScaleDB也开源了,而早在2016年7月,百度云在其天工物联网平 ...
- Android得到SD卡文件夹大小以及删除文件夹操作
float cacheSize = dirSize(new File(Environment.getExternalStorageDirectory() + AppConstants.APP_CACH ...
- java的Enumeration转list
java的Enumeration转list Enumeration<String> attrs = getAttrNames();// while(attrs.hasMoreElement ...
- 160303、js加密跟后台加密对应
md5.js var hexcase = 0; var b64pad = ""; var chrsz = 8; function hex_md5(s){ return binl2h ...
- Code Forces 22B Bargaining Table
B. Bargaining Table time limit per test 2 seconds memory limit per test 256 megabytes input standard ...