## CookieStore API 目前, 浏览器可用的存储方式有 `cookie`/`sessionStorage`/`localStorage`/`IndexedDB`, 后三者都暴露了十分友好的 API 供开发者访问, 只有 cookie 例外. 回想一下, 平时我们都是怎么操作 cook... ...继续阅读 (48)

一、javascript 由三部分组成 1.ECMAScript（核心） 它规定了语言的组成部分：法语，类型，语句，关键字，操作符等等。 2.DOM（文档对象模型） DOM 把 ...继续阅读 (25)

一、javascript 由三部分组成 1.ECMAScript（核心） 它规定了语言的组成部分：法语，类型，语句，关键字，操作符等等。 2.DOM（文档对象模型） DOM 把 ...继续阅读 (19)

调试方法使用safari自带调试，需连接数据线，chrome同理，更多详情请查看：Safari和Chrome浏览器真机调试方式二，使用spy-debugger调试调试工具spy-debugger用来调试安卓、IOS 、webview 等 H5页面适配问题，抓包的话主要用在webview，调试页面适配spy-debugger还是很方便的，不需要连接数据线，直接可以访问多人同时调试。使用说明安装：win 下=》npm install spy-debugger -gmacOS 下=〉sudo npm install spy-debugger -g启动命令行输入：spy-debugger上手调试必备条件手机和电脑在同一wifi下命令行输入：spy-debuggerwin或macOS下如果启动不了命令，请关闭防火墙后重试设置当前手机http代理，如上图打开的端口，默认是9888，然后是自己当前本机的ip地址Android设置代理步骤：设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动iOS设置代理步骤：设置 - 无线局域网 - 选中网络 - HTTP代理手动ios需要单独安装证书Safari访问地址cert 安装，允许，安装，输入密码，完成即可如何访问设置好端口后，手机浏览器输入spy-debugger启动时的ip和本地启动项目的端口比如：当前启动的ip是： ...继续阅读 (9)

一、React 组件是什么？ 组件，从概念上类似于 javascript 函数，他接受任意入参（props），并返回作用于描述页面展示内容的 React 元素。 组件允许你将 UI 拆分为独立可复用的代码片 ...继续阅读 (12)

一、React 组件是什么？ 组件，从概念上类似于 javascript 函数，他接受任意入参（props），并返回作用于描述页面展示内容的 React 元素。 组件允许你将 UI 拆分为独立可复用的代码片 ...继续阅读 (17)

Github: https://github.com/lydiahallie/javascript-questions 相当不错的一个 Github 仓库，javascript questions ，作者每周都会发布一些有关 javascript 的题目，虽然不难但是考察细节，刷了一会，其实一些很简单的问题，结果因为细节思考不到位直接出错。 引用作者的话：我在我的 Instagram 上每天都会发布 JavaScript 的多选问题，并且同时也会在这个仓库中发布。 从基础到进阶，测试你有多了解 JavaScript，刷新你的知识，或者帮助你的 coding 面试！ ...继续阅读 (9)

Github: https://github.com/lydiahallie/javascript-questions 相当不错的一个 Github 仓库，javascript questions ，作者每周都会发布一些有关 javascript 的题目，虽然不难但是考察细节，刷了一会，其实一些很简单的问题，结果因为细节思考不到位 ...继续阅读 (12)

Github: https://github.com/lydiahallie/javascript-questions 相当不错的一个 Github 仓库，javascript questions ，作者每周都会发布一些有关 javascript 的题目，虽然不难但是考察细节，刷了一会，其实一些很简单的问题，结果因为细节思考不到位 ...继续阅读 (11)

JavaScript 早期的规范不统一，也没有严格的标准，再加上它的语法灵活多样，有些看起来就不正确的代码却能正常执行，一些看起来符合逻辑的代码，运行结果却相差十万八千里。这些问题在日常开发中经常会导致 BUG，更重要的是，很多面试官会把它们拿出来当考验咱们 JS 工程师的能力。 ...继续阅读 (40)

