<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[Jsoning的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/Jsoning</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; Jsoning]]></copyright><item><title><![CDATA[深入理解TypeScript]]></title><link>https://blog.youkuaiyun.com/Jsoning/article/details/120456712</link><guid>https://blog.youkuaiyun.com/Jsoning/article/details/120456712</guid><author>Jsoning</author><pubDate>Fri, 24 Sep 2021 15:48:48 +0800</pubDate><description><![CDATA[TypeScript是什么
TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
TypeScript是具有类型语法的JavaScript，是一种强类型编程语言，并且提供了最新的JavaScript特性。它经过代码编译后最终生成为JavaScript，能够在任何运行JavaScript的地方运行，比如浏览器、NodeJS、Electron、Deno等环境中。
TypeScript的作用

避免在]]></description><category></category></item><item><title><![CDATA[MutationObserver、IntersectionObserver、ResizeObserver]]></title><link>https://blog.youkuaiyun.com/Jsoning/article/details/104758215</link><guid>https://blog.youkuaiyun.com/Jsoning/article/details/104758215</guid><author>Jsoning</author><pubDate>Mon, 09 Mar 2020 18:24:21 +0800</pubDate><description><![CDATA[前言
阅读本文你可以获取到以下3个知识点
通过原生javascript的API

监听DOM元素的改变（文字、大小、背景等等）
监听DOM元素之间是否相交等信息
监听DOM元素大小改变，基本可以放弃全局监听window.rize了

动动小手，先点赞再观看????????????
MutationObserver
MutationObserver 创建一个观察器，提供了对监视DOM树更改的能力，是DOM3 Even...]]></description><category></category></item><item><title><![CDATA[css动画是可以暂停的]]></title><link>https://blog.youkuaiyun.com/Jsoning/article/details/104596267</link><guid>https://blog.youkuaiyun.com/Jsoning/article/details/104596267</guid><author>Jsoning</author><pubDate>Sun, 01 Mar 2020 17:35:47 +0800</pubDate><description><![CDATA[CSS中animation 大家经常会用到，但是布吉岛有没有和我一样的童鞋刚知道这个动画是可以暂停的。

没错，就是这个属性animation-play-state，它有两个可选值分别是播放动画running和暂停动画paused，默认这个属性是running状态并且不能使用animation缩写形式。下面来看看效果：

这里就是在hover的时候设置了这个属性

.box:hover {
   ...]]></description><category></category></item><item><title><![CDATA[桌面端框架Electron使用问题整理和总结]]></title><link>https://blog.youkuaiyun.com/Jsoning/article/details/104516451</link><guid>https://blog.youkuaiyun.com/Jsoning/article/details/104516451</guid><author>Jsoning</author><pubDate>Wed, 26 Feb 2020 14:24:34 +0800</pubDate><description><![CDATA[文章主要记录了使用electron日常开发中所遇到的一些坑以及怎样填坑，帮助其他开发的小伙伴少踩一些坑。建议关注收藏，以便遇到时候方便查阅！
electron这个框架我就不过多介绍了，是使用node和Chromium架构的一个桌面端框架，如果有了解使用web技术开发桌面端，这个框架多少会听说过或者正在使用。
下面就记录一下自己在阅读文档的一些疑问以及开发过程中踩过的坑！
electron？


...]]></description><category></category></item><item><title><![CDATA[尤雨溪这样评价svelte]]></title><link>https://blog.youkuaiyun.com/Jsoning/article/details/104280210</link><guid>https://blog.youkuaiyun.com/Jsoning/article/details/104280210</guid><author>Jsoning</author><pubDate>Wed, 12 Feb 2020 15:58:55 +0800</pubDate><description><![CDATA[原谅我这个标题，一股浓浓的标题党~~~
目的很简单，只是带大家了解一下svelte
什么是svelte？
这里引用尤雨溪大神的话：

作者是 Rich Harris，也就是 Ractive, Rollup 和 Buble 的作者，堪称前端界的轮子哥，现在又带来新轮子了！


