JS中的自执行函数

本来规划的是2013年,狠狠的将JS学习下,谁知计划赶不上变化,计划泡汤了。13年的我对JS来说可以说是属于跟风,对它的理解和认识也仅仅是皮毛而已,也是因为要完成《ArcGIS API for JavaScipt开发教程》而临阵磨枪。

在接触JS一段时间后,觉得还是比较灵活的,灵活的前提是要更深入的了解,就像两个陌生的人,相处的时间长了,了解的时间长了,难免会产生感情一样。对于JS也开始产生了感情,这种感情体现在工作中,体现在周围的环境中。

目前很多开发者纷纷加入JS的阵营,看来这已经不是跟风,而是趋势,这种趋势可能还会一直持续下去。

没有系统的学习过JS,只能在工作内外,抽出时间来学习,来理解,在自己的博文中也不知道写了多少篇,虽然转载的占据了大部分。

虽然自己以前是C#这类语言的使用者,但是心里明白,所谓的语言都是为了解决一些特定的问题,有一些特定使用的场合,不同的语言,其语法,数据类型,甚至运行机制有所差异,但是其思想大同小异,万变不离其宗。

语言种类很多,但是都有其数据类型,int,long等,有循环,有函数,有字符串和数组的操作,这些都是一样的,几乎在一种语言上能找到另外一种语言对应的。

在学习开发的时候,都会让将自己的逻辑结构封装起来,以便日后重复使用,在C#中我们可以写成一个类,或者一个dll,在C#中写过类,也写过dll,但是要达到真正的复用,真正的模块独立,我还是欠缺火候,这一点一直是心中的痛呀,

恨不当初,有那么好的实习机会,却没有好好的利用,惭愧万分。

在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);

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

介绍的有点仓促,很多概念没有详细介绍,大家可以看我的其它博文(http://www.cnblogs.com/zuiyirenjian/p/3473304.html)或者网上搜索,我写的这篇的目的只是为了加深对自执行函数的理解,同时也是为了体验如何在JS中达到所谓的”封装“。

关于JS中自执行的函数写法很多,可以看这里:http://www.cnblogs.com/snandy/archive/2011/02/28/1966664.html

新的一年即将开始,祝大家新年快乐!

时间: 2024-08-06 16:06:33

JS中的自执行函数的相关文章

js中(function(){…})()立即执行函数写法理解

javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因并非如此.要理解立即执行函数,需要先理解一些函数的基本概念.

JS中的立即执行函数

函数声明: function fnName(){......};使用function关键字声明一个函数,再指定一个函数名,叫函数声明. 函数表达式: var fnName = function(){...};使用function 关键字声明一个函数,但未给函数命名,最后将匿名函数赋予一个变量,叫函数表达式,这是最常见的函数表达式语法形式. 匿名函数: function(){};使用function关键字声明一个函数,但未给函数命名,所以叫匿名函数,匿名函数属于函数表达式,匿名函数有很多作用,赋予

IIFE-js中(function(){…})()立即执行函数写法理解

介绍IIFE IIFE的性能 使用IIFE的好处 IIFE最佳实践 jQuery优化 在Bootstrap源码(具体请看<Bootstrap源码解析>)和其他jQuery插件经常看到如下的写法: Js代码   +function ($) { }(window.jQuery); 这种写法称为: IIFE (Imdiately Invoked Function Expression 立即执行的函数表达式). 一步步来分析这段代码. 先弄清函数表达式(function expression)和 函数

[转]js中confirm实现执行操作前弹出确认框的方法

原文地址:http://www.jb51.net/article/56986.htm 本文实例讲述了js中confirm实现执行操作前弹出确认框的方法.分享给大家供大家参考.具体实现方法如下: 现在在删除或其它操作前弹出确定提示,我们有很多方法,最基本的就是利用js自带的函数confirm来操作了 最简单的用法如下: 鼠标事件使用confirm 复制代码 代码如下: <a href="#" onclick= "if(confirm( '是否确定! ')==false)r

javascript中的立即执行函数(function(){…})()

javascript中的立即执行函数(function(){…})() 深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是用(function(){…})()包住业务代码,使用jquery时比较常见. ( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因并非如此.要

深入理解javascript中的立即执行函数(function(){…})()

这篇文章主要介绍了深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是用(function(){-})()包住业务代码,使用jquery时比较常见,需要的朋友可以参考下http://www.jb51.net/article/50967.htm javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ( function()

JS中构造函数与普通函数的区别及JS构造函数、原型和实例的关系

JS中构造函数与普通函数的区别: https://www.cnblogs.com/cindy79/p/7245566.html JS构造函数.原型和实例的关系: https://blog.csdn.net/u012443286/article/details/78823955 JavaScript构造函数及原型对象: https://blog.csdn.net/a153375250/article/details/51083245 原文地址:https://www.cnblogs.com/jim

javascript中的立即执行函数

javascript中的立即执行函数$(function(){ alert();}()) Highcharts的中的 series:[{ name: '今日在线人数', color: 'pink', data: (function(){ )()) }] #执行效果一样$( document ).ready(function() { console.log( "ready!" ); }); 和 $(function() { console.log( "ready!"

JS中的几种函数

函数可以说是js中最具特色的地方,在这里我将分享一下有关函数的相关知识: 包装函数:        (function foo(){...})作为函数表达式意味着foo只能在...所代表的位置中被访问,外部作用域则不行 (function foo(){...})()        第一个()将函数变成表达式,第二个()执行了这个函数,这种模式代表立即执行函数表达式   包装函数的声明以(function...而不是function开始,函数会被当作函数表达式而不是一个标准的函数声明来处理