一个完整的移动端项目的构建步骤——框架搭构7

Posted 2020-08-02 起个好名字

     基本代码已经完成了，现在我们需要一点完善。

    首先，在右上角有一个【详细规则】的字符串，我们需要给它添加事件——点击之后弹出一个遮罩层，遮罩层里面出现一个div，上面写了各种东西。这个div的最底部是一个超链接，可以接着进行跳转。点击遮罩层，除了div以外的部分，可以让遮罩层自动消失。

    尽管这个只要利用jquery稍稍改进一下就可以了，但是这里我们需要用模块处理，好处就是，以后想要用遮罩的时候直接引用就好。于是，首先写一个模块：

 1 window.Layer = (function(){
 2 
 3     var cssLoad = false; //代表css有没有被添加
 4     var instance; //遮罩层
 5 
 6     function init(layerContent){
 7         if(!cssLoad) {
 8             //样式没有被添加
 9             var style_str = ".layer_mask {position: fixed; right: 0; top: 0; bottom: 0; left: 0; background: rgba(0,0,0,.6); z-index: 1; height: 100%; }.layer {position: fixed; right: 0; top: 0; bottom: 0; left: 0; z-index: 99999; height: 100%; display: none; }";
10             var style_instance = document.createElement(‘style‘);
11             style_instance.innerhtml = style_str;
12             document.getElementsByTagName(‘head‘)[0].appendChild(style_instance);
13             cssLoad = true;
14         }
15         replace_content = ‘<div id="layer_mask" class="layer_mask"></div>‘ + layerContent;
16         if(!instance) {
17             instance = document.createElement(‘div‘);
18             instance.setAttribute(‘class‘, ‘layer‘);
19             var content = replace_content;
20             document.body.appendChild(instance);
21         }
22         instance.innerHTML = replace_content;
23         bindEvent();
24         show();
25         return instance;
26     }
27     function bindEvent(){
28         var dom = document.getElementById(‘layer_mask‘);
29         dom.onclick = function(){
30             hide();
31         }
32     }
33     function show(){
34         instance.style.display = ‘block‘;
35     }
36     function hide(){
37         instance.style.display = ‘none‘;
38     }
39     return {
40         init: init
41     }
42 })()

上面就是一个遮罩层的模块了，一如既往，第一行暴露一个全局自执行函数，将模块暴露出去。

然后声明两个变量。

 

创建一个函数，第一个if语句中，作用是对遮罩层的css样式完成一次加载，这个加载是在cssLoad这个变量为false的时候才会进行的。当模块的html代码书写完毕之后，我们自然需要同时配上css，而且这个css最好跟着这个模块一起加载而不是在首页加载，这样可以减少一些不必要的资源的消耗。

这个if语句中，第一句创建一个style_str变量，写上遮罩层的所有css，当然，真正写的时候可以直接在首页上写好css，然后链接过去，调整。调整完毕后，将链接里的css代码全部复制过来，删除链接。

创建完了之后再创建style标签，然后将css全部输入，然后将这个节点元素全部加载到head标签里面去。最后将cssload的值更改，这样就不会重复加载了。

 

下面这个replace_content变量代表【替换内容】，毕竟，每个遮罩层里的内容都不一样，如果遮罩层模块里的内容都固定了，那么模块也就没有意义了，除非另创一个模块去继承。与其这么麻烦，不如直接让需要遮罩层的模块自己提供内容，这个遮罩层模块只负责显示，这样就完美了。

当然，这里能更改的只有文字内容，如果需要全部更改的话，就需要传进来至少2个变量，一个负责css代码，一个负责文字内容。有需要的可以自己去摸索一下，稍稍改改就好。

然后下面这个if语句就是添加遮罩层的代码了。判断遮罩层有没有加载，没有就创建一个遮罩层div，给它各种属性，这里是给它添加一个类属性，然后将这个div放到body下面完成加载。

之后就是将内容输入这个div中，调用bindEvent和show方法，启动事件调用和显示。

 

事件调用方法：简单的点击一个遮罩层就会启动隐藏函数。另，这里设置了冒泡解除，不然点击需要的内容也会触发这个事件。

这个模块就到此为止了。