原生Javascript插件开发实践


Posted in Javascript onJanuary 18, 2017

前言

之前公司设计的网站比较混乱,很多地方不统一,其中一个就是弹出层,导致这个原因是因为,公司的UI换了好几个人,而他们每个人做出来的都不太一样。最近公司开始整顿这个问题,对于统一的这种东西当然是做成一个模块,或者插件,而我打算做成插件。之所以写这篇文章是因为,当写完这个插件以后,发现其中有不少的理念,而这些理念我想把它总结一下,虽然这个插件并不复杂。

该怎样架构?

对于架构这个概念,接触的比较少,我的理解,架构就是解决未来可能会发生的事。

之前也封装过一些插件,但后端嫌我封装的太难用,于是分析其原因,发现之前写的插件,该暴露的接口没有,有些不需要传的参数反而要传。该暴露的接口没有,这是因为我没有按照未来的思想来写插件,而往往这样写出来的插件就成了一次性用品。

所以这段时间,在写插件之前都会事先思考清楚,这个插件都需要哪些参数,而哪些又是必须传的,哪些是可选的,哪些功能以后可能会用到,哪些是可以会更改的,这些都是必须考虑的,不然写出来的插件肯定会有很多的问题。

基本雏形

;(function(window,document){
 var MaskShare = function(){
 };
 MaskShare.prototype = {};
 window.MaskShare = MaskShare;
}(window,document));

把要写的代码,封闭到一个自执行函数里面,防止变量冲突,然后将这个构造函数暴露给window对象,方便我们在外部去访问这个构造函数。

效果需要做成如下的:

原生Javascript插件开发实践

思考需要哪些参数

这个功能就是点击某个元素,弹出一个遮罩层,点击遮罩层将遮罩层去掉。

因此可以分析出,至少需要一个参数,也就是我们需要知道点击谁弹出弹出层,另外我们还需要配置一些默认参数。

;(function(window,document){
 var MaskShare = function(targetDom,options){
  // 判断是用函数创建的还是用new创建的。这样我们就可以通过MaskShare("dom") 或 new MaskShare("dom")来使用这个插件了
  if(!(this instanceof MaskShare))return new MaskShare(targetDom,options);
  // 参数合并
  this.options = this.extend({
      // 这个参数以后可能会更改所以暴露出去
   imgSrc:"../static/img/coupon-mask_1.png"
  },options);
  // 判断传进来的是DOM还是字符串
  if((typeof targetDom)==="string"){
   this.targetDom = document.querySelector(targetDom);
  }else{
   this.targetDom = targetDom;
  }
  var boxDom = document.createElement("div");
  var imgDom = document.createElement("img");
  // 设置默认样式 注意将z-index值设置大一些,防止其他元素层级比遮罩层高
  boxDom.style.cssText = "display: none;position: absolute;left: 0;top: 0;width: 100%;height:100%;background-color: rgba(0,0,0,0.8);z-index:9999;";
  imgDom.style.cssText = "margin-top:20px;width: 100%;";
  // 追加或重设其样式
  if(this.options.boxDomStyle){
   this.setStyle(boxDom,this.options.boxDomStyle);
  }
  if(this.options.imgDomStyle){
   this.setStyle(imgDom,this.options.imgDomStyle);
  }
  imgDom.src = this.options.imgSrc;
  boxDom.appendChild(imgDom);
  this.boxDom = boxDom;
  // 初始化
  this.init();
 };
 MaskShare.prototype = {
  init:function(){
   this.event();
  },
  extend:function(obj,obj2){
   for(var k in obj2){
    obj[k] = obj2[k];
   }
   return obj;
  },
  setStyle:function(dom,objStyle){
   for(var k in objStyle){
    dom.style[k] = objStyle[k];
   }
  },
  event:function(){
   var _this = this;
   this.targetDom.addEventListener("click",function(){
    document.body.appendChild(_this.boxDom);
    _this.boxDom.style.display = "block";
        // 打开遮罩层的回调
    _this.options.open&&_this.options.open();
   },false);
   this.boxDom.addEventListener("click",function(){
    this.style.display = "none";
        // 关闭遮罩层的回调
    _this.options.close&&_this.options.close();
   },false);
  }
 };
 // 暴露方法
 window.MaskShare = MaskShare;
}(window,document));

使用示例:

MaskShare(".immediately",{
 imgSrc:"../static/img/loading_icon.gif",
 boxDomStyle:{
  opacity:".9"
 },
 imgDomStyle:{
  opacity:".8"
 },
 open:function(){
  console.log("show");
 },
 close:function(){
  console.log("close");
 }
});

本次总结

此时再分析一遍,发现其还是有很多局限性,比如,如果不使用图片用到的是一段文字呢,又该怎么办?这些都是很大的问题,要写出一个实用的插件,不仅仅技术需要过关,思考还得全面性。所以这篇文章还只是刚刚开始,路还远着呢。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript 用原型继承来实现对象系统
Mar 22 Javascript
javascript中使用css需要注意的地方小结
Sep 01 Javascript
如何使用json在前后台进行数据传输实例介绍
Apr 11 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
javascript 判断整数方法分享
Dec 16 Javascript
Bootstrap3 Grid system原理及应用详解
Sep 30 Javascript
AngularJS ionic手势事件的使用总结
Aug 09 Javascript
vue实现nav导航栏的方法
Dec 13 Javascript
搭建vue开发环境
Jul 19 Javascript
微信小程序自定义音乐进度条的实例代码
Aug 28 Javascript
JavaScript DOM常用操作代码汇总
Jul 03 Javascript
如何使JavaScript休眠或等待
Apr 27 Javascript
js实现炫酷的左右轮播图
Jan 18 #Javascript
jQuery实现别踩白块儿网页版小游戏
Jan 18 #Javascript
工厂模式在JS中的实践
Jan 18 #Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 #Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 #Javascript
动态加载css方法实现和深入解析
Jan 18 #Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 #Javascript
You might like
php Ubb代码编辑器函数代码
2012/07/05 PHP
PHP中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
Linux下快速搭建php开发环境
2017/03/13 PHP
PHP简单获取随机数的常用方法小结
2017/06/07 PHP
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
巧用canvas
2017/01/21 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
JS实现的tab页切换效果完整示例
2018/12/18 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
jQuery实现增删改查
2020/12/22 jQuery
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
pandas 读取各种格式文件的方法
2018/06/22 Python
python对于requests的封装方法详解
2019/01/03 Python
Python构建图像分类识别器的方法
2019/01/12 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
进修护士自我鉴定
2013/10/14 职场文书
某同学的自我鉴定范文
2013/12/26 职场文书
竞聘书模板
2014/03/31 职场文书
美国留学经济担保书
2014/05/20 职场文书
运动会入场口号
2014/06/07 职场文书
大学专科自荐信
2014/06/17 职场文书
魂断蓝桥观后感
2015/06/10 职场文书