​好程式設計師web前端培訓分享node學習筆記系列之四十一

好程式設計師發表於2020-04-17

好程式設計師 web前端培訓分享 node學習筆記 系列之 四十一

一、手動封裝body-parser中介軟體 cookie-parser中介軟體

1、封裝axios請求方式

body-parser

const   qs   =   require( "querystring" ); var   bodyparse   =   ( function   bodyparse()   {

     function   common(type)   {

         return   (req,   res,   next)   =>   {

             let   contentType   =   req.headers[ "content-type" ];

             if (contentType   ==   "application/json"   ||   contentType   ==   "application/x-www-form-urlencoded" ){

                 let   str   =   "" ;

                 req.on( "data" ,(data)=>{

                     str += data;

                 })

                 req.on( "end" ,()=>{

                     if (contentType   ==   "application/json" ){

                         req.body   =   JSON.parse(str);

                         next();

                     } else   if (   contentType   ==   "application/x-www-form-urlencoded" ){

                         req.body   =   qs.parse(str);

                         next();

                     }

                     next();

                 })

             } else {

                 next();

             }

         }

     }

     //解析appliaction/json      function   json()   {

         let   type   =   "json"

         return   common(type)

     }

     //解析appliaction/x-www-form-urlencoded      function   urlencoded()   {

         let   type   =   "urlencoded" ;

         return   common(type)

     }

     return   {   json,   urlencoded   }})() module.exports   =   bodyparse;

cookie-parser

const   cookieparse   =   function (){

     return   (req,res,next)=>{

         let   cookies   =   req.headers.cookie;

         let   obj   =   cookies.split( "; " ).reduce((prev,curr)=>{

             var   key   =   curr.split( "=" )[ 0 ];

             var   val   =   curr.split( "=" )[ 1 ];

             prev[key]   =   val;

             return   prev;

         },{})

         req.headers.cookie   =   obj;

         next();      

     }}module.exports   =   cookieparse;

 

二、express原理解析

1、app.use的作用以及實現

const   http   =   require( "http" ) const   url   =   require( "url" ); const   path   =   require( "path" ); const   fs   =   require( "fs" ); const   express   =   ()   =>   {

     //將所有註冊的事件新增到routesMap中去      var   routesMap   =   {

         get :   {

         },

         post :   {

         }

     }

     //app這個函式中做的執行      var   app   =   function   (req,   res)   {

         //獲取使用者請求的路徑          var   pathname   =   url.parse(req.url).pathname;

         //獲取使用者請求的方式          var   method   =   req.method.toLowerCase();

         if   (pathname   !==   "/favicon.ico" )   {

             //next函式用來執行下一個中介軟體              var   next   =   function   ()   {

                 var   handle;

                 //執行是沒有路徑的函式                  while   (handle   =   routesMap.all.shift())   {

                     handle(req,   res,   next)

                 }

             }

             next();

             //執行app.use帶路徑的函式                for   ( var   key   in   routesMap)   {

                 //判斷路徑是否與使用者請求的路徑相同                  if   (key   ===   pathname)   {

                     routesMap[key](req,   res,   next);

                     break ;

                 }

             }

             //判斷使用者是否是get請求              if   (method   ==   "get" )   {

                 //如果是get請求則找到get請求相對應得路徑 執行對應的函式                  for   ( var   key   in   routesMap.get)   {

                     if   (key   ==   pathname)   {

                         routesMap.get[key](req,   res,   next);

                         break ;

                     }

                 }

             }   else   if   (method   ==   "post" )   {

             }

         }

     }

     //註冊事件      app.use   =   function   ()   {

         //判斷use中的第一個引數是路徑還是一個函式          if   ( typeof   arguments[ 0 ]   ===   "string" )   {

             routesMap[arguments[ 0 ]]   =   arguments[ 1 ]

         }   else   if   ( typeof   arguments[ 0 ]   ===   "function" )   {

             //建議all這個key值寫成Symbol              if   ( ! routesMap.all)   {

                 routesMap.all   =   [];

             }

             routesMap.all.push(arguments[ 0 ]);

         }

     }

     //註冊事件      app.get   =   function   (path,   callback)   {

         routesMap.get[path]   =   callback;

     }

     //建立服務      app.listen   =   function   (port,   callback)   {

         http.createServer(app).listen(port,   callback)

     }

     return   app;} //靜態資源訪問 express. static   =   function   (staticPath)   {

     function   getFile(filePath)   {

         return   fs.readFileSync(filePath);

     }

     return   (req,   res)   =>   {

         var   {   pathname   }   =   url.parse(req.url,   true );

         //獲取檔案的字尾          var   ext   =   pathname.substring(pathname.lastIndexOf( "." ));

         if   (pathname   ===   "/" )   {

             res.writeHead( 200 ,   {   "content-type" :   "text/html;charset=utf8"   });

             res.end(getFile(path.join(staticPath,   "index.html" )))

         }   else   if   (ext   ===   ".css" )   {

             res.writeHead( 200 ,   {   "content-type" :   "text/css;charset=utf8"   });

             res.end(getFile(path.join(staticPath,   pathname)));

         }   else   if   (ext   ===   ".js" )   {

             res.writeHead( 200 ,   {   "content-type" :   "application/x-javascript;charset=utf8"   });

             res.end(getFile(path.join(staticPath,   pathname)));

         }   else   if   ( /.*\.(jpg|png|gif)/ .test(ext))   {

             res.writeHead( 200 ,   {   "content-type" :   `image/${ RegExp .$1 };charset=utf8`   });

             res.end(getFile(path.join(staticPath,   pathname)));

         }   else   if   (ext   ===   ".html" )   {

             res.writeHead( 200 ,   {   "content-type" :   "text/html;charset=utf8"   });

             res.end(getFile(path.join(staticPath,   pathname)));

         }

     }} module.exports   =   express;

