JS与jquery书写插件规范
什么是封装呢?
我的理解就是 把一个功能单独做成一个组件,就像做饺子,以前做饺子必须自己先用面粉做饺子皮,再做饺子馅,然后再手工包饺子,但是现在人们发明了自动包饺子机器,虽然机器里面的每一步骤和你自己包饺子是一样的,但是实际上你现在需要做的就只有一件事,就是放原料。这边机器就是封装好的插件,而原料就是你要传的参数
为什么要把js功能封装成插件呢?我觉得有以下几点吧
1、便于代码复用
2、避免各个相同功能组件的干扰,可能会有作用域的一些问题
3、便于维护,同时利于项目积累
4、不觉得一直复制粘贴很low么.......
我在网上看到的封装好像有两种,一种是js的原生封装,一种是jquery的封装。这边我先讲一下原生封装吧。
我们在封装的时候会把js代码放到一个自执行函数里面,这样可以防止变量冲突。
1
2
3
4
|
(function(){ ...... ...... }()} |
然后再创建一个构造函数
1
2
3
4
5
|
(function(){ var demo = function(options){ ...... } }()) |
把这个函数暴露给外部,以便全局调用
(function(){
var demo = function(options){
......
}
window.demo = demo;
}())
其实现在你可以直接调用了,封装好了,虽然没实现什么功能
var ss = new demo({
x:1,
y:2
}); 或者 new demo({
x:2,
y:3
});
然后传参怎么搞呢,我们一个插件一般有一些必选参数或者可选参数,在我看来可选参数不过就是在插件里面给了默认值罢了。我们传的参数会覆盖插件中的默认参数,可以用$.extend({})覆盖
1
2
3
4
5
6
7
8
9
10
|
(function(){ var demo = function(options){ this .options = $.extend({ "x" : 1, "y" : 2, "z" : 3 },options) } window.demo = demo; }()) |
然后你可以在在初始化构造函数的时候执行一些操作
(function(){
var demo = function(options){
this.options = $.extend({
"x" : "1",
"y" : "2",
"z" : "3"
},options);
this.init();
};
demo.prototype.init = function(){
alert("x是"+this.options.x+" y是"+this.options.y+" z是"+this.options.z);
};
window.demo = demo;
}());
new demo({
"x" :"5",
"y" :"4"
});
</script>
就是这样了。一个超级简单的封装
我这边有个疑问,extend只是jquery有吗,js对象有什么代替方法吗?晚点在看看.............
还有需要提的是封装js的时候我们要考虑周全,比如它的扩展性和兼容性,还有性能怎么样,还有没必要的就不需要封装了......要有选择性。
现在网上已经完成的插件数不胜数,而且功能又十分强大,但是恰恰是这点,有的时候一个很大的插件我们只用到很小的一部分,那么就需要我们自己修改成适合我们自己的了,而且有些项目的风格和现在的插件风格也不同,所以关键是要适合自己的项目。
隔日不上
看了下jquery封装
感觉就是把window对象换成了jquery对象?
(function($){
$.fn.demo = function(options){
var options = $.extend({
....
})
};
})(jQuery);
调用的时候
$("#xx").demo();
JS与jquery书写插件规范的更多相关文章
- js及jquery常用插件
1.backstretch背景图片插件 可实现背景自适应效果 <script src="dist/js/lib/backstretch/jquery.backstretch.min.j ...
- 【JS】jquery通知插件toastr
toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置,在官方站可以通过勾选参数来生成 ...
- jQuery自定义插件规范
<ul class="list"> <li>导航列表 <ul class="nav"> <li>导航列表1< ...
- FullPage.js-基于 jQuery 的插件全屏滚动插件
fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站.如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容, ...
- Chocolat.js – 响应式的 jQuery Lightbox 插件
Chocolat.js 使您能够显示一个或多个图像在同一页面上.给用户展示一组图片缩略图,可以显示全页或块.Chocolat.js 可以很好地处理所有主要的浏览器.它在下面这些浏览器测试通过:IE7+ ...
- 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js
在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...
- jquery.fullPage.js全屏滚动插件教程演示
css部分(此处需要导入jquery.fullPage.css) <style> .section { text-align: center; font: 50px "Micro ...
- Glide.js:响应式 & 触摸友好的 jQuery 滑块插件
Glide.js 是一款响应式和对触摸友好的 jQuery 滑块.基于 CSS3 转换实现,并在低版本浏览器降级处理.Glide.js 简单,重量轻,快速,适用于智能手机,平板电脑和台式机.它支持 s ...
- 表单验证代码实例:jquery.validate.js表单验证插件
jquery.validate.js是JQuery旗下的一个验证插件,借助JQuery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法.使用前请先下载必要的JQuery插件:jq ...
随机推荐
- Tesseract-ocr视觉学习-验证码识别及python import pytesseract使用
Tesseract-OCR的简单使用与训练 最近看到某个网站提交数据要提交验证码,用tesseract自带的识别, 识别出来是什么鬼,0-9识别成了什么玩意! so决定自己训练下tesseract.. ...
- Python9-条件-定时器-队列-day40
复习 线程 线程是进程中的执行单位 线程是cpu执行的最小单位 线程之间资源共享 线程的开启和关闭以及切换的时间开销远远小于进程 线程本身可以在同一时间使用多个cpu,python与线程 由于cpyt ...
- Jane Austen【简·奥斯汀】
Jane Austen Jane Austen, a famous English writer, was born at Steventon, Hampshire, on December 16, ...
- Spark性能优化:开发调优篇
1.前言 在大数据计算领域,Spark已经成为了越来越流行.越来越受欢迎的计算平台之一.Spark的功能涵盖了大数据领域的离线批处理.SQL类处理.流式/实时计算.机器学习.图计算等各种不同类型的计算 ...
- 推荐Android几个优质的完整项目学习
==>来自于微信公众号==鸿洋.大家可以关注一波大神之作. 后台经常有人问我能不能推荐几个完整项目用于学习.借着周末的机会,给大家推荐几个,项目我基本都在本地运行过,并且会在文章末尾提供每个项目 ...
- Android 获取地理位置信息 封装好了 直接用
前言:花了一个早上研究了以下android获取经纬度,然后网上的参考资料都是杂七杂八,基本上都是过去几年的,现在我用 android6.0参照别人的结果发生好多错误,我的内心几乎是崩溃的.后来,不断百 ...
- Spring Boot 要点--启动类和热部署
spring boot需要一个启动类 比如 package com.tianmaying; import org.springframework.boot.SpringApplication; imp ...
- SXCPC2018 nucoj2004 国王的怪癖
可持久化trie.考场上我脑补了一个trie树合并也A了 #include <iostream> #include <cstring> #include <cstdio& ...
- Java -X命令
C:\Users\Administrator>java -X -Xmixed 混合模式执行 (默认) -Xint 仅解释模式执行 -Xbootclasspath:<用 ; 分隔的目录和 z ...
- Postgresql 查看建表语句 命令
pg_dump -U username databasename -W -s -t tablename -s, --schema-only 只转储模式, 不包括数据 -t, --table=TABLE ...