Controller

Controller의 호출은 아래의 방식으로 이루어 집니다.

• tipJS.action("controller name", parameter)
• tipJS.action.controllerName(parameter)

tipJS.controller method 에서 정의된 Controller 처리가 실행되기 전에 tipJS.app method에서 정의한 beforeController method 가 실행되며 Controller 처리가 모두 완료된 후에 define.js에서 정의한 afterController method가 실행됩니다.

Controller Tutorial [src] [view]

tipJS.action method의 두번째 argument 는 tipJS.app method에서 정의한 beforeController method, afterController method 와 호출된 Controller의 beforeInvoke, invoke, afterInvoke, exceptionInvoke method 에서 input argument로 사용 가능합니다.

beforeController / afterController method 안에서 this.controllerName 속성으로 현재 처리중인 controller 명이 참조 가능합니다.

tipJS.app({
    ...
    onLoad:function(params){
        // call Controller
        tipJS.action("someController", "someValue");
        // or
        tipJS.action.someController("someValue");
    },
    beforeController:function(params){
        console.log(params); // result is "someValue"
        console.log(this.controllerName); // result is "someController"
    },
    afterController:function(params){
        console.log(params); // result is "someValue"
        console.log(this.controllerName); // result is "someController"
    },
    ...
});

// controllers/someController.js
tipJS.controller("someController", {
    beforeInvoke:function(params){
        console.log(params); // result is "someValue"
    },
    invoke:function(params){
        console.log(params); // result is "someValue"
    },
    afterInvoke:function(params){
        console.log(params); // result is "someValue"
    },
    exceptionInvoke:function(exception, params){
        console.log(params); // result is "someValue"
    }
});

tipJS.action method 의 호출 위치는 tipJS.loadApp method 호출 이후 자유롭습니다.
Controller 는 보통 아래와 같은 구성으로 이루어 집니다.

// controllers/someController.js
tipJS.controller("someController", {
    beforeInvoke:function(params){
    ....
    },
    invoke:function(params){
        console.log("invoke Start");
        // load Application Model
        var initModel = this.getModel("initModel");
        // load Application ViewModel
        var initView = this.getView("initView");

        initView.drawBody(bodyHtml);

        console.log("invoke Done");
    },
    afterInvoke:function(params){
        ....
    },
    exceptionInvoke:function(exception, params){
        alert(exception);
    }
});

tipJS.app({
    ...
    onLoad:function(params){
        tipJS.action("someController", params);
    },
    ...
});

Controller는 기본 4가지의 method 가 조건에 의해 실행됩니다.

기본적으로 Controller 는 tipJS Javascript MVC Framework에 의해 beforeInvoke, invoke, afterInvoke method 의 순서로 자동호출되며 exceptionInvoke method 는 Controller에 exceptionInvoke method가 정의되어 있고 Controller 실행중 exception 이 발생할 경우에만 호출됩니다.

물론 Controller 내부에서 사용자가 작성한 method 를 호출하는 것도 가능합니다.

// controllers/someController.js
tipJS.controller("someController", {
    ...
    invoke:function(params){
        this.userFn();
    },
    userFn:function(){
        ...
        Some Process..
        ...
    }
});

Controller 선언시 async 속성을 true로 설정하면 Controller 호출시 비동기 모드로 작동합니다. delay 속성을 1/1000 초단위 로 지정하여 비동기 지연시간을 지정할 수 있습니다.

// controllers/someController.js
tipJS.controller("someController", {
    async:true, // AnSynchronized Controller
    delay:500, // 0.5 sec.
    ...
    invoke:function(params){
        this.userFn();
    },
    userFn:function(){
        ...
        Some Process..
        ...
    }
});

아래는 Controller 에 설정된 속성에 대한 설명입니다.(기본 4 method 이외)

• async
  Controller 동작을 비동기모드로 실행할것인지 설정합니다.(true – 비동기모드)
• delay
  Controller 비동기모드 시간을 1/1000 초 단위로 지정합니다.(defalut:15)
• getModel(ModelName)
  tipJS.model method에서 정의한 Application Model Object 를 load 합니다.
• getView(ViewName)
  tipJS.view method에서 정의한 Application ViewModel Object 를 load 합니다.
• render(options)
  HTML Template 항목 참고
• getById(id)
  document.getElementById 와 동일합니다.
• getByName(name)
  document.getElementsByName 와 동일합니다.
• getByTag(tagName)
  document.getElementsByTagName 와 동일합니다.

Model

tipJS JavaScript MVC Framework 서 Model Object 는 필요에 따라 구현하시기 바랍니다. Model 에서는 같은 Layer인 다른 Model을 load할 수 있습니다.

Model 정의시 Framework에 의해 자동으로 정의되는 method는 다음과 같습니다.

