Javascript: самодельные методы не работают правильно - PullRequest
0 голосов
/ 04 января 2011

Я пытался выяснить это уже несколько дней, я пытался использовать свой собственный объект для своего рода замены глобального объекта, чтобы уменьшить проблемы с другими сценариями (пользовательские скрипты, расширения chrome ... и тому подобное).Однако я не могу заставить вещи работать по какой-то причине.Я попробовал отладку с помощью JSLint, инструментов разработчика, включенных в Google Chrome, Firebug, и встроенного отладчика скриптов в IE8, но нет ошибки, объясняющей, почему она вообще не работает ни в одном из браузеров, которые я пробовал.

Я пробовал IE 8, Google Chrome 10.0.612.3 dev, Firefox 3.6.13, Safari 5.0.3 и Opera 11.

Итак ... вот код:

HTML:

<!DOCTYPE HTML>
<html manifest="c.manifest">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta charset="utf-8">

  <!--[if IE]>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
     <script src="https://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js">IE7_PNG_SUFFIX=".png";</script>
  <![endif]-->
  <!--[if lt IE 9]>
     <script src="js/lib/excanvas.js"></script>
     <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

  <script src="js/data.js"></script>
</head>
<body>

<div id="controls">
     <button onclick="MYOBJECTis.next()">Next</button>
</div>
<div id="textfield"></div>

<canvas id="game"></canvas>

</body>
</html>

Javascript:

var that = window, it = document, k = Math.floor;
var MYOBJECTis = {

     aresizer: function(){
     // This method looks like it doesn't work.
     // It should automatically resize all the div elements and the body.
     // JSLint: no error (execpt for "'window' is not defined." which is normal since
     // JSLint does nor recognize references to the global object like "window" or "self"
     // even if you assume a browser)
     // Firebug: no error
     // Chrome dev tools: no error
     // IE8: no error
         "use strict";
     var screenWidth, screenHeight;
     if(window.innerWidth) {
         screenWidth = window.innerWidth;
        }
     else {
         if(document.documentElement && document.documentElement.clientWidth) {
            screenWidth = document.documentElement.clientWidth;
            }
         else {
            if(document.body) {
                screenWidth = document.body.clientWidth;
            }
        }
    }
     if(window.innerHeight) {
         screenHeight = window.innerHeight;
        }
     else {
         if(document.documentElement && document.documentElement.clientHeight) {
            screenHeight = document.documentElement.clientHeight;
            }
         else {
             if(document.body) {
                screenHeight = document.body.clientHeight;
            }
        }
    }
     (function() {
     for(var b = 0, c = it.getElementsByTagName("div");b < c.length;b++) {
         c[b].style.width = k(c.offsetWidth) / 100 * k(screenWidth);
         c[b].style.height = k(c.offsetHight) / 100 * k(screenHeight);
            }
        }());
     (function() {
     var b = it.getElementsByTagName("body");
     b.width = screenWidth;
     b.height = screenHeight;
        }());
    },


     next: function(){
     // This method looks like it doesn't work.
     // It should change the text inside a div element
     // JSLint: no error (execpt for "'window' is not defined.")
     // Firebug: no error
     // Chrome dev tools: no error
     // IE8: not implemented (starting at the var statement below)
         "use strict";
         var b = it.getElementById("textfield"), a = [], c;
         switch(c !== typeof Number){
            case true:
                 a[1] = ["HI"];
                 c = 0;
                 break;
            case false:
                 b.innerHtml = a[c];
                 c+=1;
                 break;
            default:
             return Error; 
            }
        }
    };
// auto events
(function(){
     "use strict";
     that.onresize = MYOBJECTis.aresizer();
    }());

Если кто-то может помочь мне с этим, я был бы очень признателен.

РЕДАКТИРОВАТЬ: Ответить на вопрос, что не работает, я могупросто скажите, что ни один из методов, которые я здесь показал, не работает вообще, и я не знаю причину проблемы.Я также попытался очистить часть кода, который, скорее всего, не имеет к этому никакого отношения.Дополнительная информация содержится в комментариях внутри кода.

РЕДАКТИРОВАТЬ 2: Я обновил код и комментарии внутри него до того, как он выглядит сейчас, но я все еще не могу заставить его работать.Я также получил новую ошибку в следующем методе из IE8.

Ответы [ 4 ]

1 голос
/ 04 января 2011

Основная проблема, кажется, внутри вашего цикла:

c = it.getElementsByTagName("div");

возвращает массив элементов DOM;и вы пытаетесь применить стили ко всему массиву:

c.style.width

, когда вы должны делать

c[b].style.width

В функции next ваш default случайникогда не выполнится, потому что условие всегда будет истинным или ложным, и в обоих случаях вы не позволяете переключателю перейти к следующему случаю, используя break или return - значение по умолчанию будет выполняться только при наличиисоответствующий случай не определен, или если приведенный выше случай не break


Использование document.getElementsByTagName возвращает массив элементов, следовательно, getElements .

Вы не можете применять стили к массиву элементов, только к отдельному элементу, поэтому вам нужно указать значение индекса для элемента, который вы хотите изменить, например:

c[b].style.width = k(c[b].offsetWidth) / 100 * k(screenWidth) + "px";
c[b].style.height = k(c[b].offsetHight) / 100 * k(screenHeight) + "px";

и

var b = it.getElementsByTagName("body");
b[0].style.width = screenWidth + "px";
b[0].style.height = screenHeight + "px";
0 голосов
/ 04 января 2011

Вы назначаете обработчик события. Вы просто должны вставить туда функцию, но не вызывать ее. Итак, эта строка:

 that.onresize = MYOBJECTis.aresizer();

Должно быть

 that.onresize = MYOBJECTis.aresizer;

Или

 that.onresize = function() {
     MYOBJECTis.aresizer();
 };

, если вы хотите сохранить this в aresizer.

0 голосов
/ 04 января 2011

Я вижу некоторые очень странные вещи в следующем методе.

Вы присваиваете it.getElementById ("текстовое поле") для b, но b никогда не используется.

Вы объявляете c, а затемпроверяет, является ли c! == typeof Number, который всегда будет истинным, поскольку вы еще не установили c.

Я думаю, что затем, возможно, следует использовать переменные, созданные на уровне MYOBJECTis, вместо локальных переменных.

0 голосов
/ 04 января 2011

В качестве дополнительного примечания вы можете использовать «окно» вместо «это» - оно доступно глобально.

Я бы использовал следующее, чтобы получить ширину клиента и быть совместимым по всем направлениям:

if (window.innerWidth)
{
screenWidth=window.innerWidth;
}
else if (document.documentElement && document.documentElement.clientWidth)
{
screenWidth=document.documentElement.clientWidth;
}   
else if (document.body)
{
screenWidth=document.body.clientWidth;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...