前端筆記

基礎

• 常用調瀏覽器兼容工具

  • ietester
  • IE4Linux
  • Spoon Browser Sandbox
  • Superpreview
  • BrowserShots
  • BrowserSeal
  • SuperPreview
  • Viewlike.Us!
  • Litmus

• Browser Kernel

  1. Trident (ie)
  2. Gecko (ff)
  3. Presto (opera)
  4. webkit (chrome)

js 數據類型

Undefined , Null , Boolean , Number , String

JS Null 和 Undefined 區別?

Null : 表示對象被定義了,值僞 ‘空值’.
Undefined : 表示不存在這個值. –*– e.g 变量被声明了，但没有赋值时;

 typeof null         //object
 typeof undefined    //undefined

 //注意: 無法用 == 區分；

new 操作符具體幹了什麼?

//1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
//2、属性和方法被加入到 this 引用的对象中。
//3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

call() 和 apply() 區別和作用?

可以用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象

apply：

最多只能有两个参数——新this对象和一个数组 argArray。如果给该方法传递多个参数，则把参数都写进这个数组里面，当然，即使只有一个参数，也要写进数组里面。如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj，并且无法被传递任何参数。

call：

则是直接的参数列表，主要用在js对象各方法互相调用的时候，使当前this实例指针保持一致,或在特殊情况下需要改变this指针。如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

js 性能優化方案?

• 确保代码尽量简洁 //减少DOM访问
• 压缩代码
• 使用适当的CDN
• Ajax优化

前端模塊化 打包部署方案?

• react webpack.

cookies , sessionStorage 和 localStorage 區別?

• 共同点：都是保存在浏览器端，且同源的。
• 区别：
  
  • cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
  • sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。sessionStorage：仅在当前浏览器窗口关闭前有效，
  • localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；

css 動畫有那些?

• transform、transition以及animation

js 延遲加載的方式?

• 1.使用setTimeout延迟方法的加载时间
• 2.让js最后加载
• 3.window.addEventListener(“load”, downloadJSAtOnload, false);

part 2

簡述H5理解, H5新標籤?

• 移动设备上支持多媒体,跨平台,本地存储.

//語義:
<article>  <aside>  <figure>  <figcaption>  <nav>  <header>  <section>  <footer>

//功能标签：
<video src="" autoplay自动播放 controls控制播放 loop是否重复播放 preload是否自动加载>定义视频</video>
<audio src="">定义音频</audio>
<mark>标记</mark>
<iframe src="" frameborder="0">内嵌网页框架</iframe>
<canvas>定义图形提供画布</canvas>

http://www.daqianduan.com/2857.html
http://blog.csdn.net/catherine_fq/article/details/51884196

如何優化你的頁面?

• 
  
• 书写xhtml的时候做到结构语义化
• css，js文件数量及大小的优化
• 背景图片数量及大小的优化
• 把大部分的css样式表和javascirpt文件放入到网页的外部文件
• 不要使用不必要的图片，动画，声音
• 尽量使用小尺寸的图片
  

http://www.cnblogs.com/mofish/archive/2010/10/12/1849041.html

less , sass 優勢和缺點,理解?

https://www.zhihu.com/question/20300388 //

清除浮動?

/* clearfix 
使用: 作用於浮動元素的父元素上*/

    .dome01 li {
        float: left;
    }
                                        /*簡單版本.clearfix*/
/**************************************************************/
    .clearfix:after, .clearfix:before {
        content: "";
        display: table;
    }
    .clearfix:after {
        clear: both;
        overflow: hidden;
    }
    .clearfix {
        zoom: 1;
    }
                                        /*經典版.clearfix*/
/**************************************************************/
    .clearfix:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }
    * html .clearfix             { zoom: 1; } /* IE6 */
    *:first-child+html .clearfix { zoom: 1; } /* IE7 */

/**
*overflow方法
*父元素设置css，不需要加个class
*/
                                        /*methods add css 01*/
/**************************************************************/
    .overflow {
        overflow:auto;
        *zoom:1;
    }

                                        /*methods add css 02*/
    .overflow {
        overflow:hidden;
        *zoom:1;
    }

/**
*inline-block方法
*父元素设置css，不需要加个class
*/
    .inblock {
        display: inline-block;
    }

Email 郵箱地址格式的正則表達式?

var reg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
var str = "";
reg.test(str);

截取字符串 ‘avdsdsdff’ 中的avd. [1,2,3,4,56,6,6] 去除重復元素.

.substring(0,3)

//indexOf
var student = ['qiang','ming','tao','li','liang','you','qiang','tao'];
function unique(arr){
// 遍历arr，把元素分别放入tmp数组(不存在才放)
var tmp = new Array();
for(var i in arr){
//该元素在tmp内部不存在才允许追加
if(tmp.indexOf(arr[i])==-1){
tmp.push(arr[i]);
}
}
return tmp;
}

冒泡 和 捕獲的區別?

隨機生成 100-300 整數.

Math.round(Math.random()*200+100);

閉包是什麼, 有什麼特性, 對頁面有什麼影響.

//1.閉包是指有權限訪問另一個函數作用域內變量的函數；
//创建: 函数内创建另一个函数，通过另一个函数访问这个函数的局部变量；
//作用: 突破作用链域，将函数内部的变量和方法传递到外部。
 //特性:
     //1.函数内再嵌套函数
     //2.内部函数可以引用外层的参数和变量
     //3.参数和变量不会被垃圾回收机制回收

AJAX 跨域問題?

響應式布局是什麼, 怎麼用?

雪碧圖

DEDE 和 Yii

瀏覽器兼容工具

SVN

漸變效果

頁面如歌自適應各分辨率手機.