• __init
  __init 메서드는 선언후 해당 Model 이 getModel 메서드에 의해 호출되어 생성되는 시점에서 단 한번 실행되는 메서드 입니다.
• getModel(modelName)
  tipJS.model method에서 정의한 Application Model을 반환합니다.

자동으로 정의되는 method가 필요치 않을 경우 VO(Value Object) Model 을 사용하시기 바랍니다. 자세한 설명은 VO(Value Object) Model 항목을 참고하시기 바랍니다.
Model Tutorial [src] [view]

// models/someModel.js
tipJS.model("someModel", {
    __init:function(){
        // Object 생성시 framework에 의해 한번만 실행되고 소멸한다.
        ...
    },
    properties:...
    someMethods:function(){
        var someModel2 = this.getModel("someModel2");
        ... some process ...
    }
});

// models/someModel.js
tipJS.model("someModel", {
    __init:function(){
        // Object 생성시 framework에 의해 한번만 실행되고 소멸한다.
        ...
    },
    someValue:"foo"
});

// controller One
tipJS.controller("someController1", {
    ...
    invoke:function(params){

        // load Application Model(normal)
        var someModel = this.getModel("someModel");
        console.log(someModel.someValue); // "foo"
        someModel.someValue = "bar";

        // load Application Model(synchronized)
        var someModelSync = this.getModel("someModel", true);
        console.log(someModelSync.someValue); // "foo"
        someModelSync.someValue = "bar";
    },
    ...
});

// controller Two
tipJS.controller("someController2", {
    ...
    invoke:function(params){

    // load Application Model(normal)
    var someModel = this.getModel("someModel");
    console.log(someModel.someValue); // "foo"

    // load Application Model(synchronized)
    var someModelSync = this.getModel("someModel", true);
    console.log(someModelSync.someValue); // "bar"
    },
    ...
});

// models/modelVO.js
tipJS.model("modelVO", {
    __init:function(){
    // Object 생성시 framework에 의해 한번만 실행되고 소멸한다.
        ...
    },
    value1 : "123",
    value2 : "abcd"
});

// controllers/someController.js
tipJS.controller("someController", {
    ...
    invoke:function(params){
        console.dir(this.loadModel("someModel"));
        console.dir(this.loadModel("modelVO"));
    },
    ...
});

tipJS.model("modelParent", {
    parent1 : "modelParent",
    parentFn : function() {
        console.log(this.parent1); // modelParent
    }
});

tipJS.model("modelChild",{
    __extend : "modelParent",
    child1 : "modelChild",
    childFn : function() {
        console.log(this.child1); // modelChild
    }
});

// controllers/someController.js
tipJS.controller("someController", {
    ...
    invoke : function() {
        var modelChild = this.getModel("modelChild");
        modelChild.parentFn(); // modelParent
        modelChild.childFn(); // modelChild
    },
    ...
});

View Model

tipJS JavaScript MVC Framework 서 ViewModel Object 는 필요에 따라 구현하시기 바랍니다.
ViewModel 은 HTML Template 기능을 Controller로 부터 분리하여 수행하기 위한 Model 입니다. ViewModel 에서는 같은 Layer인 다른 ViewModel을 load할 수 있습니다.

ViewModel 정의시 Framework에 의해 자동으로 정의되는 method는 다음과 같습니다.

• __init
  __init 메서드는 선언후 해당 ViewModel 이 getView 메서드에 의해 호출되어 생성되는 시점에서 단 한번 실행되는 메서드 입니다.
• getView(viewName)
  tipJS.model method에서 정의한 Application ViewModel을 반환합니다.
• getById(id)
  document.getElementById 와 동일합니다.
• getByName(name)
  document.getElementsByName 와 동일합니다.
• getByTag(tagName)
  document.getElementsByTagName 와 동일합니다.
• render(options)
  HTML Template 항목을 참고합니다.

View(HTML Template) Tutorial [src] [view]

// views/someView.js
tipJS.view("someView", {
    properties:...
    methods:function(){
        ...
    }
});

// controllers/someController.js
tipJS.controller("someController", {
    ...
    invoke : function() {
    var modelChild = this.getModel("modelChild");
        modelChild.parentFn(); // modelParent
        modelChild.childFn(); // modelChild
    },
    ...
});

tipJS.view("viewParent", {
    parent1 : "viewParent",
    parentFn : function() {
        console.log(this.parent1); // viewParent
    }
});

tipJS.view("viewChild",{
    __extend : "viewParent",
    child1 : "viewChild",
    childFn : function() {
        console.log(this.child1); // viewChild
    }
});

// controllers/someController.js
tipJS.controller("someController", {
    ...
    invoke : function() {
        var viewChild = this.getView("viewChild");
        viewChild.parentFn(); // viewParent
        viewChild.childFn(); // viewChild
    },
    ...
});

HTML Template