这个框架的 API 设计是从 Ractive 那边传承过来的（自然跟 Vue 也非常像），但这不是重点。Svelte 的核心...]]></description><category></category></item><item><title><![CDATA[前端自动化测试jest教程10-vue实战]]></title><link>https://blog.youkuaiyun.com/Jsoning/article/details/104186514</link><guid>https://blog.youkuaiyun.com/Jsoning/article/details/104186514</guid><author>Jsoning</author><pubDate>Wed, 05 Feb 2020 18:32:44 +0800</pubDate><description><![CDATA[这是jest教程的最后一篇文章了，也算对自己所学知识的回顾吧！
vue项目实战git地址：https://github.com/foreverhot/jest-document
在实际项目中运用jest所具备知识点

jest （测试框架）


匹配器matchers
https://blog.youkuaiyun.com/Jsoning/article/details/103898385
钩子函数
htt...]]></description><category></category></item><item><title><![CDATA[前端自动化测试jest教程9-TDD+单元测试，BDD+集成测试]]></title><link>https://blog.youkuaiyun.com/Jsoning/article/details/104015061</link><guid>https://blog.youkuaiyun.com/Jsoning/article/details/104015061</guid><author>Jsoning</author><pubDate>Mon, 20 Jan 2020 08:38:08 +0800</pubDate><description><![CDATA[准备条件
以第1节教程的创建的目录和代码为基础进行讲解。如果没有看过第1节教程，请关注我，查看以往该系列的文章
这节教程主要讲解TDD+单元测试，BDD+集成测试
什么是TDD？
Test Driven Development 测试驱动开发
顾名思义，就是我们先根据需求去写测试用例，根据测试用例再去写我们的功能。当我们增加或者修改某一项需求的时候，首先修改的是测试用例，根据测试用例再去修改代码逻辑...]]></description><category></category></item><item><title><![CDATA[前端自动化测试jest教程8-snapshot快照测试]]></title><link>https://blog.youkuaiyun.com/Jsoning/article/details/104015027</link><guid>https://blog.youkuaiyun.com/Jsoning/article/details/104015027</guid><author>Jsoning</author><pubDate>Sun, 19 Jan 2020 08:48:33 +0800</pubDate><description><![CDATA[准备条件
以第1节教程的创建的目录和代码为基础进行讲解。如果没有看过第1节教程，请关注我，查看以往该系列的文章
这节教程主要讲解在jest中的怎样进行快照测试，将第1节的代码复制一份，并且把index.js和index.test.js文件内容全部清空
在 index.js 中写入一些待测试方法
export const data1 = () =&gt; {
  return {
    name:...]]></description><category></category></item><item><title><![CDATA[前端自动化测试jest教程7-定时器测试]]></title><link>https://blog.youkuaiyun.com/Jsoning/article/details/104014997</link><guid>https://blog.youkuaiyun.com/Jsoning/article/details/104014997</guid><author>Jsoning</author><pubDate>Sat, 18 Jan 2020 08:48:56 +0800</pubDate><description><![CDATA[准备条件
以第1节教程的创建的目录和代码为基础进行讲解。如果没有看过第1节教程，请关注我，查看以往该系列的文章
这节教程主要讲解在jest中的怎样去测试定时器，将第1节的代码复制一份，并且把index.js和index.test.js文件内容全部清空
下面将介绍3种测试定时器的方法
在 index.js 中写入一些待测试方法
export const timer1 = (callback) =&g...]]></description><category></category></item><item><title><![CDATA[前端自动化测试jest教程6-mock函数]]></title><link>https://blog.youkuaiyun.com/Jsoning/article/details/103992103</link><guid>https://blog.youkuaiyun.com/Jsoning/article/details/103992103</guid><author>Jsoning</author><pubDate>Fri, 17 Jan 2020 08:34:35 +0800</pubDate><description><![CDATA[准备条件
以第1节教程的创建的目录和代码为基础进行讲解。如果没有看过第1节教程，请关注我，查看以往该系列的文章
这节教程主要讲解jest中的mock函数，将第1节的代码复制一份，并且把index.js和index.test.js文件内容全部清空
mock函数可以在你测试实际代码的时候，捕获对函数的调用以及参数和返回值等，也可以用于模拟一些数据
安装axios

