大魔王sama-CSDN博客

原创 Chrome 同站策略（samesite）问题探究

项目背景需求是一个类似 Disqus 的用户评论系统，用户评论模块使用 Iframe 嵌入到其他网站；但是用户属于公共的用户系统，所以使用单点登录，需要用到登录系统生成的 Cookie。问题及探究用户评论模块通过 Cookie 调取用户信息时，控制台提示：this set-cookie didnot specify a "sameSite" attribute and was defaulted to "sameSite=Lax" and broke the same rules specified

2021-10-12 15:02:33 1738

原创 Vue 集成 CKEditor5 踩坑记录

最近项目中有编辑文章的需求，需要用到富文本编辑器，在查看个各种编辑器之后，发现只有 CKEditor5 的功能是比较符合需求的。然而，在使用过程中发现，坑是真的多… 这里记录下填坑经历，希望能对其他小伙伴有帮助。CKEditor5 介绍编辑器种类CKEditor5 有 5 种常用编辑器，分别是：ClassicBallonBallon BlockInlineDocument具体区别可以参照官网：https://ckeditor.com/ckeditor-5/demo/以上 5 种编辑器

2020-11-25 14:19:23 12200 5

原创全球语言标准码及其国家或地区对照

最近项目要求实现国际化，所以了解了一下全球语言标准码。我们平时看到的标注都是 zh_CN ，en_US 这种样子的，根据查阅发现，这种标注由两部分组成：ISO-639 （语言码）ISO-3166 （国家或地区码）组成形式就是：语言码_国家码ISO-639 语言标准码语言标准码AbkhazabAfaraaAfrikaansafAkanakAlbaniansqAmharicamArabicarAragonesean

2020-11-24 15:31:12 5794

原创小程序学习 02 - 数据绑定和渲染

数据绑定wxml 文件中所使用的数据均来源于同名 json 文件中 Page() 里的 data 对象基本使用标签内容使用 {{ }} 将变量或者表达式包起来，一般作用于标签中间的内容：<view class="temp"> {{ temp }} </view>Page({ data: { temp: "hello world" }})标签属性在属性中使用变量或表达式的部分使用 {{ }} 包裹起来：<view data-id="id-{{ da

2020-10-04 21:05:25 1111

原创小程序学习 01 - 目录结构和配置

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Mar

2020-10-04 20:58:04 696

原创 2020年前端面试题·五

目录localStorage 和 sessionStorage 在跨页面存储中的区别无痕模式下 webStorage 报错解决方案DOM 事件的处理过程，e.target 和 e.currentTarget 区别localStorage 和 sessionStorage 在跨页面存储中的区别在不同情况下，不同页面中的 localStorage 和 sessionStorage 的值也不同：如果两个页面中访问的网站同源，那么两个页面中的 localStorage 值相同，但是 sessionStora

2020-09-19 16:58:55 243

原创 Vue 自定义指令

基本配置除了核心功能默认内置的指令，Vue 也允许注册自定义指令。我们可以使用 Vue.directive() 【全局注册】或者是在组组件内新增选项：directive: {} 来注册自定义指令。全局注册Vue.directive('demo', { inserted(el, binding) {}})组件内注册directive: { demo: { inserted(el, binding) {} }}钩子函数每个指令定义对象可以提供如下几个钩子函数 (均为可选)

2020-09-19 16:57:33 227

原创 HTTP缓存

文章目录HTTP缓存强缓存ExpiresCache-Control协商缓存Last-Modify / If-Modify-SinceETag / If-None-Match用户行为与缓存HTTP缓存HTTP缓存可以分为强缓存和协商缓存，浏览器请求一个页面的简单流程如下：浏览器会根据资源的 HTTP 头信息来判断是否命中强缓存。如果命中则直接在缓存中获取资源，并不会将请求发送到服务器。如果未命中强缓存，则浏览器会将请求发送到服务器，由服务器来判断资源是否失效，如果失效就将返回最新资源，没有失效就返回

2020-09-16 13:32:06 94

原创宏任务和微任务

JS 本质是单线程的，通过回调函数来实现异步操作。也就是说，在 JS 中，立即执行的代码叫做同步任务；过了一段时间之后，满足了一定条件时才执行的代码叫做异步任务。按照这种分类，JS 的执行机制是这样的：首先判断 JS 是同步还是异步，同步就进入主进程，异步就进入 event table异步任务在 event table 中注册函数，当满足触发条件后，被推入 event queue当主进程中的任务执行完时，将 event queue 的任务推入主进程好的，我们现在来看一个例子：setTime

