前端泥瓦匠-CSDN博客

原创 vue3.0通讯 - hook优雅的封装mitt.js

简单的说 mitt 就是一个全局的总线程，在 vue2.0中，我们经常会使用EventBus去处理问题，这时候你会说啥是总线程呢。更简单的说，其实就是发布订阅事件。

2022-07-28 09:11:49 2163

原创微前端入门篇 | 详解微前端演变(附源码)

什么是微前端各个开发团队都可以自行选择技术栈不受同一项目中其它团队影响;各个交付产物都可以被独立使用，避免和其它交付产物耦合;各个交付产物中的样式不会污染到其它组件;各个交付产物都可以自由使用浏览器原生API,而非要求使用封装后的API;背景前端应用越来越复杂导致人力成本压力维护成本高迭代成本高需求变更影响范围大持续化投入产出比不足期望单体应用，独立升级单体应用，挂了，不影响整体项目场景分析如何实施微前端拆分和聚合?大仓库拆分独立的模块，统一构建名词.

2021-08-20 09:42:24 474

原创仿百度验证码(vue+node)

1 为什么我们要使用验证码?如果你是一个只想看干货的程序员，又不想听我说废话，这里请直接滑动到最后，获取代码。描述一个业务场景:假设你想要浪费xxx公司的短信验证码，你会怎么做?假设你就是这家公司的程序员，你该怎么保护公司呢?1.2 设想性攻防战第一回合攻击方: (模拟接口调用) 使用postman工具，将发送短信的接口疯狂的调用。防守方: (运营商保护) 作为后端团队，马上开启会议模式，思考如何防止呢?好，接口供应商的接口保护开启。设置一天内容同一个手机号，只能请求10次，每

2021-07-15 15:53:23 530

原创 webpack: 多页面+vue单页面老项目jq升级

1 入手项目进入一家老的公司，公司规模也不大，但是我们从git上下载后，我们猛然发现，这项目有一种心痛的感觉。这都2020年了，居然还有人用这么古老的方案去进行一个项目。那么这时候，我们该怎么办，我们陷入了沉思，继续维护？还是准备跑路?忍住，我们先看看代码…目录一个公共的index代码…居然都没有抽离…如下代码大概有个1000多行…blockquote,body,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,html,ifra

2021-01-07 11:21:12 918 1

原创【历史角度】前端混合开发技术的选型之路

