吃货卡总结 (上)

近一个月，前端方面独自一人配合后台对接接口完成了整个项目。可以说这个项目是我首个独立全部完成，其中包括原型demo的完成、中间商家页面的修改UI、产品支付核销功能的添加、以下是这段时候遇见的问题和解决方案的总结（由于时间和内容问题本次总结分阶段进行）：

---

1. H5禁止页面选择复制问题

代码如下：

* {         -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

这样写对于 -webkit-user-select: none; 存在问题是：在iPhone手机上会出现 input输入框 无法实现点击输入功能。（安卓可以实现）

解决方案：

*:not(input, textarea) {
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }

知识点衍生：CSS3: user-select

user-select是css3新增的一个属性,用来指定文本的可选择性.目前主流的浏览器都支持该属性,但是要加上各自的前缀.

-webkit-user-select: none;  /* Chrome all / Safari all /opera15+*/  
-moz-user-select: none;     /* Firefox all */  
-ms-user-select: none;      /* IE 10+ */  
user-select: none;  

除了”none”还支持以下值:

auto——默认值，用户可以选中元素中的内容

text——用户可以选择元素中的文本

element——文本可选，但仅限元素的边界内(只有IE和FF支持)

all——在编辑器内，如果双击或上下文点击发生在子元素上，该值的最高级祖先元素将被选中。

2. CSS3 的渐进色变换用法

代码如下：

.fruit {
            width: 65px;
            height: 20px;
            background: -webkit-linear-gradient(right, #7FFFD4, #43CD80);
            /* Chrome、 Safari 5.1 - 6.0 */
            background: -o-linear-gradient(right, #7FFFD4, #43CD80);
            /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(right, #7FFFD4, #43CD80);
            /* Firefox 3.6 - 15 */
            background: linear-gradient(to right, #2ee8b9, #43CD80);
            /* 标准的语法（必须放在最后） */
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            position: relative;
            left: 3%;
            top: 15px;
        }

知识点衍生：CSS3 Gradient

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。上面主要是线变，如果是径变类似一个圆往外变色。

语法：

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

参数：

其共有三个参数，第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，那么right就是从右到左了。
如果定义成left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。（第一个参数 可以加入角度参数。）

运用好渐变色就可以做出很多炫酷 高亮的背景颜色了。

3. CSS3 对应的字体抗锯齿方法

font-smoothing是非标准的css渲染规则，由于不同操作系统对字体渲染不同，不同浏览器也有自己对样式的一套解释规则，所以这个css样式至今也没有加入web标准。
这个样式的主要功能是对字体的锯齿进行调整。
-webkit-font-smoothing 是webkit在自己的渲染引擎中增加的对字体抗锯齿的调整。这个调整在ios中表现比较明显，在windows中表现的不是很明显。

知识点衍生：CSS3 Gradient

body {       -webkit-font-smoothing: antialiased;
                /*chrome、safari*/
        -moz-osx-font-smoothing: grayscale;
                /*firefox*/
                font-family: "微软雅黑";
            }

CSS3里面加入了一个“-webkit-font-smoothing”属性。

这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。

加上之后就顿时感觉页面小清晰了。 淘宝也在用哦！

它有三个属性：

none ------ 对低像素的文本比较好

subpixel-antialiased ------默认值

antialiased ------抗锯齿很好

4. 关于标签选项卡对应展示数据写法

jQuery写法较为简单如下代码：

$(function() {
                $li.click(function() {
                    //加上颜色样式
                    $(this).addClass("selected")
                        .siblings() //排除自身的同辈元素
                        .removeClass("selected"); 
                    var index = $li.index(this); // 添加索引 好对应显示DIV内容
                    $(".kk")
                        .eq(index).show()
                        .siblings().hide(); //对应 控制的div 对应索引进行显示出来。
                });
            });

主要针对==原生JavaScript==写法进行一个原型封装：

面向过程 代码如下：

<div id="div1">
        <input type="button" name="" class="active" value="教育" />
        <input type="button" name="" value="财经" />
        <input type="button" name="" value="体育" />
        <div style="display: block;">这是教育内容板块</div>
        <div>这是财经</div>
        <div>这是体育的</div>
    </div>
    <script type="text/javascript">
        window.onload = function() {
            var oDiv = document.getElementById('div1');
            var aBin = oDiv.getElementsByTagName('input');
            var aDiv = oDiv.getElementsByTagName('div');
            var i = 0;

            for(i = 0; i<aBin.length;i++) {

                aBin[i].index = i;
                aBin[i].onclick = function() {
                    for(i=0;i<aBin.length;i++) { 
                        
                        aBin[i].className = '';
                        aDiv[i].style.display = 'none';

                    }
                    // 先全部去掉样式 再独自添加样式。
                    this.className = 'active';
                    aDiv[this.index].style.display = 'block';
                };
            }
        };
    </script>

面向对象封装代码如下：

<div id="div1">
        <input type="button" name="" class="active" value="教育" />
        <input type="button" name="" value="财经" />
        <input type="button" name="" value="色情" />
        <div style="display: block;">这是教育内容板块</div>
        <div>这是财经</div>
        <div>这是色情的</div>
    </div>
    <script type="text/javascript">
    /*
    *改写：
    *1.前提：所有东西都在onload里
    *2.改写：不能有函数嵌套， 可以全局变量
    *3.
    */
    function TabSwitch(id) {
        var oDiv = document.getElementById('div1');
        this.aBin = oDiv.getElementsByTagName('input');
        this.aDiv = oDiv.getElementsByTagName('div');
        var _this = this;
        var i = 0;
        for(i = 0; i<this.aBin.length;i++) {

            this.aBin[i].index = i;
            this.aBin[i].onclick = function() {
                _this.tab(this);    
            };
        }
    }

    TabSwitch.prototype.tab = function (oBtn) {
        for(i=0;i<this.aBin.length;i++) { 

            this.aBin[i].className = '';
            this.aDiv[i].style.display = 'none';

        }
        oBtn.className = 'active';
        this.aDiv[oBtn.index].style.display = 'block';
    };
    window.onload=function () {
        var oTab=new TabSwitch('div1');
    };

总结：

• 这段时间意识到原生JS 的重要性于是 自己在加强 原生JavaScript的基础----包括 原型、继承、封装代码等
• 也在学习Vue js 前端框架、Node js基础、npm运用。意识到自己之前所接触的开发模式和技术层面，还是很基础的东西。
• 觉得目前 前端基于Node 工程化开发 和 模块化开发 自动化（webpack）形式是未来的趋势（现在也已经普遍开来，时代在进步，技术也在不停的进阶）
• 最后 选择走前端这条路 就不应该把自己框死，我们要有对市面上新技术有敏锐的嗅觉，把握 web前端时代 的开发趋势。