JavaScript
文章平均质量分 84
JavaScript笔记
胡西风_foxww
麻将业余八级,常胡西风,故自称胡西风。执著于自身精进的自由之风。
展开
-
前端 a链接 如何实现下载功能
在中后台项目中,前端难免需要处理下载的逻辑,需要下载的内容包括但不限于图片、Excel 表格、CSV 文件、MP4 文件、PDF 文件、TXT 文件、JSON文件、HTML 文件等等。虽然下载的内容各式各样,但是下载的原理大同小异。下面来一起学习一下前端是如何处理下载的。URL.createObjectURL(blob) 可以直接访问,无需 “编码 / 解码”,但需要记得撤销(revoke);而 Data URL 无需撤销(revoke)任何操作,但对大的 Blob 进行编码时,性能和内存会有损耗。转载 2024-05-07 11:56:11 · 777 阅读 · 0 评论 -
【网络安全 / 前端 XSS 防护】一文带你了解 HTML 的特殊字符转义及编码
如果用户输入的内容未经过转义或编码处理,并且在个人简介页面上直接显示,那么攻击者可以在自我介绍中插入恶意 HTML 标签或属性。例如,当浏览器检测到页面中的特殊字符被正确转义或编码时,它们会将其视为纯文本,不会将其解析为 HTML 标签或脚本。转义时应考虑多重编码:当字符传输经过多个层级或环节时,确保在每个层级或环节上都进行了正确的编码和转义处理。这样,HTML 标签和属性不再被解析为可执行的代码,保护了页面和用户的安全。这样,URL 中的特殊字符被转义为实体编码,防止了恶意代码的执行。转载 2024-04-01 20:49:40 · 449 阅读 · 0 评论 -
最全前端资源汇集____有过时内容斟酌备用
综合类 地址前端知识体系 [链接] 前端知识结构 [链接] 前端知识体系 [链接]Web 前端在线开发网站 [链接]Web 前端开发大系概览 - 中文版 [链接] 免费的编程中文书籍索转载 2024-02-01 09:20:30 · 203 阅读 · 0 评论 -
chrome扩展程序开发之在目标页面运行自己的JS
chrome 插件开发的入门介绍,实现利用 chrome 扩展实现在目标网页运行我们的 js 的功能。关于 chrome 扩展的详细内容,可以通过官网了解。开发工具很简单,记事本就 OK 了,当然还要有一个 chrome 浏览器。新建一个文件夹,比如,HelloWorld然后创建一个文本文件,作为这个扩展程序的配置文件,所以文件名是 manifest.json,注意扩展名是 json,然后输入如下内容。1.png 的话,随便拖一张图片进来就 OK 啦。原创 2023-12-26 10:26:50 · 776 阅读 · 0 评论 -
使用JSDoc生成漂亮的文档
JSDoc是一个用于 JavaScript 的API文档生成器,类似于 Javadoc 或 phpDocumentor。可以将文档注释直接添加到源代码中。JSDoc 工具将扫描您的源代码并为您生成一个 HTML 文档网站。原创 2023-12-26 10:22:02 · 1828 阅读 · 2 评论 -
vue中原生H5拖拽排序_拖拽图片也是同样的道理
原文地址H5有基于拖拽的事件机制,如果你还不熟悉,请看我之前的文章中有介绍。原创 2023-11-21 23:18:53 · 340 阅读 · 0 评论 -
jQuery.form.js 详细用法_维护老项目使用
jquery form 是一个表单异步提交的插件,可以很容易提交表单,设置表单提交的参数,并在表单提交前对表单数据进行校验和处理和表单提交后的函数调用。原创 2023-04-04 17:07:10 · 985 阅读 · 1 评论 -
jQuery属性操作prop()、attr()和data()
在上述代码中,div 的 index 属性是一个普通的自定义属性,data-index 是 HTML5 的自定义属性 (以“data-” 开头),使用 atr()方法都可以进行设置或获取。Attr() 用来设置或获取元素的自定义属性,自定义属性是指用户给元素添加的非固有属性。jQuery 提供了一些属性操作的方法,主要包括 prop()、attr() 和 data() 等。在上述代码中,第 3 行用来获取 data-index 属性,属性名中不需要 “data-” 前缀,并且返回的结果是数字型。原创 2023-03-02 13:40:04 · 523 阅读 · 0 评论 -
AJAX从远古到现在的变迁
XHR对象在请求与响应过程中,状态会不断变化(0-4)逐步变化,我们可以绑定一个函数,监听状态的变化,只要状态变化就出发某函数。利用HTTP 204 No Content状态码,当浏览器收到204时,页面不做跳转。如果使用异步,下面的代码继续执行,等你请求完成了,我该怎么知道这个变化呢?如果xhr.readyState变为4时,说明请求已经完成了。XMLHttpRequest对象,一个专门的HTTP请求工具。// 1:制造xhr。// 2: 打开链接。// 3: 发送请求。原创 2023-02-14 10:56:23 · 335 阅读 · 0 评论 -
即时通讯(instant-messaging)的前世今生
其实原理跟 ajax轮询 差不多,都是采用轮询的方式,不过采取的是阻塞模型(一直打电话,没收到就不挂电话),也就是说,客户端发起连接后,如果没消息,就一直不返回Response给客户端。虽然接线员很快速,但是每次都要听这么一堆,效率也会有所下降的,同时还得不断把这些信息转交给客服,不但浪费客服的处理时间,而且还会在网路传输中消耗过多的流量/时间。通俗的说就是,服务器因为每天要接待太多客户了,是个健忘鬼,你一挂电话,他就把你的东西全忘光了,把你的东西全丢掉了。有了,来吧, 给你(Response)原创 2023-02-08 17:21:49 · 629 阅读 · 0 评论 -
认识HTML5的WebSocket
在 HTML5 规范中,我最喜欢的 Web 技术就是正迅速变得流行的 WebSocket API。WebSocket 提供了一个受欢迎的技术,以替代我们过去几年一直在用的 Ajax 技术。这个新的 API 提供了一个方法,从客户端使用简单的语法有效地推动消息到服务器。让我们看一看 HTML5 的 WebSocket API:它可用于客户端、服务器端。而且有一个优秀的第三方 API,名为 Socket.IO。一、什么是 WebSocket API?转载 2023-02-06 09:59:11 · 158 阅读 · 0 评论 -
老姚浅谈:怎么学 JavaScript?,文中的学习方法值得借鉴,可收藏
原文地址大家好,我是若川。当初我就是看本文深受启发,开始看书读源码。所以现在联系了作者 @老姚 授权转载分享给大家。我按照文中的做法敲完了《JavaScript 语言精粹 修订版》,在 2017 年 7 月 23 日写出了我的第一篇文章《读书笔记》。看完了《JavaScript 面向对象编程》、《你不知道的 JavaScript》上中卷等书。到现在看了很多源码,输出了 10 余篇学习源码系列。面试、年度总结、JS 基础系列@老姚 可能有一部分读者朋友不知道是谁。转载 2023-02-03 09:38:03 · 174 阅读 · 0 评论 -
JS面向对象---原型链继承
使用new运算符创建对象过程:(如下图) ** 构造函数模式缺点 **每个方法都要在实例对象上创建一遍每个函数都有prototype属性,改属性指向函数自己的原型对象,原型对象可以让所有对象实例共享属性和方法;** 原型模式缺点(原型属性时引用类型时,会被所有实例共享,) **2、构造函数继承2.1、原型链缺点:demo:2.3、借用构造函数(拷贝父类的属性添加到子类实例对象中)优点: 解决了2.2中的两个问题向父类传递参数demo:缺点:使用原型链实现对原型属性和方法的继承,借用构造原创 2022-06-29 23:02:07 · 331 阅读 · 0 评论 -
JavaScript中的日期对象
Date对象介绍javascript 时钟<div id="clock"></div><script> var clock = document.getElementById('clock'); // clock.innerHTML = '2021-07-18'; function getTodayTime(){ var d = new Date(); var year = d.getFullYear(); var month = d.get原创 2022-04-01 23:12:04 · 127 阅读 · 0 评论 -
ajax文件上传
文章首发于qdgithub.com阅读体验更佳iframe模拟Ajax文件上传效果分析:1:捕捉表单提交的动作2:创建一个iframe3:把表单的 target修改 指向 该iframe4:去掉这个iframe<div id="progress"></div><form action="up.php" method="post" enctype="mu...原创 2019-12-15 17:43:10 · 473 阅读 · 0 评论 -
js表单验证正则大全
常用正则表达式/^\\d+$/ //非负整数(正整数 + 0) /^[0-9]*[1-9][0-9]*$/ //正整数 /^((-\\d+)|(0+))$/ //非正整数(负整数 + 0) /^-[0-9]*[1-9][0-9]*$/ //负整数 /^-?\\d+$/ //整数 /^\\d+(/ //非负浮...原创 2019-04-29 10:31:20 · 1534 阅读 · 0 评论 -
js实现一个简单的html模板解析器
一个最基本的模板解析器,需要有什么功能呢?读取变量值解析模板语句按照这个思路,我们编写一个简单的解析器,需求如下:读值: <%= 变量名 %>语句支持: <% if( type == 1 ){ %> qdgithub! <%}%>html模板如下:我叫:<%= name %> <br/><% if(type ...原创 2019-03-26 16:38:21 · 768 阅读 · 0 评论 -
2019年你需要知道的13个javascript库
译者: 你可能已经用到 Underscore 或者 Lodash。本文列举了 11 个常用的库来提高开发效率。原文: 11 JavaScript Utility Libraries you Should Know in 2019为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。JavaScript 依然是 2019 年最受欢迎、最流行的编程语言,所以它的生...翻译 2019-02-14 10:02:18 · 384 阅读 · 0 评论 -
拖拽上传
&lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;拖拽上传&lt;/title&gt; &lt;script s原创 2019-01-19 21:17:07 · 2045 阅读 · 0 评论 -
桌面提醒API之Notification
桌面通知功能能够让浏览器即使是最小化的状态,也能将消息通知给用户。这和WebIM是最天然的组合,不过目前支持Desktop Notification功能的浏览器只有Chrome5+,且弹出来的内容只能是文本,而不支持HTML。在实际使用的过程中,应该尽量减少通知功能对用户的干扰,最大程度的减少通知功能的出现,这就需要解决以下几个问题:收到多条消息时确保只出现一条通知;当用户处于IM...原创 2019-01-17 20:33:59 · 659 阅读 · 0 评论 -
PhotoSwipe之FAQ(5)
实现我不能事先确定图片的大小,我该怎么做?使用另外一个图库脚本(1,2),或者找到一个方法:你可以阅读 PHP Version,Ruby,Node.js中关于下载图片尺寸的部分内容。您可以将图像的尺寸直接存储在其文件名中,并在photoswipe初始化期间(参照API部分中gettingdata事件)在前端对其进行分析。大部分CMS系统在数据库中存储图片的尺寸,并且有API去检索它。...翻译 2019-01-04 16:37:41 · 480 阅读 · 0 评论 -
PhotoSwipe之API(4)
API介绍在这个页面上,列出的所有方法和属性都是公共的。如果你想看看API能做什么的例子,请进入PhotoSwipe默认UI源码页。初始化后,你可以得到一个PhotoSwipe实例。var photoswipeInstance = new PhotoSwipe(/*...*/);方法var pswp = new PhotoSwipe( /* ... */ );// Initiali...翻译 2019-01-04 09:42:57 · 878 阅读 · 2 评论 -
PhotoSwipe之参数options(3)
Optionsoptions是一个键值对对象,传递给PhotoSwipe的构造函数。例如:var options = { index: 3, escKey: false, // ui option timeToIdle: 4000};var gallery = new PhotoSwipe( someElement, PhotoSwipeUI_Defau...翻译 2019-01-03 11:45:06 · 3445 阅读 · 0 评论 -
PhotoSwipe入门(2)
开始之前PhotoSwipe不像jquery插件那样简单。你需要有一些javascript基础。PhotoSwipe需要预定义图片的尺寸(more about this)如果你在非响应式网站上使用PhotoSwipe,控制器将会被缩放(基于整个页面缩放)。因此你需要自己实现控制器(如右上角的关闭按钮)插件中的所有代码是原汁原味的js并且支持IE8及其以上。如果你的网站或应用使用一些jav...翻译 2019-01-02 15:05:50 · 3126 阅读 · 4 评论 -
PhotoSwipe介绍(1)
介绍纯js画廊 (gallery),没有依赖性(dependencies)画廊风格所有控件(All controls)标题(caption)、分享(facebook,tweet)、点击切换控制翻译 2019-01-02 14:12:19 · 2267 阅读 · 0 评论 -
HTML5地理定位Geolocation
地理位置定位原理介绍地理定位的几种方式IP地址GPSWiFiGSM/CDMA地理定位获取流程:用户打开需要获取地理位置的web应用应用向浏览器请求地理位置,浏览器弹出询问,询问用户是否共享地理位置。假设用户允许,浏览器从设备查询相关信息。浏览器将相关信息发送到一个信任的位置服务器,服务器返回具体的地理位置。HTML5地理位置的实现:实现基于浏览器(无需后端支持...原创 2018-12-12 23:23:04 · 897 阅读 · 0 评论 -
分析JQ作者的类实现过程
作为jquery的作者。John Resig在博客里记录了一种class的实现,原文在此下面是源码:(function(){ var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/; this.Class = function(){}; Class.ex...原创 2018-09-14 17:01:13 · 196 阅读 · 0 评论 -
requirejs库的简易实现
requirejs的使用方法在页面中引入requirejs定义其他的模块在main.js中引入其他的js模块具体代码如下:// 第一步: 在html中引入require.js&lt;script src="js/require.js" data-main="js/main"&gt;&lt;/script&gt;// 第二步,定义其他的模块//原创 2018-09-13 22:55:26 · 877 阅读 · 0 评论 -
聊聊this
this的四种调用方式1.普通函数来调用 2.作为对象的方法来调用 3.函数作为构造函数调用时 4.函数通过call,apply调用时第一种1.普通函数来调用 this的值指向->window 准确的说this为null,但被解释为window 在ECMAscript5标准中,如果this为null,则被解释为undefined。console.........原创 2018-08-16 13:00:17 · 140 阅读 · 0 评论 -
javascript闭包及其使用场景
概念先看一段代码function t1(){ var age = 22; function t2(){ alert(age); } return t2;}var tmp = t1();var age = 99;tmp();//22在大部分的语言中,t1被调用执行,则申请内存,并把局部变量push入栈。t1函数执行完毕,内部的局部变量随着函数的退出而销毁。因此,age = 22这个局部变量就消失了。但是在js中,age = 20这个变原创 2018-08-13 23:03:20 · 1174 阅读 · 0 评论 -
词法分析步骤
概念词法分析: 一个函数能使用的局部变量,就从下面面的三步分析而来。 第一步:先分析参数 第二步:再分析变量声明 第三步:再分析函数声明具体步骤: 0: 函数运行前的一瞬间,生成Active Object(活动对象),下称AO1: 1.1 函数声明的参数形成AO的属性,值全是undefined 1.2 接收实参,形成AO相应属性的值...原创 2018-08-10 09:01:58 · 3454 阅读 · 0 评论 -
JS作用域
在js中函数嵌套是非常普遍的,在函数嵌套中,对变量是如何寻找的? 答:首先在函数内寻找,寻找不到则往外层寻找···直到全局(window)区域看一段代码var c = 5;function t1(){ var d = 6; function t2(){ //var d = 3; // 去掉注释后的变化 var e = 7; ...原创 2018-08-07 22:24:11 · 120 阅读 · 0 评论 -
各种js插件目录
jQuery插件分页器插件1.jqPaginator官网 jqPaginator使用案例下载地址其他js插件Underscore.js-精巧而强大实用功能库 Underscore模版引擎的使用-template方法 各种JS模板引擎对比数据(高性能JavaScript模板引擎...原创 2017-12-25 16:00:33 · 1576 阅读 · 0 评论 -
location对象详解
location 是window对象下的一个属性window.location方法获取URL 统一资源定位符 (Uniform Resource Locator, URL)完整的URL由这几个部分构成: scheme://host:port/path?query#fragment url部分字段 翻译 解释 scheme 通信协议 常用的http,ftp,ma原创 2017-12-25 15:19:06 · 1500 阅读 · 0 评论 -
js打印html页面中的指定内容?
js打印html页面中的指定内容? 文章发布日期: 2017-12-20 文章更新日期:2018-01-08 添加demo下载下载地址传送门-&amp;gt;点击去下载声明,所有的打印页面都叫,index.html使用table2excel.js直接下载table数据到excel中获取table2excel.js文件github:table2exc...原创 2017-12-20 17:09:02 · 7984 阅读 · 0 评论 -
Ajax和PHP
表单: 用户名: 密码: JavaScript之Ajax请求var update = document.getElementById("update");update.onclick = function(){ var username = document.getElementById("username").value; var pass = document.原创 2017-11-02 20:04:48 · 210 阅读 · 0 评论