requirejs将如何用于模块化这个片段?

时间:2014-08-11 09:42:43

标签: javascript requirejs

我正试图围绕模块化前端开发,并尝试将一些简单的代码模块化为练习。我已经阅读过关于requirejs和browserify的内容,但我还没有完全理解它是否以及如何应用于我想要完成的任务(它似乎更倾向于nodejs和app开发)。

为了简单起见,假设我有来自html5样板的以下google analytics片段:

/* Google Analytics: change UA-XXXXX-X to be your site's ID. */
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');

我想要做的是将'UA-XXXXX-X'字符串替换为变量,可以在有人想要使用分析片段时声明。有点像下面的伪代码:

main.js:

var myGoogleId = 'UA-12345-0';

分析-module.js

/* Google Analytics: change UA-XXXXX-X to be your site's ID. */
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create',myGoogleId);ga('send','pageview');

的index.html

<html>
  ...
  <script src="main.js"></script>
  <script src="lib/analytics-module.js"></script>
  ...
</html>

这样,谷歌分析片段可以通过像bower这样的依赖管理器进行管理,而google user-id将是代码中实际可变的唯一部分。

那么我如何使用requirejs来模块化这种类型的片段(无论这是否是明智的做法)?

1 个答案:

答案 0 :(得分:0)

你可以使用这样的要求:

在一个文件中:

// the `configuration` module:
define('configuration', function(){
  return {
    googleId: 'UA-XXXXX-X'
  }
});

// the analytics module
define('analytics', ['configuration'], function(googleId){
    var anID = googleId;

    (function(anID){
        /* google analytics code here */
    }()); 
});

// initialization of it all    
require(['analytics']);