原生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 相关文章推荐
JQueryEasyUI datagrid框架的进阶使用
Apr 08 Javascript
15条JavaScript最佳实践小结
Aug 09 Javascript
js简单实现删除记录时的提示效果
Dec 05 Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 Javascript
Javascript的表单验证长度
Mar 16 Javascript
微信小程序 地图map详解及简单实例
Jan 10 Javascript
ztree简介_动力节点Java学院整理
Jul 19 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 Javascript
VuePress 静态网站生成方法步骤
Feb 14 Javascript
vue通过过滤器实现数据格式化
Jul 20 Javascript
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
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入门源程序
2006/10/09 PHP
PHP开发中常用的字符串操作函数
2011/02/08 PHP
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
php实现文章置顶功能的方法
2016/10/20 PHP
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
js no-repeat写法 背景不重复
2009/03/18 Javascript
使用JQUERY Tabs插件宿主IFRAMES
2010/01/01 Javascript
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
微信小程序picker组件下拉框选择input输入框的实例
2017/09/20 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
自我鉴定200字
2013/10/28 职场文书
中专毕业生自荐信范文
2013/11/28 职场文书
春节晚会主持词
2014/03/24 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书
科技活动周标语
2014/10/08 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
导游词格式
2015/02/13 职场文书
学校社团活动总结
2015/05/07 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python
利用JuiceFS使MySQL 备份验证性能提升 10 倍
2022/03/17 MySQL