Question

我想向我们的客户提供他/她必须在网站上实施的一个javascript代码（例如Google跟踪代码管理器）。

当调用此脚本时，我希望每个客户端都有一个配置文件，该客户端已启用此功能。让我们说我们有3个功能：

feature1.js
feature2.js
feature3.js

每个功能都在网站上执行其他操作（例如，跟踪用户数据，显示小部件等）

我的问题：
1.如何存储启用哪些功能的配置？这应该是灵活的，每当我们添加feature4.js时，我们就可以启用它并且脚本将被加载并且客户端不必实现新的js代码
关于表现，你会怎么做？我们正在使用AWS CloudFront。

基本上这是Google跟踪代码管理器的概念：一个代码，在后端，客户端可以决定加载/注入哪个JS代码。

非常感谢你的想法！

Answer 1

一种简单的方法就是将所需的lib注入DOM。

在此示例中，脚本将是页面上的第二个元素。

您可能希望有时在DOM的底部注入。

public class ReactTableFilterAttribute : ActionFilterAttribute
{
    /// <summary>
    /// </summary>
    private readonly string _argumentName;

    /// <summary>
    ///     The filter query variable name
    /// </summary>
    private readonly string _filterName;

    /// <summary>
    ///     The sorting query variable name
    /// </summary>
    private readonly string _sortedName;

    /// <summary>
    ///     Creates a new instance of this attribute
    /// </summary>
    /// <param name="sortedName">The name of the sorted variable list</param>
    /// <param name="filterName">The name of the filtered variable list</param>
    /// <param name="argumentName">The name of the <see cref="GetGiftCardsRequest" /> request object we want to full</param>
    public ReactTableFilterAttribute(string sortedName, string filterName, string argumentName)
    {
        if (string.IsNullOrEmpty(sortedName))
        {
            throw new ArgumentException(nameof(sortedName));
        }

        if (string.IsNullOrEmpty(filterName))
        {
            throw new ArgumentException(nameof(filterName));
        }

        if (string.IsNullOrEmpty(argumentName))
        {
            throw new ArgumentException(nameof(argumentName));
        }

        _argumentName = argumentName;
        _filterName = filterName;
        _sortedName = sortedName;
    }

    /// <inheritdoc />
    public override void OnActionExecuting(ActionExecutingContext context)
    {
        GetGiftCardsRequest toFill = (GetGiftCardsRequest) context.ActionArguments[_argumentName];

        toFill.Sorted =
            GetArrayOfObjects<GetGiftCardsRequest.Sorting>(context.HttpContext.Request.QueryString.Value,
                _sortedName);
        toFill.Filters =
            GetArrayOfObjects<GetGiftCardsRequest.Filtering>(context.HttpContext.Request.QueryString.Value,
                _filterName);

        base.OnActionExecuting(context);
    }

    /// <summary>
    ///     Serializes an array of the specified objects from the given <paramref name="queryString" /> that have the given
    ///     <paramref name="name" />
    /// </summary>
    /// <typeparam name="T">The type of the object you want to serialize</typeparam>
    /// <param name="queryString">The query string to seach</param>
    /// <param name="name">Name of the array parameter to pull</param>
    /// <returns>The array of items if any exist</returns>
    private T[] GetArrayOfObjects<T>(string queryString, string name)
    {
        string pattern = name + @"\[\]=(.*?)&";
        MatchCollection matches = Regex.Matches(queryString + "&", pattern);
        List<T> newList = new List<T>();

        foreach (Match m in matches)
        {
            string sortedObj = HttpUtility.UrlDecode(m.Groups[1].Value);
            T deserialized = JsonConvert.DeserializeObject<T>(sortedObj);

            newList.Add(deserialized);
        }

        return newList.ToArray();
    }
}

要存储用户数据，我们可以使用function userlib1(){ let lib = document.getElementsByTagName('*')[1], inj = document.createElement('script') inj.src = 'https://..../script.js' lib.appendChild(inj) }，就像这样：

localstorage

实现一个javascript代码并动态加载更多脚本

1 个答案: