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://zhizheng123.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://zhizheng123.test.com/; window.location.href = urlData; 这个也可以实现跳转 window.location.assign("https://zhizheng123.test.com") 这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面 window.location.replace("https://zhizheng123.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’) // 粘贴...

ECMAScript JavaScript的创造者Netscape将其提交给标准化组织ECMA，因此JavaScript的标准是ECMAScript ECMAScript是规范，JavaScript是实现 ES6又叫ECMAScript2015，因为标准委员会决定每年的6月份正式发布标准，作为当年的正式标准，使用年份来标记，不需要之前的版本号了 变量 let关键字声明变量，使用let声明的变量具有块级作用域有效的特性 例如： if(true){ let a = 666; } console.log(a); // Uncaught ReferenceError: a is not defined 注意： 使用var声明的变量不具备块级作用域有效的特性 使用let声明的变量不存在变量提升，只能先声明后使用，具有暂时性死区特性，绑定在块级作用域，不会受外部污染或者影响，let不允许在同一个作用域中，重复声明同一个变量 const声明一个只读的常量，一声明，常量的值将不能改变 const abc =123; const一旦声明将立刻初始化，只声明不赋值是会报错的，同样不存在变量提升，存在暂时性死区 ES6的作用域： 全局作用域 函数作用域 块级作用域 因为部分低版本浏览器还不支持ES6，因此有一些工具可以ES6语法转ES5的语法，例如：babel 安装babel npm install -g babel-cli 安装转换包 npm install –save-dev babel-preset-es2015 babel-cli 新建.babelrc文件，写入： { "presets":[ "es2015" ], "plugins":[] } babel main.js -o src/main.js 然后就成功将ES6语法转为ES5的语法，提高浏览器兼容性 变量声明方式 let，声明一个变量 const，声明一个常量 在ES6中，var是声明全局变量的，而let声明的变量是具有块级作用域的，只能在当前语句块中访问调用 let实质上就是为了避免污染全局的设计的，希望在某个语句结束后销毁该变量，而不会影响语句外部的变量 const实质就是为了保证该变量始终不变而设计的，使用const声明的变量，不能进行修改，否则会抛出错误 变量解构 ES6允许从数组或者对象中获取值，来对变量进行赋值，这个又被称为解构，例如： let [a,b,c] = [1,2,3] 会根据位置的关系来进行变量的赋值，格式一定要相同，否则可能获取undefined...

ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据 关于XMLHttpRequest对象（构造函数）的用法：https://zhizheng123.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....