博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端工程师小A学习JS的旅程
阅读量:7113 次
发布时间:2019-06-28

本文共 958 字,大约阅读时间需要 3 分钟。

hot3.png

在网页里,拖拽效果是很常见的形式,实现起来也比较简单,但是这么简单的代码,却能体现出很多前端开发工程湿的JS能力,我们来看看小A工程师的实现路程:

HTML代码:

复制代码
   拖拽效果 
X:0px
Y:80px
复制代码

JS代码:

小A的拖拽JS代码第一版

复制代码
复制代码

这是小A初学JS一个月写出来的JS代码,完美实现了拖拽的功能,并且也能也能注意在适当的时候阻止事件的默认行为,还能用上if(this.releaseCapture){

this.releaseCapture();}这样的语句来防止鼠标离开拖拽BOX。对于小A来说,学习一个月能写出这样的代码来已经实属不易,我们也不得不承认小A是一个学习能力很强的前端工程师。

       又学习了一个月小A学到了js的封装,于是重新看了看上面的代码,觉得处理锁定X轴和锁定Y轴的代码有些重复,而且拖拽的对象可能会发生变化,于是小A改造了一下上面的代码,创建了两个方法函数drag和closexy把主体功能封转在两个函数里面:

小A的拖拽JS代码第二版

复制代码
复制代码

这样一看,代码量减少了许多,而且显得也比较调理,更重要的是封转后的方法在随意的对象上都可以调用,简单、方便!此时的小A学习js的激情高涨,于是就更加勤奋的学习!

    又不知过了多久。小A的js水平有了大幅提高,这个时候小A回头看之前写过的拖拽代码,觉得有很多不妥的地方,比如:没有注意命名空间,没有成模块化、如果拖拽的外围边界不是body了怎么变、如果拖拽的范围变化了呢,拖拽的锁定可不可以做成开放性的呢。基于这些问题,于是小A觉得完全可以把拖拽功能做成一个拖拽库,开放接口,以应付千变万化的拖拽效果和需求,所以小A又写了第三版的拖拽JS代码:

小A的拖拽JS代码第三版

复制代码
复制代码

这样,一个功能齐全的拖拽库就这样漂亮的诞生了!拖拽库开放接口很齐全,代码页很规范。从此小A就不用害怕任何拖拽功能需求了!

       从小A学习js的旅程,我们可以看出,学习JS是一个循序渐进的过程,看似简单的功能,从最开始的实现功能,到不断改进,一直到最后写成一个插件,可以有很多版本,而这些不断改进的过程正是学习JS最好的方法!

转载于:https://my.oschina.net/fengyuqing2012/blog/135532

你可能感兴趣的文章
爬取全部的校园新闻
查看>>
JavaScriptCore
查看>>
union
查看>>
banner 跟随鼠标呈现视差效果
查看>>
linux给用户添加sudo权限
查看>>
前端基础(6)easyUI
查看>>
我有我的方向
查看>>
HBase常用Shell命令
查看>>
vim的个性化配置- 再谈vim的折叠和展开 -- 彻底掌握vim 的展开和折叠!
查看>>
Pytorch-nn.Module-modules()
查看>>
Linux 常用命令
查看>>
Redis命令
查看>>
c#之虚函数
查看>>
Mac安装Brew
查看>>
Flask-WTF表单
查看>>
vs2017常用快捷键
查看>>
使用ffmpeg将GoPro长延时的jpg照片转换成视频文件(一条命令)
查看>>
MyBatis
查看>>
Cookie禁用了,Session还能用吗?
查看>>
c#构造函数
查看>>