WEB前端
文章平均质量分 70
逛街的猫啊
输出、分享、推广
展开
-
拦截HTTP的多种方式
部分场景下需要修改请求报文信息,可以利用 AOP 思维(切面编程),对请求进行拦截处理。针对这几种不同的场景,分别拦截处理它的 URL 和请求参数。原创 2024-07-06 22:38:49 · 924 阅读 · 0 评论 -
为 Web 站点优雅的生成 Manifest 文件
原创 2024-04-22 19:30:49 · 590 阅读 · 0 评论 -
多种中断HTTP请求的方式
中断一个HTTP请求的多种方式原创 2022-11-13 08:48:39 · 1368 阅读 · 2 评论 -
SSE-即时推送
Server-Sent Events (SSE)是基于 HTTP 实现的,H5 标准中可以使用 EventSource 连接到服务、并接收服务端的通知。本文介绍,如何通过 SSE 实现一个简单的即时通信。原创 2022-10-06 22:19:00 · 1302 阅读 · 0 评论 -
媒体流入门实践
媒体流接口的学习实践,入门级别。可以做的事情:录制声音、录制屏幕、拍照、屏幕共享。原创 2022-10-05 17:04:50 · 550 阅读 · 0 评论 -
页面关闭前,如何发送一个可靠请求
离开当前页面前,向后台发送一个,如何确保这个请求是可靠的,大致的方案有:1. 同步2. keepAlive3. navigator.sendBeacon4. a标签的ping属性原创 2022-06-24 21:00:00 · 1224 阅读 · 0 评论 -
我不知道的URL解析规则
当浏览器加载一个HTML文档后,遇到link、script、img等资源时,会向后台通过HTTP/HTTPS协议请求资源。由于资源的请求路径的书写方式不同,则真正向后台发送的完整的URL也是不同的。同时因为`<base>`标签的存在,也会导致解析出URL不同。本文主要描述`URI`与web中资源URL的解析规则。原创 2021-12-22 19:53:55 · 1350 阅读 · 0 评论 -
网页特征信息
解析网页中的有效信息,用于识别一个WebApp原创 2021-12-17 10:07:38 · 309 阅读 · 0 评论 -
Tab页间通信
一、场景Tab 间通信存在不同的场景:同源网站下的 Tab 页间通信非同源网站下的 Tab 页间通信二、同源网站下 Tab 页间的通信方式按照通信的特征,分为三种方式点对点通信、广播通信、轮询通信点对点通信window.postMessge广播通信BroadCast ChannelService WorkerLocalStorage轮询通信IndexedDB2.1 window.postMessge当使用 window.open 打开一个新页面时,若两原创 2021-09-16 22:06:10 · 2065 阅读 · 1 评论 -
前端小计
一、浏览器内核二、HTML文件的解析过程1.资源分类(Chrome)kMainResourcekImagekCSSStyleSheetkScriptkFont…2.安全策略检查概念:开发者通过配置,来告诉浏览器各类外部资源的加载和执行限制,来提高网页的安全性。配置方式:配置请求头元素设置 3.资源优先级计算默认优先级:html、css、font这三...原创 2020-01-21 17:55:05 · 178 阅读 · 0 评论 -
【JS】简单实现一个引擎模板
前言这两天在做数据处理的工作,最初是简单粗暴直接拼接字符串,数据量少时还没发现什么问题。当数据多时,拼接的自己都闲麻烦的。想到了使用了模板来处理,简单方便,再也不用使用一堆的加号了。简单看下实现吧。模板和数据源//模板var ph = 'this is a ${type} , made in ${msg.date} and imagepath is ${msg.imagepath}'...原创 2018-04-17 20:17:55 · 1188 阅读 · 0 评论 -
ng-controller
背景:angular学习中发现容易出错的地方1.源码html: outBoxVal:{{outBoxVal}} innerBoxVal:{{innerBoxVal}} JS: var app = angular.module('myApp', []); app.controller('outBox', function($scope)原创 2016-11-24 15:45:44 · 1250 阅读 · 0 评论 -
angular之依赖注入
angualr test clculate number:{{num}} squere:{{result}} const app = angular.module("myApp",[]); //factory 是一个函数用于返回值。在 service 和 controller 需要时创建。原创 2016-11-28 10:56:32 · 282 阅读 · 0 评论 -
web前端常用网站
1.颜色类网站http://colorhunt.cohttp://webgradients.comhttp://www.colorhunter.comhttp://www.bootcss.com/p/websafecolors2.图标类网站http://www.iconfont.cn/plushttp://www.easyicon.nethttp://www转载 2017-04-20 22:14:12 · 1512 阅读 · 0 评论 -
【easyUI】datagrid使用分页时跳转到第一页
使用refresh方法选择跳转到某一页var p = $("#datagrid").datagrid("getPager"); $(p).pagination({ pagePosition: "bottom", beforePageText: '第', // 页数文本框前显示的汉字 afterPageText: '页 共 {pages} 页', displayMsg:原创 2017-07-04 18:47:37 · 5400 阅读 · 0 评论 -
【easyUI】使用datagrid创建具有不同表头的表格
需求:现在需要多个table,每个table的表头都不相同,为了避免代码重复,采用JS来制作表格。function currentOper() { var name = !$("#input_name").val() ? "undefined" : $("#input_name").val(); var version = !$("#input_version").val() ? "u原创 2017-07-04 18:52:38 · 797 阅读 · 0 评论 -
【easyUI】分页和组合框问题
1. 分页 1.1 使用pagination制作分页时,前端传到后台的page值默认时从一开始。在后台制作分页时,应注意使用(page - 1)。 1.2 设置页码 使用“refresh”方法,如:$("#pp").pagination("refresh",{pageNumber:1});2. 组合框(combobox)问题 2.1 为组合框中元素添加c原创 2017-07-05 16:25:28 · 722 阅读 · 0 评论 -
【JS】async/await
async/awaitasync/await是一种很特别的语法,它能够以一种更舒适的方式去执行promise。这很语法很好理解和使用。async function使用async关键字,将它放置在function的前面,示例1:async function f() { return 1;}使用关键字async对方法进行表示,意味着这个方法返回值总是一个promise...翻译 2018-04-27 19:01:45 · 426 阅读 · 0 评论 -
【JS】构造器和new关键字
构造器,new操作正常情况下,使用{}可以创建一个新的对象。但是通常我们会创建很多相似的对象,像用户、菜单项等。 这种情况,我们可以使用构造器和new操作。构造函数构造函数也是普通的方法,通常有两个约定: 1.方法名命名时首字母大写 2.应当仅通过new进行操作示例:function User(name) { this.name = name; thi...翻译 2018-05-03 15:19:33 · 622 阅读 · 0 评论 -
angularJS之自定义服务与fliter的混合使用
1. 创建自定义服务"$swl"var app = angular.module('myApp', []);app.service("$swl", function() { this.after = function(data) { return "("+data + " after,$swl"; }; this.before = function(data) { return原创 2016-11-24 11:31:05 · 336 阅读 · 0 评论 -
easyUI之DataGrid的分页要点
问题提出,使用分页时,分页总是存在问题,达不到预期效果。如:预期一页是十行,但总是显示所有的数据。1. 注意表单请求这是分页自动向后台传送的参数就是坑在了这一点上,本以为数据库返回所有的数据,前端会自动做截取,然而并不是。需要自己在后台做分页处理,后台返回JSON数据{“total”:num,"list":[{},{},{}]}total:是数据库中这一原创 2016-11-08 10:36:58 · 293 阅读 · 0 评论 -
【JSONP】通过nodejs做服务器简单模拟实现跨域请求
第一听说JSONP,看着名字以为使一中数据类型。其实不然,这是跨域请求的方式。大家可能认为自己没接触过,但是大家一定用过这种方式,只是大家自己没有留意过。如:这个标签大家很熟悉的吧,直接从网上拉下jquery.js。然后自己的网页就能识别"$"了,这就是JSONP,也是跨域请求(我自己的理解,不对之处,还请指点)“http://cdn.static.runoob.c原创 2016-11-29 19:03:11 · 2493 阅读 · 1 评论 -
【JS】深拷贝实现
一、BUGWEB平台上一直在刻意的避开深拷贝,一直使用JSON.parse(JSON.stringify(Object))避开深拷贝的问题。知道今天碰见个BUG,JSON将function转化为了字符串,排到这个BUG时,憔悴…若是Node.js平台的话,一直现成的轮子等着挑,可惜是WEB,不太敢乱引入,手写一个<_<二、深拷贝/** * 深拷贝 * 支持类型:Boolea...原创 2019-05-08 20:27:49 · 632 阅读 · 0 评论 -
【前端框架】主流框架对比
一、EasyUI1.1 简介EasyUI目前有两个分支,EasyUI for JQuery和EasyUI for Angular.EasyUI for JQuery是在JQuery的基础上进行分装的UI框架;EasyUI for Angular是在Angular的基础上封装的UI框架。EasyUI for JQuery框架偏向与UI的实现,同时也有简单的数据绑定;EasyUI for An...原创 2019-02-17 14:07:47 · 1060 阅读 · 0 评论 -
【JS】Mock制作假数据
背景前后端分离的API指导GitHub地址原创 2019-02-17 13:34:49 · 860 阅读 · 0 评论 -
【JS】JavaScript基础整理
一、内存管理1.1 生命周期分配需要的内存空间使用分配的内存空间(读、写操作)清除不再使用的内存1.2 标记清除JavaScript采用标记清除。当一个函数执行完毕,内部变量被标记不再使用(闭包除外)。垃圾回收器会定时查找被标记的地址,释放空间。Tip: 避免使用不必要的全局变量,因为很难判断全局变量是什么时候需要被清除二、执行上下文JavaScript的运行环境分为...原创 2019-01-02 20:26:22 · 204 阅读 · 1 评论 -
XHR获取自定义响应头
记录一次事故使用JWT做用户身份验证时,登陆时,后台会将Token放置在自定义响应头(X-token)中,然后需要前端获取Token并将值存储在本地,之后每次资源请求时都会将Token放置在请求头中。问题同域时,前端可以正常获取响应头X-token,整个通信流程没问题。但是,在跨域时,无法获取X-token。在Chrome调试时,发现响应头中没有X-token。解决方式...原创 2018-09-13 17:11:44 · 3224 阅读 · 0 评论 -
easyUI之为splitbuuton绑定事件
通过easyUI可以很迅速的创建一个分割按钮,但是easyUI没有为splitbutton封装onClick事件,这里我们谈下如何为它添加单击事件。第一种,在标签内添加onClick,如下:OkOk Cancelfunction show(name){ alert(name);}第二种,在标签内添加id或class,如下:Ok Ok Cancel$(原创 2016-10-28 14:41:30 · 1101 阅读 · 0 评论 -
easyUI之combo
问题提出,将列表放入组合框,设置并获取组合框的值。发现“getValue”这个方法时,不能将选择的值在界面上显示出来,解决方法如下: 请选择 test1 test2 test3$("#box").combo() $("#case").appendTo($("#box").combo("panel")); $("#case input").click(functio原创 2016-10-31 10:08:11 · 872 阅读 · 0 评论 -
【Web】函数节流和函数防抖
函数节流什么是函数节流有时需要监听一些DOM事件的发生,比如:鼠标的滚动、窗口的大小改变,当触发这些事件时,会频繁的调用事先写好的处理函数。 有时这些处理函数的内部是很复杂的,比如可能会发送HTTP请求。这时,它就会频繁的去发送请求,对性能造成影响,这时就需要使用的函数节流。节流原理要解决的问题是,避免处理函数被频繁的触发,让函数每隔一段时间执行一次,当在执行周期内被触发...原创 2018-04-09 18:59:22 · 485 阅读 · 0 评论 -
【JS】原型继承的实现
前言之前有写过一篇从Function说原型博文,自以为真的懂了原型,有点坐井观天了。拿具体的Demo说事吧。简单的小案例实现实现A类,具备a和b两个属性,一个sum方法返回a、b之和。实现B类,有a,b,c属性,一个sum方法返回a,b,c之和。B继承于A。实现一:function A(a , b){ this.a = a || 0; this....原创 2018-04-14 17:46:31 · 703 阅读 · 0 评论 -
【ES6】ES6语法简述
声明1. const静态资源变量声明,不能修改变量的指向。即 - 是基本数据类型,则不能修改它的值。 - 是引用数据类型,则不能修改它的指向。2. let2.1. 不能重复声明,没有变量提升 先定义后使用,变量定义不会自动提升,否则会报变量未定义的错误。 2.2 块作用域 每个大括号被视为一个作用域。逐级外层作用域查找,直到找到为止。 2.3 for语...原创 2017-09-16 11:32:31 · 4358 阅读 · 1 评论 -
js内置参数数组的类型
内置参数类型原创 2016-09-13 09:26:05 · 360 阅读 · 0 评论 -
监听from的submit事件
首先来看段demo<DOCTYPE html><html> <head> <title>test</title> <meta charset="UTF-8"> </head> <body> <form id='from' action='./'> <input type='text' id='inOne原创 2016-09-20 09:08:25 · 7765 阅读 · 0 评论 -
classList API
classList APIadd(className) 添加一个类名remove(className) 移除一个类名contains(className) 是否存在这个类名 true/falsetoggle(className) 添加或删除这个类名item(1) 返回第二个类名length 只读属性 classList的长度原创 2016-10-09 09:26:48 · 282 阅读 · 0 评论 -
JS变量提升
1. 源代码console.log(x());console.log(x);var x = 10;console.log(x);x = 20;function x() { var a = new Array();}console.log(x);if (true) { var a = 1;} else { var b = true;}console.log(a)原创 2016-11-14 09:50:41 · 293 阅读 · 0 评论 -
【web】要点归纳
【综述】1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。2、DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。3、事件 —— 如何使用事件,以及IE和标准DOM事件模型之间存在的差别。4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。5、严格模式与混杂模式 —— 如何触发这两种模式,区原创 2016-11-29 19:50:33 · 306 阅读 · 0 评论 -
IE和非IE的API事件兼容处理
var EventUtil = { addHandler: function (element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.a转载 2016-12-02 11:54:28 · 279 阅读 · 0 评论 -
【html】设置有滚动条的select
问题提出:select默认的会将所有的option全部显示出来,当数据过多时,下拉框会显得很长。期待结果:带有滚动条,显示一定数量的option,通过滚动查看更多option。效果展示:源码: 1window.selectFocus = function(that) { $(that).attr("size", 5);};window.sel原创 2017-05-09 08:24:19 · 30798 阅读 · 1 评论 -
【JavaScript】上传文件时监听change事件(只能被触发一次)
问题提出:做文件上传时,对input监听change时间,但是change事件只能被触发一次。Bug产生原因:尚未查到。解决方案:当一次上传完成后,替换原有的input并重新绑定change时间。HTML:修改头像原有JS代码:会引发只触发一次change事件。var uploadBtn = $("#uploadBtn");var fileBtn = $("#f原创 2017-05-11 12:52:55 · 4033 阅读 · 1 评论