JavaScript
文章平均质量分 88
xxxspade
Always Coding
展开
-
Typescript类型实践的void与symbol
void in JavaScriptlet i = void 2; // i === undefinedwhy 为什么需要void?因为早期js里,人们可以重写undefined,然后赋予真正的值给它,而void总是返回真正的undefined。void在JS里是一个类似单目运算符的存在。void提供了一种立即执行函数的方式,可以不需要借助函数表达式。void function(...原创 2019-11-02 23:23:13 · 1303 阅读 · 0 评论 -
立即执行函数IIFE
到底什么是IIFE?比较以下两种方式var foo=function(){ /*code*/}foo();另一种错误的方法:function(){}(); //Unexpected token报错原因JS代码解释的时候,遇到function关键字会默认把它当做一个函数声明,而不是函数表达式,如果没有把它显示表达成函数表达式就会报错。 没有函数名,所以会报错原创 2017-02-24 15:24:52 · 583 阅读 · 0 评论 -
跨域解决方案JSONP
什么是跨域老生常谈的问题了。下面列出一个表格: URL 说明 是否跨域 http://www.a.com/a.js http://www.a.com/b.js 同一个域名 否 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一个域名,不同文件夹 否 http://www.a.com:8080/a.j原创 2017-02-24 17:27:51 · 3347 阅读 · 0 评论 -
伪类和伪元素
简介 熟悉前端的人都会听过css的伪类与伪元素,然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发,区分这两者的区别,并且列出大部分伪类与伪元素的具体用法,即使你有用过伪类与伪元素,但里面总有一两个你没见过的吧。原创 2016-12-29 14:59:17 · 418 阅读 · 0 评论 -
跨域解决方案和实践
document.domian + iframe跨子域这种方法对于主域相同而子域不同的例子,可以通过设置document.domain的办法解决。 具体做法: 可以在http://www.a.com/a.html和http://script.a.com/b.html两个文件中分别加上document.domain = ‘a.com’;然后通过a.html文件中创建一个iframe,去控制ifram原创 2017-02-25 14:47:27 · 317 阅读 · 0 评论 -
跨域post请求
同源策略定义一段脚本 只读读取来自同一来源的窗口和文档的属性,这里同一来源指的是主机名、协议和端口号的组合。注意当 协议 or 子域名 or 主域名 or 端口号 任意一个不相同时,都算作不同域!!!!!对于网络API,同源策略在发送和接收信息之间进行区分。概括地说,允许一个来源向另一个来源发送信息,但是一个来源不允许从另一个来源接收信息。禁止接收信息旨在防止恶意网站从其他网站读取机密信息,但也防原创 2017-02-25 16:22:34 · 2171 阅读 · 0 评论 -
CORS正确使用姿势
CORS用法首先要知道的是对于CORS,我们要用到XHR2,然后IE的话是XDomainRequest Object,它从IE10开始才是XHR2. IE 8 9都是XDomainRequest首先需要写一个处理兼容性的函数,确定是哪个浏览器上运行function createCORSRequest(method,url){ var xhr=new XMLHttpRequest();原创 2017-02-25 20:36:46 · 10333 阅读 · 0 评论 -
JavaScript变量对象、执行环境和作用域链
首先不管是变量对象、执行环境或作用域链都是内部对象你无法直接用js访问。 JS两种变量类型的访问和内存问题基本数据类型是按值访问的引用类型的值是保存在内存中的对象。JS不允许直接访问内存中的位置,也就是说不能直接操作对象的内存空间。 操作对象的时候实质是操作对象的引用而不是实际的对象。 严谨地说: var a={v:2,c:3};var b=a //这种情况操作的是引用a.x=23; //这种原创 2017-03-09 14:42:03 · 574 阅读 · 0 评论 -
闭包Closure
理解闭包的最重要前提理解作用域链,如何创建作用域链和作用域链中有什么细节。闭包示例function createComparisonFunction(propertyName){ return function(object1,object2){ var value1=object1[propertyName]; var value2=object2[prop原创 2017-03-09 12:24:48 · 429 阅读 · 0 评论 -
基于Canvas的JS游戏引擎(一)
介绍这是一个非常精简的游戏引擎,它仅仅包含了一般游戏所必须拥有的功能。游戏引擎主要功能如下 1. 游戏循环 2. 绘制精灵 3. 基于时间运动 4. 碰撞检测 5. 帧速率更新 4. 暂停游戏 5. 事件处理 6. 图片加载动画循环 /游戏循环其实游戏循环就是依赖动画循环实现的。 window.requestAnimationFrame() 传统的是window原创 2017-03-14 01:41:05 · 5877 阅读 · 0 评论 -
Ajax XHR2详解
AJAX原生ajax的四个过程: 实例化,open,send,onreadystatechange,然后是req,readyState和status。 那么问题是通过哪个属性得到data? jquery里是success回调里面的形参。 responseText和responseXML,后者是XML解析了的。Ajax的定义Ajax是一种技术方案,不是一种新技术。 它依赖浏览器提供的XMLHt原创 2017-03-13 14:59:54 · 8257 阅读 · 0 评论 -
JavaScript垃圾回收机制
垃圾回收机制JS具有垃圾回收机制, 执行环境会负责管理代码执行过程中使用的内存。 基本原理: 隔一段时间或者按照固定的时间间隔,找出那些不再继续使用的变量,然后释放其占用的内存。 分析函数局部变量 局部变量只在执行函数的过程中存在,这个过程中会为局部变量在栈内存上分配相应的空间,以便存储它们的值。 然后在函数中使用这些变量,直至函数执行结束。 结束后这些局部变量就没用了,因此可以释放它们的内原创 2017-03-11 20:16:44 · 359 阅读 · 0 评论 -
解决webpack打包文件过大的问题
最近做了一个H5小游戏,用React实现UI,基于canvas实现动画的逻辑。 用webpack -p 打包发现输出的index.bundle.js文件体积非常大。以下是我的webpack的配置文件:var webpack=require('webpack');var path=require('path'), node_modules=path.resolve(__dirname,'n原创 2017-03-13 19:34:52 · 10292 阅读 · 1 评论 -
jQuery插件扩展
jQuery写插件核心方法核心方法两个: .extend(object)为jQuery添加一个静态方法.extend(object) 为jQuery添加一个静态方法 .fn.extend(object) 为jQuery实例添加一个方法$.extend({ fun1:function(){ }});//Usage$.fun1(); $.fn.extend({ fun原创 2017-02-24 14:20:55 · 456 阅读 · 0 评论 -
JS数组去重
一 利用 数组indexOf方法维护一个暂存数组,将数据存进去function unique(arr){ vartemp=[]; for(var i=0;i<arr.length;i++){ if(temp.indexOf(arr[i])===-1){ temp.push(arr[i]); } } return原创 2017-03-03 13:22:55 · 276 阅读 · 0 评论 -
jQuery 源码解析(一)
Talk about jQueryjQuery优势更方便处理HTML events 动画效果 AJAX 成熟的插件。 使得用户HTML页面保持代码和html内容分离。 不用再在html里面插入一堆js调用命令,只需定义id。 兼容CSS3 兼容各种浏览器,这是jQuery为我们做的事情。兼容性:IE 6+ FF 1.5+ Safari 2.0+ Opera 9.0+ CSS3原创 2016-12-01 14:52:24 · 305 阅读 · 0 评论 -
LazyLoad(II) 实现及相关原理
0 . 文档和视口元素的X和Y坐标可以相对于文档的左上角或相对于其中显示文档的视口的左上角。文档坐标 和 大小:文档坐标在滚动的时候是不会改变的,它是X和Y坐标的绝对值,是包括了不可见的内容。文档的大小:原创 2016-12-21 11:08:21 · 465 阅读 · 0 评论 -
Storage事件无法触发解决
Web Storage 项目实践这段代码是从一个项目在摘出来的,主要实现了将一个图片利用canvas的toDataURL这个API转成BASE64编码的字符串(图片要先用drawImage画到canvas上),然后存储到localStorage中。 因为图片数据量大,经常加载会耗费时间,所以可以利用客户端存储缓存起来。 这几个图片主要是图标ICON。/*Canvas transfer img to原创 2017-02-20 00:15:19 · 6436 阅读 · 1 评论 -
DOMReady详解
0. 什么是DOMReady?一个被封装的方法,用以当浏览器生成DOM树结构后就开始解析某些js代码。为什么需要DOMReady?在初学js时,我们都知道使用window.onload用以保证页面的所有资源都加载完毕后才执行当中的js代码,否则当js在title中定义或则引用时会报错:不能为空节点添加某某属性。是的,onload的确是一个简单易用的方法,但随着我们学习的深入,当我们原创 2017-02-21 15:01:39 · 6864 阅读 · 0 评论 -
document.write的问题
简介将输出流写入到网页的能力就是document.write,还有open() close() writeln()。方法都是接受一个字符串参数,即要写入到输出流中的文本。wirte原样写入,writeln在字符串末尾添加换行符。页面被加载过程中,可以使用这两个方法向页面中动态添加内容。用法...<p><script>document.write("<strong>"+(new Date()).原创 2017-02-21 15:55:11 · 2988 阅读 · 0 评论 -
Web Storage
客户端存储历史最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了。优势就是大家都支持,而且支持得还蛮好。很早以前那些禁用cookies的用户也都慢慢的不存在了,就好像以前禁用javascript的用户不存在了一样。userData是IE的东西。现在用的最多的是Flash吧,空间是Cookie的25倍,基本够用。再之后Go原创 2017-02-20 00:04:05 · 401 阅读 · 0 评论 -
前端模块化
简介JS模块化主要这几种AMD CMD CommonJS ES6 Module跟Commjs非常像。为什么需要模块化?最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了。后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载。下面的网页代码,相信很多人都见过。<script src="1.js"></script><script src="2.js">原创 2017-02-28 15:45:28 · 446 阅读 · 0 评论 -
JavaScript异步初探
异步编程的核心程序中现在运行的部分和将来运行的部分之间的关系。异步概念同步的Ajaxvar data=ajax(url);console.log(data)任何时候都不应该使用同步的方式,因为它会锁定浏览器的UI线程将来执行的块 任何时候只要把一段代码包装成一个函数,并指定它在响应某个事件时执行,你就创建了一个将来执行的块,这就是异步。事件循环JS引擎运行在宿主环境中,比如浏览器,比如OS(NO原创 2017-03-02 02:36:59 · 280 阅读 · 0 评论 -
异步解决方案Promise
回调地狱callback hell最大的问题不是因为缩进。它引起的问题比缩进要大得多。根本它真正的问题是剥夺了程序员使用return和throw等捕捉错误和返回值的能力。 程序的执行流程是基于一个函数在执行过程中调用另一个函数时候会产生函数调用栈,而回调函数不是运行在栈上的,因此不能使用return和throw。举例function A(){ setTimeout(req,5000);原创 2017-03-02 22:34:16 · 1289 阅读 · 0 评论 -
JavaScript创建对象7种方式
0. Object.create 和对象字面量先说说创建对象的一般方法,最简单就是对象字面量。 var book={ “titile”:”JS”, “sub-titile”:”DG”, “author”:{ firstname:”David”, lastname:”xxx” } };这种方法对于属性有一定原创 2017-02-23 15:34:22 · 372 阅读 · 0 评论 -
彻底理解JS原型以及构造函数
什么时候创建了原型对象我们创建的每一个函数,不光是构造函数,都会有一个prototype属性,当我们创建了一个函数/声明了一个函数,它就会根据一组特定的规则为该函数创建一个prototype属性指向的对象。原型对象原型对象就是我们创建了一个新函数的时候,自动创建的一个对象,当我们仅仅是创建了函数的时候,这个原型对象是这样的:原型对象是会自动获得一个constructor属性,这个属性指向我们创建的函原创 2017-02-23 22:47:37 · 2217 阅读 · 0 评论 -
彻底理解继承
简单回顾原型链原型链 我们每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针constructor,而实例都包含一个指向原型对象的内部指针proto。如果我们让原型对象等于另一个类型的实例,这时原型对象将包含指向另一个原型的指针,另一个原型中也包含指向另一个构造函数的指针。 假如另一个原型又是另一个类型的实例,那么上述关系成立,层层递进,构成了实例与原型链。举例fu原创 2017-02-24 02:26:42 · 311 阅读 · 0 评论 -
WebUploader二次封装
spadesUploader对WebUploader的二次封装,其实是源于之前在一家公司实习的时候发现,做Java后台的上一个人对于后台管理系统的开发,前端基本是能用插件就用插件,能用库就用库,非常的暴力。以致于一开始接手的时候,看了一大堆库的用法。 当然像jQuery,Bootstrap都是必备的。然后就是插件如Boostrap validator jQuery的一堆plugin。后面接原创 2016-11-30 15:41:24 · 4310 阅读 · 0 评论