![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
文章平均质量分 60
面向对象的夜猫子
抽象,继承,封装,多态。
展开
-
浏览器下载文件,非窗口打开方法
function fieldDownload (url,fileId,name) {//下载附件方法 var doc = document; //使用一个隐藏的form表单执行提交,没有则创建 let formId = '_attdownloadForm'; var downloadForm原创 2017-10-17 09:07:18 · 441 阅读 · 0 评论 -
关于cookie的详细讲解
在学以致用的工作学习里,对于不怎么使用的部分,多少有些雾里探花的窘迫感~差不多是了解一二,然而又非真切的明晰;这就使得再用的时候,总要去再搜索一番;如此颇为难受,倒不如总结纪录下来,一方面加深认知,也易便于查阅;对于某相关技术,不断学习、运用、总结、更新,积淀过后也能对别人给予帮助。写博,真是一件值得去做的事。背景在HTTP协议的定义中,采用了一种机制来记录客户端和服务器端交互的信转载 2017-10-24 08:48:21 · 577 阅读 · 1 评论 -
详解 CORS 跨域资源共享
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。本文详细介绍CORS的内部机制。一、简介CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。整个CORS转载 2017-10-24 08:45:57 · 194 阅读 · 0 评论 -
移动端页面平滑翻页的解决方案
随着近几年移动营销页的火爆,催生了一个中国式的名词「H5」。而 H5 最常见的形态就是类似幻灯片翻页效果。我们需要制作 H5 的时候,最快的办法就是使用一些滑动插件库,如 iDangero.us 出品的 Swiper,百度 BE-FE 出品的 iSlider。通过这些翻页库提供的强大的配置功能,我们就能实现很酷炫的翻页效果。当然,这些库还支持自动播放,点击切换和当前页面指示等配置,所以还能转载 2017-10-31 13:45:01 · 1435 阅读 · 0 评论 -
前端需要了解的 SSO 与 CAS 知识
不管是什么公司,只要产品数量大于一个,那么单点登录势必是绕不过去的一个问题。作为前端程序员,我们对其虽然接触不多,但适当的了解还是必要的。本文就来谈谈单点登录相关的问题。前置知识了解 SSO,最好具备以下知识。当然,如果不是特别熟,也不影响阅读。cookie及session浏览器同源策略及跨域了解登录系统的构成什么是 SSO 与 CAS?SSOS转载 2017-11-08 15:35:51 · 392 阅读 · 0 评论 -
ES6系列文章 异步神器async-await
关于异步处理,ES5的回调使我们陷入地狱,ES6的Promise使我们脱离魔障,终于、ES7的async-await带我们走向光明。今天就来学习一下 async-await。async-await和Promise的关系经常会看到有了 async-await、promise 还有必要学习吗、async await优于promise的几个特点,接收了这些信息后,就蒙圈了。现在才知道,asy转载 2017-10-13 08:41:51 · 409 阅读 · 0 评论 -
说说JavaScript的原型链
在JS中,原型链有时候让人觉得很胡里花哨,又是prototype、__proto__又是各种指向什么的,让人觉得很头疼。如果你也有这种感觉,或许这篇文章可以帮助到你一、认识原型1、先来一串代码var Person = function(msg){ this.msg = msg;}var person1 = new Person("wanger")person1.cons转载 2017-10-12 10:55:42 · 377 阅读 · 0 评论 -
自定义select之模糊查询
//select 模糊查询function FuzzyQuery() { var _this = this; _this.value = "";}FuzzyQuery.prototype = { constructor : FuzzyQuery, init : function(option) { var _this = this; var options原创 2017-09-26 13:38:06 · 1736 阅读 · 0 评论 -
JavaScript中的设计模式之代理模式
代理模式的定义:为其他对象提供一种代理以控制对这个对象的访问。在某些情况下,一个对象不适合或者不能直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用。虚拟代理虚拟代理是把一些开销很大的对象,延迟到真正需要它的时候才去创建执行图片懒加载//图片加载let imageEle = (function(){ let node = docum转载 2017-10-10 10:46:44 · 145 阅读 · 0 评论 -
javascript匿名函数的巧妙应用
匿名函数最早是LISP语言引入,后面发展为不仅是函数式语言所特有,在解释型语言和编译型语言中也越来越多匿名函数的身影,或许有个更潮的名字叫 lambda 表达式。闭包多是用匿名函数实现,在匿名函数中引用了外部变量,那这个匿名函数就形成了闭包。由于闭包和匿名函数之间有着千丝万缕的关系,所以经常会把两者搞混淆。其实在 Js 中匿名函数、闭包、自执行函数、回调函数、箭头函数,这些概念似乎相同,却又不转载 2017-10-10 10:48:32 · 258 阅读 · 0 评论 -
全面解析JS中的this机制
1. 为什么要使用this?对于javaScript开发者来说,常常被this的指向问题弄的晕头转向。 我们将会全面的解析JS中的this机制,以求可以对this机制的一知半解。 这里我们先思考,为什么我们要使用this。我们实现一个方法,可以被不同的对象调用,输出对应的结果。function sayHello(content){ console.log(content.nam转载 2017-10-10 10:51:04 · 312 阅读 · 0 评论 -
聊聊cookie的那些事
前言cookie在web开发中时常被用到,也是面试官喜欢问的一块技术,很多人或许和我以前一样,只知其一不知其二,谈起web存储,都会答localStorage、sessionStorage、还有就是cookie,然后一些区别啊什么的倒背如流,cookie的优缺点也了然于心,但是当你看完这块内容之后,你会对cookie有另外独到的见解,希望以后问到这块技术,或者项目中遇到这个你都会处理,我在实习转载 2017-10-10 10:54:55 · 214 阅读 · 0 评论 -
教你从零开始搭建一款前端脚手架工具
前言在实际的开发过程中,从零开始建立项目的结构是一件让人头疼的事情,所以各种各样的脚手架工具应运而生。笔者使用较多的yoeman,express-generator和vue-cli便是当中之一。它们功能丰富,但最核心的功能都是能够快速搭建一个完整的项目的结构,开发者只需要在生成的项目结构的基础上进行开发即可,非常简单高效。作为一个不折腾会死星人,在熟悉了使用方法以后就开始琢磨起它们转载 2017-10-20 15:28:36 · 602 阅读 · 0 评论 -
setTimeout和setInterval
setTimeout的使用setTimeout(cb, time);setTimeout传入的是两个参数,第一个参数是cb代表的是回调函数callback,第二个代表的是时间,以ms计算setInterval的使用setInterval(cb, time);setInterval传入的也是两个参数,第一个参数是cb代表的是回调函数callback,第二个代表的也是时间,以ms计转载 2017-10-10 11:04:36 · 275 阅读 · 0 评论 -
JavaScript的十个小技巧
每一门语言都有一些奇技淫巧,JS也不例外,一直想总结这么篇文章,我包括一些新手,都会有这么一个疑问,每次面对一张空白的页面,不知从何下手,没有思路,高手有的是设计模式,但是在这里讲一些设计模式,我可能不够格,这些书籍都有可以自己去翻阅,我能给的就是,总结我写代码的时候,会优化的一些技巧实用篇1.立即执行我为什么把立即执行放在第一个,因为一般做业务的时候都会有一个入口函数,比如一下这种格转载 2017-10-10 10:59:13 · 229 阅读 · 0 评论 -
前端高性能计算之一:WebWorkers
最近做一个项目,里面涉及到在前端做大量计算,直接用js跑了一下,大概需要15s的时间, 也就是用户的浏览器会卡死15s,这个完全接受不了。虽说有V8这样牛逼的引擎,但大家知道js并不适合做CPU密集型的计算,一是因为单线程,二是因为动态语言。我们就从这两个突破口入手,首先搞定“单线程”的限制,尝试用WebWorkers来加速计算。什么是WebWorkers简单说,WebW转载 2017-10-24 08:50:45 · 436 阅读 · 0 评论 -
JavaScript是如何工作的:内存管理 + 如何处理4个常见的内存泄露
几周前,我们开始写一个系列,深入探讨JavaScript和它的工作原理。我们认为了解JavaScript的构成以及它们如何协作,有助于编写出更好的代码和应用程序。本系列第一篇重点介绍了引擎、运行时、调用栈。第二篇揭示了谷歌V8 JavaScript引擎的内部机制,并且提供了一些关于如何写出更好的JavaScript代码的建议。本文作为第三篇,将会讨论另一个开发者容易忽视的重要主题转载 2017-10-24 08:53:52 · 214 阅读 · 0 评论 -
ie11下下载文件,文件名乱码的解决方法
环境:win10教育版+IE11现象:下载PDF文件谷歌下载,文件名:下载奖金计划PDF文件(英文).pdf用IE 下载,文件名:2016-17 CAMBRO 涓枃浜у搧鐩綍鍐_pdf IE下载时中文部分出现乱码,并在IE上下载一个百度PDF文库中的PDF文件,发现并无此现象,于是猜测IE可能处于某种原因没有支持字符编码,于是为文件名设置中文编码格式:S转载 2017-10-17 09:03:59 · 2201 阅读 · 0 评论 -
safari下载文件后缀多添加了.exe的解决方法
通过程序读取文件或生成文件来下载,一般只需设置 header 头即可:header('Content-type: application/pdf'); header('Content-Disposition: attachment; filename="保存时的文件名.pdf"');在谷歌、火狐等浏览器中,Content-type 的设置貌似并不重要,但在 Safari 上则有不同:转载 2017-10-17 09:00:02 · 2432 阅读 · 0 评论 -
IE input file隐藏不能上传文件解决方法
又是IE的一个问题,近来是跟IE浏览器磕上了,这个问题发现不少人也遇到过,实在蛋疼。但今天这个不能算是一个bug,因为IE可能是从安全角度上考虑结果导致的。一步步来解读。普通上传例子首先普通的文件上传呢,很简单,前端代码:12345678910111213转载 2017-10-17 08:58:20 · 709 阅读 · 0 评论 -
[V8]找出可能影响性能的代码(模式)
原文地址:Tracing Patterns that Might Hinder Performance原文作者:Jakub Rożek译文出自:掘金翻译计划本文永久链接:github.com/xitu/gold-m…译者:薛定谔的猫校对者:AceLeeWinnie、HydeSong找出可能影响性能的代码(模式)现在你很可能会遇到不止一个响应迟钝的 app 或加载缓慢的页面。已经转载 2017-11-02 09:56:45 · 646 阅读 · 0 评论 -
Webpack经典入门
October 16th, 2015 by Maxime Fabre(中文译本更新于2017年10月22日,由于webpack已更新至3.8.1,因此译文有改动)Webpack your bags之前你可能已经听说过这个叫webpack的很酷的工具,如果你没仔细了解过这个工具,你可能会有些困惑,因为有人说它像 Gulp 之类的构建工具,也有人说它像 Browserify 之转载 2017-11-02 09:51:18 · 786 阅读 · 0 评论 -
8大前端安全问题
当我们说“前端安全问题”的时候,我们在说什么“安全”是个很大的话题,各种安全问题的类型也是种类繁多。如果我们把安全问题按照所发生的区域来进行分类的话,那么所有发生在后端服务器、应用、服务当中的安全问题就是“后端安全问题”,所有发生在浏览器、单页面应用、Web页面当中的安全问题则算是“前端安全问题”。比如说,SQL注入漏洞发生在后端应用中,是后端安全问题,跨站脚本攻击(XSS)则是前端安全问题,转载 2017-11-02 09:07:43 · 708 阅读 · 0 评论 -
WebAssembly 实践:如何写代码
本文不讨论 WebAssembly 的发展,只是一步一步地教你怎么写 WebAssembly 的各种 demo。文中给出的例子我都放在 GitHub 中了(仓库地址),包含了编译脚本和编译好的可执行文件,只需再有一个支持 WebAssembly 的浏览器就可以直接运行。配置开发调试环境安装编译工具略。 参考官方 Developer’s Guide 和 Advanced转载 2017-10-24 11:56:49 · 348 阅读 · 0 评论 -
ES6 变量作用域与提升:变量的生命周期详解
ES6 变量作用域与提升:变量的生命周期详解从属于笔者的现代 JavaScript 开发:语法基础与实践技巧系列文章。本文详细讨论了 JavaScript 中作用域、执行上下文、不同作用域下变量提升与函数提升的表现、顶层对象以及如何避免创建全局对象等内容;建议阅读前文 ES6 变量声明与赋值。变量作用域与提升在 ES6 之前,JavaScript 中只存在着函数作用域;而在转载 2017-10-24 12:31:26 · 501 阅读 · 0 评论 -
ES6 变量声明与赋值:值传递、浅拷贝与深拷贝详解
ES6 变量声明与赋值:值传递、浅拷贝与深拷贝详解归纳于笔者的现代 JavaScript 开发:语法基础与实践技巧系列文章。本文首先介绍 ES6 中常用的三种变量声明方式,然后讨论了 JavaScript 按值传递的特性,最后介绍了复合类型拷贝的技巧;有兴趣的可以阅读下一章节 ES6 变量作用域与提升:变量的生命周期详解。变量声明与赋值ES6 为我们引入了 let 与 co转载 2017-10-24 12:33:28 · 1457 阅读 · 0 评论 -
JavaScript Event Loop 机制详解与 Vue.js 中实践应用
JavaScript Event Loop 机制详解与 Vue.js 中实践应用归纳于笔者的现代 JavaScript 开发:语法基础与实践技巧系列文章。本文依次介绍了函数调用栈、MacroTask 与 MicroTask 执行顺序、浅析 Vue.js 中 nextTick 实现等内容;本文中引用的参考资料统一声明在 JavaScript 学习与实践资料索引。1. 事件循环机制详解转载 2017-10-24 12:35:01 · 383 阅读 · 0 评论 -
前端之路:工具化与工程化
前言二十载光辉岁月近年来,随着浏览器性能的提升与移动互联网浪潮的汹涌而来,Web前端开发进入了高歌猛进,日新月异的时代。这是最好的时代,我们永远在前行,这也是最坏的时代,无数的前端开发框架、技术体系争妍斗艳,让开发者们陷入困惑,乃至于无所适从。Web前端开发可以追溯于1991年蒂姆·伯纳斯-李公开提及HTML描述,而后1999年W3C发布HTML4标准,这个阶段主要是BS架构,转载 2017-10-24 11:41:38 · 972 阅读 · 1 评论 -
解决前端跨域的正确姿势
一、 跨域请求的含义浏览器的同源策略,出于防范跨站脚本的攻击,禁止客户端脚本(如 JavaScript)对不同域的服务进行跨站调用。一般的,只要网站的 协议名protocol、 主机host、 端口号port 这三个中的任意一个不同,网站间的数据请求与传输便构成了跨域调用。这也是我们下面实践的理论基础。我们利用 NodeJs 创建了两个服务器,分别监听 30转载 2017-10-24 09:03:16 · 972 阅读 · 1 评论 -
js创建一条通用链表
js创建一条通用链表by leeenx on 2017-10-13什么是「链表科普」?链表是一种物理存储单元上非连续、非顺序的存储结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的。什么是「顺序存储结构科普」?在计算机中用一组地址连续的存储单元依次存储线性表的各个数据元素,称作线性表的顺序存储结构。多数高级语言的「数组」转载 2017-10-24 09:01:33 · 261 阅读 · 0 评论 -
谈谈HTTP协议中的短轮询、长轮询、长连接和短连接
引言最近刚到公司不到一个月,正处于熟悉项目和源码的阶段,因此最近经常会看一些源码。在研究一个项目的时候,源码里面用到了HTTP的长轮询。由于之前没太接触过,因此LZ便趁着这个机会,好好了解了一下HTTP的长长短短。了解的方式主要都是LZ在网络上获取的,这里只是谈一下LZ对于这四种叫法最直观的理解。如果你之前不懂的话,可以帮你普及一下,如果你之前就懂得话,可以互相对照一下。以转载 2017-10-24 08:59:55 · 223 阅读 · 0 评论 -
移动web开发问题和优化小结
1.前言到目前为止,互联网行业里,手机越来越智能化,移动端占有的比例越来越高,尤其实在电商,新闻,广告,游戏领域。用户要求越来越高,网站功能越来越好,效果越来越炫酷,这就要求我们产品质量越来越高,web前端开发而言是一个挑战,是一个难题,也是一个机遇。如何让我们所开发的手机页面能有更好的交互体验,就是这篇文章的主旨:移动web开发问题和优化小结。这个只是我自己在开发的时候知道的坑,如果大家转载 2017-10-24 08:55:50 · 249 阅读 · 0 评论 -
完美解决前端跨域之 easyXDM 的使用和解析
0、背景因个别网络运营商存在 HTTP 劫持的情况,导致网站某些重要的 iframe 弹窗页面被插入了第三方广告,内容完全被遮挡,严重影响用户体验。公司决定将这些页面切换为 HTTPS,切换后发现原来 iframe 浮层自动适应大小的功能失效了,原因是主页面是 HTTP 的,子窗口加载后对父页面浮层大小的操作跨域了,被浏览器限制无法操作。于是就需要跨域解决方案来解决这种情况。1、跨域问题转载 2017-10-10 11:00:56 · 754 阅读 · 0 评论 -
前端最佳实践——DOM操作
1、浏览器渲染原理在讲DOM操作的最佳性能实践之前,先介绍下浏览器的基本渲染原理。浏览器渲染展示网页的主流程大致可以用下图表示:图:WebKit 主流程分为以下四个步骤:解析HTML(HTML Parser)构建DOM树(DOM Tree)渲染树构建(Render Tree)绘制渲染树(Painting)浏览器请求解析(Parse转载 2017-10-10 11:02:36 · 466 阅读 · 0 评论 -
发布-订阅模式
发布-订阅模式转载 2017-09-19 09:02:57 · 334 阅读 · 0 评论 -
webpack:从入门到真实项目配置
该文使用的 Webpack 版本为 3.6.0,本文分两部分。第一步是简单的使用 webpack,第二部分通过一个真实项目来配置 webpack,没有使用任何的 CLI,都是一步步配置直到完成生产代码的打包。这是本项目对应的仓库,每个小节基本都对应了一次转载 2017-09-19 08:51:09 · 430 阅读 · 0 评论 -
自定义dialog的解决方案
function publicPlatformDialog() { var _this = this; //添加规则选项 _this.addOptionsDate = null; //添加规则条件 _this.addConditionDate = null; //添加规则操作 _this.addOperationDate = null; //默认操作按钮 _this.def原创 2017-09-26 13:35:07 · 273 阅读 · 0 评论 -
Vue的发现和理解
1. 性能优化:相对于计算属性computed、方法methods、观察watch,优先考虑使用计算属性实现,因为计算属性会缓存它的值,只有当计算属性的相关依赖发生改变时才会重新求值;尽可能最大化地让Vue复用可用的元素,即,在用key管理可利用元素的地方看是否有其它更快速的替代方案;适当地选择v-if和v-show,当元素被渲染后,需要经常被切换时,使用v-show;否则,使用v-if;转载 2017-09-26 13:31:00 · 567 阅读 · 0 评论 -
JavaScript之event对象位置属性图解
这篇文章我们来熟悉一下JavaScript 中关于 event 对象的位置属性,并附上图解方便理解。JavaScript 中的event位置属性有:offsetX、offsetY、pageX、pageY、clientX、clientY、screenX、screenY、layerX、layerY、x、y。首先我们先看一下个浏览器对这些属性的支持情况,如下图:image.png转载 2017-09-26 13:29:23 · 769 阅读 · 0 评论 -
数据结构与算法JavaScript描述 | 数组
1、基础:数组的标准定义:一个存储元素的线性集合,元素可以通过索引来任意存取,索引通常是数字,用来计算元素之间存储位置的偏移量。JavaScript 中的数组是一种特殊的对象,用来表示偏移量的索引是该对象的属性,索引可能是属性。然而,这些数字索引在内部被转换为字符串类型,这是因为JS对象中的属性名必须是字符串;即数组在JS中只是特殊的对象。2、使用数组:1)创建数组:①转载 2017-09-26 13:27:07 · 289 阅读 · 0 评论