cdcdhj的博客

动态 nonce 的主要目的是确保每次加密时使用的 nonce 都是唯一的，从而防止重放攻击（replay attacks）和确保加密的随机性。在你的原始代码中，nonce 的前 8 字节是基于时间戳和随机偏移生成的，后 4 字节是随机填充的。加密时：仍然生成动态 nonce（前 8 字节基于时间戳 + 随机偏移，后 4 字节随机填充）。安全性：修改后的代码仍然保持了动态 nonce 的唯一性和随机性，因此安全性没有降低。重放攻击防护：由于 nonce 仍然是动态生成的，重放攻击的风险仍然被有效避免。

在 Service Worker 中，caches.put(request, response) 和 caches.add(request)/caches.addAll(requests) 方法都用于将资源添加到缓存中，但它们的使用场景和目的略有不同。它允许你在捕获到网络请求并从网络获取资源后，将这些资源存储到缓存中，以便后续的请求可以直接从缓存中获取。预先缓存：这些方法用于在 Service Worker 安装时预先缓存资源，这样在页面加载时可以直接从缓存中获取这些资源，而不需要等待网络请求。

新的 Service Worker 将会注册，并且 install 事件将会使用新的缓存名称来缓存资源——>这句话的意思就是让你关闭测试中的页面，重新再打开，不然，看不到修改后的页面，因为是缓存页面；2、编写 Service Worker 脚本 (serviceWorker.js): 在 Service Worker 中，你可以监听 install 事件来缓存资源，以及 fetch 事件来拦截网络请求并提供缓存的资源。//如果你要删除所有已经注册的生效的service worker,可以用下面的。

/这里返回的期约是navigatorWorkerRegistration对象。//注册服务工作线程；scope表示手动指定作用域范围。//子线程navigatorWorker.js。'service worker注册失败'简单开启服务工作线程是怎么开启的。

在 Web Workers 中加载其他脚本，通常有两种方式：使用 importScripts() 方法和使用 ES6 模块的 import 语法。全局作用域：通过 importScripts() 加载的脚本中的变量和函数会成为 Worker 的全局作用域的一部分。作用域：importScripts() 加载的脚本共享全局作用域，而 import 导入的模块有自己的作用域。加载方式：importScripts() 是同步的，而 import 是异步的。现代语法：使用 ES6 模块语法，支持模块化开发。

下面是一个简单的示例，展示了如何在主线程和 SharedWorker 之间相互传递信息，以及如何在两个不同的主线程（比如两个不同的网页或者同一个网页的两个不同窗口）之间通过 SharedWorker 传递信息。点击你想要检查的 SharedWorker 实例旁边的 “inspect” 链接，这将打开一个新的开发者工具窗口，其中包含了 SharedWorker 的控制台输出。在 Chrome 浏览器地址栏输入 chrome://inspect，进入 Chrome 的开发者工具界面。//接收子线程返回的数据。

/同样是emptyWorker.js。//显示结果，并在外部给内部的函数赋值。//给线程内部的函数赋值，以对象形式。//获取信息，显示最终计算的值。这里是给线程内部的函数参数赋值。在工作线程内部计算后输出数据。//创建worker线程文件。

异步动态导入模块中的代码是ES6中使用模块化的方法，方便按需加载模块。//这是模块(exportModule.js)有两个函数被导出。//然后在html代码中动态导入并运行。//异步动态导入模块代码，返回的是期约。

/计算加载页面共用时间；//现实生成过程过应该是以用户关闭页面；然后把收集数据传递给后端，用unload事件完成。//这里是加载完成各类要素如：CSS、图片、javascript等。//将收集所有数据，存储进frondEndData对象中。//这里是以点击按钮，然后把数据传递给后端；//停留时间，每秒种seconds增加1。//页面加载完成后，收集用户信息。//利用fetch传递给后端。//转换为json格式。'连接服务器发生错误'//访问的日期和时间。//取消停留时间变量。//将停留计时器删除。

在这个前端代码中，我们使用fetch API请求PHP脚本，并获取二进制数据。然后，我们将ArrayBuffer转换为字符串，以便在JavaScript中使用。在PHP中，你可以将字符串或其他数据类型转换为二进制数据，并通过HTTP响应发送给前端。

