程序技术好文:第一百三十八节,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()方法,将一个弹窗元素实现拖拽功能

相关文章
|
7天前
|
前端开发 数据安全/隐私保护
crypto-js中AES的加解密封装
文章介绍了如何在前端使用crypto-js库进行AES加密和解密,提供了加解密的函数封装示例,并演示了如何加密和解密字符串或对象。
35 1
crypto-js中AES的加解密封装
|
8天前
|
JavaScript 前端开发 Python
用python执行js代码:PyExecJS库
文章讲述了如何使用PyExecJS库在Python环境中执行JavaScript代码,并提供了安装指南和示例代码。
45 1
用python执行js代码:PyExecJS库
|
2月前
|
JavaScript Java Serverless
函数计算产品使用问题之如何使用Node.js编写程序
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
9天前
|
JavaScript 前端开发
常用的 JavaScript 框架和库
常用的 JavaScript 框架和库
13 6
|
9天前
|
移动开发 JavaScript 数据可视化
|
22天前
|
设计模式 JavaScript
JS发布订阅模式封装(纯手工)
发布订阅模式是JS常用的设计模式,在面试中也会经常遇到,以下是我的手写实现方式,经测试效果不错,小伙伴们们可以直接拷贝使用。
|
2月前
|
机器学习/深度学习 人工智能 自然语言处理
深度学习中的图像识别技术深入理解Node.js事件循环及其在后端开发中的应用
【8月更文挑战第27天】本文将介绍深度学习中的图像识别技术,包括其原理、应用领域及未来发展。我们将探讨如何通过神经网络实现图像识别,并分析其在医疗、交通等领域的应用。最后,我们将展望图像识别技术的发展前景。
|
2月前
|
运维 Cloud Native JavaScript
云端新纪元:云原生技术深度解析深入理解Node.js事件循环及其在异步编程中的应用
【8月更文挑战第27天】随着云计算技术的飞速发展,云原生已成为推动现代软件开发和运维的关键力量。本文将深入探讨云原生的基本概念、核心价值及其在实际业务中的应用,帮助读者理解云原生如何重塑IT架构,提升企业的创新能力和市场竞争力。通过具体案例分析,我们将揭示云原生技术背后的哲学思想,以及它如何影响企业决策和操作模式。
|
2月前
|
JavaScript 前端开发 数据可视化
图像裁剪库Cropper.js的学习使用
图像裁剪库Cropper.js的学习使用
45 4
|
2月前
|
JavaScript 开发者 UED
Vue.js 错误处理与调试:跟上技术潮流,摆脱开发困扰,成为代码大神不是梦!
【8月更文挑战第30天】在 Vue.js 开发中,错误处理与调试至关重要。本文将对比 Vue 的全局错误捕获机制 `Vue.config.errorHandler` 和组件内 `watch` 监听数据变化的方式,并介绍 Vue 开发者工具、控制台打印 (`console.log`) 以及代码断点 (`debugger`) 等调试方法。此外,还将探讨如何通过自定义错误页面提升用户体验。通过这些技巧的对比,帮助开发者灵活选择适合的策略,确保应用稳定性和开发效率。
41 0
下一篇
无影云桌面