지금 생각으로는 이녀석으로 구조화된 programming 을 짜고나서, 배포시점에만 compile 해서 배포하면 될 듯 하다.
goog.require() and goog.provide()
goog.require 는 java 의 import,
goog.provide() 는 java 의 package 같은 느낌이다.
이들의 코드도 base.js 에서 찾아볼 수 있다.
closure/goog/base.js 의 goog.inherit() 코드는 나중에 살펴 보기로 하자.
상속하는 법(inherits)
goog.ui.MenuButton = function(content, opt_menu, opt_renderer, opt_domHelper) {
goog.ui.Button.call(this, content, opt_renderer ||
goog.ui.MenuButtonRenderer.getInstance(), opt_domHelper);
...
};
goog.inherits(goog.ui.MenuButton, goog.ui.Button);
goog.inherits() 는
- goog.ui.MenuButton extends goog.ui.Button)
라고 생각하면 된다.
그리고 constructor 에서 call() 을 사용해서 super class 의 constructor 를 호출해 줘야 한다.
Event 다루기
Event handling 과 관련해서는 ref.2 를 참고하라고 한다.goog.events.listen(...)
를 사용해서 처리한다.
Hello World
ref. 3을 참고해서 hello world 를 한 번 작성해 보자.
먼저 closure library 를 download 받아서 압축을 풀자.
그리고 ref.3 에서 말하는 hello.html 과 hello.js 를 만들어서 놓자. 그러면 아래와 같은 모습이 된다.
closure-library 에 download 받은 library 를 설치하면 된다.
.\closure-library\closure\bin\build\closurebuilder.py --root=closure-library/ --root=mytest/ --namespace="mytest.start"
이런식으로 명령을 내리면, dependency 를 계산 할 수 있다. 결과값으로 아래처럼 보이는데, 아래 보이는 녀석들이 필요하다는 뜻으로 이해하면 될 듯 하다.
c:\Users\namhadmin\Documents\mine\programming\javascript\closure>.\closure-library\closure\bin\build\closurebuilder.py --root=closure-library/ --root=mytest/ --namespace="mytest.start"
C:\Users\namhadmin\Documents\mine\programming\javascript\closure\closure-library
\closure\bin\build\closurebuilder.py: Scanning paths...
C:\Users\namhadmin\Documents\mine\programming\javascript\closure\closure-library
\closure\bin\build\closurebuilder.py: 864 sources scanned.
C:\Users\namhadmin\Documents\mine\programming\javascript\closure\closure-library
\closure\bin\build\closurebuilder.py: Building dependency tree..
closure-library\closure\goog\base.js
closure-library\closure\goog\debug\error.js
closure-library\closure\goog\string\string.js
closure-library\closure\goog\asserts\asserts.js
closure-library\closure\goog\array\array.js
closure-library\closure\goog\dom\classes.js
closure-library\closure\goog\object\object.js
closure-library\closure\goog\dom\tagname.js
closure-library\closure\goog\useragent\useragent.js
closure-library\closure\goog\math\size.js
closure-library\closure\goog\dom\browserfeature.js
closure-library\closure\goog\math\math.js
closure-library\closure\goog\math\coordinate.js
closure-library\closure\goog\dom\dom.js
mytest\start.js
closure-compiler
compiler 는 아래 경로에서 download 받을 수 있다.https://code.google.com/p/closure-compiler/wiki/BinaryDownloads?tm=2
compiler 를 download 받고, closure 로 만든 code 를 compiled code 로 사용할 수 있다. 아래와 같은 command 를 사용하면 된다.
c:\>.\closure-library\closure\bin\build\closurebuilder.py --root=closure-library/ --root=mytest/ --namespace="mytest.start" --output_mode=compiled --compiler_jar=compiler.jar > mytest/start-compiled.js
여기서 namespace 는 main 이 되는 .js 의 namespace 를 적어주면 된다. 그러면 관련돼서 쓰이는(require 에 걸쳐진 녀석들, 즉 dependency 가 있는 녀석들)은 알아서 같이 compile 된다.
주의 :
require 를 잘 적어놓지 않으면, 필요한 녀석이 compiled .js 파일에 제대로 들어가지 않는다.
Dependency
개인적으로 자신의 namespace 를 만들 수 있다. 이 자신만의 namespace 를 사용하기 위해서는 dependency file 이 필요하다. 참고로, Closure Library 는 deps.js 라는 dependency file 을 가지고 있다.dependency 파일은 base.js 에 있는 goog.addDependency() 라는 함수를 이용해서 namespace 의 위치를 등록하고, namespace 와 dependency 가 있는 namespace 들을 등록한다. goog.addDependency() 는 아래와 같다.
goog.addDependency('dom/forms.js', ['goog.dom.forms'], ['goog.structs.Map']);
base.js 가 있는 path 를 기본 path 로 잡고, 그에 대한 상대 적인 path (위에서 "dom/forms.js")를 적으면 된다.
- dom/forms.js 는 namespace 의 relative path 이다.
- goog.dom.forms 가 namespace 이다.
- goog.structs.Map 은 requried namespace 이다.
depswriter.py
이런 dependency file 을 자동으로 만들어 주는 녀석이 depswriter.py 이다.depswriter.py 는 .js 를 읽어서 각 file 에 대해 goog.addDependency() 를 만들어 준다. 이 만든 addDependency 를 모아서 .js file 을 만들 수 있다.
이렇게 만들어진 .js 는 .html 에서 <script> tag 를 이용해서 사용하게 된다. 이 때 base.js 다음에 넣어야 한다. 이렇게 js 가 포함되면, goo.require() 를 통해 namespace 를 호출할 수 있게 된다.
<script src="/closure/goog/base.js"></script>
<script src="/myproject/myproject-deps.js"></script>
<script>
goog.require('myproject.foo');
</script>
<body>
<!-- content -->
<script>
myproject.foo.start();
</script>
</body>
사용 예제
root 에 해당하는 경로는 depswriter.py 를 기준으로 어디에 있는지 알려줘야 한다. 그리고 prefix 의 경우는 아래 그림에서 처럼 addDependency 에 들어가는 prefix 가 된다. 아래와 같은 command 로 만들면 depswriter.py 가 있는 folder 에 myproject-dep*.js 가 만들어 질 것이다.주의할 점은 prefix 는 base.js 파일이 있는 곳을 기준으로 .js 파일의 경로를 찾아갈 수 있도록 해주는 것이다.
c:\...\closure\closure-library\closure\bin\build>depswriter.py --root="..\..\..\..\mytest" > myproject-deps.js
c:\...\closure\closure-library\closure\bin\build>depswriter.py --root_with_prefix="..\..\..\..\mytest .\mytest" > myproject-deps2.js
댓글 없음:
댓글 쓰기