- 博客(41)
- 收藏
- 关注
RSS订阅原创 Sass 入门
文章目录Sass 准备把 Sass 编译成 CSS编译文件自动编译 Sass修改编译输出的 CSS 格式.sass与.scss的区别变量-Variables嵌套-Nesting嵌套时调用父选择器嵌套属性混合-MixinsMixin 里的参数继承/扩展-inheritancePartials与@import注释 comment数据类型 - data typetype-of 判断类型number数字函数字符串字符串函数Interpolation（插值）控制指令-Control Directives@if@for
2021-05-19 10:58:34
314
1
原创 Mobx 入门
文章目录Mobx 和 Redux 的关系开发难度低开发代码量少渲染性能好mobx的核心思想Mobx所需基础decorator 装饰器简单理解Mobx 常用 API可观察的数据（observable）从 mobx 中引入 observable对于数组，纯对象和Map——可直接观察对于其他类型——可间接观察结合 decorator 修饰器Mobx 和 Redux 的关系开发难度低mobx 使用响应式的风格，对于面向对象响应式的编程风格，匹配更加简略的API语法，降低了学习成本，mobx 的集成度比 red
2021-05-14 11:02:21
342
原创 前端模块化的理解
文章目录进化方向模块化的作用几种规范总结进化方向CommonJS->AMD->CMD->ESM（ES6Module）模块化的作用解决命名污染，全局污染，变量冲突模块引入/依赖，模块暴露的方式决定依赖顺序几种规范总结CommonJS规范主要用于服务端编程，加载模块是同步的，这并不适合在浏览器环境，因为同步意味着阻塞加载，浏览器资源是异步加载的，因此有了AMD CMD解决方案。AMD规范在浏览器环境中异步加载模块，而且可以并行加载多个模块。不过，AMD规范开发成本高，代
2021-04-21 16:08:01
248
原创 力扣in前端——无重复字符的最长子串：LeetCode3
给定一个字符串，请你找出其中不含有重复字符的 最长子串 的长度。输入: s = “abcabcbb”输出: 3解释: 因为无重复字符的最长子串是 “abc”，所以其长度为 3。其实看到这道题第一时间就是想到KMP算法，然鹅并没关系题解：设想出一个“滑动窗口”的数组：sliderArray滑动窗口数组可以做到从头滑动数组并依次扩充数组直到遇到新的数组元素和原数组中的数重复然后将原数组中重复元素前的全部元素删除，再扩充数组每次滑动时都记录最大值var lengthOfLongest
2021-04-16 17:27:07
176
原创 JavaScript两个对象合并
方法1：object.assign.方法2：使用 for in两种方法都是浅拷贝For in const obj1 = { a: { c: 5, b: [2, 3, 4] }, d1() { console.log(5) } }; const obj2 = {.
2021-04-14 16:33:47
272
原创 前端性能优化方案——综合篇
CSS 性能优化内联首屏关键CSS（Critical CSS）异步加载CSS：使用 preload进行预加载文件压缩有选择地使用选择器，避免过多嵌套的选择，但要保证可读性减少计算属性：如box-shadow/border-radius/filter/透明度/:nth-child等。减少重排，避免重绘不使用@importreference：https://zhuanlan.zhihu.com/p/41136812Vue 性能优化v-if 和 v-show 区分使用场景v-if是
2021-04-13 17:01:42
92
原创 初识Indusoft Web Studio（IWS）
文章目录PreparationWhat You Will NeedConventionsRibbonIntroduction新建一个项目创建好后，创建一个简单的slider控制器（symbols的使用）总结自2012年一个英文原版视频，只有前两个ModulePreparationWhat You Will NeednotepadIWS v7.1PChelp systemConventionsMouseKey CombinationcopyselectRibbonMany
2021-03-06 16:59:15
2693
5
原创 事件循环机制Event Loop（JavaScript）
背景JavaScript 是单线程运行的，但是一定会有异步请求（如Ajax，定时器等），因此异步就要基于回调来实现Event Loop 就是异步回调的实现原理单线程的JavaScript那么 JavaScript 是如何执行的呢？从前到后，一行一行执行如果执行到某一行报错，则停止下面代码的执行会先把同步代码执行完，再执行异步因此，基于上述给出一个基本的异步回调的实现原理执行过程给出执行代码console.log('hi');setTimeout(function cb1() {
2021-03-02 20:03:09
122
原创 手写用 promise 加载一张图片
只有一张图片时function loadImg(src) { // 1.创建一个p存储一个Promise类的实例 const p = new Promise( // 2.传入一个函数，内部有两个形参分别为resolve和reject，这两个形参同样也是函数 (resolve, reject) => { //3. 先定义一张图片,创建一个element const img = document.create
2021-03-01 21:02:15
309
原创 浅谈Vue.js的生命周期
建议打开这篇博文两次，一个开图片一个开文字，对比着看~第一步：new Vue() 这是new了一个Vue的实例对象：此时，就会进入组件的创建过程第二步：Init Events & Lifecycle 初始化组件的事件和生命周期函数。当执行完这一步之后，组件的生命周期函数就已经全部初始化好了，等待着依次去调用第三步：beforeCreate 这是组件创建阶段的，遇到的第一个生命周期函数在Vue实例中写入：// 第一个生命周期函数beforeCreate() { consol
2020-11-06 17:05:01
168
原创 如何在Windows电脑上调试iOS设备上的Safari
文章目录Step1：准备Step2：下载插件 *remotedebug-ios-webkit-adapter*下载插件所需环境调整测试设备环境确保电脑设置信任iOS设备Step3：运行插件Step4：打开调试网页窗口一切就绪后Step1：准备下载iTunes:https://www.apple.com/itunes/点击下载64位的即可（核心） 下载remote插件准备ios数据线和ios设备（iPhone、iPad都可）Step2：下载插件 remotedebug-ios-web
2020-10-12 14:58:35
5755
8
原创 手写一个简易的jQuery，考虑插件和扩展性
文章目录jQuery手写jQuery考虑插件和可扩展性插件可扩展性jQuerywrite Less，Do More手写jQueryclass jQuery { constructor(selector) { const result = document.querySelectorAll(selector); const length = result.length; for (let i = 0; i < length; i++) {
2020-09-10 16:38:24
258
原创 手写防抖throttle和节流debounce
文章目录手写防抖throttlethrottle背景手写代码throttle防抖究竟想做到什么？手写防抖throttlethrottle背景若页面中有一个输入框<input type= "text" />，我想根据输入框的内容变化实时做出变化。那我该怎么做呢？监听该输入框，文字变化后触发 change 事件若直接用 keyup 事件，则会频繁触发 change 事件那么从性能优化的角度要怎么做呢？当用户输入结束或者暂停时，才会触发 change 事件这就是防抖了手写代
2020-09-09 14:01:09
289
原创 手写一个简易的Ajax
文章目录XMLHttpRquest能用Ajax做什么呢？一个简单的Ajax（get）请求追踪Ajax请求的当前状态注册成功回调手写一个简易的 ajax(GET请求版)XMLHttpRquestAjax是一种技术方案，而不是一种新技术，依赖的依旧是前端三件套，最核心的依赖就是浏览器提供的XMLHttpRequest对象，可以让浏览器发出HTTP请求和接收HTTP响应。也就是说：我们使用XMLHttpRequest对象发送一个Ajax请求。能用Ajax做什么呢？发送HTTP请求得到服务端数据是一
2020-09-08 14:41:52
1902
原创 获取鼠标在页面上的坐标（clientxy，pagexy, offsetxy，screenxy）
近期在做mouse position的issue，发现自己有些BOM的API非常的不熟练甚至遗忘，因此结合之前所以学和参考其他博文和文章总结一下一些获取鼠标在浏览器上的坐标的方法。直接上代码CSS：div { position: absolute; left: 200px; top: 50px; width: 300px; height: 250px; background-color: blue; border: 50px solid red;
2020-08-24 15:23:46
2143
原创 JS基础之手写bind方法和手写深拷贝
手写bind方法要说到bind方法，自然离不开说到他的两个兄弟call和apply了。他们三兄弟最主要的功能就是改变this的指向了，但彼此之间也有一些不同。下面先细细道来~call方法call 的语法：Function.call (obj,[param1...])调用 call 的对象，必须是个函数。call 的第一个参数，是一个对象。 Function 的调用者，将会指向这个对象。如果不传，则默认为全局对象 window。第二个参数开始，可以接收任意个参数。每个参数会映射到相应位置的
2020-08-21 14:52:57
389
原创 Node.js之第三方模块——Gulp
第三方模块什么是第三方模块是别人写好的、具有特定功能的、我们能直接使用的模块即第三方模块，由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中，所以又名包。（类似于插件）第三方模块有两种存在的形式：以js文件的形式存在，提供实现项目具体功能的API接口以命令行工具形式存在，辅助项目开发获取第三方模块是别人写好的、具有特定功能的、我们能直接使用的模块即第三方模块，由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中，所以又名包。（类似于插件）使用npm：npmjs.com
2020-08-18 15:31:51
346
原创 移动WEB开发之flex布局
flex布局学习目标能够说出flex盒子的布局原理能够使用flex布局的常用属性能够独立完成携程移动端首页案例学习目录flex 布局体验flex 布局原理flex 布局父项常见属性flex 布局子项常见属性...
2020-08-14 10:21:14
196
原创 手写原生JS轮播图
轮播图也称为焦点图，是网页中比较常见的网页特效本文主要制作6个效果效果1：当鼠标移入轮播图时，左右箭头显示出来，离开隐藏左右按钮效果2：点击轮播图左右按钮就会有图片改变的效果效果3：图片和下面的小圆点会对应同步变化效果4：点击小圆点就会弹出相应的图片效果5：鼠标不经过轮播图，则图片会自动滚动播放效果6：鼠标经过轮播图模块，自动播放停止制作效果前：分析结构:分为四个部分：大盒子，图片、左右按钮和小圆圈准备好CSS和HTML：HTML:<div class="foc
2020-08-12 11:44:09
596
原创 前端学习之jQuery
jQueryjQuery学习目标能够说出什么是jQuery能够说出jQuery的优点能够简单使用jQuery能够说出DOM对象和jQuery对象的区别jQuery目录jQuery概述jQuery的基本使用jQuery概述javascript库仓库：可以把很多东西放到这个仓库里面。找东西的时候只需要到仓库里面查找到就可以了。JavaScript库：即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在
2020-08-06 13:26:38
445
原创 前端基础之ES6
ES6ES6简介ES6实际上是一个泛指，泛指ES2015及后续版本为什么使用ES6？每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。变量提升特性增加了程序运行时的不可预测性语法过于松散，当实现相同的功能时，不同的人可能会写出不同的代码变量letletES6中新增的用于声明变量的关键字，ES6之前只有全局作用域和局部作用域，在之后呢才有了块级作用域let声明的变量只在所处于的块级有效，块级作用域就是一对大括号里的作用域，块级作用域
2020-08-05 14:48:40
8556
原创 JavaScript高级（3）——js中的正则表达式
正则表达式正则表达式目标能够说出正则表达式的作用能够写出简单的正则表达式能够使用正则表达式对表单进行验证能够使用正则表达式替换内容正则表达式目录正则表达式概述正则表达式在JavaScript中的使用正则表达式中的特殊字符正则表达式中的替换正则表达式概述什么是正则表达式正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。正则表达式通常用来被检索、替换符合某个模式（规则）的文本，例如验证表单：用户名
2020-08-04 17:49:35
217
原创 JavaScript高级（2）——js函数进阶
函数进阶学习目标能够说出函数的多种定义和调用方式能够说出和改变函数内部的this指向能够说出严格模式的特点能够把函数作为参数和返回值传递能够说出闭包的作用能够说出递归的两个条件能够说出深拷贝和浅拷贝的区别目录函数的定义和调用this严格模式高阶函数闭包递归函数的定义和调用函数的定义方式函数声明方式function关键字（命名函数）函数表达式（匿名函数）new Function()举例第三种：第三种里面的 Function是构造函数，必须是字符串形式/
2020-08-03 15:55:21
561
原创 React.js之初体验
react介绍在2013年5月开源React的设计思想及其独特库和框架的区别库：小而巧的是库（jQuery，zepto），只提供了特定的API，优点：“船小好调头”，可以很方便的从一个库切换到另外的库；但是代码几乎不会改变框架：大而全的是框架；框架提供了一整套的解决方案；所以如果在项目中间想切换到另外的框架是比较困难的。...
2020-07-30 14:26:29
84
原创 Node.js之初体验
Node开发概述目录：Node开发概述Node运行环境搭建Node.js快速入门为什么要学习服务器端开发基础能够和后端程序员更加精密的配合网站业务逻辑前置，学习前端技术需要后端技术支撑（Ajax）扩宽知识视野，能够站在更高的角度审视整个项目服务器端开发要做的事情实现网站的业务逻辑（比如用户实现登录，服务器端开发人员要获取到用户输入账号和密码，比对账号是否在页面中是否注册过，再比对输入的密码是否正确，如果全部信息正确，则登录成功，否则登录失败）数据的增删改查（比如购物车的管理页
2020-07-27 17:48:04
207
原创 JavaScript高级（1）——js面向对象
js面向对象学习目标：能够说出什么是面向对象能够说出类和对象的关系能够使用class创建自定义类能够说出什么是继承js面向对象编程介绍面向对象编程介绍两大编程思想面向过程和面向对象面向过程编程POP（Process-oriented programming）面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。举个例子面向过程：就是按照我们分析好的步骤，按照步骤解决问题面向对象编程OOP（Object-orient
2020-07-23 17:52:51
956
原创 JavaScript基础（3）——移动端网页特效
目标及目录触屏事件触屏事件概述移动端浏览器兼容性较好，所以我们不需要考虑以前JS的兼容性问题，可以放心的使用原生JS书写效果，但是移动端也有自己独特的地方，比如触屏事件touch（也称触摸事件），Android和IOS都有。touch对象代表一个触摸点。触摸点可能是手指，也可能是触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。触摸事件对象（TouchEvent）TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点
2020-07-17 11:42:32
358
原创 JavaScript基础（2）——BOM
BOM：浏览器对象模型BOM概述什么是 BOMBOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。比如窗口的后退前进刷新，滚动条的滚动BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。因此只学习一些兼容性比较好的方法和属性浏览器中显示的部分就是文档也
2020-07-06 11:43:24
259
原创 bootstrap-移动WEB开发之响应式布局
响应式布局学习目标一个页面兼容了pc端，pad端，和手机端响应式布局是不需要单独写移动端页面的响应不同的设备发生不同的变化的，包括三端
2020-06-26 21:18:16
833
原创 前端面试之父子div居中
HTML中布局：<body> <div class="father"> <div class="son"></div> </div></body>方法一：使用弹性布局： /* 方法一 弹性布局*/.father { display: flex; width: 200px; height: 200px; background-color: pink;.
2020-06-06 20:49:14
329
原创 JavaScript小白入门1
编程语言和计算机基础编程语言编程计算机语言编程语言翻译器编程语言和标记语言区别编程语言有很强的逻辑和行为。在编程语言里，会有很多的if else、for、while等具有逻辑性和行为能力的指令，是主动的。标记语言（HTML）不用于向计算机发出指令，常用于格式化和链接。标记语言的存在是用来被读取的，是被动的。总结：计算机基础计算机组成硬件、软件数据存储数据存储单位程序运行初识JavaScriptJavaScript 历史发明者：布兰登·艾奇他在199
2020-05-31 21:00:38
272
原创 webpack之初体验
最近在学习javascript高级和ES6的一些内容，为了适应未来去公司的节奏，准备先入门下react，在学习过程中发现在开始就要先配一下webpack的环境~看来有很多要学的…在学习前：Node： 直接在官网对应下载就好，不需要什么特殊操作https://nodejs.org/zh-cn/https://nodejs.org/en/download/在英文官方网站中下载注意在LTS下选择.msi后缀的文件进行下载具体安装呢https://www.runoob.com/nodejs
2020-05-31 09:41:51
240
原创 VSCode中快速格式化web代码
方法一快捷键方式：在编码界面直接按：shift+alt+f方法二也可以设置当我们保存页面的时候自动化代码：第一步：选择文件->首选项->设置也可以直接按 Ctrl+，（若按下无反应请禁用搜狗输入法）第二步：搜索 emmet.include第三步：点击“在 setting.json”中编辑在setting.json下添加以下语句：“editor.formatOn...
2020-04-24 19:43:23
509
原创 悦听player音乐播放器
悦听player音乐播放器：悦听player1.歌曲搜索 2.歌曲播放 3.歌曲封面 4.歌曲评论 5.播放动画 6.mv播放音乐查询：根据关键字查询你想听的歌1.按下回车进行歌曲搜索(v-on .enter)2.查询数据(axios 接口 v-model)3.渲染数据(v-for 数组 that)歌曲搜索接口：请求地址：https://autumnfish.cn/sear...
2020-04-06 10:31:47
3228
原创 置换元素和非置换元素/:after/::after
置换元素和非置换元素置换元素置换元素是指：浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如：浏览器根据<img>标签的src属性显示图片。根据标签的type属性决定显示输入框还是按钮。置换元素在其显示中生成了框，这也就是有的行内元素能够设置宽高的原因。html中的<img><input><textarea><select&g...
2020-03-28 21:21:10
124
原创 link和@import的区别
link和@import的区别：1）link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。2）link可以加载CSS，Javascript；@import只能加载CSS。3）link加载的内容是与页面同时加载；@import需要页面网页完全载入以后加载。用法：1）link的写法：<link rel="stylesheet" href="...
2020-03-08 20:54:02
115
原创 C++学习
时间安排三个阶段第一个C++程序四个步骤：创建项目，创建文件，编写代码，运行程序在Visual studio 2010中创建项目：新建项目->win32控制台程序->选中空项目->在原项目中添加新建项->选择C++文件写cout输出helloworld程序的注释注释**作用：**在代码中加一些说明和解释，方便自己或其他程序员阅读代码变量**作用：...
2020-02-22 21:01:00
143
原创 前端学习之HTML、CSS
学习路线主要学习PC端网站布局：品优购静态网站功能点：基础页面点开页面到链接网页注册页面**目的：**精通网页布局，是前端人员的必备技能，为后面学习JS打好基础路线：HTML5基础->CSS3基础->H5C3提高->项目-品优购电商网站网页的基本组成、HTML网页的基本组成：网站是网页的集合，网页是网站的基本元素。网页是网站的一个页，是HTML格式的...
2020-02-21 21:02:30
881
原创 HTML学习
<!DOCTYPE html> 声明为 HTML5 文档<html> 元素是 HTML 页面的根元素<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。<title> 元素描述了文档的标题<body> 元素包含了可见的页面内容<h1...
2020-02-15 20:33:49
147
原创 C++Primer(第5版)——个人笔记
学习之前：阅读方法：每章至少读两遍；1.第一遍：逐字逐句把内容完整看一遍认为重要的内容、不理解的概念、看不懂的逻辑等做好标记2.第二遍：学习内容的全面理解注意三个概念：概念。概念在不同类型的书里可能是不同的东西，比如公式、定理、定义、论点等。确保自己理解了每一个概念。逻辑。概念是怎么来的，公式定理如何被证明和推导，概念之间存在怎样的关系。关键在于理解逻辑推导的思维过程。例子。...
2020-02-15 16:12:40
121
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人