getAbsoluteUrl
从一个字符串变量得到一个绝对 URL,并不是你想象中这么简单。对于某些 URL 构造器,如果你不提供必要的参数就会出问题(而有时候你真的不知道提供什么参数)。下面有一个优雅的技巧,只需要你传递一个字符串就能得到相应的绝对 URL。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var getAbsoluteUrl = ( function () {
var a;
return function (url) {
if (!a) a = document.createElement(& #39;a');
a.href = url;
return a.href;
};
})();
getAbsoluteUrl(& #39;/something');
|
Nach dem Login kopieren
a 元素的 href 处理和 url 处理看似无意义,而 return 语句返回了一个可靠的绝对 URL。
isNative
如果你想知道一个指定函数是否是原生的,或者能不能通过声明来覆盖它。下面这段便于使用的代码能给你答案:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | ;( function () {
var toString = Object.prototype.toString;
var fnToString = Function.prototype.toString;
var reHostCtor = /^[object .+?Constructor]$/;
var reNative = RegExp(& #39;^' +
String(toString)
.replace(/[.*+?^${}()|[]/]/g, & #39;$&')
.replace(/toString|( function ).*?(?=()| for .+?(?=])/g, & #39;$1.*?') + '$'
);
function isNative(value) {
var type = typeof value;
return type == & #39;function'
? reNative.test(fnToString.call(value))
: (value && type == & #39;object' && reHostCtor.test(toString.call(value))) || false;
}
module.exports = isNative;
}());
isNative(alert);
isNative(myCustomFunction);
|
Nach dem Login kopieren
这个函数虽不完美,但它能完成任务!
insertRule
我们都知道能通过选择器(通过 document.querySelectorAll )获取一个 NodeList ,并可为每个元素设置样式,但有什么更高效的方法为选择器设置样式呢(例如你可以在样式表里完成):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | var sheet = ( function () {
var style = document.createElement(& #39;style');
style.appendChild(document.createTextNode(& #39;'));
document.head.appendChild(style);
return style.sheet;
})();
sheet.insertRule( "header { float: left; opacity: 0.8; }" , 1);
|
Nach dem Login kopieren
这对于一个动态且重度依赖 AJAX 的网站来说是特别有用的。如果你为一个选择器设置样式,那么你就不需要为每个匹配到的元素都设置样式(现在或将来)。
matchesSelector
我们经常会在进行下一步操作前进行输入校验,以确保是一个可靠值,或确保表单数据是有效的,等等。但我们平时是怎么确保一个元素是否有资格进行进一步操作呢?如果一个元素有给定匹配的选择器,那么你可以使用 matchesSelector 函数来校验:
1 2 3 4 5 6 7 8 9 10 | function matchesSelector(el, selector) {
var p = Element.prototype;
var f = p.matches || p.webkitMatchesSelector || p.mozMatchesSelector || p.msMatchesSelector || function (s) {
return [].indexOf.call(document.querySelectorAll(s), this ) !== -1;
};
return f.call(el, selector);
}
matchesSelector(document.getElementById(& #39;myp'), 'p.someSelector[some-attribute=true]')
|
Nach dem Login kopieren
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Anwendungsbeispiele der grundlegenden Javascript-Funktionen getAbsoluteUrl, isNative und insertRule. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!