学习笔记,

来源:http://www.cnblogs.com/zuiyirenjian/p/3535126.html

作者:醉意人间 

此外,关于自运行函数可参考  http://benalman.com/news/2010/11/immediately-invoked-function-expression/

在JS中,也常常需要复用,将一些常见的操作封装起来,目前看到的很多JS库,比如JQuery就是非常典型的,那么如何在JS中写一个可复用的呢?虽然在JS中有类的这个说法,但是我对这个玩意还是很抵触的,但是存在即合理。JS中的类是通过函数来模拟的,也就是说JS中的函数具有双重角色,用new关键字的将函数视为类,不用new的,它就是一个普普通通的函数。

我们知道,类就是一个数据类型,这个数据类型由属性和方法(函数)组成,如果函数只有属性,没有方法,那么这样的类,一般就单纯的表示为一个数据,增加上一些方法,那么类的功能将会有质的变化。既然在JS中,函数可以表示为类,而类中又有方法,那么在JS中函数内部新定义一个函数,也就不足为怪。

JS中最为强大的内容,我认为除了原型,就是闭包,这里就讨论闭包,闭包其实就是在一个函数内部定义一个新的函数,在执行的时候,会将这个函数返回,也可能是返回一个对象。下面就是一个简单的闭包:

  var MathTest = function (x, y) {

        var x = x;
var y = y; var add = function () { return x + y; } return add; }
 var x = MathTest(3, 4);

        alert(x());

在执行的时候MathTest就是内部的add函数,调用MathTest的时候,相当于执行了x+y,这其实并不起卦,可以将add认为是function内部的一个变量,只是这个变量的值是一个函数,内部的函数是可以访问它的上一个级别的数据,所以我们可以得到正确的值。

var Img = function () {
var T$ = function (id) { return document.getElementById(id); }
var ua = navigator.userAgent,
isIE = /msie/i.test(ua) && !window.opera;
var i = 0, sinDeg = 0, cosDeg = 0, timer = null;
var rotate = function (target, degree) {
target = T$(target);
var orginW = target.clientWidth, orginH = target.clientHeight;
clearInterval(timer);
function run(angle) {
if (isIE) { // IE
cosDeg = Math.cos(angle * Math.PI / 180);
sinDeg = Math.sin(angle * Math.PI / 180);
with (target.filters.item(0)) {
M11 = M22 = cosDeg; M12 = -(M21 = sinDeg);
}
target.style.top = (orginH - target.offsetHeight) / 2 + 'px';
target.style.left = (orginW - target.offsetWidth) / 2 + 'px';
} else if (target.style.MozTransform !== undefined) { // Mozilla
target.style.MozTransform = 'rotate(' + angle + 'deg)';
} else if (target.style.OTransform !== undefined) { // Opera
target.style.OTransform = 'rotate(' + angle + 'deg)';
} else if (target.style.webkitTransform !== undefined) { // Chrome Safari
target.style.webkitTransform = 'rotate(' + angle + 'deg)';
} else {
target.style.transform = "rotate(" + angle + "deg)";
}
} timer = setInterval(function () {
i += 10;
run(i);
if (i > degree - 1) {
i = 0;
clearInterval(timer);
}
}, 10);
}
return { rotate: rotate } } ();

调用代码:

      Img.rotate('demo', 360);

这个是一个比较复杂的,但是不要怕,这里会牵扯到另外的知识,自执行函数和匿名函数。

所谓匿名函数就是没有名字的函数,形式如下:

function () {

    }

既然没有名字,那么如何调用呢:

var b=function () {

    }
b()

可以将匿名函数付给一个变量,这个变量现在就充当了这个函数的名称,但是记住,这个不是名称,我只是这么叫,如果觉得不妥的话,可以认为b现在就是这个匿名函数的代表,在用的时候用b就等同于使用右边的函数。除了这种方式,还有就是自执行函数,形式如下:

(function(){
//代码
})();

自执行函数相当于我们上面两步的结合:

var b=function () {

    }
b()

自执行函数是非常有用的,可以用它创建命名空间,只要把自己所有的代码都写在这个特殊的函数包装内,在使用的时候只需要用这个奇怪的函数即可,伟大的JQuery就是通过这个奇怪的函数创建了一个$的对象,在这个匿名函数中,往往会定义一个属于自己的命名空间,或者返回一个属于自己的对象,上面的Img对象包含了旋转图片的操作,这操作中,调用了很多匿名函数中定义的其它方法,这些方法都是为Rotate来服务的。那么以后写自己可服用的操作的时候,就可以通过这种做法。

我们见到的操作通常都是返回一个对象,但是也可以放回一个函数,下面的,但是调用的时候,写法有所差异:

    var Img = function () {
var T$ = function (id) { return document.getElementById(id); }
var ua = navigator.userAgent,
isIE = /msie/i.test(ua) && !window.opera;
var i = 0, sinDeg = 0, cosDeg = 0, timer = null;
var rotate = function (target, degree) {
target = T$(target);
var orginW = target.clientWidth, orginH = target.clientHeight;
clearInterval(timer);
function run(angle) {
if (isIE) { // IE
cosDeg = Math.cos(angle * Math.PI / 180);
sinDeg = Math.sin(angle * Math.PI / 180);
with (target.filters.item(0)) {
M11 = M22 = cosDeg; M12 = -(M21 = sinDeg);
}
target.style.top = (orginH - target.offsetHeight) / 2 + 'px';
target.style.left = (orginW - target.offsetWidth) / 2 + 'px';
} else if (target.style.MozTransform !== undefined) { // Mozilla
target.style.MozTransform = 'rotate(' + angle + 'deg)';
} else if (target.style.OTransform !== undefined) { // Opera
target.style.OTransform = 'rotate(' + angle + 'deg)';
} else if (target.style.webkitTransform !== undefined) { // Chrome Safari
target.style.webkitTransform = 'rotate(' + angle + 'deg)';
} else {
target.style.transform = "rotate(" + angle + "deg)";
}
} timer = setInterval(function () {
i += 10;
run(i);
if (i > degree - 1) {
i = 0;
clearInterval(timer);
}
}, 10);
}
return rotate ; } ();