三、express-generator生成器以及程式碼解析

1、app.js解析

2、www檔案解析

3、ejs的基本使用

<% … %> 開始符和結束符之間寫js程式碼
<%= … %>輸出變數資料 變數若包含 '<' '>' '&'等字元 會被轉義
<%- … %>輸出變數(html的解析前面需要加-) 不轉義
<%- include('user/show') %>引入其他模板   包含 ./user/show.ejs
<%# some comments %>來註釋,不執行不輸出
<%% 轉義為 '<%'<% ... -%> 刪除新的空白行模式?
<%_ … _%> 刪除空白符模式開始符和結束符內部不可以巢狀

四、前端渲染和後端渲染的區別

後端渲染HTML的情況下,瀏覽器會直接接收到經過伺服器計算之後的呈現給使用者的最終的HTML字串,這裡的計算就是伺服器經過解析存放在伺服器端的模板檔案來完成的,在這種情況下,瀏覽器只進行了HTML的解析,以及透過作業系統提供的操縱顯示器顯示內容的系統呼叫在顯示器上把HTML所代表的影像顯示給使用者。
前端渲染就是指瀏覽器會從後端得到一些資訊,這些資訊或許是適用於題主所說的angularjs的模板檔案,亦或是JSON等各種資料交換格式所包裝的資料,甚至是直接的合法的HTML字串。這些形式都不重要,重要的是,將這些資訊組織排列形成最終可讀的HTML字串是由瀏覽器來完成的,在形成了HTML字串之後,再進行顯示

五、用所學的express生成器+ejs做一個簡單的列表頁

socket的基本使用

1、什麼是socket?

網路上兩個程式透過一個雙向的通訊連線實現資料交換,這個連線的一端稱為socket

2、http請求與socket的區別

1、在以前我們實現資料交換已經有了HTTP協議,為什麼還要學習socket? 回顧:當輸出 的時候瀏覽器執行了那些操作?
2、http通訊的

特點:
1、連線屬於非永續性連線:TCP的三次握手
2、客戶端只能訪問服務端,服務端無法訪問客戶端,屬於單項通訊

TCP三次握手: TCP三次握手過程中不傳遞資料,只為同步連線雙方的序列號和確認號傳遞資料,在握手後服務端和客戶端才開始傳輸資料,在理想狀態下,TCP連線一旦建立,在通訊的雙方中任何一方主動斷開連線之前TCP連線會一直保持下去。

