当前位置: 首页 > news >正文

腾讯云网站备案吗怎样看网站的浏览量

腾讯云网站备案吗,怎样看网站的浏览量,斗图在线制作生成器,如何制作产品网站模板下载目录 (一)Nodejs简介 1.nodejs是什么 2.nodejs架构 3.nodejs的应用场景 (二)准备工作 1.安装nodejs 2.nodejs版本管理工具 (三)nodejs的使用 1.node的输入 2.node的输出 3.其他的console方法 (四)全局对象 1.常见的全局对象 2.特殊的全局对象 3.global和window的…

目录

(一)Nodejs简介

1.nodejs是什么

2.nodejs架构

3.nodejs的应用场景

(二)准备工作

1.安装nodejs

2.nodejs版本管理工具

(三)nodejs的使用

1.node的输入

2.node的输出

3.其他的console方法

(四)全局对象

1.常见的全局对象

2.特殊的全局对象

3.global和window的区别 

(五)模块化***

1.什么是模块化

2.CommonJS

(1)CommonJS的广泛使用

(2)CommonJS在Node的使用

(3)CommonJS在Node实现的本质

(4)module.exports的本质

(5)require()查找模块的细节

(6)Node模块的加载过程

多次引入的模块加载

循环引入的模块加载顺序

3.ES Module

(1)es module的导入和导出

(2)导出(暴露)的三种方法 

(3)导入的三种方法

(4)import函数

import() 

import.meta


(一)Nodejs简介

1.nodejs是什么

nodejs是基于v8 JavaScript引擎的运行时环境

node基于v8引擎来执行js文件,但不仅仅只有v8引擎,也有额外的操作,如文件读写、网络IO、加密、压缩解压文件等操作

2.nodejs架构

node是用JS、C、C++语言编写的

编写的js代码会通过v8引擎,再经过nodejs的bindings,将任务放到Libuv的事件循环中

libuv:是使用C语言编写的库,提供了事件循环、文件系统读写、网络IO等内容

3.nodejs的应用场景

  1. 目前前端开发的库都是以node包的形式进行管理
  2. npm、yarn、pnpm工具成为前端开发使用最多的工具
  3. 使用nodejs作为服务器开发、中间件、代理服务器
  4. 大量项目需要借助nodejs完成前后端渲染的同构应用
  5. 为项目编写脚本工具

(二)准备工作

1.安装nodejs

在中文网里安装node.js: Node.Js中文网

LTS版本:更加稳定,不会轻易改变版本(项目开发推荐)

current版本:最新版本,拥有新特性,不太稳定 

2.nodejs版本管理工具

当需要使用到多个版本的node且来回切换时,可以使用版本工具进行快速安装和切换

n或nvm:适用于Mac系统

nvm-windows:适用于windows系统 GitHub - coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically written in Go.

nvm-windows的基本使用:

在github里下载:Releases · coreybutler/nvm-windows · GitHub

nvm list ----列出nvm管理的node版本

nvm install xx版本 ----下载xx版本

nvm use xx版本 ----切换为xx版本

nvm current ----展示当前使用的node版本

(三)nodejs的使用

1.node的输入

在控制台运行js文件:node xxx 

输出:console.log()

2.node的输出

输入:node xxx 变量 变量...

输入的变量会存储在全局对象process的argv数组里,这个数组存储有node的路径和运行的js文件的路径,以及输入的变量

 

因此可以通过process.argv获取输入的变量值 

argv是什么?

是argument vector的缩写,指传入的具体的参数

3.其他的console方法

console.clear()清空控制台

console.trace()打印函数的调用栈

更多在文档中查看:Console | Node.js v19 API

(四)全局对象

这些对象在所有模块中都可用:Global objects | Node.js v19 API

1.常见的全局对象

global:全局对象

process:process对象提供有关当前Node.js进程的信息和控制 Process | Node.js v19 API

console:对控制台的简单调试

定时器函数:

setTimeout()

setInterval()

setImmediate():callback I/O事件之后的回调立即执行

setImmediate和setTimeout的执行顺序有区别,后续再x

process.nextTick():添加到下一次tick队列中

2.特殊的全局对象

以下变量可能看起来是全局的,但实际上不是。它们只存在于模块的作用域中

详情见:CommonJS modules | Node.js v19 API

__dirname:当前文件所在的目录结构

__filename:当前目录+文件名称

exports、module、require():在后面的模块化会着重讲到 

3.global和window的区别 

global对象是js运行时nodejs提供的全局对象,上文提到的process、console、定时器函数等都包含在global对象中;

window对象是浏览器的全局对象,里面也包含了console、定时器函数等;

但在浏览器里global相关的属性是不存在的,在node里window属性也是不存在的

因此使用全局属性globalThis可以解决该问题

globalThis - JavaScript | MDN

