UDN-企业互联网技术人气社区

板块导航

浏览  : 979
回复  : 5

[原生js] 原生JavaScript插件开发实践

[复制链接]
饼干妹妹的头像 楼主
发表于 2017-1-10 15:57:06 | 显示全部楼层 |阅读模式
  本文主要介绍了原生JavaScript插件开发实践思路与代码,具有一定的参考价值,下面跟着小编一起来看下吧

  前言
  
  之前公司设计的网站比较混乱,很多地方不统一,其中一个就是弹出层,导致这个原因是因为,公司的UI换了好几个人,而他们每个人做出来的都不太一样。最近公司开始整顿这个问题,对于统一的这种东西当然是做成一个模块,或者插件,而我打算做成插件。之所以写这篇文章是因为,当写完这个插件以后,发现其中有不少的理念,而这些理念我想把它总结一下,虽然这个插件并不复杂。
  
  该怎样架构?
  
  对于架构这个概念,接触的比较少,我的理解,架构就是解决未来可能会发生的事。
  
  之前也封装过一些插件,但后端嫌我封装的太难用,于是分析其原因,发现之前写的插件,该暴露的接口没有,有些不需要传的参数反而要传。该暴露的接口没有,这是因为我没有按照未来的思想来写插件,而往往这样写出来的插件就成了一次性用品。
  
  所以这段时间,在写插件之前都会事先思考清楚,这个插件都需要哪些参数,而哪些又是必须传的,哪些是可选的,哪些功能以后可能会用到,哪些是可以会更改的,这些都是必须考虑的,不然写出来的插件肯定会有很多的问题。
  
  基本雏形
  1. ;(function(window,document){
  2. var MaskShare = function(){
  3. };
  4. MaskShare.prototype = {};
  5. window.MaskShare = MaskShare;
  6. }(window,document));
复制代码

  把要写的代码,封闭到一个自执行函数里面,防止变量冲突,然后将这个构造函数暴露给window对象,方便我们在外部去访问这个构造函数。
  
  效果需要做成如下的:
 
2017010914045934.png
 
  思考需要哪些参数
  
  这个功能就是点击某个元素,弹出一个遮罩层,点击遮罩层将遮罩层去掉。
  
  因此可以分析出,至少需要一个参数,也就是我们需要知道点击谁弹出弹出层,另外我们还需要配置一些默认参数。
  1. ;(function(window,document){
  2. var MaskShare = function(targetDom,options){
  3.   // 判断是用函数创建的还是用new创建的。这样我们就可以通过MaskShare("dom") 或 new MaskShare("dom")来使用这个插件了
  4.   if(!(this instanceof MaskShare))return new MaskShare(targetDom,options);
  5.   // 参数合并
  6.   this.options = this.extend({
  7.       // 这个参数以后可能会更改所以暴露出去
  8.    imgSrc:"../static/img/coupon-mask_1.png"
  9.   },options);
  10.   // 判断传进来的是DOM还是字符串
  11.   if((typeof targetDom)==="string"){
  12.    this.targetDom = document.querySelector(targetDom);
  13.   }else{
  14.    this.targetDom = targetDom;
  15.   }
  16.   var boxDom = document.createElement("div");
  17.   var imgDom = document.createElement("img");
  18.   // 设置默认样式 注意将z-index值设置大一些,防止其他元素层级比遮罩层高
  19.   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;";
  20.   imgDom.style.cssText = "margin-top:20px;width: 100%;";
  21.   // 追加或重设其样式
  22.   if(this.options.boxDomStyle){
  23.    this.setStyle(boxDom,this.options.boxDomStyle);
  24.   }
  25.   if(this.options.imgDomStyle){
  26.    this.setStyle(imgDom,this.options.imgDomStyle);
  27.   }
  28.   imgDom.src = this.options.imgSrc;
  29.   boxDom.appendChild(imgDom);
  30.   this.boxDom = boxDom;
  31.   // 初始化
  32.   this.init();
  33. };
  34. MaskShare.prototype = {
  35.   init:function(){
  36.    this.event();
  37.   },
  38.   extend:function(obj,obj2){
  39.    for(var k in obj2){
  40.     obj[k] = obj2[k];
  41.    }
  42.    return obj;
  43.   },
  44.   setStyle:function(dom,objStyle){
  45.    for(var k in objStyle){
  46.     dom.style[k] = objStyle[k];
  47.    }
  48.   },
  49.   event:function(){
  50.    var _this = this;
  51.    this.targetDom.addEventListener("click",function(){
  52.     document.body.appendChild(_this.boxDom);
  53.     _this.boxDom.style.display = "block";
  54.         // 打开遮罩层的回调
  55.     _this.options.open&&_this.options.open();
  56.    },false);
  57.    this.boxDom.addEventListener("click",function(){
  58.     this.style.display = "none";
  59.         // 关闭遮罩层的回调
  60.     _this.options.close&&_this.options.close();
  61.    },false);
  62.   }
  63. };
  64. // 暴露方法
  65. window.MaskShare = MaskShare;
  66. }(window,document));
复制代码

  使用示例:
  1. MaskShare(".immediately",{
  2. imgSrc:"../static/img/loading_icon.gif",
  3. boxDomStyle:{
  4.   opacity:".9"
  5. },
  6. imgDomStyle:{
  7.   opacity:".8"
  8. },
  9. open:function(){
  10.   console.log("show");
  11. },
  12. close:function(){
  13.   console.log("close");
  14. }
  15. });
复制代码

  本次总结
  
  此时再分析一遍,发现其还是有很多局限性,比如,如果不使用图片用到的是一段文字呢,又该怎么办?这些都是很大的问题,要写出一个实用的插件,不仅仅技术需要过关,思考还得全面性。所以这篇文章还只是刚刚开始,路还远着呢。
  
  以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
  
  原文链接:http://www.cnblogs.com/pssp/p/6264944.html

相关帖子

发表于 2017-1-10 15:57:35 | 显示全部楼层
总觉得哪里有点问题啊
使用道具 举报

回复

发表于 2017-1-10 15:57:36 | 显示全部楼层
js太强大了,好多工作前端都可以做了…
使用道具 举报

回复

发表于 2017-1-10 15:57:37 | 显示全部楼层
占坑编辑ing
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部