zjw_python的博客

该篇笔记仅记录与Javascript相比新增的概念和功能1.基础类型// 布尔值let a: boolean = false;// 数字let b: number = 123; // 字符串let c: string = "zjw";// 数组let d: number[] = [1,2,3];let d: Array<number> = [1,2,3];// 元组，元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同let e: [string,

参照Promise/A+规范手写了一个简化版的promiseclass MyPromise { constructor(fn) { if (typeof fn !== 'function') { throw new Error('参数必须为函数'); } this._state = 'Pending'; this._value = null; this._reason = null; this.fulfillCallbacks = [];

1 网络技术概览1.1 延迟和带宽对所有网络通信都具有决定性影响的两个方面是延迟和带宽总延迟包括传播延迟（与传输介质和传输距离有关）、传输延迟（消息中所有比特转移到链路中需要的时间，与消息的长度和链路速率有关）、处理延迟（处理分组所需要的时间）和排队延迟（分组排队等待处理的时间）1.2 TCPTCP三次握手过程：SYN 客户端选择一个随机序列号x，并发送一个SYN分组，其中还...

1. 加载和执行尽量将所有的<script>标签放在</body>标签之前，确保脚本执行前页面已经完成了渲染，避免脚本的下载阻塞其他资源（例如图片）的下载。合并脚本，减少页面中的<script>标签使用<script>标签的defer和async属性（两者的区别见这里）通过Javascript动态创建<script>标签插入文档...

表单基础在JS中，表单对应的是HTMLForm-Element类型，其继承自HTMLElement，具有以下独有的属性和方法action：接受请求的URLmethod：发送HTTP请求的类型enctype：编码类型reset()：重置表单submit()：提交表单通过document.forms可以取得页面中所有表单，在这个表单集合中，可通过索引号访问var for...

高级函数类型检测在任何值上调用Object的toString()方法都会返回一个表示该对象原生构造函数名的字符串，因此可以使用该方法检测对象类型，弥补type of以及 instanceof的一些问题。Object.prototype.toString.call(value) == "[object Array]"; //检测值的类型是否为数组Object.prototy...

XMLHttpRequest对象创建XHR对象（IE7+，其他浏览器）var xhr = new XMLHttpRequest();XHR用法 启动一个请求，使用open()方法，接受3个参数，要发送的请求类型，请求URL（相对或绝对路径）和表示是否异步的布尔值xhr.open("get","example.php",false);发送请求，使用send()方法，接受...

自定义事件事件是一种叫做观察者的设计模式，观察者模式由两类对象组成：主体和观察者。主体负责发布事件，同时观察者知道通过订阅这些事件来观察主体。主体可以独自存在并正常运作即使观察者不存在。在DOM结构中，DOM元素便是主体，事件处理代码便是观察者 自定义事件背后的概念是创建一个管理事件的对象，让其他对象监听那些事件。function EventTarget(){ //用于管理事...

编写可维护性的代码：可理解性：其他人可以接手代码，而无需解释直观性：代码一看就明白，无论操作过程多么复杂可适应性：代码以一种数据上变化不要求完全重写的方法撰写可扩展性：在未来可对核心功能进行扩展可读性：每个函数和方法都应该包含一个注释，描述其目的和用于完成任务所使用的算法大段代码需要在前面放置一个描述任务的注释复杂的算法，需要在注释中说明思路Hack，需要注释说明...

CometAjax是一种从页面向服务器请求数据的技术，而Comet是一种服务器向页面推送数据的技术。有两种实现Comet的方式：长轮询和HTTP流短轮询指浏览器向服务器发送一个请求，询问是否有数据更新，服务里立刻返回响应。一段时间后浏览器又发起一个到服务器的新请求。长轮询指浏览器向服务器发送一个请求，服务一直保持连接打开，直到有数据可发送，发送完数据后，浏览器关闭连接，随即又发起一个到...

离线检测HTML5的navigator.onLine属性可以检测设备的网络状态，值为true表示能上网，为false表示离线if (navigator.onLine){ //正常工作} else { //离线任务}除此之外HTML5还定义了两个事件online和offline，当网络从离线变为在线或从在线变为离线时分别触发这两个事件window.addEv...

　　首先必须要说的是，this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象（这句话有些问题，后面会解释为什么会有问题，虽然网上大部分的文章都是这样说的，虽然在很多情况下那样去理解不会出什么问题，但是实际上那样理解是不准确的，所以在你理解this的时候会有种琢磨不透的感觉），那么接下来我会深入的探讨这个问题。　　为什...

requestAnimationFrame()为解决setInterval()和setTimeout()执行动画事件不精确的问题，HTML5 创造了该方法来告诉浏览器您希望执行动画操作并请求浏览器在下一次重绘之前调用指定的函数来更新动画。回调的次数通常是每秒60次，当运行在后台标签页或者隐藏的&amp;amp;amp;amp;amp;lt;iframe&amp;amp;amp;amp;amp;gt; 里时，requestAnimationFrame() 会暂停调用以提升性...

网上有大量关于使用原生js编写轮播图的例子，不得不说，他们的文章很棒，但是我发现一个缺点，就是他们的轮播图组件太过于完整，添加了很多按钮功能，代码量较大。掩盖了轮播图的最基本也是最重要的实现原理，很容易让新手摸不着头脑。这篇文章的目的就是想用最少的代码，来讲解轮播图的实现原理，实现最基本的功能。等你学会了轮播图的实现后，至于之后怎么丰富轮播图，就是小菜一碟了效果思路将图...

JSON是一种数据格式，可以表示以下三种类型的值简单值：字符串、数值、布尔值和null（不支持undefined）对象：对象中的键值可以是简单值，也可以是对象等复杂类型值数组：数组的元素值可以是任意类型JSON字符串必须使用双引号JSON对象中的属性名，必须加上双引号JSON中没有变量，因此对象和数组中不能存在变量序列化和解析 使用JSON对象的stringify()...

IE、Firefox、Safari、Chrome和Opera等主流浏览器，都具有某种向用户报告JavaScript错误的机制。默认情况下，所有浏览器都会隐藏此类信息，需要开发人员启用报告功能try-catch语句基本用法try{ // 可能会发生错误的代码} catch（error）{ // 在错误发生时怎么处理}当try块中的任何代码发生了错误，就会...

HTML5的Canvas元素提供了丰富的绘图功能，能够使我们制作出许多精美的动画。本次将运用canvas绘制心型线和玫瑰线。1.心型线和玫瑰线绘制这两种曲线，首先我们分别选用两个参数方程（心型线和玫瑰线的参数方程不同，其形态特征也不一样，你可以根据你的需要选择合适的参数方程） 桃心型线的参数方程： x = 16 （sinθ）^3 y = 13 cosθ- 5 cos 2θ - 2 cos 3θ

在网页中经常需要上传图片并进行预览，大多数情况下是通过ajax将图片上传到后端，然后反馈上传状态和结果给前端进行预览。这里我们介绍三种快速的上传图片预览方法，不需要后端参与也可快速进行图片预览。 FileReader文档 Window.URL文档1.获取File对象两种预览方法均需要先获取控件的file对象var fileinput = Document.getElemen

函数声明提升：执行代码之前会先读取函数声明（但是使用函数表达式命名定义函数时，使用前必须赋值）sayhi(); //错误，函数还未赋值var sayhi = function(){ alert("hi");};闭包是指有权访问另一个函数作用域中的变量的函数当创建函数时，会创建一个预先包含全局变量对象的作用域链。作用域链本质上是一个指向变量对象的指针列表，...

window对象BOM：浏览器对象模型，其核心对象是window，表示浏览器的一个实例。其作为Global对象，在全局作用域中声明的变量和函数都会变成window对象的属性和方法每个框架都具有自己的 window 对象，并且保存在 frames 集合中，且每个window对象都有一个 name 属性，其中包含着框架的名字。 top 对象始终指向最外层的框架(浏览器窗口)，而 parent ...

属性类型对象属性包括两种类型：数据属性和访问器属性数据属性 包含一个数据值的位置，在这个位置可以读取和写入值。其包括4个特性：configurable（能否删除或修改），enumerable（能否通过for-in语句返回属性），writeable（能否修改属性的值），value（属性值，默认为undefined）var person = { name: &quot;zjw&quot;};...

原型链使某个原型对象成为另一个类型的实例，该原型对象将包含一个指向另一个原型的指针，如此层层递进，就构成了实例与原型的链条function SuperType(){ this.property = true;}SuperType.prototype.getSuperValue = function(){ return this.property;};func...

DOM：文档对象模型，针对HTML和XML文档的一个API，DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构Node类型所有的节点类型都继承自Node类型，每个节点都有个nodeType属性，表明节点的类型。 重要的类型包括：Node.ELEMENT_NODE (1) 元素节点Node.ATTRIBUTE_NODE (2) 属性节点Node.TEXT_N...

选择符APIquerySelector() 接受一个CSS选择符，返回与该模式匹配的第一个元素，没有找到返回nullvar mydiv = document.querySelector(&quot;#mydiv&quot;);querySelectorAll() 与querySelector()类似，不过其返回所有匹配的元素，即一个NodeListvar selecteds = docum...

样式style对象任何支持style特性的HTML元素在Javascript中都有个style属性。其包含着通过HTML的style特性指定的所有样式信息（不包括外部样式表）div.style.color = &quot;red&quot;; div.style.backgroundcolor = &quot;white&quot;;div.style.width = &quot;100px&quot;;除此之外，style对象..

基本用法要使用&lt;canvas&gt;元素，必须先设置width和height属性，指定画布大小。注意width和height是不带单位的&lt;canvas id="drawing" width="200" height="200"&gt;drawing&lt;/canvas&gt;要在这块画布上绘图，需要使用getContext()方法取得绘图上下文,传入2d，就得到2d绘..

跨文档消息传递跨文档消息传递（XDM）是指在来自不同域的页面之间传递消息。例如由当前页面向当前页面的&lt;iframe&gt;元素，或者当前页面弹出的窗口发送消息 核心方法是postMessage()，接受两个参数，一条字符串消息，以及表示接受方来自于哪个域的字符串，如果对方窗口不是这个域名，信息不会发送出去。此方法的调用对象不是当前页面的窗口对象，而是目标框架的窗口对象var i...

事件流：从页面中接受事件的顺序事件冒泡（IE）：事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接受，然后逐级向上传播到较不具体的文档节点（文档）事件捕获：恰恰与事件冒泡相反，不太具体的节点应该更早接受到事件，而最具体的节点应该最后接受到事件（较少人使用）。DOM2事件规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段事件处理程序：响应某个事件的函数，以on开...

创建和解析XML文档DOM2级创建XML文档var xmldom = document.implementation.createDocument(namespaceuri,root,doctype);// 其中namespace为命名空间，很少用到。// root为根元素的标签名// doctype为文档内型，也很少用到示例var xmldom = document...

1.插件介绍JS的插件丰富多样，今天试用了一款叫做Quicksand的插件，发现其使用方法虽然简单，但展现出来的洗牌特效却让人眼前一亮。下面就简要介绍一下这个插件的使用方法。 此插件的官网地址：Quicksand（此插件依赖于JQuery，因此在使用该插件时，务必在其之前引入JQuery插件）2.使用方法该插件的调用方法非常简洁，仅一句代码：$('#source').quicksand( $('#