javascript集锦(一) | 易学教程

javascript集锦(一)：

javascript作用域:

function myFun(){
   test =  123;
}
myFun(); //执行myFun后, test在myFun中没有声明var, 被视作全局变量
alert(test); //123

javascript闭包：闭包可以记忆创建它的上下文。

/**
 * 利用闭包实现公有访问
 */
var Counter = (function(){
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  };   
})(); //最后这个()就调用一次function(){}匿名函数了, 所有Counter为return后那个对象

alert(Counter.value()); /* Alerts 0 */
Counter.increment();
Counter.increment();
alert(Counter.value()); /* Alerts 2 */
Counter.decrement();
alert(Counter.value()); /* Alerts 1 */

获取网页大小：

//1.当前可看见的页面大小
function pageArea(){
　　　　if (document.compatMode == "BackCompat"){ //ie6的quirks模式
　　　　　　return {
　　　　　　　　width: document.body.clientWidth,
　　　　　　　　height: document.body.clientHeight
　　　　　　}
　　　　} else {
　　　　　　return {
　　　　　　　　width: document.documentElement.clientWidth,
　　　　　　　　height: document.documentElement.clientHeight
　　　　　　}
　　　　}
}

/* 2.包括滚动条在内的页面大, 当网页没有滚动条时,
 * clientWidth/scrollWidth, clientHeight/clientScrollHeight
 * 根据浏览器有可能不等
 */
function pageAreaWithScroll(){
　　　　if (document.compatMode == "BackCompat"){
　　　　　　return {
　　　　　　　　width: document.body.scrollWidth,
　　　　　　　　height: document.body.scrollHeight
　　　　　　}
　　　　} else {
　　　　　　return {
　　　　　　　　width: document.documentElement.scrollWidth,
　　　　　　　　height: document.documentElement.scrollHeight
　　　　　　}
　　　　}
}

获取网页元素绝对位置：相对于整个网页的左上角的坐标

/**
 * 获取元素左偏移量,对表格,iframe不适用
 */
function getElementLeft(element){
　　　　var actualLeft = element.offsetLeft;
　　　　var parent = element.offsetParent;
　　　　while (parent !== null){
　　　　　　actualLeft += parent.offsetLeft;
　　　　　　parent = parent.offsetParent;
　　　　}
　　　　return actualLeft;
}

/**
 * 获取元素上偏移量,对表格,iframe不适用
 */
function getElementTop(element){
　　　　var actualTop = element.offsetTop;
　　　　var parent = element.offsetParent;
　　　　while (parent !== null){
　　　　　　actualTop += parent.offsetTop;
　　　　　　parent = parent.offsetParent;
　　　　}
　　　　return actualTop;
}

获取元素相对位置：相对于浏览器左上角的坐标

function getElementLeft(element){
　　　　var actualLeft = element.offsetLeft;
　　　　var parent = element.offsetParent;
　　　　while (current !== null){
　　　　　　actualLeft += parent.offsetLeft;
　　　　　　parent = parent.offsetParent;
　　　　}
　　　　var elementScrollLeft;
　　　　if (document.compatMode == "BackCompat"){
　　　　　　elementScrollLeft=document.body.scrollLeft;
　　　　} else {
　　　　　　elementScrollLeft=document.documentElement.scrollLeft; 
　　　　}
　　　　return actualLeft-elementScrollLeft;
}

function getElementTop(element){
　　　　var actualTop = element.offsetTop;
　　　　var parent = element.offsetParent;
　　　　while (current !== null){
　　　　　　actualTop += parent.offsetTop;
　　　　　　parent = parent.offsetParent;
　　　　}
　　　　 if (document.compatMode == "BackCompat"){
　　　　　　var elementScrollTop=document.body.scrollTop;
　　　　} else {
　　　　　　var elementScrollTop=document.documentElement.scrollTop; 
　　　　}
　　　　return actualTop-elementScrollTop;
}

方便获取元素位置(相对于浏览器左上角)：

//IE、Firefox 3.0+、Opera 9.5+, Chrome
element.getBoundingClientRect().left
element.getBoundingClientRect().top
element.getBoundingClientRect().bottom
element.getBoundingClientRect().right
element.getBoundingClientRect().width
element.getBoundingClientRect().height

apply函数：改变函数的调用对象

var x = 1;
var obj = {};
obj.x = 2;
obj.fun1 = function(){
   alert(this.x);
}
obj.fun1.apply(); //1, 默认apply对象是全局对象
obj.fun1.apply(obj); //2, obj对象

//也可以加入第二个参数, 必须为数组; 于call(currentObject, arg1, arg2, ...)是用可变长参数
apply(currentObject, args[]);

javascript构造函数模式：

var Person = function(name, age){
    this.name = name;
    this.age = age;

    this.fun1 = function(){ ... }
}

//创建一个对象
var p = new Person("p1", 100);

javascript继承：

/**
 * 利用prototype实现继承
 */
var Extend = (Sub, Super) {
　　　　var F = function(){};
　　　　F.prototype = Super.prototype;
　　　　Sub.prototype = new F();
　　　　Sub.prototype.constructor = Sub;
　　　　Sub.uber = Super.prototype; //备用属性
}

javascript深拷贝：

function DeepClone(p, c) {
　　　　var c = c || {};
　　　　for (var i in p) {
　　　　　　if (typeof p[i] === 'object') {
　　　　　　　　c[i] = (p[i].constructor === Array) ? [] : {};
　　　　　　　　deepCopy(p[i], c[i]);
　　　　　　} else {
　　　　　　　　　c[i] = p[i];
　　　　　　}
　　　　}
　　　　return c;
}

//
var obj2 = DeepClone(obj1); //obj1 clone to obj2 deeply

判断对象是否存在：

//1.
if (!myObj) {
　　var myObj = {};
}

//2.
if (!window.myObj) {
　　window.myObj = {};
}

//3.
if (!this.myObj) {
　　this.myObj = {};
}

//4.建议使用，判断变量是否存在
if (typeof myObj == "undefined") {
　　var myObj = {};
}

//5.
if (myObj == undefined) {
　　var myObj = {};
}

//6.
if (myObj == null) {
　　var myObj = {};
}
//7.
if (!('myObj' in window)) {
　　window.myObj = {};
}

极简主义创建对象

var Person = {
	createNew: function(n, a){
		var p = {
			name: n,
			age: a 
		};
		
		p.whoAmI = function(){
			alert(this.name);
		};
		
		return p;
	}
}

先到这里。下次继续。

来源：oschina

链接：https://my.oschina.net/u/222173/blog/214464

标签

javascript

集锦