Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   свой JS фреймворк с блэкджеком. заминочка. (https://javascript.ru/forum/misc/31643-svojj-js-frejjmvork-s-blehkdzhekom-zaminochka.html)

assert 15.09.2012 16:03

свой JS фреймворк с блэкджеком. заминочка.
 
итак решил написать свой JS фреймворк. прошу избавить меня от ответов на вопросы "зачем? ведь есть же JQuery/prototype/.." и тд. если вам очень очень хочется спросить это то считайте я решил досконально изучить нативный JS..:) теперь к делу.написал несколько методов и тут возникла Заминочка: не могу понять почему не работает метод css. в связи с этим просьба помочь. что исправить в нем? вроде метод проще некуда, а мучаюсь вот с ним.
исходный код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml"  lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<style type="text/css">
.defaultstyle{
font:normal 18pt arial;
text-decoration:none;
color: green; /* Цвет текста */
font-weight: bold; /* Жирное начертание */
}
.newstyle{
font:italic 14pt arial;
text-decoration: underline;
color: red;
}
</style>
<body>
<div id="test" class="defaultstyle" onmouseover="aa()">
привет
    <ul>
        <li>a</li>
        <li>b</li>
    </ul>
</div>
<script>
// функция проверяет является ли параметр строкой
function isstr(param) {
    return typeof(param) == 'string';
}

function $(param) {
    var obj = isstr(param) ? document.getElementById(param) : param;
    obj.child = function(tagName) {
        return this.getElementsByTagName(tagName);
    }
    obj.append = function(param) {
        return this.appendChild(isstr(param) ? document.createElement(param) : param);
    }
    obj.parent = function() {
        return this.parentNode;
    }
// вот собственно сам метод css на вход принимает имя нового класса //css который нужно применить вместо старого
    obj.css = function(classn) {
	this.className = "classn";
	//console.log("тут работает");
	return this;
	}
     obj.empty = function() {
        while(this.firstChild) this.removeChild(this.firstChild);
        return this;
    }
    return obj;
}
//функция выполняемая при наведении мыши на объект
function aa(){
$('test').css("newstyle");
}
</script>
</body>
</html>

dmitriymar 15.09.2012 16:26

работает, но когда вы запускаете страницу и опускаете курсор -вы автоматом делаете овер на контейнеры-поскольку они растянуты на всю страницу и поджаты к верху страницы.
вопрос -вы хоть понимаете что идя таким образом -вы память браузера выжрете? у вас для каждого вызова своя цепочка видимостей(глобальный объект,объект активации, объект замыкания)-какая не не будет уничтожаться поскольку у вас замыкание?

assert 15.09.2012 18:11

Цитата:

вопрос -вы хоть понимаете что идя таким образом -вы память браузера выжрете? у вас для каждого вызова своя цепочка видимостей(глобальный объект,объект активации, объект замыкания)-какая не не будет уничтожаться поскольку у вас замыкание?
про память браузера, про то что желательно кеширование сделать знаю но цель сейчас сделать просто так чтобы просто хоть как нибудь работало. я же пока не планирую использовать его в реальном проекте. просто надо осконально изучить JS:)

Цитата:

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

Dim@ 15.09.2012 18:16

assert,
:blink: :blink:
45 строка должна быть не
this.className = "classn";

а
this.className = classn;

Dim@ 15.09.2012 18:19

P.S. удачи в учении :)

melky 15.09.2012 18:36

Цитата:

Сообщение от assert
просто надо осконально изучить JS

эх ... чем дальше в лес, тем больше понимаешь, что надо учить не JS, а способы проектирования \ всякие паттерны, алгоритмы.

Что-то я приуныл. Удачи в изучении!

nerv_ 15.09.2012 18:44

это не фрейморк, это конструктор :)

Цитата:

Сообщение от melky
эх ... чем дальше в лес, тем больше понимаешь, что надо учить не JS, а способы проектирования \ всякие паттерны, алгоритмы.

язык надо знать. Но, знание языка само по себе без представления о том, как выстраивать алгоритмы, бесполезно.

ну, как-то так )

dmitriymar 15.09.2012 18:57

Цитата:

Сообщение от assert
про то что желательно кеширование сделать

оно у вас есть и так
Цитата:

Сообщение от assert
var obj = isstr(param) ? document.getElementById(param) : param;

и эта строка одновременно и ваша проблема.+ дальше не кросбраузерно.

assert 15.09.2012 20:13

Цитата:

это не фрейморк, это конструктор
эмм что то я не уловил. а в чем разница? и как написать фреймворк?

assert 16.09.2012 18:59

по ходу написания возник еще вопрос:
как проверить наличие css класса у элемента? я хочу реализовать метод аналогичный hasClass() в jQuery


Часовой пояс GMT +3, время: 08:33.