通过使用globalThis,你的代码将在 window 和非 window 上下文中工作,而无需编写额外的检查或测试。在大多数环境中,globalThis直接引用该环境的全局对象。但是,在浏览器中,内部使用代理来考虑iframe和跨 window 安全性。实际上,它并不会改变我们编写代码的方式。 

(五)模块化***

1.什么是模块化

  • 模块化开发是将程序划分为一个个小的模块结构,在各自的模块中编写自己的逻辑结构,有自己的作用域,不会造成全局变量的污染
  • 在这个模块结构中,可以将自己的变量、函数、对象等导出给其他模块使用,也可以引入其他模块的变量、函数、对象等为自己所用。

在早期js开发中,对于怎么样导入导出没有具体的规范,大家自发的建立起CommonJS、amd/cmd等模块开发规范,直到ES6的ESModule给出了官方的模块化规范 

2.CommonJS

(1)CommonJS的广泛使用

  • node是CommonJS在服务器端一个具有代表性的实现;
  • Browserify是CommonJS在浏览器的一个实现;
  • webpack打包工具具备对CommonJS的支持和转换

(2)CommonJS在Node的使用

nodejs的模块化是基于CommonJS的规范实现的

  • Node.js 应用由模块组成,每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可见。
  • 模块中包括CommonJS规范的核心变量:module、exports、require

模块的导出

exports、module.exports 

const name = 'csq'
function sayHello() {console.log('hello');
}exports.name = name
exports.sayHello = sayHello

模块的导入

require()命令的基本功能是,读入并执行一个 js 文件,然后返回该模块的 exports 对象。如果没有发现指定模块,会报错。

const a = require('./a')
// 解构赋值
// const {name,sayHello} = require('./a')console.log(a.name);
a.sayHello()

(3)CommonJS在Node实现的本质

require()通过引用赋值将另一模块的exports对象绑定在当前模块中

意思是:require获取到的对象和导出的对象指向同一个地址

在导入的模块中修改require获取到的对象,在导出模块的exports对象也会发生改变;反之,在导出模块的exports对象发生改变,那么在导入模块的require获取的对象也会发生改变。

在main.js中:
const a = require('./a')
console.log(a.name); // ‘csq’
// 2s后修改对象属性 对应导出的exports对象也会改变
setTimeout(() => {a.name = 'zkj'
}, 2000)在a.js中:
const name = 'csq'
setTimeout(() => {console.log(exports.name); // ‘zkj’
}, 3000);exports.name = name

(4)module.exports的本质

CommonJS中是没有module.exports的概念的,是依靠exports进行导出的。而在Node中为了实现模块的导出,使用的是Module类,每一个模块的实例也就是module,真正用于模块导出的是module.exports。因此exports只是指向了module.exports

如下图,require()导入的a和module.exports、exports都指向同一地址,因此对三者任意一个进行修改,其他的也都会改变 

在开发中,更加推荐的导出方法是:

// 推荐导出方法
module.exports = {name,sayHello
}

这种方法创建了一个新对象并将module.exports也指向了新的内存,exports对象也就没有了意义

因此,无论如何修改exports内的数据都不会影响到module.exports 

(5)require()查找模块的细节

情况一:require("内置模块名"):导入Node内置模块

如:path、http、fs等内置模块

情况二:require("路径"):导入自定义的模块

查找顺序:如"./xxx",会先按照以下顺序查找当前目录有无该文件:

        1.xxx

        2.xxx.js

        3.xxx.json

        4.xxx.node

当这些文件都没有后,再将xxx作为一个目录,自动补全index文件,查找目录后有无index文件,没有就会报错

情况三:require("外部模块"):当require内不是路径也不是内置模块时,会查找当前路径的node_modules文件夹,再在文件夹内寻找有无该模块;若当前路径没有node_modules文件夹,就向上一级文件夹依次继续寻找

例如require("axios") 需要通过node i axios下载后才能在node_modules内找到 

(6)Node模块的加载过程

多次引入的模块加载

第一次加载某个模块时,Node.js 会缓存该模块。以后再加载该模块,就直接从缓存取出该模块的exports属性返回

const a = require('./a')
// 第一次加载某个模块时,Node.js 会缓存该模块。
// 以后再加载该模块,就直接从缓存取出该模块的 module.exports 属性返回
a.name = 'zkj'
const b = require('./a')console.log(b.name); // 'zkj'

由以上实例可证明,再次导入该模块,就不会再从该模块中重新加载了

原因:在module对象中有一个属性loaded默认为false,当导入后就会变为true,不会再被加载了

循环引入的模块加载顺序

当出现循环引入,如图

Node会按照图的深度优先算法进行遍历

即顺序:main ->aaa->ccc->ddd->eee->bbb 

3.ES Module

commonJS模块化适用于服务器端,而官方推出的ES Module是在浏览器端实现模块化的一个很好的方案

