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 相关文章推荐
JQuery中each()的使用方法说明
Aug 19 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
AngularJs 弹出模态框(model)
Apr 07 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
Aug 28 Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 Javascript
微信小程序实现购物页面左右联动
Feb 15 Javascript
彻底揭秘keep-alive原理(小结)
May 05 Javascript
vue视频播放暂停代码
Nov 08 Javascript
vue el-tree 默认展开第一个节点的实现代码
May 15 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
Aug 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 缓存实现代码及详细注释
2010/05/16 PHP
php添加文章时生成静态HTML文章的实现代码
2013/02/17 PHP
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
php探针不显示内存解决方法
2019/09/17 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
基于node.js之调试器详解
2017/08/22 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
python实现数独算法实例
2015/06/09 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
Django框架视图介绍与使用详解
2019/07/18 Python
python多进程间通信代码实例
2019/09/30 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
Python selenium的基本使用方法分析
2019/12/21 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
python datetime时间格式的相互转换问题
2020/06/11 Python
pytorch 中forward 的用法与解释说明
2021/02/26 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
请解释接口的显式实现有什么意义
2012/05/26 面试题
音乐专业自荐信
2014/02/07 职场文书
多媒体编辑专业毕业生求职信
2014/06/13 职场文书
师范生见习报告
2014/10/31 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
给下属加薪申请报告
2015/05/15 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书