- 博客(57)
- 问答 (3)
- 收藏
- 关注
RSS订阅原创 小程序蓝牙相关开发总结
小程序官网：here蓝牙（无线电波）：一种无线技术标准，可实现固定设备、移动设备等之间段距离的数据交换。采用了分散式网络结构以及快跳频和短包技术，支持点对点及点对多点的通信。蓝牙设备的工作频段选在2.4GHz（这里可以参考无线here）借用大佬的图片加深印象蓝牙原理：here，有兴趣可以拜读下大佬的总结～android官网：here相关文章：蓝牙的工作原理_figher013的博客-CSDN博客_蓝牙工作原理主流的无线通信技术：BLE蓝牙：蓝牙模块根据应用和支.
2022-05-27 17:01:49
231
1
原创 mac mysql命令行相关
question：1、命令行中输入mysql，提示command not found：）、 在终端进入目录cd /usr/local/bin）、设置mysql命令路径sudo ln -fs /usr/local/mysql/bin/mysql mysql）、输入双密码后连接mysql mysql -u root -p2、新建表未规定编码 ）、ALTER TABLE 表名称 CONVERT TO CHARACTER...
2022-05-19 17:45:17
1479
原创 2D渲染pixi项目实战总结
在一次开发中遇到了循环反复的较复杂动画效果，工具调研后选择的pixi，网上大多的可参考资料都是web端，引入小程序缺乏可借鉴性实战代码。故总结如下，加深理解与印象。
2022-05-13 15:37:37
838
原创 HTTP缓存机制结合node
为什么要有缓存机制？每个网站的html、静态资源（包括图片、css、js）都不经常变化，如若每次进入网站都会全部请求，试想有必要吗？能不能按需请求呢，比如有更新了再重新请求？或者无痕浏览时？无论是提出的哪种假设，都不是前端可以独立完成的，需要交互做到，那么cookie就用到了。好处有哪些呢？提高首屏加载速度 可以减少客户端流量消耗减少服务器压力缓存策略有哪几种？当我们第一次请求服务器的时候，服务器便会返回资源并决定是否缓存以及缓存规则。下次在请求的时候，则会直接先去询问浏览
2021-08-27 10:02:01
162
原创 微前端qiankun库的使用
在汉语中，乾坤意为天和地也就是宇宙（包含万物）的意思特点：1、就程序员角度微前端最大的特点之一就是集成多个分布式web端（可理解为多个代码库），且子库可以独立部署。2、qiankun 属于无侵入性的微前端框架，对主应用基座和微应用的技术栈都没有要求思路：作为一个项目，集成多个子库这种场景可类比：组件引入多个子组件；需要一个入口库，可理解为主代码库，这里配置了路由，配置了挂载点；子库配置地址与激活条件，当然子库也要注册到主库；预想困难：主库引入qiankun引入之前做一些小的操作，实现官网
2021-08-10 17:15:10
456
原创 分析并实现简易loader、plugin
占地为王在webpack配置过程中，loader作为核心之一，一直都是必须了解的一项。在实际项目中js转为es5，css、图片、样式预编译、vue/jsx等都需要转译，但是webpack本身还不具备这些功能的。{ test: /\.(scss|sass)$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ]},一个简单的loader写法可以在规则里配置loade
2021-08-03 16:49:59
127
原创 服务端渲染SSR
画地为牢！目的：结合node框架koa/express➕react实现服务端渲染预想困难：项目的同时启动、webpack如何配置等概念：服务端渲染（ssr）server side render浏览器在请求页面url时，服务器将需要的HTML组装好直接返回给客户端，浏览器不需要通过js脚本执行，可以直接解析并展示在页面上。客户端渲染（csr）client side render浏览器下载js脚本，加载完js后，由js操控生成DOM，最后展示页面，这些都发生在浏览器上同构：为了能够让用
2021-07-28 16:50:48
109
原创 记录发布npm包
新手的话首先安装node，会集成npm环境，待npm -v有版本号之后就可以开始操作了在想要上传的文件里打开终端，最好是这里待会publish省得切换；注：npm init之后检查下package.json，版本号、包名、仓库地址等命令行npm login会提示输入三项内容，登录成功后即可使用npm各项命令！检查没有问题即可发布，上传到npm包服务器npm publish基本上报错原因都是package.json个别选项没填好，或者包名重复在npm publich报错了npm ER
2021-07-08 09:59:24
107
原创 手写react
关于react源码，很早就有参阅的想法了，奈何每次实践都是浅尝则止，思考了很久：与其预留时间统一观阅学习，不如手起刀落 现在跟学总结经验；repo：https://github.com/CNZN/myreact目的：了解react基本思想，对常用api原理的剖析及实现预想困难：实现流程：基于babel转义的js得到dom虚拟对象，分析creatElement、render的实现1、creatElementfunction createElement (type, props, ...childr
2021-07-06 20:03:40
188
原创 chromeExtension学习与实践
repo～：https://github.com/wanthering/laipi主要文件：manifest.json(注意manifest不是mainfest)，就像node.js中package.json一样，每个谷歌插件核心配置文件就是manifest.jsonname: 插件的名字 version: 插件的版本 description: 插件简介栏 manifest_version: 这个是写死的，每个文件必须有 icon：不同场景展现的图片设置 browser_actio..
2021-06-23 13:51:58
274
1
原创 自用react脚手架解析与思考
前端工程化repo~：https://github.com/CNZN/k-r-cli目的：开发脚手架js，上传npm托管；使用时下载到本地，终端输入相应命令，可以根据需求作出改进，或完成基本功能即可；思路：根据前人的代码库及解析理清开发顺序，本地开发时注重交互质量和提供模版的多样化（模版两种拉取形式：1.跟随包在项目里加templates文件夹存放2.另开代码库线上链接下载拉取）.为了可以在终端流利的操控命令行使用Commander.js,设置用户界面和查询会话使用Inquirer.js。预
2021-06-23 13:50:35
168
原创 webWork中屏蔽window与document
如若需要屏蔽浏览器window对象该如何操作（适用场景为恶意注入的js代码更改dom元素等）首先，js是单线程语言，如若有大量计算代码堵塞，则会引发一系列问题，如性能过差、不利于维护等。webWork则是可以把本该同步的代码变成异步，在主线程中开辟了子线程，使得相应代码在子线程中自行且不影响主线程，而且执行结果返回给主线程。而worker的环境是和浏览器环境互相独立的线程如此function foo(code) { const blob = new Blob([code]); const
2021-05-31 19:10:12
339
原创 记录某厂面试
我栽了1、去重2、节流防抖（节流描述代码）3、跨域（jsonp实现原理）4、项目性能优化5、前端脚手架实现6、mvvm与mvc7、vue computed实现原理8、vue针对实例状态过多内存占用大的解决方法是9、promise.then实现原理10、async、await实现原理11、node我不服...
2021-05-26 21:26:24
96
原创 nodejs系统学习
小子日常更新！码住！nodejs的出现打破了js只能在浏览器运行的局限，实现了前后端编程环境与语言的统一。nodejs特点1、基于chrome v8引擎的js运行环境2、事件驱动3、非阻塞I/O(input, output可指读与写)，单线程fs模块（用于与文件系统进行交互）const fs = require('fs');//读取文件fs.readFile('./file/something.txt', (err, data) => { if (err) throw
2021-05-20 19:56:15
151
原创 javascript中Object常用属性总结
日常数据处理中除了数组、字符串之外，对象的方法也很常见Object.create使用现有对象来提供创建新对象的__proto__//这里是需要与new一个实例进行比较的var obj = { key: 'kenny' };var newObj = new Object(obj); // { key: 'kenny' }//作为obj的实例,newObj可以访问父类非私有的属性与方法var obj = { key: 'kenny' };var newObj = Object.create(ob
2021-05-19 17:56:25
456
原创 react封装一个公共组件-简单逻辑梳理与实现流程
react公共组件的实现与原生js实现函数基本一致，接受形参，处理数据，返回or不返回一个结果。在不同场景调用组件时，可以通过props属性，传递状态与方法，如果是展示型组件，传入不同样式对象，就可以在不同场景使用多样化展示ui。
2021-05-17 15:56:33
1852
4
原创 前端面试题总结原生js+react+vue+webpack+node+算法+计算机基础
小子日常更新！画地为坑先js闭包opp原型原型链this作用域es6promisecookiereactvirtual dom声明周期renderjsxrouter高阶组件路由跳转reduxredux-thunk/sagahooksvuevdom事件修饰符生命周期过滤器动画导航守卫keep-aliveevent-busvuxwebpack与gulp的区别核心属性nodehttp模块、fs模块、url模块commonjs中间件expr
2021-05-08 19:05:46
332
3
原创 vue2-cli、webpack+vue及vue3项目经验留笔
引言：前端涉及面广，技术栈众多，从移动端到pc端，再到小程序、原生安卓或者ios、、、这也代表一名合格的前端攻城狮需要掌握足够多技能才能独当一面。- 基于webpack搭建vue项目这里与webpack引入react类似，思路大致为以webpack为基石搭建入口出口、module、插件等，调试成功即可引入vue还未创建先占个位：https://github.com/CNZN/webpack-vue/branches- vue2脚手架创建项目2.x是区别于3.x和4.x的2.x安装完后可使用vu
2021-05-08 10:26:29
175
3
原创 利用正则获取字符串中的url
const reg= /(https?|http|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/g;let result = value.match(reg);//得到的result是一个数组['https://www.baidu.com', 'https://www.google.com.hk/']
2021-03-31 19:29:22
926
原创 window.getSelection的使用
偶尔在一次需求中遇到这样的情景：将鼠标选中网页上面的文字以及图片，获取选中的文字与图片然后传给后台let selObj = window.getSelection();let selRange = selObj.getRangeAt(0);// 网上很多说这样就可以获取文本和图片window.getSelection().getRangeAt(0);// 再详细点的话可以打印一下selRange打印window.getSelection().getRangeAt(0)可以看到这个对象的6个
2021-03-11 16:41:18
3117
原创 keyMirror的使用心得
在react项目开发中，reducer相关的hooks（useDispatch、useStore、useSelector）在大量状态管理以及回调data的存取是极为方便的，尤其是useState逐渐的被取代的情况下。reducer如此多的状态存取，包括type类型。所以引入 KeyMirror 既能保证代码前后的功能一致，也能享受压缩带来的性能提升。但并不是为了省字符，而是在 Closure Compiler 的高级模式下，Object 的 key 会被压缩替换成更短的字符，这样就不能创建一个 key
2021-03-03 16:08:05
421
1
原创 react项目中suepense的简单使用（lazy）及懒加载原理
import React, {Components, Suspense} from 'react';简单来说项目中组件加载需要耗时，在组件未完全渲染出来这一段时间，如果不管不问显然不是明智之举；可以在这段时间体现交互的过程，做一些组件加载完成前做的事，这有利于优化页面。return ( <div> <Suspense fallback={ReactNode}> <BrowserRouter> <Router path='' componen
2021-03-02 16:13:38
537
原创 wangEditor在react项目中使用心得
import editor from "wangeditor"const editor = new editor("#box")editor.create()功能应用1-菜单的设计// 设置初始化菜单，new之后create之前editor.config.menus = [ 'image'] // 设置不需要的菜单入口editor.config.excludeMenus = [ 'image'];功能应用2-图片的自定义上传// 设置图片最大尺寸editor.
2021-02-26 10:19:08
698
2
原创 参考官网菜鸟等、对webpack知识的记录、以及webpack5新特性理解
webpack打包完后只有一个入口函数 如像图片打包完后 会成base64的一种格式 就是描述图片的很长的数据，安装webpack需要依赖node.js优点：是减少http请求 ，减少js文件之间的依赖，可以处理浏览器不认识的 如less scss es6 （webpack只能认识一部分es6）const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装c
2021-01-08 11:44:00
135
原创 js reduce使用介绍
数组方法 reduce,用来迭代一个数组，并且把它累积到一个值中,使用时可传入四个参数分别为result–每一次代码结束后的返回值current–当前元素index–当前元素在所属对象里面的索引arr–指的是当前元素所属对象下面为具体的一个应用事例let objs = [ {name: '1', value: 1}, {name: '2', value: 2}, {name: '2', value: 3}, {name: '1', value: 4},
2020-12-30 15:46:20
123
原创 react项目里antd上传图片的组件upload
当需求有上传完图片且保存到草稿里时，不仅需要调接口上传图片，而且在重新进入页面时，也要预览效果。函数组件也好、类组件也好，使用逻辑都一样,下面对着antd的示例详细解析```javascriptimport React from 'react';import {Upload, Modal} from 'antd';import {PlusOutlined} from '@ant-design/icons';// 这里时图片格式得转换，具体看需要那种格式，返回promisefunction
2020-12-14 15:36:50
1270
原创 关于redux在react中的应用总结
reduxjavascript提供的一个可预测性的状态容器（我们给一个固定的输入 那麽必定可以得到结果）集中的的管理react当中多个组件的状态redux是一个专门的状态管理库 （是一个插件 在vue也可以使用 但是在react比较多）cnpm istall redux --savestore 状态仓库reducer 处理业务逻辑需求场景某个组件的状态需要共享的时候一个组件需要改变另一个组件状态的时候组件的状态需要在任何地方可以拿到三大原则1.单一数据源 整个react中的状态 都
2020-11-26 20:53:48
263
2
原创 form-render的简单使用心得（FormRender现已升级到 XRende）
偶尔一次使用了form-render表单生成器，使用方便简单，通过简单的Schema就可以生成表单，很符合数据驱动这一理念，基本需求也都能满足。 但是作为新兴的react第三方包，缺点就是互联网上相关资料太少，在使用过程中想要熟悉一些API的使用，相关实例也较少。具体使用事例如下： 简单事例 // 首先写好完整的'数据' "schema": { "type": "object", "properties": { "string": { ...
2020-11-24 10:52:13
7727
6
原创 react hooks的学习补充
Hooks 是 React 16 中的特性，解决函数组件想使用类组件的一些特性。useEffect一般在函数组件里使用该hooks调接口获取数据useEffect不传递第二个参数会导致每次渲染都会运行useEffect。然后，当它运行时，它获取数据并更新状态。然后，一旦状态更新，组件将重新呈现，这将再次触发useEffectuseSelectoruseDispatchuseContextuseReduceruseMemouseHistoryuseState...
2020-11-10 22:13:33
197
2
原创 日常工作中 在项目合作里遇到的关于git的使用
git init把当前目录变成 Git可以管理的目录 git的很多命令 都要在git仓库中运行 可以说 git init是使用git的第一个命令git clone在使用git进行版本控制时 想要得到一个项目的拷贝需要知道这个项目的URLgit clone URL （这里使用http协议时需要记住自己的用户名和密码 ）git add . / git add -A / git add filename提交修改 和新建到暂存区 . 和 -A 是提交所有 加文件名说明 制定的某一个git co
2020-10-24 17:48:49
148
3
原创 async/await promise 源码理解与实践
async/awaitjavascript 中 async/await 是 generator 的语法糖 async函数返回的是promise对象async 表示函数里面有异步操作 await 等待后面的异步操作得出结果 可以理解为 将异步转化为同步；因为promise的特点-无等待，若是无await的情况下 会立即执行 返回一个promise对象 并且不会阻塞后面的代码；await可以理解为在等待async，但是await不仅仅可以用于等待promise对象 也可以 用来等任意表达式的结果哦自测应用
2020-10-20 21:32:46
224
1
原创 js闭包经典面试题add(1)(2)(3)；//6
在函数外部能够访问函数内部的函数 叫作闭包 闭包的优缺点不一一赘述首先实现一个简单闭包 传入一个参数function add(x){ var count = x function bdd(){ return count += 1 } return bdd() //返回一个函数}var result = add(0)console.log(result) //打印一个函数console.log(result()) //打印1console.log(result()) //
2020-10-20 20:32:35
1872
1
原创 js节流与防抖的代码实现与应用场景简述
节流一定时间内只执行一次相关代码适用场景：图片懒加载 监听滚动条如鼠标移动事件中onmousemove、滚动条事件等 ，如若事件触发执行的相关代码中有关于DOM节点的相关操作 又或者 ajax 请求接口，会造成计算机的性能的浪费，这种现象是我们不希望见到的特点：监听timer这个变量，如果timer为null的时候 才会执行callbackfunction throttle(callback, wait) { var timer = null return function
2020-10-20 19:58:39
494
10
原创 react生命周期的学习与总结
框架的生命周期就是特定阶段调用的钩子函数 有了生命周期才像一个框架一个组件的生命周期有四个1.initial 执行初始化 props state都有了2.mounting 挂载阶段 【要挂载吗】有一个render3.updating 修改 【要修改吗】 shouldComponentUpdate(nextProps,nextState)4.unmounted 卸载// 组件即将被渲染 装载到真正的页面上 UNSAFE_componentWillMount(
2020-10-18 14:36:17
122
1
原创 关于react路由的学习总结
1.下载路由webpack里引入第三方包react-router-dom或者react-router 利用npm/cnpm/yarn 皆可 前提是有事先部署npm环境HashRouter hash模式 url带# 刷新时不会丢失数据BrowserRouter 历史记录模式 不带#号 刷新时会丢失 本地模式不会2.引用路由模块（1）在跟组件中引入import {HashRouter as Router} from “react-router-dom” //可不带as 但需，Router
2020-10-18 14:11:50
210
1
原创 react脚手架知识记录
create-react-app 是facebook官方推出的一款react脚手架电脑必须有node 升级到最新版本安装1.npm install -g create-react-app 全局安装脚手架2.create-react-app --version 查看版本3.cd 到需要创建的文件夹中 create-react-app 项目名 创建项目cnpm i yarn -gyarn startnpm start4.npm start 启动项目可能使用的包cnpm
2020-10-17 16:58:57
106
1
原创 react小练习todolist并且简要使用hook
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>私人练习</title> <script src="./libs/babel.min.js"><
2020-10-13 19:32:05
215
1
原创 axios 全局拦截
import axios from 'axios'import { getToken } from './auth'const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 接口域名地址 timeout: 5000 // 请求超时时间})service.interceptors.request.use( config => { if (getToken()) {
2020-09-26 14:59:23
322
1
原创 关于vuex的部分学习和注意事项
uex是vue的状态管理 作为数据源存在state //状态 数据getters //向外暴露方法 用于访问statemutations //只有提交mutation修改state才是被允许的actions //异步提交mutation 从而改变state的状态modules 模块store文件夹 的入口函数里 需要引入主要的vue vuex 和其他需要的模块 比如modules模块化的模块声明 Vue.use(Vuex)实
2020-09-22 18:26:26
168
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人