socket通訊
特點:
1、永續性連線
2、雙向通訊,客戶端能訪問服務端,服務端也能訪問客戶端

socket是對TCP/IP協議的封裝,socket只是一個介面而不是一個協議,透過Socket我們才能使用TCP/IP/UDP協議

 

3、透過node內建模組net實現簡單版聊天

1、socket連線需要由2個節點:
1)clientSocket
2)serverSocket
2、文字流:readline

const   net   =   require( "net" ); const   server   =   net.createServer(); const   clients   =   []; //當有人連線服務端的時候回觸發當前函式 server.on( "connection" ,(client)=>{

     //給每一個使用者新增一個唯一的標識      client.id   =   clients.length;

     clients.push(client);

 

     //將客戶端的訊息轉發給所有的使用者      client.on( "data" ,(data)=>{

         clients.forEach(item=>{

             //判斷使用者是否存在              if (item)   item.write( "服務端:" + data);

         })

     })

 

     //判斷使用者是否退出群聊      client.on( "close" ,()=>{

         clients[client.id]   =   null ;     

     }) }) server.listen( 9000 ); const   net   =   require( "net" ); const   client   =   new   net.Socket(); //建立I/o模型 建立出入和輸出流 const   readline   =   require( "readline" ); //建立 const   rl   =   readline.Interface({

     input :   process.stdin,

     output :   process.stdout}) //客戶端連線服務端 client.connect( 9000 ,   ()   =>   {

     client.on( "data" ,   (data)   =>   {

         console.log(data.toString());

     })}) //獲取終端的內容將內容轉發到服務端 rl.on( "line" ,   (val)   =>   {

     client.write(val);})

七、webSocket的基本使用

const   WebSocket   =   require( 'ws' ); //建立服務 const   server   =   new   WebSocket.Server({   port :   9000   }); //監控使用者連線 server.on( 'connection' ,   (client,req)=>{

    var   ip   =   req.connection.remoteAddress;

     //監聽客戶端傳遞到服務端的訊息      client.on( 'message' ,   (data)=>{

         //將訊息轉發給所有的使用者          server.clients.forEach((item)=>{

             //判斷使用者是否是連線的狀態              if   (item.readyState   ===   WebSocket.OPEN)   {

                 item.send(ip + ":" + data);

             }

         });

     });});

<! DOCTYPE   html >< html   lang = "en" >< head >

     < meta   charset = "UTF-8" >

     < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >

     < meta   http - equiv = "X-UA-Compatible"   content = "ie=edge" >

     < title > Document < /title> < /head> < body >

     < input   type = "text"   id = "txt" >

     < button   id = "btn" > 點選 < /button>

     < ul   id = "list" >< /ul> < /body> < /html> < script >

     var   client   =   new   WebSocket( "ws://10.60.15.150:9000" );

     var   txt   =   document .getElementById( "txt" );

     var   list   =   document .getElementById( "list" );

     var   btn   =   document .getElementById( "btn" );

     //接受服務端訊息  onmessage      client.onmessage   =   function (e){

        var   li   =   document .createElement( "li" );

        li.innerText   =   e.data;

        list.appendChild(li);

        li.scrollIntoView();

     }

     //向服務端傳送訊息 send      btn.onclick   =   function (){

         var   val   =   txt.value;

         client.send(val);

         txt.value   =   "" ;

     } < /script>

 

八、 的基本使用

var   express   =   require( 'express' ) var   app   =   express(); //檔案在伺服器執行 var   http   =   require( 'http' ) var   server   =   http.createServer(app); var   path   =   require( "path" ) //因為我們要做永續性通訊 因此不能夠用http連線 http連線與socket.io進相關聯 var   io   =   require( "socket.io" )(server);app.use(express. static (path.join(__dirname, "./public" ))) //當使用者連線的時候觸發的函式 io.on( 'connection' ,   (socket)=>{

     console.log( 'a user connected' );

     //接受客戶端訊息 將訊息轉發給所有使用者      socket.on( "sendMessage" ,(mes)=>{

         io.emit( "message" ,mes)

     })

     //當使用者斷開連線的時候      socket.on( 'disconnect' ,   function (){

         console.log( 'user disconnected' );

     });});server.listen( 3000 ,   function (){

   console.log( 'listening on *:3000' );});

 