npm run axios --sa...]]></description><category></category></item><item><title><![CDATA[前端自动化测试jest教程5-钩子函数]]></title><link>https://blog.youkuaiyun.com/Jsoning/article/details/103984393</link><guid>https://blog.youkuaiyun.com/Jsoning/article/details/103984393</guid><author>Jsoning</author><pubDate>Thu, 16 Jan 2020 08:28:56 +0800</pubDate><description><![CDATA[准备条件
以第1节教程的创建的目录和代码为基础进行讲解。如果没有看过第1节教程，请关注我，查看以往该系列的文章
这节教程主要讲解在jest中怎样去测试异步代码，将第1节的代码复制一份，并且把index.js和index.test.js文件内容全部清空
jest中有4个钩子函数

beforeAll：所有测试之前执行
afterAll：所有测试执行完之后
beforeEach：每个测试实例之前执行
...]]></description><category></category></item><item><title><![CDATA[前端自动化测试jest教程4-异步代码测试]]></title><link>https://blog.youkuaiyun.com/Jsoning/article/details/103976195</link><guid>https://blog.youkuaiyun.com/Jsoning/article/details/103976195</guid><author>Jsoning</author><pubDate>Wed, 15 Jan 2020 08:38:39 +0800</pubDate><description><![CDATA[准备条件
以第1节教程的创建的目录和代码为基础进行讲解。如果没有看过第1节教程，请关注我，查看以往该系列的文章
这节教程主要讲解在jest中怎样去测试异步代码，将第1节的代码复制一份，并且把index.js和index.test.js文件内容全部清空
在实际开发中，肯定会用到异步请求，请求后台的接口数据，这里我们就使用axios 来请求数据

npm install axios --save 安装...]]></description><category></category></item><item><title><![CDATA[前端自动化测试jest教程3-命令行工具]]></title><link>https://blog.youkuaiyun.com/Jsoning/article/details/103964246</link><guid>https://blog.youkuaiyun.com/Jsoning/article/details/103964246</guid><author>Jsoning</author><pubDate>Mon, 13 Jan 2020 20:54:49 +0800</pubDate><description><![CDATA[准备条件
以第1节教程的创建的目录和代码为基础进行讲解。如果没有看过第1节教程，请关注我，查看以往该系列的文章
这节教程主要讲解jest中的中的一些命令行工具，将第1节的代码复制一份，并运行npm run test
效果图：

先把这几个提示的命令，讲解一下

这里几个命令大家自己一定要动手试一下，才能够增加印象
着重讲一下 o 这个命令，需要配个git使用，必须将项目提交到本地仓库中（实际开发...]]></description><category></category></item><item><title><![CDATA[前端自动化测试jest教程2-匹配器matchers]]></title><link>https://blog.youkuaiyun.com/Jsoning/article/details/103898385</link><guid>https://blog.youkuaiyun.com/Jsoning/article/details/103898385</guid><author>Jsoning</author><pubDate>Wed, 08 Jan 2020 21:19:34 +0800</pubDate><description><![CDATA[准备条件
以第1节教程的创建的目录和代码为基础进行讲解。如果没有看过第1节教程，请关注我，查看以往该系列的文章
在讲匹配器之前，我们先来将上节中index.test.js中基础代码讲解一下
import { sum } from './index'
test('测试 sum', () =&gt; {
  expect(sum(1, 2)).toBe(3)
})


test方法我们称做测试用例，...]]></description><category></category></item><item><title><![CDATA[前端自动化测试jest教程1-配置安装]]></title><link>https://blog.youkuaiyun.com/Jsoning/article/details/103878945</link><guid>https://blog.youkuaiyun.com/Jsoning/article/details/103878945</guid><author>Jsoning</author><pubDate>Tue, 07 Jan 2020 21:42:55 +0800</pubDate><description><![CDATA[前言
前端早已不在是简单的切图仔，web前端工程师也在逐渐淡出江湖。大前端的时代早已来临，面对日新月异的技术我们只能不断学习，逐个点亮技能点。
现在随处可见的单元测试，在主流框架以及UI组件中都可以见到，单元测试的优势就不言而喻了。本系列文章将带你学习前端自动化测试 jest框架 ，包括基本的配置、jest匹配器、异步代码测试、钩子函数、mock以及在vue项目中的实际应用等等，如果想继续学习后面...]]></description><category></category></item><item><title><![CDATA[简述BEM, OOCSS，AMCSS，SMACSS，SUITCSS，ITCSS]]></title><link>https://blog.youkuaiyun.com/Jsoning/article/details/103787035</link><guid>https://blog.youkuaiyun.com/Jsoning/article/details/103787035</guid><author>Jsoning</author><pubDate>Tue, 31 Dec 2019 17:50:05 +0800</pubDate><description><![CDATA[本文介绍的以下几种都是对CSS模块化的各种实现，你可能工作中使用不到，甚至部分有些被淘汰。但是希望你看到这些词的时候不会一脸懵逼！！！
BEM
本人的上篇文章有详细的介绍：2020年你还没用BEM？
这里不再赘述
OOCSS
Object Oriented CSS  面向对象的CSS
OOCSS主要提倡两种规范

