javascript - 如何使用 requirejs 来模块化这个片段?

标签 javascript requirejs

我正在尝试将我的注意力集中在模块化前端开发上,并尝试将一些简单的代码模块化作为练习。我读过有关 requirejs 和 browserify 的内容,但我还没有真正完全理解它是否以及如何应用于我想要完成的任务(它似乎更适合 Nodejs 和应用程序开发)。

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

/* 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';

分析模块.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 这样的依赖管理器来管理,并且谷歌用户 ID 将是代码中唯一实际可变的部分。

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

最佳答案

您可以像这样使用 Require:

在单个文件中:

// 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']);

关于javascript - 如何使用 requirejs 来模块化这个片段?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25240273/

相关文章:

javascript - socket.io 客户端是否必须存在于全局范围内?

javascript - RequireJS require() 无法解析同一子目录级别的文件名

javascript - nvd3.js:饼图工具提示在 IE 10 中闪烁

javascript - 引导输入文件上传-选择文件,添加新输入[文件],标签不替换为所选文件名

javascript - 如何将所有值添加到该数组中?每次创建一个新的 CLIENT 数组并向其推送值

javascript - 从我的页面/html 需要(并将值传递给)browserify 模块

angular - Requirejs +(多) Angular + typescript

javascript - 在函数中使用 Knockout Push 会返回错误

javascript - 关于 ngshow 和范围的问题

javascript - 为什么我的按钮启动时间不能正常工作?