代码之家 › 专栏 › 技术社区 › cynicaljoy

使用javascript维护范围

html jquery javascript

cynicaljoy · 技术社区 · 14 年前

我如何维护这个范围?

原件

var Base = new function() {

    var canvas;
    var context;

    this.init = function()
    {
        console.log("Canvas: " + $("canvas")[0])

        this.canvas = $("canvas")[0];
        console.log("Context: " + this.canvas.getContext('2d'))
        this.context = this.canvas.getContext('2d');

        $(window).resize(handleWindowResize);

        handleWindowResize();
    };

    function handleWindowResize()
    {
        console.log("Resize Canvas [" + this.canvas + "] to {width: " +
            $(window).width() + "," + $(window).width() + "}");
        this.canvas.width = $(window).width();
        this.canvas.height = $(window).height(); 
    }
}

$(window).load(function() { new Base.init() });

Ouput:

Canvas: [object HTMLCanvasElement]
Context: [object CanvasRenderingContext2D]
Resize Canvas [undefined] to {width: 1680,1680}
Resize Canvas [undefined] to {width: 1680,1680}

修订过的

var Base = function() {
  this.canvas;
  this.context;
}
Base.prototype = {
  init: function()
  {
    console.log("init :: " + this);

    this.canvas = $('canvas')[0];
    this.context = this.canvas.getContext('2d')

    $(window).resize(this.handleWindowResize);
    this.handleWindowResize(null);
  },

  handleWindowResize: function()
  {
    console.log($(window) + " resized set canvas (" + this.canvas + ")" +
        " width,height = " + $(window).width() + "," + $(window).height());
  },

  toString: function()
  {
    return "[Base]";
  }
}

$(window).load(function() { var c = new Base(); c.init(); });

输出:(初始化)

init :: [Base]
[object Object] resized set canvas ([object HTMLCanvasElement]) width,height = 1659,630

输出:(窗口调整大小时)

[object Object] resized set canvas (undefined) width,height = 1658,630

5 回复 | 直到 14 年前

attack 14 年前

下面是一个例子 Module pattern 在工作中:

<html>
<head>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">

        var Base = function() {

            //Private Variables
            var canvas;
            var context;

            //Private Function
            function handleWindowResize()
            {
                console.log("Resize Canvas [" + canvas + "] to {width: " + $(window).width() + "," + $(window).width() + "}");
                canvas.width = $(window).width();
                canvas.height = $(window).height(); 
            }

            //Public Functions
            return {

                init: function()
                {
                    console.log("Canvas: " + $("canvas")[0])

                    canvas = $("canvas")[0];
                    console.log("Context: " + canvas.getContext('2d'))
                    context = canvas.getContext('2d');

                    $(window).resize(handleWindowResize);

                    handleWindowResize();
                }

            };

        }();

        $(window).load(function() { Base.init() });

    </script>

</head>
<body>

    <canvas></canvas>

</body>
</html>

Matthew Manela 14 年前

jquery更改了回调方法中的对象“this”。您应该做的是在开始时存储对象的引用“this”引用:

var Base = new function() {
var self = this;
var canvas;
var context;

然后在要引用基础对象的地方使用self。

Maz 14 年前

用途: handleWindowResize.Call(this) 而不是: 把手宽度())

这将改变范围。

Community kfsone 7 年前

看起来您来自另一种语言,需要对JS中构造函数的工作方式有一个可靠的了解。

你有 this.name=function(){} 一个函数的函数声明,另一个函数的函数声明。你为什么要用 new function 对于基本对象?执行 new Base.init() 看起来也不太对。构造函数正在创建一个新对象,但您放弃了它,而只使用构造函数来执行命令式代码?您没有执行base,所以它可能只是一个对象文本。

我真的建议查看DougCrockford关于JS中继承和对象的文章。这个问题讨论了一些其他的对象创建技术。试着寻找克罗克福德的好地方。 What is happening in Crockford's object creation technique?

因为我没用过帆布,所以我把帆布丢弃了。执行时不会出错。

<html><head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
  <script>
   var Base = {
      canvas:null,
      context:null,

      init:function()
         {
         console.log("Canvas: " + $("#canvas")[0]);

         this.canvas = $("#canvas")[0];
         console.log("Context: " + this.canvas)
         //this.context = this.canvas.getContext('2d');
         this.handleWindowResize=function(){
         console.log("Resize Canvas [" + this.canvas + "] to {width: " + $(window).width() + "," +     $(window).width() + "}");
         this.canvas.style.width = $(window).width();
         this.canvas.style.height = $(window).height();
         }
        } 
      };


      $(window).load(function() { var c= new Base.init(); c.handleWindowResize()});
    </script>
  </head>

  <body>
    <div id='canvas' style='width:400px;background-color:red;height:30px;'>a div called Canvas</div>
  </body>
</html>

Jason McCreary 14 年前

您的代码有几个语法错误。如果 handleWindowResize 是基对象中的一个方法,则应将其声明为 this.init 并称之为 this.handleWindowResize .