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 相关文章推荐
用js实现控制内容的向上向下滚动效果
Jun 26 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
Feb 17 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
Javascript数组与字典用法分析
Dec 13 Javascript
动态加载js的方法汇总
Feb 13 Javascript
js禁止页面刷新与后退的方法
Jun 08 Javascript
AngularJS的表单使用详解
Jun 17 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
JS组件Bootstrap Select2使用方法详解
Apr 17 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 Javascript
JavaScript截屏功能的实现代码
Jul 28 Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 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后台如何避免用户直接进入方法实例
2013/10/15 PHP
php获取apk包信息的方法
2014/08/15 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
PHP实现C#山寨ArrayList的方法
2015/07/16 PHP
QQ登录简单实现代码
2021/03/09 Javascript
Nigma vs Alliance BO5 第四场2.14
2021/03/10 DOTA
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
js实现简单进度条效果
2020/03/25 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
vue3.0实现插件封装
2020/12/14 Vue.js
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
Python中random模块用法实例分析
2015/05/19 Python
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
python 队列详解及实例代码
2016/10/18 Python
apache部署python程序出现503错误的解决方法
2017/07/24 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
美国知名生活购物网站:Goop
2017/11/03 全球购物
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
C#和SQL Server的面试题
2016/08/12 面试题
保护环境倡议书
2014/04/14 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书