1.最简单的,使用变量,然后用匿名函数包裹,不封装

2.对象字面量简单封装(不完整的模块模式,因为无法达到变量、方法私有效果。不过确实有分离和组织代码的能力,也就算一种简略的模块模式的实现方式)

var Carousel = {init: function(){...},bind: function(){...},showPre: function(){...},showNext: function(){...}
};

3.原型构造器模式封装

function Carousel(){this.init();
}Carousel.prototype = {init: function(){...},bind: function(){...},showPre: function(){...},showNext: function(){...}
};

4.模块模式与原型构造器模式绑定多个:使用一个数组保存实例

var CarouselCenter = (function(){var carouselList = [];function init($carousel){$carousel.each(function(){var $cal = $(this);if($cal.hasClass('init')){return;}carouselList.push( new Carousel($cal) );$cal.addClass('init')});}function getList(){return carouselList;}function Carousel($carousel){}Carousel.prototype = {bind: function(){var _this = this;this.$pre.on('click', function(){_this.showPre();});this.$next.on('click', function(){_this.showNext();});},showPre: function(){this.$ct.prepend(this.$ct.children().last());this.$ct.css('left', 0-this.imgWidth);this.$ct.animate({'left': 0});},showNext: function(){var $ct = this.$ct;$ct.animate({'left': 0-this.imgWidth},function(){$ct.append($ct.children().first());$ct.css('left', 0);});}};return {init: init,getList: getList}})(); // 调用
// CarouselCenter.init($('#c1'))
// CarouselCenter.init($('#c2'))
// CarouselCenter.init($('#c2')) //不会重复绑定// CarouselCenter.init($('.carousel')) 

5.通用写法

(function(window,$){function Carousel(){};Carousel.prototype = {};window.Carousel = Carousel;
})(window,jQuery)

ps:

模式目的:编写易于维护的代码,其中一个最重要方面是能够找到代码中重复出现的主题并优化它们。

转载于:https://www.cnblogs.com/ang-/p/6599336.html

JavaScript常见封装方法相关推荐

  1. 33个前端常用的JavaScript函数封装方法

    星标公众号 前端开发博客,回复"交流" 加入我们一起学习,天天进步 这是我在实际开发中常用的一些js函数方法,总结一下,以后可以,有需要的小伙伴可以参考下百度就完事了,不不不!我亲 ...

  2. JavaScript 之封装方法(10种)

    一些常用的javascript方法,希望可以帮到大家 1.输入一个值,返回其数据类型 function type(para) {return Object.prototype.toString.cal ...

  3. JavaScript常见数组方法,教你如何转置矩阵

  4. Java数组去重的多种方法,[Java教程]JavaScript常见的五种数组去重的方式

    [Java教程]JavaScript常见的五种数组去重的方式 0 2016-12-14 15:00:17 ▓▓▓▓▓▓ 大致介绍 JavaScript的数组去重问题在许多面试中都会遇到,现在做个总结 ...

  5. javascript常见方法汇总之一——数组字符串相关

    (转载至慕课网) 原文链接:https://www.imooc.com/article/46933 github地址:https://github.com/dorseysen/notes-about- ...

  6. JavaScript常见变量和函数命名示例

    JavaScript作为前端开发从业人员必须掌握的3大基础知识中最重要的一环,也是平是接触时间最长.写得最多的.在开发过程中必然会遇到命名的问题,你会词穷.纠结.惆怅吗?本文的出现相信能够解决大部分烦 ...

  7. 面向对象的 JavaScript:封装、继承与多态

    本文作者:家园工作室研发组成员 @维尔希宁 本文出处: 面向对象的 JavaScript:封装.继承与多态​blog.lenconda.top 本文遵循署名-非商业性使用-禁止演绎3.0 未本地化版本 ...

  8. JavaScript常见集合操作

    JavaScript常见集合操作 集合的遍历 FOR循环(效率最高) 优点:JavaScript最普遍的for循环,执行效率最高 缺点:无法遍历对象 for(let i=0;i<array.le ...

  9. javascript经典实例_提升JavaScript变量的方法有哪些?

    程序中的变量无处不在.它们是始终相互交互的小数据和逻辑片段:并且此活动使应用程序存活. 在JavaScript中,使用变量的一个重要方面是提升,它定义了何时可以访问变量.如果您正在寻找有关这方面的详细 ...

  10. 第一百三十节,JavaScript,封装库--连缀

    JavaScript,封装库--连缀 学习要点: 1.连缀介绍 2.改写库对象 本章我们重点来介绍,在调用库的时候,我们需要能够在前台调用的时候可以同时设置多个操作,比如设置CSS,设置innerHT ...

最新文章

  1. WC前的颓废——带花树
  2. php mvc开发系列教程第三节 Controller 类实现
  3. MFC VS2012对话框背景填图
  4. C# RichTextBox 实现循环查找关键字
  5. zhajinhua2012邮件等网络服务的广泛应用
  6. 数列分块入门 7(LibreOj-6283)
  7. 脱单盲盒|交友盲盒系统
  8. LeetCode 1497. 检查数组对是否可以被 k 整除
  9. spring-boot+spring-session集成
  10. VXLAN配置实例(五)——云计算数据中心访问公司外部站点典型配置实例(超级超级难的网络配置!!!)
  11. 许晓斌_Maven实战(二)——POM重构之增还是删
  12. 有五万块钱,在农村养牛怎么样?能养多少头牛?
  13. 英语-非谓语动词作定语
  14. threejs学习网址记录
  15. 可视化大屏原型图解决方案附axure可视化组件库
  16. 计算机高级技师评审述职报告,技师述职报告
  17. 在线问答与学科管理系统
  18. matlab车牌识别字符切割,车牌识别字符分割问题
  19. 【Java刷题笔记】牛客网Java入门 1~4
  20. 编码质量评估-编码视频效果测试场景归纳

热门文章

  1. CLRS2e读书笔记—Chapter10
  2. OGRE学习笔记(一)通过例子了解场景管理器---------地形创建
  3. 配置开发支持高并发TCP连接的Linux应用程序全攻略
  4. 最小高度100%页脚保持在底部的布局方法
  5. shark学习(1)【原创】
  6. 苹果 MacBook如何取消开盖自动开机功能?
  7. dependencies.dependency.version' for org.hibernate:hibernate-validator:jar is missing.
  8. 《张居正》—— 读后总结
  9. 微信小程序版本自动更新弹窗提示
  10. Python打包应用程序