赶上年尾的豆知识

1、VUE 一次触发执行多个方法

<div @click="f1() + f2()"></div>

2、JS 获取用户 IP
从目前的技术而言，JS 是不可能直接获取到用户的 IP。
但是通过第三方接口，我们可以很方面的用 AJAX 拿到。

var u;
u = '//freegeoip.net/json/?callback=?';
u = 'http://gd.geobytes.com/GetCityDetails?callback=?';
u = 'http://www.geoplugin.net/json.gp?jsoncallback=?';
u = '//ipapi.co/json/';
u = 'http://ip-api.com/json?callback=?';
u = '//api.ipify.org?format=jsonp&callback=?';
u = '//ipinfo.io/json';
u = '//jsonip.com/?callback=?';
u = 'http://ip.jsontest.com/?callback=?';
u = '//www.stupidwebtools.com/api/my_ip.json';
 
$.getJSON(u, function(data) {
  console.log(JSON.stringify(data, null, 2));
});

3、不包含某个字符串的正则
严格来讲正则并不直接支持“不包含”，但是还是可以模拟出来：

/^((?!string)[\s\S])*$/

4、JS 获取地址参数
需要多次获取的场合当然是引入 url()，然后 url('?id'); 即可。
但在一些临时性场景下，我们也可以通过 Lodash 快速得到：

_.chain(rawUrl)
    .replace('?', '')
    .split('&')
    .map(_.ary(_.partial(_.split, _, '='), 1))
    .fromPairs()
    .value()

实在不行，上原生 JavaScript 也可以：

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;
 
    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');
 
        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

5、CSS 隐藏文字
最简单方法当然是让文字颜色透明，然后不可选。

h1 {
    color: transparent;
    user-select: none; //prefix may needed
}

另一种方法则是利用超大 indent，并取消折行：

h1 {
    text-indent: -9999px;
    white-space: nowrap;
}

6、JS 用户选择了相同文件依旧触发
在异步上传文件时，我们往往把方法绑定在“change”上。
但如果用户前后两次选择的是相同的文件，则无法正常触发了。
那么一个小技巧则是，在用户点击时，事先清空值：

$('input[type=file]').click(function(){
    $(this).attr("value", "");
})  
$('input[type=file]').change(function(){
    $('#my-form').ajaxSubmit(options);      
})

在没有引入 jQuery 的场合，可以使用原生 JavaScript：

input.onclick = function () {
    this.value = null;
};
 
input.onchange = function () {
    alert(this.value);
};

7、JS 应用“!important”到样式上
我们已经习惯了用 jQuery 的“.css()”去修改元素的样式。
但是 .css('width', '100px !important') 这样的基础用法，
是无法让最后的 !important 生效的，这时候我们需要用到 cssText 属性：

$(".ele").css("cssText", "width: 100px !important;");

8、JS 获取头部 meta 信息
注：某些场合需要把 name 换成 property。

//with jQuery
$('meta[name="something"]').attr('content');
 
//native js
document.head.querySelector('[name="something"]').content;

9、JS 将字符串转为 Unicode
比如把货币符号的字符串转为页面对应的 Unicode 来显示：

var cs;
cs = '&#36;';    //USD
cs = '&#8364;';  //EUR
cs = '&#165;';   //YEN
console.log(String.fromCharCode(cs.slice(2,-1)));

10、Apache 使跨域请求支持各类方法

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

【相关资料】
0、（题图）Renée Suen 孫詩敏 – Pablo Exclusive◃filckr

【相关博文】

发表评论 取消回复

发表评论取消回复