转载于：https://github.com/petehunt/react-howto，react 开源作者对于 react 框架的一个学习路径的建议，个人感觉还是相当不错的学习路线 如何学习 React? 如果你是一个 React (或者前端) 新手，出于以下的原因，你可能会对这个生态圈感到困惑： React 的目标群体历来是喜欢尝试新事物的开发者和前端专家。 Facebook 开源的内容是应用在他们的实际应用中，因此他们没有关注那些比 Facebook 小的工程需求。 现有的 React 指引水平参差不齐。 在本文中，我会假设你已有使用 HTML, CSS 和 JavaScript 开发网页的基础。 为什么要听我的？ 关于 React, 现在已经有大量的相互冲突的建议了，为什么要听我的？ 因为我是在 Facebook 构建并开源 React 的最初成员之一。现在我离开了 Facebook 并加入了一家初创公司，所以我也不会站在 Facebook 的立场上来表态。 如何踏入 React 生态圈 所有的软件都是建立在某个技术栈之上的，你需要对整个技术栈有足够深入的理解，才能建造你的应用。为什么 React 生态圈的工具似乎总让人感觉压力山大呢，因为它总是以错误的顺序被解释： 你应该按照以下的顺序进行学习，而不是跳着学或者同时学习: React npm JavaScript“打包工具 ...继续阅读 (9)

时间倒回到两年前，当时的我刚刚结束实习返校：闲着没事又开始折腾起博客，那时博客才更换成 SPA 没多久，由于 Bug 太多，主题各地方的细节我也不是太满意，体验了一段时间满足了新鲜感之后，心里忽然升起了一种对折腾博客的倦怠感。于是我还是换回了原来的 Material 主题，这一用就用了两年。直到前段时间，Github 提示博客仓库有好几个 CVE 的漏洞，作为一个强迫症，自然是想修复这些漏洞，然而我发现这些漏洞是博客使用的一些 Hexo 插件的依赖造成的，有些插件作者都不再维护了，于是我便想弃用掉这些插件，找寻新的代替品；可又转念一想，就算找到了代替品，这种情况也还是会发生——毕竟我不能指望每一个插件的作者都不弃坑。权衡利弊之后，我决定从根源处解决问题——如果没有 Hexo，自然也就不会有插件依赖的问题了，因此我弃用掉了从建站伊始就使用的 Hexo 框架，转而投向 Hugo 的怀抱。Why Hugo?Hugo 并不像 Hexo 提供各种插件用来增强或修改框架本身的功能，不过好在 Hugo 框架本身的功能已经足够的多了，我只需要在上面做一些修改即可——这也正好符合我的需求，根据我自己的想法定制、维护，也就解决了让我弃用 Hexo 最根本的问题。其实早在两年多前我就有尝试过将博客换成 Hugo，只是当时逛遍了 Hugo 的主题，发现没一个能打的，原因也很简单：Hugo 是基于 Gola ...继续阅读 (37)

时间倒回到两年前，当时的我刚刚结束实习返校：闲着没事又开始折腾起博客，那时博客才更换成 SPA 没多久，由于 Bug 太多，主题各地方的细节我也不是太满意，体验了一段时间满足了新鲜感之后，心里忽然升起了一种对折腾博客的倦怠感。于是我还是换回了原来的 Material 主题，这一用就用了两年。直到前段时间，Github 提示博客仓库有好几个 CVE 的漏洞，作为一个强迫症，自然是想修复这些漏洞，然而我发现这些漏洞是博客使用的一些 Hexo 插件的依赖造成的，有些插件作者都不再维护了，于是我便想弃用掉这些插件，找寻新的代替品；可又转念一想，就算找到了代替品，这种情况也还是会发生——毕竟我不能指望每一个插件的作者都不弃坑。权衡利弊之后，我决定从根源处解决问题——如果没有 Hexo，自然也就不会有插件依赖的问题了，因此我弃用掉了从建站伊始就使用的 Hexo 框架，转而投向 Hugo 的怀抱。Why Hugo?Hugo 并不像 Hexo 提供各种插件用来增强或修改框架本身的功能，不过好在 Hugo 框架本身的功能已经足够的多了，我只需要在上面做一些修改即可——这也正好符合我的需求，根据我自己的想法定制、维护，也就解决了让我弃用 Hexo 最根本的问题。其实早在两年多前我就有尝试过将博客换成 Hugo，只是当时逛遍了 Hugo 的主题，发现没一个能打的，原因也很简单：Hugo 是基于 Gola ...继续阅读 (52)

