前端笔记

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

P3P Cookie

假设这样的情况, 访问网页 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

跨域资源共享 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

当用户进入或离开页面时,会触发 onloadonunload 事件.

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

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

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

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

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技术

自动化