JavaScript
文章平均质量分 87
A_山水子农
这个作者很懒,什么都没留下…
展开
-
JavaScript实现Word、Excel、PPT在线预览
在文件管理的项目中需上传各种文档保存到后台,然后前端需要根据后台返回的文件地址进行在线预览,图片、视频、PDF等格式的文件用window.open(url)或者window.location.href=url能够在线预览,但是Word(.doc, .docx, .xls, .xlsx, .xlsm, .ppt, .pptx格式)文档用同样的方式打开是默认下载而不是在线预览。 微软offic...原创 2019-02-23 12:08:55 · 25383 阅读 · 3 评论 -
JS数组扁平化、去重、排序
在网上看到一个校招题目,已知一个数组var arr = [[1, 3, 2, 1],[5, 3, 4, 8, 5, 6, 5],[6, 2, 8, 9, [4, 11, 15, 8, 9, 12, [12, 13, [10], 14]]], 16],用js编写一个程序将这个数组扁平化,并得到一个升序且无重复值的数组。得到最终结果为:[1,2,3,4,5,6,8,9,10,11,12,13,14,15原创 2017-09-13 15:30:17 · 6469 阅读 · 1 评论 -
js中typeof和instanceof用法区别
typeof和instanceof判断变量,typeof会返回一个变量的基本类型,只有以下几种:number,boolean,string,function(函数),object(NULL,数组,对象),undefined。;例:alert(typeof(1));//numberalert(typeof("abc"));//stringalert(typeof(true));//boo原创 2017-07-26 14:28:08 · 7169 阅读 · 2 评论 -
getClientRects 和 getBoundingClientRect 的用法和区别
getClientRects获取元素占据页面的所有矩形区域 描述获取元素占据页面的所有矩形区域。语法 var rectCollection = object.getClientRects();值getClientRects 返回一个TextRectangle集合,就是TextRectangleList对象。TextRectangle对象包含了, top转载 2017-02-08 13:57:50 · 1872 阅读 · 0 评论 -
JavaScript 面向对象编程
1、模拟重载 在Java中重载是在一个类里面,方法名字相同,而参数不同。返回类型可以相同也可以不同。每个重载的方法(或者构造函数)都必须有一个独一无二的参数类型列表。由于JavaScript是弱类型,所以没有直接的机制去实现参数重载,但是我们可以通过传入的参数个数来进行模拟的重载。function Person(){ var args=arguments; if(typeof arg原创 2016-08-10 11:10:29 · 504 阅读 · 0 评论 -
JavaScript:HTML5跨文档消息传递(postMessage)
跨文档消息传送(cross-document messaging),有时候也简称为XDM,指的是来自不同域的页面间传递消息。例如,www.w3cmm.com域中的一个页面与一个位于内嵌框架中的p2p.w3cmm.com域中的页面通信。在XDM机制出现之前,更稳妥地实现这种通信需要花很多功夫。XDM把这种机制规范化,让我们能既稳妥有简单地实现跨文档通信。 XDM的核心是p...原创 2016-06-06 16:44:08 · 4661 阅读 · 0 评论 -
JavaScript:使用Canvas绘图
1、基本用法 要使用<canvas>元素,必须先设置其width和height属性,指定可以绘图的区域大小,出现在开始后结束标签中的内容是后备信息,如果浏览器不支持<canvas>元素,就会显示这些信息。例如<canvas id="drawing" width="200" height="200">A Drawing of something</ca原创 2016-06-06 14:11:04 · 32647 阅读 · 0 评论 -
JavaScript:同源策略
同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。示例:来自h原创 2016-08-15 11:13:48 · 956 阅读 · 0 评论 -
JavaScript:Ajax详解
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。AJAX 不是新的编程语言,而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整原创 2016-06-07 12:07:38 · 663 阅读 · 0 评论 -
JavaScript:JSONP
JSONP是JSON with padding(填充式JSON)的简写,是应用JSON的一种方法,看起来和JSON差不多,只不过是被包含在函数调用中的JSON,就像下面这样: callback({name: 'lwl'}) JSONP由两部分组成:回调函数和数据,回调函数是响应到来时应该在页面中调用的函数,而数据是传入回调函数中的JSON数据(服务器填充的)。(1)、J...原创 2016-06-07 12:43:29 · 828 阅读 · 0 评论 -
JavaScript:JSON详解
向服务器发出Ajax请求时,可以以两种不同的方式从服务器响应检索数据:一种是使用XMLHttpRequest对象的reponseXML属性访问XML格式的数据;一种是XMLHttpRequest对象的responseText属性访问字符串格式的数据。当前,XML是进行数据传输的标准语言,但是使用XML的缺点之一是很难对它进行解析并提取要添加到页面的数据。 JSON(JavaScri原创 2016-06-06 21:40:47 · 1299 阅读 · 0 评论 -
JavaScript:选择框脚本(select标签)
一、选择框脚本表单脚本1-12-13-14-15-1var selectbox=document.forms[0].elements["location"];for(var i=0,len=selectbox.options.length;i<len;i++){var text=selectbox.options[i].text; var va原创 2016-06-05 17:57:10 · 1723 阅读 · 0 评论 -
JavaScript:文本框脚本
1、选择文本表单脚本var form=document.getElementById("form");var textbox=form.elements[0];//取得表单中的第一个字段EventUtil.addHandler(textbox,"focus",function(event){ event=EventUtil.getEvent(event);原创 2016-06-05 16:58:51 · 850 阅读 · 0 评论 -
iframe.contentWindow
1、iframe.contentWindow(主页面调用iframe) 此处的iframe是从document取得的,即作作为document的子对象出现,虽然是文档(document)对象,但由于它是独立的页面,因而拥有自己的事件,拥有自己的窗口对象(contentWindow);contentWindow属性是指指定的frame或者iframe所在的window对象。 在IE中iframe原创 2017-09-15 12:06:48 · 4636 阅读 · 0 评论 -
JavaScript:执行环境及作用域链
(1)、执行环境 定义了变量或函数有权访问的其它数据,决定了它们的各自行为。每个执行环境都有一个与之关联的变量对象(variable object, VO),执行环境中定义的所有变量和函数都会保存在这个对象中,解析器在处理数据的时候就会访问这个内部对象。 全局执行环境是最外层的一个执行环境,在web浏览器中全局执行环境是window对象,因此所有全局变量和函数都是作为window对象的原创 2016-05-31 16:00:30 · 897 阅读 · 0 评论 -
JavaScript设计模式与开发实践
最近在研读了腾讯AlloyTeam前端团队,高级工程师曾探编写的《JavaScript设计模式与开发实践》,所有设计模式的实现都遵循一条原则,即“找出程序中变化的地方,并将变化封装起来”。一个程序的设计总是可以分为可变的部分和不变的部分。当我们找出可变的部分,并且把这部分封装起来,那么剩下的就是不变和稳定的部分。 JavaScript没有提供传统面向对象语言中的类式继承,而是通过原型委托...原创 2018-04-26 11:31:46 · 2206 阅读 · 0 评论 -
JavaScript基于原型的面向对象系统
我们知道在JavaScript中一切(引用类型)都是对象,对象是属性的集合,但是JavaScript中的对象到底是怎么创建的呢?在Java中是通过实例化类来创建一个对象,对象总是从类中的创建而来;在JavaScript中没有类(ES6中的class只是一个语法糖)的概念,那么JavaScript中的对象呢?JavaScript是基于原型的面向对象语言,在原型编程思想中,类并不是必需的,对象未必...原创 2018-03-20 21:40:54 · 775 阅读 · 0 评论 -
js函数柯里化(function currying)
currying又称部分求值。一个currying的函数首先会接受一些参数,接受了这些参数之后,该函数不会立即求值,而是继续返回另外一个函数,刚才传入的参数在函数形成的闭包中被保存起来。待到函数被真正求值的时候,之前传入的所有参数都会被一次性用于求值。 currying简单的说就是:只传递给函数一部分参数来调用它,让它返回一个函数去处理剩下的参数。你可以一次性地调用 curry 函数,也...原创 2018-03-20 16:59:30 · 6001 阅读 · 0 评论 -
JavaScript:原型链、继承
1、理解原型对象我们先使用构造函数创建一个对象:function Person() {}var person = new Person();person.name = 'Kevin';console.log(person.name) // Kevin在这个例子中,Person 就是一个构造函数,我们使用 new 创建了一个实例对象 person。 1).只要创建了一个新函数,就会为该函...原创 2016-06-01 12:04:20 · 722 阅读 · 0 评论 -
Array.prototype.slice.apply(arguments)和[].shift.call(arguments)的使用方法
一、实例例1、arguments在JavaScript语法中是函数特有的一个对象属性(Arguments对象),用来引用调用该函数时传递的实际参数。function test(){ //将参数转为一个数组 var args = Array.prototype.slice.apply(arguments); alert(args); } arguments是一个类数组对象...原创 2016-07-05 15:09:06 · 8473 阅读 · 0 评论 -
JavaScript实现call、apply和bind
每个函数都包含两个非继承而来的方法:apply()和call()。这两个方法的用途是在特定的作用域中调用函数,实际上等于设置函数体内this对象的值。详细内容查看JavaScript中call()、apply()和 bind()方法,1、call方法的实现下面看一个使用call方法的实例:function add(c, d){ return this.a + this.b + c + d原创 2017-12-13 17:29:52 · 1844 阅读 · 0 评论 -
JavaScript中call()、apply()和 bind()方法
每个函数都包含两个非继承而来的方法:apply()和call()。这两个方法的用途是在特定的作用域中调用函数,实际上等于设置函数体内this对象的值。首先,apply()方法接受两个参数:一个是在其中运行函数的作用域,另一个是参数数组。其中,第二个参数可以是Array的实例,也可以是arguments对象。例如: function sum(num1,num2) {原创 2016-08-04 20:28:03 · 741 阅读 · 0 评论 -
VScode搭建TypeScript开发环境
TypeScript 是 JavaScript 的类型的超集,它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上,TypeScript 是开源的。为什么选择 TypeScript以及TypeScript优缺点阅读TypeScript入门教程。利用VScode搭建TypeScript开发环境前提原创 2017-10-17 16:17:39 · 13302 阅读 · 1 评论 -
JavaScript作用域、上下文、执行期上下文、作用域链、闭包
作用域、上下文、执行期上下文、作用域链、闭包是JavaScript中关键概念之一,是JavaScript难点之一,在应聘面试时必定会问到的问题,作为前端工程师必须理解和掌握。相信大家已经阅读了很多关于这方面的文章,但是看完之后似懂非懂。在我阅读了《JavaScript高级程序设计》、《高性能的JavaScript》这两本书后,我才完全理解这些概念。一、作用域(Scope) 作...原创 2017-11-07 00:50:14 · 8254 阅读 · 5 评论 -
JavaScript:闭包
一、充电1、一切(引用类型)都是对象,对象是属性的集合。2、函数是一种对象,但是函数却不像数组一样——你可以说数组是对象的一种,因为数组就像是对象的一个子集一样。但是函数与对象之间,却不仅仅是一种包含和被包含的关系,函数和对象之间的关系比较复杂,甚至有一点鸡生蛋蛋生鸡的逻辑。 function Fn() {this.name = '王福朋';this.year = 1988;原创 2016-06-02 16:31:10 · 5435 阅读 · 0 评论 -
JavaScript中的this
请看下面的代码,最后alert出来的是什么呢? var name = "Bob"; var nameObj ={ name : "Tom", showName : function(){ alert(this.name); }, waitShowName : function(){原创 2016-07-26 08:57:02 · 420 阅读 · 0 评论 -
前端常见跨域解决方案
什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。广义的跨域: 1.) 资源跳转: A链接、重定向、表单提交 2.) 资源嵌入: 、什么是同源策略? 同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CS原创 2017-09-15 13:46:21 · 1012 阅读 · 0 评论 -
JavaScript:表单基础知识
1、表单引用var form=document.getElementById("from1");//取得id为from1的表单引用var firstForm=document.forms[0];//取得页面中的第一个表单var myForm=document.forms["form2"];//取得页面中名称为“form2”的表单2、提交表单var form=document.g原创 2016-06-05 16:55:00 · 791 阅读 · 0 评论 -
JavaScript:事件类型
我们把事件分为了三大类,分别是一般事件、表单事件和页面事件。当前我们可以再做细分:1、UI事件:如load、unload、error、resize、scroll、select、DOMActive,是用户与页面上的元素交互时触发的。(1)、load事件事件类型var image=document.getElementById("myImage");EventUti原创 2016-06-04 17:56:09 · 1054 阅读 · 0 评论 -
JavaScript:CORS(跨源资源共享)
XHR的一个主要约束是同源策略,即:相同域、相同端口、相同协议,可以通过跨域资源共享CORS(Cross-Origin Resourse Sharing)实现跨域资源共享。其基本思想是通过自定义HTTP头让浏览器与服务器沟通,从而决定请求或响应是应该成功还是失败。发送get/post请求时,给它添加一个额外的Origin头部,其中包含请求页面的源信息(协议,域名和端口),以便服务器根据这个头部信息原创 2016-06-07 12:29:51 · 2723 阅读 · 0 评论 -
JavaScript:void(0)
1、javascript:void(0) 含义 我们经常会使用到 javascript:void(0) 这样的代码,那么在 JavaScript 中 javascript:void(0) 代表的是什么意思呢?javascript:void(0)中最关键的是 void关键字, void是 JavaScript中非常重要的关键字,该操作符指定要计算一个表达式但是不返回值。语法原创 2016-06-07 18:18:25 · 879 阅读 · 0 评论 -
JavaScript: 严格模式(use strict)
1、使用 "use strict" 指令 "use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。它不是一条语句,但是是一个字面量表达式,在 JavaScript 旧版本中会被忽略。"use strict" 的目的是指定代码在严格条件下执行。严格模式下你不能使用未声明的变量。支持严格模式的浏览器:Internet Explorer 10原创 2016-06-07 16:56:13 · 1237 阅读 · 0 评论 -
js动态加载脚本
首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package.js,打开后在里面写一个方法functionOne,很简单,代码如下:function functionOne(){ alert("成功加载");} 后面的html文件都创建在同一个目录下。方法一:直接document.write 在同一个文件夹下面创建一个function1.html,代码如转载 2016-07-26 08:53:37 · 1154 阅读 · 0 评论 -
DOMContentLoaded事件
过去,当一个页面完成加载时,初始化脚本的方法是使用load事件,但这个类函数的缺点是仅在所有资源都完全加载后才被触发,这有时会导致比较严重的延迟,开发人员随后创建了一种自定义事件,domready,它在DOM加载之后及资源加载之前被触发。domready事件迅速被众多JavaScript库所采用,它开始在本地浏览器中以DOMContentLoaded的形式被使用;此外,它目前已在HTML5中被标准原创 2016-07-14 15:10:22 · 1570 阅读 · 0 评论 -
JavaScript:样式
要确定浏览器是否支持DOM2级定义的css能力,使用下面的代码:var supportsDOM2CSS=document.implementation.hasFeature("CSS","2.0");var supportsDOM2CSS2=document.implementation.hasFeature("CSS2","2.0");alert(supportsDOM2CSS);原创 2016-06-03 19:39:42 · 673 阅读 · 0 评论 -
JavaScript:EventUtil.js
// JavaScript Documentvar EventUtil={ //添加事件 addHandler:function(element,type,handler){ if(element.addEventListener){//DOM2级 element.addEventListener(type,handler,false); }else if原创 2016-06-06 16:48:00 · 1664 阅读 · 0 评论 -
JavaScript:Uncaught TypeError Cannot read property 'id' of null。
用JavaScript操作DOM时出现如下错误:Uncaught TypeError Cannot read property 'id' of null。Uncaught TypeError: Cannot read property 'className' of null。例如:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...原创 2016-06-03 09:44:59 · 38375 阅读 · 2 评论 -
JavaScript:MD5加密
MD5加密html演示程序:<!--function my_do()//通过js对数据进行加密 { var dqz_in=document.my_form1.my_in_1.value; document.my_form1.my_out_1.value=hexMD5(dqz_in); document.my_form1.my_out_2.value=hexMD5w(dqz原创 2016-06-02 21:38:17 · 3954 阅读 · 0 评论 -
JavaScript:数据类型
一、数据类型 ECMAScript中有五种简单的数据类型(也称为基本数据类型):Undefined、Null、Boolean、Number、String。还有一种复杂数据类型—Object,Object本质上是由一组无序的名值对组成的。1、typeof 鉴于ECMAScript是松散类型的,因此需要有一种手段来检测给定变量的数据—typeof就是负责提供这原创 2016-05-31 15:21:36 · 3896 阅读 · 0 评论 -
JavaScript:变量
ECMAScript 变量可能包含两种不同的数据类型的值,基本类型值和引用类型值。基本类型值指的是简单的数据段,而引用类型值指由多个值构成的对象。 在将一个值赋给变量时,解析器必须确定这个值是基本类型值还是引用类型值。常用的5种基本数据类型:Undefined、Null、Boolean、Number和String。它们都是按值访问的。因为可以操作保存在变量中的实际值。 引用类型的原创 2016-05-31 15:58:11 · 619 阅读 · 0 评论