标签搜索
搜索到
107
篇与
的结果
-
-
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.
-
vue3.0 性能优化diff算法优化: https://vue-next-template-explorer.netlify.app/Vue2中的虚拟dom是进行全量的对比Vue3新增了静态标记(PatchF1ag)，在与上次虚拟节点进行对比时候，只对比带有patch flag的节点并且可以通过flag的信息得知当前节点要对比的具体内容hoistStatic 静态提升Vue2中无论元素是否参与更新，每次都会重新创建，然后再渲染Vue3中对于不参与更新的元素，会做静态提升，只会被创建一 次，在渲染时直接复用即可cachellandlers 事件侦听器缓存+默认情况下onClick会被视为动态绑定，所以每次都会去追踪它的变化但是因为是同一个函数，所以没有追踪变化，直接缓 存起来复用即可响应数据底层api的优化vue2Object.defineProperty无法监控到数组下标的变化，导致通过数组下标添加元素，不能实时响应；Object.defineProperty只能劫持对象的属性，从而需要对每个对象，每个属性进行遍历，如果，属性值是对象，还需要深度遍历。vue3Proxy可以劫持整个对象，并返回一个新的对象。Proxy不仅可以代理对象，还可以代理数组。还可以代理动态增加的属性。ssr渲染当有大量静态的内容时候，这些内容会被当做纯字符串推进一个buffer里面，即使存在动态的绑定，会通过模板插值嵌入进去。这样会比通过虚拟dmo来渲染的快上很多很多。当静态内容大到一 定量级时候，会用_ createStat icVNode方法在客户端去生成一个static node,这些静态node,会被直接innerHtml,就不需要创建对象，然后根据对象渲染。新增api组合api setupsetup执行时机beforeCreate:表示组件刚刚被创建出来，组件的data和methods还没有初始化好setupCreated:表示组件刚刚被创建出来，并且组件的data和methods已经初始化好setup注意点-由于在执行setup函数的时候，还没有执行Created生命周期方法，所以在setup函数中，是无法使用data和methods．由于我们不能在setup函数中使用data和methods,所以Vue为了避免我们错误的使用，它直接将setup函 数中this修改成了undefinedreactivereactive是Vue3中提供的实现响应式数据的方法，在Vue2中响应式数据是通过defineProperty来实现的，而在Vue3中响应式数据是通过ES6的Proxy来实现的reactive注意点:reactive参数必须是对象(json/arr)-如果给reactive传递了其它对象(number)，默认情况下修改对象，界面不会自动更新，如果想更新，可以通过重新赋值的方式vue3中文文档
-
Markdown 标题类型指令简介标题#一级标题标题##二级标题段落类型指令简介段落enter换行斜体**斜体文本斜体\_\_斜体文本粗体****粗体文本粗体\_\_\_\_粗体文本粗斜体******粗斜体文本粗斜体\_\_\_\_\_\_粗斜体文本分隔线***或---以上分隔线删除线\~\~\~\~删除线下划线\<u>下划线文本脚注[^]脚注1列表类型指令简介有序列表1.有序列表无序列表-或+无序列表区块类型指令简介区块\<区块嵌套区块\<\<嵌套区块代码类型指令简介代码\`\`\`\`\`\`代码连接类型指令简介连接[]()连接连接[][变量]连接表格类型指令简介列表竖线竖线分割列表头竖线----竖线分割表头图片类型指令简介图片\图片变量引用\![][]变量引用高级语法类型指令简介变量[]:变量定义转译\转译字符脚注 ↩
-
js中文简体繁体切换 (function(modules) { 'use strict'; window.Translate = modules[0]; //Translate.BindObj('btnId', '繁', '以繁體中文查看内容'); })([ { strJT: '万与丑专业丛东丝丢两严丧个丬丰临为丽举么义乌乐乔习乡书买乱争于亏云亘亚产亩亲亵亸亿仅从仑仓仪们价众优伙会伛伞伟传伤伥伦伧伪伫体余佣佥侠侣侥侦侧侨侩侪侬俣俦俨俩俪俭债倾偬偻偾偿傥傧储傩儿兑兖党兰关兴兹养兽冁内冈册写军农冢冯冲决况冻净凄凉凌减凑凛几凤凫凭凯击凼凿刍划刘则刚创删别刬刭刽刿剀剂剐剑剥剧劝办务劢动励劲劳势勋勐勚匀匦匮区医华协单卖卢卤卧卫却卺厂厅历厉压厌厍厕厢厣厦厨厩厮县参叆叇双发变叙叠叶号叹叽吁后吓吕吗吣吨听启吴呒呓呕呖呗员呙呛呜咏咔咙咛咝咤咴咸哌响哑哒哓哔哕哗哙哜哝哟唛唝唠唡唢唣唤唿啧啬啭啮啰啴啸喷喽喾嗫呵嗳嘘嘤嘱噜噼嚣嚯团园囱围囵国图圆圣圹场坂坏块坚坛坜坝坞坟坠垄垅垆垒垦垧垩垫垭垯垱垲垴埘埙埚埝埯堑堕塆墙壮声壳壶壸处备复够头夸夹夺奁奂奋奖奥妆妇妈妩妪妫姗姜娄娅娆娇娈娱娲娴婳婴婵婶媪嫒嫔嫱嬷孙学孪宁宝实宠审宪宫宽宾寝对寻导寿将尔尘尧尴尸尽层屃屉届属屡屦屿岁岂岖岗岘岙岚岛岭岳岽岿峃峄峡峣峤峥峦崂崃崄崭嵘嵚嵛嵝嵴巅巩巯币帅师帏帐帘帜带帧帮帱帻帼幂幞干并广庄庆庐庑库应庙庞废庼廪开异弃张弥弪弯弹强归当录彟彦彻径徕御忆忏忧忾怀态怂怃怄怅怆怜总怼怿恋恳恶恸恹恺恻恼恽悦悫悬悭悯惊惧惨惩惫惬惭惮惯愍愠愤愦愿慑慭憷懑懒懔戆戋戏戗战戬户扎扑扦执扩扪扫扬扰抚抛抟抠抡抢护报担拟拢拣拥拦拧拨择挂挚挛挜挝挞挟挠挡挢挣挤挥挦捞损捡换捣据捻掳掴掷掸掺掼揸揽揿搀搁搂搅携摄摅摆摇摈摊撄撑撵撷撸撺擞攒敌敛数斋斓斗斩断无旧时旷旸昙昼昽显晋晒晓晔晕晖暂暧札术朴机杀杂权条来杨杩杰极构枞枢枣枥枧枨枪枫枭柜柠柽栀栅标栈栉栊栋栌栎栏树栖样栾桊桠桡桢档桤桥桦桧桨桩梦梼梾检棂椁椟椠椤椭楼榄榇榈榉槚槛槟槠横樯樱橥橱橹橼檐檩欢欤欧歼殁殇残殒殓殚殡殴毁毂毕毙毡毵氇气氢氩氲汇汉污汤汹沓沟没沣沤沥沦沧沨沩沪沵泞泪泶泷泸泺泻泼泽泾洁洒洼浃浅浆浇浈浉浊测浍济浏浐浑浒浓浔浕涂涌涛涝涞涟涠涡涢涣涤润涧涨涩淀渊渌渍渎渐渑渔渖渗温游湾湿溃溅溆溇滗滚滞滟滠满滢滤滥滦滨滩滪漤潆潇潋潍潜潴澜濑濒灏灭灯灵灾灿炀炉炖炜炝点炼炽烁烂烃烛烟烦烧烨烩烫烬热焕焖焘煅煳熘爱爷牍牦牵牺犊犟状犷犸犹狈狍狝狞独狭狮狯狰狱狲猃猎猕猡猪猫猬献獭玑玙玚玛玮环现玱玺珉珏珐珑珰珲琎琏琐琼瑶瑷璇璎瓒瓮瓯电画畅畲畴疖疗疟疠疡疬疮疯疱疴痈痉痒痖痨痪痫痴瘅瘆瘗瘘瘪瘫瘾瘿癞癣癫癯皑皱皲盏盐监盖盗盘眍眦眬着睁睐睑瞒瞩矫矶矾矿砀码砖砗砚砜砺砻砾础硁硅硕硖硗硙硚确硷碍碛碜碱碹磙礼祎祢祯祷祸禀禄禅离秃秆种积称秽秾稆税稣稳穑穷窃窍窑窜窝窥窦窭竖竞笃笋笔笕笺笼笾筑筚筛筜筝筹签简箓箦箧箨箩箪箫篑篓篮篱簖籁籴类籼粜粝粤粪粮糁糇紧絷纟纠纡红纣纤纥约级纨纩纪纫纬纭纮纯纰纱纲纳纴纵纶纷纸纹纺纻纼纽纾线绀绁绂练组绅细织终绉绊绋绌绍绎经绐绑绒结绔绕绖绗绘给绚绛络绝绞统绠绡绢绣绤绥绦继绨绩绪绫绬续绮绯绰绱绲绳维绵绶绷绸绹绺绻综绽绾绿缀缁缂缃缄缅缆缇缈缉缊缋缌缍缎缏缐缑缒缓缔缕编缗缘缙缚缛缜缝缞缟缠缡缢缣缤缥缦缧缨缩缪缫缬缭缮缯缰缱缲缳缴缵罂网罗罚罢罴羁羟羡翘翙翚耢耧耸耻聂聋职聍联聩聪肃肠肤肷肾肿胀胁胆胜胧胨胪胫胶脉脍脏脐脑脓脔脚脱脶脸腊腌腘腭腻腼腽腾膑臜舆舣舰舱舻艰艳艹艺节芈芗芜芦苁苇苈苋苌苍苎苏苘苹茎茏茑茔茕茧荆荐荙荚荛荜荞荟荠荡荣荤荥荦荧荨荩荪荫荬荭荮药莅莜莱莲莳莴莶获莸莹莺莼萚萝萤营萦萧萨葱蒇蒉蒋蒌蓝蓟蓠蓣蓥蓦蔷蔹蔺蔼蕲蕴薮藁藓虏虑虚虫虬虮虽虾虿蚀蚁蚂蚕蚝蚬蛊蛎蛏蛮蛰蛱蛲蛳蛴蜕蜗蜡蝇蝈蝉蝎蝼蝾螀螨蟏衅衔补衬衮袄袅袆袜袭袯装裆裈裢裣裤裥褛褴襁襕见观觃规觅视觇览觉觊觋觌觍觎觏觐觑觞触觯詟誉誊讠计订讣认讥讦讧讨让讪讫训议讯记讱讲讳讴讵讶讷许讹论讻讼讽设访诀证诂诃评诅识诇诈诉诊诋诌词诎诏诐译诒诓诔试诖诗诘诙诚诛诜话诞诟诠诡询诣诤该详诧诨诩诪诫诬语诮误诰诱诲诳说诵诶请诸诹诺读诼诽课诿谀谁谂调谄谅谆谇谈谊谋谌谍谎谏谐谑谒谓谔谕谖谗谘谙谚谛谜谝谞谟谠谡谢谣谤谥谦谧谨谩谪谫谬谭谮谯谰谱谲谳谴谵谶谷豮贝贞负贠贡财责贤败账货质贩贪贫贬购贮贯贰贱贲贳贴贵贶贷贸费贺贻贼贽贾贿赀赁赂赃资赅赆赇赈赉赊赋赌赍赎赏赐赑赒赓赔赕赖赗赘赙赚赛赜赝赞赟赠赡赢赣赪赵赶趋趱趸跃跄跖跞践跶跷跸跹跻踊踌踪踬踯蹑蹒蹰蹿躏躜躯车轧轨轩轪轫转轭轮软轰轱轲轳轴轵轶轷轸轹轺轻轼载轾轿辀辁辂较辄辅辆辇辈辉辊辋辌辍辎辏辐辑辒输辔辕辖辗辘辙辚辞辩辫边辽达迁过迈运还这进远违连迟迩迳迹适选逊递逦逻遗遥邓邝邬邮邹邺邻郁郄郏郐郑郓郦郧郸酝酦酱酽酾酿释里鉅鉴銮錾钆钇针钉钊钋钌钍钎钏钐钑钒钓钔钕钖钗钘钙钚钛钝钞钟钠钡钢钣钤钥钦钧钨钩钪钫钬钭钮钯钰钱钲钳钴钵钶钷钸钹钺钻钼钽钾钿铀铁铂铃铄铅铆铈铉铊铋铍铎铏铐铑铒铕铗铘铙铚铛铜铝铞铟铠铡铢铣铤铥铦铧铨铪铫铬铭铮铯铰铱铲铳铴铵银铷铸铹铺铻铼铽链铿销锁锂锃锄锅锆锇锈锉锊锋锌锍锎锏锐锑锒锓锔锕锖锗错锚锜锞锟锠锡锢锣锤锥锦锨锩锫锬锭键锯锰锱锲锳锴锵锶锷锸锹锺锻锼锽锾锿镀镁镂镃镆镇镈镉镊镌镍镎镏镐镑镒镕镖镗镙镚镛镜镝镞镟镠镡镢镣镤镥镦镧镨镩镪镫镬镭镮镯镰镱镲镳镴镶长门闩闪闫闬闭问闯闰闱闲闳间闵闶闷闸闹闺闻闼闽闾闿阀阁阂阃阄阅阆阇阈阉阊阋阌阍阎阏阐阑阒阓阔阕阖阗阘阙阚阛队阳阴阵阶际陆陇陈陉陕陧陨险随隐隶隽难雏雠雳雾霁霉霭靓静靥鞑鞒鞯鞴韦韧韨韩韪韫韬韵页顶顷顸项顺须顼顽顾顿颀颁颂颃预颅领颇颈颉颊颋颌颍颎颏颐频颒颓颔颕颖颗题颙颚颛颜额颞颟颠颡颢颣颤颥颦颧风飏飐飑飒飓飔飕飖飗飘飙飚飞飨餍饤饥饦饧饨饩饪饫饬饭饮饯饰饱饲饳饴饵饶饷饸饹饺饻饼饽饾饿馀馁馂馃馄馅馆馇馈馉馊馋馌馍馎馏馐馑馒馓馔馕马驭驮驯驰驱驲驳驴驵驶驷驸驹驺驻驼驽驾驿骀骁骂骃骄骅骆骇骈骉骊骋验骍骎骏骐骑骒骓骔骕骖骗骘骙骚骛骜骝骞骟骠骡骢骣骤骥骦骧髅髋髌鬓魇魉鱼鱽鱾鱿鲀鲁鲂鲄鲅鲆鲇鲈鲉鲊鲋鲌鲍鲎鲏鲐鲑鲒鲓鲔鲕鲖鲗鲘鲙鲚鲛鲜鲝鲞鲟鲠鲡鲢鲣鲤鲥鲦鲧鲨鲩鲪鲫鲬鲭鲮鲯鲰鲱鲲鲳鲴鲵鲶鲷鲸鲹鲺鲻鲼鲽鲾鲿鳀鳁鳂鳃鳄鳅鳆鳇鳈鳉鳊鳋鳌鳍鳎鳏鳐鳑鳒鳓鳔鳕鳖鳗鳘鳙鳛鳜鳝鳞鳟鳠鳡鳢鳣鸟鸠鸡鸢鸣鸤鸥鸦鸧鸨鸩鸪鸫鸬鸭鸮鸯鸰鸱鸲鸳鸴鸵鸶鸷鸸鸹鸺鸻鸼鸽鸾鸿鹀鹁鹂鹃鹄鹅鹆鹇鹈鹉鹊鹋鹌鹍鹎鹏鹐鹑鹒鹓鹔鹕鹖鹗鹘鹚鹛鹜鹝鹞鹟鹠鹡鹢鹣鹤鹥鹦鹧鹨鹩鹪鹫鹬鹭鹯鹰鹱鹲鹳鹴鹾麦麸黄黉黡黩黪黾鼋鼌鼍鼗鼹齄齐齑齿龀龁龂龃龄龅龆龇龈龉龊龋龌龙龚龛龟志制咨只里系范松没尝尝闹面准钟别闲干尽脏拼', strFT: '萬與醜專業叢東絲丟兩嚴喪個爿豐臨為麗舉麼義烏樂喬習鄉書買亂爭於虧雲亙亞產畝親褻嚲億僅從侖倉儀們價眾優夥會傴傘偉傳傷倀倫傖偽佇體餘傭僉俠侶僥偵側僑儈儕儂俁儔儼倆儷儉債傾傯僂僨償儻儐儲儺兒兌兗黨蘭關興茲養獸囅內岡冊寫軍農塚馮衝決況凍淨淒涼淩減湊凜幾鳳鳧憑凱擊氹鑿芻劃劉則剛創刪別剗剄劊劌剴劑剮劍剝劇勸辦務勱動勵勁勞勢勳猛勩勻匭匱區醫華協單賣盧鹵臥衛卻巹廠廳曆厲壓厭厙廁廂厴廈廚廄廝縣參靉靆雙發變敘疊葉號歎嘰籲後嚇呂嗎唚噸聽啟吳嘸囈嘔嚦唄員咼嗆嗚詠哢嚨嚀噝吒噅鹹呱響啞噠嘵嗶噦嘩噲嚌噥喲嘜嗊嘮啢嗩唕喚呼嘖嗇囀齧囉嘽嘯噴嘍嚳囁嗬噯噓嚶囑嚕劈囂謔團園囪圍圇國圖圓聖壙場阪壞塊堅壇壢壩塢墳墜壟壟壚壘墾坰堊墊埡墶壋塏堖塒塤堝墊垵塹墮壪牆壯聲殼壺壼處備複夠頭誇夾奪奩奐奮獎奧妝婦媽嫵嫗媯姍薑婁婭嬈嬌孌娛媧嫻嫿嬰嬋嬸媼嬡嬪嬙嬤孫學孿寧寶實寵審憲宮寬賓寢對尋導壽將爾塵堯尷屍盡層屭屜屆屬屢屨嶼歲豈嶇崗峴嶴嵐島嶺嶽崠巋嶨嶧峽嶢嶠崢巒嶗崍嶮嶄嶸嶔崳嶁脊巔鞏巰幣帥師幃帳簾幟帶幀幫幬幘幗冪襆幹並廣莊慶廬廡庫應廟龐廢廎廩開異棄張彌弳彎彈強歸當錄彠彥徹徑徠禦憶懺憂愾懷態慫憮慪悵愴憐總懟懌戀懇惡慟懨愷惻惱惲悅愨懸慳憫驚懼慘懲憊愜慚憚慣湣慍憤憒願懾憖怵懣懶懍戇戔戲戧戰戩戶紮撲扡執擴捫掃揚擾撫拋摶摳掄搶護報擔擬攏揀擁攔擰撥擇掛摯攣掗撾撻挾撓擋撟掙擠揮撏撈損撿換搗據撚擄摑擲撣摻摜摣攬撳攙擱摟攪攜攝攄擺搖擯攤攖撐攆擷擼攛擻攢敵斂數齋斕鬥斬斷無舊時曠暘曇晝曨顯晉曬曉曄暈暉暫曖劄術樸機殺雜權條來楊榪傑極構樅樞棗櫪梘棖槍楓梟櫃檸檉梔柵標棧櫛櫳棟櫨櫟欄樹棲樣欒棬椏橈楨檔榿橋樺檜槳樁夢檮棶檢欞槨櫝槧欏橢樓欖櫬櫚櫸檟檻檳櫧橫檣櫻櫫櫥櫓櫞簷檁歡歟歐殲歿殤殘殞殮殫殯毆毀轂畢斃氈毿氌氣氫氬氳彙漢汙湯洶遝溝沒灃漚瀝淪滄渢溈滬濔濘淚澩瀧瀘濼瀉潑澤涇潔灑窪浹淺漿澆湞溮濁測澮濟瀏滻渾滸濃潯濜塗湧濤澇淶漣潿渦溳渙滌潤澗漲澀澱淵淥漬瀆漸澠漁瀋滲溫遊灣濕潰濺漵漊潷滾滯灩灄滿瀅濾濫灤濱灘澦濫瀠瀟瀲濰潛瀦瀾瀨瀕灝滅燈靈災燦煬爐燉煒熗點煉熾爍爛烴燭煙煩燒燁燴燙燼熱煥燜燾煆糊溜愛爺牘犛牽犧犢強狀獷獁猶狽麅獮獰獨狹獅獪猙獄猻獫獵獼玀豬貓蝟獻獺璣璵瑒瑪瑋環現瑲璽瑉玨琺瓏璫琿璡璉瑣瓊瑤璦璿瓔瓚甕甌電畫暢佘疇癤療瘧癘瘍鬁瘡瘋皰屙癰痙癢瘂癆瘓癇癡癉瘮瘞瘺癟癱癮癭癩癬癲臒皚皺皸盞鹽監蓋盜盤瞘眥矓著睜睞瞼瞞矚矯磯礬礦碭碼磚硨硯碸礪礱礫礎硜矽碩硤磽磑礄確鹼礙磧磣堿镟滾禮禕禰禎禱禍稟祿禪離禿稈種積稱穢穠穭稅穌穩穡窮竊竅窯竄窩窺竇窶豎競篤筍筆筧箋籠籩築篳篩簹箏籌簽簡籙簀篋籜籮簞簫簣簍籃籬籪籟糴類秈糶糲粵糞糧糝餱緊縶糸糾紆紅紂纖紇約級紈纊紀紉緯紜紘純紕紗綱納紝縱綸紛紙紋紡紵紖紐紓線紺絏紱練組紳細織終縐絆紼絀紹繹經紿綁絨結絝繞絰絎繪給絢絳絡絕絞統綆綃絹繡綌綏絛繼綈績緒綾緓續綺緋綽緔緄繩維綿綬繃綢綯綹綣綜綻綰綠綴緇緙緗緘緬纜緹緲緝縕繢緦綞緞緶線緱縋緩締縷編緡緣縉縛縟縝縫縗縞纏縭縊縑繽縹縵縲纓縮繆繅纈繚繕繒韁繾繰繯繳纘罌網羅罰罷羆羈羥羨翹翽翬耮耬聳恥聶聾職聹聯聵聰肅腸膚膁腎腫脹脅膽勝朧腖臚脛膠脈膾髒臍腦膿臠腳脫腡臉臘醃膕齶膩靦膃騰臏臢輿艤艦艙艫艱豔艸藝節羋薌蕪蘆蓯葦藶莧萇蒼苧蘇檾蘋莖蘢蔦塋煢繭荊薦薘莢蕘蓽蕎薈薺蕩榮葷滎犖熒蕁藎蓀蔭蕒葒葤藥蒞蓧萊蓮蒔萵薟獲蕕瑩鶯蓴蘀蘿螢營縈蕭薩蔥蕆蕢蔣蔞藍薊蘺蕷鎣驀薔蘞藺藹蘄蘊藪槁蘚虜慮虛蟲虯蟣雖蝦蠆蝕蟻螞蠶蠔蜆蠱蠣蟶蠻蟄蛺蟯螄蠐蛻蝸蠟蠅蟈蟬蠍螻蠑螿蟎蠨釁銜補襯袞襖嫋褘襪襲襏裝襠褌褳襝褲襇褸襤繈襴見觀覎規覓視覘覽覺覬覡覿覥覦覯覲覷觴觸觶讋譽謄訁計訂訃認譏訐訌討讓訕訖訓議訊記訒講諱謳詎訝訥許訛論訩訟諷設訪訣證詁訶評詛識詗詐訴診詆謅詞詘詔詖譯詒誆誄試詿詩詰詼誠誅詵話誕詬詮詭詢詣諍該詳詫諢詡譸誡誣語誚誤誥誘誨誑說誦誒請諸諏諾讀諑誹課諉諛誰諗調諂諒諄誶談誼謀諶諜謊諫諧謔謁謂諤諭諼讒諮諳諺諦謎諞諝謨讜謖謝謠謗諡謙謐謹謾謫譾謬譚譖譙讕譜譎讞譴譫讖穀豶貝貞負貟貢財責賢敗賬貨質販貪貧貶購貯貫貳賤賁貰貼貴貺貸貿費賀貽賊贄賈賄貲賃賂贓資賅贐賕賑賚賒賦賭齎贖賞賜贔賙賡賠賧賴賵贅賻賺賽賾贗讚贇贈贍贏贛赬趙趕趨趲躉躍蹌蹠躒踐躂蹺蹕躚躋踴躊蹤躓躑躡蹣躕躥躪躦軀車軋軌軒軑軔轉軛輪軟轟軲軻轤軸軹軼軤軫轢軺輕軾載輊轎輈輇輅較輒輔輛輦輩輝輥輞輬輟輜輳輻輯轀輸轡轅轄輾轆轍轔辭辯辮邊遼達遷過邁運還這進遠違連遲邇逕跡適選遜遞邐邏遺遙鄧鄺鄔郵鄒鄴鄰鬱郤郟鄶鄭鄆酈鄖鄲醞醱醬釅釃釀釋裏钜鑒鑾鏨釓釔針釘釗釙釕釷釺釧釤鈒釩釣鍆釹鍚釵鈃鈣鈈鈦鈍鈔鍾鈉鋇鋼鈑鈐鑰欽鈞鎢鉤鈧鈁鈥鈄鈕鈀鈺錢鉦鉗鈷缽鈳鉕鈽鈸鉞鑽鉬鉭鉀鈿鈾鐵鉑鈴鑠鉛鉚鈰鉉鉈鉍鈹鐸鉶銬銠鉺銪鋏鋣鐃銍鐺銅鋁銱銦鎧鍘銖銑鋌銩銛鏵銓鉿銚鉻銘錚銫鉸銥鏟銃鐋銨銀銣鑄鐒鋪鋙錸鋱鏈鏗銷鎖鋰鋥鋤鍋鋯鋨鏽銼鋝鋒鋅鋶鐦鐧銳銻鋃鋟鋦錒錆鍺錯錨錡錁錕錩錫錮鑼錘錐錦鍁錈錇錟錠鍵鋸錳錙鍥鍈鍇鏘鍶鍔鍤鍬鍾鍛鎪鍠鍰鎄鍍鎂鏤鎡鏌鎮鎛鎘鑷鐫鎳鎿鎦鎬鎊鎰鎔鏢鏜鏍鏰鏞鏡鏑鏃鏇鏐鐔钁鐐鏷鑥鐓鑭鐠鑹鏹鐙鑊鐳鐶鐲鐮鐿鑔鑣鑞鑲長門閂閃閆閈閉問闖閏闈閑閎間閔閌悶閘鬧閨聞闥閩閭闓閥閣閡閫鬮閱閬闍閾閹閶鬩閿閽閻閼闡闌闃闠闊闋闔闐闒闕闞闤隊陽陰陣階際陸隴陳陘陝隉隕險隨隱隸雋難雛讎靂霧霽黴靄靚靜靨韃鞽韉韝韋韌韍韓韙韞韜韻頁頂頃頇項順須頊頑顧頓頎頒頌頏預顱領頗頸頡頰頲頜潁熲頦頤頻頮頹頷頴穎顆題顒顎顓顏額顳顢顛顙顥纇顫顬顰顴風颺颭颮颯颶颸颼颻飀飄飆飆飛饗饜飣饑飥餳飩餼飪飫飭飯飲餞飾飽飼飿飴餌饒餉餄餎餃餏餅餑餖餓餘餒餕餜餛餡館餷饋餶餿饞饁饃餺餾饈饉饅饊饌饢馬馭馱馴馳驅馹駁驢駔駛駟駙駒騶駐駝駑駕驛駘驍罵駰驕驊駱駭駢驫驪騁驗騂駸駿騏騎騍騅騌驌驂騙騭騤騷騖驁騮騫騸驃騾驄驏驟驥驦驤髏髖髕鬢魘魎魚魛魢魷魨魯魴魺鮁鮃鯰鱸鮋鮓鮒鮊鮑鱟鮍鮐鮭鮚鮳鮪鮞鮦鰂鮜鱠鱭鮫鮮鮺鯗鱘鯁鱺鰱鰹鯉鰣鰷鯀鯊鯇鮶鯽鯒鯖鯪鯕鯫鯡鯤鯧鯝鯢鯰鯛鯨鯵鯴鯔鱝鰈鰏鱨鯷鰮鰃鰓鱷鰍鰒鰉鰁鱂鯿鰠鼇鰭鰨鰥鰩鰟鰜鰳鰾鱈鱉鰻鰵鱅鰼鱖鱔鱗鱒鱯鱤鱧鱣鳥鳩雞鳶鳴鳲鷗鴉鶬鴇鴆鴣鶇鸕鴨鴞鴦鴒鴟鴝鴛鴬鴕鷥鷙鴯鴰鵂鴴鵃鴿鸞鴻鵐鵓鸝鵑鵠鵝鵒鷳鵜鵡鵲鶓鵪鶤鵯鵬鵮鶉鶊鵷鷫鶘鶡鶚鶻鶿鶥鶩鷊鷂鶲鶹鶺鷁鶼鶴鷖鸚鷓鷚鷯鷦鷲鷸鷺鸇鷹鸌鸏鸛鸘鹺麥麩黃黌黶黷黲黽黿鼂鼉鞀鼴齇齊齏齒齔齕齗齟齡齙齠齜齦齬齪齲齷龍龔龕龜誌製谘隻裡係範鬆冇嚐嘗鬨麵準鐘彆閒乾儘臟拚', evtObj: null, toFT: document.cookie.indexOf('viewasft=1') != -1, trans: function(txt, isEvtObj) { var chr, i, str = '', strS = this.toFT ? this.strJT : this.strFT, strT = this.toFT ? this.strFT : this.strJT, tPos = -1; if (isEvtObj) { var tmp = strS; strS = strT; strT = tmp; txt = txt.replace(this.toFT ? '繁' : '简', this.toFT ? '简' : '繁'); } for (i = 0; i < txt.length; i++) { chr = txt.charAt(i); tPos = strS.indexOf(chr); if (chr.charCodeAt(0) > 10000 && tPos != -1) str += strT.charAt(tPos); else str += chr; } return str; }, TransTarget: function(tag, isInit) { var childNodes, OO; childNodes = tag ? tag.childNodes : document.body.childNodes; if (!tag) { if (!isInit) { this.toFT = !this.toFT; document.cookie = 'viewasft=' + (this.toFT ? 1 : 0) + ';path=/'; } document.title = this.trans(document.title); this.evtObj.innerHTML = this.trans(this.evtObj.innerHTML, true); this.evtObj.title = this.trans(this.evtObj.title, true); } for (var i = 0; i < childNodes.length; i++) { OO = childNodes[i]; if ("|BR|HR|TEXTAREA|SCRIPT|OBJECT|EMBED|".indexOf("|" + OO.tagName + "|") != -1 || OO == this.evtObj) continue; if (OO.title != "" && OO.title != null) OO.title = this.trans(OO.title); if (OO.alt != "" && OO.alt != null) OO.alt = this.trans(OO.alt); if (OO.tagName == "INPUT" && OO.value != "" && /^(button|reset|submit)$/i.test(OO.type)) OO.value = this.trans(OO.value); if (OO.nodeType == 3) OO.data = this.trans(OO.data); else this.TransTarget(OO); } }, BindObj: function(Id, innerHTML, title, transDelay) { this.evtObj = $('#' + Id).get(0); if (this.evtObj) { var me = this; this.evtObj.href = "#"; this.evtObj.onclick = function() { me.TransTarget(); return false; }; this.evtObj.innerHTML = this.trans(innerHTML, true); this.evtObj.title = this.trans(title, true); if (this.toFT) setTimeout(function() { me.TransTarget(false, true); }, transDelay ? transDelay : 50); } } } ]);调用方法：<a href="" id="btnId">繁</a> <script> Translate.BindObj('btnId', '繁', '以繁體中文查看内容'); </script>
-
CSS常用片段 清除浮动.clearfix:after { content: "\00A0"; display: block; visibility: hidden; width: 0; height: 0; clear: both; font-size: 0; line-height: 0; overflow: hidden; } .clearfix { zoom: 1; }垂直水平居中绝对定位方式且已知宽高position: absolute; top: 50%; left: 50%; margin-top: -3em; margin-left: -7em; width: 14em; height: 6em;绝对定位 ＋ 未知宽高 ＋ translateposition: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); //需要补充浏览器前缀flex 轻松搞定水平垂直居中(未知宽高)display: flex; align-items: center; justify-content: center;利用绝对定位宽高拉升原理，中心居中元素 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;利用相对定位于 CSS3 使元素垂直居中 position: relative; top: 50%; -webkit-transform: -webkit-translateY(-50%); -moz-transform: -moz-translateY(-50%); -o-transform: -o-translateY(-50%); transform: translateY(-50%);文本末尾添加省略号宽度固定，适合单行显示...overflow: hidden; text-overflow: ellipsis; white-space: nowrap;宽度不固定，适合多行以及移动端显示overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;简洁 loading 效果.loading:after { display: inline-block; overflow: hidden; vertical-align: bottom; content: "\2026"; -webkit-animation: ellipsis 2s infinite; } // 动画部分 @-webkit-keyframes ellipsis { from { width: 2px; } to { width: 15px; } }自定义文本选中样式// 注意只能修改这两个属性 字体颜色 选中背景颜色 element::selection { color: green; background-color: pink; }顶角贴纸效果<div class="wrap"> <div class="ribbon"> <a href="#">Fork me on GitHub</a> </div> </div> /* 外层容器几本设置 */ .wrap { width: 160px; height: 160px; overflow: hidden; position: relative; background-color: #f3f3f3; } .ribbon { background-color: #a00; overflow: hidden; white-space: nowrap; position: absolute; /* shadom */ -webkit-box-shadow: 0 0 10px #888; -moz-box-shadow: 0 0 10px #888; box-shadow: 0 0 10px #888; /* rotate */ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); /* position */ left: -50px; top: 40px; } .ribbon a { border: 1px solid #faa; color: #fff; display: block; font: bold 81.25% "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 1px 0; padding: 10px 50px; text-align: center; text-decoration: none; /* shadow */ text-shadow: 0 0 5px #444; }input 占位符input::-webkit-input-placeholder { color: green; background-color: #f9f7f7; font-size: 14px; } input::-moz-input-placeholder { color: green; background-color: #f9f7f7; font-size: 14px; } input::-ms-input-placeholder { color: green; background-color: #f9f7f7; font-size: 14px; }移动端可点击元素去处默认边框-webkit-tap-highlight-color: rgba(255, 255, 255, 0);首字下沉element:first-letter { float: left; color: green; font-size: 30px; }鼠标手型a[href], input[type="submit"], input[type="image"], input[type="button"], label[for], select, button { cursor: pointer; }屏蔽 Webkit 移动浏览器中元素高亮效果在访问移动网站时，你会发现，在选中的元素周围会出现一些灰色的框框，使用以下代码屏蔽这种样式-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;去默认样式//移除常用标签的浏览器默认的 margin 和 padding body, p, h1, h2, h3, h4, h5, h6, dl, dd, ul, ol, th, td, button, figure, input, textarea, form { margin: 0; padding: 0; } //统一 input、select、textarea 宽度 input, select, textarea { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } table { /*table 相邻单元格的边框间的距离设置为 0*/ border-spacing: 0; /*默认情况下给 tr 设置 border 没有效果，如果 table 设置了边框为合并模式：「border-collapse: collapse;」就可以了*/ border-collapse: collapse; } //移除浏览器部分元素的默认边框 img, input, button, textarea { border: none; -webkit-appearance: none; } input { /*由于 input 默认不继承父元素的居中样式，所以设置：「text-align: inherit」*/ text-align: inherit; } textarea { /*textarea 默认不可以放缩*/ resize: none; } //取消元素 outline 样式 a, h1, h2, h3, h4, h5, h6, input, select, button, option, textarea, optgroup { font-family: inherit; font-size: inherit; font-weight: inherit; font-style: inherit; line-height: inherit; color: inherit; outline: none; } //取消超链接元素的默认文字装 a { text-decoration: none; } ol, ul { /*开发中 UI 设计的列表都是和原生的样式差太多，所以直接给取消 ol，ul 默认列表样式*/ list-style: none; } button, input[type="submit"], input[type="button"] { /*鼠标经过是「小手」形状表示可点击*/ cursor: pointer; } input::-moz-focus-inner { /*取消火狐浏览器部分版本 input 聚焦时默认的「padding、border」*/ padding: 0; border: 0; } //取消部分浏览器数字输入控件的操作按钮 input[type="number"] { -moz-appearance: textfield; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }chrome 内核 浏览器 position: fixed 防止抖动position: fixed; -webkit-transform: translateZ(0);强制换行/自动换行/强制不换行/* 强制不换行 */ white-space: nowrap; /* 自动换行 */ word-wrap: break-word; word-break: normal; /* 强制英文单词断行 */ word-break: break-all;
-
Caddy - 方便够用的 HTTPS server 1 安装用过 golang 的应该都知道，golang 程序基本上不会有各种依赖，都是光秃秃一个可执行程序，cp 到 /usr/local/bin 就算安装完成了，所以说安装 caddy 是很简单的，我给出三种方法。1.1 脚本安装curl -s https://getcaddy.com | bashcaddy 官方给出了一个安装脚本，执行上面的命令就可以一键安装 caddy，等执行结束后，使用 which caddy，可以看到 caddy 已经被安装到了 /usr/local/bin/caddy1.2 手动安装https://caddyserver.com/download 点这个链接进入到 caddy 官网的下载界面，网页左侧可以选择平台和插件，如果在 Linux 服务器上使用的话，platform 选择 Linux 64-bit 就可以了，plugins 如果暂时不需要的话，可以不选。然后点击下面的 DOWNLOAD 按钮，就下载到 caddy 了。同理，解压之后用 cp 命令放到 /usr/local/bin/caddy 就完成了安装。image_1bn3mbk8jov2es3vu41l842ac9.png-177.7kB1.3 源码安装go get github.com/mholt/caddy/caddy对于安装了 golang 编译器的同学，只需要执行 go get 就能到 $GOPATH/bin 里，是否 cp 到 /usr/local/bin 里就看心情了。使用源码安装可以安装到最新版本的 caddy，功能上一般是最新的，而且因为是本地编译，性能可能会稍微高一些，但是可能会存在不稳定的现象。2 配置2.1 临时文件服务器Caddy 的配置文件叫做 Caddyfile，Caddy 不强制你把配置文件放到哪个特定文件夹，默认情况下，把 Caddyfile 放到当前目录就可以跑起来了，如下：echo 'localhost:8888' >> Caddyfile echo 'gzip' >> Caddyfile echo 'browse' >> Caddyfile caddy在随便一个目录里执行上面代码，然后在浏览器里打开 http://localhost:8888 发现 caddy 已经启动了一个文件服务器。当临时需要一个 fileserver 的时候（比如共享文件），使用 caddy 会很方便。2.2 生产环境使用当然了，在生产环境使用的时候就不能这么草率的把配置文件放到当前目录了，一般情况下会放到 /etc/caddy 里。sudo mkdir /etc/caddy sudo touch /etc/caddy/Caddyfile sudo chown -R root:www-data /etc/caddy除了配置文件，caddy 会自动生成 ssl 证书，需要一个文件夹放置 ssl 证书。sudo mkdir /etc/ssl/caddy sudo chown -R www-data:root /etc/ssl/caddy sudo chmod 0770 /etc/ssl/caddy因为 ssl 文件夹里会放置私钥，所以权限设置成 770 禁止其他用户访问。最后，创建一下放置网站文件的目录，如果已经有了，就不需要创建了。sudo mkdir /var/www sudo chown www-data:www-data /var/www创建好这些文件和目录了之后，我们需要把 caddy 配置成一个服务，这样就可以开机自动运行，并且管理起来也方便。因为目前大多数发行版都使用 systemd 了，所以这里只讲一下如何配置 systemd，不过 caddy 也支持配置成原始的 sysvinit 服务，具体方法看这里。sudo curl -s https://raw.githubusercontent.com/mholt/caddy/master/dist/init/linux-systemd/caddy.service -o /etc/systemd/system/caddy.service # 从 github 下载 systemd 配置文件 sudo systemctl daemon-reload # 重新加载 systemd 配置 sudo systemctl enable caddy.service # 设置 caddy 服务自启动 sudo systemctl status caddy.service # 查看 caddy 状态3 Caddyfile基本的安装配置搞定之后，最重要的就是如何写 Caddyfile了。可以直接 vim /etc/caddy/Caddyfile 来修改 Caddyfile，也可以再自己电脑上改好然后 rsync 到服务器上。如果修改了 Caddyfile 发现没有生效，是需要执行一下 sudo systemctl restart caddy.service 来重启 caddy 的。3.1 Caddyfile 的格式Caddfile的格式还是比较简单的，首先第一行必须是网站的地址，例如：localhost:8080或lengzzz.com地址可以带一个端口号，那么 caddy 只会在这个端口上开启 http 服务，而不会开启 https，如果不写端口号的话，caddy 会默认绑定 80 和 443 端口，同时启动 http 和 https 服务。地址后面可以再跟一大堆指令（directive）。Caddyfile 的基本格式就是这样，由一个网站地址和指令组成，是不是很简单。3.2 指令指令的作用是为网站开启某些功能。指令的格式有三种，先说一下最简单的不带参数的指令比如：railgun.moe # 没错，moe后缀的域名也可以哦gzip第二行的 gzip 就是一个指令，它表示打开 gzip 压缩功能，这样网站在传输网页是可以降低流量。第二种指令的格式是带简单参数的指令：railgun.moe gzip log /var/log/caddy/access.log tls [email protected] root /var/www/第三行，log 指令会为网站开启 log 功能，log 指令后的参数告诉 caddy log 文件存放的位置。第四行的 tls 指令告诉 caddy 为网站开启 https 并自动申请证书，后面的 email 参数是告知 CA 申请人的邮箱。（caddy 会默认使用 let's encrypt 申请证书并续约，很方便吧）另外，简单参数也可能不只一个，比如 redir 指令：railgun.moe gzip log /var/log/caddy/access.log tls /etc/ssl/cert.pem /etc/ssl/key.pem root /var/www/ redir / https://lengzzz.com/archive/{uri} 301上面的 redir 指令带了三个参数，意思是把所有的请求使用 301 重定向到 https://lengzzz.com/archive/xxx，这个指令在给网站换域名的时候很有用。另外 tls 指令变了，不单单传 email一个参数， 而是分别传了证书和私钥的路径，这样的话 caddy 就不会去自动申请证书，而是使用路径给出的证书了。在这个例子里还使用了 {uri} 这样的占位符（placeholder），详细的列表可以在这里查询到：https://caddyserver.com/docs/placeholders。最后一种指令是带复杂参数的，这种指令包含可能很多参数，所以需要用一对花括号包起来，比如 header 指令：railgun.moe gzip log /var/log/caddy/access.log tls [email protected] root /var/www/ header /api { Access-Control-Allow-Origin * Access-Control-Allow-Methods "GET, POST, OPTIONS" -Server } fastcgi / 127.0.0.1:9000 php { index index.php } rewrite { to {path} {path}/ /index.php?{query} }6-10 行的 header 指令代表为所有的 /api/xxx 的请求加上 Access-Control-Allow-Origin 和 Access-Control-Allow-Methods 这两个 header，从而能支持 javascript 跨域访问 ，第 9 行代表删除 Server header，防止别人看到服务器类型。11-13 行使用了 fastcgi 指令，代表把请求通过 fastcgi 传给 php，ruby 等后端程序。14-15 行，使用了 rewrite 指令，这个指令的作用是 服务器内部重定向 在下面的参数 to 后面，又跟了三个参数，这个功能上有点类似 nginx 的 try_files 。告诉 caddy 需要先查看网址根目录 /var/www 里有没有 {path} 对应的文件，如果没有再查看有没有 {path} 对应的目录，如果都没有，则转发给 index.php 入口文件。这个功能一般会用在 PHP 的 MVC 框架上使用。随着一步步完善这个 Caddyfile，目前这个版本的 Caddyfaile 已经可以直接在网站中使用了。3.3 多 HOST 网站刚才说的一直都是单个域名的网址，那么如果在同一个服务器上部署多个域名的网站呢？很简单，只需要在域名后面跟一个花括号扩起来就可以了，如下：railgun.moe { gzip log /var/log/caddy/railgun_moe.log tls [email protected] root /var/www/ header /api { Access-Control-Allow-Origin * Access-Control-Allow-Methods "GET, POST, OPTIONS" -Server } fastcgi / 127.0.0.1:9000 php { index index.php } rewrite { to {path} {path}/ /index.php?{query} } } lengzzz.com { tls [email protected] log /var/log/caddy/lengzzz_com.log redir / https://railgun.moe/{uri} 301 }
-
PM2 pm2常用命令记录$ pm2 start app.js # 启动app.js应用程序$ pm2 start app.js -i 4 # cluster mode 模式启动4个app.js的应用实例 4个应用程序会自动进行负载均衡$ pm2 start app.js --name="api" # 启动应用程序并命名为 "api"$ pm2 start app.js --watch # 当文件变化时自动重启应用$ pm2 start script.sh # 启动 bash 脚本$ pm2 list # 列表 PM2 启动的所有的应用程序$ pm2 monit # 显示每个应用程序的CPU和内存占用情况$ pm2 show [app-name] # 显示应用程序的所有信息$ pm2 logs # 显示所有应用程序的日志$ pm2 logs [app-name] # 显示指定应用程序的日志$ pm2 flush # 清空所有日志文件$ pm2 stop all # 停止所有的应用程序$ pm2 stop 0 # 停止 id为 0的指定应用程序$ pm2 restart all # 重启所有应用$ pm2 reload all # 重启 cluster mode下的所有应用$ pm2 gracefulReload all # Graceful reload all apps in cluster mode$ pm2 delete all # 关闭并删除所有应用$ pm2 delete 0 # 删除指定应用 id 0$ pm2 scale api 10 # 把名字叫api的应用扩展到10个实例$ pm2 reset [app-name] # 重置重启数量$ pm2 startup # 创建开机自启动命令$ pm2 save # 保存当前应用列表$ pm2 resurrect # 重新加载保存的应用列表$ pm2 update # Save processes, kill PM2 and restore processes$ pm2 generate # Generate a sample json configuration filepm2文档地址：http://pm2.keymetrics.io/docs/usage/quick-start/
-
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>
