Форум

devote · #31 (**permalink**) 09.05.2012, 21:22

Сегодня допилил модель Element

Возможности модели максимально приведены в нормальное состояние, возможность добавления методов полностью реализована без ограничений. Модель инициализируется даже до полной загрузки DOM модели, то-есть обращаться к прототипам элементов вы можете не дожидаясь полной загрузки страницы.

небольшой пример, который вы можете запустить в ИЕ 7 и ниже:

<html>
    <head>
        <script type="text/javascript" src="https://raw.github.com/devote/spike/master/models/element.js"></script>
    </head>
    <body>
        <i></i>
        <script type="text/javascript">
            var div1 = document.createElement( 'div' );

            div1.className = "elem_div1";

            Element.prototype.test1 = function() {
                alert( 'это функция "test1" на элементе: ' + this.nodeName + "." + this.className );
            }

            div1.test1();

            // нужно добавить элемент в DOM что бы было отслеживание
            // свойства innerHTML, к сожалению отследить изменение
            // этого свойства можно лишь тогда когда элемент находится
            // в DOM модели документа, но я считаю это не большим минусом
            // так как уважающий себя программист данным свойством
            // пользуется очень редко, ну или для других целей.
            document.body.appendChild( div1 );

            div1.innerHTML = '<b class="elem_B"></b>';

            div1.firstChild.test1();


            var div2 = document.createElement( 'div' );

            Element.prototype.test2 = function() {
                alert( 'это функция "test2" на элементе: ' + this.nodeName + "." + this.className );
            }

            alert( [ !!div1.test1, !!div1.test2 ] ); // true,true
            alert( [ !!div2.test1, !!div2.test2 ] ); // true,true

            // ищем элемент I в DOM
            var i = document.getElementsByTagName( 'i' )[0];

            // проверяем у него присутствие наших новых методов
            alert( [ !!i.test1, !!i.test2 ] ); // true,true

        </script>
    </body>
</html>

devote · #32 (**permalink**) 23.05.2012, 20:26

Обновил модель селекторов, теперь она стала весить чуть ли не в два раза меньше чем весила. Селектор рассчитан только для ИЕ<9 поэтому был оптимизирован только для ИЕ, в других браузерах он не будет инициализирован. Используйте его вместе с моделью element и у вас будет полноценные селекторы в ИЕ6-7-8, подробнее о включениях читайте первый топик.

GuardCat · #33 (**permalink**) 23.05.2012, 23:09

devote, блин, спасибо огромное. Для HTA приложений, которые в XP запускаются в ie6 (а в нашей конторе ещё в непропатченном, в некоторых случаях), лучше не придумаешь. Время появится, оттестирую в таких условиях.

melky · #34 (**permalink**) 24.05.2012, 00:51

Сообщение от devote

Обновил модель селекторов, теперь она стала весить чуть ли не в два раза меньше чем весила. Селектор рассчитан только для ИЕ<9 поэтому был оптимизирован только для ИЕ, в других браузерах он не будет инициализирован. Используйте его вместе с моделью element и у вас будет полноценные селекторы в ИЕ6-7-8, подробнее о включениях читайте первый топик.

Devote, вы знаете такой способ? для IE. правда, ограничен возможностями CSS-движка.

<!DOCTYPE HTML>
<div>div.</div>
<div>div.</div>
<div>div.</div>
<div>div.</div>

<script>
var stylesheet = document.createStyleSheet(), all = document.all;

function find(selector) {
	stylesheet.addRule(selector, "a:b", 0);
	for(var i = 0, result = []; i in all; i += 1) {
*!*
		if (all[i].currentStyle.a === "b") { // магия :)
*/!*
			result.push(all[i]);
		}
	}
	stylesheet.removeRule(0);

	return result;
}

(function(){
	var els = find("div");
	for(i = 0; i in els; i += 1) els[i].style.border = (i+1)+"px green dashed";
})();
</script>

devote · #35 (**permalink**) 24.05.2012, 02:12

GuardCat, всегда рад помочь)

melky, спасибо! Очень интересное решение, я обязательно его рассмотрю и испробую.

