前端不为人知的一面--前端冷知识集锦

标签： 前端 人知 前端 | 发表时间：2014-04-13 16:42 | 作者：Jing
出处：http://blog.jingwentian.com/

前端已经被玩儿坏了！像 console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了，像用||操作符给变量赋默认值也是人尽皆知的旧闻了，今天看到Quora上一个帖子，瞬间又GET了好多前端技能，一些属于技巧，一些则是闻所未闻的冷知识，一时间还消化不过来。现分类整理出来分享给大家，也补充了一些平时的积累和扩展了一些内容。

HTML篇

浏览器地址栏运行JavaScript代码

这个很多人应该还是知道的，在浏览器地址栏可以直接运行JavaScript代码，做法是以 javascript:开头后跟要执行的语句。比如：

  javascript:alert('hello from address bar');

将以上代码贴到浏览器地址栏回车后 alert正常执行，一个弹窗神现。

浏览器地址栏运行HTML代码

如果说上面那条小秘密知道的人还算多的话，这条秘笈知道的人就要少一些了，在非IE内核的浏览器地址栏可以直接运行HTML代码！

比如在地址栏输入以下代码然后回车运行，会出现指定的页面内容。

  data:text/html,<h1>Hello, world!</h1>

你造么，可以把浏览器当编辑器

  data:text/html, <html contenteditable>

归根结底多亏了HTML5中新加的 contenteditable属性，当元素指定了该属性后，元素的内容成为可编辑状态。

推而广之，将以下代码放到console执行后，整个页面将变得可编辑，随意践踏吧~

  document.body.contentEditable='true';

利用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的博客。

  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('/')
    };
}

页面拥有ID的元素会创建全局变量

在一张HTML页面中，所有设置了ID属性的元素会在JavaScript的执行环境中创建对应的全局变量，这意味着 document.getElementById像人的阑尾一样显得多余了。但实际项目中最好老老实实该怎么写就怎么写，毕竟常规代码出乱子的机会要小得多。

  <div id="sample"></div>
<script type="text/javascript">
        console.log(sample);
</script>

加载CDN文件时，可以省掉HTTP标识

现在很流行的CDN即从专门的服务器加载一些通用的JS和CSS文件，出于安全考虑有的CDN服务器使用HTTPS方式连接，而有的是传统的HTTP，其实我们在使用时可以忽略掉这个，将它从URL中省去。

  <script src="//domain.com/path/to/script.js"></script>

...

原文: http://www.cnblogs.com/Wayou/p/things_you_dont_know_about_frontend.html

相关 [前端 人知 前端] 推荐：

前端不为人知的一面--前端冷知识集锦

- - Jing
像 console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了，像用||操作符给变量赋默认值也是人尽皆知的旧闻了，今天看到Quora上一个帖子，瞬间又GET了好多前端技能，一些属于技巧，一些则是闻所未闻的冷知识，一时间还消化不过来. 现分类整理出来分享给大家，也补充了一些平时的积累和扩展了一些内容.

前端技术

- - CSDN博客综合推荐文章
随着互联网产业的爆炸式增长，与之伴生的Web前端技术也在历经洗礼和蜕变. 尤其是近几年随着移动终端的发展，越来越多的人开始投身或转行至新领域，这更为当今的IT产业注入了新的活力. 尽管Web前端技术诞生至今时日并不长，但随着Web技术的逐渐深入，今后将会在以下几方面发力. JavaScript的兄弟们.

Web前端优化

- - JavaScript - Web前端 - ITeye博客
优点：直接使用浏览器内存的缓存数据，减少网站后台压力，用户体验（速度）好. 缺点：对于时时变化的动态页面，这种情况就不能容忍了，因为每次访问的都是第一次访问的内容，这样即使所请求的页面已经变化了，用户也不可能知道，所以此场景必须要消除这种缓存的影响. 延迟加载，将资源延迟到需要的时候的加载，例如detail页面，相关产品推荐，当用户浏览更多的信息往下拉动滚动时，才进行加载，异步加载可以大幅减少对后端资源的使用，在需要的时候加载，是资源合理使用常用的方式，但是也带来一个问题，当往下拉才去加载，如果性能不够好，用户的体验其实是不好的，“菊花”转动的时间会比较长，同时异步加载对前端性能的作用也是非常明显的，渲染的节点数量大幅减少.

Web 前端测试

- - Web前端 - ITeye博客
Web 网站测试流程和方法（转载）. 进行正式测试之前，应先确定如何开展测试，不可盲目的测试. 一般网站的测试，应按以下流程来进行：. 1）使用HTML Link Validator将网站中的错误链接找出来；. 2）测试的顺序为：自顶向下、从左到右；. 3）查看页面title是否正确. （不只首页，所有页面都要查看）；.

前端xss攻击

- - SegmentFault 最新的文章
实习的时候在项目中有接触过关于xss攻击的内容，并且使用了项目组中推荐的一些常用的防xss攻击的方法对项目进行了防攻击的完善. 但一直没有时间深入了解这东西，在此，做一个简单的梳理. xss跨站脚本攻击(Cross Site Scripting)，是一种经常出现在web应用中的计算机安全漏洞，它指的是恶意攻击者往Web页面里插入恶意html代码，当用户浏览该页之时，嵌入的恶意html代码会被执行，从而达到恶意用户的特殊目的.

初识前端模板

- slackware - 百度泛用户体验
“模板”这个词，可能很多人第一印象是后端的技术（Smarty，Velocity等），但本文要讲的却不是后端的概念，而是前端开发中所使用到的一种技术，也就是“前端模板”技术. 模板的工作原理可以简单地分成两个步骤：模板解析（翻译）和数据渲染. 这两个步骤可分别部署在前端或后端来执行. 如果都放在后端执行，则是像Smarty这样的后端模板，而如果都放在前端来执行，则是我们要探讨的前端模板.

前端的横向发展

- Oasis - 崔凯,前端开发
今天的交流会上，提到了“横向发展”这个词，意指推荐大家学习与前端打交道的相关技术，如：php. 其实“前端”这个词，是2005年才逐渐在国内兴起的. 那之前，国内的网站，通常是TABLE+ASP搞定一切. 做这份工作的人，通称“程序员”. 那是个孤军奋战就能赢得天下的年代. 一个网站丢过来，一个人就全拿了：“写需求==>出设计稿==>做模板==>写程序==>运营.

前端神器 Sublime Text 2

- - 博客园_首页
　　博主之前一直用notepdd++写前端代码，用得也挺顺手了，早就听说sublime的大名，一直也懒得去试试看，认为都是工具用着顺手就好. 这几天突然心血来潮，下了个试了下，结果. 结果博主毫无节操的抛弃了notepad++. 下面根据博主这几天的使用心得，来介绍下这款前端神器，介于使用时间很短，有些说的不妥的地方还望各位看官海涵.

前端CSS规范整理

- - 标点符
1、文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解：. 所有的CSS分为两大类：通用类和业务类. 通用的CSS文件，放在如下目录中：. 基本样式库 /css/core. 通用UI元素样式库 /css/lib. JS组件相关样式库 /css/ui. 业务类的CSS是指和具体产品相关的文件，放在如下目录中：.

Web 前端攻防（2014版）

- - 博客 - 伯乐在线
外链会产生站外请求，因此可以被利用实施 CSRF 攻击. 目前国内有大量路由器存在 CSRF 漏洞，其中相当部分用户使用默认的管理账号. 通过外链图片，即可发起对路由器 DNS 配置的修改，这将成为国内互联网最大的安全隐患. 百度旅游在富文本过滤时，未考虑标签的 style 属性，导致允许用户自定义的 CSS.