摘要: 利用 node.JS 模块化实现路由功能, 将请求路径作为参数传递给一个 route 函数, 这个函数会根据参数调用一个方法, 最后输出浏览器响应内容
1. 介绍
node.JS 是一个基于 Chrome V8 引擎的 JaveScript 运行环境, 简单来说就是运行在服务端的 JavaScript, 是一个事件驱动, 非阻塞式的 I/O 模型, 速度快, 性能好. 前端的蓬勃发展除了各大框架的流行之外, 还有因为 node.JS 的兴起, 这使得前台和后台的数据交互更加便捷更加轻松. 由此也产生了一个新的概念 -- 全栈工程师, 一个全栈工程师可以完成前端页面架构还可以完美实现后台数据的交互, 熟练掌握 node.JS 已经成为每位前端工作者基本技能.
2. 使用
与 node.JS 打包下载的还有一个叫 NPM 的安装包管理工具, 能解决 node.JS 代码部署上很多问题. 我们可以利用 NPM 工具使用第三方包或命令行程序, 也可以上传自己编写的包或命令行程序供别人使用. NPM 安装第三方包的过程也十分简便, Windows 系统用 cmd 打开命令行, 输入 NPM install +(包的名称, 例如 webpack)就行.
3. 模块化
3.1 模块的输入与输出
Node.JS 的模块分为两类, 一类为原生 (核心) 模块, 一类为文件模块. 原生模块在 Node.JS 源代码编译的时候编译进了二进制执行文件, 加载的速度最快. 另一类文件模块是动态加载的, 加载速度比原生模块慢. 但是 Node.JS 对原生模块和文件模块都进行了缓存, 于是在第二次 require 时, 是不会有重复开销的. 其中原生模块都被定义在 lib 这个目录下面, 文件模块则不定性.
文件模块可以是 JavaScript 代码文件(.JS 作为文件后缀), 也可以是 JSON 格式文本文件(.JSON 作为文件后缀), 还可以是编辑过的 C/C++ 文件(.node 作为文件后缀). 文件模块输入方式通过 require('/ 文件名. 后缀'),require('./ 文件名. 后缀'),requrie('../ 文件名. 后缀') , 文件后缀可以省略; 以 "/" 开头是以绝对路径去加载, 以 "./" 开头和以 "../" 开头表示以相对路径加载, 而以 "./" 开头表示同级目录下文件. 文件后缀可以省略, Node.JS 尝试加载的优先级 JS 文件> JSON 文件> node 文件, 下面给出 Node.JS 模块的加载顺序:
实际应用中我们经常使用. JS 文件作为一个模块进行输入输出, 输出通过 exprots 或者 module.exports, 其中 exports 是一种简写形式, 等于在文件开头有这样一行命令: var exports = module.exports, 浏览器在编译的时候也会把它当成 module.exports 指令, 注意我们在使用 exports 时不能对它进行赋值等操作, 否则会切断与 module.exports 之间的联系, 导致输出错误.
3.2 Node.JS 重构路由功能
上面的内容主要介绍了 Node.JS 的作用, Node.JS 的基本语法以及它的遵循规范, 下面我们开始一个 demo, 实现路由功能:
- //server.JS
- var http = require('http') // 输入 node.JS 核心模块
- function startServer(route){
- var onRequest = function(req,res) {
- route(req.url) // 传入请求的路径
- }
- var server = http.createServer(onRequest)
- server.listen(3000) // 监听一个端口
- }
- module.exports.startServer = startServer; // 输出模块
我们新建一个 server.JS 模块, 在这个模块中, 我们定义了一个 startServer 函数, 这个函数监听了一个 3000 端口, 函数执行的时候调用 route 方法. 我们先将这个模块输出
- //index.JS
- var server = require("./server"); // 输入./server 模块
- var router = require('./router'); // 输入./router 模块
- var handler = require("./handler") // 输入./handler 模块
- var handle = {
- };
- handle["/"] = handler.home;
- handle["/home"] = handler.home;
- handle["/list"] = handler.list;
- handle["/add"] = handler.add
- server.startServer(router.route,handle)
route()接收到了请求路径, 我们希望它接收到不同的路径会调用不同的方法, 因此我们可以先把要执行的方法作为属性值传给一个 handle 对象, 它的键就等于 route 接收到的请求路径. 于是我们分别把创建 route.JS 和 handler.JS, 在 index.JS 中把请求路径和 handle 对象传给 route 函数
- //server.JS
- var http = require('http') // 引入 node.JS 核心模块
- function startServer(route,handle){
- var onRequest = function(req,res) {
- route(req.url,handle,res) // 传入请求的路径
- }
- var server = http.createServer(onRequest)
- server.listen(3000) // 监听一个端口
- }
- module.exports.startServer = startServer; // 输出模块
- //route.JS
- function route(pathname,handle,res){
- if(typeof handle[pathname] == "function"){
- handle[pathname](res)
- }else{
- res.end("404:connot find anything") // 未匹配到路径的时候, 响应 "404" 页面
- }
- }
- module.exports.route = route;
- //handler.JS
- function home (res){
- res.end("home")
- }
- function list (res){
- res.end("list")
- }
- function add(res){
- res.end("add")
- }
- module.exports = {
- home:home,
- list: list,
- add:add
- }
因为我们希望在地址栏输入路径的时候, 页面会响应出响应的内容, 所以我们要把响应参数 res 传递给 route 函数, 它又会把这个参数传递给 handler 里的方法, 这个我们就能很灵活地根据请求的地址响应我们想要的内容.
4. 代码效果浏览
我们在 Node.JS 环境中执行 index.JS 模块, 先找到这个模块的位置, 在终端输入: node index, 浏览器打开 3000 端口. 这里推荐一个 nodemon 插件, 它可以自动同步模块的变化, 不用每次保存后再输入 node index. 本次学习的效果如下:
PS: 以上就是本次的学习心得, 通过博客的方式让自己的知识点得到了很好的巩固, 不仅要学会, 还得知道怎么分享出来, 喜欢互联网其中一大缘由是它的开源精神, 学习分享优秀的作品真是一件快乐的事情. 本人水平有限, 文章不足之处烦请不吝赐教
来源: https://www.cnblogs.com/youma/p/10429040.html