调用代码:

      Img('demo', 360);

这两种方式,根据自己的习惯,我个人倾向前者。

笔记,js对象浅析的更多相关文章

  1. js对象,原型,call,apply浅析

    //对象直接量,创建对象最简单的方式是在js里使用对象直接量 var book = { "main title": "js", //属性里有空格,要用引号 &q ...

  2. 点滴笔记(二):利用JS对象把值传到后台

    记得以前刚写asp.net 从前台往后台传值 都是var data=A,B,C,D,E; 循环添加用逗号隔开 后台还要被测试测出只输入,就错了 哈哈..后来用✈◆类似的符号隔开 不是长久之计... 现 ...

  3. Jquery学习笔记(1)--JQuery原理,与JS对象互换,核心函数

    js对象转jQuery对象,$('num'), jQuery对象转js对象,$('num')[0],或$('num').get(0). 1.点击换行,each(),html(),attr(),每个h1 ...

  4. JS学习笔记 (三) 对象进阶

    1.JS对象 1.1 JS对象特征 1.JS对象是基本数据数据类型之一,是一种复合值,可以看成若干属性的集合. 属性是名值对的形式(key:value) 属性名是字符串,因此可以把对象看成是字符串到值 ...

  5. JS组件系列——表格组件神器:bootstrap table 包含了js对象的定义和对象成员函数的定义

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  6. amazeui学习笔记--js插件(UI增强)--警告框Alert

    amazeui学习笔记--js插件(UI增强)--警告框Alert 一.总结 1.警告框基本样式:用am-alert声明div容器, <div class="am-alert" ...

  7. 前端学习:学习笔记(JS部分)

    前端学习:学习笔记(JS部分) 前端学习:JS学习总结(图解)    JS的简介 JS基本语法 JS内置对象 JS的函数 JS的事件 JS的BOM JS的DOM JS的简介 新建步骤 <body ...

  8. 读书笔记 - js高级程序设计 - 第十五章 使用Canvas绘图

    读书笔记 - js高级程序设计 - 第十三章 事件   canvas 具备绘图能力的2D上下文 及文本API 很多浏览器对WebGL的3D上下文支持还不够好   有时候即使浏览器支持,操作系统如果缺缺 ...

  9. JS对象继承篇

    JS对象继承篇 ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的 原型链 其基本思路是利用原型让一个引用类型继承另一个引用类型的属性和方法 function Person() ...

随机推荐

  1. UIViewController 专题

    呵呵 轻轻巧巧    UIViewController self setNeedsStatusBarAppearanceUpdate 刷新状态栏 (内部会重新调用 prefersStatusBarHi ...

  2. PhoneGap:JS跨域请求

    PhoneGap开发,理论上好处多多.但因为javascript是其中的主角,并且是直接存放于手机,跟服务器数据交互,就会有一个跨域访问的问题. 当然,这个问题肯定有解决方案,不然的话,这种利用Pho ...

  3. Ned的难题

    题目描述 Ned再也看不下去Robert的种种恶习,于是他决定出一道题来让他醒悟. Ned的题目是这样: 给出一个有n个数的序列,求其中所有连续子序列的数的最大公因数的乘积模1000000009的值. ...

  4. bzoj1008 [HNOI2008]越狱——快速幂

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1008 (这样一道水题还因为忘记写 %lld WA了那么多遍) 发生越狱的状态数,就是全部状态 ...

  5. bzoj2752

    线段树+概率 今天这道题爆零了,奥妙重重. 其实我们可以把式子化成这样:sigma((i-l+1)*(r-i+1)*ai) 这里r减了1 然后展开,(1-l)*(r+1)*ai+(r+l)*i*ai- ...

  6. Another lottery

    http://acm.hdu.edu.cn/showproblem.php?pid=2985 题意:有n个人每个人可以买m轮彩票,每轮可以买尽可能多的彩票.如果该彩票在i轮被抽到,则该人可以获得2^i ...

  7. THE DRUNK JAILER

    http://poj.org/problem?id=1218 题意:门的状态有两种开或关,初始化为开,每次进行状态转换,第一次把门号是1的倍数的门状态转换,第二次把门号是2的倍数的门状态转换,.... ...

  8. js模拟复制

    现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了.   一.实现点击按钮,复制文本框中的的内 ...

  9. php获得两个字符串公共最大子串的函数

    <?php header("Content-type: text/html; charset=utf-8"); function search($str1,$str2) { ...

  10. akka设计模式系列(Actor模型)

    谈到Akka就必须介绍Actor并发模型,而谈到Actor就必须看一篇叫做<A Universal Modular Actor Formalism for Artificial Intellig ...