tipJS JavaScript MVC Framework는 Model과 View의 분리를 위한 HTML 형식의 Template 기능을 제공합니다.

render method 는 HTML Template 에 data를 맵핑한후 renderTo 속성에 id 값이 지정되어 있으면 해당 element에 HTML Template 의 내용을 출력한 후 data가 mapping된 html 을 반환합니다. 한번 읽어들인 HTML template file은 tipJS에 의해 cache 처리됩니다. 만약 template의 cache 처리를 원하지 않을경우에는 tipJS.app method 의 templateCache 속성값을 false 로 설정하시기 바랍니다. (default:true)

renderTo 속성은 생략 가능하며 render method는 항상 data가 mapping된 html 을 반환합니다.

<-- index.html -->
<html>
    <head>
        <script type="text/javascript" src="/tipJS/tipJS.min.js"></script>
        <script>
            window.onload = function(){
                tipJS.loadApp(["someApplication"]);
            };
        </script>
    <body>
        <div id="target_id"></div>
    </body>
</html>

<-- someTpl.tpl -->
<h1>
<@= data.someString @>
</h1>
<ul>
<@ for(var i=0; i<data.someArray.length; i++) { @>
    <li> <@= data.someArray[i] @> </li>
<@ } @>
</ul>

// controllers/someController.js
tipJS.controller("someController", {
    invoke:function(params){
        var _templateConfig = {
            url:"/templates/someTemplate.tpl",
            renderTo:"target_id",
            data: {
                someString:"some String " + params,
                someArray:["some1","some2","some3"]
            }
        };
        var returnHTML = this.render(_templateConfig); // return html
    }
});

ViewModel(HTML Template) Tutorial [src] [view]

<-- someTpl.tpl -->
<div>
    <ul>
    <@ for(var i=0; i<data.length; i++) { @>
        <@ if (i != 0) {@><li class="<@=( (i==2) ? "foo":"bar" )@>"><@= data[i] @></li>
        <@}else{@><div class="<@=( (i==2) ? "foo":"bar" )@>"><@= data[i] @></div><@}@>
    <@ } @>
    </ul>
</div>

ViewExtend(HTML Template) Tutorial [src] [view]

HTML Template 에서의 값의 출력은 <@= value @> 사이에서 이루어 지며, 루프등의 제어는 <@ for(…) @> 사이에서 이루어집니다. 종료태그 @> 앞에 종료문자(;)를 넣을 경우 에러를 발생하니 주의하십시오.

render method의 argument인 설정 Object의 속성은 다음과 같습니다.

• url
  HTML Template file의 url를 정의합니다. file의 extention name에 대한 제한은 없습니다.
• renderTo
  HTML Template의 내용이 data속성에 의해 mapping 된 후에 반환되는 html이 출력 될 html요소의 id를 정의합니다.(생략가능)
• data
  HTML Template 에서 정의한 data변수에 mapping될 data를 정의합니다.

단순히 html string 과 data object 를 통해 렌더링된 html 을 받을 수도 있습니다.

tipJS.controller("someController", {
    invoke:function(params){
        var htmlString = "<div><@= data.foo @></div>";
        var data = {
            foo:"foo"
        };
        var returnHTML = this.render(htmlString, data); // return html
    }
});

