js封装成插件的步骤方法


Posted in Javascript onSeptember 11, 2017

由于项目原因,工作一年多还没用js写过插件,项目太成熟,平时基本都是在使用已经封装好的功能插件。感觉自己好low......这两天想自己抽空写一个canvas画统计图与折现图的插件,所以就去网上学习了下如何封装.....虽然之前看了很多源码,但是感觉就算了解也是野路子.....

什么是封装呢?

我的理解就是 把一个功能单独做成一个组件,就像做饺子,以前做饺子必须自己先用面粉做饺子皮,再做饺子馅,然后再手工包饺子,但是现在人们发明了自动包饺子机器,虽然机器里面的每一步骤和你自己包饺子是一样的,但是实际上你现在需要做的就只有一件事,就是放原料。这边机器就是封装好的插件,而原料就是你要传的参数

为什么要把js功能封装成插件呢?我觉得有以下几点吧

1、便于代码复用

2、避免各个相同功能组件的干扰,可能会有作用域的一些问题吧

3、便于维护,同时利于项目积累

4、不觉得一直复制粘贴很low么.......

我在网上看到的封装好像有两种,一种是js的原生封装,一种是jquery的封装。这边我先讲一下原生封装吧。

我们在封装的时候会把js代码放到一个自执行函数里面,这样可以防止变量冲突。

(function(){

  ......

  ......

}()}

然后再创建一个构造函数

(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({})覆盖

(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>

就是这样了。一个超级简单的封装

js封装成插件的步骤方法 

我这边有个疑问,extend只是jquery有吗,js对象有什么代替方法吗?晚点在看看............. 

还有需要提的是封装js的时候我们要考虑周全,比如它的扩展性和兼容性,还有性能怎么样,还有没必要的就不需要封装了......要有选择性。

现在网上已经完成的插件数不胜数,而且功能又十分强大,但是恰恰是这点,有的时候一个很大的插件我们只用到很小的一部分,那么就需要我们自己修改成适合我们自己的了,而且有些项目的风格和现在的插件风格也不同,所以关键是要适合自己的项目。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
json数据的列循环示例
Sep 06 Javascript
jquery自动将form表单封装成json的具体实现
Mar 17 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
jquery弹出遮掩层效果【附实例代码】
Apr 28 Javascript
JavaScript 拖拽实例代码
Sep 21 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 Javascript
JS图片预加载插件详解
Jun 21 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
Jul 31 Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 Javascript
JavaScript实现页面中录音功能的方法
Jun 04 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 #Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 #Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 #Javascript
浅谈vue+webpack项目调试方法步骤
Sep 11 #Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 #Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 #Javascript
checkbox:click事件触发span元素内容改变的方法
Sep 11 #Javascript
You might like
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
JavaScript 解析读取XML文档 实例代码
2009/07/07 Javascript
改善你的jQuery的25个步骤 千倍级效率提升
2010/02/11 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
javascript中强制执行toString()具体实现
2013/04/27 Javascript
理解Javascript闭包
2013/11/01 Javascript
js实现数组转换成json
2015/06/26 Javascript
jQuery防止重复绑定事件的解决方法
2016/05/14 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
ES6中Array.includes()函数的用法
2017/09/20 Javascript
JS实现移动端整屏滑动的实例代码
2017/11/10 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
bootstrap实现tab选项卡切换
2020/08/09 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
pytorch 求网络模型参数实例
2019/12/30 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
AE美国鹰美国官方网站:American Eagle Outfitters
2016/08/22 全球购物
高一自我鉴定
2013/12/17 职场文书
社团2014年植树节活动总结
2014/03/11 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
优秀大学生自荐信
2015/03/26 职场文书
刑事上诉状范文
2015/05/22 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
芙蓉镇观后感
2015/06/10 职场文书
利用js实现简单开关灯代码
2021/11/23 Javascript