多语言展示
当前在线:1945今日阅读:19今日分享:20

前端开发之路--关于JS代码的若干个小技巧(一)

小编在这里总结了一些平时在开发中使用到的一些技巧,这篇经验是关于JavaScript的代码段。
工具/原料
1

JavaScript

2

HTML5

方法/步骤
1

图片预览。首先进行页面布局,代码如下图所示。使用input标签,设置其type类型为“file”,还需要img标签,作为预览图片的载体。

2

这里其实是要用到HTML5标准中新增的API FileReader来实现图片的预览,首先获取到操作的节点,接下来监听节点的“change”事件,然后在事件处理中创建FileReader对象,去监听'load'事件,将获取到的内容赋值给img标签,完成图片的预览。

3

获取页面所有复选框。这里所用的方法都是JS原生的(当然也可以使用第三方框架更为方便的实现),首先获取所有标签为input的节点集合,然后对其循环遍历,找到type类型为“checkbox”的即可,然后将它push入一个新的对象。

4

判断变量的数据类型为数组。这个可以通过JS的原型链去判断,寻找变量的prototype即可判断该变量是否为数组数据类型。

6

这里要使用JS的深拷贝方法,即assgin方法,他回去遍历源对象的所有属性和值,然后复制给待拷贝的对象,以此完成复制,可以避免源对象被篡改的可能。

推荐信息