- 博客(121)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 分享一款基于 AI 的 Chrome 插件
最近使用大模型比较多，公司虽然提供了免费的 ChatGPT 但是需要跳转特定页面才能访问，比较麻烦，于是就想到是否可以开发一款类似于有道词典一样的插件，可以在任何页面随时随地使用，虽然市面上也有类似的插件，但是冗余功能太多，还有很多限制， 交互不太方便，不够简洁，由于奔着自己动手丰衣足食的原则便自己手撸了一款插件。目前默认的是最新的 V3 版本，注册会免费送 200 万 token，基本够用，个人使用起来和 ChatGPT3.5 差别不大，可以覆盖大多数场景，首次进入需要先建立一个应用，具体参考官方文档。
2023-10-25 17:17:58
778
原创 babel源码分析 - generator
这个 babel 解析的最后一篇，我们需要借助 generator 将处理好的 AST 重新转化为代码，从而完成整个流程。首先还是回到 babel-core 的 run 方法中，当执行 generateCode(config.passes, file) 方法时最终执行的下面的代码:// babel-generator/src/index.tsexport default function generate( ast: t.Node, opts?: GeneratorOptions, co
2021-05-30 10:05:03
744
原创 babel源码分析 - traverse
上篇地址：babel 源码分析 一 parse接着上篇，traverse 的主要工作是将 ES6 的 AST 转化为 ES5 的 AST，babel 的各种插件也都是基于此实现的，比如 JSX，TS 的转化等。还记得入口篇中最后 run 方法里的 transformFile 方法吗，它执行的时候最终会执行下面的方法：// babel-traverse/src/index.jsfunction traverse( parent: t.Node, opts: TraverseOptions =
2021-05-09 22:25:13
1676
原创 babel 源码分析 一 parse
接着上篇，我们继续分析 babel 如何将原始代码转化为 AST 的。上篇中执行 parse 的最终执行的就是这个函数// babel-parser/src/index.jsexport function parse(input: string, options?: Options): File { if (options?.sourceType === "unambiguous") { // some code } else { // ???????????? 执行这里 ?
2021-05-09 10:36:10
963
原创 babel 源码分析 - 入口
babel 是日常工作中必不可少的依赖包，虽然天天在用，但是对于内部构造却了解不多，抽空看下了源码，从入口文件开始一步步解密 babel 是如何工作的。当我们使用 npm run babel 的时候会执行到下面的代码，具体位置是 babel-cli/src/babel/index.js#!/usr/bin/env nodeimport parseArgv from "./options";import dirCommand from "./dir";import fileCommand from
2021-05-08 22:34:23
652
原创 useEffect 中为啥不能使用 async
当页面中使用 useEffect 的时候，会在初始化的时候执行 mountEffect 如下：useEffect: function(create, deps) { currentHookNameInDev = "useEffect"; mountHookTypesDev(); checkDepsAreArrayDev(deps); return mountEffect(create, deps);},执行 mountEffect 的时候执行 mountEffectImpl 如下：
2021-04-09 16:41:27
7140
4
原创 react 中如何修改 input 的 defaultValue
react 中如何修改 input 的 defaultValue在使用 react 进行开发时，我们一般使用类组件的 setState 或者 hooks 实现页面数据的实时更新，但在某些表单组件中，页面的数据却无法更新，令人苦恼，比如下面这个例子：import React, { useState } from "react";function Demo() { const [num, setNum] = useState(0); return ( <>
2020-12-28 16:10:20
4946
2
原创 Form getFieldDecorator 传入函数组件控制台报错探究
使用 antd3 的 Form 进行开发时经常需要自定义一些组件，之前都是使用类组件实现，没有问题，但是自从 hooks 发布后，目前开发基本转向了函数组件，但是 Form getFieldDecorator 传入函数组件控制台会出现错误提示。假如我们定义如下的组件：import React, { useRef } from "react";import { Form, Input } from 'antd';const TextInput = () => { return <
2020-12-23 14:55:46
2088
原创 Modal.success 中 hook 无法实时更新问题
Modal.success 中 hook 无法实时更新问题最近同事问了我一个问题，为啥 Modal.success 中的 hook 无法实时更新，代码如下import React, { useState } from "react"import { Modal, Button } from 'antd'function App() { const [num, setNum] = useState(0) const success = () => { set
2020-12-02 18:09:53
1714
原创 antd3和4的form对比
首先回顾一下antd3的用法import React from "react";import { Form, Input, Button } from "antd";const Demo = ({ form }) => { const { getFieldDecorator, validateFields } = form; const handleSubmit = e => { e.preventDefault(); validateFields((err, v
2020-06-01 10:25:52
4330
原创 babel 如何转义extends
接着上一篇文章，我们继续进行extends的解析。开始之前，我们先要回顾一下ES5的继承，以前实现继承也不是一件容易的事情，常用的方法有构造函数继承，原型继承，组合继承，寄生式继承和寄生组合式继承等，构造函数继承中每个子类的属性和方法都是独立，太浪费内存，原型继承虽然实现了方法的共享，但是存在子类修改公共方法，影响其他子类的问题等，那么babel是如何来处理继承的呢，接下来我们通过babel官网提供的工具看一下：// 原始代码class Father { name = 'iwen' a
2020-05-25 17:07:34
910
原创 antd 中 Tooltip 和 Popover 组件传图错位
antd 中 Tooltip 和 Popover 组件传图错位最近遇到一个需求，当鼠标 hover 一个 icon 的时候展示一张图片，因为项目时基于 antd 进行开发的立马想到了 Popover 组件，写下了如如下代码：<Popover content={<img src="https://wtniu.xyz/res/pic.png" alt="" />}>...
2020-01-10 16:27:12
4160
3
原创 小程序和 react 组件间通信
组件化开发是目前前端开发中十分重要的一项技能，无论是 Vue， react 还是小程序对于组件化开发都有很好的支持，要想掌握好组件化开发，组件之间的通信是无法绕过的话题，最近技术栈从 Vue 转向了 react + 小程序，便总结了一下在进行 react 和小程序开发时，组件之间是如何通信的。 组件之间的通信一般有三种，一种是父组件向子组件通信，一种是子组件向父组件通信，还有一种是兄弟组件...
2019-03-15 18:21:20
480
转载 编程15年，如何才能成不了高手？
**导读：**总是会有人问我这样一个问题，如何学习编程？我从来没有正面回答过这个问题。我都是会推荐他们去知乎或者百度贴吧去问一下，因为那里大牛的密度比较高。我不是大牛，所以，不好回答这个问题。但是总有人不死心啊，总是问个不停，觉得我孬好做了这么多年程序员，总得有点经验吧，我想了一下，成功的经验真没有，失败的教训可以说一说。虽然说失败是成功之母（BTW：我并不相信这句话，我认为这就是安慰失败者的话...
2019-03-06 00:40:32
552
2
转载 雷军自述：我十年的程序员生涯
最近，和UCWEB同事讨论，怎么才能把我们的UCWEB做到极致。我说，“手机上的平台非常多，如果想做好，需要足够多、足够优秀的程序员。 优秀的程序员如何定义呢？首先必须热爱写程序，其次必须是一个完美主义者。 只有这样的人，才能把事情做得极致。”说着说着，我怀念起我过去写程序的日子，从1987年到1996年，那是一段阳光灿烂的日子。几年前我无意中从网上找到了1996年在金山西点BBS上写几篇帖子，...
2019-03-05 23:02:56
606
原创 chrome 插件开发入门实例
以前记录一些简单的信息时使用记事本比较多，虽然非常方便但是记事本不能自动保存，重启或者死机后信息容易丢失，平时使用chrome比较多，所以就研究了一下chrome插件开发，并开发一块简单，方便的便签插件，截图如下：想要入门 chrome 插件开发的可以查看源码：github地址：https://github.com/daoket/Easy-Notes，想要直接安装使用的可以直接跳转...
2019-02-18 14:48:31
4362
原创 为什么不推荐使用 setInterval
为什么不推荐使用 setInterval首先简单介绍一下 js 的执行原理：js引擎是单线程的，主要分为主线程和事件队列，同步操作是在主线程上执行，而异步操作的函数会先放在事件队列当中，等到js主线程空闲了，才会去事件队列取出放到主线程，继续进行操作。定时器是属于异步事件，参数里面设置的时间，并不是延迟多少秒去执行回调函数，这个时间代表的是延迟多少秒，把回调函数放到异步队列，等待主线程空闲再被执...
2019-01-29 16:51:35
3918
原创 for of 实现原理
for of 是我们经常使用的一个属性，它可以非常方便的遍历数组，除此之外，它还可以用来遍历类数组对象，Set和Map等，那么问题就来了，为什么它可以遍历Map却不能遍历普通的对象呢？今天就来探索一下for of底层的秘密。首先，我们要知道for of是用来遍历可迭代对象的，那么如何判断一个对象是否是可迭代对象呢？js引擎是通过判断对象是否具有 Symbol.iterator 来判断的，如下：...
2019-01-13 10:45:59
2709
3
原创 babel 是如何编译 class 的?
经常使用ES6中的class，但却一直不知道 babel 是如何编译的，所以就抽空研究了一下，下面是相关的代码，关键地方都已经添加了注释。1. 编译类ES5 定义类function Person(name) { this.name = name;}Person.prototype = { sayHello: function () { return 'hello, I ...
2019-01-12 19:04:39
1121
原创 JavaScript中异步函数
JavaScript 中常见的异步函数有：定时器，事件和ajax等，那么如何来处理这些异步函数呢，常用的方法有下面几种：回调函数function eat() { console.log('好的，我开动咯');}function cooking(cb) { console.log('妈妈认真做饭'); setTimeout(function () { console...
2019-01-12 16:17:09
14498
2
原创 浅谈深拷贝
在 JavaScript 中可以使用递归实现一个深拷贝，代码如下：const obj = { info: { person: { name: 'iwen', age: '18', } }}// 第一版function deepClone(obj) { let result = Object.create(null) for (con...
2019-01-08 20:19:54
355
原创 Vue 组件化开发
Vue 组件化开发提示： 本次分享知识点基于 vue.js，需要对 vue.js 有一定的了解。什么叫做组件化vue.js 有两大法宝，一个是数据驱动，另一个就是组件化，那么问题来了，什么叫做组件化，为什么要组件化？接下来我就针对这两个问题一一解答，所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。 因为组件是资源独立的，所以组件在系统内...
2018-12-20 15:50:21
31051
原创 JavaScript 设计模式
Javascript 设计模式系统讲解与应用第1章 课程介绍面试敲门砖、进阶垫脚石、设计有模式、代码更合理第2章 面向对象2-1 搭建开发环境基于 webpack webpack-cli 搭建。2-2 什么是面向对象2-3 面向对象-继承2-4 面向对象-封装2-5 面向对象-多态2-6 面向对象-应用举例2-7 面向对象-总结2-8 UML类图1-介绍2-9 UML类图...
2018-12-03 16:28:53
1096
原创 自定义vue-cli3项目配置
修改默认配置vue.config.jsmodule.exports = { outputDir: 'docs', baseUrl: process.env.NODE_ENV === 'production' ? '/vant-demo/' : '/'}官方文档： 具体配置去掉console.log提醒package.json&quot;rules&quot;: { &quot;no-cons...
2018-10-29 14:41:44
3540
1
原创 编译的过程
• 分词/词法分析（Tokenizing/Lexing）这个过程会将由字符组成的字符串分解成（对编程语言来说）有意义的代码块，这些代码块被称为词法单元（token）。例如，考虑程序 var a = 2;。这段程序通常会被分解成为下面这些词法单元：var、a、=、2 、;。空格是否会被当作词法单元，取决于空格在这门语言中是否具有意义。分词（tokenizing）和词法分析（Lexing）之...
2018-10-20 09:12:28
285
原创 UML类图入门
在进行源码分析和软件架构设计时，UML类图十分有用，下面我就介绍一下UML类图最常用的元素，几分钟就可以掌握。一. 类的UML图示在UML类图中，类使用类名、属性(field)和方法(method)且带分割线的矩形表示，如下图表示一个Person类，它包含了name，age这2个属性，以及say()方法。那么属性/方法名称前的加好和减号是什么意思呢？它们表示了这个属性或方法的可见性，UML...
2018-10-12 17:34:55
447
原创 《Linux/Unix设计思想》随笔
Unix 哲学的几条准则看似简单。事实上，它们简单到会容易使人们忽略其重要性。这就是它们颇具欺骗性的地方。其实，简单的外表下掩盖着一个事实：如果人们能够始终如一地贯彻它们，这些准则可是非常行之有效的。以下这份清单会让你对 Unix 哲学的准则有初步的认识。本书其余部分则会帮助你理解它们的重要性。(1) 小即是美。相对于同类庞然大物，小巧的事物有着无可比拟的巨大优势。其中一点就是它...
2018-09-21 10:32:09
871
原创 css3 实现loading动画
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
2018-09-07 02:35:22
540
原创 图片转base64方法总结
将图片转为base64格式是一种比较常见的需求，今天就总结一下在浏览器中和服务器上比较常用的几种方法。通过canvas将图片转base64<!DOCTYPE html><html lang='zh'><head> <meta charset='UTF-8' /> <meta name='viewport' content='...
2018-08-15 10:47:33
5547
原创 TensorFlow笔记
TensorFlow是什么？ Tensor（张量）意味着N维数组，Flow（流）意味着基于数据流图的计算，TensorFlow为张量从流图的一端流动到另一端计算过程，是将复杂的数据结构传输至神经网络中进行分析和处理的系统。 TensorFlow中常用的激励函数有哪些？ 公式 代码实现import tensorflow as tf;import numpy as np;imp...
2018-08-04 00:23:37
301
原创 webpack打包后文件分析
平常遇到喜欢的页面总喜欢拿来欣赏一番，今天就以webpack+vue的项目为例分析一下打包后的源码。 环境： webpack4.16 vue2.5.16为了方便理解，先使用webpack打一个最简单的包（未使用vue），下面是混淆压缩前的伪代码(function (modules) { var installedModules = {} // 缓存模块 // 处理AMD ...
2018-08-02 11:28:00
4968
原创 机器学习笔记
1. 为什么要进行特征抽取？ 为了将原始数据转化为算法要求的数据2.特征抽取常用的方法有哪些？one-hot编码from sklearn.feature_extraction.text import CountVectorizercv = CountVectorizer()data = cv.fit_transform(['life is is short, i like ...
2018-07-23 15:24:25
310
原创 chrome，FireFox和Edge性能比较
今天没事，就比较了一下chrome和FireFox在渲染大量图片时的性能，本来想渲染一万张图片，结果chrome要7，8秒，FireFox和Edge直接卡死，最后改用1000张进行比较： 环境： 系统：window10 处理器：Intel i5 7300HQ 内存： 8G 浏览器： chrome67 Firefox61 Edge42.17134测试用例：&amp;amp;amp;amp;lt;...
2018-07-16 16:32:58
24031
1
原创 使用request模拟登录开源中国
源码const CryptoJS = require('crypto-jS');const request = require('request');const cheerio = require('cheerio');let config = { loginUrl: 'https://www.oschina.net/action/user/hash_login?from=', ...
2018-07-08 11:57:44
793
原创 组件化开发的一些思考
组件化和模块化开发是这几年比较热门的话题，在尝到了模块化开发的甜头后，近期打算将公司的项目切换到vue进行组件化开发，这里对遇到的问题进行一下总结：首先抛出开发中遇到的问题： 1. 哪些部分可以进行组件化？ 2. 项目的目录如何划分比较合理？ 3. 组件划分太细，难以维护，划分太大，导致灵活度降低，如何权衡？ 4. 除了公共组件和功能组件的组件化，业务代码往往和每一个项目强耦合，需不需...
2018-06-26 16:17:13
1555
原创 node 快速入门
assert用法const assert = require('assert');try { var a = 10 var b = 20 assert.equal(a, b, '不相等') // notEqual strictEqual deepEqual notDeepEqual} catch (error) { console.log(error.message)...
2018-06-26 15:47:44
231
原创 短篇随笔
今天在整理笔记，下面是我以前写的一些随笔，觉得挺不错的，分享一下。做人要有激情 圣人说，吾日三省吾身。做人一定要反思，回顾以前的自己，反思的次数就太少了，加上自己又是一个内向的人，喜欢宅在家里面，不经常到外面，慢慢地自己越来越宅，朋友也越来越少，这样是不对的，其实应该多出去玩玩，看看更大的世界，遇见更多的人，生活中，不求做到轰轰烈烈，至少做得无怨无悔。轰轰烈烈，那是伟人去做的，我不是伟人，我...
2018-06-02 15:29:43
1329
原创 前端知识点梳理
JavaScript语法设计模式函数式底层框架和类库发展语法变量this深拷贝继承闭包高阶函数异步和事件模式设计模式单例模式工厂模式观察者模式函数式函数式编程底层js解析原理V8引擎框架和类库jqueryvue发展typescriptHTML&amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;CS...
2018-05-31 23:30:27
404
原创 前端性能优化
前端性能优化资源的加载方式懒加载适用场景：页面很长，图片很多原理： 可视区内部的图片正常加载，可视区外的图片src设置为预览图，将图片的src放在img标签的data-src属性中，如&lt;img data-src='img/pic.png' src="img/demo.png"/&gt;实现方式： 1. 手动实现 2. lazyload.js预...
2018-05-24 17:47:14
277
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人