- 博客(34)
- 收藏
- 关注
RSS订阅原创 canvas 和 css画三角形
1：html5的新标签canvas 介绍：canvas 是html5的一个新标签，属于h5 的新特性canvas标签是一个图形容器，可以视为是一块画布，可以画各种图形canvas是通过javascript来画的，即脚本绘制图形2：画三角形（上三角）<body onload="draw()"> <canvas id="canvas" width="300" height="300"></canvas></body></h
2021-04-13 12:58:11
367
原创 关于vue-router需要知道的
1：MVVM框架是什么？mvvm即Model-View-ViewModel，它的设计原理是基于mvc的Model 代表数据模型，负责业务逻辑和数据封装View 代表UI组件，负责界面和显示ViewModel 监听模型数据的改变和控制视图行为，链接View 层和 Model 层，处理用户交互2：vue-router是什么？有哪些组件？vue-router 是Vue.js 官方的路由管理器< router-link> 和 < router-view> 和 < k
2021-04-12 22:00:23
415
1
原创 CSS预处理器——sass & less
1：什么是CSS预处理器？基于CSS的另一种语言可通过工具编译成CSS添加了很多CSS不具备的特性能提升CSS文件的组织方式2：CSS 预处理器作用帮助更好的组织CSS代码提高代码的复用率提升可维护性3：预处理器的功能（从使用上谈）嵌套：反映层级和约束变量和计算：减少重复代码Extend 和 Mixin：代码片段复用循环：适用于复杂有规律的样式import：CSS文件模块化4：预处理器的优缺点优点：提升代码复用率和可维护性缺点：需要引入编译过程，有学习成本
2021-04-11 21:39:37
635
原创 关于CSS需要知道的一些
一：关于positionposition属性的取值有：static | relative | absolute | fixed | stickystatic（静态定位）：- 无特殊定位，对象遵循正常文档流。top, right, left, bottom等属性不会被应用relative（相对定位）：- 对象遵循正常文档流，但将依据top, right, left, bottom等属性在正常文档流中偏移位置；- 其后元素是依照top/left等生效之前的位置进行定位的；- 而其叠
2021-04-11 15:46:53
167
原创 正则表达式
关于正则表达式的一些规则：^：与字符串开始的地方匹配，自身不匹配任何字符$：与字符串结束的地方匹配，自身不匹配任何字符\r：回车\n：换行\d：任意一个数字（0-9）\w：任意一个字母或数字下划线，也就是A-Z,a-z,0-9,_中的任意一个\s：包括空格，制表符，换页符等空白字符的其中任意一个. ：小数点可以匹配除了换行符（\n）以外任一一个字符 “a.\d”匹配“aaa100”得到的结果是“aa1”：开始于1，结束于4使用[ ]表示包含一系列字符
2021-04-09 21:48:36
435
原创 关于setTimeout
1：注意 setTimeout每次 for 循环的时候 setTimeout 都会执行，但是如果第一个参数是函数的话则不会执行，会被放入任务队列注意第一个参数是函数执行(立马执行)还是函数定义（定时器到了再触发执行）插入一个关于setTimeout第三个参数的使用：第三个及以后的参数可以作为setTimeout第一个函数的参数使用：是解决for循环连续输出n个n的解决方式之一已理解：1）立即输出666var cl = function() {console.log(666)}setTime
2021-04-05 14:41:13
511
1
原创 事件代理
1：事件绑定 和 事件代理// 写一个兼容 普通绑定 和 事件代理绑定的函数bindEvent(elem, type, selector,fn) { // 3个参数还是4个参数的判断 if(fn == null){ fn = selector selector = null } elem.addEventLister(type, event => { const target = event.target // 代理绑定 if(sel
2021-04-03 16:03:52
105
原创 webpack（打包）和babel（转译）
webpack 和 babel1：为什么需要使用 webpack打包 和 babel进行转译 ?ES6 模块化，浏览器暂不支持ES6 语法，浏览器并不完全支持压缩代码，整合体积，让网页加载更快2：webpck工作原理：其核心价值就是前端源码的打包，即将前端源码中的每一个文件（无论任何类型），都当作一个 pack ,然后分析依赖，将其最终打包出上线运行的代码核心部分： entry 规定入口文件，一个或多个 output 规定输出文件的位置 loader 各个类型的转换工具
2021-04-03 13:20:11
794
原创 前端性能优化
性能优化原则多使用内存，缓存或其他方法减少CPU计算量，减少网络加载耗时（适用于所有编程的性能优化——空间换时间）可从 让加载更快 和 让渲染更快 两方面下手1）让加载更快减少资源体积：压缩代码减少访问次数：1： 合并代码(图片都放在一张图里，使用css定位来获取具体图片)，SSR服务端渲染，缓存2： 多个js文件合并到一个js文件，这样只用发一次网络请求使用更快的网络使用CDN2）让渲染更快CSS放在head,JS放在body最下面尽早执行JS,用DOMC
2021-04-02 09:07:33
109
原创 React——select 标签（表单）
表单——select 标签React实现下拉框选中提交后，alert所选值function Button(props) { return <button onClick={props.submitAction}>提交</button>}class FavorSelect extends React.Component { constructor(props) { super(props) this.submit = this.submit.bind(
2021-04-01 17:57:54
1212
原创 React——条件渲染
条件渲染React 中的条件渲染和 JavaScript 中的一样，使用JavaScript 运算符 if 或者条件运算符去创建元素来表现当前状态，然后让React 根据他没来更新 UIfunction UserGreeting(props) { return <h1>Welcome back!</h1>;}function GuestGreeting(props) { return <h1>Please sign up.</h1>;}/
2021-04-01 17:54:39
148
原创 React——事件处理
事件处理React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同:React 事件的命名采用小驼峰式（camelCase）使用 JSX 语法时需要传入一个函数作为事件处理函数，而不是一个字符串传统HTML:<button onclick="clickAction()">click</button>React中：<button onClick={clickAction}>click</button>不能通过返回fals
2021-04-01 16:05:47
121
原创 ES6——箭头函数
箭头函数1：语法( ）=> {…} // 零个参数用()表示x => {…} // 一个参数可省略（）(x, y）=> {…} // 多参数不能省略（）函数体是多行语句时需要用{ }括起来，单行表达式不需要{ },并且会作为函数值返回2：特性箭头函数没有 arguments箭头函数没有 prototype 属性，所以不支持 new 操作，不能用作构造函数箭头函数中对于this的处理也与普通函数不同：箭头函数中的 this 始终等于它上层的上
2021-04-01 16:01:01
146
原创 React——JXS
1：关于JSX React中文文档原文说道：大多数React开发者使用了一种名为”JSX“的特殊语法，JSX可以让开发者更加轻松的书写这些结构 它是一种JavaScript的语法扩展，运用于React架构；元素是React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面...
2021-04-01 11:34:53
1338
原创 React——元素渲染
3:元素渲染元素描述了我们想在屏幕上看到的内容，它与浏览器的DOM元素不同，React元素是创建开销极小的普通对象；React DOM会负责更新DOM来与React元素保持一致将一个元素渲染为DOM：想要将一个React元素渲染到根DOM节点中，只需要把它们一起传入React DOM.render():更新已渲染的元素：React元素是不可变对象，一旦被创建就无法修改其子元素或者属性；故更新它的唯一方式就是创建一个全新的元素，并将其传入React.render();如下计时器例子：functio
2021-04-01 11:31:12
181
原创 React——组件 & Props
组件 & Props1）定义组件的方式：【组件名称必须以大写字母开头！！！】函数声明：编写JavaScript函数，该函数是一个有效的React组件，它接受唯一带有数据的“props”属性对象并返回一个React元素，被称为“函数组件”类声明：使用ES6的class来定义组件二者等效// 函数组件function ReactElement1(props) { return <h1>hello,{props.name}</h1>}// ES6的class
2021-04-01 11:25:46
158
原创 React——State & 生命周期
State & 生命周期计时器代码：// 封装clock时钟组件// 函数声明组件----->是个组件！！！function Clock(props) { return ( <div> <h1>Hello,world</h1> <h2>It is {props.data.toLocaleTimeString()}.</h2> </div> )}function
2021-04-01 11:22:31
203
原创 JS——节流
节流-throttle拖拽一个元素时，要随时拿到该元素的拖拽位置直接使用drag事件，则会频繁触发，很容易导致卡顿节流：无论拖拽速度多快，都会每隔100ms触发一次// 未封装const dom1 = document.getElementById('dom1')let timer = nulldom1.addEventListener('drag',function (e) { if(timer) { return } timer = setTimeout(() =>
2021-03-25 16:34:31
18958
4
原创 js——防抖
防抖（debounce）监听一个输入框，文字变化后触发change事件，直接用Keyup事件，则会频繁触发change事件；防抖：用户输入结束或者暂停时，才出发change事件说在前面：1）aplly用法详解2）keyup事件代码实现：1：未封装版本const inputDom = document.getElementById('input')let timerinputDom.addEventListener('keyup', () => { if(timer) {
2021-03-25 14:07:41
2558
2
原创 数组去重 * 3 & 深度比较isEqual
1：数组去重// 最为经典及简洁function unique2(arr){ const result = [] arr.forEach(e => { // 没有的话直接往里面加 if(result.indexof(e) < 0) { result.push(e) } })}// set的使用function unique3(arr) { const result = new Set(arr) return Array.from(res
2021-03-25 13:43:51
393
原创 Js基础——apply,call,bind
apply,call,bind的用法及差异var name = 'Ben', age = 4var obj = { name: 'Jane', objAge: this.age, myFun:function() { console.log(this.name + '年龄' + this.age, "来自" + fm+ "去往" + to) }}var test = { name: 'Jane', age:22}obj.call(test, '美国'，'中国'
2021-03-25 11:40:49
143
1
原创 JS异步 & event loop 事件循环机制 & 宏任务和微任务
一：单线程和异步JS是单线程语言，只能同时做一件事浏览器和nodejs已支持JS启动进程，如Web WorkerJS和Dom渲染共用一个线程进程（process）:系统中正在运行的一个应用程序；程序一旦运行就成为了一个进程线程（thread）：线程时进程的最小执行单位，一个进程中可以只有一个线程，这称为单线程，也可以存在多个线程并行执行不同的任务，这称为多线程基于JS是单线程语言，但是同步会阻塞代码执行，异步不会阻塞代码执行(是以回调callback函数形式)，故在JS的应用中引入了异
2021-03-24 22:04:44
282
1
原创 ECMAScript 6 入门之async函数
async 表示函数里有异步操作await 表示紧跟在后面的表达式需要等待结果async 函数的返回值是一个Promise对象，可以用then方法指定下一步的操作async getBdcdyhArr() { const response = await BdcdyService.getBdcdy('111') return resonse}getBdcdyhArr.then(val => this.$emit('updateData', val)...
2021-03-24 15:21:07
184
原创 作用域和闭包
JS基础——作用域和闭包1：作用域全局作用域：全局都可以使用。例如window, document对象函数作用域：在当前函数方法里使用块级作用域(ES6新增)：例如在 if for while 等语法后面有个大括号{ }2：自由变量一个变量在当前作用域中没有被定义但是被使用了向上级作用域一层一层依次寻找，直到找到为止如果全局作用域都没找到，则报错xxx is not defined3：闭包它是一种作用域应用的特殊情况，具体有两种表现：函数作为参数被传递函数作为返回值被返
2021-03-24 15:17:00
143
1
原创 原型和原型链
原型和原型链1）概念介绍原型：原型关系每个class都有显示原型prototype每个实例都有隐式原型_proto_实例的隐式原型指向对应class 的显示原型基于原型的执行规则实例获取属性或者调用方法时，先在自身属性和方法寻找，如果找不到就自动去隐式原型中寻找原型链重要提示：class 是ES6语法规范，由ECMA委员会发布ECMA只规定语法规则，及代码书写规范，不规定如何实现以上的实现方式都是V8引擎（chorme内置的一个执行解析js代码的环境）的实现方式，也是主流的
2021-03-24 11:10:13
116
原创 JS基础——变量类型 & 深浅拷贝
一：JS值类型和引用类型1）概念介绍值类型直接存储在栈中：常见值类型：undifined,string,number, boolean,symbol引用类型使用了堆 和 栈 两种存储结构：真正的值存储在堆中常见引用类型：数组，对象，Null，函数2）引申的常见应用1：typeof能判断哪些类型可以识别所有值类型识别函数判断是否是引用类型（不可再细分，会统一识别为object）2：何时使用 === 何时使用 ==== 比较时会进行类型转换，而===时要求严格相等==运算符何时使
2021-03-24 10:02:53
200
原创 工作笔记small tips
…持续更新1：双问号运算符类似于 || 运算符只有当??前面的数据为undifined或者null时，取问号后面的数据例：说在前面： 关于JS的数据类型之一undifined： 1）未初始化的变量（尚未初始化赋值的变量默认为**undifined**） 2）不存在的对象属性 3）不存在的数组元素 都将返回undifinedlet a // undifined（情况1）a ?? 'default' // 输出：'defa
2021-03-03 16:07:34
215
原创 ECMAScript 6 入门之Promise
基于阮一峰ES6入门的阅读，摘录总结如下：1:Promise的含义：Promise是异步编程的一种解决方案。从理解上来解释它可以视为一个容器，里面保存为未来才会结束的事件(通常是一个异步操作)的结果；从语法上来说，Promise是一个对象，它可以获取异步操作的消息，它对外提供一个统一的API,各种异步操作都可以用同样的方法进行处理有了Promise对象，就可也将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数2：Promise的基本用法ES6规定，Promise对象是一个构造函数.
2021-02-24 17:34:04
205
原创 存储之cookie，localStorage ,SessionStroage
cookis localStroage sessionStroage 三者的区别1:cookie：描述：本身作为http请求的一部分，是用于浏览器和serve通讯被“借用”到本地存储来可用document.cookies = ‘…’ 来修改缺点：存储大小最大4KBhttp请求时会发送到服务端，增加请求数据量只能用document.cookie = ‘…’来修改，其中赋值模式为key=value形式，若key不存在直接追加，若key存在，直接覆盖赋值，这种修改模式使用
2021-02-18 22:45:39
256
原创 基于 XMLHttpRequest 实现的 Ajax 及ajax跨域实现的两种方式
一：Ajax的核心API-XMLHttpRequest：1. XMLHttpRequestconst xhr = newXMLHttpRequest()/*post请求*///xhr.open('POST', '/login', true)/*get请求*/xhr.open('GET', '/data/test.json', true)xhr.onreadystatechange = function () { if (xhr.readySatte === 4) { if(xh
2021-02-18 22:37:40
491
原创 前端http相关常见面试题
一：http常见的状态码有哪些？1. 状态码分类1xx服务器收到请求2xx请求成功，如 2003xx重定向：因为某些原因请求的路径无法正常访问，返回一个新地址让客户端重新请求，如 3024xx客户端错误：请求了错误，不存在的地址，如4045xx服务端错误：服务端挂掉了/存在bug，如5002. 常见状态码200 成功301 永久重定向配合location, 浏览器自动处理:比如自己的域名过期，更新了其他域名，返回状态码薇301的话，为永久重定向，浏览器字第一次重定向后便会记住，之后访
2021-02-18 22:32:52
2260
原创 JS中对象，数组，字符串的常用方法
arr.valueof() // 返回数组本身arr.toString() // 将数组以字符串形式返回arr.pop() // 删除数组的最后一个元素并返回被删除的元素 【方法会改变数组的长度】arr.shift() // 删除数组的第一个元素并返回被删除的元素【该方法也会改变数组的长度】arr.unshift() // 在数组的起始位置添加新的元素【不仅限于添加一个】arr.splice() // 从数组中删除项目并返回被删除的项目构成的数组/向数组中添加
2021-02-13 11:02:38
332
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人