cordova-1.9.0.js 파악하기 (1) - iOS

Phonegap은 Web App 의 한계를 개선하여, 

각 장비의 기능을 사용할 수 있는 App 의 장점을 활용 할 수 있는 하이브리드 앱 개발 프레임워크이다.

Phonegap 에 대한 설명 및 동작원리는 검색 사이트에서 찾아보는 걸로... 

Phonegap은 Android, iOS, BlackBerry, Window Mobile 에 대해서 지원하고 있으며, 

WebView와 App 간의 정보 공유를 할 수 있다.

Phonegap은 Javascript와 각 OS별 Source 로 구성되어 있으며, 

먼저 Javascript 파일인 cordova-1.9.0.js 에 대해서 공부하도록 하겠다.

 

▶ Cordova for iOS - 기본 내용

Cordova js 의 경우 Javascript 의 클래스, 클로져, 모듈 패턴 등을 사용해서 작성되었다.

객체 지향 언어인 Java, C# 에서 보았던 객체 지향적 프로그래밍을 Javascript 에 비슷하게 구현하였으며,

모듈패턴을 이용해서 private, public 을 비슷하게 구현하여, 작성되었습니다.

 

;(function() {

// file: lib/scripts/require.js
var require,
    define;

(function () {
    var modules = {};

    function build(module) {
        var factory = module.factory;
        module.exports = {};
        delete module.factory;
        factory(require, module.exports, module);
        return module.exports;
    }

    require = function (id) {
        if (!modules[id]) {
            throw "module " + id + " not found";
        }
        return modules[id].factory ? build(modules[id]) : modules[id].exports;
    };

    define = function (id, factory) {
        if (modules[id]) {
            throw "module " + id + " already defined";
        }

        modules[id] = {
            id: id,
            factory: factory
        };
    };

    define.remove = function (id) {
        delete modules[id];
    };

})();

//Export for use in node
if (typeof module === "object" && typeof require === "function") {
    module.exports.require = require;
    module.exports.define = define;
}

Line 1 : 클러져(Scope에 제약을 받지 않는 변수들을 포함하고 있는 코드 블럭) 로 작성되었으며, 

              js 로딩시 실행되도록 작성되어 있다.

Line 4, 5 : require, define 은 cordova 내부 private 전역객체로 설정, 내부 함수에 의해서 정의된다.

Line 8 : modules 는 private 객체

Line 10 : build 함수는 require 에서 호출되며, 파라메터로 전달받은 함수를 이용한다.

 

function build(module) {
        // 전달받은 module 객체의 factory 함수를 factory 지역변수와 연결한다.
        // 값이 아닌 주소 전달이므로
        var factory = module.factory;
        // module의 exports 빈 객체를 생성한다.
        module.exports = {};
        // 메모리 절약을 위해 module의 factory 는 삭제한다. 
        // module.factory 와 function 의 연결고리를 끊는것이지,
        // function 을 삭제하는 것이 아니다.
        delete module.factory;
        // 위에서 module.factory 함수와 지역변수 factory 를 연결하였으므로
        // module에서 factory 를 삭제하였더라도 
        // 지역변수 factory 는 사용할 수 있다.
        // require, module 을 이용해서 module.exports 에 객체를 저장한다.
        // factory 함수는 module.exports 에 해당 내용을 저장한다.
        factory(require, module.exports, module);
        // factory 함수에서 저장한 module.exports를 리턴한다.
       // 만약 module.exports 가 생성되지 않을 경우 오류가 발생하므로
       // 위에 module.exports = {}; 를 통해서 오류를 방지한다.
        return module.exports;
    }

Line 18 : 전달받은 id 와 같은 id를 가진 modules 의 factory 함수가 존재할 경우 build 혹은 exports 객체 리턴

             단, modules에서 전달받은 id 와 같은 id 가 없는 경우 오류 발생           

Line 25 : modules 에 전달받은 id 와 factory 함수를 저장한다.

             단, 전달받은 id 와 같은 id를 가진 modules 가 있는 경우 오류 발생

Line 36 : 전달받은 id와 같은 id 를 가진 modules 내부 객체를 삭제

Line 43 : 전역객체인 module 이 존재하고, require 가 함수인 경우 module 객체에 해당 내용 저장

             단, module 이 전역객체가 아니므로 실행되지 않음 ( 보통 module 은 파라메터로 전달된다. )

지금까지 가장 기본이 되는 define, require 객체에 대해서 살펴보았다.

5000줄 이후 소스를 제외하곤 define 으로 객체를 생성하는 것을 볼 수 있다.

define 내부에 require 를 사용하고 있으며, 5202 줄에서는 window.cordova = require('cordova') 를 함으로써 

Phonegap 기능을 window 객체에 할당하여, 사용할 수 있다.

cordova js 는 Javascript 코드를 모듈화 할 수 있고, 비동기로 관리하면서 여러파일을 병렬로 다운로드 할 수 있게

도와주는 RequireJS 와 비슷한 형태로 개발되어 진 것 같다.

소스 내부 주석을 보면 // file: lib/scripts/require.js 등으로 되어 있는데, 

여러 파일로 나눌 경우 스크립트 파일이 필요할 때만 병렬로 로딩되기 때문에 페이지 속도가 빨라지는 효과를 줄 수 있다.

하지만, 무조건 사용되는 경우는 하나의 파일로 만들어서 네트웍 전송을 하는 것이 올바른 방법일 것이다.

다음 포스팅은 define 부터 간단히 살펴보도록 하겠다.