一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大家都会这样说,在网上学习了一些资料,这边整理出来. 首先,DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢,而是说操作了这个对象后,会触发一些浏览器行为,比如布局(layout)和绘制(paint).下面主要先介绍下这些浏览器行为,阐述一个页面是怎么最终被呈现出来的,另外还会从代码的角度,来说明一些不好的实践以及一些优化方案. 浏览器是如何呈现一张页面的 一个浏览器有许多模块,其中负责呈现页面的是渲染引…
示意图 应用场景 1.赋值 只有用新的对象本身直接赋值给对应引用,该对象引用的值会改变,因为对象引用指向的对象本身改变了. 2.方法入参 调用方法和被调用方法. 代码 import com.alibaba.fastjson.JSONObject; import java.util.ArrayList; import java.util.List; import org.slf4j.Logger; import org.slf4j.LoggerFactory; /** * @author gzh…
继承在前端逻辑操作中是比较常见的,今天我们就从零开始写一个js的继承方式 在es5中继承实质上是先创建子类的实例对象,然后再将父类的方法添加到this上Parent.call(this),在es6中则是先创建父类的实例对象this调用父类的super(),然后再用子类的构造函数修改this,所以无论是哪种方法必然牵扯到的操作是 一. 以另一个对象替换当前执行对象的call方法 Function.prototype.myCall = function() { let obj = Array.fro…
RequireJS 介绍说一个JS文件里只能放一个Define,这个众所周知,不提. 关于Define,它需要有一个返回值/对象,且只能有一个返回值/对象,这一点却是好多帖子没有提到的,但又非常重要的,一不留神就会报错. 别的不说了,上代码: 1. require.htm代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD…
js对象是否拥有某一个属性的判断方法有很多. 本文分享一个简单的方法,如下: <script> /** * 判断js对象是否具有某属性 * by www.jbxue.com */ var obj = {name:'jack'}; obj.hasOwnProperty('name'); // --> true obj.hasOwnProperty('toString'); // --> false </script>…
一般书上总是用int来举例,那个太简单.如果静态变量本身可否是一个实例对象呢?应该是可以,但是这样涉及到它的构造函数以及它内部的静态变量如何初始化两个问题,换而言之,这个静态变量本身应该如何初始化?这个问题和单例模式有些关系,回头查查. 以下是一个不成熟的例子,但是能编译运行通过. #include "stdafx.h" #include <iostream> using namespace std; class AAA { public: static int sss;…
Date 日期对象 日期对象可以储存任意一个日期,并且可以精确到毫秒数(1/1000 秒). 定义一个时间对象 : var Udate=new Date(); 注意:使用关键字new,Date()的首字母必须大写. 使 Udate 成为日期对象,并且已有初始值:当前时间(当前电脑系统时间). 如果要自定义初始值,可以用以下方法: var d = new Date(2012, 10, 1); //2012年10月1日 var d = new Date('Oct 1, 2012'); //2012年…
Phaser是一个简单易用且功能强大的html5游戏框架,利用它可以很轻松的开发出一个html5游戏.在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏:Flappy Bird,希望大家看后也能做出自己的html5游戏.大家可以先点击这里来试玩一下我已经做好的这个游戏,感受一下Phaser的游戏效果,游戏的完整代码我已经放到github上了.支持的浏览器:IE9+.Firefox.Chrome.Opera.Safari以及移动端的能支持html5的浏览器,推荐使用谷歌浏览器,…
继承:当前对象没有的属性和方法,别人有,拿来给自己用,就是继承 1 混入式继承 var I={ }; var obj = { name: 'jack', age:18, sayGoodbye : function () { console.log("goodbye") ; } } // 混入式继承, a中 将继承obj的所有属性 for (var k in obj ) { a[k] = obj [k] ; } 2.原型继承 利用原型中的成员可以被其相关对象共享这一特性,可以实现继承 实…
<script type="text/javascript"> function person(name, age) { this._name = name; this._age = age; var _self = this; this.say = function() { console.log(this._name + '-' + this._age); setTimeout(function() { console.log(_self._name); }, 2000…