requirejs非单页应用引入

关于requirejs的内容,业内很多人都写的差不多,我又不想写重复的内容,只写部分自己真切学到的东西。

1.关于引入

使用requirejs的应用大部分都是单页引用,而我的引用并不是单页引用,每一个页面都是一个新的入口,这时每个入口函数都有很多重复的配置,引入成为了很大的问题,先来看看普通的引入

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="js/require.js" type="text/javascript" data-main="main"></script>
</head>
<body>
</body>
</html>

main就是一个入口函数,内容是

/// <reference path="js/require.js" />
/// <reference path="js/jquery.js" />

require.config({
    paths: {
        jquery: 'js/jquery',
        test: 'js/test'
    }
});

require(['jquery', 'test'], function ($) {
    alert($().jquery);//打印版本号
});

test为模块函数。

这时所有的配置都在main.js文件中完成,因为整个应用就只有一个main入口。

我的做法是受到了github上一个开源代码的启发,首先配置config.js文件

var require = {
  urlArgs: "bust=" + (new Date()).getTime(),
  paths: {
    jquery: '../../libs/jquery/jquery',
    jqueryCookie: '../../libs/jquery/jquery.cookie',
    backbone: '../../libs/backbone/backbone'
  },
  shim: {
    'backbone': {
                //These script dependencies should be loaded before loading
                //backbone.js
                deps: ['underscore', 'jquery'],
                //Once loaded, use the global 'Backbone' as the
                //module value.
                exports: 'Backbone'
    },
    'jqueryCookie': {
            deps: ['jquery']
    }
  }
};

把项目中使用到的公用js都在config中先定义,然后在页面中引用

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8"/>
</script>
</head>
<body>
    
    <script src="config.js" type="text/javascript"></script>
    <script src="require.js" type="text/javascript" ></script>
</body>
</html>

配置完成后,可以写入口main文件,也可以不写了,我是直接在页面上写使用函数

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8"/>
</script>
</head>
<body>
    
    <script src="config.js" type="text/javascript"></script>
    <script src="require.js" type="text/javascript" ></script>
    <script type="text/javascript">
      require(['/js/test.js'],
          function (xy_test) {
                  xy_test.ready();
          });

</script>
</body>
</html>

 原来在github上的代码找不到了,自己上传了一个

https://github.com/cqqxyt/backbone_demo

你可能感兴趣的:(requirejs非单页应用引入)