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

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

用JQuery将其封装成插件或者扩展JQuery：
JQuery插件开发简易教程
JQuery扩展简易教程

个人之前根据网上找的源码封装了一个简单的dirSlide:dirSlide

其在项目中的简单应用：应用

案例代码：我是底部悬浮

页面效果：

页面使用代码

  window.partBar = {
    barList : ['经典真皮', '简约优雅', '青春学院', '绅士男包','休闲旅行'],
    barColor: ['#f97150', '#fc5b34'],
    color: '#fff'
  }

类似这种功能需要插件：
js + seajs

上面是一个例子。
其核心思想是一样的：
1.一个js（包含组件的js css html）
2.页面上的正确调用
3.正常合理的显示

如果只是想做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），有困难也克服一下，最后肯定获益匪浅的。

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

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

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

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

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

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

【热门文章】