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

相关文章
|
6月前
|
JavaScript 前端开发 Java
通义灵码 Rules 库合集来了,覆盖Java、TypeScript、Python、Go、JavaScript 等
通义灵码新上的外挂 Project Rules 获得了开发者的一致好评:最小成本适配我的开发风格、相当把团队经验沉淀下来,是个很好功能……
1163 103
|
16天前
|
JavaScript 前端开发 IDE
TypeScript vs. JavaScript:技术对比与核心差异解析
TypeScript 作为 JavaScript 的超集,通过静态类型系统、编译时错误检测和强大的工具链支持,显著提升代码质量与可维护性,尤其适用于中大型项目和团队协作。相较之下,JavaScript 更灵活,适合快速原型开发。本文从类型系统、错误检测、工具支持等多维度对比两者差异,并提供技术选型建议,助力开发者合理选择。
207 1
|
29天前
|
监控 JavaScript 前端开发
JavaScript加密与解密技术:Hook技术应用案例分析
以上案例展示了如何利用JavaScript Hook技术结合强大且广泛采纳标准化算法(如AES),无缝地集成进Web应用程序以增强通信安全性。此种方法不仅能够确保敏感信息得到有效保护,并且由于它们操作适度透明、无需重构已存在代码基础架构而具备较高实际可行性及易操作性。
75 11
|
6月前
|
JavaScript 前端开发 API
|
5月前
|
资源调度 JavaScript 前端开发
Day.js极简轻易快速2kB的JavaScript库-替代Moment.js
dayjs是一个极简快速2kB的JavaScript库,可以为浏览器处理解析、验证、操作和显示日期和时间,它的设计目标是提供一个简单、快速且功能强大的日期处理工具,同时保持极小的体积(仅 2KB 左右)。
258 24
|
5月前
|
监控 算法 JavaScript
基于 JavaScript 图算法的局域网网络访问控制模型构建及局域网禁止上网软件的技术实现路径研究
本文探讨局域网网络访问控制软件的技术框架,将其核心功能映射为图论模型,通过节点与边表示终端设备及访问关系。以JavaScript实现DFS算法,模拟访问权限判断,优化动态策略更新与多层级访问控制。结合流量监控数据,提升网络安全响应能力,为企业自主研发提供理论支持,推动智能化演进,助力数字化管理。
118 4
|
11月前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
299 1
|
8月前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
237 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
8月前
|
监控 网络协议 算法
基于问题“如何监控局域网内的电脑”——Node.js 的 ARP 扫描算法实现局域网内计算机监控的技术探究
在网络管理与安全领域,监控局域网内计算机至关重要。本文探讨基于Node.js的ARP扫描算法,通过获取IP和MAC地址实现有效监控。使用`arp`库安装(`npm install arp`)并编写代码,可定期扫描并对比设备列表,判断设备上线和下线状态。此技术适用于企业网络管理和家庭网络安全防护,未来有望进一步提升效率与准确性。
244 8
|
11月前
|
JavaScript 前端开发
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?

热门文章

最新文章