程序技术好文:第一百三十八节,JavaScript,封装库

简介: 程序技术好文:第一百三十八节,JavaScript,封装库

JavaScript,封装库--插件


库主要是用来封装一般JavaScript的常规操作代码,而拖拽这种特效代码属于功能性代码,并不是必须的,所以这种类型的代码,我们建议另外封装,在需要的时候作为插件形式引入到库中,作为扩展。


在基础库设置一个extend()方法,来扩展插件


/ 插件入口,简单的理解就是通过extend()方法,向此基础库添加一个原型方法


此extend()方法,一般是给插件文件使用的,插件就是通过extend()方法,将插件方法添加到基础库原型的


接收两个参数


参数1是传入要添加的方法名称


参数2是此方法的执行函数(包含代码)


/


feng_zhuang_ku.prototype.extend = function (name,fn) {


feng_zhuang_ku.prototype【name】 = fn;


};


插件扩展方式,如:拖拽为列


/ tuo_zhuai()方法,将一个弹窗元素实现拖拽功能


注意:有参设置拖拽点区块,只有弹窗的这个拖拽点区块才能拖拽,无参整个弹窗可以拖拽


注意:一般需要在css文件将弹窗元素里的某一个区块光标设置成提示可以拖拽,如:cursor: move; (设置拖拽点)


* 有一个参数,参数是弹窗元素里的拖拽点区块的字符串class值(设置拖拽点的class值)设置后弹窗元素里的这个拖拽点区块才能拖拽


/


//调用基础库extend()方法,创建基础库原型tuo_zhuai()方法


$().extend('tuo_zhuai', function (tuo_zhuai_dian) {


if (this.jie_dian.length == 1) {


var yan_su = null;


var sum = arguments.length;


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


yan_su = this.jie_dian【i】;


}


addEvent(yan_su, 'mousedown', function (e) {


if (trim(yan_su.innerHTML).length == 0)e.preventDefault();


var e1 = getEvent(e); //getEvent()函数库函数,跨浏览器获取事件对象,事件event对象,


var diffx = e1.clientX - yan_su.offsetLeft;


var diffy = e1.clientY - yan_su.offsetTop;


if (sum == 1) {


if (e.target.className === tuo_zhuai_dian) {


addEvent(document, 'mousemove', move);


addEvent(document, 'mouseup', up);


}


} else if (sum == 0) {


addEvent(document, 'mousemove', move);


addEvent(document, 'mouseup', up);


}


function move(e) {


var e2 = getEvent(e);


var left = e2.clientX - diffx;


var top = e2.clientY - diffy;


if (left < 0) {


left = 0;


} else if (left > getInner().width - yan_su.offsetWidth) {


left = getInner().width - yan_su.offsetWidth;


}


if (top < 0) {


top = 0;


} else if (top > getInner().height - yan_su.offsetHeight) {


top = getInner().height - yan_su.offsetHeight;


}


yan_su.style.left = left + 'px';


//代码效果参考:http://www.lyjsj.net.cn/wz/art_24051.html

yan_su.style.top = top + 'px';

if (typeof yan_su.setCapture != 'undefined') {


yan_su.setCapture();


}


}


function up() {


removeEvent(document, 'mousemove', move);


removeEvent(document, 'mouseup', up);


if (typeof yan_su.releaseCapture != 'undefined') {


yan_su.releaseCapture();


}


}


});


} else {


alert("将一个弹窗元素实现拖拽功能,只能设置一个弹窗元素,目前jie_dian数组里是多个元素请检查!")


}


return this;


});


插件说明


/------------------------------------------------插件说明--------------------------------------------/


/ 插件是通过基础库的extend()方法,向基础库原型添加的插件方法


前台使用说明:


1.获取到目标对象,执行插件方法,如:$().huo_qu_id('login');


* 2.页面引入插件js文件,如:


/


/-----------------------------------------//代码效果参考:http://www.lyjsj.net.cn/wx/art_24049.html

-------插件说明--------------------------------------------/

tuo_zhuai()方法,将一个弹窗元素实现拖拽功能

相关文章
|
2月前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
61 1
|
2月前
|
移动开发 JavaScript 前端开发
一些处理浏览器兼容性问题的JavaScript库
这些库在处理浏览器兼容性问题方面都有着各自的特点和优势,可以根据具体的需求和项目情况选择合适的库来使用,从而提高代码的兼容性和稳定性,为用户提供更好的体验。同时,随着浏览器技术的不断发展,还需要持续关注和学习新的兼容性解决方案。
120 48
|
2月前
|
JavaScript 前端开发
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
|
2月前
|
CDN
如何在项目中使用Moment.js库?
如何在项目中使用Moment.js库?
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
73 5
|
2月前
|
JavaScript 前端开发
如何在不影响性能的前提下使用JavaScript库来实现复杂的动画效果?
如何在不影响性能的前提下使用JavaScript库来实现复杂的动画效果?
|
2月前
|
算法 开发者
Moment.js库是如何处理不同浏览器的时间戳格式差异的?
总的来说,Moment.js 通过一系列的技术手段和策略,有效地处理了不同浏览器的时间戳格式差异,为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
59 1
|
2月前
|
JavaScript 前端开发
利用事件循环提高 JavaScript 程序的性能
本文介绍了事件循环在JavaScript中的工作原理,以及如何通过合理利用事件循环来优化程序性能,包括异步操作、任务优先级和避免阻塞等技巧。
|
2月前
|
JavaScript 前端开发 中间件
JS服务端技术—Node.js知识点
本文介绍了Node.js中的几个重要模块,包括NPM、Buffer、fs模块、path模块、express模块、http模块以及mysql模块。每部分不仅提供了基础概念,还推荐了相关博文供深入学习。特别强调了express模块的使用,包括响应相关函数、中间件、Router和请求体数据解析等内容。文章还讨论了静态资源无法访问的问题及其解决方案,并总结了一些通用设置。适合Node.js初学者参考学习。
56 1
|
2月前
|
JavaScript 前端开发 搜索推荐
Moment.js、Day.js、Miment,日期时间库怎么选?
【10月更文挑战第29天】如果你需要一个功能强大、插件丰富的日期时间库,并且对性能要求不是特别苛刻,Moment.js是一个不错的选择;如果你追求极致的轻量级和高性能,那么Day.js可能更适合你;而如果你有一些特定的日期时间处理需求,并且希望在性能和功能之间取得平衡,Miment也是可以考虑的。