sullay_个人页

前端笔记（10）浏览器导航流程

svelte教程（8）stores

有时，您将需要多个不相关的组件或常规的JavaScript模块访问这些值。 在Svelte，我们通过store来做到这一点。store只是一种对象，该对象具有一种subscribe方法，该方法允许在store的value发生变化时通知订阅过的组件。

svelte教程（7）生命周期

onMount onMount将在组件首次呈现到DOM之后运行。除了onDestroy之外，生命周期函数不会在SSR期间运行，这意味着一旦组件挂在到DOM上，我们就可以避免在DOM构建之前获取到应在DOM构建以后加载的数据。

svelte教程（6）数据绑定

双向数据绑定 双向绑定意味着当我们更改name的值时会更新input输入框的值，更改input输入框值的时候name的值同样会改变。 <script> let name = 'world'; </script> <input bind:value={name}> <h1>Hello {name}!</h1> 如果您有多个与同一个值相关的输入，则可以bind:group与value属性一起使用。

svelte教程（5）事件

DOM 事件 事件绑定 <script> let m = { x: 0, y: 0 }; function handleMousemove(event) { m.x = event.clientX; m.

svelte教程（4）逻辑

条件逻辑 有条件的渲染一些元素，使用 "if" 代码块: <script> let user = { loggedIn: true }; function toggle() { user.

svelte教程（3）props

在任何实际应用程序中，您都需要将数据从一个组件传递到其子组件。为此，我们需要声明properties，通常将其缩写为'props'。注意：Svelte中，我们使用export关键字来实现。export的工作原理与JavaScript中不同。

svelte教程（2）反应性

Svelte的核心是功能强大的反应系统，用于使DOM与您的应用程序状态保持同步-例如，响应事件。 <script> let count = 0; function handleClick() { count += 1; } </script> <button on:click={handleClick}> Clicked {count} {count === 1 ? 'time' : 'times'} </button> 声明 当组件的状态更改时，Svelte会自动更新DOM。

svelte教程（1）简介

什么是svelte? Svelte是用于构建快速Web应用程序的工具。 它类似于React和Vue这样的JavaScript框架。但是有一个关键的区别：Svelte在构建时将您的svelte代码转换为理想的JavaScript 代码，而不是在运行时解释您的代码。

前端学习笔记（9）css grid网格布局

Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。 容器属性 1. display属性 指定一个容器采用网格布局 div { display: grid; } div { display: inline-grid; //设置为行内元素 } 注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

前端学习笔记（8）css选择器（二）

选择器分类 简单选择器：针对某一特征判断是否选中元素。 复合选择器：连续的简单选择器，根据元素特征判断是否选中单个元素。 复杂选择器：由“（空格）“ “ >” “ ~” “ +” “ ||” 等符号连接的复合选择器，根据父元素或者前序元素检查单个元素。

前端学习笔记（7）css选择器（一）

选择器分类 简单选择器：针对某一特征判断是否选中元素。 复合选择器：连续的简单选择器，根据元素特征判断是否选中单个元素。 复杂选择器：由“（空格）“ “ >” “ ~” “ +” “ ||” 等符号连接的复合选择器，根据父元素或者前序元素检查单个元素。

前端学习笔记（6） - JavaScript数组

在最新的TypeScript 3.6中实现了更准确的数组扩展。借此机会聊一下我对js中数组的一点理解。 使用Array()初始化数组 先来看一下下面的两行代码 1 in [undefined, undefined, undefined] // true 1 in Array(3) // false 再看一下接下来代码 let arr=new Array(3).

前端学习笔记（5） - JavaScript中this 关键字的机制

JavaScript中有几种函数 使用function定义的函数 function foo(){ } 使用箭头函数定义的函数 const foo=()=>{ } 在class中定义的函数 class A{ foo(){ } } 4.

前端学习笔记（4） - JavaScript宏观与微观任务

宏观和微观任务 在 ES3 和更早的版本中，JavaScript 本身还没有异步执行代码的能力，这也就意味着，宿主环境传递给 JavaScript 引擎一段代码，引擎就把代码直接顺次执行了，这个任务也就是宿主发起的任务。

前端学习笔记（3） - JavaScript对象分类

JavaScript中的对象分类 宿主对象（host Objects）：由 JavaScript 宿主环境提供的对象，它们的行为完全由宿主环境决定。 内置对象（Built-in Objects）：由 JavaScript 语言提供的对象。

前端学习笔记（2） - JavaScript面向对象

javaScript是不是面向对象语言？ JavaScript（es6之前）有对象的概念，却没有类的概念，JavaScript对象可以任意添加属性，而java、c++等其他语言却不能。以至于有些人认为JavaScript并非是面向对象的语言，而是基于对象的语言。

前端学习笔记（1） - JavaScript类型

背景介绍 我从事前端工作只能有短短的一年，工作要求使我接触到了前端这个领域。起初对于前端的理解就是html、css、js，但是随着对前端这个领域的不断了解，我发现前端远不止这些。虽然目前我已经能够根据需求写出不错的前端代码，但是我所掌握度前端知识实际上过于零散，基础知识的欠缺限制了我解决问题的思路。