Todo

Javascript绝对简明教程 http://wiki.woodpecker.org.cn/moin/jsInAWord
对Web标准的理解, 浏览器差异
HTML / CSS / JavaScript(基础, JS面向对象实现原理/闭包机制/作用域)
AngularJS / Ember.js / jQuery
Jade / Swig / Handlebars / Mustache 或者其它模板引擎
SASS 或者其它 CSS 预处理器
Js代码混淆 grunt/uglify

Content-Type

各浏览器对常用或者错误的 Content-Type 类型处理方式 http://w3help.org/zh-cn/causes/CH9001 or http://www.w3help.org/zh-cn/causes/CH9002

假设这样的情况, 访问网页 a.com, 网页 a.com 通过 jsonp或 iframe访问了 <b.com/set-cookie.php>, 这个php里会set <b.com> 的 cookie.
如果 <b.com/set-cookie.php>里没有把 response设置 P3P头, 那么<b.com/set-cookie.php> 种cookie将会不成功 @ref http://www.lovelucy.info/ie-accept-third-party-cookie.html

正确的做法, 如果<b.com/set-cookie.php>是一个(为第三方页面)种cookie的页面, 那么<set-cookie.php>要增加P3P头:

header('P3P:CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"');

Java版本的:

response.setHeader("P3P","CP='IDC DSP COR CURa ADMa OUR IND PHY ONL COM STA'");

CSP(Content Security Policy)

CSP可以防止什么: XSS(跨域脚本攻击)

如何启用CSP:

返回的resp里带header “Content-Security-Policy”

Content-Security-Policy: script-src 'self'; object-src 'none';
style-src cdn.example.org third-party.org; child-src https:

网页的meta标签:

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">

@ref: Content Security Policy 入门教程 - 阮一峰的网络日志：http://www.ruanyifeng.com/blog/2016/09/csp.html

跨域

浏览器的同源策略 https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy

a.com/1/xx.html | a.com/2/xx.html 同源
https://a.com | http://a.com 不同源(协议不同)
www.a.com | cdn.a.com 不同源(子域不同)
www.a.com:8080 | www.a.com:80 不同源(端口不同)

跨域资源共享 CORS 详解 - 阮一峰的网络日志：https://www.ruanyifeng.com/blog/2016/04/cors.html

资源加载跨域

原理：所有具有src属性的HTML标签都是可以跨域的
限制：需要创建一个DOM对象，只能用于GET方法

<!-- 常用的可以跨域的标签 -->
<script src="..."></script>
<img src="..."/>
<iframe src="..." />

document.domain + iframe跨域

这种方式只针对相同主域名不同子域名下的页面才有效,
以(http://a.com/foo.html)和(http://cdn.a.com/bar.html)为例:

// URL http://a.com/foo.html
var ifr = document.createElement('iframe');
ifr.src = 'http://cdn.a.com/bar.html';  // 这里跨域访问了cdn.a.com/bar
ifr.onload = function(){
    var ifrdoc = ifr.contentDocument || ifr.contentWindow.document;
    ifrdoc.getElementsById("foo").innerHTML);
};

ifr.style.display = 'none';
document.body.appendChild(ifr);

只要在(http://cdn.a.com/bar.html)里加入声明:

document.domain = 'a.com' // 往上提了一级域名

ajax使用jsonp跨域

jsonp 全称是JSON with Padding, 原理是客户端依靠<script src="..."\>标签的src发起跨域请求, 远端服务器返回给客户端一段js代码, 这段js代码自动调用客户端的函数

function getBooks(){
            $.ajax({
                type:'get',
                url:'http://test.com/bookservice.php',
                dataType:'jsonp',
                jsonp:'callback',
                jsonpCallback:'displayBooks'
            });
        }

参考: js中几种实用的跨域方法原理详解

HTML简明参考

按钮

在一个页面上画一个按钮，有四种办法：

<input type="button" /> 这就是一个按钮。如果你不写javascript 的话，按下去什么也不会发生。
<input type="submit" /> 这样的按钮用户点击之后会自动提交 form，除非你写了javascript 阻止它。
<button> 这个按钮放在 form 中也会点击自动提交，比前两个的优点是按钮的内容不光可以有文字，还可以有图片等多媒体内容。（当然，前两个用图片背景也可以做到）。它的缺点是不同的浏览器得到的 value 值不同；可能还有其他的浏览器兼容问题。请始终为<button>规定 type 属性。Internet Explorer 的默认类型是 “button”，而其他浏览器中（包括 W3C 规范）的默认值是 “submit”。
其他标签，例如 a, img, span, div，然后用图片把它伪装成一个按钮。
参考<button>和<input type="button"的区别 (http://www.cnblogs.com/purediy/archive/2012/06/10/2544184.html)

JavaScript简明参考

参考: JavaScript权威指南(第6版)

匿名

定义并执行 (function(){})(), function的小括号是必须的
定义: var fnB = function(){ }

JavaScript事件

点击事件: onclick

当用户进入或离开页面时，会触发 onload 和 onunload 事件.

onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。
onload 和 onunload 事件可用于处理 cookies。

下面的例子展示了如何使用 onchange。当用户改变输入字段的内容时，将调用 upperCase() 函数。

<input type="text" id="fname" onchange="upperCase()">

onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。

CSS

CSS的「空格」和「>」

「>」代表的是css3特有的子元素选择器（element>element ）,「>」是直接子元素
「空格」空格隔开表示从属包含关系，是当前的元素子元素,「空格」是所有子元素
「逗号」逗号隔开表示两个不同类的样式类名用同一个样式,

CSS的「点」和「#」

「点」对应class
.card {
}
「井号」对应id :
#Kard {

}
不加对应html标签比如 ul,img,p

Class与ID的区别:

Class: Class是用来根据用户定义的标准对一个或多个元素进行定义的
ID: ID是定义页面上一个仅出现一次的标记

AJAX（Asynchronous JavaScript And XML）

chrome dev tool:

console : 输入$ 判断是否有jquery (prototype)
console : 输入$('#user_name') 判断
$('#ABC #list_') 寻找id=ABC, 再在子节点寻找id=list_
$('.ABC .list_') 寻找class=ABC

前端调试

chrome调试工具:
- c-p：打开资源
- fiddler替代chrome调试
- 通过chrome审核元素找div
- chrome的console交互命令，找jQuery，找各种资源
- 把js保存位chrome书签
conslole:
1. console : 输入$ 判断是否有jquery
2. console : 输入$('#user_name') 判断
js断点：
1. 在chrome设置断点，要求这个js是可以缓存的
2. debugger
3. console.log(123)
对于压缩的js如何处理
用finddle让浏览器解析本地js
补充: 五个你必须知道的javascript和web-debug技术

自动化

如何用工程手段解决前端开发和部署优化的综合问题