вторник, 16 апреля 2013 г.

Пример работы с Require JS

Структура проекта

/img/image.png
/css/style.css
/js/vendor/require.js
/js/vendor/vendor/jquery.min.js
/js/vendor/vendor/jquery.pnotify.min.js
/js/vendor/vendor/jquery.rangyinputs.js
/js/vendor/vendor/jquery.csshook.js
/js/vendor/vendor/bootstrap.min.js
/js/vendor/vendor/underscore-min.js
/js/vendor/vendor/ZeroClipboard.min.js
/js/vendor/vendor/flash_detect.js
/js/index.js
/index.html


Загрузка require.js в файле index.html

<!DOCTYPE html>
<html>
<head>

    <script type="text/javascript" src="js/vendor/require.js" data-main="js/index"></script>

    <title>Заголовок страницы</title>
</head>
<body>
</body>
</html>


Код файла index.js

require.config({
      paths: {
          jquery:           'vendor/jquery.min'
        , pnotify:          'vendor/jquery.pnotify.min'
        , rangyinputs:   'vendor/jquery.rangyinputs'
        , csshook:         'vendor/jquery.csshook'
        , bootstrap:        'vendor/bootstrap.min'
        , underscore:     'vendor/underscore-min'
        , zeroclipboard: 'vendor/ZeroClipboard.min'
        , flashdetect:     'vendor/flash_detect'
      }
    , shim: {
          pnotify:          {deps: ['jquery']}
        , rangyinputs:   {deps: ['jquery']}
        , csshook:         {deps: ['jquery']}
        , bootstrap:       {deps: ['jquery']}
        , underscore:     {exports: '_'}
        , zeroclipboard: {exports: 'ZeroClipboard'}
        , flashdetect:      {exports: 'FlashDetect'}
      }
});

require(
    [
          'jquery'
        , 'underscore'
        , 'zeroclipboard'
        , 'flashdetect'
        , 'pnotify'
        , 'rangyinputs'
        , 'csshook'
        , 'bootstrap'
    ],
    function(
          $
        , _
        , ZeroClipboard
        , FlashDetect
    ) {
   
        $(document).ready(function() {
            _.each([1, 2, 3], alert);
        });

    }
);

Комментариев нет:

Отправить комментарий