前端方案解决思路

最新推荐文章于 2025-09-04 18:55:33 发布

转载最新推荐文章于 2025-09-04 18:55:33 发布 · 72 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/keywindy/blog/523629

文章标签：

#前端 #python #javascript #ViewUI

2019独角兽企业重金招聘Python工程师标准>>>

HTML5 Cross Browser Polyfills

via: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

表单重复提交

对于各种情况(没有耐心的用户,鼠标失灵,软件系统问题...)所引起的表单重复提交问题可以综合以下两个方案来处理

##debounce && throttle

Underscore.js && lodash 有相关的方法/函数

解释1: JavaScript Debounce Function
解释2: jQuery throttle / debounce: Sometimes, less is more!

PS: 这两个节流的方法/函数也可以作用于

"输入校验"
"输入字数限制显示"
"输入自动匹配"
window.onresize
window.onscroll

##disabled && show loading tip

参考 Bootstrap button loading state

获取服务器时间

转自: IMWeb 前端公众群 -- 深圳-离层

$.ajax({
  type: 'HEAD',
  url : window.location.href,
  complete:function(r){
    console.log(new Date(r.getResponseHeader('Date')).toString());
  }
});

Ajax Request - jQuery vs native

http://blog.garstasio.com/you-dont-need-jquery/ajax/

What's AJAX?

XMLHttpRequest

Detect IE or Edge

via: http://stackoverflow.com/questions/19999388/check-if-user-is-using-ie-with-jquery
via: https://github.com/faisalman/ua-parser-js

/**
  * detect IE
  * returns version of IE or false, if browser is not Internet Explorer
  * http://stackoverflow.com/questions/19999388/check-if-user-is-using-ie-with-jquery
  */
function detectIE() {
    var ua = window.navigator.userAgent;

    var msie = ua.indexOf('MSIE ');
    if (msie > 0) {
        // IE 10 or older => return version number
        return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
    }

    var trident = ua.indexOf('Trident/');
    if (trident > 0) {
        // IE 11 => return version number
        var rv = ua.indexOf('rv:');
        return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
    }

    var edge = ua.indexOf('Edge/');
    if (edge > 0) {
        // IE 12 => return version number
        return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
    }

    // other browser
    return false;
}

Get Parameters from script tag attributes

via: how-to-pass-parameters-to-a-script-tag

// <script src=".." one="1" two="2"></script>
document.currentScript = document.currentScript || (function() {
  var scripts = document.getElementsByTagName('script');
  return scripts[scripts.length - 1];
})();
document.currentScript.getAttribute('one'); //1
document.currentScript.getAttribute('two'); //2

Countdown

via: how-can-i-make-a-jquery-countdown

// Our countdown plugin takes a callback, a duration, and an optional message
$.fn.countdown = function (callback, duration, message) {
    // If no message is provided, we use an empty string
    message = message || "";
    // Get reference to container, and set initial content
    var container = $(this[0]).html(duration + message);
    // Get reference to the interval doing the countdown
    var countdown = setInterval(function () {
        // If seconds remain
        if (--duration) {
            // Update our container's message
            container.html(duration + message);
        // Otherwise
        } else {
            // Clear the countdown interval
            clearInterval(countdown);
            // And fire the callback passing our container as `this`
            callback.call(container);   
        }
    // Run interval every 1000ms (1 second)
    }, 1000);

};

// Use p.countdown as container, pass redirect, duration, and optional message
$(".countdown").countdown(redirect, 5, "s remaining");

// Function to be called after 5 seconds
function redirect () {
    this.html("Done counting, redirecting.");
    window.location = "http://msdn.microsoft.com";
}