利用a标签自动解析URL

很多时候我们有从一个URL中提取域名,查询关键字,变量参数值等的需要,而万万没想到可以让浏览器方便地帮我们完成这一任务而不用我们写正则去抓取。方法就在JS代码里先创建一个a标签然后将需要解析的URL赋值给a的href属性,然后就得到了一切我们想要的了。

 var a = document.createElement('a');
a.href = 'http://www.cnblogs.com/wayou/p/';
console.log(a.host);

利用这一原理,稍微扩展一下,就得到了一个更加健壮的解析URL各部分的通用方法了。下面代码来自James的博客

 // This function creates a new anchor element and uses location
// properties (inherent) to get the desired URL data. Some String
// operations are used (to normalize results across browsers). function parseURL(url) {
var a = document.createElement('a');
a.href = url;
return {
source: url,
protocol: a.protocol.replace(':',''),
host: a.hostname,
port: a.port,
query: a.search,
params: (function(){
var ret = {},
seg = a.search.replace(/^\?/,'').split('&'),
len = seg.length, i = 0, s;
for (;i<len;i++) {
if (!seg[i]) { continue; }
s = seg[i].split('=');
ret[s[0]] = s[1];
}
return ret;
})(),
file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],
hash: a.hash.replace('#',''),
path: a.pathname.replace(/^([^\/])/,'/$1'),
relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [,''])[1],
segments: a.pathname.replace(/^\//,'').split('/')
};
}

生成随机字符串

利用Math.random和toString生成随机字符串,来自前一阵子看到的一篇博文

 function generateRandomAlphaNum(len) {
var rdmString = "";
for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
return rdmString.substr(0, len);
}

Math.floor的高效替代方案

利用好位操作符可以让我们获得效率上的提升,同时显得高端大气上档次。

|0和~~是很好的一个例子,使用这两者可以完美替代Math.floor。在处理像素及动画位移等效果的时候会很有用,因为我们需要整数,而此方法比Math.floor或parseInt效率都要高。性能比较见此

var foo = (12.4 / 4.13) | 0;//结果为3
var bar = ~~(12.4 / 4.13);//结果为3

注:整理有个重要的知识点:当 ~ 运算符充当非整型数据类型的操作数时,该值在运算执行之前被强制为 int 类型,该运算符的返回值为 int 类型。

顺便说句,!!将一个值方便快速转化为布尔值 !!window===true 。

禁止别人以iframe加载你的页面

下面的代码已经不言自明并,没什么好多说的。

 if (window.location != window.parent.location)
  window.parent.location = window.location;

js怪招(摘录篇)的更多相关文章

  1. JS对象继承篇

    JS对象继承篇 ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的 原型链 其基本思路是利用原型让一个引用类型继承另一个引用类型的属性和方法 function Person() ...

  2. Node.js Stream-基础篇

    Node.js Stream - 基础篇 邹斌 ·2016-07-08 11:51 背景 在构建较复杂的系统时,通常将其拆解为功能独立的若干部分.这些部分的接口遵循一定的规范,通过某种方式相连,以共同 ...

  3. 包学会之浅入浅出Vue.js:结业篇(转)

    蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师.智图图片优化系统首席工程师,曾参与<众妙之门>书籍的翻译工作.目前专注前端图片优化与新技术的探研. 在第一篇<包学会之浅入浅出Vu ...

  4. 包学会之浅入浅出Vue.js:升学篇

    包学会之浅入浅出Vue.js:升学篇 蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师.智图图片优化系统首席工程师,曾参与<众妙之门>书籍的翻译工作.目前专注前端图片优化与新技术的探研. ...

  5. 包学会之浅入浅出Vue.js:开学篇(转)

    包学会之浅入浅出Vue.js:开学篇 蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师.智图图片优化系统首席工程师,曾参与<众妙之门>书籍的翻译工作.目前专注前端图片优化与新技术的探研. ...

  6. 包学会之浅入浅出Vue.js:结业篇

    在第一篇<包学会之浅入浅出Vue.js:开学篇>和上一篇<包学会之浅入浅出Vue.js:升学篇>的学习中,我们首先了解了Vue环境的搭建以及两个重要思想——路由和组件的学习,通 ...

  7. Backbone.js之model篇(一)

    Backbone.js之model篇(一) Backbone 是一个前端 JS 代码 MVC 框架,它不可取代 Jquery,不可取代现有的 template 库.而是和这些结合起来构建复杂的 web ...

  8. JS基础入门篇(三十五)—面向对象(二)

    如果没有面向对象这种抽象概念的小伙伴,建议先看一下我写的JS基础入门篇(三十四)-面向对象(一)

  9. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

随机推荐

  1. MD5算法的使用

    using System.Security.Cryptography; using System.Text; StringBuilder sb = new StringBuilder();//构建一个 ...

  2. iOS程序崩溃*** Terminating app due to uncaught exception 'CALayerInvalidGeometry', reason: 'CALayer position contains NaN: [37.5 nan]'

    今天上班打开昨天的程序运行,昨天跑的很溜的程序今天竟然crash了,好郁闷啊!下面附上crash的栈打印信息: 经过一番调试终于找到了原因,程序crash是因为CALayer的位置中含有不存在的数,就 ...

  3. AutoLayout学习之理解intrinsicContentSize,Content Hugging Priority,Content Compression Resistance Priority

    TableViewCell的高度计算应该是所有开发者都会使用到的东西,之前都是用代码计算的方法来计算这个高度.最近有时间看了几个计算Cell高度的方法.基本上都用到了AutoLayout,这篇首先介绍 ...

  4. statistic学习笔记

    1. 假设检验:就是对于符合一定前提条件的数据,先作一个假设H0,还有一个备择假设H1(一般是H0的反面,或者是H0不包含的情况),通过一定的计算公式,算出一个值(比如开方检验就是开方值),这个值的理 ...

  5. 如何使用LoadRunner监控Windows

    1.监视连接前的准备工作   1)进入被监视windows系统,开启以下二个服务Remote Procedure Call(RPC) 和Remote Registry Service (开始—)运行 ...

  6. 如何让div出现滚动条

    由于DIV本身属性并没有滚动条设置,但是有些地方的设计却需要出现滚动条,如何实现呢?本人采用CSS样式来控制显示!而且也很简单,代码如下: <div style="OVERFLOW-Y ...

  7. laravel框架——上传、下载文件

    文件上传 在config文件夹下新建一个 项目名.php return [ 'title' => 'My Test', 'posts_per_page' => 5, 'uploads' = ...

  8. 转:assert()函数用法总结

    assert宏的原型定义在<assert.h>中,其作用是如果它的条件返回错误,则终止程序执行,原型定义: #include <assert.h>void assert( in ...

  9. 单片机C语言编程规范

    一.基本要求 1.1 程序结构清析,简单易懂,单个函数的程序行数不得超过100行. 1.2 打算干什么,要简单,直接了当,代码精简,避免垃圾程序. 1.3 尽量使用标准库函数和公共函数. 1.4 不要 ...

  10. win2k,XP下用setupapi.dll自动安装Driver

    win2k,XP下用setupapi.dll自动安装Driver 在驱网看到54cndr 写的这篇文章,虽然自己一直都用Installshield,但还是觉得这个也是一个很好的思路,故摘录在此. 用s ...