师资

环境

就业

作品

企业培训

扫码
关注

首页 > 行业资讯

web前端知识小笔记

时间:2017年10月10日 来源:火星人

1.js构造对象问题

function Person {}
Person.prototype.test = function() {} 

当代码 new Person(...) 执行时:
一个新对象被创建。它继承自Person.prototype.构造函数 Person 被执行。执行的时候,相应的传参会被传入,同时上下文(this)会被指定为这个新实例。
new Person()与new Person这两种写法有相同的效果。
new Person 等同于 new Person(), 只能用在不传递任何参数的情况。

2.html5的拖拽,用了preventDefault防止弹出新页面,ie有效,但在火狐下不管用?

<p id="p" draggable="true" ondragstart="dragStart(event)">sss</p>" //ps:不加红显示不了p标签。
<div ondragover="dragOver(event)" style="width:100%;height:50px;"></div>
<script>
function dragOver(e){
stopDefault(e);
}
function stopDefault(e) {
var event = e||window.event;
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}

解决方式:
在body设置ondrop
document.body.ondrop = function (event) {
        event.preventDefault();
        event.stopPropagation();
}

3.使用ajaxfileupload.js进行文件上传,后台成功执行,前台却进入error

问题描述:使用ajaxfileupload.js进行文件上传,后台正确执行,并返回了对应的响应值,但是前台进入error,返回值自动加上了<pre>标签

ajaxfileupload不支持响应头ContentType为application/json设置,不支持原因可能是为了浏览器兼容,因为ie不支持application/json格式,另外firefox, chrome浏览器iframe在接收application/json格式的时候会自动将其转化为html格式,自动在json数据前后加上<pre></pre>标签导致ajaxfileupload插件取json数据错误

4.网页中的背景图怎样让他加载的更快?

描述:网页中很多地方有背景图,但网页打开时,他才一点一点的显示,怎样让它快速的显示?在网页制作过程中,怎样优化有图片的地方?

用 jpeg,设置压缩率
图片切片,组合成一张大图
用 CDN 加速

5.([] + {}).length ?

[] + {} 运算,首先是调用对象的 valueOf 方法,如果返回一个基本类型,则以该基本类型参与运算;否则调用 toString 方法,返回基本类型则参与运算。

数组和对象的 valueOf(默认)返回自身,因此不是基本类型,接着调用 toString,空数组返回空字符串,普通对象始终返回字符串 [object Object]。故视为两个字符串的拼接,结果为字符串 [object Object],其长度为 15。

一个例外是 Date 的实例,其实例首先调用 toString ,接着才调用valueOf。
可以这样验证:
([]).toString() // ""
({}).toString() // "[object Object]"
([]+{}) // "[object Object]"

6.js对Date对象的操作的问题

使用JavaScript生成一个倒数7天的数组。
比如今天是10月1号,生成的数组是["9月25号","9月26号","9月27号","9月28号","9月29号","9月30号","10月1号"]。

Date 的 setDate() 可以给 0 和负数作为参数,日期会自动计算

var today = new Date();
var dates = [today];
for (var i = 1; i < 7; i++) {
    var d = new Date(today);
    d.setDate(d.getDate() - i);
    dates.unshift(d);
}

console.log(dates);
[Fri Sep 25 2015 09:58:23 GMT+0800 (中国标准时间),
 Sat Sep 26 2015 09:58:23 GMT+0800 (中国标准时间),
 Sun Sep 27 2015 09:58:23 GMT+0800 (中国标准时间),
 Mon Sep 28 2015 09:58:23 GMT+0800 (中国标准时间),
 Tue Sep 29 2015 09:58:23 GMT+0800 (中国标准时间),
 Wed Sep 30 2015 09:58:23 GMT+0800 (中国标准时间),
 Thu Oct 01 2015 09:58:23 GMT+0800 (中国标准时间)]
如果要取得格式化后的日期

var today = new Date();
var dates = [today];

for (var i = 1; i < 7; i++) {
    var d = new Date(today);
    d.setDate(d.getDate() - i);
    dates.unshift(d);

} dates = dates.map(function(d) {
    return (d.getMonth() + 1) + "月" + d.getDate() + "日";
});
console.log(dates);
结果:

["9月25日",
 "9月26日",
 "9月27日",
 "9月28日",
 "9月29日",
 "9月30日",
 "10月1日"]

