JavaScript

Deno是基于V8引擎，使用Rust构建的JavaScript & TypeScript 运行时环境，天生支持TypeScript，并且有安全模式（默认情况下无法获取网络，文件系统，环境变量等权限，当然也可以开放），Deno的作者是Nodejs之父Ryan Dahl，构建的原因是解决Nodejs的缺陷，例如模块的安全性（Node运行时的权限很高，缺乏模块的安全运行），Deno的模块化选择了ESMoule标准，而且具备浏览器的api，例如window全局变量，支持onload，onunload等事件函数，支持fetch，Web Workers等标准，异步操作返回采用Promise，支持await Deno不使用node_modules与package.json的包管理机制，而是采用下载编译的机制，并且存在缓存，模块更新通过更新缓存来完成 Deno有个特殊的功能，就是可以从网络上导入模块 安装 Linux curl -fsSL https://deno.land/install.sh | sh 或者 windows iwr https://deno.land/install.ps1 -useb | iex 也可以通过scoop安装 scoop install deno 作为Rust构建的，当然也支持Cargo包管理器安装 cargo install deno –locked 或者通过单一的可执行文件来安装（我采用这个方式，再配置一下Path环境变量就是可以了，windows选择deno-x86_64-pc-windows-msvc） https://github.com/denoland/deno/releases 检查是否安装完成 deno –version 第一个例子 import DFetch from "https://deno.land/x/dfetch/mod.ts" DFetch.get("https://xiaochenabc123.test.com").then((response) => { console.log(response) }) 运行 deno run .\index.ts 它会向你询问进行网络请求，是否允许，可通过–allow-net默认运行，例如：deno run –allow-net .\index.ts 第三方库通过https://deno.land/x查找 权限 –allow-env，允许访问环境变量，可指定环境变量列表，通过逗号分隔 –allow-hrtime，允许高分辨率时间测量 –allow-net，允许网络访问，可指定网络地址列表，通过逗号分隔 –allow-ffi，允许加载动态库，动态库不是安全运行的 –allow-read，允许读取，可指定读取文件列表或者目录，使用逗号分隔 –allow-run，允许运行子进程，这个子进程不是安全运行的，可指定子进程列表，通过逗号分隔 –allow-write，允许写入，可指定写入文件列表或者目录，使用逗号分隔 -A 或者 –allow-all 允许全部权限 VsCode插件deno deno内置工具 安装模块...

ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css ESbuild支持ES6模块，cjs模块，对ES6+语法支持性好，可以直接打包css文件，json文件，ts文件 注意：esbuild并不对ts文件进行类型检查工作 安装 npm install esbuild 或者 yarn add esbuild 打包 .\node_modules.bin\esbuild app.jsx –outfile=build/index.js –bundle 或者 npx esbuild app.jsx –outfile=build/index.js –bundle 或者package.json “build”: “esbuild app.jsx –outfile=build/index.js –bundle” npm run build 或者 yarn build 例子（app.jsx） import React from 'react' import ReactDOM from 'react-dom' const App = () => { return ( <div> <h1>Hallo, Esbuild!</h1> </div> ) } ReactDOM.render( <App />, document.getElementById("app") ) index.html <div id="app"></div> <script src="./build/index.js"></script> 我本地打包只花64ms就打包好了 使用source map功能...

