一些基础

于 2017-05-18 17:13:01 发布
阅读量183 收藏
点赞数
1.移动端和pc端兼容标准
2.有哪些浏览器内核
3.模块化
4.seo
5.页面优化
7.css的兼容如何处理的
8.css hack


* 原型继承* 事件机制* 前端安全(XSS、CSRF)* 性能优化* 前端模块化* DOM相关操作及优化* 跨域的方式及原理* AJAX原理* TCP/IP基本概念* HTTP状态码及解释* 浏览器缓存原理

模块化的规范，如AMD，cmd。css的优先级

html5 新特性，前端优化，web安全，离线存储

1.如何隐藏元素。2.如何跨域。3浏览器兼容问题

html5 css3新特性，TCP UDP差别，怎么看浏览器兼容性，关注过什么技术博客，不许用函数实现字符串反转

1. null, undefined 的区别? 

Undefined类型只有一个值，即undefined。当声明的变量还未被初始化时，变量的默认值为undefined。
Null类型也只有一个值，即null。null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。

js 代码
 
  1. var oValue;  
  2. alert(oValue == undefined); //output "true"  


这段代码显示为true,代表oVlaue的值即为undefined，因为我们没有初始化它。

js 代码
 
  1. alert(null == document.getElementById('notExistElement'));  


当页面上不存在id为"notExistElement"的DOM节点时，这段代码显示为"true"，因为我们尝试获取一个不存在的对象。

js 代码
 
  1. alert(typeof undefined); //output "undefined"  
  2. alert(typeof null); //output "object"  

第一行代码很容易理解，undefined的类型为Undefined；第二行代码却让人疑惑，为什么null的类型又是Object了呢？其实这是JavaScript最初实现的一个错误，后来被ECMAScript沿用下来。在今天我们可以解释为，null即是一个不存在的对象的占位符，但是在实际编码时还是要注意这一特性。

js 代码
 
  1. alert(null == undefined); //output "true"  


ECMAScript认为undefined是从null派生出来的，所以把它们定义为相等的。但是，如果在一些情况下，我们一定要区分这两个值，那应该怎么办呢？可以使用下面的两种方法。

js 代码
 
  1. alert(null === undefined); //output "false"  
  2. alert(typeof null == typeof undefined); //output "false"  


使用typeof方法在前面已经讲过，null与undefined的类型是不一样的，所以输出"false"。而===代表绝对等于，在这里null === undefined输出false。

2. eval是做什么的?  
把一个字符串当做一个 JavaScript 表达式一样去执行它。

3. 如何判断一个对象是否属于某个类? 
instanceof 用来指出对象是否特定类的一个实例

注意其它两个的区别 
typeof: 检测变量的数据类型 
hasOwnPropety: 判断对象是否有给出的属性或对象

4. 同步和异步的区别?  
同步  : 客户端发出请求到服务器返回结果中间没有进行其他动作 
异步  : 客户端发出请求后可以进行其他操作

http://blog.csdn.net/qq_34986769/article/details/52155871

5. js延迟加载的方式有哪些?

  • window.onload creatElement(‘script’);
  • document.write()
  • Iframe
  • ajax后eval 代码

6. .call()和.apply()的区别? 
调用一个对象的一个方法，以另一个对象替换当前对象。call 传入参数是对象, apply 传入数组。

7. 如何判断当前脚本运行在浏览器还是node环境中? 
通过判断global对象是否为window, 如果不是, 则是在node环境中。

8. 请指出 document load 和 document ready 两个事件的区别? 
load 事件需要页面完全加载才会触发, ready只要加载完dom结构就可触发。

9. Javascript 有哪几种数据类型,哪些是传值,哪些是传址?

  • 传值: 
    • 字符串 String
    • 数值 Number
    • 布尔 Bool
  • 传址: 
    • 数组 Array
    • 对象 Object
    • 函数 Function
  • 其他: 
    • undefined
    • null

10. 哪些操作会造成内存泄露, 可举例说明?

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
  • setTimeout() 第一个参数是字符串而不是函数的时候会内存泄露
  • 给dom对象添加的属性是一个对象的引用
  • dom对象和js对象相互引用
function Encapsulator(element){
    this.ElementReference = element;
    element.myProp        = this;
}
new Encapsulator(document.getElementById('div'));

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 给dom对象用attachEvent绑定事件。

11. 移动端包含哪几个触屏事件?

  • touchstart
  • touchmove
  • touchend
  • touchcancel

12. 移动端的点击事件有延迟,时间是多少,为什么会有？怎么解决？ 
300ms, iphone浏览器为了监听到双击缩放的事件遗留下的问题。

  • 禁用缩放
  • fastclick
  • zepto的tap

13. Zepto的点透(事件穿透)问题如何解决?

原因：tap事件是需要冒泡到document上才能触发，在冒泡到之前会触发click事件，iphone上有300ms延迟，所以会出现点透。
解决方案
  • touchend
  • fastclick

14. 解释下为什么接下来这段代码不是IIFE(立即调用的函数表达式);

