文档章节

javascript集锦(一)

ihaolin
 ihaolin
发布于 2014/03/30 22:46
字数 704
阅读 72
收藏 4

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;
	}
}

先到这里。下次继续。

© 著作权归作者所有

ihaolin
粉丝 263
博文 164
码字总数 106524
作品 4
朝阳
高级程序员
私信 提问
四月前端知识集锦(每月不可错过的文章集锦)

目前自己组建的一个团队正在写一份面试图谱,将会在七月中旬开源。内容十分丰富,第一版会开源前端方面知识和程序员必备知识,后期会逐步写入后端方面知识。因为工程所涉及内容太多(目前已经...

夕阳
2018/05/02
0
0
Discuz 7.2坑爹集锦

Discuz是强大的论坛系统(以下简称DZ)使用广泛。目前Dz最新版本是 X2(20111221),虽然DZ 7.2版本比较老,中间尚有DZ X1,X1.5,但是使用7.2版本的网站还不少。并且7.2是论坛程序,而X系列添加...

mark35
2012/01/11
6.6K
11
五月前端知识集锦(每月不可错过的文章集锦)

目前自己组建的一个团队正在写一份面试图谱,将会在七月中旬开源。内容十分丰富,第一版会开源前端方面知识和程序员必备知识,后期会逐步写入后端方面知识。因为工程所涉及内容太多(目前已经...

夕阳
2018/10/28
0
0
Discuz 7.2坑爹集锦-js篇

Discuz 7.2坑爹集锦-js篇 在调试DZ过程中firebug经常提示common.js出错,什么“Error: s is null”,“$ is not defined”,“BROWSER not defined”。其实多半和XML有关:当ajax操作时后台P...

mark35
2012/01/12
1K
2
Android+Unity3D简单的物体运动

我们来了解一下Translate的使用 首先我们来看看场景的搭建:建一个立方体,加一个点光源。 我们要实现的就是让场景中的立方体延X轴嗖嗖的移动 那么我们在Project新建一个js脚本Creat->Javasc...

xiahuawuyu
2012/02/26
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

elasticsearch查询20公里以内的数据并按距离升序排序data es写法

NativeSearchQueryBuilder queryBuilder = new NativeSearchQueryBuilder();BoolQueryBuilder boolQueryBuilder=new BoolQueryBuilder();//这暂wei加入业务查询条件 queryBuilder.withQue......

为何不可1995
17分钟前
3
0
superset在线pip部署

1、安装依赖sudo yum install gcc libffi-devel python-devel python-pip python-wheel openssl-devel libsasl2-devel openldap-devel报错:没有可用软件包 python-pip。没有可用软件包 ......

阿伦哥-
21分钟前
4
0
photoshop简单使用

PS基本操作与图片格式 photoshop工具 组成 菜单项 工具栏 辅助面板 图片格式 jpg png gif 注: psd photoshop CC链接: https://pan.baidu.com/s/1LVa5R_btSjczLBwskCZidQ 提取码:sc3v 快捷...

studywin
23分钟前
3
0
springboot 整合pageHelper

今天跟大家聊聊springboot整合pageHelp,首先pageHelper是一个缓存式分页,分页步骤如下: 1 pom文件添加依赖 <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelp......

gaofei123
24分钟前
6
0
《DNS攻击防范科普系列1》—你的DNS服务器真的安全么?

DNS服务器,即域名服务器,它作为域名和IP地址之间的桥梁,在互联网访问中,起到至关重要的作用。每一个互联网上的域名,背后都至少有一个对应的DNS。对于一个企业来说,如果你的DNS服务器因...

大涛学弟
24分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部