famo.us 자습서의 requirejs 사용

-1

famo.us 슬라이드 쇼 자습서에서 requirejs (자습서 here)를 사용하는 방법에 대한 기본적인 질문이있을 것입니다. 나는 requirejs에 대해 많이 모른다. 그리고이 튜토리얼의 목적을위한 제 3의 도구이다. 그러나 나는 그것을하기 위해 약간의 독서를 시도하고, 내 머리를 감싸고있다. 그러나 그것은 나를 더 많이 남겨 두는 것처럼 보였다. 난처한. index.html 파일에서famo.us 자습서의 requirejs 사용

나는 우리가 requirejs 관점에서 두 가지 일을하고 그것을 이해로서

<head> 
    <title>famo.us App</title> 
    <meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" /> 
    <meta name="mobile-web-app-capable" content="yes" /> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 

    <!-- shims for backwards compatibility --> 
    <script type="text/javascript" src="http://code.famo.us/lib/functionPrototypeBind.js"></script> 
    <script type="text/javascript" src="http://code.famo.us/lib/classList.js"></script> 
    <script type="text/javascript" src="http://code.famo.us/lib/requestAnimationFrame.js"></script> 

    <!-- module loader --> 
    <script type="text/javascript" src="http://code.famo.us/lib/require.js"></script> 

    <!-- famous --> 
    <link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.0/famous.css" /> 
    <script type="text/javascript" src="http://code.famo.us/famous/0.3.0/famous.min.js"></script> 

    <!-- app code --> 
    <link rel="stylesheet" type="text/css" href="css/app.css" /> 
    <script type="text/javascript"> 
     require.config({ 
      baseUrl: './src/' 
     }); 
     require(['main']); 
    </script> 
</head>

:
가) "SRC"폴더에 위치합니다 우리의 모든 모듈을 나타내는

define(function(require, exports, module) { 
    var Engine = require('famous/core/Engine'); 

    // import the AppView class using require 
    var AppView = require('views/AppView'); 

    var mainContext = Engine.createContext(); 

    // create a new instance of app view 
    var appView = new AppView(); 

    // add the instance to the context 
    mainContext.add(appView); 
});

: b)의 실행을 위해 inital JS 파일을 나타내는 것은 'SRC/main.js'

여기

입니다 main.js 될 것입니다

그리고 여기에는 앱 조회 모듈 중 하나의 반복이다 :

define(function(require, exports, module) { 
    var View = require('famous/core/View'); 
    var Surface = require('famous/core/Surface'); 
    var Transform = require('famous/core/Transform'); 
    var StateModifier = require('famous/modifiers/StateModifier'); 

    // import the SlideshowView class 
    var SlideshowView = require('views/SlideshowView'); 

    function AppView() { 
     View.apply(this, arguments); 

     // create a new instance of slideshow view 
     var slideshowView = new SlideshowView(); 

     // add the instance to app view 
     this.add(slideshowView); 
    } 

    AppView.prototype = Object.create(View.prototype); 
    AppView.prototype.constructor = AppView; 

    AppView.DEFAULT_OPTIONS = {}; 

    module.exports = AppView; 
});

내 혼란이 앱 조회에서 이러한 모듈 수입 함께 :

우리가 'SRC'폴더에 기본 폴더를 설정 때문에

var View = require('famous/core/View');

, I 이 디렉토리가 없더라도 require가이 모듈이 'src/famous/core'에있을 것으로 기대할 것입니다. 사실, 유명한 디렉토리는 파일 계층의 src 폴더보다 약간 위의 레벨입니다. 그렇다면 유명한 디렉토리를 어떻게 찾을 수 있었습니까?

출처

2014-11-27 Tim Lindsey

'famous/core/View'은 예상대로 경로가 아닌 모듈 이름입니다. dist/famous.js:5009에 정의되어 있습니다. 그들은 아마도 / 규칙을 네임 스페이스로 사용했습니다.

모듈 이름을 정의하는 방법에 대한 자세한 내용은 requirejs docs으로 이동하십시오. 짧은 측면에서

, 하나는 foo.js라는 이름의 파일에 다음 작업을 수행 할 수 있습니다 :

define('foo/bar', function() { 
    return { 
     name: 'bar' 
    } 
}); 
define('foo/baz', function() { 
    return { 
     name: 'baz' 
    } 
});

그리고 그 파일 foo.js이 어느 시점에서로드 된 경우, 하나의 폴더를 가질 필요없이 다음을 요구할 수

/파일 구조 foo/bar.js 및 foo/baz.js :

require(['foo/bar', 'foo/baz', function (Bar, Baz) { 
    console.log(Bar.name, Baz.name) 
});

ps 나는 강력하게 당신이 워드 프로세서를 읽을 것을 제안한다. 요구는 단지 굉장하다.

출처

2014-11-27 16:41:13

감사합니다. Poelinca. 나는 곧 requirejs로 더 파고 싶다. :) –

famo.us 자습서의 requirejs 사용

답변

관련 문제