请注意，这个示例中的 newResponse.json() 是为了演示如何使用 Response 对象。在实际应用中，通常不需要手动解析 Response 对象中的JSON，因为 fetch() 已经为我们处理了这一步。然后，我们创建一个新的 Response 对象 newResponse，其中包含自定义的JSON字符串和一些自定义的响应头。这个新的 Response 对象具有200状态码和"OK"状态信息。最后，我们解析这个新的 Response 对象中的JSON数据，并在控制台中打印出来。

4、定制行为：元数据可以用来存储配置信息，这些信息可以用来定制节点的行为，例如在不同的条件下应用不同的逻辑。10、数据绑定：在数据绑定的场景中，元数据可以用于存储绑定的详细信息，比如数据的来源和更新机制。2、状态管理：在复杂的应用中，节点的状态可能需要被追踪和管理，元数据可以用来存储这些状态信息。1、数据封装：元数据可以帮助封装节点相关的信息，使得这些信息可以随着节点一起被操作和传递。6、交互性：在用户界面编程中，元数据可以用来存储与用户交互相关的信息，比如按钮的点击状态。将这段js代码插入前端页面中。

验证通过后，利用fetch异步传递方法将formdata数据传给后端；后端再进行验证返回数据。这里主要利用生成器函数生成配置的表单字段；验证用户填写的数据信息；后端代码formfieldgenerator.php。formfieldgenerator.js文件。//有端index.html。

生成器函数生成表单字段是非常合适的用法,避免你要用纯javascript做后台时频繁的制作表单，而不能重复利用。//这里是javascript部分，formfiled.js。//前端生成表单index.html。

跨源请求，也称为CORS（Cross-Origin Resource Sharing）请求，是Web开发中常见的一种需求，允许一个网页的JavaScript代码向与该网页不同源的服务器发出HTTP请求。// 允许的HTTP方法这几种。这里做测试的是前端http://127.0.0.1:5500/fetchcors.html。

利用fetch方法和FormData对象上传多张图片。formdata()对象可以序列化多张图片。

前端fetchget.html把我们想要发送的数据以get的形式发到后端；如:foo=bar&baz=que格式的数据发送给后端。//这里是后端处理数据和返回数据。

这里的前端http://127.0.0.1:5500/jsonp.html。后端：http://xuejs.xyz/jsonp.php。回调：是在页面接收到响应之后应该调用的函数。jsonp格式包含两个部分：回调和数据；数据：作为参数传给回调函数的JSON数据。

/FormData对象是XMLHTTPRequest level2新增的类型，它可以自动序列化表单内容，不再需要我们去写序列化表单方法；FormData()即可以直接把整个表单给它，也可以分别使用append(‘字段’,‘值’)方法给FormData()；现在就结合xhr写一个简单示例，怎么把表单传递给后端。

在 Web 应用中实现令牌失效（Token Expiration）通常涉及到两个方面：客户端的令牌使用和服务器端的令牌验证。

deriveKey 方法的完整示例，演示如何使用 HMAC 作为密钥派生函数（KDF）来从一个给定的秘密（如密码）派生出一个新的 AES 加密密钥。

crypto.subtle.importKey：导入密钥的函数，需要指定密钥格式（“spki” 或 “pkcs8”）、密钥材料、算法参数、是否可导出以及密钥的用途（如 “encrypt” 或 “decrypt”）。importPublicKey 和 importPrivateKey：将 PEM 格式的密钥字符串转换为二进制格式，并使用 crypto.subtle.importKey() 导入。generateAndExportKeyPair：生成 RSA 密钥对并导出为 PEM 格式。

generateKey 函数的第三个参数是一个数组，指定了密钥对的使用方式，这里我们指定了 “encrypt” 和 “decrypt”。密钥生成和导出操作是异步的，因此需要使用 async/await 或者 .then() 和 .catch() 来处理。exportKey 函数的第一个参数决定了密钥的导出格式，“spki” 用于公钥，“pkcs8” 用于私钥。出于安全考虑，密钥材料不应该以明文形式打印或存储。示例中的 console.log 只是为了演示目的。

直接上代码 说明javascript代码直接嵌入在html里。

