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跨Iframe选择实现代码
Aug 19 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
Jun 06 Javascript
BootStrap tab选项卡使用小结
Aug 09 Javascript
JavaScrpt判断一个数是否是质数的实例代码
Jun 11 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
Apr 09 Javascript
layui 表格的属性的显示转换方法
Aug 14 Javascript
vue实现微信分享功能
Nov 28 Javascript
Vue中遍历数组的新方法实例详解
Jul 21 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
Sep 17 Javascript
微信小程序选择图片控件
Jan 19 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/06/15 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
js DataSet数据源处理代码
2010/03/29 Javascript
js/html光标定位的实现代码
2013/09/23 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
js实现手机发送验证码功能
2017/03/13 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
JS实现横向轮播图(初级版)
2020/06/24 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
Python中type的构造函数参数含义说明
2015/06/21 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
基于css3的属性transition制作菜单导航效果
2015/09/01 HTML / CSS
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
adidas泰国官网:adidas TH
2020/07/11 全球购物
店面销售职位的职责
2014/03/09 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
2014年保密工作总结
2014/11/22 职场文书
关于长城的导游词
2015/01/30 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
单位计划生育责任书
2015/05/09 职场文书
花木兰观后感
2015/06/10 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
导游词之太湖
2019/10/08 职场文书