phpstudy集成环境

 首页 > 关于JavaScript一段代码的问题

关于JavaScript一段代码的问题

S.Drawing = (function () {
  var canvas,
      context,
      renderFn
      requestFrame = window.requestAnimationFrame       ||
                     window.webkitRequestAnimationFrame ||
                     window.mozRequestAnimationFrame    ||
                     window.oRequestAnimationFrame      ||
                     window.msRequestAnimationFrame     ||
                     function(callback) {
                       window.setTimeout(callback, 1000 / 60);
                     };

  return {
    init: function (el) {
      canvas = document.querySelector(el);
      context = canvas.getContext('2d');
      this.adjustCanvas();

      window.addEventListener('resize', function (e) {
        S.Drawing.adjustCanvas();
      });
    },

    loop: function (fn) {
      renderFn = !renderFn ? fn : renderFn;
      this.clearFrame();
      renderFn();
      requestFrame.call(window, this.loop.bind(this));
    },

    adjustCanvas: function () {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    },

    clearFrame: function () {
      context.clearRect(0, 0, canvas.width, canvas.height);
    },

    getArea: function () {
      return { w: canvas.width, h: canvas.height };
    },

    drawCircle: function (p, c) {
      context.fillStyle = c.render();
      context.beginPath();
      context.arc(p.x, p.y, p.z, 0, 2 * Math.PI, true);
      context.closePath();
      context.fill();
    }
  }
}());

这是一整块代码

其中这一块是什么语法啊。。。我见过好几次但是一直没明白，原谅我菜。。。
init: function (el)
loop: function (fn)
adjustCanvas: function ()
...
针对这些

    init: function (el) {
      canvas = document.querySelector(el);
      context = canvas.getContext('2d');
      this.adjustCanvas();

      window.addEventListener('resize', function (e) {
        S.Drawing.adjustCanvas();
      });
    },

    loop: function (fn) {
      renderFn = !renderFn ? fn : renderFn;
      this.clearFrame();
      renderFn();
      requestFrame.call(window, this.loop.bind(this));
    },

    adjustCanvas: function () {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    },

    clearFrame: function () {
      context.clearRect(0, 0, canvas.width, canvas.height);
    },

    getArea: function () {
      return { w: canvas.width, h: canvas.height };
    },

    drawCircle: function (p, c) {
      context.fillStyle = c.render();
      context.beginPath();
      context.arc(p.x, p.y, p.z, 0, 2 * Math.PI, true);
      context.closePath();
      context.fill();
    }
  }

希望帮忙解释下，还有就是这个语法，最好帮忙链个文档页我去参考学习下，谢谢！

参考资料: http://bonsaiden.github.io/JavaScript-Garden/zh/#object
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object

你所截取的这块代码, 是在给一个对象 定义一个 属性, 这些属性的类型是一个 function(通常情况下称之为给一个对象定义一个方法).

举例:

var a = {//对象直接量
   xxx:function(){//定义/增加 一个 xxx 的方法(`function`)
      //这里是函数/方法体
      console.log('hello');
   },
   yyy: 123 //定义/增加 一个 yyy 的属性,它的类型是 数字, 值是 123
};

a.xxx();//那么就可以调用这个xxx的方法
console.log(a.yyy);//读取它的值
a.yyy = 22222;//修改它的值
console.log(a.yyy);//读取它的值

  1. 整体上是个赋值语句。

  2. 赋值表达式右侧所有代码封装在一个立即执行函数内。

  3. 立即执行函数里面，首先定义了canvas、context等局部变量，在这里你可以叫它们私有变量。然后函数构造了一个比较复杂的对象作为返回值，也就是return后面的大括号中的部分。

  4. 对象中定义了很多属性，例如init、loop等。由于它们的值都是函数，所以这些属性可以称为方法。

  5. 最后，立即执行函数被调用，返回了那个对象，然后赋值给了一开始的S.Drawing变量。

至于你截取的那块，就是用对象字面量的形式来定义一个对象。

比如我可以这样定义一个东西：

var person = {
    name: 'Tom',
    age: 12
};

上面这个很好理解吧？那么我把上面的'Tom'和12换成一个函数呢？那就成了你提问中的形式了。

记住：

函数和'Tom'、12`没有本质区别，它们都是值。

: ) 这段代码是不是来至《HTML5 + JavaScript 动画基础》这本书的。
这里涉及的知识点：对象，作用域，闭包，函数，this... 好像基础知识都涉及了。
可以看看：《JavaScript 高级程序设计》，汤姆大叔JavaScript系列，1楼的朋友那个资料也不错。看完回头看看这个你就明白了怎么回事了

【热门文章】
【热门文章】