- 博客(98)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 数据结构与算法-前端
1. 时间空间复杂度时间复杂度用大O表示，如O(1)、O(n)…定性描述算法的运行时间 空间复杂度运行过程中临时占用存储空间大小的量度2. 栈：后进先出的结构push、pop有效的括号： https://leetcode-cn.com/problems/valid-parenthesesvar isValid = function (s) { if (s.length % 2 === 1) { return false } // 奇数个 const sta
2022-01-28 17:59:46
759
原创 webpack 从入门到放弃
1. 模块化ES6 module用法：import 和 exportimport是编译时调用（import具有提升效果，会提升到模块的头部）CommonJS用法： require 和 exports，CommonJS是Node的模块化规范。module 代表当前模块，是一个对象，保存了当前模块的信息。exports 是模块内的私有局部变量，它只是指向了 module.exports，所以直接对 exports 赋值是无效的require是运行时加载整个模块（只有运行时才能得到这个对象
2022-01-08 11:20:58
520
原创 TypeScript进阶语法
初始命令初始化项目： tsc --init 会创建一个tsconfig.json配置文件。编译ts文件： tsc demo.ts 将.ts文件转换成demo.js文件。执行tsc demo.ts并不会读取tsconfig.json文件配置，只有执行tsc才会根据配置文件信息编译ts文件tsconfig.json配置项：配置功能removeComments移除注释noImplicitAnyfalse ：不必指定所有数据类型 (在strict为false的情况下).
2021-12-14 11:33:07
1543
原创 爬虫获取页面信息并存储
目标： 获取CSDN首页直播内容实现获取内容的类 Crowller获取内容: 通过 superagent插件获取页面信息存储内容：fs.writeFileSync根据以上两点实现的类：import fs from 'fs';import path from 'path';import superagent from 'superagent';import DellAnalyzer from './dellAnalyzer';export interface Analy..
2021-12-05 22:59:59
395
原创 workspace、使用本地包以及使用dumi自定义组件
workspacesworkspaces 文档创建文件： 根目录下的package.json文件中，workspaces 配置对应的子项目路径。使用： 在根目录下执行yarn add cross-env 操作，就能够在 “workspace-a”、 "workspace-b"子项目中直接使用cross-env插件了（子项目不需要安装插件，根目录在安装的时候会生成node_modules的bin文件）。使用本地包...
2021-11-12 10:48:21
1783
原创 npm 调试 react源码
准备源码下载代码，并切换到最新标签 v17.0.2下git clone https://github.com/facebook/react.git执行 yarn 安装依赖，执行npm run build 将代码打包到build目录下用于本地链接调试。2. 链接调试建立链接cd build/node_modules/reactnpm linkcd build/node_modules/react-domnpm link创建项目，使用本地链接创建项目：create-react-a.
2021-11-05 11:47:28
318
原创 微信小程序 canvas海报画图
经常有需要结合二维码转换成图片的需求，用于分享canvas 属于原生组件，设置fixed 无效，所以当滚动后要展示canvas就会找不到图了，所以通过转换成图片来展示js代码：本地及后端返回base64 图片的绘制ctx.scale(dpr, dpr) // 放大画布 并且在导出的时候注意destWidth 输出大小需要跟dpr关联wx.canvasToTempFilePath() 方法中，由于canvas 使用的是type="2d"，需要在方法中指定canvas的实例，才能生成图片，不然会.
2021-07-26 17:36:34
635
原创 前端图片压缩、上传相关处理
1. 图片压缩使用插件 lrz 进行压缩function compress(file,options){ return lrz(file, options).then((rst: any) => {//数字越小，压缩率越高 return new Promise(function (resolve: any, reject: any) { if (rst instanceof Object) { //将压缩后的base64字符串转换为文件对象 let fi
2021-07-20 11:15:26
259
原创 导出excel
请求需要设置 responseType: 'blob'，返回blob对象通过创建Blob 对象导出excel表格 const blob = new Blob([data], { type: 'application/octet-stream;charset=utf-8' }); // data 即表格数据 const link = document.createElement('a'); link.download = `${name}.xls`; // 导出表.
2021-07-19 15:06:40
235
原创 vue 数据响应式原理
通过监听数据的变化，实现响应式。1. vue2 通过Object.defineProperty 实现监听Object.defineProperty定义属性 Object.defineProperty(target, key, { get() { return value }, set(newValue) { value = newValue } })Object.defi
2021-07-15 11:00:13
188
原创 react 操作记录
将表单中的所有标签设置disabled let NewElement = React.cloneElement(Component, { disabled: true }); return NewElementNote: 通过React.cloneElement 复制原标签，然后通过第二个参数，为标签添加props属性值
2021-05-21 16:55:21
235
原创 Android使用 flutter
在其他目录中依赖flutter SDKplugins { id 'com.android.library' id 'kotlin-android'}// 在其他目录中依赖flutter SDKdef localProperties = new Properties()def localPropertiesFile = rootProject.file('local.properties')if (localPropertiesFile.exists()) { lo.
2021-03-24 23:13:03
367
1
原创 flutter中Android和iOS SDK的集成
以AI智能语音集成为例：百度语音识别android 及IOS demo下载地址。SDK的集成包含两个部分：1.集成Native SDK2. 创建Native 模块的Flutter Plugin（需要用到Flutter 的Channel）1. Android集成需要配置到的文件：AndroidManifest.xmlproguard-rules.probuild.gradle创建Android 的module选择Android library创建包名，点击finish完成然后开
2021-03-17 23:39:24
1012
原创 node 深入浅出
1. node 基础Node.js 的特点： 事件驱动、异步I/O（在处理高并发、异步I/O密集场景性能优势明显）。Web场景下性能好。exports 只能使用.语法向外暴露内部变量， 例 exports.test = 100;module.exports 既可以通过点语法，也可以直接赋值一个对象 例 module.exports.test = 100; module.exports = { test: 100}exports:首先对于本身来讲是一个变量（对象），它不是module的引用，它是{
2021-01-05 23:18:18
370
原创 react-native 中使用到的一些功能
1. 获取设备通知权限react-native 中的 PermissionsAndroid 能够获取android设备的部分权限信息，但是无法获取通知权限。所以需要在android项目中增加获取权限的操作，在js代码中去调用。在android/app/src/main/java 目录下，新建一个 rn.plugin/common/CommonModule，用于调用android功能：package rn.plugin.common;import androidx.core.app.Notif
2020-12-28 15:34:01
458
原创 Podspec s.dependency error: Unable to find a specification `React-Core`
问题： react-native 项目中 安装@react-native-community/async-storage 出现报错信息： Podspec s.dependency error: Unable to find a specificationReact-Core``解决：https://github.com/react-native-async-storage/async-storage/issues/457修改依赖下： node_modules/@react-native-commun.
2020-12-10 16:38:45
505
原创 react 输入框 回车事件切换
在web项目中，多个输入框时，按tab 键是能够进行下一个切换聚焦的，回车也能够加上监听事件，方便用户处理多个输入的事件。js 处理input 监听事件function changeEnter(inputs) {const init = () => { for (let i = 0; i < inputs.length; i++) { inputs[i].addEventListener('keydown', focus(i), false); // 每个input.
2020-12-09 16:33:32
4306
原创 nginx访问出现403 forbidden
买个服务器放放项目，但是直接访问出现403 forbidden。查看nginx 日志将nginx日志打开查看日志信息 查看nginx 用户信息ps axu|grep nginx 发现有个nobody修改nginx访问用户修改为root 再访问curl localhost:8088 有内容了。...
2020-11-19 23:39:04
618
原创 gulp 打包
文件目录结构如图：package.json 依赖信息 "devDependencies": { "@babel/core": "^7.12.3", "babel-cli": "^6.26.0", "babel-preset-env": "^1.7.0", "gulp": "^4.0.2", "gulp-babel": "^7.0.1", "gulp-clean": "^0.4.0", "gulp-clean-css": "^4.3...
2020-11-13 18:02:16
328
原创 前端命令上传服务器
gulp 打包后的文件上传至服务器下载： npm install -D gulp-sftp-up4 gulp-sshpackage.json: "scripts": { "server-dev": "cross-env NODE_ENV=dev gulp default },const { task, src, series } = require('gulp');const sftp = require('gulp-sftp-up4');const devConfig = { ..
2020-11-04 13:44:07
909
原创 浅析 react源码
指导链接：React 原理解析1. createElementJSX 代码会被 Babel 编译为 React.createElement：<div id="testId"> <div id="testId2">222</div> <div id="testId3">333</div></div>// 解析成以下样子React.createElement( "div", // -> type {
2020-10-09 16:24:42
232
原创 纯纯的react-native项目
经常会写写react-native 的demo 项目，但总是需要花很多时间去初始化项目，所以保存下初始化的项目项目在刚开始启动的时候，直接运行react-native run-android 提示 Could not install the app on the device。除了文档上的设备环境配置外，还有一个就是需要给android 权限，在项目根目录 运行：chmod 755 android/gradlew...
2020-08-07 15:39:56
254
原创 为什么要用typeScript
typeScript 冲冲冲1. ts 能带来什么好处？1. ts 能带来什么好处？静态类型能够在开发的时候发现潜在的问题定义了函数，但是忘记传递参数 2. 编写时更友好的提示3. 更好的可读性
2020-05-29 23:26:37
2232
原创 nginx 反向代理
nginx: 利用反向代理解决跨域问题。1. 服务端服务端主要内容：const http = require('http')const PORT = 8222const serverHandle = require('../app')const server = http.createServer(serverHandle)server.listen(PORT)完整内容查看g...
2019-12-10 18:02:48
259
原创 实现express 中间件原理
中间件原理： 核心handle方法// express 中间件原理const http = require('http')const slice = Array.prototype.sliceclass LikeExpress { constructor() { // 存放中间件的列表 this.routes = { al...
2019-12-10 14:58:41
583
原创 Node.js 从零开发web service
1. 学习内容2. server 开发和前端开发的区别服务稳定性（PM2 做进程守候）考虑内存和CPU日志业务（stream 写日志, 使用redis存session）安全集群和服务拆分3. 目标 ： 开发博客，具备基本功能需求：首页 ， 作者页，博客详情页登陆页管理中心，新建页，编辑页开发接口http请求：一、DNS解析，建立TCP连接，发送http请...
2019-11-11 17:46:35
286
原创 微信小程序 图表组件化
参考： github : wx-charts1. 扇形图参考：绘制图表数据 chartData: [ {data: 15,name: '成交量1',color: '#7cb5ec'}, {data: 35,name: '成交量2',color: '#f7a35c'}, {data: 63,name: '成交量3',color: '#41affc'}, ...
2019-08-22 11:04:11
753
原创 react 源码学习
源码学习记录1. React Api2. React中的创建更新3. React调度过程（Fiber Scheduler）4. 组件如何进行更新5. 组件更新完成后进行的操作1. 虚拟Dom对比2. 渲染中出现错误的处理过程6. 真实Dom更新7. 各种功能的实现（content，ref，hydrate...）8. Suspense (超前体验)9. Hooks1. React ApiFibe...
2019-08-06 23:15:47
358
原创 react 记录
1. 两种获取dom节点 的方式import React, {Fragment} from 'react'class Test extends React.Component { constructor(props) { super(props); // 创建 this.third = React.createRef(); } componentDidMo...
2019-06-02 23:41:17
215
原创 react-native 记录
react 冲鸭！1. 子组件 传递方法并带上参数1. 子组件 传递方法并带上参数父组件单独写：<div onClick={this.handleItemDelete.bind(this,index)}> </div>父子组件写法父组件： constructor(props) { super(props) this.handl...
2019-04-28 23:59:13
290
原创 好文记录
1. 为什么说DOM操作很慢 – 思否2. HTTP与WebSocket的区别 – CSND有点没记住http1.1：长连接；轮询webSocket：持久链接，全双工。
2019-03-31 21:13:56
293
原创 初级前端面试----Record
1. 子元素垂直居中的方法参考：关于css水平垂直居中的总结对于行内元素(inline)单行：设置上下 pandding 相等；或者设置 line-height 和 height 相等多行：设置上下 pandding 相等；或者设置 display: table-cell; 和 vertical-align: middle;；或者使用 flex 布局对于块级元素(block)：...
2019-03-26 23:43:32
1726
原创 webpack 性能优化
1 . 减少 Webpack 的打包时间的方法优化 Loader 的文件搜索范围只在 src 文件夹下查找 include: [resolve('src')],还可以将 Babel 编译过的文件缓存起来，下次只需要编译更改过的代码文件loader: 'babel-loader?cacheDirectory=true'HappyPack 可以将 Loader 的同步执行转...
2019-03-25 22:00:20
402
原创 canvas实现转盘功能 ---- H5
1. IOS端点击图片闪屏这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。body, html { -webkit-tap-highlight-color:transparent;}2. 最关键的canvas 绘图效果图: 点击之后转盘转动，然后弹出中奖结果需要解决的问...
2019-03-20 15:16:38
4399
4
原创 vue 必知必会
1. data 为什么要返回一个函数返回函数是为了让组件有自己的data对象而不与其它组件共享，加入返回对象的话（对象是按引用地址传递）会造成多组件间共享data数据。官方解释： data-必须是一个函数参考学习： Vue 组件 data 为什么必须是函数？ 从原型链的角度去认识：加入组件原型链上的data是对象的话，如果两个实例同时引用一个对象，那么当你修改其中一个属性的时候，另外...
2019-03-15 10:00:56
509
原创 HTTP -- 必知必会前端知识
1. TCP 三次握手与四次挥手三次握手目的：（建立连接） 为了防止server端一直等待，浪费资源。四次挥手目的: （断开连接） 中间两步: ACK是发送数据并没有关闭的意思。只有收到fin才表示关闭连接。time_out阶段：主动关闭的一方在回复完对方的挥手后进入一个长期的状态，这个标准持续的时间是4分钟（2MSL）。参考链接：跟着动画来学习TCP三次握手和四次挥手2. ...
2019-03-03 22:45:36
402
原创 微信小程序 常用API
1. 保存图片API： wx.getImageInfo():获取图片路径； wx.saveImageToPhotosAlbum() 保存图片关键点:通过模态框去引导用户进行授权操作: wx.showModal()，wx.openSetting()// 保存图片saveImg() { let current = this.data.imageurl let that = th...
2019-02-26 11:55:44
3440
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人