进阶前端高级攻城狮:使用单体模式设计原生js插件

----------基于上次写的jquery插件进行改造
http://www.cnblogs.com/GerryOfZhong/p/5533773.html

背景：jQuery插件依赖jQuery库，虽然jQuery使用十分广泛，但是对于移动开发或者在其他带宽需求需要注意的时候，就得考虑，因为我不可能完成一项技术相对来说引用了一个更大的库，这样之不值得的。所以原生js是所有浏览器都支持的一种语言，原生js相对来说就very good了，但是原生js相对新手或者没有很强基础的人来说还是相对比较深奥晦涩一点的，毕竟要考虑一些额外的因素：

• 不能污染全局的变量，因为你不知道你的代码将会和其他库或者页面加载的广告代码进行冲突
• 一些高阶的设计模式，因为一些设计模式都是十分经典的思想的凝结，用语言实现也相对比较复杂
• 前端面向对象编程，因为js自由度比较高，没有和后台定义一样。比如模拟的接口，继承，封装等，来实现功能强大的架构或者需求
• ..........

设计模式：单体模式

好处：在使用单体模式的时候，你会享受到真正的私有成员带来的所有好处，而不必付出什么代价，因为单体泪只会被实例化一次单体模式之所以是javascript中最流行的、应用最广泛的模式之一

• • 描述性命名增强代码的自我说明性

  • 包裹单体中可以防止被其他人误改

  • 与第三方库和广告隔离起来

  • 后期进行优化，比如惰性加载

弊端：在使用单体模式的时候，必须要十分了解闭包等概念，而且以后结合其他设计模式共同使用的时候，复杂度和代码量相对来说要求更高，所以需要使用者自己进行衡量，值不值得使用，会不会增加项目开发难度等。如果值得就用，不值得就不建议使用

下面为闭包单体模式的骨架（用空专门讲设计模式和一些案例和使用）：

var nameSpance= window.nameSpance|| {};  //声明一个空间

nameSpance.gerry=(function{
    //这里可以存放私有属性和私有方法,不对外开放，防止其他开发者私自改动
    var privateAttr = false;

    function privateMethod {
        console.log("这是私有方法，不对外开放...");
    }

    //这里为抛出对象，供开发者使用的
    var publicObject = {
        publicAttr : true,
        publicMethod : function{
 console.log("这是抛出方法，供开发者使用...")
        }
    }

    return publicObject;
})    

原生代码设计：

1. 声明空间然后搭建骨架

   var gerry = window.gerry || {}; //声明 gerry.setBackgroundImage = (function{
   
   var publicMethods = {};

    return publicMethods; 

   })

2. 设置插件默认值（注明：该默认值不提供外部修改，不开放特权方法去set改变它的值）

   var gerry = window.gerry || {}; //声明 gerry.setBackgroundImage = (function{ //私有参数设置（不对外开放） var config={ imgArr: , //图片数组 imgSecond: 1000, //图片淡出的时间 isRandom:false //是否为随机图片 } //暴露给开发者使用的方法，可随意拓展 var publicMethods = {}; return publicMethods ; })

3. 封装一些tool，放在私有方法中，因为毕竟不是jQuery了，一些方法需要自己进行封装下

   var tool = { //ID选择器 id_selector:function (selector){ return document.getElementById(selector); }, //创建节点 createElement:function(node){ return document.createElement(node); }, //设置节点属性 attr:function(setArrObject){ for(var i = 0,len=setArrObject.attribute.length;i<len;i++){ setArrObject.node.setAttribute(setArrObject.attribute[i].key,setArrObject.attribute[i].value); } } }

4. 设置一些需要使用的样式，放到一个css对象中

    //设置的样式 var css = { divT : 'position:absolute;left:0;top:0;z-index:-1;overflow:hidden;width:100%;height:100%', ImgT:'position:absolute;left:0;top:0;z-index:-2;opacity:0;', }

5. 封装一些私有方法处理一些常用的方法，比如参数处理呀啥的

   //私有方法，不对外开放 var privateMethods = { //对开发者的配置进行处理 paraHandling:function(option){ var configTemp ; if(option.config != undefined){ //开发者设置了值 option.config.imgArr== undefined ? option.config.imgArr =config.imgArr:null; option.config.imgSecond== undefined ? option.config.imgSecond = config.imgSecond:null; option.config.isRandom== undefined ? option.config.isRandom = config.isRandom:null; configTemp = option.config; }else{ configTemp = config; }; return configTemp; }, //针对IE9处理淡出效果，因为IE9不支持transition divFadeIn:function(option){ if(option.selector == undefined){ throw new Error("please select a id (div).") }else{ var showTime = Number(option.config.imgSecond); var opacityValue = 0; //设置opacity的属性值 var divSelector = tool.id_selector(option.selector); //获得div的ID var temp = setInterval(function{ opacityValue+=0.01; divSelector.style.opacity = opacityValue; if(opacityValue>1){ clearInterval(temp); } },showTime/100); //针对ie9 用opacity配合setInterval定时函数来实现淡出的效果，注意控制刷新的频率，给视觉上一种流畅的感觉 } }, //创建内容主题 createContent:function(option){ //设置ID var divImg = tool.createElement("div"); var object_div = { node:divImg, attribute:[ { key:"id", value:"divShow" }, { key:"style", value:css.divT } ] }; tool.attr(object_div); //设置img属性 var img = tool.createElement("img"); var object_div = { node:img, attribute:[ { key:"id", value:"imgShow" }, { key:"style", value:css.ImgT+"transition:opacity "+option.config.imgSecond/1000+"s ease", } ] }; tool.attr(object_div); divImg.appendChild(img); document.body.appendChild(divImg); privateMethods.delayLoadImg(option.config.imgArr[0]); }, //延迟加载图片 delayLoadImg:function(img_src){ var img = new Image; img.src = img_src; img.onload = function{ var temp = { node:tool.id_selector("imgShow"), attribute:[ { key:"src", value:img_src } ] }; tool.attr(temp); tool.id_selector("imgShow").style.opacity = 1; } } }

6. 最后再抛出的供给开发者使用的init方法，里面检查一些参数和属性

   //暴露给开发者使用的方法，可随意拓展 var publicMethods = { init:function(option){ if(arguments.length == 0){ //检查参数 throw new Error("this method need a config object"); }else{ if(document.body.style.opacity == undefined){ //检测是否支持opacity属性 [即IE9及以上] throw new Error("please use the browser of high version "); }else { option.config = privateMethods.paraHandling(option); option.selector = "divShow"; //如果是IE9的话 if (document.body.style.transition == undefined) { privateMethods.createContent(option); privateMethods.divFadeIn(option); } else { privateMethods.createContent(option); }; } } } }

7. 测试代码

   <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html> <script src="setBackgroundImage_js.js"></script> <script> +(function{ var temp ={ config:{ imgArr:["http://z.k1982.com/show_img/201303/2013033012383895.jpg"], imgSecond:3000 } } gerry.setBackgroundImage.init(temp); }) </script>

总结与说明：

因为IE8下面的滤镜比较麻烦，所以也没有对IE8做处理，就IE9+ 因为支持透明属性。移动端没做过测试，不过应该可以使用，因为针对移动端的话就更加简单了，因为现在移动端的趋势都是相对来说支持一些普遍的html5和css3的熟悉的。其实上面代码中主要讲的思想和对ie9做的兼容性，因为不可以使用第三方库了，所以就自己写了。整个代码我也不贴了，直接放到github上了，希望大家点颗星赞一个，得到人的赏识还是很有动力的。

github地址：
https://github.com/GerryIsWarrior/setBackgroundImage_js