九、利用websocket實現一個聊天室

1、多人聊天
2、圖片傳送
3、表情傳送

var   express   =   require( 'express' ) var   app   =   express(); //檔案在伺服器執行 var   http   =   require( 'http' ) var   server   =   http.createServer(app); var   path   =   require( "path" ) //因為我們要做永續性通訊 因此不能夠用http連線 http連線與socket.io進相關聯 var   io   =   require( "socket.io" )(server);app.use(express. static (path.join(__dirname, "./public" ))) var   users   =   []; //當使用者連線的時候觸發的函式 io.on( 'connection' ,   (socket)=>{

     //監聽使用者連線      socket.on( "system" ,(username,type)=>{

         if (users.includes(username)){

             socket.emit( "login" , 0 )

         } else {

             socket.userIndex   =   users.length;

             socket.username   =   username;

             users.push(username);

             io.emit( "login" , 1 ,username)

         }

     })

     socket.emit( "userList" ,users);

     socket.on( "ClientsendMessage" ,(usename,message)=>{

         socket.broadcast.emit( "serverSendMessage" ,usename,message)

     })

     socket.on( "sendImg" ,(username,base64Img)=>{

         socket.broadcast.emit( "serverSendImg" ,usename,base64Img)

     }) });server.listen( 3000 ,   function (){

   console.log( 'listening on *:3000' );}); <! doctype   html >< html > < head >

     < title > Socket.IO   chat < /title>

     < link   rel = "stylesheet"   href = "./css/iconfont/iconfont.css" >

     < style >

         *   {   margin :   0 ;   padding :   0 ;   box - sizing :   border - box;   }

         ul,li{   list - style :   none;   }

         html,   body   {   font :   13 px   Helvetica,   Arial;   height :   100 % ;   }

         form   {   background :   # 000 ;   padding :   3 px;   position :   fixed;   bottom :   0 ;   width :   100 % ;   }

         form   input   {   border :   0 ;   padding :   10 px;   width :   90 % ;   margin - right :   .5 % ;   }

         form   button   {    width :   9 % ;   background :   rgb( 130 ,   224 ,   255 );   border :   none;   padding :   10 px;   }

         # messages   {   list - style - type :   none;   margin :   0 ;   padding :   0 ;   }

         # messages   li   {   padding :   5 px   10 px;   }

         # messages   li : nth - child(odd)   {   background :   # eee;   }

         # action   {   width :   100 % ;   height :   30 px;   display :   flex;   align - items :   center;   }

         # action   input[type = 'color' ]   {   width :   40 px;   height :   30 px;   }

         # upload,   # fontColor   {   width :   40 px;   height :   30 px;   position :   relative;   }

         # action   input[type = 'file' ],

         # fontColor   input[type = "color" ]   {   width :   40 px;   height :   30 px;   position :   absolute;   left :   0 % ;   top :   0 ;   opacity :   0 ;   z - index :   5 ;}

         # action   i,   # fontColor   i   {   width :   100 % ;   height :   100 % ;   position :   absolute;   left :   0 ;   top :   0 ;   color :   # fff;   font - size :   20 px;}

         # mask   {    width :   100 % ;   height :   100 % ;   background :   rgba( 0 ,   0 ,   0 ,   .3 );   position :   absolute;   z - index :   10 ;}

         # content{   width :   100 % ;   height :   100 % ;   display :   flex;   justify - content : space - between;}

         # content   ul : nth - child( 2 ){   width : 200 px;   height :   100 % ;   border - left : 1 px   solid   # ccc;   }

         # userList   {   overflow :   scroll;   }

         # userList   li{   line - height :   30 px;   border - bottom :   1 px   solid   # bbb;   width : 100 % ;   }

         .userDate{   color :   green;   line - height :   20 px;   font - size : 18 px;   }

         .userInfo{   color :   # 000 ;   line - height :   20 px;   font - size : 14 px;   }

         # messages > div{   min - height :   60 px;   }

         # system{   color :   # c33;   font - size : 18 px;   }

     < /style> < /head> < body >

     < div   id = "mask" >< /div>

     < div   id = "content" >

         < ul   id = "messages" >< /ul>

         < ul   id = "userList" >

             < li > 使用者列表 < /li>

         < /ul>

     < /div>

     < form   id = "form" >

         < div   id = "action" >

             < div   id = "fontColor" >

                 < input   type = "color" >

                 < i   class= "iconfont" >& # xec85; < /i>

             < /div>

             < div   id = "upload" >

                 < input   type = "file"   id = "file" >

                 < i   class= "iconfont" >& # xe674; < /i>

             < /div>

             < ul >< /ul>

         < /div>

         < input   id = "m"   autocomplete = "off"   />

         < input   type = "submit"   value = "提交" >

     < /form> < /body> < /html> < script   src = "/socket.io/socket.io.js" >< /script> < script   src = " >< /script> < script   src = "./js/index.js" >< /script>

index.js

class   SocketAlley   {

     constructor()   {

         this .mask   =   $( "#mask" );

         this .userListEl   =   $( "#userList" );

         this .messages   =   $( "#messages" );

         this .socket   =   io();

         this .init();

     }

     init()   {

         if   ( ! sessionStorage.getItem( "status" ))   {

             this .username   =   window .prompt( "請輸入您的姓名" );

             if   ( this .username)   {

                 sessionStorage.setItem( "status" ,   this .username);

                 //當使用者連線進來的時候通知伺服器                  this .socket.emit( "system" ,   this .username,   "login" )

                 //檢測是否連線成功                  this .socket.on( "login" ,   (data,   username)   =>   {

                     if   (data   ==   1 )   {

                         alert( "連線成功" );

                         this .mask.hide();

                         //全域性通知                          var   div   =   $( "<div></div>" );

                         var   str   =   username   +   "進入聊天室"

                         div.text(str);

                         this .messages.append(div);

                     }   else   {

                         alert( "使用者名稱重複請求重新編寫" );

                     }

                 })

             }

         }   else   {

             this .mask.hide();

             this .username   =   sessionStorage.getItem( "status" );

             this .socket.on( "login" ,   (data,   username)   =>   {

                 //全域性通知                  var   div   =   $( "<div></div>" );

                 var   str   =   username   +   "進入聊天室"

                 div.text(str);

                 this .messages.append(div);

             })

         }

         this .userList();

         this .serverMessage();

         this .userSendInfo();

         this .sendImg();

     }

     userList()   {

         this .socket.on( "userList" ,   this .handleUserListSucc.bind( this ))

     }

     handleUserListSucc(data)   {

         data.forEach( this .handleUserListEach.bind( this ))

     }

     handleUserListEach(item)   {

         var   li   =   $( "<li></li>" );

         li.text(item);

         this .userListEl.append(li);

     }

     userSendInfo()   {

         $( "#form" ).on( "submit" ,   this .handleUserSendInfo.bind( this ))

     }

     handleUserSendInfo(e)   {

         e.preventDefault();

         var   val   =   $( "#m" ).val();

         this .infoStyle( this .username,   val);

         //向服務端傳送訊息          this .socket.emit( "ClientsendMessage" ,   this .username,   val);

     }

     serverMessage()   {

         this .socket.on( "serverSendMessage" ,   (username,   message)   =>   {

             this .infoStyle(username,   message);

         })

         this .socket.on( "serverSendImg" ,   (username,   message)   =>   {

             this .infoImg(username,   message);

         })

     }

     infoImg(username,   message)   {

         var   parentDiv   =   $( "<div></div>" );

         var   childDiv   =   $( "<div></div>" );

         var   contentDiv   =   $( "<div></div>" );

         var   d   =   new   Date ();

         if   ( /(\d{2}:\d{2}:\d{2})/ .test(d))   {

             childDiv.text(username   +   RegExp .$1);

             var   img   =   $( "<img/>" );

             img.attr( "src" ,message);

             contentDiv.append(img);

             parentDiv.append(childDiv);

             parentDiv.append(contentDiv)

             this .messages.append(parentDiv);

             parentDiv[ 0 ].scrollIntoView();

         }

     }

     infoStyle(username,   message)   {

         var   parentDiv   =   $( "<div></div>" );

         var   childDiv   =   $( "<div></div>" );

         var   contentDiv   =   $( "<div></div>" );

         var   d   =   new   Date ();

         if   ( /(\d{2}:\d{2}:\d{2})/ .test(d))   {

             childDiv.text(username   +   RegExp .$1);

             contentDiv.text(message);

             parentDiv.append(childDiv);

             parentDiv.append(contentDiv)

             this .messages.append(parentDiv);

             parentDiv[ 0 ].scrollIntoView();

         }

     }

     sendImg()   {

         $( "#file" ).on( "change" ,   this .sendImgCb.bind( this ))

     }

     sendImgCb()   {

         var   _this   =   this ;

         //只能從原生JS中拿到file物件          var   file   =   $( "#file" )[ 0 ].files[ 0 ];

         //將file物件轉換dataurl(base64的檔案形式)          var   fileReader   =   new   FileReader()

         fileReader.onload   =   function   (e)   {

             _this.socket.emit( "sendImg" ,   _this.username,   e.target.result);

             _this.infoImg(_this.username,   e.target.result)

         }

         //將file轉換成dataUrl的形式          fileReader.readAsDataURL(file);

     }} new   SocketAlley();

 

