前端笔记

字数统计: 1,300

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通过jsonp或iframe访问了b.com/set-cookie.php, 这个php里会种b.com的cookie.
如果b.com/set-cookie.php里没有把response设置P3P头, 那么set-cookie.php种cookie将会不成功(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"');
response.setHeader("P3P","CP='IDC DSP COR CURa ADMa OUR IND PHY ONL COM STA'");

跨域

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

资源加载跨域

原理：所有具有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的「点」和「#」

  • 「点」对应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技术

自动化