Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Библиотека для своего сайта (https://javascript.ru/forum/misc/23034-biblioteka-dlya-svoego-sajjta.html)

Vladiator 09.11.2011 19:42

Библиотека для своего сайта
 
Здравствуйте.
Для сайта делаю свой тулкит - чтобы не было ничего лишнего, при этом, всё работало именно так, как надо мне... да и просто, хотелось бы понять, как это работает. Суть проста - надо, чтобы можно было работать с ней как просто используя $.function(), так и $(element).function. Как такое реализовать? Просмотрел jQuery - код слишком большой, в Гугле нашёл что-то похожее, но не работает по $(element).function.
Спасибо.

DjDiablo 09.11.2011 21:32

Ваш вопрос понять непросто.
Я понял так, что вам нужно что-то вроде этого

// создадим функцию конструктор которая будет принимать параметры и возвращать обьект
f=function(par1){
         // присвоим переданное значение, св-ву param (это же типо конструктор, должны же мы чтото присвоить :) )
         f.param=par1;  
         return f;
}

// param - это значение по умолчанию
f.param="Hello world";

// метод обьекта f
f.test =function (){
	alert (f.param);
        return this;
}

f.test2=function(){
   alert ("bla bla =" + f.param);
}
//========== проверка. =============//

// Обращение к обьекту
alert("эксперемент 1");
f.test();

alert("эксперемент 2");
// Обращение к двум функциям по цепочке
f.test().test2();


// обращение к функции
alert("эксперемент 3");
f("прощай жестокий мир").test();


// обращение к функциям по цепочке
alert("эксперемент 4");
f("прощай жестокий мир").test().test2();


P.S. Это даже близко не аналог Jquery, jquery каждый раз при обращении к $("селектор") создаёт новый обьект jquery.
Данный же пример работает с одним и тем же обьектом постоянно.

Vladiator 10.11.2011 14:00

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

Vladiator 10.11.2011 22:47

Что-то придумал. Но, почему-то, при втором вызове - Type Error "called_non_callable".
LaMF = function(q) {
	return new LaMF.c.init(q);
}

LaMF.c = {
	init: function(q) {
		LaMF = {
			q: "Hello World",
		
			test: function () {
				console.log(q);
			}
		};
		LaMF.q = q;
		return LaMF;
	}
}

Vladiator 10.11.2011 23:01

(function( window, undefined ) {
LaMF = function(q) {
	return new init(q);
}

init = function(q) {
	LaMF = {
		q: "Hello World",
	
		test: function () {
			console.log(q);
		}
	};
	LaMF.q = q;
	return LaMF;
}
window.$ = LaMF;
})( window );

Так работает.

Vladiator 10.11.2011 23:11

Не работает через $ без скобок. Вроде работало...

DjDiablo 11.11.2011 00:34

Интересно как оно работало ?
для того чтобы метод q появился в laMF, нужно выполнить init
а если init выполнится он затрёт функию laMF, обьектом.

DjDiablo 11.11.2011 01:26

Одно из решений которые приходят в голову, это копировать свойства из LaMF в конструктор.

пример
<script>

    (function( window, undefined ) {
     LaMF = function(q) {

            // размещаем конструктор прямо внутри функции
            return new (function(q1){  
                
                    // копируем свойства из LaMF в this
                    extend (this,LaMF);
                    this.test1=q1;
            })(q)	
     }

     LaMF.test1="i test1";
     LaMF.test2="i test2";

     })( window );

</script>


естественно тебе потребуются, метод для копирования свойств, extend. Написать его придётся самим.

DjDiablo 11.11.2011 01:44

Лови рабочий вариант.

(function( window, undefined ) {

      // метод extend, почти аналогичен методу в jquery (не поддерживает глубокое копирование)
      function extend(target,options){
             for ( name in options ) {
                        src = target[ name ];
                        copy = options[ name ];
	
                        // если св-во уже есть, мы его не копируем
                        if ( src === copy ) {
                                    continue;
                        }
                        if ( copy !== undefined ) {
                                  target[ name ] = copy;
                        }
          }
           return target;
       }



     LaMF = function(q) {

        // размещаем конструктор прямо внутри функции
        return new (function(q1){  
                
                // копируем свойства из LaMF в this
                extend (this,LaMF);
                
                this.test1=q1;
        })(q)	
     }

     LaMF.test1="Я оригинальное свойство";
     LaMF.test2="Если ты меня видешь, значит я скопирывалось";

	window.$=LaMF;
     })( window );

// создаём новый обьект, и смотрим свойство
alert( $("Я установленное свойство" ).test1);

// смотрим свойство в оригенале
alert( $.test1 );

// проверяем доступны ли нам скопированные свойства
alert( $("бла бла").test2 );


Ещё одно, быстродействующие решение на прототипах. (фурычит под хром, оперу и firefox, под ie код надо модифицировать)

(function( window, undefined ) {

     LaMF = function(q) {

        // размещаем конструктор прямо внутри функции
        return new (function(q1){                  
                this.__proto__ = LaMF;
                this.test1=q1;	
        })(q)	
     }

     LaMF.test1="Я оригинальное свойство !";
     LaMF.test2="Если ты меня видешь, значит я скопировалось !";

	window.$=LaMF;
     })( window );

// создаём новый обьект, и смотрим свойство
alert($("Я установленное свойство !").test1);

// смотрим свойство в оригенале
alert($.test1);

// проверяем доступны ли нам скопированные свойства
alert($("1").test2);

Vladiator 11.11.2011 18:29

Спасибо! Так как большая часть сайта всё равно пока не работает под IE (много HTML5 и CSS3), буду использовать второй вариант.


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