function foo(){};
 
 
  • 1

 
 
  • 1

要做哪些改动使它变成IIFE? 
函数的定义是不能被执行的

(function foo(){})();
 
 
  • 1

 
 
  • 1

15. 请分别列举几个 Javascript 宿主对象和原生对象

  • 宿主对象: Window, Navigator, Image
  • 原生对象: Null, Number, Boolean, String, Object, Function, Array, RegExp

16. 请尽可能多的列举ajax跨域的方案以及原理

  • jsonp
<script>
function callback(json){
    //do something
}
</script>
<script src="http://localhost:80/data.php?callback=callback"></script>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

//上面返回的数据格式 callback({id:1,name:’haha’});

  • iframe

17. 请描述 json 和 jsonp 的区别, jsonp 的原理? 
json 是一种数据交换格式，jsonp 是一个非官方跨域数据交互协议 
jsonp 原理同上

18. 尽可能多的列举前端性能优化措施和方案

  • css spirte
  • cdn 加速
  • script延迟加载
  • img 懒加载
  • js, css 代码压缩合并
  • 本地缓存

19. 写出下面代码运行结果

var length = 10;
function fn(){
    console.log(this.length);
}
var obj = {
    length:5,
    method:function(fn){
        fn();
        arguments[0]();
    }
}
obj.method(fn,1);
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

10, 2

第一个fn 作用域在window, argument是对象, 所以对象调用了fn, this 指向 argument, 长度是2

20. 写出下面代码运行结果

function fn(a){
    console.log(a);
    var a = 2;
    function a(){}
    console.log(a);
}
fn(1);
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

function a(){}, 2

函数先于变量声明,

21. 写出下面代码运行结果

if('a' in window){
    var a = 10;
}
alert(a);
 
 
  • 1
  • 2
  • 3
  • 4

 
 
  • 1
  • 2
  • 3
  • 4

10

变量预编译, a的值 undefined 在window对象里

22. 写出下面代码运行结果

var f = true;
if(f === true){
    var a = 10;
}
function fn(){
    var b = 20;
    c = 30;
}
fn();
console.log(a);// 10
console.log(b);// error
console.log(c);// 30
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

10,error,30

题主唯一做对的，囧

23. 写一个通用(兼容IE)的事件监听函数

my.Event = {
    ready : function(fn){
        if(fn == null){
            fn = document;
        }
        var onload = window.onload;
        if(typeof onload != 'function'){
            window.onload = fn;
        }
        else{
            window.onload = function(){
                onload();
                fn();
            }
        }
    },
    addEvent : function(ele, type, handler){
        if(ele.addEventListener){
            ele.addEventListener(type,hanlder,flase);
        }
        else if(ele.attachEvent){
            ele.attachEvent('on'+type,function(){
                hanlder.call(ele);
            });
        }
        else{
            ele['on'+type] = hanlder;
        }
    },
    removeEvent : function (ele, type, hanlder){
        if(ele.removeEventListener){
            ele.removeEventListener(type,hanlder,false);
        }
        else if(ele.detachEvent){
            ele.detachEvent('on'+type,hanlder);
        }
        else{
            ele['on'+type] = null;
        }
    },
    stopPropagation : function(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }
        else{
            event.cancelBubble = true;
        }
    },
    preventDefault : function(event){
        if(event.preventDefault){
            event.preventDefault();
        }
        else{
            event.returnValue = false;
        }
    },
    getTarget : function(event){
        return event.target || event.srcElement;
    },
    getEvent : function(e){
        var ev = e || window.event;
        if(!ev){
            var c = this.getEvent.caller;
            while(c){
                ev = c.arguments[0];
                if(ev && Event === ev.constructor){
                    break;
                }
                c = c.caller;
            }
        }
        return ev;
    }
}
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74

24. 针对下面dom, 实现一段脚本, 使得对应 li 时 alert 出相应的顺序号.例如点击第二个 li 时 alert 结果 2

<ul>
    <li>呵呵</li>
    <li>哈哈</li>
    <li>嘿嘿</li>
    <li>嘎嘎</li>
    <li>呱呱</li>
</ul>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
 <script type="text/javascript">
    var lis = document.getElementsByTagName('li');
    for(var i = 0, length = lis.length; i < length; i++) {
      (function(i) {
        lis[i].onclick = function() {
          alert(i + 1);
        };
      })(i); 
    }
  </script>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

25. 请编写一个函数, 把 URL 参数解析为一个对象(object) 
如 url = “http://qq.com/index.html?key0=0&key1=1&key2=2”

function parseQueryString(url) {
  var obj = {};
  var a = url.split('?');
  if(a === 1) return obj;
  var b = a[1].split('&');
  for(var i = 0, length = b.length; i < length; i++) {
    var c = b[i].split('=');
    obj[c[0]] = c[1];
  }
  return obj;
}
var url = 'http://witmax.cn/index.php?key0=0&key1=1&key2=2';
var obj = parseQueryString(url);
console.log(obj.key0, obj.key1, obj.key2);
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14


超级王子面
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值