GuardCat · #36 (**permalink**) 24.05.2012, 09:35

devote, первые тесты показывают, что как-то неожиданно работает getElementsByClass. По заданному имени класса, до подключения библиотеки находит 3 элемента (как и есть), а с подключением — уже 39.

Пропатченый IE6.
Запрос выглядит так:

document.getElementsByClassName( "needCheck" );

Разметка такая:

<HTA:APPLICATION
  APPLICATIONNAME="Simple credit calc"
  ID="sc"
  VERSION="1.6.0.1"
  BORDER="thick"
  INNERBORDER="no"
  ICON="calculator.ico"
  CONTEXTMENU="no"/>
  
  <head>
    <meta charset = "utf-8">
    <title>Удобный кредитный калькулятор</title>
    <link rel = "stylesheet" href = "styles.css" type = "text/css"></link>
  </head>

  <body>
    <div class = 'header'>Simple credit calc: простой расчёт кредита</div>
    <sub class = "comment">Честно, наглядно, просто.</sub>
	
    <form name = "calc" class = "calc">
      <label>
        <input name = "sum" placeholder = "столько" type = "text" class = "needCheck"></abbr>
        нужная сумма
      </label>
      <label>
        <input name = "term" placeholder = "на столько" type = "text" class = "needCheck">
        срок в месяцах (можно ввести так: «2 года 5 мес.» или «5 лет»)
      </label> 
      <label>
        <input name = "rate" placeholder = "за столько % в год" type = "text" class = "needCheck">
        годовая процентная ставка (не ПСК и не переплата)
      </label>   
       <label>
        <input name = "firstPayment" placeholder = "столько внесу" type = "text" class = "txt" title = "Необязательное поле">
        размер первоначального взноса (добавьте «%», если в процентах)
      </label>
      
      <h3>Тип платежей</h3>
      <label>
        <input type = "radio" name = "paymentType" value = "annuitet" checked></input>
        Все одинаковые (аннуитетные) 
      </label>
      <label>    
        <input type = "radio" name = "paymentType" value = "differ" ></input>
        Уменьшающиеся каждый месяц (дифференцированные) 
      </label>
      <nobr><input id = "go" type = "button" value = " Расчёт"><img src = 'print.png' onclick = 'print();' alt = "Печать расчётов"></nobr>
    </form> 
    <div id = "report"></div>
    
    <div class = "footer">
      <hr noshade size = "2px">
      Кредитный калькулятор, использующий стандартные формулы для расчётов &copy; <a title = "Посмотреть профиль автора на одном из форумов" href = "http://javascript.ru/forum/members/15847-guardcat/">Guardcat</a> 2012    
    </div>
    
	<script src = "spike.js">	</script>
    <script src = "newCredit.js">	</script>
    <script src = "main.js">		</script>
	<script src = "operator.js">	</script> 
  </body>
</html>

devote · #37 (**permalink**) 24.05.2012, 09:53

GuardCat, сейчас посмотрю в чем причина

devote · #38 (**permalink**) 24.05.2012, 10:05

Я исправил ошибку, приношу свои извинения..

B~Vladi · #39 (**permalink**) 24.05.2012, 11:33

Цитата:

"use strict";

Зачем это в коде, осел не поймет же

melky · #40 (**permalink**) 24.05.2012, 11:49

Сообщение от B~Vladi

Зачем это в коде, осел не поймет же

я вообще не понимаю, зачем оно нужно. я и так программирую без тупняков, на которые мне укажет строгий режим выбросом ошибок.

почитав MDN, увидел там ЭТО:

Цитата:

Second, strict mode fixes mistakes that make it difficult for JavaScript engines to perform optimizations: strict mode code can sometimes be made to run faster than identical code that's not strict mode (Firefox 4 generally hasn't optimized strict mode yet, but subsequent versions will).

погуглив сравнения, ничего не нашел. где можно увидеть сравнение скорости?

мои результаты сравнения говорят, что strict mode тормозит выполнение примерно на 1% (стабильно, в чроме, и файрфоксе.). сравнивал на css.js

Форум

Справочник

Discord чат

Курсы javascript