- 博客(29)
- 收藏
- 关注
RSS订阅原创 深入理解TypeScript
TypeScript是什么TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。TypeScript是具有类型语法的JavaScript，是一种强类型编程语言，并且提供了最新的JavaScript特性。它经过代码编译后最终生成为JavaScript，能够在任何运行JavaScript的地方运行，比如浏览器、NodeJS、Electron、Deno等环境中。TypeScript的作用避免在
2021-09-24 15:48:48
1346
原创 MutationObserver、IntersectionObserver、ResizeObserver
前言阅读本文你可以获取到以下3个知识点通过原生javascript的API监听DOM元素的改变（文字、大小、背景等等）监听DOM元素之间是否相交等信息监听DOM元素大小改变，基本可以放弃全局监听window.rize了动动小手，先点赞再观看????????????MutationObserverMutationObserver 创建一个观察器，提供了对监视DOM树更改的能力，是DOM3 Even...
2020-03-09 18:24:21
2032
原创 css动画是可以暂停的
CSS中animation 大家经常会用到，但是布吉岛有没有和我一样的童鞋刚知道这个动画是可以暂停的。没错，就是这个属性animation-play-state，它有两个可选值分别是播放动画running和暂停动画paused，默认这个属性是running状态并且不能使用animation缩写形式。下面来看看效果：这里就是在hover的时候设置了这个属性.box:hover { ...
2020-03-01 17:35:47
668
原创 桌面端框架Electron使用问题整理和总结
文章主要记录了使用electron日常开发中所遇到的一些坑以及怎样填坑，帮助其他开发的小伙伴少踩一些坑。建议关注收藏，以便遇到时候方便查阅！electron这个框架我就不过多介绍了，是使用node和Chromium架构的一个桌面端框架，如果有了解使用web技术开发桌面端，这个框架多少会听说过或者正在使用。下面就记录一下自己在阅读文档的一些疑问以及开发过程中踩过的坑！electron？...
2020-02-26 14:24:34
5181
2
原创 尤雨溪这样评价svelte
原谅我这个标题，一股浓浓的标题党~~~目的很简单，只是带大家了解一下svelte什么是svelte？这里引用尤雨溪大神的话：作者是 Rich Harris，也就是 Ractive, Rollup 和 Buble 的作者，堪称前端界的轮子哥，现在又带来新轮子了！这个框架的 API 设计是从 Ractive 那边传承过来的（自然跟 Vue 也非常像），但这不是重点。Svelte 的核心...
2020-02-12 15:58:55
1366
原创 前端自动化测试jest教程10-vue实战
这是jest教程的最后一篇文章了，也算对自己所学知识的回顾吧！vue项目实战git地址：https://github.com/foreverhot/jest-document在实际项目中运用jest所具备知识点jest （测试框架）匹配器matchershttps://blog.csdn.net/Jsoning/article/details/103898385钩子函数htt...
2020-02-05 18:32:44
1273
原创 前端自动化测试jest教程9-TDD+单元测试，BDD+集成测试
准备条件以第1节教程的创建的目录和代码为基础进行讲解。如果没有看过第1节教程，请关注我，查看以往该系列的文章这节教程主要讲解TDD+单元测试，BDD+集成测试什么是TDD？Test Driven Development 测试驱动开发顾名思义，就是我们先根据需求去写测试用例，根据测试用例再去写我们的功能。当我们增加或者修改某一项需求的时候，首先修改的是测试用例，根据测试用例再去修改代码逻辑...
2020-01-20 08:38:08
2425
原创 前端自动化测试jest教程8-snapshot快照测试
准备条件以第1节教程的创建的目录和代码为基础进行讲解。如果没有看过第1节教程，请关注我，查看以往该系列的文章这节教程主要讲解在jest中的怎样进行快照测试，将第1节的代码复制一份，并且把index.js和index.test.js文件内容全部清空在 index.js 中写入一些待测试方法export const data1 = () => { return { name:...
2020-01-19 08:48:33
1285
原创 前端自动化测试jest教程7-定时器测试
准备条件以第1节教程的创建的目录和代码为基础进行讲解。如果没有看过第1节教程，请关注我，查看以往该系列的文章这节教程主要讲解在jest中的怎样去测试定时器，将第1节的代码复制一份，并且把index.js和index.test.js文件内容全部清空下面将介绍3种测试定时器的方法在 index.js 中写入一些待测试方法export const timer1 = (callback) =&g...
2020-01-18 08:48:56
1707
原创 前端自动化测试jest教程6-mock函数
准备条件以第1节教程的创建的目录和代码为基础进行讲解。如果没有看过第1节教程，请关注我，查看以往该系列的文章这节教程主要讲解jest中的mock函数，将第1节的代码复制一份，并且把index.js和index.test.js文件内容全部清空mock函数可以在你测试实际代码的时候，捕获对函数的调用以及参数和返回值等，也可以用于模拟一些数据安装axiosnpm run axios --sa...
2020-01-17 08:34:35
2044
2
原创 前端自动化测试jest教程5-钩子函数
准备条件以第1节教程的创建的目录和代码为基础进行讲解。如果没有看过第1节教程，请关注我，查看以往该系列的文章这节教程主要讲解在jest中怎样去测试异步代码，将第1节的代码复制一份，并且把index.js和index.test.js文件内容全部清空jest中有4个钩子函数beforeAll：所有测试之前执行afterAll：所有测试执行完之后beforeEach：每个测试实例之前执行...
2020-01-16 08:28:56
642
原创 前端自动化测试jest教程4-异步代码测试
准备条件以第1节教程的创建的目录和代码为基础进行讲解。如果没有看过第1节教程，请关注我，查看以往该系列的文章这节教程主要讲解在jest中怎样去测试异步代码，将第1节的代码复制一份，并且把index.js和index.test.js文件内容全部清空在实际开发中，肯定会用到异步请求，请求后台的接口数据，这里我们就使用axios 来请求数据npm install axios --save 安装...
2020-01-15 08:38:39
808
原创 前端自动化测试jest教程3-命令行工具
准备条件以第1节教程的创建的目录和代码为基础进行讲解。如果没有看过第1节教程，请关注我，查看以往该系列的文章这节教程主要讲解jest中的中的一些命令行工具，将第1节的代码复制一份，并运行npm run test效果图：先把这几个提示的命令，讲解一下这里几个命令大家自己一定要动手试一下，才能够增加印象着重讲一下 o 这个命令，需要配个git使用，必须将项目提交到本地仓库中（实际开发...
2020-01-13 20:54:49
660
原创 前端自动化测试jest教程2-匹配器matchers
准备条件以第1节教程的创建的目录和代码为基础进行讲解。如果没有看过第1节教程，请关注我，查看以往该系列的文章在讲匹配器之前，我们先来将上节中index.test.js中基础代码讲解一下import { sum } from './index'test('测试 sum', () => { expect(sum(1, 2)).toBe(3)})test方法我们称做测试用例，...
2020-01-08 21:19:34
1400
原创 前端自动化测试jest教程1-配置安装
前言前端早已不在是简单的切图仔，web前端工程师也在逐渐淡出江湖。大前端的时代早已来临，面对日新月异的技术我们只能不断学习，逐个点亮技能点。现在随处可见的单元测试，在主流框架以及UI组件中都可以见到，单元测试的优势就不言而喻了。本系列文章将带你学习前端自动化测试 jest框架 ，包括基本的配置、jest匹配器、异步代码测试、钩子函数、mock以及在vue项目中的实际应用等等，如果想继续学习后面...
2020-01-07 21:42:55
1160
1
原创 简述BEM, OOCSS，AMCSS，SMACSS，SUITCSS，ITCSS
本文介绍的以下几种都是对CSS模块化的各种实现，你可能工作中使用不到，甚至部分有些被淘汰。但是希望你看到这些词的时候不会一脸懵逼！！！BEM本人的上篇文章有详细的介绍：2020年你还没用BEM？这里不再赘述OOCSSObject Oriented CSS 面向对象的CSSOOCSS主要提倡两种规范结构和样式分开（定义一个元素的时候，将本身的结构和对元素外观的样式分开，增强css...
2019-12-31 17:50:05
1160
1
原创 2020年你还没用BEM？
当你看到一个class的时候，你想得到什么？这个class用在什么地方，作用是什么？是否在其他地方也有使用该class，修改会不会引起其他地方的样式问题？class 是否在js中被使用？等等等等此时，你最想一眼看到这个class就解决以上所有的问题，那么就引入了今天的主题 BEM—css命名规范当你第一次看到css包含着-、__、–、- 这些乱七八糟的字符时，脸上笑嘻嘻，心里***...
2019-12-30 15:37:43
697
3
原创 构建一个CLI脚手架
一、准备条件npm模块commander： node.js 命令行接口的完整解决方案官网地址：https://github.com/tj/commander.js/blob/master/Readme_zh-CN.mdinquirer： 用户命令行交互官网地址：https://github.com/SBoudrias/Inquirer.jsdownload-git-repo： 用于下...
2019-12-30 15:31:48
228
1
原创 css3之@media的详细使用介绍
前言使用css很多年了，每次使用media都需要上网查询一下，具体用法也没记住，本篇文章就帮你详细完整的介绍@media的用法，希望你可以更加了解@media的用法。如有不正确之处，还望指出，谢谢！语法@media: <media_query_list><media_query_list>: [<media_query> [’,’ <media_...
2019-12-26 10:38:06
1372
原创 代码提交git时自动格式化并通过ESlint检测
前言在同一个项目中，一般都是几个人合作开发，每个人的代码风格不同，因此提交到git之前，需要统一下格式，因此才有了这篇文章，分享一下自己的配置过程。希望每个小伙伴都能规范自己的代码，如果你认为对你有帮助或者有小伙伴有更好的方法欢迎积极留言！准备工作以vue为例，用脚手架生成一个项目，目录结构（这个没有什么影响，已有项目更好）介绍下我们需要使用到的npm模块prettie...
2019-12-17 11:40:26
3898
1
原创 js中的算法
var arr = [1,3,5,7,9,2,4,6,8]冒泡排序 function bubbleSort(arr){ var tmp; var len = arr.length; for (var i = 0; i <len-1; i++) { for (var j = 0; j < len-1-i; j++) {
2018-01-11 12:33:56
561
原创 jS原型
原型理解原型之前我们要知道什么是原型？js中万物皆对象，因此原型也是对象，可以通过原型实现对象属性的继承。什么是原型对象？ “我们创建的每个函数都有一个prototype(原型)属性（除了Function.bind()返回的函数），这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。” –摘自人民邮电出版社出版的Nicholas C.Zakas著
2017-11-28 11:15:52
5058
2
原创 部分安卓手机点击输入框，输入法会将输入框遮住问题
在写移动端页面时候在乐视手机测试时，点击输入框，输入框无法自动调整到可视区域，并且输入法挡住了输入框，在其他苹果和安卓手机上测试是可以自动移动到可视区域的上网找了一些方法： 1、scrollIntoView(true | false) 滚动浏览器窗口或容器元素，以便在当前视窗的可见范围看见当前元素。如果为true，或者省略它，窗口会尽可能滚动到自身顶部与元素顶部平齐。目前各浏览器均支持2、scr
2017-11-27 11:25:14
7384
原创 数组和字符串方法中返回问题
数组改变原来数组arrayObject.push(newelement1,newelement2,....,newelementX)方法可向数组的末尾添加一个或多个元素，并返回新的长度。arrayObject.pop()：用于删除并返回数组的最后一个元素。arrayObject.unshift(newelement1,newelement2,....,new
2017-11-21 16:07:09
960
转载 移动 web 开发问题和优化小结
[转] 作者：守候 segmentfault.com/a/11900000113388001.前言到目前为止，互联网行业里，手机越来越智能化，移动端占有的比例越来越高，尤其实在电商，新闻，广告，游戏领域。用户要求越来越高，网站功能越来越好，效果越来越炫酷，这就要求我们产品质量越来越高，web前端开发而言是一个挑战，是一个难题，也是一个机遇。如何让我们所开发的手机页面能有更好的交互体验，就是这篇文
2017-11-20 14:21:26
361
原创 Handlebars的简单使用
简介 Handlebars 是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。它采用”Logic-less template”（无逻辑模版）的思路，在加载时被预编译，而不是到了客户端执行到代码时再去编译， 这样可以保证模板加载和运行的速度。Handlebars兼容Mustache，你可以在Handlebars中导入Mustache模板。安装 Handl
2017-11-20 14:15:11
841
原创 toString()和valueOf()之间的区别
toString()和valueOf()都是对象的方法。toString()方法返回反映这个对象的字符串。valueOf()方法如果存在任意原始值，它就默认将对象转换为表示它的原始值；对象是复合值，而大多数对象无法真正表示为一个原始值，因此默认的valueOf()方法简单地返回对象本身，而不是返回一个原始值。【1】undefined和null没有toString()和valueOf()方法undef
2017-11-15 19:44:48
1837
转载 AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Swiper是目前较为流行的移动端触摸滑动插件，因为其简单好用易上手，受到很多前端开发者的欢迎。这篇文章主要介绍了AngularJS 中使用Swiper制作滚动图不能滑动的解决方法,需要的朋友可以参考下今天在使用Swiper的时候遇到这个问题：使用angularjs动态循环生成swiper-slide类，在swiper-wrapper里生成6个以上的滑动页，可是就是划不到第二页
2017-06-13 15:00:47
1078
转载 浅谈Js原型的理解
一、js中的原型毫无疑问一个难点，学习如果不深入很容易就晕了！ 在参考了多方面的资料后，发现解释都太过专业，对于很多还没有接触过面向对象 语言的小白来说，有理解不了里面的专有名词！如果你没学过c++或者Java之类的更接触底层的语言，那就不要太深究，理解会用自然可以了，当接触到更多语言时慢慢的会理解越来越深刻！下面我就举例分享一下prototype的概念！知
2017-05-03 14:56:22
1640
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人