如何使用需求来模块化这个代码片段

How would requirejs be used to modularize this snippet?

本文关键字：代码 片段 模块化 何使用 需求      更新时间：2023-09-26

我正在尝试模块化前端开发，并尝试将一些简单的代码模块化作为练习。我读过关于需求和浏览器化，但我还没有真正完全理解它是否以及如何适用于我想要完成的事情(它似乎更倾向于nodejs和应用程序开发)。

为了简单起见，假设我有以下来自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';

analytics-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>

这样，谷歌分析片段就可以用依赖管理器来管理，例如，谷歌用户id将是代码中唯一的可变部分。

那么我将如何使用需求来模块化这种类型的代码片段(不管在这里这样做是否明智)?

你可以这样使用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']);
相关文章：