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 相关文章推荐
枚举JavaScript对象的函数
Dec 22 Javascript
javascritp实现input输入框相关限制用法
Jun 29 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
基于JS实现Android,iOS一个手势动画效果
Apr 27 Javascript
jQuery实现的跨容器无缝拖动效果代码
Jun 21 Javascript
Bootstrap模态框调用功能实现方法
Sep 19 Javascript
Angular2 (RC5) 路由与导航详解
Sep 21 Javascript
原生js编写焦点图效果
Dec 08 Javascript
vue权限管理系统的实现代码
Jan 17 Javascript
简单了解小程序+node梳理登陆流程
Jun 24 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
超人钢铁侠联手合作?美漫作家呼吁DC漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
5.PHP的其他功能
2006/10/09 PHP
php mysql数据库操作类
2008/06/04 PHP
如何使用PHP获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
php操作redis缓存方法分享
2015/06/03 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
PHP实现微信小程序人脸识别刷脸登录功能
2018/05/24 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
javascript新手语法小结
2008/06/15 Javascript
跨浏览器的事件对象介绍
2012/06/27 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
python实现隐马尔科夫模型HMM
2018/03/25 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
Python reversed函数及使用方法解析
2020/03/17 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
h5封装下拉刷新
2020/08/25 HTML / CSS
汽车销售求职自荐信
2013/10/01 职场文书
大学生自我鉴定范文模板
2014/01/21 职场文书
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
书香校园建设方案
2014/05/02 职场文书
关于读书的演讲稿
2014/05/07 职场文书
庆七一宣传标语
2014/10/08 职场文书
golang goroutine顺序输出方式
2021/04/29 Golang
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang
nginx搭建NFS网络文件系统
2022/04/14 Servers