javascript - web前端开发中如何封装常用页面效果-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 AI 提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - web前端开发中如何封装常用页面效果

PHP中文网 2017-04-10 15:16:11

[JavaScript讨论组]

804

在前端开发中，经常要编写一些交互效果，比如，回到顶部，焦点图轮播，弹出层等等。但是编写的方式都是过程式的，一会这一个函数，一会那一个函数，充斥太多的全局代码，自身也意识到这种问题。只是，不知道如何将那些效果封装起来，比如，封装成一个插件，可以复用。这种思想该如何转变呢？该如何将一堆凌乱的代码组织起来呢？
如果能有一个具体的实例就更好了^_^!

PHP中文网

认证0级讲师

全部回复(2)

黄舟2017-04-10 15:18:11 2楼

如果只是想做jquery插件，最简单的方法就是直接用$.fn扩展

$.fn.dosomething = function() {
    //dosomething……

    return this；
    //返回本身以保持链式调用
}

然后直接使用传统的jquery的调用方式就行了

$('element').dosomething();

你应该知道在定义函数的时候this指针是指向调用其的元素的，实在不懂可以打印出来看看。

另外也可以用更加优雅点的闭包方式

(function($) {
    function dosomething() {
        //dosomething....
    }

    $.fn.interface = dosomething;
})(jQuery);

使用IIFE（自启动函数？）也是目前比较主流的插件写法，你同样也可以传入其他对象(包括window)，然后把接口暴露在上面。

$.fn其实就是$.prototype，只是个简化了的接口，如果不太明白可以去看一下闭包以及如何使用Javascript的原形实现继承。其实要做的都是一件事情就是把要做的事情抽象成一个函数，然后留一个可调用的接口。

其实例子最好就是那个你可能天天都在用的Bootstrap，有条件你可以阅读一下Bootstrap的源码，它实现插件的方式很优雅，一开始就读优秀的代码也对个人学习有很大帮助。BS的源码难度不大，而且有一些很棒的实现（比如ScrollSpy），有困难也克服一下，最后肯定获益匪浅的。

赞 +0

添加回复

黄舟2017-04-10 15:18:11 1楼

题主所说的「交互效果」至少涉及三个不同的软件模块子：

DOM操作逻辑：按照需求调用DOM API的逻辑
样式：布局、UI外观等
交互逻辑：响应用户事件的逻辑

UI模块总是或多或少的涉及到以上一个或者多个模块子：

回到顶部：DOM、交互
焦点图轮播：DOM、（交互）
弹出层：DOM、样式
JQuery：DOM
JQuery UI：交互逻辑
Bootstrap CSS：样式

将UI模块分解成模块子，使用任何传统的软件工程方法进行封装：面向对象、插件、各种设计模式等

还有一点，个人经验告诉我，不要封装交互逻辑，因为无论你封的多好看还是可能满足不了需求

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>