十、利用socket實現一個簡單版的多人點餐功能

const   express   =   require( "express" ); const   app   =   express(); const   http   =   require( "http" ); const   server   =   http.createServer(app); const   io   =   require( "socket.io" )(server); const   path   =   require( "path" );app.use(express. static (path.join(__dirname,   "./public" ))) io.on( "connection" ,   (socket)   =>   {

     socket.on( 'add' ,   (data)   =>   {

         socket.broadcast.emit( "serverAdd" ,data);

     })

     socket.on( 'reducer' ,   (data)   =>   {

         socket.broadcast.emit( "serverReducer" ,data);

     })}) server.listen( 9000 ) <! DOCTYPE   html >< html   lang = "en" > < head >

     < meta   charset = "UTF-8" >

     < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >

     < meta   http - equiv = "X-UA-Compatible"   content = "ie=edge" >

     < title > Document < /title>

     < link   rel = "stylesheet"   href = "./css/reset.css" >

     < style >

         # goodsList   {

             width :   100 % ;

             height :   100 % ;

             padding :   .1 rem;

         }

         .goodsItem   {

             display :   flex;

             width :   100 % ;

             padding :   .2 rem;

         }

         .goodsItem > div : nth - child( 1 )   {

             margin - right :   .2 rem;

         }

         .goodsItem   img   {

             width :   2 rem;

             height :   2.5 rem;

         }

         .goodsDes   {

             flex :   1 ;

             display :   flex;

             justify - content :   space - between;

             flex - direction :   column;

         }

         .goodsDes > div : nth - child( 3 )   {

             display :   flex;

         }

         .goodsDes > div : nth - child( 3 )   .reducer   {

             width :   30 px;

             height :   30 px;

             text - align :   center;

             line - height :   30 px;

             background :   # ccc;

             color :   # fff;

             font - size :   16 px;

         }

         .goodsDes > div : nth - child( 3 )   .add   {

             width :   30 px;

             height :   30 px;

             text - align :   center;

             line - height :   30 px;

             background :   # ccc;

             color :   # fff;

             font - size :   16 px;

         }

         .goodsDes > div : nth - child( 3 )   input   {

             width :   80 px;

             height :   30 px;

             border :   0 ;

         }

     < /style> < /head> < body >

     <!--  

     1 需求評審

     2 (需求肯定出來了)前後端開會 -> 定義介面(後端為主   前端為輔)   你寫程式碼的速度   *   需求的難易程度   *   1.5   =   模組開發的時間   cnpm   install   json - server   - g   json - server中的增刪改查   GET   POST   delete

     patch   -->

     < div   id = "goodsList" >

     < /div> < /body> < /html> < script   src = "/socket.io/socket.io.js" >< /script> < script   src = " >< /script> < script >

     class   Goods   {

         constructor()   {

             this .socket   =   io();

         }

         init()   {

             this .getGoods();

             this .watchServer();

         }

         getGoods()   {

             $.ajax({

                 type :   "get" ,

                 url :   " ,

                 success :   this .handleGetGoodsSucc.bind( this )

             })

         }

         handleGetGoodsSucc(data)   {

             var   str   =   "" ;

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

                 str   +=   `<div data-id="${ data[i].id }">            <div>                <img src="${ data[i].goodsPic }" >            </div>            <div>                <div>${ data[i].goodsName }</div>                <div>單價:<span data-price="${ data[i].price }">${ data[i].price }</span>$</div>                <div>                    <div>-</div>                    <input type="text" value="${ data[i].num }">                    <div>+</div>                </div>            </div>        </div>                `

             }

             $( "#goodsList" ).html(str);

             this .add();

             this .reducer();

         }

         add()   {

             $( ".add" ).each( this .handleAddEach.bind( this ))

         }

         handleAddEach(index)   {

             $( ".add" ).eq(index).on( "click" ,   this .handleAddCb.bind( this ,   index))

         }

         handleAddCb(index)   {

             var   n   =   $( ".add" ).eq(index).prev().attr( "value" );

             var   id   =   $( ".add" ).eq(index).parent().parent().parent().attr( "data-id" );

             n ++ ;

             $( ".add" ).eq(index).prev().attr( "value" ,   n);

             var   price   =   $( ".add" ).eq(index).parent().parent().find( "div" ).eq( 1 ).find( "span" ).attr( "data-price" );

             $( ".add" ).eq(index).parent().parent().find( "div" ).eq( 1 ).find( "span" ).text(price   *   n)

             //socket部分              this .socket.emit( "add" ,   {   id :   id,   num :   n   });

         }

         reducer()   {

             $( ".reducer" ).each( this .handleReducerEach.bind( this ))

         }

         handleReducerEach(index)   {

             $( ".reducer" ).eq(index).on( "click" ,   this .handleReducerCb.bind( this ,   index))

         }

         handleReducerCb(index)   {

             var   n   =   $( ".reducer" ).eq(index).next().attr( "value" );

             var   id   =   $( ".reducer" ).eq(index).parent().parent().parent().attr( "data-id" );

             if   (n   ==   1 )   {

                 n   =   1 ;

             }   else   {

                 -- n;

                 this .socket.emit( "reducer" ,   {   id :   id,   num :   n   });

             }

             $( ".reducer" ).eq(index).next().attr( "value" ,   n);

             var   price   =   $( ".reducer" ).eq(index).parent().parent().find( "div" ).eq( 1 ).find( "span" ).attr( "data-price" );

             $( ".reducer" ).eq(index).parent().parent().find( "div" ).eq( 1 ).find( "span" ).text(price   *   n)

         }

         watchServer()   {

             this .socket.on( "serverAdd" ,   this .handleServerAddSucc.bind( this ));

             this .socket.on( "serverReducer" ,   this .handleServerReducerSucc.bind( this ))

         }

         handleServerAddSucc(data)   {

             $( ".add" ).each( this .handleAddEachServer.bind( this ,   data))

         }

         handleAddEachServer(data,   index)   {

             var   id   =   $( ".add" ).eq(index).parent().parent().parent().attr( "data-id" );

             if   (id   ==   data.id)   {

                 var   val   =   $( ".add" ).eq(index).prev().val();

                 $( ".add" ).eq(index).prev().val( Number (data.num));

             }

         }

         handleServerReducerSucc(data)   {

             $( ".reducer" ).each( this .handleReducerEachServer.bind( this ,   data))

         }

         handleReducerEachServer(data,   index)   {

             var   id   =   $( ".reducer" ).eq(index).parent().parent().parent().attr( "data-id" );

             if   (id   ==   data.id)   {

                 var   val   =   $( ".reducer" ).eq(index).next().val();

                 $( ".reducer" ).eq(index).next().val( Number (data.num));

             }

         }

     }

     new   Goods().init(); < /script>


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69913864/viewspace-2686761/,如需轉載,請註明出處,否則將追究法律責任。

相關文章