吃貨卡總結 (上)

近一個月，前端方面獨自一人配合后臺對接接口完成了整個項目。可以說這個項目是我首個獨立全部完成，其中包括原型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前端時代 的開發趨勢。