文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

SPA（单页面应用）的基本实现原理

今天博主就简单的将实现的原理写一下，鄙人能力有限，写的不好的，或者您有自己的想法的，可以随时联系我，这里写的是原生的js实现，不是使用vue或者react的路由实现，所以我明白那些每天使用框架的人看到以后的感觉...源码已经上传到Github上：spa应用的简单实现 我们首先看一下效果： ? 那么之前我说过，遇到一个问题怎么办？...OK，问题定位到了以后，下面就是怎么解决的问题，首先我们都知道，不刷新页面其实很简单，就是使用ajax就可以了，ajax的异步请求是完全可以满足我们第一个问题的解决方案的，第二个怎么做呢？...那Json里面其实也很简单，只是三条我们需要展示的数据： [ { "name": "hi,我是tom", "text": "这是tom的部分" },{ "name": "hi,我是jim...这里有的人可能不是很明白，hashchange是个什么东西，下面简单的介绍一下： 　　①当URL的片段标识符更改时，将触发hashchange事件（跟在#符号后面的URL部分，包括#符号） 　　②hashchange

1.3K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Promise、Generator、Async 合集

    异步解决方案的发展历程1.回调函数从早期的Javascript代码来看，在ES6诞生之前，基本上所有的异步处理都是基于回调函数函数实现的，你们可能会见过下面这种代码：ajax('aaa', () =>...会返回一个Object,而不是像普通函数返回return 后面的值g.next() // { value: 7, done: false }//调用指针的 next 方法,会从函数的头部或上一次停下来的地方开始执行...因此，建议总是使用catch方法，而不使用then方法的第二个参数。...这个新的promise对象在触发成功状态以后，会把一个包含iterable里所有promise返回值的数组作为成功回调的返回值，顺序跟iterable的顺序保持一致；如果这个新的promise对象触发了失败状态...，它会把iterable里第一个触发失败的promise对象的错误信息作为它的失败错误信息。

    46900

    JavaScript的异步编程之Promise

    ，这个回调函数两个参数，第一个把Promise 改成为成功的状态，第二个参数把Promise改变成失败的状态，捕获成功和异常可以使用.then和.catch方法，这两个方法返回的也是一个Promise对象....json') }).then(ret => { return ajax('/json4.json') }) 这种链式调用是不是很熟悉，在jqeury中也有链式调用，jquery中是返回了本身这个对象所以可以实现链式调用...，那么在Promise中是不是这样呢 let promsie1 = ajax('/json1.json') let promise2 = promsie1.then(ret => {..., Promise.race只会等待第一个结束的任务而结束 const request = ajax('/api/???')...reject("失败就失败下一个成功"); }); const two = new Promise((resolve, reject) => { setTimeout(resolve, 30, "我是第二个完成的

    89870

    什么是jQuery？

    我觉得非常重要的理由就是：它能够兼容市面上主流的浏览器，我们学习AJAX就知道了，IE和FireFox获取异步对象的方式是不一样的，而Jquery能够屏蔽掉这些不兼容的东西… （1）写少代码,做多事情【...这里写图片描述 ---- Jquery对ajax常用的API 我们在开始使用JavaScript学习AJAX的时候，创建异步对象时，需要根据不同的浏览器来创建不同的对象….装载XML文件的时候，也有兼容性的问题...这里写图片描述 我来补充一下： 第一个参数：表示的是要请求的路径 第二个参数：要把哪些参数带过去给服务器端，需要的是JSON格式的 第三个参数：回调方法，服务器返回给异步对象的时候，会调用该方法 回调方法也有三个参数...中的核心对象 一般地，我们只需要用到第一个参数！...这里写图片描述 serialize() 上面在介绍参数的时候已经说了，发送给服务器端的参数是需要JSON格式的，但是呢，如果我在表单中有很多很多的参数呢？？？那不是要我自己一个一个地去拼接？？？？

    4K70

    jQuery (二)

    实时事件 实时事件为，如果先前将所有a元素绑定了一个事件，接着在创建一个新的a的节点，如果此时触发事件，则新创建的a元素不会被触发事件，因为绑定的不是实时的事件。...，top接受两个可选的参数，如果第一个为true将会清楚当前队列，否则队列将不会被清除，第二个为是否保留当前值，如果未true将会变化到终值，如果为false将会保持当前值，然后开始执行动画 // 当属性悬浮在图片上时...Ajax Ajax实现了不需要刷新，即可动态的加载一部分页面， load 是滴，load如果传入的参数为字符串，而是函数，load为事件的处理程序的注册，而不是ajax方法。...请求成功，或未成功，将会调用该函数 Ajax工具函数 jQuery.getScript() 将会异步的加载一段脚本 同样受到同源的限制 第一个参数为url，第二个参数为运行完成以后将要执行的回调函数 jQuery.getScript...过滤或者预处理服务器返回的数据 ajax事件 ajax还会在请求的时候，触发相应的事件 这个用于在请求某些图片的时候，在图片仍旧继续下载的时候，使用相应的时间，提示出图片正在加载中 例如 $('#loading_animation

    10.8K30

    Juqery就是这么简单

    我觉得非常重要的理由就是：它能够兼容市面上主流的浏览器，我们学习AJAX就知道了，IE和FireFox获取异步对象的方式是不一样的，而Jquery能够屏蔽掉这些不兼容的东西… （1）写少代码,做多事情【...这里写图片描述 我来补充一下： 第一个参数：表示的是要请求的路径 第二个参数：要把哪些参数带过去给服务器端，需要的是JSON格式的 第三个参数：回调方法，服务器返回给异步对象的时候，会调用该方法 回调方法也有三个参数...中的核心对象 一般地，我们只需要用到第一个参数！...这里写图片描述 ---- serialize() 上面在介绍参数的时候已经说了，发送给服务器端的参数是需要JSON格式的，但是呢，如果我在表单中有很多很多的参数呢？？？...那不是要我自己一个一个地去拼接？？？？

    2.9K50

    大厂高频面试精选

    array]]) { // Return element for new_array }[, thisArg] ) 这个 callback 一共可以接收三个参数，其中第一个参数代表当前被处理的元素，而第二个参数代表该元素的索引...而 parseInt 则是用来解析字符串的，使字符串成为指定基数的整数。parseInt(string, radix)接收两个参数，第一个表示被处理的值（字符串），第二个表示为解析时的基数。...注意：深度 DFS 属于盲目搜索，无法保证搜索到的路径为最短路径，也不是在搜索特定的路径，而是通过搜索来查看图中有哪些路径可以选择。...本质上这种遍历在图上是逐层移动的，首先检查最靠近第一个节点的层，再逐渐向下移动到离起始节点最远的层。...return ajax('XXX3') }).then(res => { // 操作逻辑 }) 缺点：无法取消 Promise ，错误需要通过回调函数来捕获。

    1.1K20

    详细解读Jquery各Ajax函数：$.get(),$.post(),$.ajax(),$.getJSON()

    这个函数的意义是巨大 的，它可以很大程度的缩减页面初次载入的代码量，因为你可以根据用户的交互来载入相应的JS文件，而不必在页面初始化的时候全部载入。...如果需要，你可以在这里设置XMLHttpRequest对象 ajaxSend (全局事件) 请求开始前触发的全局事件 success (局部事件) 请求成功时触发。...ajaxComplete 全局事件全局的请求完成时触发 ajaxStop (全局事件) 当没有Ajax正在进行中的时候，触发 局部事件在之前的函数中都有介绍，我们主要来看看全局事件。...全局事件也可以帮助你编写全局的错误相应和成功相应，而不需要为每个AJAX请求独立设置。...第一个参数即事件本身；第二个是XHR对象；第三个是你传递的ajax参数对象。

    5.3K100

    你真的知道ajax的全部吗？

    ajax是只客户端需要数据，发送异步请求到后端去获取。这个获取过程是异步过程，不会阻塞前面页面的进程。...但是呢，当数据接受完毕的时候，我们前端需要做一些处理，但是又不知道什么请求回来数据，这个时候就麻烦了。不是说无法处理，而是写代码很难看了。 这个时候，我们需要知道jquery的defer对象。...还是以上面的代码为例，如果ajax操作成功后，除了原来的回调函数，我还想再运行一个回调函数，怎么办？ 很简单，直接把它加在后面就行了。 　　...五、普通操作的回调函数接口（上） deferred对象的最大优点，就是它把这一套回调函数接口，从ajax操作扩展到了所有操作。...$.when($.ajax( "/main.php" )) .then(successFunc, failureFunc ); 如果then()有两个参数，那么第一个参数是done()方法的回调函数，

    1.3K70

    进阶 | 一份详细的AJAX与跨域处理讲解

    可是 1.我们可能想用GET POST PUT DELETE 方法 2.不想刷新整个页面，想用一种更易于理解的方式来响应 AJAX出现 浏览器和服务器交互模式 V1.0 在AJAX未出现之前，浏览器想从服务器获得资源...一般用三个参数，第一个参数是请求的方法，可以用GET POST DELETE PUT等等，URL是用访问的路径，async是是否使用同步，默认true,开启异步，不需要做修改即可，所以实际中只写前两个参数...此时服务器端代码是： 我们浏览器有同源政策，不是同协议 同域名 同端口 的网页无法相互访问。 AJAX恰好是同源政策的拥趸。 CORS 1.如果AJAX向非同源的地址发起请求，会报错。...而 AJAX 是可以读取响应内容的，因此浏览器不能允许你这样做。如果你细心的话你会发现，其实请求已经发送出去了，你只是拿不到响应而已。...所以实际上jq的写法大多是这么写的 链式调用的意思就是：成功函数成功了，就执行第二个then的第一个函数；成功函数失败了，就执行第二个then的第二个函数。

    96610

    jQuery的deferred对象详解

    本文不是初级教程，针对的读者是那些已经具备jQuery使用经验的开发者。如果你想了解jQuery的基本用法，请阅读我编写的《jQuery设计思想》和《jQuery最佳实践》。...五、普通操作的回调函数接口（上） deferred对象的最大优点，就是它把这一套回调函数接口，从ajax操作扩展到了所有操作。...它的作用是，在原来的deferred对象上返回另一个deferred对象，后者只开放与改变执行状态无关的方法（比如done()方法和fail()方法），屏蔽与改变执行状态有关的方法（比如resolve(...然后，我们把回调函数绑定在这个对象上面，而不是原来的deferred对象上面。这样的好处是，无法改变这个对象的执行状态，要想改变执行状态，只能操作原来的deferred对象。...$.when($.ajax( "/main.php" )) .then(successFunc, failureFunc ); 如果then()有两个参数，那么第一个参数是done()方法的回调函数

    1.6K60

    backbone 整体架构学习

    ，也可以加上jQuery，因为backbone的数据处理默认是ajax，而jQuery封装了强大的DOM操作和ajax 三、模型的创建、实例化和继承 var model1 = new Backbone.Model...Backbone.Model.extend({ aaa: function() { // 第一个参数...alert( 123 ); } },{ bbb: function() { // 第二个参数...答： 页面不是一个个链接连成，而是单页面开发，此时需要路由进行页面管理（在同一个HTML页面通过(#xxx)  如： http://xx.xx.xxx.html#xxx/xxx，跳转执行不同代码）。...而路由又涉及到历史管理（因为跳转到不同代码块《或者说是页面》之后，用户会往往会通过页面的 ‘返回’ 按钮进行操作，此时需要启动路由的历史管理，从而让历史管理知道返回页面的具体执行代码块《或者说是页面》）

    98980

    几个常见的js手写题，你能写出来几道

    实现 new 过程：要点：函数第一个参数是构造函数实例的proto指向构造函数的原型属性prototype函数剩余参数要挂载到一个实例对象上构造函数有返回值时，就返回这个返回值const createObj...这些事件触发频率太过频繁，绑定在这些事件上的回调函数会不停的被调用。会加重浏览器的负担，导致用户体验非常糟糕。节流防抖主要是利用了闭包。节流节流函数来让函数每隔 n 毫秒触发一次。...$.ajax(url, this.value) // 注意这个 this 在执行时被 apply 到了内部匿名函数上的 this ，也就是 input})防抖防抖函数让函数在 n 毫秒内只触发最后一次。...这些事件触发频率太过频繁，绑定在这些事件上的回调函数会不停的被调用。会加重浏览器的负担，导致用户体验非常糟糕。节流防抖主要是利用了闭包。节流节流函数来让函数每隔 n 毫秒触发一次。...$.ajax(url, this.value) // 注意这个 this 在执行时被 apply 到了内部匿名函数上的 this ，也就是 input})防抖防抖函数让函数在 n 毫秒内只触发最后一次。

    1.1K30

    前端入门20-JavaScript进阶之异步回调的执行时机声明正文-异步回调的执行时机

    这是用 jQuery 写的 ajax 网络请求的示例，这条请求自然是异步进行的，但当请求结果回来后，会去触发 success 或 error 回调，那么，问题来了： Q：想过没有，如果请求结果回来后... 标签内那些用于上面两种场景测试的代码注释掉，只留一个异步请求的代码，然后在第二个 标签内，加个 alert("3") 来模拟程序是在第一个 中发起异步请求...所以，如果这时候第一个 标签内的代码发起的异步任务才结束，才将回调工作加入事件队列中，那么这个回调工作的代码只能等到第二个 标签内的代码都执行结束后才会被处理。...然后，我怀疑是不是不同浏览器会有不同的行为，所以同样的测试步骤我在 IE 浏览器上测试了一下： ?...最后，我让我一些同事帮忙测试了一下，在 chrome 上测试、在 jsfiddle 上测试，测试结果，基本上全部都是我上文中梳理的结论。

    1.3K30

    backbone 整体架构学习

    ，也可以加上jQuery，因为backbone的数据处理默认是ajax，而jQuery封装了强大的DOM操作和ajax 三、模型的创建、实例化和继承 var model1 = new Backbone.Model...Backbone.Model.extend({ aaa: function() { // 第一个参数...alert( 123 ); } },{ bbb: function() { // 第二个参数...答： 页面不是一个个链接连成，而是单页面开发，此时需要路由进行页面管理（在同一个HTML页面通过(#xxx)  如： http://xx.xx.xxx.html#xxx/xxx，跳转执行不同代码）。...而路由又涉及到历史管理（因为跳转到不同代码块《或者说是页面》之后，用户会往往会通过页面的 ‘返回’ 按钮进行操作，此时需要启动路由的历史管理，从而让历史管理知道返回页面的具体执行代码块《或者说是页面》）

    93800
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券