92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线

打電話分下面4步：
1.拿出手機
2.撥號
3.說話
4.聽對方說話

ajax也分下面4步：
1.創建ajax對象
2.連接到服務器
3.發送請求（告訴服務器我要什么文件）
4.接收返回值

下面是原生js寫ajax的具體寫法 ：

    


        


            


                


                

            

            


                

                    <script>
                

            

        

        


            


                


                

            

            


                

                    window.onload=function()
                

            

        

        


            


                


                

            

            


                

                    {
                

            

        

        


            


                


                

            

            


                

                    var oBtn = document.getElementById("btn1");
                

            

        

        


            


                


                

            

            


                

                    oBtn.onclick = function()
                

            

        

        


            


                


                

            

            


                

                    {
                

            

        

        


            


                


                

            

            


                

                    //1.創建ajax對象
                

            

        

        


            


                


                

            

            


                

                    //只兼容非ie6的瀏覽器，在ie6瀏覽器上運行會提示沒有被定義
                

            

        

        


            


                


                

            

            


                

                    //var oAjax = new XMLHttpRequest();//這才是ajax實際的請求
                

            

        

        


            


                


                

            

            


                

                    //alert(oAjax);
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    //ie6瀏覽器下按照下面方法寫,但是在別的瀏覽器中不能用，會報錯。
                

            

        

        


            


                


                

            

            


                

                    //var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
                

            

        

        


            


                


                

            

            


                

                    //alert(oAjax);
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    //鑒于上面出現的問題，可以采取下面的方法解決，用if判斷是否為IE6瀏覽器
                

            

        

        


            


                


                

            

            


                

                    if(window.XMLHttpRequest)//如果有XMLHttpRequest，那就是非IE6瀏覽器。()里面加window的原因下面會有描述。
                

            

        

        


            


                


                

            

            


                

                    {
                

            

        

        


            


                


                

            

            


                

                    var oAjax = new XMLHttpRequest();//創建ajax對象
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    else//如果沒有XMLHttpRequest，那就是IE6瀏覽器
                

            

        

        


            


                


                

            

            


                

                    {
                

            

        

        


            


                


                

            

            


                

                    var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6瀏覽器創建ajax對象
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    //2.連接服務器
                

            

        

        


            


                


                

            

            


                

                    //open(方法、文件名、異步傳輸）
                

            

        

        


            


                


                

            

            


                

                    //方法：
                

            

        

        


            


                


                

            

            


                

                    //傳輸方式是get方式還是post方式。
                

            

        

        


            


                


                

            

            


                

                    //文件名
                

            

        

        


            


                


                

            

            


                

                    //告訴服務器要讀哪個文件
                

            

        

        


            


                


                

            

            


                

                    //異步傳輸
                

            

        

        


            


                


                

            

            


                

                    //異步：多件事一件一件的做
                

            

        

        


            


                


                

            

            


                

                    //同步：多件事情一起進行
                

            

        

        


            


                


                

            

            


                

                    //但是js里面的同步和異步和現實的同步異步相反。
                

            

        

        


            


                


                

            

            


                

                    //同步：多件事一件一件的做
                

            

        

        


            


                


                

            

            


                

                    //異步：多件事情一起進行
                

            

        

        


            


                


                

            

            


                

                    //ajax天生是用來做異步的
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    oAjax.open("GET","a.txt?t='+new Date().getTime()",true);//加上t='+new Date().getTime()"的目的是為了消除緩存，每次的t的值不一樣。
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    //3.發送請求
                

            

        

        


            


                


                

            

            


                

                    oAjax.send();
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    //4.接收返回
                

            

        

        


            


                


                

            

            


                

                    //客戶端和服務器端有交互的時候會調用onreadystatechange
                

            

        

        


            


                


                

            

            


                

                    oAjax.onreadystatechange=function()
                

            

        

        


            


                


                

            

            


                

                    {
                

            

        

        


            


                


                

            

            


                

                    //oAjax.readyState  //瀏覽器和服務器，進行到哪一步了。
                

            

        

        


            


                


                

            

            


                

                    //0->（未初始化）：還沒有調用 open() 方法。
                

            

        

        


            


                


                

            

            


                

                    //1->（載入）：已調用 send() 方法，正在發送請求。
                

            

        

        


            


                


                

            

            


                

                    //2->載入完成）：send() 方法完成，已收到全部響應內容。
                

            

        

        


            


                


                

            

            


                

                    //3->（解析）：正在解析響應內容。
                

            

        

        


            


                


                

            

            


                

                    //4->（完成）：響應內容解析完成，可以在客戶端調用。
                

            

        

        


            


                


                

            

            


                

                    if(oAjax.readyState==4)
                

            

        

        


            


                


                

            

            


                

                    {
                

            

        

        


            


                


                

            

            


                

                    if(oAjax.status==200)//判斷是否成功,如果是200，就代表成功
                

            

        

        


            


                


                

            

            


                

                    {
                

            

        

        


            


                


                

            

            


                

                    alert("成功"+oAjax.responseText);//讀取a.txt文件成功就彈出成功。后面加上oAjax.responseText會輸出a.txt文本的內容
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    else
                

            

        

        


            


                


                

            

            


                

                    {
                

            

        

        


            


                


                

            

            


                

                    alert("失敗");
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    };
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    };
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    /*//上面if里面需要些window的原因
                

            

        

        


            


                


                

            

            


                

                    //js里面的變量和屬性
                

            

        

        


            


                


                

            

            


                

                    
                

            

        

        


            


                


                

            

            


                

                    var a = 12;
                

            

        

        


            


                


                

            

            


                

                    alert(a);//頁面上彈出12很正常，而實際上輸出的是下面的寫法，是屬于window的，只是window能省就省了。
                

            

        

        


            


                


                

            

            


                

                    alert(window.a);//輸出結果是一樣的
                

            

        

        


            


                


                

            

            


                

                    window.alert(window.a);
                

            

        

        


            


                


                

            

            


                

                    
                

            

        

        


            


                


                

            

            


                

                    //想a這種全局變量實際上是winow的一個屬性。
                

            

        

        


            


                


                

            

            


                

                    //如果不定義一個變量a直接像下面那樣輸出a
                

            

        

        


            


                


                

            

            


                

                    alert(a)//系統會報錯，而不是undefind，因為沒有定義變量a。
                

            

        

        


            


                


                

            

            


                

                    alert(window.a);//如果是這樣寫，系統就不會報錯了，會顯示undefind。
                

            

        

        


            


                


                

            

            


                

                    
                

            

        

        


            


                


                

            

            


                

                    //出現上面的原因是因為直接寫a從根上就找不到a，而前面加上window只是找不到window的屬性a了。*/
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    </script>
                

            

        

    

但是，不能每次用ajax的時候都寫那么多代碼，要把這段ajax代碼封裝起來，方便使用。

封裝ajax代碼如下：

    


        


            


                


                

            

            


                

                    //最后把代碼封裝起來,封裝起來以后，要給這個函數加上一個參數url.參數是為了替換要讀取的文件名
                

            

        

        


            


                


                

            

            


                

                    function ajax(url,fnSucc)
                

            

        

        


            


                


                

            

            


                

                    {
                

            

        

        


            


                


                

            

            


                

                    if(window.XMLHttpRequest)
                

            

        

        


            


                


                

            

            


                

                    {
                

            

        

        


            


                


                

            

            


                

                    var oAjax = new XMLHttpRequest();
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    else
                

            

        

        


            


                


                

            

            


                

                    {
                

            

        

        


            


                


                

            

            


                

                    var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6瀏覽器創建ajax對象
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    oAjax.open("GET",url,true);//把要讀取的參數的傳過來。
                

            

        

        


            


                


                

            

            


                

                    oAjax.send();
                

            

        

        


            


                


                

            

            


                

                    oAjax.onreadystatechange=function()
                

            

        

        


            


                


                

            

            


                

                    {
                

            

        

        


            


                


                

            

            


                

                    if(oAjax.readyState==4)
                

            

        

        


            


                


                

            

            


                

                    {
                

            

        

        


            


                


                

            

            


                

                    if(oAjax.status==200)
                

            

        

        


            


                


                

            

            


                

                    {
                

            

        

        


            


                


                

            

            


                

                    fnSucc(oAjax.responseText);//成功的時候調用這個方法
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    else
                

            

        

        


            


                


                

            

            


                

                    {
                

            

        

        


            


                


                

            

            


                

                    if(fnfiled)
                

            

        

        


            


                


                

            

            


                

                    {
                

            

        

        


            


                


                

            

            


                

                    fnField(oAjax.status);
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    };
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

    

將封裝的ajax調用：

    


        


            


                


                

            

            


                

                    <script src="new_ajax.js"></script>//引用封裝的ajax文件
                

            

        

        


            


                


                

            

            


                

                    <script>
                

            

        

        


            


                


                

            

            


                

                    window.onload=function()
                

            

        

        


            


                


                

            

            


                

                    {
                

            

        

        


            


                


                

            

            


                

                    var oBtn = document.getElementById("btn1");
                

            

        

        


            


                


                

            

            


                

                    oBtn.onclick = function()
                

            

        

        


            


                


                

            

            


                

                    {
                

            

        

        


            


                


                

            

            


                

                    ajax('a.txt',function(str){//讀取a.txt文件里面的內容
                

            

        

        


            


                


                

            

            


                

                    alert(str);//將讀取的內容輸出
                

            

        

        


            


                


                

            

            


                

                    })
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    };
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    </script>
                

            

        

    

遮罩層為一張邊框樣式圖（如下圖）：

邊框樣式遮罩層顯示在最上方，然后是中間的列表，最下層是一個透明黑色遮罩層，滾動鼠標滾輪，能控制列表滾動

實現原理

注冊最上面遮罩層的滾動事件，拿到滾動滾動方向，然后控制列表滾動的方向和距離

上代碼

注冊事件 /**
 * 增加滾輪滾動事件（暫時只實現了chrome的滾動效果）
 * @param modalDomId 遮罩層domId
 * @param domId 需要滾動下層列表domId
 */ addMousewheelListener(modalDomId:string,domId:string){ //添加頁面監聽 let modalAwardPanel = document.getElementById(modalDomId);
  modalAwardPanel.addEventListener('mousewheel',function(e){
    let scrollContentDom = document.getElementById(domId); //向上滾 if (e.wheelDelta > 0){ if (scrollContentDom.scrollTop -20 >= 0){
        scrollContentDom.scrollTop = scrollContentDom.scrollTop - 20;
      } else{
        scrollContentDom.scrollTop = 0 ;
      }
    } //向下滾 else{ if(scrollContentDom.scrollTop + scrollContentDom.clientHeight < scrollContentDom.scrollHeight){
        scrollContentDom.scrollTop = scrollContentDom.scrollTop + 20;
      }
    }
  });
}

組件調用： this.addMousewheelListener("你的最上方遮罩層id","你想要滾動的列表id");

圖1.1 彈幕效果

開場之前我們先來描述彈幕開發的難度，再集中精力描述算法設計的思路。

* 如何保證不同字號的彈幕不碰撞
* 彈幕的位置計算
* 彈幕的速度控制及動畫實現
* 彈幕與視頻的同步

***如何保證不同字號的彈幕不碰撞***

如果彈幕采用相同的字號，碰撞的問題處理起來比較簡單，只要考慮相鄰彈幕的播放速度和偏移的位置就可以計算出來。然而使用不同字號的彈幕處理起來就麻煩了許多，彈幕的起始位置不可以線性的增加，比如第一行放了字幕，接下來的字幕可以按順序從上至下依次放置即可。

***彈幕的位置計算***

只有設計好彈幕的初始位置，才可以動態、的管理不同字號彈幕的碰撞問題。打個比方，我們通過接口獲取了2秒之內的彈幕數據1000條，每個字幕的長度、速度、字號都不同，怎么管理這些彈幕，示意圖如下：

圖2.1 彈幕管理示意圖

這是第一種情況，按照從上到啊的順序依次擺放以后會有幾個問題：
1. 彈幕五、六、七該怎么計算位置，按top值循環取模+累加嗎？
2. 當彈幕一或者彈幕三足夠長的時候，如何準時的跳過當前位置計算？
3. 當前屏幕的彈幕播放結束，如何再計算的時候利用空出來的位置
4. 空出的位置是否滿足當前彈幕的高度
5. ……

一系列問題就不統統列舉出來了，基于這個背景我們結合數學建模的思維方式，找到了彈幕場景相似度非常高的機場運營。我們可以把彈幕當做飛機，每個時間段播放多少彈幕和機場每個時間段放飛多少飛機一個道理。

首都國際機場一共有3條跑道，兩條4E級跑道、一條4F級跑道，2016年的吞吐量為9000萬人次。它的運行機制就是所有飛機通過搭臺有順序的共用3條跑道來完成運輸任務的。

同理，我們也設計了幾個個角色：一個是軌道(跑道)、一個是調度(塔臺)、一個是彈幕(飛機)，我們為每個角色設計一個類分為為Track、Main、Bullet。

* 軌道
            
       軌道這個角色很重要，它可以解決彈幕位置計算、速度控制、碰撞檢測問題。
       首先，我們要來初始化軌道。通俗的說我們要修建幾個跑道呢，我們不是實物，可以動態調整軌道的                        數量，計算的原則：
        軌道數量 = 播放器有效高度 / 設備基準字號
    * 播放器有效高度：播放器的實際高度減去控制條的高度，因為彈幕不可以遮擋控制條。
    * 設備基準字號：移動端是10px，pc端是12px；
        為啥計算公式是這樣的？因為我們要支持不同字號的彈幕。試想不同的字號對物理空間的占用是不同的，然而如果要求軌道的尺寸是動態的，那就帶來很復雜的計算。本文提出“虛擬軌道”的概念，在交通管制中最常見的就是道路合并或者改向。我們也是采用將相鄰的物理軌道臨時合并為一條軌道。這樣就可以輕松的解決不同字號的軌道占用問題。原理圖如下：
        

圖2.2 軌道計算示意圖

其次我們來回憶下機場的工作流程：
1. 機長呼叫塔臺，CZ6132請求起飛
    * 目前跑道均被占用，請等待
        * N時刻后再次執行步驟1
    * 目前跑道 A1 空閑，準許進入
        * 執行步驟3
2. 塔臺查看跑道使用情況
3. 進入跑道，起飛完成
4. 機長通知塔臺，本次起飛完成，釋放跑道的占用
5. 其他飛機同樣執行上述步驟

按照這個思路，我們的彈幕工作流程：
    
1. 彈幕進入播放器
2. 軌道根據彈幕的播放速度、尺寸計算是否有合適的軌道提供
    * 沒有
        * 通知彈幕尚無合適軌道提供，請等待；同時，彈幕隊列中的其他彈幕依次執行步驟1
    * 有
        * 執行步驟3
3. 播放器加載彈幕DOM，開始播放，待播放完成
4. 播放完成通知軌道更新軌道占用情況
5. 其他彈幕同樣執行上述步驟

圖2.3 軌道可用性計算示意圖

關于軌道的基本原理我們整理清楚了，當然還有不少細節比如如何和調度通信、如何和彈幕通信以及虛擬軌道檢測算法等。有興趣的同學可以參考代碼吧。https://github.com/bytedance/xgplayer/blob/master/packages/xgplayer/src/control/makeBullet.js

* 彈幕
       彈幕基本是實現“飛機”的角色，我們要求它具有自身的屬性和方法。比如調度中心通過id能拿到它所有的基本信息，軌道控制也可以通過彈幕進行檢查和更新。當然彈幕也必須具備狀態自動更新、移動、播放結束通知、自動銷毀等功能。
* 調度
        調度就是搭臺的化身，承接著軌道、彈幕的控制，也保持著與播放器的步調一致。它的職責如下：
    1. 播放器交互控制
    2. 彈幕隊列控制
    3. 自身狀態更新
    4. 數據格式轉換
    5. 動畫執行
        還是直接用流程圖來描述更直接些：
        
       

圖2.4 彈幕運行機制流程圖

在彈幕啟動之后，首先要檢查本地是否已有緩存數據，沒有的話直接請求數據并緩存，然后執行數據讀取，首次過濾數據進入彈幕隊列，同時啟動定時器。彈幕隊列的數據會定期請求軌道，檢測隊列里的彈幕是否可以進入，一旦確認后軌道做好登記，彈幕就可以進入播放器開啟動畫播放了。定時器每隔2秒就會再次更新數據進入到彈幕隊列（這塊不同的業務可以定制不同的規則）。彈幕播放結束后會通知調度和軌道，調度會在彈幕隊列中移除該彈幕實例，軌道也會移除該彈幕實例的軌道占用。

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

小程序學習資料

1.為什么要學小程序開發？

對于前端開發而言，微信小程序因為其簡單快速、開發成本低、用戶流量巨大等特點，也就成了前端開發工程師必會的一個技能。

2.開發準備：

（1）有人開玩笑說，會vue小程序根本都不用學：

微信小程序雖然是騰訊自己搞的，但是核心的思想跟vue等框架是一樣一樣的哦~

（2）善于搜集精美的小組件： “我們不生產代碼，我們只是代碼的搬運工”，善于找到想要的組件并把他們巧妙優雅的組裝成一個大項目，也算是程序員一項基本技能了。

具體怎么找到想要的小程序demo，篇末會給大家推薦小程序的資源，有很多大神的項目哦

擼起袖子開干了

一.注冊小程序賬號，下載IDE

1.官網注冊https://mp.weixin.qq.com/，并下載IDE。

2.官方文檔一向都是最好的學習資料。

注意：

（1）注冊賬號之后會有一個appid，新建項目的時候需要填上，不然很多功能是用不了的，比如不能預覽，不能上傳代碼等等。

（2）如果你注冊過微信公眾號的話，一定要注意，微信公眾號和小程序是兩個賬號，二者的appid也是不同，小程序開發必須使用小程序的appid哦。

二.小程序框架介紹和運行機制

1.我們建立了“普通快速啟動模板”，然后整個項目目錄如下：

2.app.js

整個項目的啟動文件，如注釋寫的onlaunch方法有三大功能，瀏覽器緩存進行存和取數據；用登陸成功的回調；獲取用戶信息。

globalData是定義整個項目的全局變量或者常量哦。

3.app.json

整個項目的配置文件，比如注冊頁面，配置tab頁，設置整個項目的樣式，頁面標題等等；

！注意：小程序啟動默認的第一個頁面，就是app.json的pages中的第一個頁面哦。

4.pages

小程序的頁面組件，有幾個頁面就會有幾個子文件夾。比如快速啟動模板，就有兩個頁面，index和logs

5.打開index目錄

可以看到有三個文件，其實和我們web開發的文件是一一對應的。

index.wxml對應index.html；

index.wxss對應index.css；

index.js就是js文件哦。

一般我們還會給每個頁面組件添加一個.json文件，作為該頁面組件的配置文件，設置頁面標題等功能

6.雙擊index.js文件

（1）var app = getApp();

引入整個項目的app.js文件，用來取期中的公共變量等信息。

如果要使用util.js工具庫中的某個方法，在util.js中module.exports導出，然后在需要的頁面中require即可得到哦。

（2）比如，我們要獲取豆瓣電影的時候，我們需要調用豆瓣的api；我們先在app.js中的gloabData中定義doubanBase

然后在index.js中使用app.globaData.doubanBase即可取到這個值。

當然這些常量你也可以在頁面需要的時候，再用寫死的值，但是為了整個項目的維護，還是建議把這種公用參數統一寫在配置文件中哦。

（3）接下來在整個page({})中，第一個data，就是本頁面組件的內部數據，會渲染到該頁面的wxml文件中，類似于vue、react哦~

通過setData修改data數據，驅動頁面渲染

（4）一些生命周期函數

比如onload()， onready(), onshow(), onhide()等等，監聽頁面加載、頁面初次渲染、頁面顯示、頁面隱藏等等

更多的可以查官網API哦。其中用的最多的就是onload()方法，和onShareAppMessage()方法（設置頁面分享的信息）

7 .wxml模板的使用。

比如本項目電影頁面，就是以最小的星級評價組件wxml當做模板，star到movie到movie-list，一級一級的嵌套使用。

star-template.wxml頁面寫好name屬性；然后import引入的時候通過name獲得即可

8.常用的wxml標簽

view，text，icon，swiper，block，scroll-view等等，這些標簽直接查官網文檔即可

三.小程序框架、各個頁面以及發布上線的注意點

1.整個框架中的一些注意點

（1）整個wxml頁面，最底層的標簽是哦。

（2） 每個頁面頂部導航欄的顏色，title在本頁面的json中配置，如果沒有配置的話，取app.json中的總配置哦。

（3）json中不能寫注釋哦，不然會報錯的。

（4）路由相關

1）使用wx.SwitchTab跳轉tab頁的話，在app.json中除了注冊pages頁面，還需要在tabBar中注冊tab頁，才能生效哦。

注意：tab最多5個，也就是我們說的頭部或者底部最多5個菜單。其他的頁面只能通過其他路由方法打開哦。

2）navigateTo是跳到某個非tab頁，比如歡迎頁，電影詳情頁，城市選擇頁；在app.json中注冊后，不能在tabBar里注冊哦，不然同樣也是不能跳轉的哦。

3）reLaunch跳轉，新開的頁面左上角是沒有退回按鈕的，本項目只用了一次，切換城市的時候哦。

（5）頁面之間傳遞參數

參數寫在跳轉的url之中，然后另一個頁面在onload方法中的傳參option接收到。如下傳遞和獲取id

（6）data-開頭的自定義屬性的使用

比如wxml中我們怎么寫

點擊的事件對象可以這么取，var postId = event.currentTarget.dataset.postid;

注意： 大寫會轉換成小寫，帶_符號會轉成駝峰形式

（7）事件對象event，event.target和event.currentTarget的區別：

target指的是當前點擊的組件 和currentTarget 指的是事件捕獲的組件。

比如，輪播圖組件，點擊事件應該要綁定到swiper上，這樣才能監控任意一張圖片是否被點擊，

這時target這里指的是image（因為點擊的是圖片），而currentTarget指的是swiper（因為綁定點擊事件在swiper上）

（8）使用免費的網絡接口：

本項目中用到了 和風天氣api，騰訊地圖api，百度地圖api，豆瓣電影api，聚合頭條新聞api等，具體用法可以看各自官網的接口文檔哦，很詳細的

注意：免費接口是有訪問限制的，所以如果用別人的組件用了這種接口的話，最好還是自己注冊一個新的key替換上哦

附上一個免費接口大全：

https://github.com/jokermonn/-Api

！！另外還要注意，要把這些接口的域名配置到小程序的合法域名中，不然也是訪問不了的

（8）wxss有一個坑：無法讀取本地資源，比如背景圖片用本地就會報錯哦。

把本地圖片弄成網絡圖片的幾種方式： 上傳到個人網站；QQ空間相冊等等也是可以的哦

2.切換城市頁面：

（1）首頁使用navigateTo跳轉到切換城市頁，由于首頁并沒有關閉，導致切換了城市返回來，天氣信息還是舊的。

正確的處理邏輯如下：

1）使用reLaunch跳轉到切換城市頁面，實質是關閉所有頁面打開新的頁面哦。

2）切換城市頁面，更新公共變量中城市信息為手動切換的城區，再switchTab回到首頁，觸發首頁重新加載。

3）首頁獲取城市信息的時候加一個判斷，全局沒有才取定位的，全局有（比如剛才設置了）就用全局的哦。

（2）城市列表的滾動和回到頂部

基于scroll-view組件的scroll-top屬性，初始就是0，滾動就會增加的；點擊回到頂部給它置為0即可回到頂部

3.天氣頁

（1）初始化頁面，天氣顯示的邏輯

首先調用小程序的wx.getLocation方法獲得當前的經緯度，然后調用騰訊地圖獲得當前的城市名稱和區縣名稱，并存到公共變量中，

再調用查詢天氣和空氣質量的方法哦。

（2）容錯處理

城市的名稱長短不一，有點名字特別長，比如巴彥淖爾市這種，需要動態的獲取完整的城市名稱；

有些偏僻的城市暫時沒有天氣信息，我們需要對返回的結果進行判斷，沒有信息的需要給用戶一個良好的提示信息。

4.周邊-地圖服務頁面

（1）調用百度地圖的各種服務，查詢酒店，美食，生活服務三種信息，更多信息可以看百度地圖的文檔

（2）點擊時給被點中的圖標加個邊框，數據驅動視圖，所以使用一個長度為3的數組保存三個圖標當前是否被點中的狀態

然后wxml再根據數據來動態添加class，增加邊框樣式

5.豆瓣電影頁

（1）電影詳情頁的預覽圖片，用小程序本身的previewImage實現。

（2）詳情頁使用onReachBottom()方法，監控用戶上拉觸底事件，然后發送請求繼續獲得數據，實現懶加載的效果

（3）用戶體驗方面的優化，js中將整數評分比如7分統一改為7.0分，然后wxml模板再判斷分數是否為0顯示“暫無評分”

（4）搜索之后清空搜索框

因為小程序中不能使用getelementbyId這種方式獲得元素，只能用數據來控制了

在data中加一個屬性searchText來保存搜索框的內容并和 input的value屬性綁定，搜索完成或者點擊X時，searchText變量清空即可實現清空輸入框的效果哦。

6.新聞頁面

（1）聚合頭條新聞的免費接口，只返回了新聞的基本信息，新聞的主體內容是沒有的哦。

我找了好多新聞類的接口，好像都是沒有新聞主體內容的。如果誰知道更好的接口歡迎留言告訴我哈~

（2）當然，也可以自己去爬新聞網站的數據哦

7.更多頁面

（1）小程序目前開放外鏈的功能只是給公司組織的小程序開放了，個人開發還是不能使用外鏈的哦。

（2）彩蛋頁面，獲得用戶信息

通過 wx.setStorageSync('userInfos', userInfos); 可以獲得登陸小程序的用戶的個人信息，可以發送給后臺存到數據庫中，方便對用戶進行分析

我這里只是存儲到瀏覽器緩存中哦，最大應該是10M緩存；如果用戶把這個小程序從小程序列表中刪除掉，就會清空這個緩存。

8.發布注意

（1） 新版本小程序發布的限制為2M，一般都是圖片最占空間，所以盡量使用網絡圖片

具體怎么把本地圖片變成網絡圖片，上面有講哦。

（2）在開發者工具上預覽測試沒問題，點擊上傳；網頁版小程序個的人中心的左側“開發管理”菜單，第三塊--開發版本就有了內容。

（3）點擊提交，填寫小程序相關信息，就可以提交審核了哦。

注意：分類最好填寫準確，這樣才能更快的通過審核哦。我這個小程序一天半時間過審上線的

至此，我就把兩天開發內碰到的坑和注意點都過了一遍，據說還有更多的坑，等之后更深入的開發再繼續研究咯。

const save = new Model(data).save()
    


        

            1
        

    

如果成功，則可以獲取到保存在數據庫的值，但是如果保存數據失敗，則會拋出異常，好在save可以傳入一個回調函數，用法如下：

const save = new Model(data).save((err, result)=>{ if(err){ // 保存失敗執行的操作
    }else { // 保存成功執行的操作
    }

})
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

    

我們希望根據結果獲取到不同的值，但是此時save返回的是undefined，因為save中的回調函數是一個異步操作

解決方法：

使用try catch：

try{
    const save = await new Model(data).save();
    // 保存成功執行的操作 return ... }catch(err){
    // 保存失敗執行的操作 return ... }
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

    

注意：在async函數中才可以這么使用，因為await只能用在async函數中

示例：(注冊功能)

user.model.js

const mongoose  = require("mongoose"); const port      = process.env.PORT || "8899"; const UserSchema = mongoose.Schema({
    userName: {
        type: String,
        unique: true },
    passWord: String,
    createTime: {
        type: Date, default: Date.now()
    },
    updateTime: {
        type: Date, default: Date.now()
    }
}, {
    timestamps: {
        createAt: "createTime",
        updateTime: "updateTime" }
});

module.exports = mongoose.model("USER", UserSchema);
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

        

            24
        

        

            25
        

    

service.js

const User = require("./user.model);
class User{
    async login(user){
            try{
                const result = await new User(user).save();
                // 其他操作，如發送注冊郵件
                return { success: true }
            }catch(err){
                return { success: false, message: "用戶名或密碼錯誤" }
            }
   }
}
moduel.exports = new User();
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

    

controller.js

const server = require("./server); async login(){ // 首先獲取請求中攜帶的用戶信息 const result = await server.login(user);
    if(result.success){ // 注冊成功執行的操作 }else { // 注冊失敗執行的操作 }
}

圖片標簽<img src=路徑屬性 alt：加載失敗后顯示的文本  width:指定圖片寬度  height:指定圖片高度>  單位: px

路徑屬性

絕對路徑
        E:\ruanjian\軟件\環境\images
相對路徑：相對于主文件位置的路徑
        引用文件方式：

        同級：直接寫文件名.后綴名
        上級：../文件名.后綴名   ../返回上一級文件夾
        下級：文件夾/文件名.后綴名

    


        


            


                


                

            

            


                

                    <!DOCTYPE html>
                

            

        

        


            


                


                

            

            


                

                    <html>
                

            

        

        


            


                


                

            

            


                

                    <head>
                

            

        

        


            


                


                

            

            


                

                    <meta charset="utf-8">
                

            

        

        


            


                


                

            

            


                

                    <title></title> 
                

            

        

        


            


                


                

            

            


                

                    </head>
                

            

        

        


            


                


                

            

            


                

                    <body>
                

            

        

        


            


                


                

            

            


                

                    <h1>這是一個圖片</h1>
                

            

        

        


            


                


                

            

            


                

                    <!-- 圖片標簽<img src=路徑屬性 alt：加載失敗后顯示的文本  width:指定圖片寬度  height:指定圖片高度  單位:px> 
                

            

        

        


            


                


                

            

            


                

                    路徑屬性：
                

            

        

        


            


                


                

            

            


                

                     絕對路徑
                

            

        

        


            


                


                

            

            


                

                     E:\ruanjian\軟件\環境\images
                

            

        

        


            


                


                

            

            


                

                     相對路徑：相對于主文件位置的路徑
                

            

        

        


            


                


                

            

            


                

                     同級：直接寫文件名.后綴名
                

            

        

        


            


                


                

            

            


                

                     上級：../文件名.后綴名   ../返回上一級文件夾
                

            

        

        


            


                


                

            

            


                

                     下級：文件夾/文件名.后綴名
                

            

        

        


            


                


                

            

            


                

                     -->
                

            

        

        


            


                


                

            

            


                

                    <img src="../img/ad.jpg" alt="加載中" width="1000px" height="500px">
                

            

        

        


            


                


                

            

            


                

                    <img src="../img/1.jpg" alt="加載中"><br><br><br><br><br><br><br><br><br><br><br>
                

            

        

        


            


                


                

            

            


                

                    <img src="../footer.jpg" ><br>
                

            

        

        


            


                


                

            

            


                

                    </body>
                

            

        

        


            


                


                

            

            


                

                    </html>
                

            

        

    

<br>標簽：換行   <img>標簽為內聯標簽所以不換行，所以添加<br>標簽換行。

頁面是這樣的：

@(Mob前端-冬晨)[JavaScript|技術分享|懶加載]

Lazyload 簡介

前端工作中，界面和效果正在變得越來越狂拽炫酷，與此同時性能也是不得不提的問題。有些項目，頁面長，圖片多，內容豐富。像商城頁面。如果同步加載時一次性加載完畢，那肯定是要等到花都謝了，loading轉的人都崩潰~。今天分享的是Lazyload技術 是一種延遲加載技術。讓頁面加載速度快到飛起、減輕服務器壓力、節約流量、提升用戶體驗。

一、實現思路

頁面較長，屏幕的可視區域有限。 
不設置頁面中img標簽的src屬性值或者將其指向同一個占位圖。 
圖片的實際地址存在img標簽自定義的一個屬性中，如：“data-url”。 
監聽scroll，滾動到某個位置時，動態的將url替換成實際的“data-url”。

二、上代碼

• html部分(簡單示意下結構)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Lazyload</title> <style type="text/css"> .mob-wrap li{list-style: none;width: 100%;height: 345px;} </style> </head> <body> <ul class="mob-wrap"> <li"> <img class="tamp-img" alt="loading" data-src="http://mob.com/public/images/index/sharesdk-logo.jpg"><p>ShareSDK輕松實現社會化功能</p> </li> <li"> <img class="tamp-img" alt="loading" data-src="http://mob.com/public/images/index/sms-logo.jpg"><p>短信驗證碼SDK</p> </li> <li"> <img class="tamp-img" alt="loading" data-src="http://mob.com/public/images/index/rec-logo.jpg"><p>MobLink實現Web與App的無縫鏈接</p> </li> </ul> </body> </html>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

    

簡要流程

• js部分

var aImg = [
  {"src":"http://mob.com/public/images/index/sharesdk-logo.jpg","txt":"ShareSDK輕松實現社會化功能"},
  {"src":"http://mob.com/public/images/index/sms-logo.jpg","txt":"短信驗證碼SDK"},
  {"src":"http://mob.com/public/images/index/rec-logo.jpg","txt":"MobLink實現Web與App的無縫鏈接"}
]; var sLi = '';
document.getElementsByClassName("mob-wrap")[0].innerHTML=""; for(let i = 0;i<10;i++){
  sLi = document.createElement("li");
  sLi.innerHTML = `<img class="tamp-img" alt="loading" src="./zwt.gif" data-src="${aImg[i%3].src}"><p>${aImg[i%3].txt}</p>`;
  document.getElementsByClassName("mob-wrap")[0].appendChild(sLi);
};

window.onscroll = function () {
  var bodyScrollHeight =  document.documentElement.scrollTop;// body滾動高度
  var windowHeight = window.innerHeight;// 視窗高度
  var imgs = document.getElementsByClassName('tamp-img');
  for (var i =0; i < imgs.length; i++) { var imgHeight = imgs[i].offsetTop;// 圖片距離頂部高度 if (imgHeight < windowHeight + bodyScrollHeight - 340) { imgs[i].src = imgs[i].getAttribute('data-src'); imgs[i].className = imgs[i].className.replace('tamp-img','');
    }
  }
};
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

        

            24
        

        

            25
        

    

. 
. 
. 
謝謝觀看，搞定收工0.0~~~這樣草草了事總是不好的

三、再優化

不做任何處理直接監聽scroll必然導致在滾動鼠標滾輪的時候，過于頻繁的觸發處理函數。 
如果剛巧在處理函數中有大量的操作dom等消耗性能的行為，引發大量操作，導致頁面變卡變慢， 
甚至瀏覽器崩潰無響應。 
處理這種問題的思路是節流和防抖。 
節流函數的概念有一個很形象的比喻：在接咖啡的時候，按了一次按鈕會出咖啡， 
緊跟著再按幾次按鈕接到的還是那一杯咖啡，相當于后面幾次按的沒有起作用。

常規的節流在這里就不多說了，下面介紹的是一種每隔least時間內至少執行一次的節流函數。

//節流函數 _throttle = (fn, delay, least) => { var timeout = null,
  startTime = new Date();
    fn(); return function() { var curTime = new Date();
    clearTimeout(timeout); if(curTime - startTime >= least) {
        fn();
        startTime = curTime;
    }else {
        timeout = setTimeout(fn, delay);
    }
    }
}
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

    

使用節流函數

function compare () { var bodyScrollHeight =  document.documentElement.scrollTop;// body滾動高度 console.log(bodyScrollHeight+"替換src方法") var windowHeight = window.innerHeight;// 視窗高度 var imgs = document.getElementsByClassName('tamp-img'); for (var i =0; i < imgs.length; i++) { var imgHeight = imgs[i].offsetTop;// 圖片距離頂部高度  if (imgHeight < windowHeight + bodyScrollHeight - 340) {
       imgs[i].src = imgs[i].getAttribute('data-src');
       imgs[i].className = imgs[i].className.replace('tamp-img','');
    }
  }
}
window.onscroll = _throttle(compare, 350,600);
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

    

滾動時間least長于600，調用compare，否則延遲350ms執行。 
這樣相對于直接onscroll性能得到更進一步提升，在功能上也沒有什么問題。 
不同的業務場景調整一下delay和least就可以。

結語：歷史潮流浩浩蕩蕩，前端技術的發展也是日新月異。 
不斷通過一個個小的技術點深入探究，以加深自己對js這門語言的理解。 
溫故知新，回顧舊的內容，學習新的內容和特性，更好的適應工作中的需求。

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

關于跨瀏覽器問題一直是一個大問題， 所以我決定在此做一個記錄， 當然不可能把跨瀏覽器問題一下子都搞定， 所以該文章將是一個長期的過程， 當coding時遇到了， 就會完善該文。

添加事件

var EventUtil = { /*
     *添加事件
    */ addHandler: function(element, type, handler) { if(element.addEventListener){ element.addEventListener(type, handler, false)
        }else if(element.attachEvent){ element.attachEvent('on'+type, handler)
        }else{ element['on'+type] = handler
        }
    }, /*
     *刪除事件
    */ removeHandler: function(element, type, handler){ if(element.removeEventListener){ element.removeEventListener(type, handler, false)
        }else if(element.detachEvent){ element.detachEvent('on'+type, handler)
        }else { element['on'+type] = null }
    }, /*
     *獲得事件對象
    */ getEvent: function(event){ return event ? event : window.event  //ie瀏覽器的事件對象是window對象的屬性， 所以需要window.event來獲取。 }, /*
     *獲得事件對象的事件目標（觸發事件的事件目標）
    */ getTarget: function(event){ return event.target || event.srcElement //這是||符號的另一種用法， 遇到true就返回。 }, /*
     *阻止默認事件
    */ preventDefault: function(event){ if(event.preventDefault){
            event.preventDefault
        }else{
            event.returnValue = false }
    }, /*
     *阻止事件冒泡
    */ stopPropagation: function(event){ if(event.stopPropagation){
            event.stopPropagation()
        }else {
            event.cancelBubble = true }
    }

}  // stopPropagation()方法既可以阻止事件冒泡，也可以阻止事件捕獲，也可以阻止處于目標階段。
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

        

            24
        

        

            25
        

        

            26
        

        

            27
        

        

            28
        

        

            29
        

        

            30
        

        

            31
        

        

            32
        

        

            33
        

        

            34
        

        

            35
        

        

            36
        

        

            37
        

        

            38
        

        

            39
        

        

            40
        

        

            41
        

        

            42
        

        

            43
        

        

            44
        

        

            45
        

        

            46
        

        

            47
        

        

            48
        

        

            49
        

        

            50
        

        

            51
        

        

            52
        

        

            53
        

        

            54
        

        

            55
        

        

            56
        

        

            57
        

        

            58
        

        

            59
        

        

            60
        

        

            61
        

    

ajax事件

關于xhr對象， ie7需要之前的需要使用ActiveXObject對象來實現， 而且存在三個不同的版本。 雖然現在已經不用兼容ie7以前的瀏覽器了， 還是可以了解一下： 
//適用于IE7之前的版本

function createXHR(){ if(typeof arguments.callee.activeXString != 'string'){ var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'],
        i,
        len; for(i = 0; len = version.length; i++){ try{ new ActiveXObject(veersions[i]); arguments.callee.activeXString = versions[i] break }catch(ex){ //跳過 }
        }
    } return new ActiveXObject(arguments.callee.activeXString)
}
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

    

//最終版本

function createXHR(){ if(typeof XMLHttpRequest != 'undefined'){ return new XMLHttpRequest()
    }else if(typeof ActiveXObject != 'undefined'){ if(typeof arguments.callee.activeXString != 'string'){ var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'],
        i,
        len; for(i = 0; len = version.length; i++){ try{ new ActiveXObject(veersions[i]); arguments.callee.activeXString = versions[i] break }catch(ex){ //跳過 }
        }
    } return new ActiveXObject(arguments.callee.activeXString)
    }else { throw new Error("NO XHR object availabel")
    }
}