7.用闭包保存状态

和普通function执行的时候传参数一样,自执行的函数表达式也可以这么传参,因为闭包直接可以引用传入的这些参数,利用这些被lock住的传入参数,自执行函数表达式可以有效地保存状态。

// 这个代码是错误的,因为变量i从来就没背locked住
// 相反,当循环执行以后,我们在点击的时候i才获得数值
// 因为这个时候i操真正获得值
// 所以说无论点击那个连接,最终显示的都是I am link #10(如果有10个a元素的话)

var elems = document.getElementsByTagName('a');

for (var i = 0; i < elems.length; i++) {

    elems[i].addEventListener('click', function (e) {
        e.preventDefault();
        alert('I am link #' + i);
    }, 'false');

}

// 这个是可以用的,因为他在自执行函数表达式闭包内部
// i的值作为locked的索引存在,在循环执行结束以后,尽管最后i的值变成了a元素总数(例如10)
// 但闭包内部的lockedInIndex值是没有改变,因为他已经执行完毕了
// 所以当点击连接的时候,结果是正确的

var elems = document.getElementsByTagName('a');

for (var i = 0; i < elems.length; i++) {

    (function (lockedInIndex) {
        elems[i].addEventListener('click', function (e) {
            e.preventDefault();
            alert('I am link #' + lockedInIndex);
        }, 'false');

    })(i);

}

// 你也可以像下面这样应用,在处理函数那里使用自执行函数表达式
// 而不是在addEventListener外部
// 但是相对来说,上面的代码更具可读性

var elems = document.getElementsByTagName('a');

for (var i = 0; i < elems.length; i++) {

    elems[i].addEventListener('click', (function (lockedInIndex) {
        return function (e) {
            e.preventDefault();
            alert('I am link #' + lockedInIndex);
        };
    })(i), 'false');

}

8.各浏览器的navigator.userAgent

IE11:Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; rv:11.0) like Gecko

IE10:Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)

IE9: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)

IE8: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)

谷歌:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36

火狐:Mozilla/5.0 (Windows NT 6.1; WOW64; rv:48.0) Gecko/20100101 Firefox/48.0

QQ浏:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.80 Safari/537.36 Core/1.47.933.400 QQBrowser/9.4.8699.400

360js:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36

360jr:Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)

safar:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2

9.向一个数组中插入元素

向数组结尾添加元素用push()很简单,但下面有一个更高效的方法:

例如:

var arr = [1,2,3,4,5];
var arr2 = [];

arr.push(6);
arr[arr.length] = 6;
最快的为:
1.arr[arr.length] = 6; // 平均 5 632 856 ops/sec
2.arr.push(6); // 慢35.64%
3.arr2 = arr.concat([6]); // 慢62.67%

向数组的头部添加元素现在我们试着向数组的头部添加元素:

var arr = [1,2,3,4,5];

arr.unshift(0);

[0].concat(arr);
注:这里有一些小区别,unshift操作的是原始数组,concat返回一个新数组

最快的为:

[0].concat(arr); // 平均6 032 573 ops/sec
arr.unshift(0); // 慢78.65%
向数组中间添加元素,使用splice可以简单的向数组中间添加元素,这也是最高效的方法:

var items = ['one', 'two', 'three', 'four'];
items.splice(items.length / 2, 0, 'hello');
参考地址:http://www.cnblogs.com/rubylo..

10.禁止button按钮的点击与禁止a标签的跳转

pointer-events:none禁止掉鼠标事件(css3属性)
禁止button按钮的点击:

<button" type="button" class="btn btn-default btn-lg">默认按钮</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">禁用按钮</button>
button禁止点击的样式:

button{cursor: not-allowed;}
所以button用到了disabled="disabled"与样式cursor: not-allowed

禁止a标签的跳转行为:

<a href="#" class="btn btn-default btn-lg" role="button">链接</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">禁用链接</a>
样式:

a{pointer-events: none;cursor:not-allowed}

热门课程推荐  点击查看全部课程

北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
北京UI培训

关键词:北京UI设计培训,北京UI设计,UI设计培训,UI交互设计

  • 14年教育品牌
  • 课程不断更新
  • 签订就业协议
  • 项目案例讲解
  • O2O教学模式

北京火星人科技文化发展中心版权所有 Copyright & copy 2002-2016 2ds.cn, All Rights Reserved 京ICP备 10216795号