赶上年尾的豆知识

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()

实在不行,上原生 也可以:

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);      
})

在没有引入 的场合,可以使用原生

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

7、JS 应用“!important”到样式上
我们已经习惯了用 的“.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
比如把货币符号的字符串转为页面对应的 来显示:

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注