结构和样式分开（定义一个元素的时候，将本身的结构和对元素外观的样式分开，增强css...]]></description><category></category></item><item><title><![CDATA[2020年你还没用BEM？]]></title><link>https://blog.youkuaiyun.com/Jsoning/article/details/103767210</link><guid>https://blog.youkuaiyun.com/Jsoning/article/details/103767210</guid><author>Jsoning</author><pubDate>Mon, 30 Dec 2019 15:37:43 +0800</pubDate><description><![CDATA[当你看到一个class的时候，你想得到什么？

这个class用在什么地方，作用是什么？
是否在其他地方也有使用该class，修改会不会引起其他地方的样式问题？
class 是否在js中被使用？
等等等等

此时，你最想一眼看到这个class就解决以上所有的问题，那么就引入了今天的主题 BEM—css命名规范
当你第一次看到css包含着-、__、–、- 这些乱七八糟的字符时，脸上笑嘻嘻，心里***...]]></description><category></category></item><item><title><![CDATA[构建一个CLI脚手架]]></title><link>https://blog.youkuaiyun.com/Jsoning/article/details/103767129</link><guid>https://blog.youkuaiyun.com/Jsoning/article/details/103767129</guid><author>Jsoning</author><pubDate>Mon, 30 Dec 2019 15:31:48 +0800</pubDate><description><![CDATA[一、准备条件
npm模块
commander： node.js 命令行接口的完整解决方案
官网地址：https://github.com/tj/commander.js/blob/master/Readme_zh-CN.md
inquirer： 用户命令行交互
官网地址：https://github.com/SBoudrias/Inquirer.js
download-git-repo： 用于下...]]></description><category></category></item><item><title><![CDATA[css3之@media的详细使用介绍]]></title><link>https://blog.youkuaiyun.com/Jsoning/article/details/103710315</link><guid>https://blog.youkuaiyun.com/Jsoning/article/details/103710315</guid><author>Jsoning</author><pubDate>Thu, 26 Dec 2019 10:38:06 +0800</pubDate><description><![CDATA[前言
使用css很多年了，每次使用media都需要上网查询一下，具体用法也没记住，本篇文章就帮你详细完整的介绍@media的用法，希望你可以更加了解@media的用法。如有不正确之处，还望指出，谢谢！
语法
@media: &lt;media_query_list&gt;
&lt;media_query_list&gt;: [&lt;media_query&gt; [’,’ &lt;media_...]]></description><category></category></item><item><title><![CDATA[代码提交git时自动格式化并通过ESlint检测]]></title><link>https://blog.youkuaiyun.com/Jsoning/article/details/103577402</link><guid>https://blog.youkuaiyun.com/Jsoning/article/details/103577402</guid><author>Jsoning</author><pubDate>Tue, 17 Dec 2019 11:40:26 +0800</pubDate><description><![CDATA[前言



在同一个项目中，一般都是几个人合作开发，每个人的代码风格不同，因此提交到git之前，需要统一下格式，因此才有了这篇文章，分享一下自己的配置过程。希望每个小伙伴都能规范自己的代码，如果你认为对你有帮助或者有小伙伴有更好的方法欢迎积极留言！

准备工作

以vue为例，用脚手架生成一个项目，目录结构（这个没有什么影响，已有项目更好）



介绍下我们需要使用到的npm模块

prettie...]]></description><category></category></item></channel></rss>