- 博客(51)
- 收藏
- 关注
RSS订阅原创 通过gulp+vite搭建vue3组件库
配置 package.json，通过npm publish即可上传至npm，要注意的事，上传npm时，不要用淘宝镜像，切换npm自身的镜像，否则会有10分钟的延迟。打包完后，得到dist目录下的打包后的代码，为了方便测试，我们先不上传到npm，而是通过npm link软连接的方式，引入组件再次测试，得到一样的结果。这里主要是创建一个可以运行的测试的组件的环境，全局安装vite脚手架，并初始化项目。然后，在components的根目录下，建立一个index.js，该文件用于。修改文件夹名称和基本配置的修改。
2023-05-11 14:47:56
1022
1
原创 实现一个简单的前端脚手架
随着前端工程化的概念越来越深入人心，脚手架应运而生。简单来说，「前端脚手架」就是指通过选择几个选项快速搭建项目基础代码的工具前端脚手架可帮我们做什么？可以帮助我们快速生成项目的基础代码脚手架工具的项目模板经过了开发者的提炼和检验，一定程度上代表了某类项目的最佳实践脚手架工具支持使用自定义模板，我们可以根据不同的项目进行“定制”我为什么要搭建一个前端脚手架？主要在开发过程中，要做的项目很多，有涉及到vue2、vue3、react、uniapp、小程序等等，然后又有PC端、移动端；
2023-05-10 13:52:29
677
1
原创 通过gulp+rollup从零到一搭建前端组件库
配置 package.json，通过npm publish即可上传至npm，要注意的事，上传npm时，不要用淘宝镜像，切换npm自身的镜像，否则会有10分钟的延迟。打包完后，得到dist目录下的打包后的代码，为了方便测试，我们先不上传到npm，而是通过npm link软连接的方式，引入组件再次测试，得到一样的结果。这里主要是创建一个可以运行的测试的组件的环境，全局安装vue-cli脚手架，并初始化项目。然后，在components的根目录下，建立一个index.js，该文件用于。
2023-05-06 15:28:47
1267
原创 vue-vue2和vue3响应式原理的区别
而数组因为是通过重写数组的7个方法【 ‘push’,‘pop’,‘shift’,‘unshift’, ‘splice’,‘sort’,‘reverse’】和遍历数组元素进行的响应式处理，也会导致按照数组下标进行赋值或者更改元素时无法触发视图更新。但是 只有通过 proxyObj 进行操作的时候才能通过定义的操作拦截方法进行处理，直接使用原对象则无法触发拦截器，这也是 Vue 3 中要求的 reactive 声明的对象修改原对象无法触发视图更新的原因；并且 Proxy 也只针对。通过下面的简易代码来分析。
2023-04-18 14:30:43
533
原创 vue-vue2和vue3的diff算法
乱序部分，采用最长递增子序列的算法，最大递增子序列的作用就是通过新旧节点变化前后的映射，创建一个递增数组，这样就可以知道哪些节点在变化前后相对位置没有发生变化，哪些节点需要进行移动，如下图计算出E、F、Y、J 是不需要操作的节点，直接复用，然后移动K节点，即可完成一次更新；若新的比老的长，创建，可以看到下图新的比老的多，新的多了一个D，多出来的这个节点就需要创建并添加到尾部。老的比新的长，删除，可以看到下图老的比新的多了个C，多出来的这个节点需要删除。
2023-04-12 16:03:19
2921
1
原创 vue-性能优化
线上的项目，一般都会结合构建工具 webpack 插件或服务端配置 nginx，来实现 http 传输的 gzip 压缩，目的就是把服务端响应文件的体积尽量减小，优化返回速度，html、js、css资源，使用 gzip 后通常可以将体积压缩70%以上，这里介绍下使用 webpack 进行 gzip 压缩的方式，使用。4、按需引入，咱们使用的一些第三方库可以通过按需引入的方式加载。/5、可以使用keep-alive，keep-alive是Vue提供的一个比较抽象的组件，用来对组件进行缓存，从而节省性能。
2023-03-23 18:18:59
292
原创 vue-vue2和vue3的区别
核心要点用Composition API代理Options API体积更小数据响应式的区别diff算法优化静态提升事件监听缓存SSR优化部分新特性1、用Composition API代理Options API逻辑的独立分离，更好阅读和维护更少的代码量2、体积更小vue2导入的是整个vuejs，而vue3可以按需导入通过webpack的tree-shaking功能，可以将无用模块“剪辑”，仅打包需要的能够tree-shaking；3、数据响应式的区别Vue2是通过
2023-03-23 17:35:13
294
原创 js-防抖和节流
防抖(debounce)：触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间let timer;} , delay);节流(thorttle)：高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率//触发的时间 return function() {//第一次函数return即触发的时间 if(backTime - enterTime > delay) {} };
2023-03-23 11:48:42
269
原创 vue-vue的插件机制与install
插件制作时会通常会加上 install 方法，我们以 Vue-Router 为例。核心作用就是use的时候，判断插件类型，执行install或者插件本身。然后我们在项目中使用 Vue-Router 插件。（3）Vue-Router 挂载流程。（2）根据上面的例子我们进行分析。
2023-03-23 10:18:45
847
原创 说走就走的旅行
阿里大环线14日：https://www.mafengwo.cn/wenda/detail-12586206-12588255.html新疆北疆环线12日：https://www.mafengwo.cn/wenda/detail-22243482-22246003.html青海甘宿环线10日：https://www.mafengwo.cn/i/21557905.html?sys_ver=
2022-09-13 10:06:47
175
原创 vue-初始过程做了什么
如果发现配置项上有el选项，则自动调用$mount方法，也就是说有了el选项，就不需要再手动调用$mount方法，反之，没提供el选项则必须调用$mount。初始化组件的inject配置项，得到ret[key]=val形式的配置对象，然后对该配置对象进行响应式处理，并代理每个key到vm实例上。(2)初始化每个子组件时做了一些性能优化，将组件配置对象上的一些深层次属性放到vm.$options选项中，以提高代码的执行效率。初始化组件实例的关系属性，比如。...
2022-07-26 18:18:27
207
原创 vue-自动化测试框架JEST和CYRPESS
大部分企业为了追求开发效率，所以并没有去强制要求员工写前端自动化测试的代码。将已测试过的单元测试函数进行组合集成暴露出的高层函数或类的封装，对这些函数或类进行的测试。单元测试是指对程序中最小可测试单元进行的测试，例如测试一个函数、一个模块、一个组件…（1）根目录/src/component/ZTest/index.vue。（2）根目录/tests/unit/ZTest.spec.js。强迫开发者编写更容易被测试的代码，提高代码质量。编写的测试有文档的作用，方便维护。不方便迭代，代码重构困难。........
2022-07-25 18:03:39
1824
原创 vue-sentry实现前端监控
3、在.env.development和.env.production和.env.staging文件中定义sentry版本号的环境变量VUE_APP_RELEASE_VERSION=‘vue-admin-template@1.0.0’5、在App.vue中故意抛出错误，运行程序，然后到sentry中查看错误记录。，注册账号，建立组织（organization）和项目（project）4、在main.js文件中初始化监控服务。2、安装sentrysdk。...
2022-07-25 14:53:15
982
原创 js-简单的发布订阅类
核心思想用个全局变量存储订阅函数emit 触发时遍历对应数组的每个变量并执行off 时将对应函数从数组中删除//这里省略的一些边界处理，只是为了极简的表达核心实现方法class Observe { cb = {} on(eventName, fn) { this.cb[eventName] = this.cb[eventName] || [] this.cb[eventName].push(fn) } emit(eventName, data) {
2022-04-01 15:42:16
342
原创 vue-双向绑定
实现过程我们已经知道如何实现数据的双向绑定了，那么首先要对数据进行劫持监听，所以我们首先要设置一个监听器Observer，用来监听所有的属性，当属性变化时，就需要通知订阅者Watcher，看是否需要更新。因为属性可能是多个，所以会有多个订阅者，故我们需要一个消息订阅器Dep来专门收集这些订阅者，并在监听器Observer和订阅者Watcher之间进行统一的管理。因为在节点元素上可能存在一些指令，所以我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令初始化成一个订阅者Watc
2022-03-17 15:26:47
715
原创 区块链-PancakeSwap抢跑机器人
核心思路监听txpool，直到检测匹配符合我们的条件时购买提高gas费实现插队核心技术ethers或web3，本文采用etherserc20核心方法1、通过ehters提供的监听方法，监听链上的pending事件2、通过 swapETHForExactTokens 实现bnb交换对应的代币，如果非bnb交易池，例如是busd交易池，则需要用swapExactTokensForTokens，交换对应的代币。3、如果想将对应的代币，换成bnb，则需要swapExactTokensF
2022-03-15 10:28:41
11784
2
原创 js-promise实现逻辑
一、promise实现class MyPromise { static PENDING = 'PENDING' static FULFILED = 'FULFILED' static REJECTED = 'REJECTED' constructor(callback) { if (typeof callback !== 'function') { throw new TypeError('promise resolve undefined is no a func
2022-03-14 16:41:32
191
原创 书籍-孙子兵法
目录【始计篇】【作战篇】【谋攻篇】【军形篇】【兵势篇】【虚实篇】【军争篇】【九变篇】【行军篇】【地形篇】【九地篇】【火攻篇】【用间篇】一、【始计篇】【原文】孙子曰：兵者，国之大事，死生之地，存亡之道，不可不察也。故经之以五事，校之以计，而索其情：一曰道，二曰天，三曰地，四曰将、五曰法。道者，令民与上同意也，故可以与之死，可以与之生，而不畏危。天者，阴阳，寒暑、时制也。地者，远近、险易、广狭、死生也。将者，智、信、仁、勇、严也。法者，曲制、官道、主用也。凡此五者，将莫不闻
2021-11-02 16:38:36
1199
1
原创 书籍-投资理念和策略
一、格雷厄姆一、核心理念价值投资【价格更重要（格雷厄姆的价值系），用好价格买凑合的公司】安全边际投资多元化，适当分散短期持有（2年左右）二、估值方法：用一只股票过去7-10年的平均市盈率，跟同一时期的市场平均数做对比。公司的业绩在短期内可能波动很大，但7~10年的平均数可以作为一个标准。平均市盈率低于市场水平，或者说每股利润高于市场水平的股票，比较适合防御型投资者买入。而积极型投资者可以拿出一部分资产来配置成长性较强的公司，格雷厄姆对成长型公司的定义是：最近2-3年的增
2021-10-13 15:11:15
188
原创 书籍-邓普顿教你逆向
第一部分，邓普顿如何做逆向投资所谓逆向投资，就是反向操作，别人不买的时候买，别人都买的时候卖。邓普顿之所以这么做，是为了买到最便宜的股票。他很小的时候，就从父亲那里学到了这一招。股票市场的机制和农场拍卖是一样的，许多人抢购的时候，只有出高价才能买到。而想要买得便宜，那只能在无人竞价的时候出手。但是，市场上的其他投资者并不是傻子，一只便宜的股票摆在面前，为什么会拱手相让呢？换句话说，什么时候，我们才能在大多数人的眼皮底下捡漏，买到便宜的股票呢？邓普顿告诉我们，有三种情况可以买到：第一种情况，股票有问题。
2021-10-12 11:07:27
199
原创 书籍-聪明的投资者
投资者的最大问题甚至最可怕的敌人，很可能就是他们自己。投资艺术具有一种并不广为人知的性质：普通投资者只需付出很小的努力和具备很小的能力，就可以取得一种可靠的成果；但是，要想提高这一可轻易获得的成果，却需要付出大量的努力和非同小可的智慧。根据我对股市长达50余年的市场经验和观察，我从来没有发现过一个依据“追随市场”的方法而长期获利的投资者。某一行业显而易见的增长前景，并不一定会为投资者带来显而易见的利润。最有条不紊的投资就是最明智的投资。精华笔记 《聪明的投资者》是一部..
2021-10-09 15:57:21
9654
原创 书籍-穷查理宝典
一、反向思考，排除掉不该做的事情二、用跨科学的思维思考可以做的事情做能力圈以内的事情跨学科思维可以上升到普世智慧的层次，基本的、普世的智慧是什么？嗯，第一条规则是，如果你们只是记得一些孤立的事物，试图把它们硬凑起来，那么你们无法真正地理解任何东西。如果这些事物不在一个理论框架中相互联系，你们就无法把它们派上用场。为此我们必须掌握足够的知识，但更重要的是形成一个思维框架，在此框架下我们拥有各种模型，并且清楚模型间的关系。根据查理的说法，掌握大概100种模型就能使一个人具有看清生活本质和目标的非凡
2021-10-09 15:10:33
356
原创 书籍-心智模型
什么是心理模型？心智模型是我们理解世界的方式。它们不仅塑造了我们的想法和理解方式，而且塑造了我们所看到的联系和机会。心智模型是我们如何简化复杂性，为什么我们认为某些事情比其他事情更相关，以及我们如何推理。心智模型只是对事物如何运作的表示。我们无法将世界的所有细节都保留在我们的大脑中，因此我们使用模型将复杂的事物简化为可理解和可组织的块。学会更好地思考我们思考的质量与我们头脑中的模型及其在手头情况中的有用性成正比。你拥有的模型越多——你的工具箱就越大——你就越有可能拥有正确的模型来观察现实。事实证明，
2021-10-09 11:04:34
641
原创 js-宏任务和微任务
一、关于js执行异步任务详解js是单线程语言（如果多线程dom会疯掉）js虽然是单线程，但是浏览器是多线程的，js碰到异步任务，并没有自己处理，而是交给了浏览器的其他线程浏览器的线程包括：事件触发线程、定时器线程、http请求线程等js异步任务常见的有：事件、定时器、网络请求等二、js事件循环单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等待所以在同一时间只能执行一个任务，称为主线程，用来执行同步任务主线程之外，
2021-09-23 16:52:54
585
原创 抖音-视频步骤
一、抖音运营教程一：帐号定位首先要仔细思考，发现自己擅长的领域发挥自己绝对的优势，明确领域，垂直化输出内容；账号专注于一个垂直领域有三个好处：一是让用户关注到该领域时，第一时间想到我们，占据粉丝心智，一说到美妆账号就会想到“李佳琦”等等。二是有助于抖音给我们的账号打上垂直标签，有利于内容的精准推荐和搜索。三是有利于商业变现。定位越垂直，粉丝越精准，粉丝粘性和粉丝价值就越高。目前抖音比较吸引用户关注的有：1）第一颜值类小哥哥、小姐姐、萌娃、萌宠；2）第二才艺类技术流、舞蹈、手工、唱歌、配音
2021-08-05 18:36:21
2150
原创 书籍-清醒思考的艺术
《清醒思考的艺术：你最好让别人去犯的52种思维错误》是德国作家罗尔夫·多贝里的作品，中信出版社2013年1月13日出版。作品讲述他曾与一名美国友人分享发现——小概率事件往往具有颠覆全局的破坏力。 他引用生活趣事、名人轶事、历史故事、爱情关系、人际关系、投资之道、心理实验等论述，生动形象而又具体雄辩地指出思维之错的错在哪里，并且还给出了纠正的办法。人性的弱点在本书中完全呈现，是在自己的反思中进步，还是抓住别人的弱点进攻，全在于读者自己的理解和决定。1、幸存偏误幸存偏误指：由于日常生活中更容易看到成功.
2021-08-05 14:00:33
181
原创 书籍-社会性动物
《社会性动物》该书的作者是艾略特·阿伦森（Elliot Aronson）我们这个时代一位杰出的、多才多艺的心理学家。他是美国心理学协会125年历史中唯一一位获得三个重要奖项的心理学家：杰出研究奖(1999年)、杰出教学奖(1980年)和杰出写作奖(1975年)。此外，他还获得了戈登·奥尔波特奖，以表彰他对改善群体间关系的贡献；唐纳德·坎贝尔奖，以表彰他在社会心理学方面的杰出研究。约书亚·阿伦森（Joshua Aronson）纽约大学发展心理学、社会心理学和教育心理学副教授，在那里他领导着正念教育实验室，
2021-07-28 16:13:25
210
原创 书籍-乌合之众
《乌合之众：大众心理研究》该书的作者是法国著名社会心理学家古斯塔夫·勒庞，该书创作的年代为19世纪末期。书中精致的描述了集体心态，对人们理解集体行为的作用以及对社会心理学的思考发挥了巨大影响。一、群体心理群体是无意识的，群体中的个人智慧的高低不会有很大的区别，整个群体的智慧并不会比个人高。《乌合之众》中最基本的观点就是“个人”是有意识的，而“群体”则是无意识的。勒庞认为，推理、逻辑、智力，这些有意识的“理性”因素，在人类头脑中只起着很小的作用。人的绝大多数行动，都是跟着感觉走，受到情感、本能、欲
2021-07-15 15:21:29
267
原创 书籍-思维逻辑提升
长时间的摸索，需要付出巨大的时间成本和交易成本。一个人从事一个事业，常年不赚钱，还要往里边贴钱，一段时间之后不仅是自己难以接受，身边的家人，包括亲戚朋友的就会给你很大的压力，能抗住这种压力的人不多，大部分人在经历了连续的挫折后都会选择放弃。难以克服的人性弱点，成功的投资是反人性的，做股票赚钱一定要站到大众的对立面。当众人都吓得屁滚尿流的时候，你要敢于重仓买入，敢于不管别人说什么，闲庭信步的持股；当人们都欢呼雀跃，争相进场摘桃子的时候，你能不能逆大众的情绪卖出股票。这一条就淘汰了大部分的人。外界的干扰.
2021-06-17 16:21:53
1317
原创 浏览器解析网页的过程
用户输入url并回车；进行DNS解析获得IP： 先搜索浏览器自身dns缓存； 再找本机dns缓存；如找到且未过期则搜索停止，如未找到，则向本地配置的首选dns服务器发起域名解析请求，后续由运营商的dns服务器查到或进一步发送请求，直到拿到域名对应的ip并返回给浏览器；发起TCP协议的三次握手：第一次握手：建立连接时，客户端发送syn(建立联机)包到服务器，并进入syn_send状态，等待服务器确认；第二次握手：服务器收到syn包，确认包信息，同时自己也发送一个syn + ack(确认)包并进入sy.
2021-02-26 13:53:46
1031
原创 vue-初步理解VUE双向绑定原理
vue双向绑定原理vue的双向绑定是由数据劫持结合发布者－订阅者模式实现。什么是数据劫持？： vue通过Object.defineProperty()来劫持对象属性的setter和getter操作，在数据变动时做你想要做的事情。var Book = {};Object.defineProperty(Book,'name',{ set:function(value) { name = value; console.log('你取了名叫:'+value);
2021-02-25 17:30:25
380
原创 js-Map和Set与Array互转
一：Map转Arraylet map = new Map();map.set(1, "a");map.set(2, "b");map.set(3, "c");// 方法一let arr = Array.from(map); // 二维数组console.log(arr);//输出 [[1, "a"], [2, "b"], [1, "c"]]console.log(arr.flat()); // 输出：[1, "a", 2, "b", 3, "c"]// 方法二 使用...res
2021-02-22 09:43:31
1822
原创 小程序对接腾讯云IM即时聊天
小程序对接腾讯云IM即时聊天步骤如下导入sdk（tim-wx-sdk、cos-wx-sdk-v5）初始化登录监听IM各个状态钩子发送消息、接受消息一：导入sdk一：npm方式// IM 小程序 SDKnpm install tim-wx-sdk --save// 发送图片、文件等消息需要的 COS SDKnpm install cos-wx-sdk-v5 --save二：下载js引入方式（文章最后会提供完整代码）二：初始化IM...
2021-01-28 13:58:30
6204
22
原创 js-实现扑克牌顺子算法
js实现扑克牌顺子算法function isStraight(nums=[]){ //根据自己的游戏规则，决定数组最少个数，目前这边定义5 if(nums.length<5){ return false } let set = new Set(); for(num of nums) { if (num == 0) { continue } if (set.has(num)) {
2021-01-15 22:19:34
779
原创 TestFlight上架流程
TestFlight上架App Store审核分7步进行，需要注册一个苹果的开发者账号才能操作安装iOS证书申请辅助软件Appuploader（下载链接）打包好的ipa（ipa打包教程）上传ipa到App Store申请TestFlight内部测试及外部测试1、上传ipa到App Store1.1上传ipa前先登录iTunes Connect，点击我的APP进入创建一个APPhttps://itunesconnect.apple.com/login1.2进入点击左上角+号选择
2020-12-05 17:19:50
10944
3
原创 IOS APP 证书申请 及 打包ipa包
ios发布app前的准备APPID（又称套装ID，应用ID，BundleID，包名）iOS发布证书（p12）iOS发布描述文件（mobileprovision）证书私钥密码（生成p12文件前会要求设置）有以上文件即可打包发布版ipa1、APPID 生成（1）登录 iOS Dev Center（苹果开发者中心）（2）使用苹果开发者账号登录 iOS Dev Center（苹果开发者账号申请流程）（3）进入个人中心创建APPID（更详细流程）（4）完成以上步骤，APPID已经创
2020-12-04 15:49:11
4551
原创 《增值电信业务许可》ICP和EDI
1、什么是ICP许可证?中华人民共和国电信与信息服务业务经营许可证（简称：ICP许可证）是指一般性经营性网站的主办者向当地区县申请的证书证明，即《中华人民共和国电信与信息服务业务经营许可证》。经营性ICP指的是经营的内容主要是网上广告、有偿提供特定信息内容、电子商务及其它网上应用服务。使用场景：涉及到注册用户充值付费下载内容第三方在你平台上做广告做游戏的平台P2P网络借贷等… …对标企业：腾讯游戏、知乎、网易云音乐等等2、什么是EDI许可?EDI证（Electronic Data I
2020-07-15 10:40:39
1033
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人