前端开发-前端技术分享

由出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xlsxlsxods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx格式为例。

说栈溢出之前，我们先来一起学习下调用栈，为什么了什么是 javascript 调用栈javascript 引擎是利用栈的这种数据结构来管理执行上下文的。在执行上下文创建好后，javascript 引擎会将执行上下文数据压入栈中，通常把这种用来管理执行上下文件的栈称为执行上下文栈，又称调用栈。可以帮助了解 javascript 引擎的工作原理 更好的调试 javascript比如你在开发代码时，有时候可能会遇到栈溢出的错误，如下图所示：function runStack(n, resul

安装 vue 项目安装脚手架npm install -g @vue/cli创建项目vue create vue-demo安装步骤用例1：renders 组件// HelloWorld.vue<template> <div class="hello"> <h1>{{ msg }}</h1> </div></template><script>export d

介绍Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验。官网

其实要配置属于查模块专属命令并不复杂，只需在 package.json 里配置 bin 属性就可以了，下面我们通过一个列子来说明// package.json "bin": { "tracelib": "./bin/tracelib.js" },#!/usr/bin/env nodeconst fs = require('fs');const path = require('path');const package = require('../package.json');

webpack.dll.js'use strict'const path = require('path');const webpack = require('webpack');const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = { mode: 'production', entry: { vue: ['vue'], vueRouter: ['vue-rou

什么是 babel ? 在前端项目中他能做什么了？Babel 是一个工具链，主要用于在当前和旧的浏览器或环境中，将 ECMAScript 2015+ 代码转换为 JavaScript 向后兼容版本的代码。以下是 Babel 可以做的主要事情：转换语法 源代码转换(codemods)简而言之，在前端开发过程中，大家会用很多 es6 的新特性，比如箭头函数、class、解构、Promise、async / await等。这些新的特性，简洁的语法、强大的功能，就好比给前端程序员插上了一对自由自由翱翔翅

X6 图编辑引擎X6 是 AntV 旗下的图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，方便我们快速搭建 DAG 图、ER 图、流程图等应用。说明文档：https://x6.antv.vision/zh/docs/tutorial/about源码import React, { useEffect, useState } from 'react'import './index.scss'import { GithubOutlined, UserOutlin.

一、全局安装 vue-cli 脚手架，使用 vue init webpack-simple yyl-npm-practice 初始化项目初始化项目后 npm install ; npm run dev，项目就能跑起来了。下面我们来试着封装一个属于我们自己的公用组件 Button在 src 目录下新建一个 components 存放自定义组件// Button.vue<template> <button :class="classes" type="button" @cl

redux-saga是一个用于管理应用程序 Side Effect（副作用，例如异步获取数据，访问浏览器缓存等）的 library，它的目标是让副作用管理更容易，执行更高效，测试更简单，在处理故障时更容易。可以想像为，一个 saga 就像是应用程序中一个单独的线程，它独自负责处理副作用。redux-saga是一个 redux 中间件，意味着这个线程可以通过正常的 redux action 从主应用程序启动，暂停和取消，它能访问完整的 redux state，也可以 dispatch redux a...

动机随着 JavaScript 单页应用开发日趋复杂，JavaScript 需要管理比任何时候都要多的 state （状态）。 这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据，也包括 UI 状态，如激活的路由，被选中的标签，是否显示加载动效或者分页器等等。三大原则单一数据源整个应用的state被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个store中。State 是只读的唯一改变 state 的方法就...

一个前后端分离的项目，本地联调，跨域配置至关重要。传统设置浏览器跨域设置这里就不继续累赘了。网上很多教程都在 “package.json” 里边设置"proxy": { "/api": { "target": "http://localhost:3001" }}初接触的小伙伴，直接按这种方式都做了发现有问题，结果项目都起不来了。When specified, “proxy” in package. json must be a string.Instead, th

useMemo用来缓存数据，当组件内部某一部分渲染的数据（组件），需要通过计算而来，这个计算是依赖与特定的state、props数据，我们就用 useMemo 来缓存这个数据，以至于我们在修改她们没有依赖的数据源的情况下，多次调用这个计算函数，浪费计算资源。import React, { useState, useMemo } from 'react';function UserInfo(props) { const [ name, setName ] = useState('');

server 配置const Koa = require('koa');const Router = require('koa-router');const serve = require('koa-static');const path = require('path');const fs = require('fs');const backendApp = new Koa();const frontendApp = new Koa();const backendRoute...

react-hooks 是 react16.8以后，react新增的钩子API，目的是增加代码的可复用性，逻辑性，弥补无状态组件没有生命周期，没有数据管理状态state的缺陷。react-hooks思想和初衷，也是把组件，颗粒化，单元化，形成独立的渲染环境，减少渲染次数，优化性能。React Hooks是React框架内的逻辑复用形式，因其轻量、易编写的形态，必然会逐渐成为一种主流。但在实际的开发中，我依然觉得大部分的开发者对hook的使用过于粗暴，缺乏设计感和复用性。在运用状态的过程中，颗粒化太细

React 表单校验库React Hook Form是一个高性能、灵活、易拓展、易于使用的表单校验库，用于React Web＆Native的表单验证。特性使创建表单和集成更加便捷 非受控表单校验 以性能和开发体验为基础构建 迷你的体积而没有其他依赖 遵循 html 标准进行校验 与 React Native 兼容 支持Yup, Joi, Superstruct或自定义 支持浏览器原生校验 从这里快速构建你的表单原生表单中应用import React from 'react.

脚本代码Dim messageStr = array("你好！","hello!","1很高兴认识你！","2很高兴认识你！","3很高兴认识你！","4很高兴认识你！","5很高兴认识你！","6很高兴认识你！","7很高兴认识你！","8很高兴认识你！","9很高兴认识你！","10很高兴认识你！","11很高兴认识你！","12很高兴认识你！","13很高兴认识你！") //发消息内容Dim ygzPos = 1 //定义点第几个已关注(头条号)Dim sendTotal = 5 //定义发