web面试笔试题摘取

作者: 秋天de童话 | 来源:发表于2017-06-14 20:51 被阅读74次

一、css js 压缩工具

  1. JavaScript Minifier
  2. JSMIni
  3. JSCompress
  4. Minifier
  5. Gulp.js
  6. Uglifyjs
  7. Grunt
  8. Koala
  9. Prepros
  10. Ajax Minifier
  11. Smaller
  12. Ultra Minifier
  13. Require JS
  14. Online JavaScript/CSS Compressor
  15. Minify

二、javascript和jquery修改a标签的href属性
document.getElementById("myId").setAttribute("href","www.xxx.com");
document.getElementById("myId").href = "www.xxx.com";
$("#myId").attr("href","www.xxx.com");

三、[理解HTTP/304响应(HTTP原理中的缓存机制)]
(http://blog.csdn.net/soonfly/article/details/50953814)

四、react 生命周期
实例化
首次实例化

getDefaultProps
getInitialState
componentWillMount
render
componentDidMount
实例化完成后的更新

getInitialState
componentWillMount
render
componentDidMount
存在期
组件已存在时的状态改变

componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
销毁&清理期
componentWillUnmount
说明
生命周期共提供了10个不同的API。

1.getDefaultProps

作用于组件类,只调用一次,返回对象用于设置默认的props,对于引用值,会在实例中共享。

2.getInitialState

作用于组件的实例,在实例创建时调用一次,用于初始化每个实例的state,此时可以访问this.props。

3.componentWillMount

在完成首次渲染之前调用,此时仍可以修改组件的state。

4.render

必选的方法,创建虚拟DOM,该方法具有特殊的规则:

只能通过this.props和this.state访问数据
可以返回null、false或任何React组件
只能出现一个顶级组件(不能返回数组)
不能改变组件的状态
不能修改DOM的输出
5.componentDidMount

真实的DOM被渲染出来后调用,在该方法中可通过this.getDOMNode()访问到真实的DOM元素。此时已可以使用其他类库来操作这个DOM。

在服务端中,该方法不会被调用。

6.componentWillReceiveProps

组件接收到新的props时调用,并将其作为参数nextProps使用,此时可以更改组件props及state。

componentWillReceiveProps: function(nextProps) {
    if (nextProps.bool) {
        this.setState({
            bool: true
        });
    }
}

7.shouldComponentUpdate

组件是否应当渲染新的props或state,返回false表示跳过后续的生命周期方法,通常不需要使用以避免出现bug。在出现应用的瓶颈时,可通过该方法进行适当的优化。

在首次渲染期间或者调用了forceUpdate方法后,该方法不会被调用

8.componentWillUpdate

接收到新的props或者state后,进行渲染之前调用,此时不允许更新props或state。

9.componentDidUpdate

完成渲染新的props或者state后调用,此时可以访问到新的DOM元素。

10.componentWillUnmount

组件被移除之前被调用,可以用于做一些清理工作,在componentDidMount方法中添加的所有任务都需要在该方法中撤销,比如创建的定时器或添加的事件监听器。

五、JavaScript判断变量是否为数组的方法(Array)
1.typeof

//首先看代码
var ary = [1,23,4];
console.log(typeof ary); //输出结果是Object

2.instanceof 判断

var ary = [1,23,4];
console.log(ary instanceof Array)//true;

3.原型链方法

var ary = [1,23,4];
console.log(ary.__proto__.constructor==Array);//true
console.log(ary.constructor==Array)//true 这两段代码是一样的

这个办法开起来好高大上哦~,利用了原型链的方法,但是但是,这个是有兼容的哦,在IE早期版本里面__proto__是没有定义的哦而且,这个仍然有局限性,我们现在就来总结一下第2种方法和第3种方法局限性
总结一下第2种方法和第3种方法局限性
instanceof 和constructor 判断的变量,必须在当前页面声明的,比如,一个页面(父页面)有一个框架,框架中引用了一个页面(子页面),在子页面中声明了一个ary,并将其赋值给父页面的一个变量,这时判断该变量,Array == object.constructor;会返回false;
原因:
1、array属于引用型数据,在传递过程中,仅仅是引用地址的传递。
2、每个页面的Array原生对象所引用的地址是不一样的,在子页面声明的array,所对应的构造函数,是子页面的Array对象;父页面来进行判断,使用的Array并不等于子页面的Array;切记,不然很难跟踪问题!

4.通用的方法

var ary = [1,23,4];
function isArray(o){
return Object.prototype.toString.call(o)=='[object Array]';
}
console.log(isArray(ary));

具体Object.prototype.toString 的用法,请参照 Object.prototype.toString的用法

相关文章

网友评论

    本文标题:web面试笔试题摘取

    本文链接:https://www.haomeiwen.com/subject/wnheqxtx.html