1. 构造函数 canvas小球碰撞
1 | <!DOCTYPE html> |
2. 类 canvas小球碰撞
1 | <!DOCTYPE html> |
有上可以看出,用类写面向对象的方法,思路更清晰。当然,在考虑兼容的情况下,还是使用构造函数
1 | <!DOCTYPE html> |
1 | <!DOCTYPE html> |
有上可以看出,用类写面向对象的方法,思路更清晰。当然,在考虑兼容的情况下,还是使用构造函数
html代码
1 | <body> |
JS代码
1 | <script type="text/javascript"> |
解释:
var fileRead = new FileReader();
HTML5 定义了 FileReader 作为文件API的重要成员用于读取文件,根据W3C的定义FileReader接口提供了读取文件的方法和包含读取结果的事件模型
new FileReader的实例有4个方法
readAsText:该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8。这个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件中的内容。
readAsBinaryString:该方法将文件读取为二进制字符串,通常我们将它传送到后端,后端可以通过这段字符串存储文件。
readAsDataURL:这是例子程序中用到的方法,该方法将文件读取为一段以 data: 开头的字符串,这段字符串的实质就是 Data URL,Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。
fileRead.onload = function(e)中的e
如下图所示,e是一个对象,e.target.result就是我们想获取的上传图片转化为的base64
var img = new Image();
最后我们创建一个img图片,将img的src设置成我们获取到的base64
1 | <body> |
解释:
bezierCurveTo(cpx,cpy,cpx2,cpx2,dx,dy);创建一条表示贝塞尔曲线的路径.
该函数接受六个参数,分别代表三个点.
(cpx,cpy),(cpx2,cpx2)代表控制点,决定曲线的形状
(dx,dy)代表终点
是 Canvas 2D API 用于检测某点是否在路径的描边线上的方法。返回值是一个布尔值,当这个点在路径的描边线上,则返回true,否则返回false。
首先强调isPointInPath(x,y)方法是针对路径的,比如canvas中的rect、arc方法都可以用,但是fillRect不可以用,因为它不是路径;而且仅对当前的路径有效,而且如果当前路径有多个子路径(currentPath可以有多个subPath:比如进行了rect()之后,再进行arc(),最后关闭路径,进行stroke,那么rect()和arc()所绘制的就是当前路径的两个子路径),只对第一个子路径有效
所以要在每次判断之前要创建要移动的元素
1 | <script type="text/javascript"> |
利用点击该点的位置到圆心的距离与半径相比,如果大于半径,则表明点击的位置不在小球内部,反之,则在小球内部
1 | <script type="text/javascript"> |
判断当刮到一半的时候,自动显示全部内容
我们使用getImageData()能够获取指定区域的像素值ImageData
ImageData中3个属性:width,height和data
width和height表示访问像素区域大小
data是一个包含访问区域所有像素信息的CanvasPixeArray
1 | <script type="text/javascript"> |
1 | <script type="text/javascript"> |
context.arc(200,100,100,0,Math.PI,false);
1 | //画圆 |
1 | //矩形 |
1 | context.beginPath(); |
1 | // bold 可以省略 Arial 不可以省略 |
先写一个父级的构造函数
1 | function Parent(name){ |
接着子集的构造方法
1 | function Son(name){ |
子集想要继承父级里面的内容就要在里面加上
1 | function Son(name){ |
这样就可以继承父级里面的内容
1 | var newSon = new Son("rrrr"); |
这样写看似没什么问题,但是当我们在子集里面写上与父级相同的属性或者方法呢?
1 | function Son(name){ |
上述代码表明,子集继承父级,在自身重写该方法的时候以自身为准
回到上述继承 构造继承
1 | function Parent(name){ |
由上述可知,子集继承父级,只继承父级本身的属性和方法,不会继承父级原型上的方法,因为构造继承的核心就是使用父类的构造函数来增强子类的实例,等于是复制父类的实例属性给子类(没用到原型)
特点:
缺点:
这就可以利用到 实例继承
1 | function Son(name){ |
实例继承的核心。为父类实例添加新特性,作为子类实例返回
特点:
缺点:
再有 组合继承
1 | function Son(name){ |
组合继承的核心是通过父类构造,继承父类的属性并保留传参的优点,然后通过降幅及实例子类原型,实现函数复用
特点:
缺点:
最后寄生组合继承,通过创建一个空的构造函数。
1 | function Son(name){ |
typeof是一个一元运算,放在一个运算数之前,运算数可以是任意类型
它返回值是一个字符串,该字符串说明运算符的类型
typeof一般只能返回如下几个结果:“number”,“string”,“boolean”,“object”,“function”,“undefined”.
1 | <script type="text/javascript"> |
即我们可以通过typeof判断一个变量是否存在。例如
1 | if(typeof a!="undefined"){alert("ok")} |
而不要去使用if(a),因为如果a不存在(为声明)则会报错。对于 Array,Null 等特殊对象使用 typeof 一律返回 object,这正是 typeof 的局限性。
经常会在js里用到数组,比如 多个名字相同的input, 若是动态生成的, 提交时就需要判断其是否是数组.
if(document.mylist.length != “undefined” ) {} //这个用法有误.
正确的是
if( typeof(document.mylist.length) != “undefined” ) {}
或 if( !isNaN(document.mylist.length) ) {}
在JavaScript中,判断一个变量的类型常常会用typeof运算符,在使用该运算符时采用引用类型存储值会出现一个问题,无论引用的是什么类型的对象,他都返回”object“,这时就要用到instanceof
语法: object(要检测是对象) instanceof constructor(某个构造函数)
如 :var a=new Array();
alert(a instanceof Array); // true,
同时 alert(a instanceof Object) //也会返回 true;
这是因为 Array 是 object 的子类。
再如:function test(){};
var a=new test();
alert(a instanceof test) 会返回true
另外,更重的一点是 instanceof 可以在继承关系中用来判断一个实例是否属于它的父类型。
例如:
function Foo(){}
Foo.prototype = new Aoo();//JavaScript 原型继承
var foo = new Foo();
console.log(foo instanceof Foo)//true
console.log(foo instanceof Aoo)//true
上面的代码中是判断了一层继承关系中的父类,在多层继承关系中,instanceof 运算符同样适用。
构造函数类似于类,但不是类,在ES6出来之前常规用法。
1 | <!DOCTYPE html> |
ES6出来之后,逐渐取代构造函数,代表着JS越来越像正规军靠近
1 | <!DOCTYPE html> |
1 | var obj1 = { |
1 | var obj2 = new Object(); |
但是当
1 | obj2 = { |
此时上面定义的对象会将之前定义的覆盖掉,所以不推荐使用
1 | var obj3 = Object.create({name:"小丸子3",age:20}) |
1 | var a = 10; |
上述小demo可以知道,此时a的值为10,因为b = a 只是将a的值赋给b,除此之外a,b没有任何联系。
但是……
1 | var a = [1, 2, 3, 4, 5]; |
此时将 b = a; 是将a的地址传给b,a,b公用同一个地址,所以当改变b里面的值的时候 对应的a也会发生改变
此时的a 为数组,赋值的时候传的是地址,那么如果是对象呢?
1 | var obj4 = obj2; |
那么问题来了,如果只想单纯的想拷贝obj2里面的值这么办呢?
这时就要利用JSON.stringify 与 JSON.parse方法,前者将对象转换为字符串,后者将字符串转化为对象。
1 | var obj4 = JSON.parse(JSON.stringify(obj2)); |
即即使我们改变obj4里面的属性值,obj2里面对应的值也不会改变。
因为在将解析后的字符串转化为对象的时候,系统会重新创建一个新的地址,将变量存储。这种方法叫做深拷贝。
新增了 let 与 const,let与var差别不大,甚至可以完全取代var,当然是在不用考虑兼容的情况下,毕竟ES6刚出来,很多浏览器还不支持。
至于const,定义常量
1 | const PI = "3.1415926"; |
传统的代码拼接 ES5
1 | var name = "米老鼠"; |
当前的代码拼接 ES6
1 | var name = "米老鼠"; |
在对象中
ES5 写法
1 | var name = "米老鼠"; |
ES6 写法
1 | var name = "米老鼠"; |
当有函数的时候 function可以省略
1 | var obj1 = { |
ES6 箭头函数
1 | var test = (str) => str; |
1 | var obj2 = { |
1 | function Factory(age){ |
但是在构造函数下,传统的工厂模式不怎么使用
构造函数是由其本身与原型共同构成的, 构造函数的原型 prototype
对象是由其自身与原型共同构成的,对象的原型proto
构造函数 与 对象的原型之间 只差一个new(实例化)
但是在本质上是一样的
1 | function Person(name, age){ |
在构造函数里面,this指向实例化对象(即谁调用指向谁)并且 构造函数与其原型公用同一个this
1 | function Person2(name, age){ |
构造函数模拟类的特性 但不是类
1 | function Fatcher(firstName){ |
1 | function Dad(money){ |
JSON.parse用于从一个字符串中解析出json对象
例如:
1 | var str = '{"name":"huangxiaojian","age":"23"}' |
结果:Object
age: “23”
name: “huangxiaojian”
proto: Object
注意:单引号写在{}外,每个属性名都必须用双引号,否则会抛出异常。
JSON.stringify()用于从一个对象解析出字符串
例如:
1 | var a = {a:1,b:2} |
结果:”{“a”:1,”b”:2}”
1 | <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> |
Jquery实现Ajax异步提交时报错”Uncaught TypeError: Illegal invocation”,百度一查发现formData是一个对象,在JQ封装是Ajax发送请求上传数据的时候,只能传字符串,jquery传递对象/数组,无法传递,并且服务端无法获取数据。JSON.stringify()方法,它可以将客户端发送的JSON数据对象进行序列化操作。因为需要把对象json序列化后,才能传递到后台,后台根据json字符串进行反序列化。
1 | data:{wi:JSON.stringify(formData)}, // 将formData实例化 |
当然,当使用原生Ajax时,可以不用实例化
1 | // 原生 Ajax |
header() 函数向客户端发送原始的 HTTP 报头。
例如:
1 | <?php |
上述函数只用于form表单提交。
通过表单提交的时候可以做个判断,当用户名所在的输入框为空时,button按钮变成不可点击,如果不为空,button按钮设置为可点击按钮。
1 | <body> |
1 | var checks = $("input:checkbox"); |
why????因为userSelect是数组,userSelect[]是值,不能直接设置属性,
1 | var checks = $("input:checkbox"); |
缺失模块。
1、请确保node版本大于6.2
2、在博客根目录(注意不是yilia根目录)执行以下命令:
npm i hexo-generator-json-content --save
3、在根目录_config.yml里添加配置:
jsonContent: meta: false pages: false posts: title: true date: true path: true text: false raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true