函数被调用时，浏览器会传递两个参数，this和arguments this就是函数的上下文对象，而arguments是一个数组对象（也就是可以通过索引来操作数据），函数调用时传递的参数会在arguments中保存 callee属性对应着当前的函数 例如： function abc(){ console.log(arguments.length); console.log(arguments[0]); console.log(arguments.callee); console.log(this) } abc('hallo'); BOM对象 (Browser Object Model) 是指浏览器对象模型 该对象提供了浏览器行为和浏览器属性方法 windows表示整个浏览器的窗口，同时也是JavaScript最顶层的对象，其他bom对象都是其的属性 navigator包含了当前浏览器的全部信息 console.log(window.navigator) 可以看到输出了很多属性，如userAgent，language等等 location表示当前浏览器地址信息，可以用来跳转到指定地址，获取当前页面的地址等等，例如： console.log(window.location) const urlData = "https://xiaochenabc123.test.com/; window.location.href = urlData; 这个也可以实现跳转 window.location.assign("https://xiaochenabc123.test.com") 这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面 window.location.replace("https://xiaochenabc123.test.com") reload方法可以重载页面，加上true参数将强制更新 window.location.reload(true) history表示浏览器的历史记录 console.log(window.history) length表示本次访问网站的数量 同时也提供了几个方法 back()返回上个页面 window.history.back() 可以绑定个点击事件，用来返回上个页面 forward()前进，一般是和back()搭配使用，一个返回上个页面，一个返回到之前的页面 window.history.forward() go()，前进或者后退指定次数，正数为前进，负数为后退 window.history.go(-1) screen代表用户的屏幕的信息, 获取显示器的相关信息 console.log(window.screen) call 和 apply addEventListen()绑定事件函数 removeEventListen()移除事件函数 鼠标按下时onmousedown 鼠标移动时onmousemove 鼠标松开时onmouseup undefined代表定义未赋值 null定义并赋值了, 只是值为null document.execCommand可以操作剪贴板 document.execCommand(‘copy’) // 复制 document.execCommand(‘cut’) // 剪切 document.execCommand(‘paste’) // 粘贴...

ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据 关于XMLHttpRequest对象（构造函数）的用法：https://xiaochenabc123.test.com/archives/14.html ajax需要网站环境下生效，需要web服务器，nodemon app.js // 导入express const express = require("express"); // 导入path const patg = require("path"); // 创建web服务器 const app = express(); // 静态资源访问服务 app.use(express.static(path.join(__dirname,"public"))); app.get("/hallo",(req, res) = >{ res.send("hallo"); }); // 监听端口 app.listen(3000); console.log("服务器启动成功") nodemon app.js ajax运行原理 ajax代理浏览器发送请求和接收响应，达到局部更新页面数据的效果 创建ajax对象 var hallo = new XMLHttpRequest(); 请求方式和请求地址 hallo.open(“GET”,“https://httpbin.org/get") 发送请求 hallo.send(); 获取服务端给予客户端的响应数据，因为请求和获取数据的速度取决于网络速度，应该设置onload事件，当加载完毕了再获取数据 hallo.onload = function(){ console.log(hallo.responseText) } 服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中 在http请求与响应的过程中，请求参数或者响应内容，如果是对象类型，最后都会转换为对象字符串进行传输，例如： app.get("/hallo",(req, res) = >{ res.send({"name" : "root"}); }); json字符串转换为json对象 var responseText = JSON.parse(hallo.responseText); console....

IntersectionObserver是浏览器本身提供的构造函数，因此可能有一些老版本浏览器没有效果 该构造函数提供了一种异步的监测目标对象和祖先对象或者视口相交的方法 var observe = new IntersectionObserver(callback, options) 例如上面，该函数可以传入两个参数，callback是当可视性发生改变时执行回调函数，options是配置对象 使用该构造函数生成的实例中有3个观察器实例，分别是observe（开始监测），unobserve（停止监测），disconnect（关闭监测），其中observe的参数是dom对象 当监测目标对象的可视性发生改变时调用callback参数中的回调函数 options参数：主要是设置观测的对象和观测值，该参数中有三个键值对 root指的是观测对象的根元素，默认是浏览器视口，值要么是根元素，要么就是观测对象的父元素 rootMargin指的是用于扩大或者缩小视口的大小 threshold指的是交叉的比例，主要决定什么时候触发回调函数，是数组，默认值为0 callback参数中的回调函数一般会被调用两次，一次是当监测对象可视性满足了threshold指定的值，还有一次就是监测对象不满足threshold指定的值 IntersectionObserverEntry对象 该对象提供了监测对象的信息，有七个属性 boundingClientRect：返回目标的矩形信息 intersectionRatio：返回相交时和目标的比例值，不可视时小于等于0 intersectionRect：返回目标和视口相交的矩形信息 isIntersecting：返回目标当前是否可视，可视为true（返回值为布尔值） rootBounds：返回根元素的矩形信息，没有指定根元素则返回当前视口的矩形信息 target：返回观测的目标对象，是dom对象 time：返回一个记录了从观测开始到交叉被触发时间的的时间戳，单位为毫秒 如果是搞懒加载，那么intersectionRatio和isIntersecting是关键点 例如： const lazyload = new IntersectionObserver((target)=>{ // 实例化 target.forEach((item) =>{ if (item.intersectionRatio){ // 当目标可视 item.target.src = item.target.alt; // 进行属性值覆盖 lazyload.unobserve(item.target) // 停止观测 } }) },{ rootMargin: "100px" // 提前100px }); const imgs = document.querySelectorAll("img[alt]"); // 选择带有alt属性的img元素 imgs.forEach((item) => { lazyload.observe(item) // 开始观测 });