您通常将哪些类型的 javascript/jquery 方法编码到您的网站中？

Posted 2023-02-16

【中文标题】您通常将哪些类型的 javascript/jquery 方法编码到您的网站中？

【英文标题】：What sorts of javascript/jquery methods do you routinely code into your sites?

【发布时间】：2011-05-28 01:11:39

【问题描述】：

我正在为我的网站编写一个核心 javascript 对象，构建了我使用的常用方法（并包装了一些 jQuery 方法）。

它是这样构建的：

var Core = 
  baseUrl: '/',
  lang: 'en-us',
  loggedIn: false,

  msg: function(str) 
    for (var i = 1, len = arguments.length; i < len; ++i) 
      str = str.replace("" + (i - 1) + "");
    
    return str;
  ,
  include: function(url, success, cache) 
    $.ajax(
      url: url,
      dataType: 'script',
      success: success,
      cache: cache !== false
    );
  ,
  etc...

msg 是一种模仿 C# String.Format 的方法，include 让我可以异步拉入脚本。还有其他（formatDate：将日期时间字符串转换为用户的本地时间，getBrowser：根据特征检测获取浏览器类型，open：打开链接在新窗口等...）

这个核心对象让我可以执行各种任务...只需调用 Core。方法...将我几乎所有的 javascript 代码移动到可以缓存的 .js 文件中。

出于好奇，您在自己的网站中构建了哪些常用功能？

【问题讨论】：

这是什么意思？我如何改为在 wiki 上发帖？

现在只有模组可以在 wiki 上发帖。我已将其标记为 mod 注意。

它更适合程序员。SE，现在它可用于此类对话。

好电话，我会添加它。

@Will，我将问题发布给 Programmers SE，他们将其关闭。 :D

【参考方案1】：

如果我不能从Paul Irish's boilerplate 开始，我首先要添加一个日志功能。

// usage: log('inside coolFunc',this,arguments);
// paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
window.log = function()
  log.history = log.history || [];   // store logs to an array for reference
  log.history.push(arguments);
  if(this.console)
    console.log( Array.prototype.slice.call(arguments) );
  
;

【参考方案2】：

我通常添加一个包装器来捕获任何错误页面。

ajaxErrorHandle: function (data, container) 
        if (data.indexOf("Server Error in '/' Application") != -1) 
            container.html(data);
            $('.ajax-loader').hide();
            return false;
        
        return true;
    

【讨论】：

酷，所以不是返回包含成功标志的 JSON 对象，而是检查返回数据字符串以查看它是否以错误消息开头？不错的主意，在那些时候你只想返回一小块 HTML 而不是 JSON。

【参考方案3】：

我使用了一些与其他语言类似的字符串格式化函数。用法：

var s = 'Hello 0!'.format('World'); // result is "Hello World!"
var person =  Name: 'Will' ;
var greeting = 'Hello Name!'.formatWith(person); // result is "Hello Will!";

这里是函数定义。我还在各处使用简单版本的 map 和 reduce，不是在外部网站上，而是在内部网上我全力以赴使用 Javascript。

String.prototype.format = function ()

    var pattern = /\\d+\/g;
    var args = arguments;
    return this.replace(pattern, function (capture)  return args[capture.match(/\d+/)]; );


String.prototype.formatWith = function (obj, clean)

    return this.replace(/\(.*?)\/gim, function (all, match)  return obj[match]; );


function reduce(fn, a, init, limit)

    var s = init;
    var l = (limit == undefined) ? a.length : Math.min(a.length, limit);
    for (i = 0; i < l; i++)
        s = fn(s, a[i], i);
    return s;


function map(fn, a)

    var l = a.length;
    for (i = 0; i < l; i++)
        a[i] = fn(a[i]);

【讨论】：

您可能希望在现代浏览器中对数组使用默认的 map 和 reduce 方法。检查developer.mozilla.org/en/JavaScript/Reference/Global_Objects/…，developer.mozilla.org/en/JavaScript/Reference/Global_Objects/…

很好，我有一个函数也可以匹配正则表达式属性...但仅在我需要多次匹配同一个标记时使用。否则我使用上面显示的 str.replace 方法......它更快。

【参考方案4】：

我使用一些方便的方法，处理动态主题，获取客户端信息以报告错误，并在我的核心中使用 .NET 回发处理主题问题。这里有几个 sn-ps...

    /**
    *   A convenience method for notifications that can be 
    *   called anywhere in the app, in place of standard 
    *   javascript alerts.  Assuming you define CSS for 
    *   the ID and/or are using jQuery UI, these alerts 
    *   are skinned.
    *
    *   @param string - the message that you want to display
    *   @example - alert('Hello World');
    */
    alert: function(msg) 
        $('body').append('<div id="alert">' + msg + '</div>');
        $('#alert').dialog(
            bgiframe: true
            , modal: true
            , width: 400
            , buttons: 
                Ok: function()  $(this).dialog('destroy'); 
            
        );
        return this;
     // EO alert


    /**
    *   .NET Event Handlers
    *   When new code is added on to the client by way of
    *   .NET PostBacks, CSS is typically ignored.  This method
    *   can be used to add CSS to new elements as they are added
    *   asynchronously.  It calls a script at the end of every 
    *   partial post back request.
    *
    *   @example - Core.NETEventHandlers.AsyncPostBack.Init();
    */
    , NETEventHandlers: 
        /**
        *   Async Post Back Handler
        *   calls a script at the end of every partial post back request
        */          
        AsyncPostBack: 
            EndRequest: 
                Add: function() 
                    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(Core.NETEventHandlers.AsyncPostBack.EndRequest.Handler); // where Core.NET... leads to this method
                 // EO Add
                , Handler: function(sender, args) 
                    // Handlers here.  Consider adding them into a separate method
                    alert('Hello World');
                 // EO Handler
             // EO endRequest
            , Init: function() 
                Sys.Application.add_init(Core.NETEventHandlers.AsyncPostBack.EndRequest.Add);   // where Core.NET... leads to this method
            
         // EO AsyncPostBack
     // EO dotNETEventHandlers

【讨论】：

很好，谢谢分享。我现在在我的 Web 应用程序中使用 ASP.NET MVC……当我使用 ASP.NET 时，这会很好。

【参考方案5】：

我有一个很棒的跨域 ajax 和一个很棒的包装器，不幸的是我暂时丢失了它，直到我可以恢复我的高清。不过是这样的：

ajax = function(site, callback) 
    $.getScript('get.php?url=' + escape(site) + '&callback=' + callback);


ajax.find = function(url) 
    ret = [];
    if (url.match) 
        for (var i = 0; i < this.length; i++)
            if (url.match(this[i].url))
                ret.push(this[i]);
    
    else
        for (var i = 0; i < this.length; i++)
            if (url === this[i].url)
                ret = this[i];
    return ret;
;

我这样做是因为我很久以前写过的东西，但你明白了