一、历史的选择历经多年的手机开发，最终被安卓和ios一通天下。我还记得很多年前，我特别想买的一款诺基亚塞班系统的手机，后来一个亲戚买了之后，各种app不支持，手机还是好的，还挺新，但是不好使了。还记得那些年的Windows Phone，我一直觉得和现在的window10设计还是一致的。![image.png](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAyMC9wbmcvMjcxMTI0LzE1OTY

2020-08-03 00:08:34 877

原创 JavaScript基础入门笔记

0 介绍0.1 ECMAScriptECMA-262 的第 5 版是 JS 的第一个稳定版本，得到了各浏览器厂商的支持。语法类型语句关键词保留字操作符对象0.2 DOM文档对象模型是针对 XML 但经过扩展用于 HTML 的 API 。DOM 把整个页面映射为一个多层次节点结构。HTML 或 XML 页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。...

2019-12-19 23:18:12 1503

原创 ECMAScript 6入门笔记

1. 作用域变量作用域就是变量的作用范围。也就是你声明一个变量以后，这个变量可以在什么场合下使用。以前的JavaScript只有全局作用域，和函数作用域。1.1 var的问题1.var 没有块级作用域，定义后在当前包中都都可以访问，如果变量名重复，就会覆盖前面定义的变量，并且很可以被他人修改。if(true){ var a = "a"; //期望a是某一个值}console.log(...

2019-12-19 23:09:23 304

原创 vue-cil 3.0 配置说明

1 安装vue-cli3.00 淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org1 安装vue-clinpm install -g @vue/cli# ORyarn global add @vue/cli2 查看版本vue --version3 vue-cli构建项目vue create ...

2019-12-19 22:53:32 841

原创 egg-mongoose专题

导读 egg-从入门到上线 (上) egg-从入门到上线 (下)1 安装与配置1.0 介绍MongoDB 是由C++语言编写的，是一个基于分布式文件存储的开源数据库系统。在高负载的情况下，添加更多的节点，可以保证服务器性能。MongoDB 旨在为WEB应用提供可扩展的高性能数据存储解决方案。MongoDB 将数据存储为一个文档，数据结构由键值(key=>value)对组成。Mo...

2019-12-19 22:51:46 452

原创 egg-从入门到上线 (下)

因为egg知识点丰富，分为上下两章点击见上章导读 egg-从入门到上线 (上)egg-mongoose专题10 阿里监控Node.js 性能平台（alinode）是面向所有 Node.js 应用提供性能监控、安全提醒、故障排查、性能优化等服务的整体性解决方案，提供完善的工具链和服务，协助开发者快速发现和定位线上问题。npm i nodeinstal...

2019-12-19 22:51:04 699

原创 egg-从入门到上线 (上)

1 环境搭建、创建、运行1.1 介绍egg.js是阿里旗下基于node.js和koa是一个node企业级应用开发框架，可以帮助开发团队，和开发人员减少成本。基于koa2、es6、es7使得node具有更有规范的开发模式，更低的学习成本、更优雅的代码、更少的维护成本。1.2 环境搭建1、要求nodejs版本必须大于8.0并且要用LTS 版本2、创建egg的环境 npm i e...

2019-12-19 22:49:20 836

原创 webpack简易版实现

1.模块化模块化是指吧一个复杂的系统分解到多个模块以方便编译。1.1命名空间开发网页要通过命名空间的方式来组织代码命名空间冲突，两个库可能会使同一个名称无法合理地管理项目的依赖和版本无法方便地控制依赖的加载循序1.2 CommonJsCommonJs 是一种广泛的JavaScript模块化规范，核心思想是通过‘require’方法来同步地加载依赖和其他模块，通过module...

2018-12-11 22:44:59 487

原创跨域

同源策略协议域名端口同域http://www.shanghai70.com:8081https://a.shanghai70.cn:8081为什么浏览器不支持跨域cookie LocalStorageDOM元素也有同源策略 iframeajax 也不支持跨域实现跨域jsonpcorspostMessagedocument.domainwindow...

2018-12-11 09:10:52 86

原创解构

解析数组var [name,age] = ['zfpx',8];console.log(name,age);嵌套赋值let [x, [y], z] = [1, [2.1, 2.2]];console.log(x, y, z);// 1 2.1 undefinedlet [x, [y,z]] = [1, [2.1, 2.2]];console.log(x,y,z);// 1 2...

2018-12-07 19:33:53 100

原创作用域变量

var1.可以重复声明2.不能定义常量 var PI = 3.143.不支持块级作用域 if(true)let不能重复定义声明let a = 10let a = 20不会污染全局对象if(true){ let a = 10;}console.log(a);不存在变量的预解释for (let i = 0; i < 2; i ++){ co...

2018-12-07 13:36:31 129

原创预解释

基本数据类型number、string、boolean、null、undefined引用数据类型object：{}、[ ]、/$/、Datefunction全局作用域（global/window）当浏览器加载html页面的时候，首先会提供一个全局jsdiam执行的环境预解释（变量提‘前’声‘明’）在当前的作用域中，js代码执行之前，浏览器首先会默认的把所有带var和f...

2018-12-07 10:35:45 94

转载阵列处理方法 [filter(), find(), forEach(), map(), every(), some(), reduce()]

// 相同的阵列var people = [ { name : 'Casper' , like : '锅烧意面' , age : 18 }, { name : 'Wang' , like : '炒面' , age : 24 }, { name : 'Bobo' , like : '萝卜泥' , age :...

2018-11-19 11:50:50 167

原创 for in、for of、forEach的区别

forEachlet arr= ["a", "b", "c"];a['xx']='c'; // 但是这边如果设置一个非数字的键值队arr.forEach(function (item, index, array){ // 声明（不关心如何实现） console.log(item); // 值 console.log(index); // 键值 console...

2018-11-19 10:56:52 150

转载 JavaScript(ES6) 中条件语句

1.使用 Array.includes 来处理多个条件function test(fruit) { if (fruit == 'apple' || fruit == 'strawberry') { console.log('red'); }}优化变成 ->>function test(fruit) { // 条件提取到数组中 const redFr...

2018-11-19 09:56:28 957

原创励志语录

1.思想改变行为，行为改变结果2.学习的方法记笔记、复习笔记、使用笔记、融会贯通3. 人分两种，一种是成功者-富有，一种是失败者-贫穷。4. 3%是富人，17%是中产阶级、80%是穷人5. 3%是领导者（领袖），97%是追随者（奴隶）6. 97%的人一辈子，工作、赚钱、消费、再工作、再赚钱、再消费7. 当你有一个伟大的梦想，你就可以吸引无数没有梦想和梦想比你小的人来帮助你实现你的梦想...

2018-11-18 23:57:25 457

原创 Browsersync 本地起服务

1）Global Install（全局安装）如果你想在任何目录的命令行中运行Browsersync ，可通过global命令进行全局安装。npm install -g browser-syncLocal Install （本地安装）推荐这种方式来安装 Browsersync - 通过本地安装到每个项目。这种方式的可以使依赖被添加到你的package.json文件里（gulp或gru...

2018-11-18 17:06:12 183

原创 taro-关于跳转路由

新建一个页面知道现在已经有了一个默认的index，现在想做的是跳转到home这个文件在路径 /src/app.tsx 下我们需要添加一个页面这样就将home，添加进了页面管理config: Config = { pages: [ 'pages/index/index', 'pages/home/home' ], window:...

2018-11-15 16:59:02 14879