2020-09-15 17:00:11 1823

原创 React 学习06 - React 组件生命周期

React 的每个组件都有自己的生命周期，从声明、挂载到卸载销毁，React 给我们提供了在不同生命周期节点进行操作的生命周期钩子，他们将在组件达到某个特定时刻的时候被触发。生命周期图谱挂载当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：constructorrendercomponentDidMount更新当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：rendercomponentDidUpdate卸载当组件从

2020-08-07 14:57:23 99

原创 React 学习05 - React 组件传值

组件化开发必然会需要组件间传值，我们通过一个案例来学习组件传值，需求如下：分析和实现首先，我们可以将需求部分分为三个组件：父组件、新增组件（输入框部分）、和列表组件// App - 父组件class App extends React.Component { render() { return ( <div> <h2>数组遍历</h2> <Add /> <List /> </div>

2020-08-06 11:21:28 212

原创 React 学习04 - React 组件开发

组件的声明和渲染组件的声明有两种方式：工厂函数组件（简单组件）function MyComponent() { return <h2>工厂函数组件（简单组件）</h2>}ES6 类组件（复杂组件）class MyComponent2 extends React.Component { // 构造函数待会用 // constructor() {} render() { return <h2>ES6 类组件（复杂组件）&l

2020-08-04 16:59:12 109

原创非重复字符串长度

问题：给定一个字符串，找出最长的不具有重复字符的子串的长度。例如，“abcabcbb”不具有重复字符的最长子串是“abc”，长度为3。对于“bbbbb”，最长的不具有重复字符的子串是“b”，长度为1。解：function lengthOfLongestSubstring(s) { let obj = {} let max = 0 let num = 0 for (let i = 0; i < s.length; i++) { let k = s[i

2020-08-03 11:41:28 197

原创时间格式化输出（思路清奇）

要求：按所给的时间格式输出指定的时间格式说明：对于 2014.09.05 13:14:20yyyy: 年份，2014yy: 年份，14MM: 月份，补满两位，09M: 月份, 9dd: 日期，补满两位，05d: 日期, 5HH: 24制小时，补满两位，13H: 24制小时，13hh: 12制小时，补满两位，01h: 12制小时，1mm: 分钟，补满两位，14m: 分钟，14ss: 秒，补满两位，20s: 秒，20w: 星期，为 [‘日’, ‘一’, ‘二’, ‘三’, ‘四

2020-07-23 15:18:26 251

原创还能这么玩？（DOM节点查找）

今天在牛客网刷前端题的时候，遇到这么一个问题：查找两个节点的最近的一个共同父节点，可以包括节点自身。我一开始以为是在考察树的深度遍历和广度遍历，直到后来，我找到了一个方法：contains ，在 JS 中，这个方法是用来判断 DOM 元素的包含关系的。到这里，一切问题迎刃而解，什么递归，再见！现在我们只需要从其中一个节点开始，逐级向根节点进发，利用 contains 来判断当前节点是否包含另一个节点就妥了，代码如下：function commonParentNode(oNode1, oNode2)

2020-07-23 13:07:56 122

原创 React 学习03 - JSX 列表渲染

实例我们可以用一个例子来学习 JSX 的列表渲染，不说废话，直接上效果图：如图所示，这是一个 ul 列表，ul 列表的基本结构是：<ul> <li></li> <li></li></ul>所以说，我们需要将 ['Android', 'IOS', 'webApp', '微信小程序'] 中的每一项都写入一个 li 标签中并添加到 ul 中，分析完了，开始码代码，这里我们遇到了第一个问题，如何在 JSX 中遍历数组？，我

2020-07-21 14:32:39 196

原创 React 学习02 - JSX 的基本使用

使用 React 时，在引入了相关 JS 文件之后，通常要做两个步骤：创建虚拟 DOM引入虚拟 DOM（将虚拟 DOM 渲染到目标节点中）其中，JSX 语法是为了让我们更方便的执行第一步，那么在使用 JSX 之前，我们先来看一下原始方式是如何创建虚拟 DOM 的。原始方式创建虚拟 DOM利用原始方式，需要用到 React.createElement() 方法，要指定一些参数：第一个参数：标签名第二个参数：标签属性对象第三个参数：标签中的内容例如：let vDom = React.

2020-07-21 13:50:28 242

原创 React 学习01 - React 的基本使用

React 的基本概念React 是 Facebook 开发出的一款 JS 库React 特点React 不使用模板，使用组件React 不是 MVC 框架响应式，当数据发生变化，利用 render 方法重新渲染React 是一个轻量级的 JS 库React 原理虚拟 DOM...

2020-07-21 11:56:57 83

原创 Vuex 总结

Vuex 概述Vuex 用来管理全局数据，方便实现组件间的数据共享，数据集中管理有以下三点好处：易于后期开发和维护高效实现数据共享，提高开发效率能够实现数据实时同步注意：只有需要共享的数据才有必要存入 Vuex 中Vuex 的基本使用安装Vuex依赖包npm install vuex --save导入Vueximport Vuex from 'vuex'Vue.use(Vuex)创建 store 对象const store = new Vuex.Store({

2020-07-15 17:53:51 138 1

原创 Vue Router - 详细总结

路由的配置Vue 的特点是数据驱动和组件化，根据组件化的特点，我们可以很方便的用 Vue 来实现单页面应用程序。在 Vue.js 中，我们已经可以通过组件名来切换组件，但是这样做浏览器的地址栏内容不会发生变化，为了解决这一问题，我们可以引入 Vue Router 通过路由来标识组件，并且把路由带入到地址栏中。这里我们通常使用 hash (#) 形式来约定路由，因为 HTTP 请求中不会包含 hash (#) 相关的内容，所以单页面程序中的页面跳转主要用 hash (#) 实现。绑定路由（基础）首先我们

2020-07-15 17:17:21 131

原创 Vue 组件和插槽

Vue 组件组件是一个可复用的 Vue 实例且带有一个名字，所以要接收和 new Vue 相同的选项，例如 data 、methods 、computed 以及生命钩子函数等。注意：组件是一个全新的 Vue 实例，组件内部的选项不会相互影响。但是 data: {} 除外，因为如果 data 是一个对象，就不会构成作用域，每个组件的 data 都是共用一个存储地址，会互相影响。这时需要使用 data() { return {} } 的形式来形成作用域。组件必须只有一个根元素由于 HTML 不区分大

2020-07-10 11:07:20 2460

原创内外立方体旋转

效果：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D

2020-07-09 12:00:31 128

原创 Vue 使用注意

在 Vue 的使用过程中，应当注意以下几个问题：初始化数据当一个 Vue 实例被创建的时候，会将 data 对象中的所有 property 都加入到响应式系统中，当值发生变化时，视图也会随之响应。但值得注意的是，只有当创建前就已经存在于 data 对象中的 property 才是响应式的。也就是说，在已经被创建的 Vue 实例上新增一个 property ，这个property 不是响应式的。如果你知道你会在晚些时候需要一个 property，但是一开始它为空或不存在，那么你仅需要设置一些初始值。数组

2020-07-09 11:30:22 275

原创 Vue 生命周期钩子

每个 Vue 实例在从被创建到被销毁的过程中，都有 8 个必须要经历的阶段，这 8 个阶段组成了 Vue 的生命周期，Vue 在这几个阶段，都分别提供了对应的函数，这 8 个函数被叫做生命周期钩子，这给了用户在不同阶段添加自己的代码的机会。对于这 8 个阶段，官方给出了一张图示：分别是：beforeCreate ：没有创建 Vue 实例之前。可以制作加载动画created ：Vue 实例创建结束，页面还没有生成。此时可以请求页面所需数据，结束加载动画beforeMount ：页面还没有渲染出来

2020-07-09 10:43:06 138

原创 Vue.js --- transition 过渡动画

在 Vue 中，为了方便操作 DOM 的过渡和动画，Vue 封装了一个 transition 组件，以 Vue 专属标签的形式使用，在下列情形中，可以给任意元素或组件添加过渡/动画条件渲染（v-if）条件展示（v-show）动态组件组件根节点当插入或删除在 transition 组件中的元素时，Vue 会做以下处理：如果 transition 元素应用了 CSS 过渡 / 动画，在适当的时机添加或移除类名如果元素挂载了 JavaScript 钩子函数，在适当的时机调用如果既没有 CSS

2020-07-08 18:50:20 984

原创 Vue.js 常用修饰符汇总

事件修饰符.stop ==> 阻止冒泡.prevent ==> 取消默认行为.capture ==> 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理.self ==> 只当在 event.target 是当前元素自身时触发处理函数.once ==> 只执行一次.passive ==> 不阻止默认行为按键修饰符.enter.tab.delete ==> 删除和退格.esc.space.up.down

2020-07-08 14:29:14 638

原创 Vue 模板语法、计算属性以及侦听器

插值表达式文本在 Vue 中进行数据绑定，我们最常用的方法就是使用 {{ }} 的文本插值。例如：<span>Hello, {{ name }}</span>在解析时， {{ name }} 将会被解析为对应的数据对象中 name 属性的值，如果数据对象中的 name 值发生了变化，由于 Vue 是双向数据绑定，所以标签中的内容也会实时更新。{{ }} 语法只可以替换指定区域的文本内容，不能输出真正的 HTML ，如果需要嵌入 HTML 代码，需要用到 v-html 属性

2020-07-08 10:20:59 219

原创 Vue 双向数据绑定原理（数据劫持和发布者-订阅者）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&l

2020-07-07 14:06:49 498

原创 MVC 、MVVM 以及 Vue.js 概述

MVC 框架MVC 框架全称为 Model - View - Controller 的缩写，即模型 - 视图 - 控制器，是后端分层开发的概念。【模型】是指后端数据。【视图】是指前端页面。【控制器】是指页面业务逻辑，作用是读取视图数据，控制用户输入，并向后端发送数据，属于单向通信。MVVM 框架随着前端开发越来越受到重视，前端又将 MVC 中的 V 细分出了 MVVM 框架，全称为 Model - View - ViewModel ，即模型 - 视图 - 视图模型。【模型】是指后端

2020-07-07 11:42:49 341

原创 2020年前端面试题·四

2020年前端面试题·四实现一个函数，判断输入是不是回文字符串怎么给一个DOM元素绑定多个同类型事件？写一个通用的事件监听器函数判断一个对象是否为数组冒泡排序快速排序ul 点击其中的 li 时 alert 其 index输出 YYYY-MM-DD HH:mm:ss 格式和 YYYY-MM-DD 格式的时间取 n, m 之间的随机数解析 url 中的参数清除字符串前后空格实现一个函数，判断输入是不是回文字符串回文字符串：一个字符串的正序和倒序一模一样，例如：‘level’ ，‘12321’思路一：取单个

2020-07-07 11:02:31 342

原创 2020年前端面试题·三

2020年前端面试题·三闭包作用域链原型和原型链继承事件代理this 指向问题new 操作符生成实例的过程Ajax 原理跨域问题的产生和解决get和post的区别模块化开发异步加载 JS 的方法defer 和 async 的异同点offsetWidth/offsetHeight、clientWidth/clientHeight、scrollWidth/scrollHeight 及相关属性的区别PromiseJS 数据类型JavaScript 基本规范null 和 undefined 的区别严格模式attri

2020-07-06 12:18:00 295

原创 2020年前端面试题·二

2020年前端面试题·二css sprite 是什么，有什么优缺点display: none 和 visibility: hidden 的区别link 和 @import 的区别如何创建格式化上下文（BFC），BFC有什么用清除浮动的方式为什么要做样式初始化display: inline-block 什么时候不会有间隙元素浮动后，display 值为CSS 选择器权重CSS3 动画实现常见CSS布局：[https://juejin.im/post/5e91a8a56fb9a03c9037928f](http

2020-07-03 14:43:05 223

原创 2020年前端面试题·一

2020年前端面试题·一前端需要注意哪些SEO优化问题img 标签 title 属性和 alt 属性的区别浏览器渲染页面的流程三次握手和四次挥手CSS和JS的位置会影响页面的效率，为什么？重绘和重排对浏览器内核的理解HTTP 状态码cookie、localStorage、sessionStorage 的区别iframe 有哪些缺点W3C标准是什么viewport怎样处理移动端 1px 被渲染为 2px利用 rem 进行适配渲染优化的方法div + css 布局相较 table 布局的优点优雅降级和渐进增强？

2020-07-02 16:51:59 1061

大魔王sama的博客