原生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 相关文章推荐
jquery validator 插件增加日期比较方法
Feb 21 Javascript
juqery 学习之三 选择器 子元素与表单
Nov 25 Javascript
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
Jan 16 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
May 07 Javascript
JavaScript实现找出数组中最长的连续数字序列
Sep 03 Javascript
JQuery简单实现锚点链接的平滑滚动
May 03 Javascript
JavaScript实现in-place思想的快速排序方法
Aug 07 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
React Native 混合开发多入口加载方式详解
Sep 23 Javascript
es6 for循环中let和var区别详解
Jan 12 Javascript
js布局实现单选按钮控件
Jan 17 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中防止直接访问或查看或下载config.php文件的方法
2012/07/07 PHP
php实现水仙花数的4个示例分享
2014/04/08 PHP
php使用smtp发送支持附件的邮件示例
2014/04/13 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
var与Javascript变量隐式声明
2009/09/17 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
深入理解Python分布式爬虫原理
2017/11/23 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
使用Python第三方库pygame写个贪吃蛇小游戏
2020/03/06 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
一道写SQL的面试题和答案
2013/11/19 面试题
.net软件工程师面试题
2015/03/31 面试题
数学专业推荐信范文
2013/11/21 职场文书
初中生个人学习的自我评价
2013/12/04 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
2015年植树节活动总结
2015/02/06 职场文书
信用卡工资证明范本
2015/06/19 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js
python 中的@运算符使用
2021/05/26 Python
redis复制有可能碰到的问题汇总
2022/04/03 Redis
基于Python实现西西成语接龙小助手
2022/08/05 Golang