- 博客(49)
- 收藏
- 关注
RSS订阅
原创 JS高级—ES6新特性
文章目录ES6新特性概述ES2015概述变量声明let和块级作用域const（主用）数组解构对象解构模板字符串简介标签函数字符串扩展参数默认值剩余操作符展开操作符箭头函数简介this对象字面量Object.assign方法Object.is方法class类静态static类的继承extends其他方法SetMapSymbol数据类型for…of遍历ES2015其他内容ES2016概述ES6新特性概述ES2015概述解决原有语法上的一些问题或缺陷（const、let）对原有语法进行增强全新的对象
2021-02-09 20:57:14
1397
原创 基础回顾（五） | PC端静态网页应用开发
PC端静态网页应用开发学习完HTML、CSS内容，搭建一个完整的页面还需要对页面的整体布局有明确的认识才能很好掌握基础。开发流程1、需求分析 要对开发的产品进行定位（产品类型、功能、面向客户群）2、整体规划 确定网站中要展示的内容、层次、展示形式，给出对应内容文案3、界面设计 网站的各个页面进行设计，给出最终的设计图、颜色、数据信息4、前端程序设计将得到的设计图进行代码的编写，实现网页的界面功能5、前后端系统整合后端开发人员进行数据库设计，将程序功能与界
2020-12-20 13:23:29
588
原创 TypeScript的那些事
随着前端技术的更新迭代，TS已经算是很耳熟目染了，也能发现很多技术栈都用到了TS来进行开发，以下主要是针对刚开始初学TS需要掌握的内容强类型与弱类型强类型：不允许有随意的隐式类型转化，例如传入的参数数据格式必须保持一致，否则会直接报语法错误（优势，会在语法阶段直接爆出错误，代码更加智能，编码准确，重构定位问题，减少一步数据类型判断）弱类型：允许有隐式类型转换发生，如果传入参数不一致的情况，不会发生语法错误（存在的问题：错误不能在语法层面直接报错，会发生类型转换，使得函数方法改变，数据类型不.
2021-11-18 16:35:30
543
原创 Javascript性能优化那些事—（下)
主要是从防抖节流方面来具体说明JS部分的优化问题适用场景滚动事件输入的模糊匹配轮播图的切换点击操作简单概述浏览器默认情况下都有自己的监听事件间隔（4~6ms），如果检测到多次事件的监听执行，那么就会造成资源浪费前置场景：界面上有一个按钮，我们连续多次点击防抖：对于高频的操作来说，我们只希望识别一次点击，可以人为认为是第一次或者最后一次 <button id="btn">点击一下</button> <script> .
2021-11-18 16:31:53
662
原创 Javascript性能优化那些事—（上)
此篇JS性能优化主要是针对写代码过程中我们容易产生的一些容易忽视的小问题内存管理因为没有专门的函数调用方法，所以对我们来说，对于内存管理分为3个阶段段，主要是申请内存——使用内存——释放内存垃圾回收与GC算法JS是如何产生垃圾的？● JS中的内存管理是自动的● 当对象不再被引用的时候会视为垃圾● 对象不能从根本访问到的时候GC算法做了什么？对垃圾的查找——释放空间——回收空间都有哪些GC算法？ 引用计数、标记清除、标记整理、分代回收引用计数设置引用数，判断当前引用数是否为0.
2021-10-12 22:37:50
272
原创 一起来手写简易版promise
相信大家学了promise后，面试都会遇到手写promise的现象，我也尝试了通过自己的理解来简单的实现promise手写，发现只要将官方的promise整个API执行了解透彻，手写其实还是很好掌握的，一起来看看~核心逻辑首先我们需要知道promise的核心逻辑01 Promise是一个类，在执行类的时候，需要传递一个执行器，只要new了，执行器就会执行02 Promise中有三种状态，等待Pending，成功Fulfilled，失败Rejectd，一旦确定就不能再更改03 resolve和rej
2021-07-29 22:12:24
502
原创 初识React
初识React如何在react中使用表单元素受控表单表单元素的值全部由react来进行管理，此时表单元素中的值都放在state中，所有表单元素里的值也需要从state当中获取到与数据绑定同步将state中的状态与表单的value值进行绑定 value={this.state.xxxx}如何更新状态值 οnchange={方法} ev.target.value绑定ev.target.name===[prop]: this.setState({})遇到细节问题readOnly 如果希
2021-07-17 16:24:11
236
2
原创 Vue实战问题集
文章目录Vue实战问题集异步请求方法一方法二生命周期Vue实战问题集基于vue理论学习后，实现一些业务逻辑上遇到的问题集合，只有实战才能发现问题，所以我发现了很多问题～异步请求无论什么项目都会使用到父子组件间的传值，最基本的实现就是从父组件请求API拿到数据后*：*方法传给子组件，子组件通过props进行接收，一切看起来都是这么的完美，但是打开一开，控制台报错cannot read property of undefined：两眼懵逼开始……其实是因为渲染的时候，子组件还没有拿到数据，所以渲染
2021-06-08 20:33:18
167
原创 VUE（三）组件
Vue.js组件组件用于封装页面的部分功能，将功能的结构、样式、逻辑代码封装为整体，提高代码的复用性和可维护性，更好专注于业务逻辑组件注册全局注册全局注册的组件在注册后可以用于任意实例或组件中，必须注册在根Vue实例创建之前Vue.component('my-component',{ template:'<div>这是全局组件</div>' })组件基础本质上组件是可复用的Vue实例，可与new Vue接受相同的选项，如data、methods以及生命周期钩子
2021-03-20 17:31:31
124
原创 VUE（四）路由Router
Vue RouterVue Router是Vue.js的官方插件，用来快速实现单页应用单页应用SPA（Single Page Application）单页面应用程序，简称单页应用。网站的“所有”功能都在单个页面中进行呈现，一般是表现效果相似，页面并没有进行切换优点：前后端分离开发，提高开发效率业务场景切换时，局部更新结构用户体验好，更好接近本地应用缺点：不利于SEO初次首屏加载速度较慢页面复杂度较高前端路由URL与内容间的映射关系Hash方式通过hashch
2021-03-20 17:30:39
171
原创 VUE（一）初识VUE.JS
初识VUE.JSDOM操作频繁，代码繁杂；DOM操作与逻辑代码混合，可维护性差；不同功能区域书写在一起，可维护性低；模块依赖关系复杂Vue.js简介遵循vue.js规则来使用这个工具提高我们的开发数据驱动视图**单向数据绑定：**数据变化会自动更新到对应元素视图中，无需手动操作DOM**双向数据绑定：**自动将元素输入内容更新给数据，实现数据和元素内容的双向绑定（可输入元素）**MVVM：**软件开发思想model—代表数据view—试图模板viewmodel—业务逻辑处理代码基于
2021-03-13 17:39:28
192
原创 VUE（二）事件与表单处理
事件与表单处理事件处理v-on指令可以进行事件的绑定<button v-on:click="content='按钮1更新后的内容'">按钮1</button><button @click="content='按钮2更新后的内容'">按钮2</button>//简写方式<button @click="fn2(200,$event)">按钮4</button>//通过函数进行事件的添加表单绑定v-model指令用于给inpu
2021-03-13 17:38:26
195
原创 模块化开发
模块化开发模块化发展第一阶段基于文件的划分模块方式污染全局作用域命名冲突问题无法管理模块依赖关系第二阶段命名空间方式，每个模块只暴露一个全局对象， 所以模块成员都挂载在这个对象中没有私有空间，在外部仍然会被访问到第三阶段立即执行函数，闭包方式，实现了私有成员的概念模块规范化的出现模块化标准+模块加载器Commonjs模块，一个文件就是一个模块，每个模块都有单独作用域，通过module.exports导出成员，require函数中载入模块AMD模块化，requ
2021-03-08 15:04:24
210
1
转载 H5新增特性总结
在很多的面试题中，我们都会看到有H5新增样式属性的选项，那么H5究竟增加了哪些新属性呢？总的来说H5比H4多了10部分内容新特性，但其暂不支持IE8及IE8以下版本的浏览器语义标签H5新定义的语义标签，可以方便开发者清晰构建页面的布局标签描述header定义了文档的头部区域footer定义了文档的尾部区域nav定义文档的导航section定义文档的节article定义文章aside定义页面以外的内容details定义用户可以看.
2021-03-07 09:55:41
604
原创 解决vscode运行npm包报错问题
在学习node过程中少不了使用npm下载安装包然后使用，但使用过程中总会有一些问题，我将问题解决汇总如下：报错1：在全局下安装了json-server的包，但在vscode中运行过程中任然报错，说无法将"json-server"识别为cmdlet、函数、脚本文件或可运行程序的名称路径此类原因是虽然在全局下安装了，但是可能vscode的终端模式是powershell模式，我们需要右击文件目录在集成终端打开，选择第一项cmd方式我们就可以看到powershell转化为cmd执行报错2：显示.
2021-03-05 11:27:17
2443
1
原创 实现轮播图特效
轮播图是前端内容最基础的部分，轮播图html框架和css样式，以及如何通过JS实现左右按钮点击切换、自动轮播、小圆点点击切换轮播的效果；其中包括了最基本的轮播效果、和3D实现动画轮播效果基本实现效果html代码部分<body> <div class="carousel" id="carousel"> <ul class="pic" id="pic"> <li class="current"><i.
2021-03-03 15:43:23
1717
2
原创 Node—前端工程化概述
文章目录前端工程化概述简述Node.js基础Node.jsNode.js APIsNode.js使用全局对象全局函数模块内置模块consoleprocesspathfs—file systemfs实践—文件的复制和压缩文件流http自定义模块简介加载逻辑第三方模块npm概述安装--save和--save-dev脚手架工具Yeoman前端工程化概述简述什么是工程？工程化：在完成一个项目的时候所用到的技术和工具，用来提高前端开发的效率前端工程化的萌芽：内容：项目上线的时候，需要进行压缩代码，更
2021-03-02 19:52:27
584
原创 Node—自动化构建
文章目录自动化构建构建自动化构建npm scripts样式文件脚本文件ESLintStyleLintGulp基础对比npm script使用Gulp组合任务文件操作构建文件样式文件脚本文件HTML文件图片文件清除文件服务发布BootstrapGulp和yeoman自动化构建构建源代码——>生产代码一些代码需要编译 （CSS、JS），保证浏览器的兼容性；有些代码需要压缩；有些代码需要统一代码风格自动化构建将手动构建任务，通过命令自动执行的过程，把所有的任务按逻辑排列在一起，一条命令进行执行
2021-03-02 19:51:55
379
原创 AJAX—基础
文章目录Ajax基础概述xhr对象open方法send方法响应状态同步和异步数据格式xmljsonjson-server使用方法原生Ajax应用GET方法POST方法响应数据渲染封装Ajax函数Ajax基础概述已知发送请求的方式：地址栏输入地址，回车刷新、特定元素的href属性、表单提交，一般来说都是通过浏览器操作的，这些方案无法通过代码方式实现对服务器端发送请求需求：对服务器发出请求并且能够接收服务端返回的响应，通过js直接发送网络请求，web的可能就会更多，实现的功能也就越多Google
2021-02-23 22:33:13
194
原创 AJAX—常用库
文章目录Ajax常用库jQuery中的ajax方法$.get（）$.post（）其他类型请求jQuery其他方法Axios介绍Axios API全局配置默认值参数拦截器快速请求get和postHTML5.0onload事件onprogress事件HTTP2.0response属性responsType属性跨域和模板引擎同源策略JSONP原理jQuery库中JSONPcors跨域模拟百度搜索案例模板引擎artTemplateartTemplate应用百度搜索案例留言板案例模板引擎artTemplateartT
2021-02-23 22:28:56
981
原创 AJAX—留言板功能实现获取、增加、删除数据
简单说明AJAX案例分析，AJAX可以实现局部数据的刷新，最常见的就是在百度搜索框中，我们可以看到每输入内容后都可以自动弹出相关内容，使用百度引擎的API，通过AJAX传参，获取后台数据实现的留言板实现的就是，对后台信息的传入渲染，新增信息追加页面并且在后台数据库中更新，也可以进行内容的删除初始状态下页面需要添加新的数据进来<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-.
2021-02-23 22:21:38
1327
原创 浏览器输入URL按回车后，会发生什么?
界面渲染过程步骤1、用户输入想要访问的url地址2、DNS会完成域名解析，帮我们找到相应的IP服务器主机Chrome浏览器会首先搜索浏览器的DNS缓存，看自身的缓存中是否有www.lagou.com对应的条目，而且没有过期，如果有且没有过期则解析到此结束。如果浏览器自身的缓存里面没有找到对应的条目，那么Chrome会搜索操作系统的DNS缓存，如果找到且没有过期则停止搜索解析到此结束。如果在Windows系统的DNS缓存也没有找到，那么尝试读取hosts文件，看看这里面有没有该域名对应的IP
2021-02-20 17:56:14
245
原创 jQuery（一）—基础
jQuery基础简介一个高效、精简并且功能丰富的JS工具库，主要对JS中选择元素的方法进行了大量的优化获取元素//之前学习没有兼容性问题方法var box = document.getElementById("box");var box = document.getElementsByTagName("div")[0];//jquery方法$(".box") $("#box")获取css样式并修改console.log($("#box").css("width")); /
2021-02-18 20:05:19
147
原创 jQuery（二）—排序和动画
jQuery排序和动画排序eq大排序jQuery中获得的对象，在内部会进行一个大的排序，将选中的对象从0开始排在一起eq（）通过下标获取某个对象，下标是大的排序的下标 // 获取元素 var $ps = $("p"); //使用eq方法,下标均为被选择元素组成的重新下标值 $ps.eq(0).css("background-color", "pink"); $ps.eq(5).css("background-color", "pink"); // 通过其他方法获取元素 $("
2021-02-18 20:04:31
184
原创 jQuery（三）—节点操作和元素尺寸
jQuery节点操作和元素尺寸节点操作创建、追加元素$（）直接传入想要创建的节点var $newli = $("<li>这是一个新的li标签</li>")追加元素1（给父元素内部追加） $ul.append($newli);//在父元素最后追加 $newli.prependTo($ul);//在父元素最前面追加 $newli.appendTo("ul");追加元素2（给兄弟元素追加）,一般是多个标签存在给确定样式的某个元素的前或后面添加 $old.
2021-02-18 20:03:59
111
原创 JS高级—面向对象
文章目录面向对象概念对象面向对象面向过程实际区分面向对象和面过程创建对象构造函数new关键字的用途constructor属性instanceof属性静态成员和实例成员问题原型对象prototype原型对象更好解决方案使用建议原型链实例对象读写原型对象成员原型语法内置构造函数随机方块随机方块面向对象概念对象万物皆对象，单个事物的抽象对象是一个容器，封装了属性(property对象的状态)和方法(method对象的行为)面向对象面向对象编程（Object Oriented Programmi
2021-02-09 21:05:31
528
原创 JS高级—贪吃蛇游戏
文章目录贪吃蛇游戏——分析食物对象Food蛇对象Snake游戏对象Game化简自调用函数作用域贪吃蛇游戏——分析我们可以将整个游戏中的内容抽象成三个对象游戏对象Game蛇对象Snake食物对象Food食物对象Food创建Food的构造函数，并设置属性xywidthheightcolor通过原型设置方法render随机创建一个食物对象并输出到map上自调用函数进行封装，通过window暴露Food对象蛇对象Snake创建Snake的构造函数，并
2021-02-09 21:03:47
202
原创 JS高级—继承和函数进阶
文章目录继承和函数进阶继承对象之间的继承原型继承函数的call方法借用构造函数继承属性构造函数方法的继承组合继承函数进阶函数声明和函数表达式函数调用和thiscall、apply、bind方法函数的其他成员高阶函数闭包概念理解和应用问题继承和函数进阶继承对象之间的继承通过for…in实现对象间的拷贝//继承的函数 function extend(parent, child) { for (var k in parent) {
2021-02-09 21:02:00
416
原创 JS高级—正则表达式
文章目录正则表达式概述概念作用创建方法字符串方法正则方法字符字符集修饰符边界预定义类量词分组中文匹配正则表达式概述概念对字符串操作的一种逻辑公式用事先定义好的一些特殊字符、及这些特定字符的组合，组成一个”规律字符串“，用来表达对字符串的一种过滤逻辑作用给定的字符串是否符合正则表达式的过滤逻辑（匹配）通过正则表达式，从字符串中获取我们想要的特定部分（提取）强大的字符串替换能力（替换）创建方法使用正则表达式字面量创建（最为常用）var reg = /abc/;调用Re
2021-02-09 20:59:42
317
原创 Web API—BOM
BOM概念BOM（Browser Object Model）浏览器对象模型，提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成。代表浏览器窗口的Window对象是顶层对象，其他对象都是该对象的子对象可以使用BOM进行处理的，刷新浏览器、后退、前进、在浏览器输入URL地址window对象window对象在调用属性和方法时，可以省略window不写特殊属性name，如果定义新的变量，只会在原来的name属性上进行赋值，并且只能是字符串类型top属性在window中
2021-02-02 12:16:16
581
原创 Web API—DOM（二）
文章目录DOM-Web APIDOM节点操作节点属性父子节点兄弟节点节点操作案例分析DOM事件操作addEventListenerattachEvent注册事件兼容写法解除事件DOM事件流事件流三阶段冒泡应用事件对象offset系列属性client系列属性scroll系列属性拖拽案例弹出层案例DOM-Web APIDOM节点操作节点属性 var box = document.getElementById("box"); // 元素节点 console.dir(box); //nodeNam
2021-02-02 12:11:07
89
原创 Web API—DOM（一）
文章目录DOM-Web APIAPI概念Web API概念DOMDOM操作—获取元素根据id获取根据标签名获取根据name属性获取根据class属性获取根据选择器获取标签内部内容属性DOM—添加事件事件监听常用事件监听方法非表单元素属性this指针案例分析表单元素属性案例分析自定义属性style样式属性案例分析DOM-Web APIAPI概念API（application programming interfance）应用程序编程接口，预先定义的函数，提供应用程序与开发人员得以访问一组例程的能力，而
2021-02-02 11:55:11
146
原创 JS语法回顾（四）
文章目录JS语法（四）对象概念对象字面量调用对象内部属性和方法更改对象内部属性和方法其他创建对象的方式对象遍历简单数据类型和复杂数据类型内置对象MDN使用方法Math对象简介常用Math成员数组对象通过构造函数来创建数组常用属性和方法清空数组字符串对象基本包装类型字符串特点字符串属性方法JS语法（四）对象概念**为什么要用对象？**数据存入数组中受下标限制又必须有固定的顺序，而对象可以自定义名称存储一系列无序的相关数据**什么式对象？**万物皆对象，对象式一个具体的事物，具有行为和特征。无序属性
2021-01-27 17:58:42
85
原创 JS语法回顾（三）
文章目录JS基础语法(三)数组概念获取数组长度数组的长度数组的遍历函数概念函数声明函数调用函数的返回值函数表达式函数的数据类型argument对象函数递归作用域作用域链和遮蔽效应预解析和声明提升IIFE自调用函数JS基础语法(三)数组概念将多个元素按一定顺序排列放到一个集合中， 这个集合我们称之为数组数组的字面量[]，多个数据之间使用，分隔 // 创建一个数组 var arr = []; // 创建一个包含多个数据类型的数组，数据类型不限制 var arr2 =
2021-01-27 17:50:45
82
原创 JS语法回顾（一）
文章目录简介网页、网站、应用程序前端三层HTMLCSSJavascriptJavaScript发展组成计算机组成书写语法书写位置注释alert语句prompt语句console控制台数据类型字面量概念数字字面量字符串字面量变量概念变量声明数据类型简介网页、网站、应用程序网页：单独的一个页面（html、css）网站：一系列相关的页面组合在一起应用程序：可以和用户产生交互，并实现某种功能前端三层HTML结构层，从语义的角度来描述页面CSS样式层，从美观的角度描述页面的样式Jav
2021-01-24 22:34:18
95
原创 JS语法回顾（二）
文章目录操作符算数运算符比较运算符逻辑运算符赋值运算符一元运算符运算符优先级流程控制语句表达式、语句if语句三元表达式switch语句for循环do while循环while循环break语句continue语句穷举思想累加器、累乘器操作符表达式的组成包含操作数和操作符，最后的表达式最后会的得到一个值然后去参与运算我们讨论的非特殊情况，工作中并不会遇到特殊的运算，但是面试可能会遇到算数运算符+、-、*、/、%、（）运算顺序，先算乘除取余，再算加减，有括号先算括号里的非正常情况
2021-01-24 22:33:34
92
原创 基础回顾（十）| 响应式布局—阿里佰秀
文章目录响应式布局—阿里佰秀响应式开发原理Bootstarp框架简介布局容器栅格系统实例练习屏幕划分container宽度修改布局响应式布局—阿里佰秀响应式开发原理使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的设备划分尺寸区间设置宽度列前缀超小屏幕（手机）<768px100%.col-xs-小屏设备（平板）>=768px ~ < 992px750px.col-sm-中等屏幕（桌面）>=9
2021-01-22 17:16:11
90
原创 基础回顾（九) | 苏宁项目Rem
文章目录Rem—苏宁项目Rem单位媒体查询简介语法规范Rem媒体实现动态变化媒体查询引入方式Less基础css弊端Less简介和安装Less基础Rem的适配方案适配目标？如何达到？实际开发？苏宁项目公共样式common.less文件制作新建index.less文件顶部结构轮播图部分flexible.js简介改进实现改进实现Rem—苏宁项目思考？页面布局文字能否随屏幕变化而变化？如何让屏幕发生变化是，宽高等比例变化？Rem单位是一个相对单位，类似于em，em是父元素字体的大小rem的基准是
2021-01-22 17:12:34
216
原创 基础回顾（七）| 流式布局_京东项目
报名拉勾教育“大前端就业集训营”课程已经1月之久了，就想来谈谈我的看法，关于自学，报班学习~在之前我一直觉得我不会报班的，一方面是因为费用比较高，另一方面我觉得通过我自己的学习可以让我掌握学习内容。我自己的情况是有自学前端课程快一年，在这个自学过程中，先是问同学、看各种前端学习路线来指定自己的学习计划，然后在哔哩哔哩上看课程，大概学到vue框架了，但是发现自己的基础特别不扎实，就属于有的没的都在学，学完之后也不知道实际上班怎么去使用、到底会不会用到这些……心里特别没底气，总觉得自己啥都不会（实际上是有点.
2021-01-03 21:27:51
384
原创 基础回顾（八）| Flex布局—携程网项目
Flex布局—携程网项目传统布局和flex布局传统布局兼容性好、布局繁琐局限性，不能在移动端很好的布局flex布局操作方便，布局极为简单，移动端应用很广泛PC端浏览器支持比较差IE11低版本不支持选择方式如果是PC端页面布局，考虑传统布局模式如果是移动端或者不考虑兼容性问题的PC端，使用flex弹性布局布局原理flexible box弹性布局，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为flex布局当父盒子设置为flex布局以后，子元素的float、cl
2021-01-03 21:26:03
285
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人