[[#template01]] <!-- id : "template01" -->
<ul>
    <li><@= data.foo @></li>
</ul>
[[#template02]] <!-- id : "template02" -->
<span><@= data.bar @></span>

// someController1.js
tipJS.controller("someController1", {
    invoke : function(params){
        var _templateConfig = {
            url:"/templates/someTemplate.tpl",
            renderTo:"target_id",
            tplId:"template01",  // id : "template01"
            data:{
                foo:"foo"
            }
        };
        var returnHTML = this.render(_templateConfig); // return template01 html
    }
});

// someController2.js
tipJS.controller("someController2", {
    invoke : function(params){
        var _templateConfig = {
            url:"/templates/someTemplate.tpl",
            renderTo:"target_id",
            tplId:"template02", // id : "template02"
            data:{
                bar:"bar"
            }
        };
        var returnHTML = this.render(_templateConfig); // return template02 html
    }
});

AOP

여기서는 tipJS JavaScript MVC Framework 를 통한 AOP(Aspect-Oriented Programming) 기능을 설명합니다.
AOP 를 활성화 하기 위해서 tipJS.app method 에 interceptors 속성을 추가합니다.

tipJS.app({
    ...
    interceptors:[
        "interceptor.js"
    ]
    ...
});

application 폴더 하위에 interceptors 폴더를 작성하고 interceptor JS 파일을 작성합니다. interceptor 의 등록은 tipJS.interceptor method를 사용합니다.

tipJS.interceptor("interceptor", {
    target:"controllers",
    before:function(){
        console.log("interceptor.before : " + this.msg);
    },
    after:[
        function(){
            console.log("interceptor.after #1 : " + this.msg);
        },
        function(){
            console.log("interceptor.after #2 : " + this.msg);
        }
    ]
});

target 속성은 적용할 범위(point cut)를 의미합니다.

예를 들어 Model 전체에 적용할 때는 models 를 (ex:”models”), 특정 Model을 지정하고 싶을때는 Model 명을 (ex:”models.modelName” or “models.modelNam*”), 특정 Model의 특정 method 를 지정하고 싶을때는 method 명을(ex:”models.modelName.getName” or “models.modelName.get*”) 작성합니다.

target 속성은 배열타입으로 복수개 지정 가능합니다. 상기 before, after 안의 this context는 target 의 context를 의미합니다. before, after 또한 배열타입으로 복수개 지정 가능합니다.

아래와 같은 Controller 가 있다고 가정한다면

tipJS.controller("someCtrler", {
    msg:"some Message",
    invoke:function(params){
        console.log( this.msg ); // "some Message"
    }
});

상기의 Controller 의 실행결과는 아래와 같이 console에 출력됩니다.

interceptor.before : some Message
some Message
interceptor.after #1 : some Message
interceptor.after #2 : some Message

tipJS.controller("someCtrler", {
    msg:"some Message",
    invoke:function(params){
        console.log( this.msg ); // "some Message"
    }
});

tipJS.interceptor("interceptor1", {
    order:1,
    target:"controllers",
    before:function(){
        console.log("interceptor.before #1-1 : " + this.msg);
    },
    after:[
        function(){
            console.log("interceptor.after #1-1 : " + this.msg);
        },
        function(){
            console.log("interceptor.after #1-2 : " + this.msg);
        }
    ]
});

tipJS.interceptor("interceptor2", {
    order:2,
    target:"controllers",
    before:function(){
        console.log("interceptor.before #2-1 : " + this.msg);
    },
    after:[
        function(){
            console.log("interceptor.after #2-1 : " + this.msg);
        },
        function(){
            console.log("interceptor.after #2-2 : " + this.msg);
        }
    ]
});

interceptor.before #1-1 : some Message
interceptor.before #2-1 : some Message
some Message
interceptor.after #1-1 : some Message
interceptor.after #1-2 : some Message
interceptor.after #2-1 : some Message
interceptor.after #2-2 : some Message

ETC

tipJS.app({
    ...
    developmentHostList:[
        'localhost'
        ,'127.0.0.1'
        ,'tipjs.com'
    ],
    ...
});

var someValue = someMethod();
tipJS.debug("someValue is " + someValue);

tipJS.app({
    ...
    releaseHostList : [
        "sub1.example.com",
        "sub2.example.com",
        "sub3.example.com"
    ],
    ...
});

tipJS.benchmark.mark("point1");
...
tipJS.benchmark.mark("point2");
tipJS.benchmark.elapsedTime("point1", "point2");

tipJS.benchmark.mark("point1");
...
tipJS.benchmark.mark("point2");
tipJS.benchmark.elapsedTime("point1", "point2", function(startName, endName, startTime, endTime, elapsedTime){
    ...
});

tipJS.app({
    ...
    localSet:true,
    ...
});

// lang/ko.js
tipJS.localSet({
    "Save":"저장",
    "Load":"불러오기"
});

// lang/ja.js
tipJS.localSet({
    "Save":"保存",
    "Load":"読み込み"
});

...
tipJS.lang = "ja"; // set to Japaness
tipJS.loadApp();
...

tipJS.controller("someCtrler", {
    invoke:function(params){
        console.log( tipJS.msg("Save") ); // result "저장"
    }
});

tipJS.model({
    __name : "someApp.someModel",
    someMethod:function(params){
        console.log( tipJS.msg("Load") ); // result "불러오기"
    }
});

tipJS.model("someModel", {
    someMethod:function(params){
        console.log( tipJS.msg("Some Message") ); // result "Some Message"
    }
});

Tutorials

• Controller [src] [view]

• Router [src] [view]

• AOP [src] [view]

• Model [src] [view]

• ModelSync [src] [view]

• ModelVO [src] [view]

• ModelExtend [src] [view]

• View(HTML Template) [src] [view]

• ViewExtend(HTML Template) [src] [view]

Examples

• basicTemplate [src] [view]

• myBatisLogParser [src] [view]

• todoMVC with external template [src] [view]

• todoMVC with internal template [src] [view]

• base64 image encoder [src] [view]

• ImageViewerOnTab(chrome extension) [src]

Contributors

• 

  tipJS

  @tipJS pekuid
• 

  javarouka

  @YiHanghee hanghui.i
• 

  coma

  @Coma333 jeongbu.yun
• 

  iMaZiNe

  @iMaZiNe80 imazine80
• 

  rkJun

  @rkJun juntai81