写一个简单的分页插件

前段时间有一个项目需要用一个前端分页,说实话之前自己从来没搞过,这次准备自己搞一下,所以先找了几篇文章看看怎么写,但是网上的文章写分页的都基本看不懂,完全不知所云,所以决定在自己搞定分页后写一下如何弄这个。

查看全文
iframe跨域POST提交

以前在面试的时候经常遇到问关于跨域的事儿,所以自己对跨域有一定的概念性了解,知道什么是跨域以及解决跨域的方法,但是具体实际从来没有操作过,直到最近在公司项目中,遇到了一个需要使iframe跨域进行POST提交的实际案例,我才明白具体如何使用iframe进行跨域操作。

查看全文
Promise--优雅解决回调嵌套

最近一直在用空余时间研究node,当我写了一个简单的复制一个文件夹中的文件到另一个位置的时候,我看到了所谓的回调地狱,虽然只是四五个回调嵌套,但是这已经让我感到害怕,我写这么简单的一个小demo就写成这样,那稍微复杂点儿还了得?记得在看ES6的时候,里面提到过一种新的解决回调的方式---Promise,而且在node中也常用这个解决大量嵌套,所以这几天花了点儿时间看了看Promise,让我对Promise的认识更加清晰,所以写一些东西总结一下。

查看全文
Javascript中字符串方法总结

字符方法

chartAt()与charCodeAt()

参数:基于0的字符位置

chartAt()以单字符字符串的形式返回给定位置的那个字符。而charCodeAt()返回的是字符编码。

1
2
3
var stringValue = 'hello world';
/*chartAt()*/
console.log(stringValue.chartAt(1)); // 'e'
查看全文
JS中的位置与大小

最近事儿比较多,一直没时间写东西,前几天又遇到关于获取元素大小的问题,每次遇到这类问题就翻书,比较费时间,所以总结一下。

1.元素的偏移量

元素的偏移量包括元素在屏幕上占用的所有可见的空间。元素的可见大小由其高度、宽度决定,包括所有内边距、滚动条和边框大小(注意:这里并不包括外边距)。

icon

查看全文
Javascript中Array方法的总结

在ECMAScript中最常用的类型之一就是Array类型,Array类型的方法也有很多,所以在这篇文章中,梳理一下Array类型的方法。

新建数组

新建数组的方法有三种:

1
2
3
4
5
6
/*方法一*/
var a = new Array(1,2,3);
/*方法二*/
var b = [1,2,3];
/*方法三(ES6新增)*/
var c = Array.of(1,2,3);

Array.of()是ES6中新增的将一组值转换为数组的方法,该方法的出现时为了弥补构造函数Array()因为参数不同导致的不同行为。

1
2
3
Array() //[]
Array(3) //[ , , ]
Array(1,2,3) //[1,2,3]

从上面可以看出,只有在参数个数不少于2时候,才会返回新的数组。

查看全文
文件上传(二)---新XMLHttpRequest实现带进度条文件上传

前几天搞得那个文件上传,最近工作不太忙,又开始完善。这次主要添加了文件上传的进度部分,主要用到的则是XMLHttpRequest2的progress,由于我读的是《javascript高级程序设计》(第三版),这里我遇到一个关于progeress事件的坑,后面详细解答。

创建XMLHttpRequest对象

首先说说XMLHttpRequest,在IE7+浏览器中,只需要new一个XMLHttpRequest对象即可:

1
let xhr=new XMLHttpRequest();

由于现在淘宝都不再支持IE6以及7,所以这里不考虑IE7及以下浏览器关于xhr的创建方法。

查看全文
初探ES6——轮播图实践总结

  最近因为同学的一个轮播图不会写,让我萌生了用ES6写一个轮播图的想法(本人喜欢这些玩儿一些新的东西),以前就知道ES6,但是一直没有学,现在终于下决心学了,借助阮一峰老师的书ECMAScript 6 入门 和Youtube上面老外的视频学习ES6非常不错。阮一峰老师的书写的非常详细,推荐想学习的ES6的同学仔细看看。本篇文章会总结在实践中用到的ES6的知识。

模板字符串

这是我非常喜欢的ES6的特点之一,非常直观的反应出变量和字符串之间的关系,在ES5中,如果我们想在字符串中添加变量,需要用如下写法:

1
2
3
4
5
animate(box, 'translate(-' + itemWidth * num + 'px,0)', 1000, function () {
box.style.transitionDuration = '';
box.style.transform = 'translate(-800px,0)';
flag = true;
});

现在用ES6的模板字符串,可以直接把字符串和变量相结合,更加易懂。

1
2
3
4
5
animate(box, `translate(-${itemWidth*num}px,0)`, 1000, function() {
box.style.transitionDuration = '';
box.style.transform = `translate(-${itemWidth*(item.length-2)}px,0)`;
flag = true;
});

查看全文