- 博客(28)
- 收藏
- 关注
RSS订阅原创 Webpack基础
什么是Webpack Webpack 本质上是一个模块化打包工具，它通过“万物皆模块”这种设计思想，巧妙地实现了整个前端项目的模块化。在 Webpack 的理念中，前端项目中的任何资源都可以作为一个模块，任何模块都可以经过 Loader 机制的处理，最终再被打包到一起。 最初的时候，具体做法是将每一个功能及其相关状态数据各自放到不同的js文件中，一个script标签对应一个模块。 ├── module-a.js ├── module-b.js └── index.html
2022-01-17 09:51:21
205
原创 JavaScript装饰器
装饰器装饰器（Decorator）是一种与类（class）相关的语法，用来注释或修改类和类的方法。许多面向对象的语言都有这项功能。装饰器是一种函数，写成@ + 函数名。它可以放在类和类方法的定义前面。@Refreshclass Person { @enumerable method() {}}类的装饰@Refreshclass ListComponent {}function Refresh(target) { target.count = 1;}ListComp
2021-09-21 10:04:46
627
原创 JavaScrip的事件循环
处理事件（事件循环机制）当事件发生时，浏览器调用相应的事件处理器，由于js是单线程执行，在用一个时刻只能处理一个事件。在事件处理阶段，例如用户发生了移动和点击事件。会把这些事件放在事件队列里边，事件循环会检查队列，发现队列的前面有一个移动事件，移动事件处理完后，js退出处理器函数，事件循环会再次检查队列，这一次，在队列的最前面，发生了点击事件，然后处理完在退出。一旦单击处理器执行完成。队列中不在有新的事件，事件循环会继续循环等待新的事件。这个循环会一直执行到用户关闭web应用。深入事件循环事件循
2021-05-30 13:59:01
125
原创 JavaScript——Set和Map基础用法
SetES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。基本用法Set.prototype.size：返回Set实例的成员总数。Set.prototype.add(value)：添加某个值，返回 Set 结构本身。Set.prototype.delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。Set.prototype.has(value)：返回一个布尔值，表示该值是否为Set的成员。Set.prototype.clear()：清除所有
2021-03-18 14:46:10
336
1
原创 Vue3.0Proxy实现双向绑定指令
平常在vue中使用v-model使用较多，下面来看一下实现简易原理。创建全局ob视图，结合观察、订阅模式完成双向绑定。 <div id="app"> <input type="text" v-model='message' /> </div> <script>const app = new Reactive({ el: '#app', data() { return { me
2021-03-04 18:11:22
592
1
原创 数组常用方法
数组添加、删除元素push：在数组末尾添加元素。unshift：在数组开头添加元素。pop：从数组末尾删除元素。shift：从数组开头删除元素。// 添加元素const arr = [];arr.push(1);console.log(arr); // [1];arr.unshift(0);console.log(arr); // [0, 1];//删除元素const arr = [0, 1];arr.pop();console.log(arr);// [0]arr.
2021-02-05 15:48:58
105
原创 Proxy控制对象的访问
定义getter和setter通过对象字面量定义，或者在ES6的class中定义const ninjas = { ninjas: [1, 2, 3], get firstNinja() { return this.ninjas[0]; },//定义firstNinja的getter方法，返回ninja列表中第一个值，并记录一次消息 set firstNinja(value) { this.ninjas[0] = value } //
2021-01-27 15:44:10
426
原创 Babel 配置基础用法
Babel转码器babel是一个广泛使用的ES6转码器，可以将ES6代码转换为ES5代码，从而在老版本浏览器执行。初始化项目命令行 生成package.json文件npm init@babel/core 这个包主要是对代码进行转换的核心方法npm install --save-dev @babel/core@babel/cli这个是内置的cli，可以让我们从命令行来编译我们的文件npm install --save-dev @babel/cli@babel/preset-env，最新
2020-12-29 19:09:02
4236
原创 生成器Generator
什么是执行上下文在 JavaScript 中运行代码时，代码的执行环境非常重要，通常是下列三种情况：Global code：代码第一次执行时的默认环境。Function code：函数体中的代码Eval code：eval 函数内执行的文本（实际开发中很少使用，所以见到的情况不多执行上下文栈浏览器中的 JavaScript 解释器是单线程实现的。这意味着在浏览器中一次只能做一件事情。而其他的行为或事件都会在执行栈中排队等待。我们知道，当浏览器第一次加载脚本时，默认情况下，它会进入全局上下文。如
2020-06-29 13:46:56
646
原创 前端的角度讲讲内存
在JS中具有自动垃圾回收机制，对于前端开发来说，内存空间并不是被常常提起的概念，容易被大家忽视。很多东西的原理与内存息息相关，如：闭包、深签拷贝、执行上下文等，要弄清楚这些，必须对内存空间有清晰的认知才行。堆栈段栈：栈会自动分配内存空间，会自动释放内存，存放基本类型，占据固定大小的空间。堆：动态分配的内存，大小不定也不会自动释放内存，存放的是引用数据类型。栈的存取方式，先进后出，后进先出。可以想象成一个盒子，并且只有一个出口和入库，如图a2在栈低，肯定是最先进入盒子的，然后再试a3、a4、a5。.
2020-05-20 17:33:38
293
原创 JavaScript——原型、原型链
原型构造函数1、let a = {} 等同于 let a = new Object() (a的构造函数是 Object 函数)2、let a = [] 等同于 let a = new Array() (a的构造函数是 Array 函数)3、function Foo {} 等同于 let Foo = new Function() (Foo 的构造函数是 Function 函...
2020-04-24 15:27:59
362
原创 浅谈Promise对象
Promise的含义Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。promise的中文意思是承诺。从字面的理解来看，当前承诺的事情，会在以后完成。Promise对象代表一个异步操作，分成三种状态，pending进行中，resolve已成功，reject已失败，一旦状态改变...
2020-02-16 13:55:15
292
原创 vue中使用vuex和router
vuexVuex 是一个专为 Vue应用程序开发的状态管理模式 ，它用来储存管理所有组件状态。这个状态自管理应用包含以下几个部分：state，驱动应用的数据源；view，以声明方式将 state 映射到视图；actions，响应在 view 上的用户输入导致的状态变化。定义好state（组件间的状态），view视图渲染这些数据，actions去请求数据，得到后在给state。 ...
2019-11-22 09:43:17
1067
原创 vue快速入门手册
搭建Vue安装脚手架工具npm install -g @vue/cli创建项目vue create hello-world,hello-world为项目名称Babel、Vuex、Router,需要把着三个最基本选中Vue技术栈:Vuex、Router基本用法关键字{{}}，<p>{{message}}</p>挂载点,把vue实例放在这个为id为#app的节...
2019-10-08 16:05:48
330
原创 React——Hook小结
Hook 是什么？Hook 是 React 16.8 的新增特性。简单来说它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。Hook 使用规则只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。（还有一个地方可以调用 Hook —— 就...
2019-05-12 15:49:56
2109
1
原创 react简单用法总结
搭建开发环境create-react-app，下载好之后通过npm start或者yarn start（需要安装npm i yarn -g）默认加载index.js.react技术栈安装 yarn add redux redux-actions redux-thunk react-redux redux-logger react-router-domJSX语法 创建一个ul列表，通过...
2019-04-21 16:58:14
1536
原创 在react中简单使用router和redux
react-routerscr里router文件夹里首先配置一级路径,path后更路径，component需要连接的组件，exact精确匹配路径，在把这个组件暴露出去。import React from "react";//引入路由文件import { HashRouter as Router, Route } from "react-router-dom"import Info ...
2019-04-21 16:55:26
959
原创 前端模块化历程
背景一个足够复杂的工程，需要尽量将功能解耦。什么叫解耦？简单来说，需要将不同的功能分开到不同的文件中，或不同的目录结构中，形成一个个模块，模块之间通过有限的接口交互，模块内部的数据变化对外部隐藏。在node上，这一点表现的非常不错。node实现了CommonJS规范，每个JS文件就是一个模块，模块中的所有数据对外隐藏，仅通过Module.exports暴露模块内的内容。于是，模块化开发在...
2019-03-31 14:15:28
189
原创 jQuery实现五星评分效果
效果如下：先是移入变色，在是点击变色后移出不变色。HTML代码，插入的图片默认为灰色背景。为什么不直接5个img标签？如果直接是五张图片的话，鼠标移动到中间空隙时会有移出效果，看着就像有bug一样。这里利用了五个li，每当鼠标移入li，就会亮一张图，到空隙的时候就不会有移出效果，图片也不会变灰。 <ul> <li> &l...
2019-03-03 23:57:42
2613
原创 JS库——Lodash的常见语法
Lodash 是 JavaScript 的一个工具库，内部封装了很多字符串、数组、对象等常见数据类型的处理函数。首先要明白的是 Lodash 的所有函数都不会在原有的数据上进行操作，而是复制出一个新的数据，不会改变原有数据。...
2019-02-21 22:59:37
2077
原创 原生ajax的函数封装
ajaxAsynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，提高了用户体验。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。1.创建 X...
2019-02-08 20:31:29
257
原创 canvas制作一个简易时钟
效果如下：之前写的博客canvas基本用法，基本动画转换、旋转、缩放<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
2019-02-06 17:24:34
780
原创 canvas基本用法，基本动画转换、旋转、缩放
什么是canvas？&amp;lt;canvas&amp;gt; 是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。canvas基本使用创建一个画布（canvas）&amp;lt;canvas&amp;gt; 看起来和 &amp;lt;img&amp;
2019-02-06 16:44:07
2479
原创 SVG最详细的带干扰线条的随机数验证码
什么是svg？SVG 指可伸缩矢量图形 (Scalable Vector Graphics)SVG 用来定义用于网络的基于矢量的图形SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失做出来的效果如下：首先给svg给一个样式svg {width: 200px;height: 50px;border: 1px solid black;font-weight: ...
2019-01-31 23:54:49
938
原创 JavaScript——闭包和作用域
执行上下文：代码的运行环境分类：1、全局上下文 2、局部上下文（函数上下文）###上下文的产生和销毁全局上下文在浏览器打开时产生，浏览器关闭时销毁局部上下文在函数调用时产生，调用完成（函数内部代码执行完毕）后销毁先进后出。栈空间储存上下文，层层叠放谁在最上面，就最先执行谁的代码示例 ：// function outer(){ // function inner(){ //...
2019-01-31 22:51:01
241
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人