JavaScript常见封装方法
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常见封装方法相关推荐
- 33个前端常用的JavaScript函数封装方法
星标公众号 前端开发博客,回复"交流" 加入我们一起学习,天天进步 这是我在实际开发中常用的一些js函数方法,总结一下,以后可以,有需要的小伙伴可以参考下百度就完事了,不不不!我亲 ...
- JavaScript 之封装方法(10种)
一些常用的javascript方法,希望可以帮到大家 1.输入一个值,返回其数据类型 function type(para) {return Object.prototype.toString.cal ...
- JavaScript常见数组方法,教你如何转置矩阵
- Java数组去重的多种方法,[Java教程]JavaScript常见的五种数组去重的方式
[Java教程]JavaScript常见的五种数组去重的方式 0 2016-12-14 15:00:17 ▓▓▓▓▓▓ 大致介绍 JavaScript的数组去重问题在许多面试中都会遇到,现在做个总结 ...
- javascript常见方法汇总之一——数组字符串相关
(转载至慕课网) 原文链接:https://www.imooc.com/article/46933 github地址:https://github.com/dorseysen/notes-about- ...
- JavaScript常见变量和函数命名示例
JavaScript作为前端开发从业人员必须掌握的3大基础知识中最重要的一环,也是平是接触时间最长.写得最多的.在开发过程中必然会遇到命名的问题,你会词穷.纠结.惆怅吗?本文的出现相信能够解决大部分烦 ...
- 面向对象的 JavaScript:封装、继承与多态
本文作者:家园工作室研发组成员 @维尔希宁 本文出处: 面向对象的 JavaScript:封装.继承与多态blog.lenconda.top 本文遵循署名-非商业性使用-禁止演绎3.0 未本地化版本 ...
- JavaScript常见集合操作
JavaScript常见集合操作 集合的遍历 FOR循环(效率最高) 优点:JavaScript最普遍的for循环,执行效率最高 缺点:无法遍历对象 for(let i=0;i<array.le ...
- javascript经典实例_提升JavaScript变量的方法有哪些?
程序中的变量无处不在.它们是始终相互交互的小数据和逻辑片段:并且此活动使应用程序存活. 在JavaScript中,使用变量的一个重要方面是提升,它定义了何时可以访问变量.如果您正在寻找有关这方面的详细 ...
- 第一百三十节,JavaScript,封装库--连缀
JavaScript,封装库--连缀 学习要点: 1.连缀介绍 2.改写库对象 本章我们重点来介绍,在调用库的时候,我们需要能够在前台调用的时候可以同时设置多个操作,比如设置CSS,设置innerHT ...
最新文章
- WC前的颓废——带花树
- php mvc开发系列教程第三节 Controller 类实现
- MFC VS2012对话框背景填图
- C# RichTextBox 实现循环查找关键字
- zhajinhua2012邮件等网络服务的广泛应用
- 数列分块入门 7(LibreOj-6283)
- 脱单盲盒|交友盲盒系统
- LeetCode 1497. 检查数组对是否可以被 k 整除
- spring-boot+spring-session集成
- VXLAN配置实例(五)——云计算数据中心访问公司外部站点典型配置实例(超级超级难的网络配置!!!)
- 许晓斌_Maven实战(二)——POM重构之增还是删
- 有五万块钱,在农村养牛怎么样?能养多少头牛?
- 英语-非谓语动词作定语
- threejs学习网址记录
- 可视化大屏原型图解决方案附axure可视化组件库
- 计算机高级技师评审述职报告,技师述职报告
- 在线问答与学科管理系统
- matlab车牌识别字符切割,车牌识别字符分割问题
- 【Java刷题笔记】牛客网Java入门 1~4
- 编码质量评估-编码视频效果测试场景归纳
热门文章
- CLRS2e读书笔记—Chapter10
- OGRE学习笔记(一)通过例子了解场景管理器---------地形创建
- 配置开发支持高并发TCP连接的Linux应用程序全攻略
- 最小高度100%页脚保持在底部的布局方法
- shark学习(1)【原创】
- 苹果 MacBook如何取消开盖自动开机功能?
- dependencies.dependency.version' for org.hibernate:hibernate-validator:jar is missing.
- 《张居正》—— 读后总结
- 微信小程序版本自动更新弹窗提示
- Python打包应用程序