标签搜索
搜索到
7
篇与
的结果
-
HTTP协议 前后端的数据交互一般基于HTTP协议:HTTP协议构成客户端: 客户端发送请求到服务器端服务器: 服务器端发送响应到客户端在HTTP中数据可以称做资源, 可以是图片, 普通文本等, 资源是通过URL定位的,URL组成部分https://www.cicaba.top/watch?v=1924https:// 协议www.cicaba.top host/watch 路径?v=1924 参数HTTP请求组成部分1. 请求方式常用请求方式说明请求体get获取资源✘post创建资源✔put更新资源✔delete删除资源✘2. 请求头包含额外的信息来帮助服务器如何响应客户端请求3. 请求体发给服务器的资源数据HTTP响应组成部分HTTP版本响应状态码状态码说明100-199一般信息200-299成功响应300-399重定向400-499客户端错误500-599服务端错误响应头响应的额外信息如: cookie响应体服务端返回的数据总结HTTP是无状态的, 每次请求都被认为是全新客户端发出的请求.HTTP2相比HTTP1.1资源以二进制传输, 多路复用, 压缩请求头, server push. -
history实现SPA <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>SPA</title> </head> <body> <div id="rotes"> <a href="index">index</a> <a href="login">login</a> </div> <div id="routerContent"></div> </body> <script type="text/javascript"> class Roter{ constructor(){ this.router={}; this.nowUrl=null; } renter(path,callback){ this.router[path] = (type)=>{ if(type==1){ history.replaceState({path},null,path); }else if(type==2){ history.pushState({path},null,path); } callback(); } } refresh(type){ this.router[this.nowUrl] && this.router[this.nowUrl](type); } init(){ window.addEventListener("load",(e)=>{ this.nowUrl = location.href.slice(location.href.indexOf("/",9)) }) window.addEventListener('popstate', (e) => { this.nowUrl = history.state.path; this.refresh(1) }); document.querySelectorAll('#rotes a').forEach((el)=>{ el.addEventListener('click',(e)=>{ e.preventDefault(); let href = e.target.href.slice(e.target.href.indexOf("/",9)); this.nowUrl = href; this.refresh(2); }) }) } } let router = new Roter(); router.init() router.renter('/index',()=>[ routerContent.innerHTML="index" ]) router.renter('/login',()=>[ routerContent.innerHTML="login" ]) </script> </html>往返缓存默认情况下，浏览器会缓存当前会话页面，这样当下一个页面点击后退按钮，或前一个页面点击前进按钮，浏览器便会从缓存中提取并加载此页面，这个特性被称为“往返缓存”。此缓存会保留页面数据、DOM和js状态，实际上是将整个页面完好无缺地保留往历史记录栈中添加记录：pushState(state, title, url)浏览器支持度: IE10+state: 一个 JS 对象（不大于640kB），主要用于在 popstate 事件中作为参数被获取。如果不需要这个对象，此处可以填nulltitle: 新页面的标题，部分浏览器(比如 Firefox )忽略此参数，因此一般为 nullurl: 新历史记录的地址，可为页面地址，也可为一个锚点值，新 url 必须与当前 url处于同一个域，否则将抛出异常，此参数若没有特别标注，会被设为当前文档 urlreplaceState(state, title, url)改变当前的历史记录history.state返回当前历史记录的 statepopstate定义：每当同一个文档的浏览历史（即 history 对象）出现变化时，就会触发 popstate 事件。注意：若仅仅调用 pushState 方法或 replaceState 方法，并不会触发该事件，只有用户点击浏览器倒退按钮和前进按钮，或者使用 JavaScript 调用 back 、 forward 、 go方法时才会触发。另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。总结一般场景下，hash 和 history 都可以，除非你更在意颜值，# 符号夹杂在 URL 里看起来确实有些不太美丽。另外，根据 Mozilla Develop Network 的介绍，调用 history.pushState() 相比于直接修改 hash，存在以下优势：pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL；而 hash 只可修改 #后面的部分，因此只能设置与当前 URL 同文档的 URLpushState() 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；而 hash设置的新值必须与原来不一样才会触发动作将记录添加到栈中pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中；而 hash 只可添加短字符串；pushState() 可额外设置 title 属性供后续使用。这么一看 history 模式充满了 happy，感觉完全可以替代 hash 模式，但其实 history 也不是样样都好，虽然在浏览器里游刃有余，但真要通过 URL 向后端发起 HTTP 请求时，两者的差异就来了。尤其在用户手动输入 URL 后回车，或者刷新（重启）浏览器的时候。hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如http://www.qq.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如http://www.qq.com/book/id。如果后端缺少对 /book/id 的路由处理，将返回 404错误。Vue-Router官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”需在后端（Apache 或 Nginx）进行简单的路由配置，同时搭配前端路由的 404 页面支持。
-
hash实现SPA hash值得改变不会刷新页面， 监听hashchange事件根据不同的路由渲染页面<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>SPA</title> </head> <body> <a href="#/index">index</a> <a href="#/login">login</a> <div id="routerContent"></div> </body> <script type="text/javascript"> //router类 class Router{ constructor(){ this.router={}; } renderRoute(path,callback){ //保存路由信息 this.router[path] = {name:path,callback}; //调用回调 callback.call(this, this.router[path], this.router) } } let router = new Router(); //监听hashchange window.addEventListener("hashchange", render)； function render(e) { let hash = e.newURL.substr(e.newURL.indexOf("#")+2) router.renderRoute(hash,(route, router)=>{ routerContent.innerHTML=route.name }) } </script> </html>
-
table表头固定 HTML部分<div style="width: 800px;"> <div class="table-head"> <table> <colgroup> <col style="width: 80px;" /> <col /> </colgroup> <thead> <tr><th>序号</th><th>内容</th></tr> </thead> </table> </div> <div class="table-body"> <table> <colgroup><col style="width: 80px;" /><col /></colgroup> <tbody> <tr><td>1</td><td>我只是用来测试的</td></tr> <tr><td>2</td><td>我只是用来测试的</td></tr> <tr><td>3</td><td>我只是用来测试的</td></tr> <tr><td>4</td><td>我只是用来测试的</td></tr> <tr><td>5</td><td>我只是用来测试的</td></tr> <tr><td>6</td><td>我只是用来测试的</td></tr> <tr><td>7</td><td>我只是用来测试的</td></tr> <tr><td>8</td><td>我只是用来测试的</td></tr> <tr><td>9</td><td>我只是用来测试的</td></tr> <tr><td>10</td><td>我只是用来测试的</td></tr> <tr><td>11</td><td>我只是用来测试的</td></tr> <tr><td>12</td><td>我只是用来测试的</td></tr> <tr><td>13</td><td>我只是用来测试的</td></tr> <tr><td>14</td><td>我只是用来测试的</td></tr> <tr><td>15</td><td>我只是用来测试的</td></tr> </tbody> </table> </div> </div>Css部分.table-head{padding-right:17px;background-color:#999;color:#000;} .table-body{width:100%; height:300px;overflow-y:scroll;} .table-head table,.table-body table{width:100%;} .table-body table tr:nth-child(2n+1){background-color:#f2f2f2;}
-
js继承 //ES6的类及继承 { class Test { constructor(obj) { this.name = obj.name; } action() { console.log('打豆豆!') } } class Test1 extends Test { constructor(obj) { super(obj); this.age = obj.age; } } let instance = new Test1({ name: '小米', age: '18' }); console.log(instance); } //ES5的类和继承(构造函数模式)) //实例的constructor指向当前对象的构造函数 es5的继承{ function Test(obj) { this.name ? this.name = obj.name : this.name = null; this.action = function() { console.log('打豆豆!'); } } function Test1(obj) { // Test.apply(this, arguments) this.age = obj.age; } //原型链继承(父类的实例作为子类原型) //优点: //简单 //实例是父类的实例也是子类的实例 //缺点: //无法向父级传参. //实例丢失constructor //无法实现多继承 Test1.prototype = new Test(); Test1.prototype.constructor = Test; var instance = new Test1({ name: '小米1', age: '18' }); console.log(instance) }
-
Html,CSS 可以进行省略的标签 不允许写结束标记的标签：area(定义图像映射中的区域)、base(为页面上的所有链接规定默认地址或默认目标)、br、col(为表格中一个或多个列定义属性值)、embed(定义嵌入的内容，比如插件--5)、hr、img、input、keygen、link、meta、param、source、track、wbr 可以省略结束标记的标签：li、dt、dd、p、rt、optgroup、option、colgroup、thread、tbody、tr、td、th 可以完全省略的标签：html、head、body、colgroup、tbody新增的标签 section:页面中的一个内容区块，入章节、页面、页脚或页面的其他部分、可以和h1、h2...等标签结合起来使用，表示文档结构。 article:表示页面中一块与上下文不相干的独立内容，比如一篇文章。 aside:定义 article 以外的内容。aside 的内容应该与 article 的内容相关。 header:页面中的内容区块或整个页面的标题。 footer:页面中的内容区块或整个页面的脚注。 hgroup:页面中的内容区块或整个页面的标题进行组合。 nav:导航链接的部分。 figure:规定独立的流内容(图像、图表、照片、代码等等，内容应该与主内容相关，但如果被删除，则不应对文档流产生影响)。 video:视频。exp:视频 audio:音频。 embed:用来嵌入内容(包括各种媒体)。 mark:变颜色，关注。 progress:进度条。exp: time:定义日期或时间，或者两者。这个标记是给收索引擎用的，引擎会根据这个标注知道这块表示一个时间。有个属性为pubdate，当引擎读到时就知道这块中的datatime中的值就是这篇文章的发布时间，而在这时间中有两个特殊的字符T和Z。T表示日期和时间的分隔符，Z表示时间的标准格式。exp: datalist:定义选项列表。与 input 元素配合使用该元素，来定义 input 可能的值。exp: output:exp: 0100+=全局属性 data-type:自定义属性。 hidden:隐藏，单标签。 spellcheck:对输入内容进行语法纠错。exp: tabindex:tab键顺序。 contenteditable:对内容进行修改。exp: 让整个文本都可编辑：//off关闭,on:可编辑meta viewport相关<!DOCTYPE html> H5标准声明，使用 HTML5 doctype，不区分大小写 <head lang=”en”> 标准的 lang 属性写法 <meta charset=’utf-8′> 声明文档使用的字符编码 <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> 优先使用 IE 最新版本和 Chrome <meta name=”description” content=”不超过150个字符”/> 页面描述 <meta name=”keywords” content=””/> 页面关键词 <meta name=”author” content=”name, [email protected]”/> 网页作者 <meta name=”robots” content=”index,follow”/> 搜索引擎抓取 <meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> 为移动设备添加 viewport <meta name=”apple-mobile-web-app-title” content=”标题”> iOS 设备 begin <meta name=”apple-mobile-web-app-capable” content=”yes”/> 添加到主屏后的标题（iOS 6 新增） 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 <meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”> 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） <meta name=”apple-mobile-web-app-status-bar-style” content=”black”/> <meta name=”format-detection” content=”telphone=no, email=no”/> 设置苹果工具栏颜色 <meta name=”renderer” content=”webkit”> 启用360浏览器的极速模式(webkit) <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> 避免IE使用兼容模式 <meta http-equiv=”Cache-Control” content=”no-siteapp” /> 不让百度转码 <meta name=”HandheldFriendly” content=”true”> 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 <meta name=”MobileOptimized” content=”320″> 微软的老式浏览器 <meta name=”screen-orientation” content=”portrait”> uc强制竖屏 <meta name=”x5-orientation” content=”portrait”> QQ强制竖屏 <meta name=”full-screen” content=”yes”> UC强制全屏 <meta name=”x5-fullscreen” content=”true”> QQ强制全屏 <meta name=”browsermode” content=”application”> UC应用模式 <meta name=”x5-page-mode” content=”app”> QQ应用模式 <meta name=”msapplication-tap-highlight” content=”no”> windows phone 点击无高光 设置页面不缓存 <meta http-equiv=”pragma” content=”no-cache”> <meta http-equiv=”cache-control” content=”no-cache”> <meta http-equiv=”expires” content=”0″>css盒子模型标准盒子模型(W3C), 盒子的总宽度 = content+padding+border+margin.怪异盒子模型(IE), 盒子的总宽度 = content+margin 注(content=content+padding+border).将box-sizing:conten-box;(标准盒子模型).将box-sizing:border-box;(怪异盒子changs模型).css优先级确定每个选择器都有权值，权值越大越优先继承的样式优先级低于自身指定样式！important优先级最高 js也无法修改权值相同时，靠近元素的样式优先级高 顺序为内联样式表（标签内部）> 内部样式表（当前文件中）> 外部样式表（外部文件中）CSS清理浮动在浮动元素下方添加一个div,在清理浮动clear:both.在父级元素上添加overflow:hidden.给父级元素设置高度.给父级添加为元素(after,before),利用为元素去清理浮动给父级元素添加dispaly:inline-block;(margin: 0 auto居中方式失效)CSS垂直居中给父级添加一个为元素(before), content为空,display:inline-block; height: calc(50% - 元素高度的一半); vertical-algin:middle;给父元素添加绝对定位(absolute),给需要居中的盒子添加相对定位(relative),top:0;right:0'bottom:0;left:0;overflow:auto;
-
手写一个排序算法 一. 冒泡排序 let arr = [3,1,2,8,4,90]; for(let i = 1; i<arr.length; i++){ //-1是因为最后一个元素无需对比 for(let j = 0; j<arr.length-i; j++){ if(arr[j]>arr[j+1]){ arr[j+1] = arr[j] + arr[j+1]; arr[j] = arr[j+1] - arr[j]; arr[j+1] = arr[j+1] - arr[j]; } } }二. 插入排序法 let arr = [3,1,2,8,4,90]; for(let i = 0; i<arr.length-1; i++){ for(let j = i+1; j<arr.length; j++){ if(arr[i]>arr[j]){ arr[j] = arr[i] + arr[j]; arr[i] = arr[j] - arr[i]; arr[j] = arr[j] - arr[i]; } } }
