Суть фреймворка
Добрый день.
Возникло задание написать свой js фреймворк. Погуглил я значит, чтобы понять. Но только еще больше запутался. Как я понимаю, фреймворк- это каркас, штука, которая соединяет различные компоненты приложения. только вот прочитал, что jQuery- это фреймворк, а я всегда думал что обычные библиотеки. В чем вообще отличие фреймворков от библиотек и чем суть фреймворков? И может ли кто нибудь привести код самого простого и элементарного(собственног ) фреймворка, который выполняет самую элементарную функцию- чтобы на его примере я понял? Если кто откликнется- спасибо огромное |
|
о_О эээ
правильно ли я понял- чтобы создать новый фреймворк- мне просто надо создать функции, которые будут выполнять какие то действия. потом создать команды, и эти комады приравнять к функция. чтобы когда в скрипте вводилась команда она уже знала заведомо, что она будет делать?(криво как то написал) может кто приведет пример такой хоть из 5-10 строчек? |
Для какой цели вы будете писать Framework?
Если для себя, то это должны придумать вы. |
Вроде уже более- менее разобрался с этим. спасибо за ответы
|
Lynatik,
в вики не судьба посмотреть?)) |
Serg_pnz Смотрел.что то вот пробую.я просто новичок в этом, поэтому все туго идет еще. туго, но интересно)
Возник еще вопрос. зачем фреймворк заключают во временную функцию? (function(window) { })(window); Вот,к примеру, к примеру, скрипт с названием frame.js. если заключать в эту функцию, то не работает. А если не заключать, то все работает, и прямоугольник нормально закрашивается в красный.
(function(window)
{
function IsString(selector)
{
return typeof(selector)=='string';
}
function o_O(selector)
{
//является ли селектор строкой
var obj=IsString(selector)?document.getElementById(selector):selector;
//меняем класс CSS
obj.name=function(clname)
{
this.className=clname;
return this;
}
//цвет фона
obj.pic=function()
{
obj.style.backgroundColor='red';
return this;
}
return obj;
}
})(window);
А вот html с прямоугольником
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Тестирование фреймворка</title>
<script type="text/javascript" src="frame.js"></script>
</head>
<body>
<script language="javascript">
function fon()
{
o_O('id').pic();
}
</script>
<form>
<input type="button" value="первая" onClick="fon()">
<div id="id" style="width:400px; height:300px; border:3px solid black;">
</div>
</body>
</html>
|
Цитата:
в приведённом выше коде -не зачем. ошибки в каждой строке. Я конечно понимаю, что это передранный фрамевёрк + ошибки . копать -с какой целью расширяется, для чего методы возвращают this .... Вобщем учить основы С такими вопросами ещё рано думать о либах и фрамевёрках. Знания о замыканиях и прочем, судя по всему, отсутствуют. Цитата:
|
dmitriymar,
я думал возврат this нужен для того, чтобы можно было подряд несколько методов через точку указывать. так я и учу основы. и периодически спрашиваю то, что не понимаю. нельзя в одночасье стать очень шаристым в чем-то. спасибо Вам за критику) |
Цитата:
Цитата:
http://www.ozon.ru/context/detail/id/6287517/ |
<script type="text/javascript">
function obj(val) {
return{
funct:function(set) {
return{
callback:function() {
return val+' -> '+set;
}
};
}
};
}
alert(obj('Text object').funct('Funct name').callback());
</script>
|
суть фреймворка проще понять так:
в нормальном мире приложение используют библиотеки, в мире фреймворка библиотека использует приложения) иначе говоря - фреймворк реализует некоторую инфраструктуру накладывающую некоторые ограничения на приложения, но взамен дающую некоторые удобства. jquery - это конечно никакой не фреймворк. |
Цитата:
попробую проще (это на грани ИМХО) :
|
тогда уж проще википедию процитировать) каркас предоставляющий точки расширения, реализуя которые, получаешь готовое приложение
|
спасибо всем за ответы.вроде понял суть фреймворков.
Следуя критике dmitriymar сижу читаю основы, но ведь теория скучная без практики. читал читал, так и не совсем понял насчет this. ведь this же вызывает контекст того метода, в котором была вызвана функция. к примеру
var b;
b.col=function()
{
this.style.backgroundColor='black'; // это тоже самое, что и b.slyle.backgroundColor
}
а если обернуть эту функцию в другую, к примеру
function a()
{
var b;
b.col=function()
{
this.style.backgroundColor='black';
return this; //если тут вернуть this,
//то оно опять же будет возвращать b...
}
//и добавить еще что нибудь
b.img=function()
{
this.style.backgroundImage='1.jpg';
return this; //тут тоже возвращает b...
}
return b;
}
this.a=a;//будет как window.a
то, по идее, можно же вызывать a().b.col().img() что я неправильно понимаю? |
Следуя сообщению выше,в частности, вот элементарный скрипт. пожалуйста, поругайте меня и ткните носом в баги.
(function(window){
function o_o(selector)
{
var sel=selector+'';
var id=document.getElementById(sel);
id.col=function()
{
this.style.backgroundColor='red';
return this;
}
id.font=function()
{
this.style.fontSize='100px';
return this;
}
return id;
}
window.o_o=o_o;
})(window);
|
для большего понимания что такое this пара статей с хабра
Ключевое слово this в javascript — учимся определять контекст на практике Пять способов вызвать функцию ну а по коду... за чем вы делаете var sel = selector+''; лучше проверить является ли объект строкой и выдать ошибку, что неправильный параметр, и не дергать лишний раз DOM если все таки искомого селектора не будет var id = document.getElementById(sel); id будет null и определение функций вызовет ошибку так что перед определением надо делать проверку на null |
"FrameWork" - значит собранный каркас для облегчения разработки или создания, какой либо модели для управления.
Как например "JQuery" библиотека содержит в себе компоненты и конкретные задачи. Данный функционал переопределяет принципы разработки на javascript для более удобного использования и разных возможностей, без написания длинных кодов. |
| Часовой пояс GMT +3, время: 13:38. |