前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端技术前沿9

前端技术前沿9

作者头像
达达前端
发布2019-07-03 10:38:13
1.6K0
发布2019-07-03 10:38:13
举报
文章被收录于专栏:达达前端

image.png

image.png

image.png

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

代码语言:javascript
复制
var myModule = require('./myModule.js');

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

安装 Linux 下 Node.js的安装

代码语言:javascript
复制
sudo apt-get update
sudo apt-get install node
或者:
sudo aptitude update
sudo aptitude install node

image.png

代码语言:javascript
复制
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

代码语言:javascript
复制
console.log("Hello World");

node helloworld.js

image.png

Node.js 安装配置

image.png

image.png

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模块

代码语言:javascript
复制
var http = require("http");

步骤一、创建服务器

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

双击

代码语言:javascript
复制
  // 触摸开始时间
  touchStartTime: 0,
  // 触摸结束时间
  touchEndTime: 0,  
  // 最后一次单击事件点击发生时间
  lastTapTime: 0, 
  // 单击事件点击后要触发的函数
  lastTapTimeoutFunc: null, 
代码语言:javascript
复制
  /// 按钮触摸开始触发的事件
  touchStart: function(e) {
    this.touchStartTime = e.timeStamp
  },

  /// 按钮触摸结束触发的事件
  touchEnd: function(e) {
    this.touchEndTime = e.timeStamp
  },
代码语言:javascript
复制
 /// 单击
  tap: function(e) {
    var that = this
    wx.showModal({
      title: '提示',
      content: '单击事件被触发',
      showCancel: false
    })
  },
代码语言:javascript
复制
/// 双击
  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);
      }
    }
  },
代码语言:javascript
复制
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/');
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.05.24 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 双击
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档