(1)es module的导入和导出

在浏览器中实现模块化,只需要在引入时 type=module即可

导入:import {xxx,yyy} from "xxx.js"

在main.js中:
// 在浏览器上使用模块化 导入时文件名后缀要写完整
import { name, sayHello } from "./a.js"
console.log(name); // ‘csq’
sayHello() // ‘hello’

注意:在浏览器使用esModule时要加上文件后缀js,否则查找不到对应文件

导出:export {xxx,yyy}

在a.js中:
let name = 'csq'
function sayHello() {console.log("hello");
}
export { name, sayHello }

注意:在浏览器使用ESModule必须开启一个服务端口打开对应html文件,否则会报错:不能通过本地下载js文件的方式解析,file协议前缀会被跨域策略阻止,必须使用http、https等协议前缀

在MDN上有解释:JavaScript 模块 - JavaScript | MDN

你需要注意本地测试——如果你通过本地加载 HTML 文件(比如一个 file:// 路径的文件),你将会遇到 CORS 错误,因为 JavaScript 模块安全性需要。你需要通过一个服务器来测试。 

(2)导出(暴露)的三种方法 

分别暴露

// 1.分别暴露
export let name = 'csq'
export function sayHello() {console.log("hello");
}

统一暴露

// 2.统一暴露
export { name, sayHello }

默认暴露

// 3.默认暴露 (只能暴露一个变量、方法或对象等)
export default {name:'csq',age:18
}

(3)导入的三种方法

// 1.导入方式1
import { name, sayHello } from "./a.js"// 2.导入方式2 全部导入
import * as a from "./a.js"// 3.默认暴露的导入
import sayHello from "./a.js";

注意:默认暴露的导入名字是自定义的,一般使用与导出相关的名字

(4)import函数

import和export命令只能在模块的顶层 

import命令会被 JavaScript 引擎静态分析,先于模块内的其他语句执行。若在if语句内写import语句,在编译时是不会被处理的,导致报语句错误,如下:

if(name){import { age } from "./b.js"; // 报错:导入声明只能在顶层使用
}
import() 

 ES2020 引入import()函数,支持动态加载模块

import("./xxx.js")函数返回一个promise对象

if (name) {import('./b.js').then(res => {console.log(res) // module对象console.log(res.age) // 18})
}

import()和require()一样都能实现动态加载模块,区别是:前者是异步加载,后者是同步加载

import.meta

开发者使用一个模块时,有时需要知道模板本身的一些信息(比如模块的路径)。ES2020 为 import 命令添加了一个元属性import.meta,返回当前模块的元信息

import.meta只能在模块内部使用,如果在模块外部使用会报错

console.log(import.meta); // 在b.js中

 

(5)ESModule解析过程**

https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/

构建:查找、下载并将所有文件解析为模块记录(Module record)

实例化:对模块记录进行实例化,分配内存空间,然后解析模块的导入和导出,将导出和导入都指向对应的内存地址

运行:运行代码,将实际的值填入对应的内存地址中

http://www.yayakq.cn/news/129265/

相关文章:

  • 用爱奇艺会员做视频网站违法吗最好看的免费网站源码
  • 网站后台html模板凡科网企业账号登录
  • 安阳专业做网站公司域名关键词查询
  • nginx wordpress 伪静态大连网站排名优化价格
  • 建设网站要在需求武安市网站建设费用
  • 淄博网站开发打造爆品营销方案
  • 做阿胶上什么网站比较好网站建设优化加盟代理
  • 游戏网站wordpress网站开发毕设结论
  • 优化网站排名解析推广app主题WordPress
  • 公司网站开发方案现在做一个什么的网站比较好
  • 关于网站建设方案网站登录模板 html
  • wordpress 采集站门户类网站前台
  • jsp网站首页怎么做学生做的动漫网站
  • 阿里云怎么创建网站深圳市网站建设平台
  • 江苏艺居建设有限公司网站网站建设职责
  • 胶州做网站的游戏制作软件手机版下载
  • 东莞网站建设曼哈顿信科柳州市住房建设保障网
  • 广州市天河区网站设计公司望野的翻译
  • h5能做网站开发吗页面网站缓存如何做
  • 厦门的商城网站建设免费刷粉网站推广
  • 装企营销系统网站关键词优化的步骤
  • 私人做医院的网站建网站用什么工作站
  • 成都 网站建设培训孝感市最新消息
  • 建设企业网站进去无法显示网站素材模板旅游
  • 自学网站建设需要什么学历域名续费一般多少一年
  • 高校国际交流中心网站建设方案惠州网站建设佳木斯
  • 如何美化网站项目信息网站哪个好
  • 给个能看的网站站长查询站长工具
  • 17一起做网站包包安阳千度网络有限公司
  • 免费建站平台官网建设网站和推广