浅拷贝1、简单实现for(let prop in obj){ obj2[prop] = obj[prop]; }2、assignObject.assign(obj2,obj);3、拓展运算符obj2 = {obj};4、let tmp = JSON.stringify(obj); obj2 = JSON.parse(tmp);深拷贝1、function deepClone(origin){ let target = origin.constructor === Array? []:{};//判断复制源为什么类型 for(let prop in origin){ if(origin.hasOwnProperty(prop)){//是否为原型链上的属性 if(typeof origin[prop] == "object"){//判断是否为基本数据类型 origin[prop].constructor === Array ? target[prop] = []:target[prop] = {}; target[prop] = deepClone(origin[pro ...继续阅读 (62)

WKWebView有一个内容交互控制器，该对象提供了通过JS向WKWebView发送消息的途径。需要设置MessageHandler，我把这个功能简称为MessageHandler。首先了解下iOS开发中需要调用的方法- (void)addScriptMessageHandler:(id)scriptMessageHandler name:(NSString *)name;和- (void)removeScriptMessageHandlerForName:(NSString *)name;下面看下如何调用添加MessageHandler[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"showAlert"];移除MessageHandler[self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"showAlert"];JS调用window.webkit.messageHandlers..postMessage()这个name就是设置MessageHandler的第二个参数window.webkit.messageHandlers.getStrin ...继续阅读 (124)

当代码出现有规律的重复之后，可以利用函数，定义变量，调用方法，不用去重复的改动代码，只需要进行函数的修改。基本上所有的高级语言都支持函数，javascript 也 ...继续阅读 (7)

当代码出现有规律的重复之后，可以利用函数，定义变量，调用方法，不用去重复的改动代码，只需要进行函数的修改。基本上所有的高级语言都支持函数，javascript 也 ...继续阅读 (9)

当代码出现有规律的重复之后，可以利用函数，定义变量，调用方法，不用去重复的改动代码，只需要进行函数的修改。基本上所有的高级语言都支持函数，javascript 也不例外，它可以像变量一样被使用，方便且强大，因此本文对 js 函数进行系统的学习，并在学习过程中做了详细的笔记以及样例。 一、函数的定义和调用 1.定义函数 function abs(x) { if(x = 0) { return x; } else { return -x; } } function()指出这是一个函数定义 abs是函数的代码 (x)里面的内容是函数的参数 {...}的内容是函数体，可以包括若干语句，甚至可以没有任何语句 函数体中，必须以return结尾，才可以把结果返回，如果不用 return 结尾的话，就会返回 undefined 也可以直接定义一个对象，这个对象也可以写成函数的方式 var abs = function (x) { if (x>=0) { return x }else { return -x } }； function(x)就是一个匿名函数，这个函数被赋值给了变量abs，所以可以直接通过abs调用该函数 这两种定义函数的方式完全一致，，但是用变量定义的时候需要注意，要用;结尾，代表函数语句结束 2.调用函数 调用函数时，直接传参即可 abs(10)，根据函数定义，将 10 代入进去即 ...继续阅读 (11)

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。 JSON 采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的 ...继续阅读 (43)

! ! 上图来自维基百科，黑夜模式会导致文字看不清楚，麻烦大家使用日间模式阅读啦 ! IEEE-754 标准是一个浮点数标准，存在 32、64、128 bit 三种格式（上面两幅图分别是 32 bit 和 64 bit 的情况，结构是一致的）。无论看起来是整数还是小数，JavaScript 中的 `number` 都是 64 位浮点数（也就是常说的“双精度”）。 本文将以 64 位举例讲... ...继续阅读 (41)

为什么添加SameSitecookies面临的两个问题：用户隐私 / CSRF(跨站请求伪造)明确cookie的使用范围，减少被攻击的可能Cookie 的设置步骤客户端发送 HTTP 请求到服务器当服务器收到 HTTP 请求时，在响应头里面添加一个 Set-Cookie 字段浏览器收到响应后保存下 Cookie之后对该服务器每一次请求中都通过 Cookie 字段将 Cookie 信息发送给服务器。cookie的一些属性Name/Value用 JavaScript 操作 Cookie 的时候注意对 Value 进行编码处理。ExpiresExpires 用于设置 Cookie 的过期时间。比如：Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;当 Expires 属性缺省时，表示是会话性 Cookie，像上图 Expires 的值为 Session，表示的就是会话性 Cookie。当为会话性 Cookie 的时候，值保存在客户端内存中，并在用户关闭浏览器时失效。需要注意的是，有些浏览器提供了会话恢复功能，这种情况下即使关闭了浏览器，会话期 Cookie 也会被保留下来，就好像浏览器从来没有关闭一样。与会话性 Cookie 相对的是持久性 Cookie，持久性 Cookies 会保存在用户的硬盘中，直至过期或者清除 ...继续阅读 (18)

模版字符串概念和用途模板字符串使用反引号 () 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法（${expression}）的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数，该函数负责将所有的部分连接起来，如果一个模板字符串由表达式开头，则该字符串被称为带标签的模板字符串，该表达式通常是一个函数，它会在模板字符串处理后被调用，在输出最终结果前，你都可以通过该函数来对模板字符串进行操作处理。在模版字符串内使用反引号（`）时，需要在它前面加转义符（\）。简单的说模版字符串就是用来处理一些特殊的字符、数据展示、react模版时用来占位的一种特殊写法，以一种更优雅的方式来表示。123456789101112131415// 旧方式var a = 5;var b = 10;console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');// 新方式var a = 5;var b = 10;console.log(`Fifteen is ${a + b} andnot ${2 * a + b}.`);// 最终结果// "Fifteen is 15 and// not 20."语法形式12345678910111213141516// 单行字符 ...继续阅读 (6)

let 、var 、 constvar、let、const的区别:使用方法块级作用域不存在变量提升暂时性死区不可重复声明变量let、const声明的全局变量不会挂在顶层对象下面使用方法let已经完全可以取代var，定义变量const一般用来定义：常量、声明匿名函数、箭头函数等开发时基本默认使用 const，只有当确实需要改变变量的值的时候才使用 let（比如定义一个组件或map遍历时使用const定义后在调用，使代码更结构化、可读性变高）块级作用域块级声明用于声明在指定块的作用域之外无法访问的变量。let 和 const 都是块级声明的一种。ECMAScript 6 引入了块级作用域，块级作用域存在于：函数内部和当前块中(字符 { 和 } 之间的区域 =》if(){ xxxxxx 此处也是块级 })块级作用域可以无限嵌套块级作用域的真正作用是使代码分割成块（eg：3）块级作用域声明函数，最好使用匿名函数的形式。123456789{{{{{let test = 'Hello World'}console.log(test); // 报错 拿不到子作用域的变量}}}};Eg3：for (let i = 0; i < 3; i++) {let i = 'abc';consol ...继续阅读 (14)

React中提出一个重要思想：状态改变则UI随之自动改变，而React框架本身就是响应用户状态改变的事件而执行重新构建用户界面的工作，这就是典型的响应式编程范式，下面我们总结一下React中响应式原理：开发者只需关注状态转移（数据），当状态发生变化，React框架会自动根据新的状态重新构建UI。React框架在接收到用户状态改变通知后，会根据当前渲染树，结合最新的状态改变，通过Diff算法，计算出树中变化的部分，然后只更新变化的部分（DOM操作），从而避免整棵树重构，提高性能。React Native上文已经提到React Native 是React 在原生移动应用平台的衍生产物，那两者主要的区别是什么呢？其实，主要的区别在于虚拟DOM映射的对象是什么？React中虚拟DOM最终会映射为浏览器DOM树，而RN中虚拟DOM会通过 JavaScriptCore 映射为原生控件树。JavaScriptCore 是一个JavaScript解释器，它在React Native中主要有两个作用：为JavaScript提供运行环境。是JavaScript与原生应用之间通信的桥梁，作用和JsBridge一样，事实上，在iOS中，很多JsBridge的实现都是基于 JavaScriptCore 。而RN中将虚拟DOM映射为原生控件的过程中分两步：布局消息传递； 将虚拟DOM布局信息传递给原生；原生根 ...继续阅读 (12)

配置VS配置文件macos，preference=》setting=〉搜索 settings.json 点击Edit in settings.json添加配置“javascript.validate.enable”: false“typescript.validate.enable”: false, ...继续阅读 (12)

简单的说 Node.js 就是运行在服务端的 JavaScript。 Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。 Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。 第一个Node.js程序：Hello World！ 脚本模式 以下是我们的第一个Node.js程序： 实例 console.log("Hello World"); 保存该文件，文件名为 hello ...继续阅读 (33)

image from pixabay.com 静态类型正在逐渐成为潮流， 2010 年之后诞生的几门语言 Go、Rust、TypeScript 等都走了静态类型路线。 过往流行的一些动态语言（Python、PHP、JavaScript）也在积极引入语言新特性（Type Hint、TypeScript）对静态类型增强。 我曾使用 Python 开发规模较大的项目，感受过动态语言在工程规模变大时候带来的困难： 在重构阶段代码回归成本异常之高，很多历史代码不敢动。 后来技术栈转到 ...继续阅读 (77)

原文地址：Iterating Over JavaScript Object Entries and their Performance - 5 Techniques 返回对象所有**可枚举**的键值对，**不会**追寻原型链上的 key ```javascript let obj = { key1: "value1", key2: "value2", key3: "value3",... ...继续阅读 (48)

这算是真正魔改内核的第一次讲解。 TyranoScript 是一种领域专用语言，但是运行在浏览器，功能肯定还是 JavaScript 实现的。要把脚本运行起来需要先把脚本“分词”，然后按规则把词组合成一组。（这个功能的代码在 `kag.parser.js` 文件里） 完事之后得到的就是默认在控制台打印的信息： ! 在读取这样的对象之后，框架就会根据不同的 tag 运行不同的函数，而这... ...继续阅读 (41)

§引子定义瓶颈前/客户端框架的瓶颈后/服务端框架的瓶颈TypeScript 语言的瓶颈打包工具的瓶颈未来前端开发的瓶颈到底在哪里，前端技术是否已经走到一个十字路口，全栈化的系统架构是否能改变目前的窘境？本文将根据作者自身的开发经历谈谈当下前端开发中遇到的一些问题和想法。¶引子近两年我一直在思考的一个问题：如果前端不用考虑性能问题、不用考虑终端兼容性、不用考虑历史遗留问题，甚至不用考虑具体技术实现...如果我们假设自己有丰富的技术储备，同时不用考虑上面的问题，那么前端究竟能做出什么样有价值的东西？我们把时间拉到 5 年前...如果你「那时」还是前端开发的话。上面的问题肯定是你不得不面临的典型问题。甚至是当时前端开发的意义所在。你会为了精确还原设计稿熬夜加班，从而练就一双像素眼；你会为了解决几个字节的性能问题研究优化方案，以至看懂了每一个 HTTP 请求头；你也会因为某些技术问题和同事理论，最终到达到与产品谈笑风声的境界；...但是随着时间的推移，前端技术的更新迭代，以及互联网的发展。你会发现这些曾经的问题似乎已经不再是问题，或者说在能预见的未来可能不再是问题。页面加载性能可能不再是问题，技术上有了 HTTP2，基建上有了 5G，硬盘也越来越快。兼容性问题慢慢淡出大家的视角，Chrome 一家独大，微软也不得不向它靠拢。很多前端开发已经具备了后端（或者说多端）的技术能力，技术储备也可能 ...继续阅读 (8)