第二个参数的策略（利用ByteLengthQueuingStrategy【按字节计量】和CountQueuingStrategy【按元素数量计量】接口去定义策略）两种。start(controller)：在WritableStream对象完成构造后立即调用controller method执行一次。write(chunk,controller)：每当一个新的chunk准备写入接收器的时候，将调用方法。abort(reason)：当写入流被中断或者写入流进入错误状态的时候，调用该方法。

这里是同域名下，getmessage.html（发送信息）传递消息给index.html（收到信息，并回传收到信息）这里 是index.html页面中的test.js代码。//这里是getmessage.html页面。index.html页面。

以前我们主要是用for()来循环节点中的子节点，现在可以用TreeWalker()来进行历遍。//比如历遍下面的input元素。

【代码】javascript识别浏览器类型。

【代码】javascript代理construct()和apply()方法的写法和调用。

即便是Math.floor对象没有apply方法，也是会转变为上面的格式，这就是call方法语法规定。任何函数都是Function类的对象实例，所以Math.floor方法对象具有apply方法。（2）.apply方法参阅JavaScript apply()一章节。（1）.call方法参阅JavaScript call()一章节。上面的代码就很好理解了，就是一个普通的apply方法的应用。[JavaScript] 运行代码。

【代码】javascript对set集合的并集、交集、差集、对称差集的写法。

不过定型数组API提供了很多工具可以手动构建。定型数组没有原生的拼接能力。

日期转化为时间戳，主要用valueOf()来进行转化为毫秒时间戳，getTime()IOS系统无法解析转换，所以都有valueOf()

将类或函数类加入到数组中，然后从数组中查找函数名，如果存在即调出调用，比如你有很多的模块类，就可以加入到这个单例模块中，然后进行管理和调用。这种模块主要是管理应用程序级的信息和调用。

/这种是必须用new实例化对象，再返回匿名函数对象。javascript的单例模式：即只有一个实例；匿名函数做为公共接口，调用私有变更和私有函数。//这种是字面量定义了单例对象的公共接口；可看看他们接口只间的区别和实例化调用的区别。模块模式是在单例模式上扩展而来的。字面量对象调用私有变更和私有函数。

什么情况下可以使用yield，如果你后端传过来的数据量较大，你可以使用yield来进行懒加载，避免一次性的加载对前端造成卡顿，或长时间渲染等待，比较如说加载10万或几十万条数据时，前端一方面要读取一方面还要渲染。yield生成器,在函数名前加*号，返回时用yield。

看了网上很多解决input的复选框checked，在第二次勾选或全选反选时，出现选中了却不显示勾勾的，都是用jquery的方法去解决，要么prop(),要么attri(),对于只用纯javascrit的前端人员，非常不方便。也有用纯javascript解决的方法，但是非常的复杂和不方便，有的上下各一个复选框来判断，有的全选 ,反选,不选,取消各一个框，//二次点击全选和反选，没有出显勾，是因为没有搞明白checked的特性和属性的问题，特性和属性有时候是完全不一样的，有时候同样。//点击全选和反选框。

//模仿jquery选择器样式，只需要写元素名或css类及id都可以选择到元素

/给每个历史词赋于点击事件，点击词后及给于input框赋值，顺便隐藏历史词框。//将data数组包含的词以数组形式添加到以keywords为对象当中去。//数组为10个值，如果超过10个，则弹出第1个，方便添加接下来的词。//在data数组中没有找到这个值，则将这个搜索词加入data数组中。//将得到的历史词添加到对应的li元素中去。//创建5个li元素，插入div元素中。//也就是设置keywords对象的值。//得到keywords对象的值。//获取input框中的值。//增加历史词的连接。

/这里type同样表示自定义事件的种类，event表示传递过来的事件，data:str表示传递的数据。//这里re(event)中的event表示从data事件中传递过来的event。//event这里表示从re()函数的btn事件中传递过来的点击事件。//type表示你自定义事件的种类，message表示触发后的信息。//执行自定义事件的函数，也就是触发自定义事件的函数。//注册自定义事件，也就是自定义事件的处理的函数。//处理getna事件的函数。//执行自定义的事件的函数。//触发一般事件的信息。