1. tipJS JavaScript MVC Framework 개요

tipJS JavaScript MVC Framework 는 작고 Simple하며 강력한 JavaScript MVC Framework 입니다.
당신은 tipJS 를 이용해 복잡한 구조의 Web Application 을 Controller로 제어되는 Model과 View로 간단하게 구현할 수 있습니다.tipJS JavaScript MVC Framework로 당신의 Web Site의 Maintenance 효율을 월등히 높힐 수 있을 것입니다.

2. tipJS JavaScript MVC Framework Features

복잡한 JavaScript Application을 MVC Pattern 형태로 구현할 수 있습니다.
독립된 작동을 위해 JavaScript Navtive Code 로 개발되어 어떠한 외부 Library도 필요로 하지 않습니다.
다양한 Browser와 호환됩니다.(IE 7/8/9, Chrome, Firefox, Safari, etc…)
다양한 외부 JavaScript Library 와 호환됩니다.(JQuery, ExtJS, etc…)
Browser Cache를 간단하게 제어할 수 있습니다.
외부 JavaScript Library를 효율적으로 관리할 수 있습니다.
Model과 View 만이 아닌 다양한 Timing에서 당신의 Application을 제어할 수 있습니다.
Simple한 HTML Template 기능을 지원하여 사용자 View 를 간단히 생성할 수 있습니다.(version 1.10 부터 지원)
tipJS JavaScript MVC Framework는 최소한의 Rule에 의해 작동하므로 개발형식이 자유롭습니다.
etc…

3. tipJS JavaScript MVC Framework 동작 개념도

tipJS JavaScript MVC Framework structure

tipJS MVC Framework Folder

4. tipJS JavaScript MVC Framework 시작하기

4.1 HelloWorld Application (without HTML Template)

Template를 사용하지 않을 경우 Folder Structure는 아래의 구조를 권장합니다.

Folder StructureXHTML
1
2
3
4
5
/tipJS/tipJS-MVC-x.xx.js
/tipJS/tipJS.config.js
/examples/helloWorld/index.html
/examples/helloWorld/define.js
/examples/helloWorld/controllers/hello.js

/tipJS/tipJS.config.jsJavaScript
1
2
3
4
5
tipJS.config({
    applicationPath:{
        helloWorld : '/examples/helloWorld/helloWorld'
    }
});

/examples/helloWorld/index.htmlXHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
<script type="text/Javascript" src="/tipJS/tipJS-MVC-x.xx.js">
</script>
<script>
window.onload = function(){
    tipJS.loadApp(["helloWorld"]);
};
</script>
<body>
    <div id="contents"></div>
    <input type="button" value="click me"
    onclick="tipJS.action('helloWorld.hello','tipJS.com')"/>
</body>
</html>

/examples/helloWorld/define.jsJavaScript
1
2
3
4
5
6
tipJS.define({
    name:"helloWorld",
    controllers:[
        "hello.js"
    ]
});

/examples/helloWorld/controllers/hello.jsJavaScript
1
2
3
4
5
6
7
tipJS.controller({
    name : "helloWorld.hello",
    invoke:function(params){
        document.getElementById('contents').innerHTML 
        = "Hello World!! from " + params;
    }
});

View this example (without HTML Template)

4.2 HelloWorld Application (with HTML Template)

Template를 사용할 경우 Folder Structure는 아래의 구조를 권장합니다.

Folder StructureXHTML
1
2
3
4
5
6
/tipJS/tipJS-MVC-x.xx.js
/tipJS/tipJS.config.js
/examples/helloWorldTpl/index.html
/examples/helloWorldTpl/define.js
/examples/helloWorldTpl/controllers/hello.js
/examples/helloWorldTpl/templates/helloWorld.tpl

/tipJS/tipJS.config.jsJavaScript
1
2
3
4
5
tipJS.config({
    applicationPath:{
        helloWorld : '/examples/helloWorldTpl/helloWorld'
    }
});

/examples/helloWorldTpl/index.htmlXHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
<script type="text/javascript" src="/tipJS/tipJS-MVC-x.xx.js">
</script>
<script>
window.onload = function(){
    tipJS.loadApp(["helloWorldTpl"]);
};
</script>
<body>
    <div id="contents"></div>
    <input type="button" value="click me"
    onclick="tipJS.action('helloWorldTpl.hello','tipJS.com')"/>
</body>
</html>

/examples/helloWorldTpl/define.jsJavaScript
1
2
3
4
5
6
tipJS.define({
    name:"helloWorldTpl",
    controllers:[
        "hello.js"
    ]
});

/examples/helloWorldTpl/templates/helloworld.tplXHTML
1
2
3
<h1>
<@= data.helloworld @>
</h1>

/examples/helloWorldTpl/controllers/hello.jsJavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
tipJS.controller({
    name : "helloWorldTpl.hello",
    invoke:function(params){
        var _templateConfig = {
            url:"/examples/helloWorldTpl/templates/helloWorld.tpl",
            renderTo:"contents",
            data:{
                helloworld:"Hello World from " + params
            }
        };
        this.renderTemplate(_templateConfig);
    }
});

View this example (with HTML Template)

5. Reference

6. tipJS.com – JavaScript MVC Framework Examples

GET OR POST 확실히 나누어 쓰자 (0)	2012.11.02
팝업창 닫기 // close (0)	2012.09.26
순수 HTML typing 게임 (0)	2012.08.16
자바 스크립트를 이용 할때 꼭 한번 읽어야 할것 (0)	2012.06.20
물고기 소스 (0)	2012.06.15

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

JAVA와 놀자

자바스크립트 MVC 패턴 구현 하기.

tipJS Javascript MVC Framework Guide

1. tipJS JavaScript MVC Framework 개요

2. tipJS JavaScript MVC Framework Features

3. tipJS JavaScript MVC Framework 동작 개념도

4. tipJS JavaScript MVC Framework 시작하기

4.1 HelloWorld Application (without HTML Template)

4.2 HelloWorld Application (with HTML Template)

5. Reference

6. tipJS.com – JavaScript MVC Framework Examples

'자바스크립트' 카테고리의 다른 글

카테고리

태그목록

달력

링크

글 보관함

티스토리툴바