前端
关注
分享
扫一扫
文章平均质量分 85
子筱
年轻有活力！
展开
-
Webpack基础
什么是Webpack Webpack 本质上是一个模块化打包工具，它通过“万物皆模块”这种设计思想，巧妙地实现了整个前端项目的模块化。在 Webpack 的理念中，前端项目中的任何资源都可以作为一个模块，任何模块都可以经过 Loader 机制的处理，最终再被打包到一起。 最初的时候，具体做法是将每一个功能及其相关状态数据各自放到不同的js文件中，一个script标签对应一个模块。 ├── module-a.js ├── module-b.js └── index.html原创 2022-01-17 09:51:21 · 267 阅读 · 0 评论 -
JavaScript装饰器
装饰器装饰器（Decorator）是一种与类（class）相关的语法，用来注释或修改类和类的方法。许多面向对象的语言都有这项功能。装饰器是一种函数，写成@ + 函数名。它可以放在类和类方法的定义前面。@Refreshclass Person { @enumerable method() {}}类的装饰@Refreshclass ListComponent {}function Refresh(target) { target.count = 1;}ListComp原创 2021-09-21 10:04:46 · 707 阅读 · 0 评论 -
JavaScrip的事件循环
处理事件（事件循环机制）当事件发生时，浏览器调用相应的事件处理器，由于js是单线程执行，在用一个时刻只能处理一个事件。在事件处理阶段，例如用户发生了移动和点击事件。会把这些事件放在事件队列里边，事件循环会检查队列，发现队列的前面有一个移动事件，移动事件处理完后，js退出处理器函数，事件循环会再次检查队列，这一次，在队列的最前面，发生了点击事件，然后处理完在退出。一旦单击处理器执行完成。队列中不在有新的事件，事件循环会继续循环等待新的事件。这个循环会一直执行到用户关闭web应用。深入事件循环事件循原创 2021-05-30 13:59:01 · 184 阅读 · 0 评论 -
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 · 424 阅读 · 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 · 139 阅读 · 0 评论 -
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 · 498 阅读 · 0 评论 -
前端的角度讲讲内存
在JS中具有自动垃圾回收机制，对于前端开发来说，内存空间并不是被常常提起的概念，容易被大家忽视。很多东西的原理与内存息息相关，如：闭包、深签拷贝、执行上下文等，要弄清楚这些，必须对内存空间有清晰的认知才行。堆栈段栈：栈会自动分配内存空间，会自动释放内存，存放基本类型，占据固定大小的空间。堆：动态分配的内存，大小不定也不会自动释放内存，存放的是引用数据类型。栈的存取方式，先进后出，后进先出。可以想象成一个盒子，并且只有一个出口和入库，如图a2在栈低，肯定是最先进入盒子的，然后再试a3、a4、a5。.原创 2020-05-20 17:33:38 · 352 阅读 · 0 评论 -
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 · 451 阅读 · 0 评论 -
手写Promise例子
`，原创 2020-03-30 23:07:15 · 160 阅读 · 0 评论 -
浅谈Promise对象
Promise的含义Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。promise的中文意思是承诺。从字面的理解来看，当前承诺的事情，会在以后完成。Promise对象代表一个异步操作，分成三种状态，pending进行中，resolve已成功，reject已失败，一旦状态改变...原创 2020-02-16 13:55:15 · 337 阅读 · 0 评论 -
uni-app涂鸦
uni-app涂鸦原创 2020-01-02 13:42:12 · 1456 阅读 · 1 评论 -
uni-app小结
创建项目1、 使用HBuilderX编辑器 ，可以选择新建项目或者导入项目。原创 2019-12-17 13:46:32 · 391 阅读 · 0 评论 -
vue中使用vuex和router
vuexVuex 是一个专为 Vue应用程序开发的状态管理模式 ，它用来储存管理所有组件状态。这个状态自管理应用包含以下几个部分：state，驱动应用的数据源；view，以声明方式将 state 映射到视图；actions，响应在 view 上的用户输入导致的状态变化。定义好state（组件间的状态），view视图渲染这些数据，actions去请求数据，得到后在给state。 ...原创 2019-11-22 09:43:17 · 1113 阅读 · 0 评论 -
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 · 977 阅读 · 0 评论 -
canvas基本用法，基本动画转换、旋转、缩放
什么是canvas？<canvas> 是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。canvas基本使用创建一个画布（canvas）<canvas> 看起来和 <img&原创 2019-02-06 16:44:07 · 2650 阅读 · 0 评论 -
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 · 820 阅读 · 0 评论 -
原生ajax的函数封装
ajaxAsynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，提高了用户体验。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。1.创建 X...原创 2019-02-08 20:31:29 · 295 阅读 · 0 评论 -
JS库——Lodash的常见语法
Lodash 是 JavaScript 的一个工具库，内部封装了很多字符串、数组、对象等常见数据类型的处理函数。首先要明白的是 Lodash 的所有函数都不会在原有的数据上进行操作，而是复制出一个新的数据，不会改变原有数据。...原创 2019-02-21 22:59:37 · 2171 阅读 · 0 评论 -
jQuery实现五星评分效果
效果如下：先是移入变色，在是点击变色后移出不变色。HTML代码，插入的图片默认为灰色背景。为什么不直接5个img标签？如果直接是五张图片的话，鼠标移动到中间空隙时会有移出效果，看着就像有bug一样。这里利用了五个li，每当鼠标移入li，就会亮一张图，到空隙的时候就不会有移出效果，图片也不会变灰。 <ul> <li> &l...原创 2019-03-03 23:57:42 · 2711 阅读 · 0 评论 -
前端模块化历程
背景一个足够复杂的工程，需要尽量将功能解耦。什么叫解耦？简单来说，需要将不同的功能分开到不同的文件中，或不同的目录结构中，形成一个个模块，模块之间通过有限的接口交互，模块内部的数据变化对外部隐藏。在node上，这一点表现的非常不错。node实现了CommonJS规范，每个JS文件就是一个模块，模块中的所有数据对外隐藏，仅通过Module.exports暴露模块内的内容。于是，模块化开发在...原创 2019-03-31 14:15:28 · 247 阅读 · 0 评论 -
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 · 1654 阅读 · 0 评论 -
在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 · 1032 阅读 · 0 评论 -
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 · 372 阅读 · 0 评论 -
JavaScript——闭包和作用域
执行上下文：代码的运行环境分类：1、全局上下文 2、局部上下文（函数上下文）###上下文的产生和销毁全局上下文在浏览器打开时产生，浏览器关闭时销毁局部上下文在函数调用时产生，调用完成（函数内部代码执行完毕）后销毁先进后出。栈空间储存上下文，层层叠放谁在最上面，就最先执行谁的代码示例 ：// function outer(){ // function inner(){ //...原创 2019-01-31 22:51:01 · 296 阅读 · 0 评论