前端技术前沿9

刺骨的言语ヽ痛彻心扉 2021-09-19 14:16 289阅读 0赞

![image.png][]

![image.png][image.png 1]

![image.png][image.png 2]

Node.js使用Module模块去划分不同的功能，以简化应用的开发。

var myModule = require('./myModule.js');

将某些方法和变量暴露到模块外，可以使用exports对象去实现。

安装  
Linux 下 Node.js的安装

sudo apt-get update
    sudo apt-get install node
    或者：
    sudo aptitude update
    sudo aptitude install node

![image.png][image.png 3]

var http = require('http');
    server = http.createServer(function (req, res) {
    res.writeHeader(200, {"Content-Type": "text/plain"});
    res.end("Hello");
    });
    server.listen(8000);
    console.log("httpd start @8000");

![image.png][image.png 4]

console.log("Hello World");
    
    node helloworld.js

![image.png][image.png 5]

Node.js 安装配置

![image.png][image.png 6]

![image.png][image.png 7]

![install-node-msi-version-on-windows-step1][]

![install-node-msi-version-on-windows-step2][]

![install-node-msi-version-on-windows-step3][]

![install-node-msi-version-on-windows-step5][]

引入required模块  
创建服务器  
接收请求与响应请求

步骤一、引入required模块

var http = require("http");

步骤一、创建服务器

使用http.createServer()方法创建服务器，并使用listen方法绑定8888端口。 函数通过request, response参数来接收和响应数据。

## 双击 ##

// 触摸开始时间
      touchStartTime: 0,
      // 触摸结束时间
      touchEndTime: 0,  
      // 最后一次单击事件点击发生时间
      lastTapTime: 0, 
      // 单击事件点击后要触发的函数
      lastTapTimeoutFunc: null,

/// 按钮触摸开始触发的事件
      touchStart: function(e) {
        this.touchStartTime = e.timeStamp
      },
    
      /// 按钮触摸结束触发的事件
      touchEnd: function(e) {
        this.touchEndTime = e.timeStamp
      },

/// 单击
      tap: function(e) {
        var that = this
        wx.showModal({
          title: '提示',
          content: '单击事件被触发',
          showCancel: false
        })
      },

/// 双击
      doubleTap: function(e) {
        var that = this
        // 控制点击事件在350ms内触发，加这层判断是为了防止长按时会触发点击事件
        if (that.touchEndTime - that.touchStartTime < 350) {
          // 当前点击的时间
          var currentTime = e.timeStamp
          var lastTapTime = that.lastTapTime
          // 更新最后一次点击时间
          that.lastTapTime = currentTime
    
          // 如果两次点击时间在300毫秒内，则认为是双击事件
          if (currentTime - lastTapTime < 300) {
            console.log("double tap")
            // 成功触发双击事件时，取消单击事件的执行
            clearTimeout(that.lastTapTimeoutFunc);
            wx.showModal({
              title: '提示',
              content: '双击事件被触发',
              showCancel: false
            })
          }
        }
      },
      
    
    单击、双击和长按同时存在的实现：
    
      /// 长按
      longTap: function(e) {
        console.log("long tap")
        wx.showModal({
          title: '提示',
          content: '长按事件被触发',
          showCancel: false
        })
      },
    
      /// 单击、双击
      multipleTap: function(e) {
        var that = this
        // 控制点击事件在350ms内触发，加这层判断是为了防止长按时会触发点击事件
        if (that.touchEndTime - that.touchStartTime < 350) {
          // 当前点击的时间
          var currentTime = e.timeStamp
          var lastTapTime = that.lastTapTime
          // 更新最后一次点击时间
          that.lastTapTime = currentTime
          
          // 如果两次点击时间在300毫秒内，则认为是双击事件
          if (currentTime - lastTapTime < 300) {
            console.log("double tap")
            // 成功触发双击事件时，取消单击事件的执行
            clearTimeout(that.lastTapTimeoutFunc);
            wx.showModal({
              title: '提示',
              content: '双击事件被触发',
              showCancel: false
            })
          } else {
            // 单击事件延时300毫秒执行，这和最初的浏览器的点击300ms延时有点像。
            that.lastTapTimeoutFunc = setTimeout(function () {
              console.log("tap")
              wx.showModal({
                title: '提示',
                content: '单击事件被触发',
                showCancel: false
              })
            }, 300);
          }
        }
      },

var http = require('http');
    
    http.createServer(function (request, response) {
    
    	// 发送 HTTP 头部 
    	// HTTP 状态值: 200 : OK
    	// 内容类型: text/plain
    	response.writeHead(200, {'Content-Type': 'text/plain'});
    
    	// 发送响应数据 "Hello World"
    	response.end('Hello World\n');
    }).listen(8888);
    
    // 终端打印如下信息
    console.log('Server running at http://127.0.0.1:8888/');

--------------------

## 请点赞！因为你的鼓励是我写作的最大动力！ ##

![官方微信公众号][1240]

吹逼交流群：**711613774**

![吹逼交流群][1240 1]

[image.png]: /images/20210724/b483774aca9c47a7a7e2e36ead97fc0c.png
[image.png 1]: /images/20210724/41c0bb9891a74163bf0c9df921f58cd3.png
[image.png 2]: /images/20210724/148b91623d0a4d6da317196fd5a178d7.png
[image.png 3]: /images/20210724/8595d6a89a47444d8d8da1eaaaf26637.png
[image.png 4]: /images/20210724/a994a5321aad4facadcc035319c50389.png
[image.png 5]: /images/20210724/ca4c8f4048ca4abc9952ffe2f57ce01b.png
[image.png 6]: /images/20210724/94037865253e425ea159c20dfdd44cf3.png
[image.png 7]: /images/20210724/da942eaa0aeb41bbb0094bb5bdbab10a.png
[install-node-msi-version-on-windows-step1]: /images/20210724/37a5e1234d3243b9b3e8c6e2ecd75c85.png
[install-node-msi-version-on-windows-step2]: /images/20210724/b190d0ba2e2941d9a2f49cbb7e7eb140.png
[install-node-msi-version-on-windows-step3]: /images/20210724/8160c4e0f8554f39b8a71b69ae35e104.png
[install-node-msi-version-on-windows-step5]: /images/20210724/1f71585d2c1d41f0b2003580d576114c.png
[1240]: /images/20210724/ca5020ac9d25410ab2a8d9701b22d48c.png
[1240 1]: /images/20210724/1898a953b7aa49f38a8343a0e7406ccc.png