17个可以实现微前端的方案

2022-04-25
阅读 4 分钟
9.5k
一、微前端方案思路在前端技术领域已有如下几种成熟的实现微前端的思想:基于接口协议:子应用按照协议导出几个接口,主应用在运行过程中调用子应用导出的这几个接口基于沙箱隔离:主应用创建一个隔离环境,让子应用基本不用考虑自己是在什么环境下运营,按照普通的开发思路进行开发即可基于模块协议:主应用把子应用当...
封面图

浅谈微前端

2022-04-15
阅读 5 分钟
2.6k
微前端(micro-frontends)并不是一项新的技术,而是一种浏览器端的架构理念.微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。微前端的概念是由ThoughtWorks在2016年提出的,它借鉴了微服务的架构理念,核心在于将一个庞大的前端应用拆分成多个独立灵活的小型应用,每个应用...
封面图

nuxt + eslint + prettier 保存自动格式化(无需配置.vscode/settings.json)

2021-09-06
阅读 2 分钟
2.6k
首先安装配置完(编码规范,代码提交规范)全家桶husky+lint-staged+commitlint,详细配置方式请戳 全家桶husky+lint-staged+commitlint ,然后开始以下配置完成保存时自动格式化1. 配置.editorconfig文件 {代码...} 2. 配置.prettierrc文件 {代码...} 3. 配置.eslintrc.js文件 {代码...} 4. nuxt.config.js文件下 build...

编码规范,代码提交规范全家桶之husky+lint-staged+commitlint

2021-09-01
阅读 4 分钟
7.6k
husky,是一个为 git 客户端增加 hook 的工具。安装后,它会自动在仓库中的 .git/ 目录下增加相应的钩子;比如 pre-commit 钩子就会在你执行 git commit 的触发。我们可以在 pre-commit 中实现一些比如 lint 检查、单元测试、代码美化等操作。当然,pre-commit 阶段执行的命令当然要保证其速度不要太慢,每次 commit 等...

react中使用webpack的import()异步加载组件的实现

2020-12-20
阅读 2 分钟
3.9k
1、asyncComponent函数(惊天函数):函数很好理解,loadComponent参数表示需要代码切割的路径,函数返回值是一个react组件,组件内部帮你做好了then()方法的操作。

webpack配置文件

2020-12-20
阅读 2 分钟
1.6k
const path = require ('path');const debug = process.env.NODE_ENV !== 'production';

Flow知识图谱及其在前端项目中的应用

2020-06-10
阅读 9 分钟
3.6k
Flow是一个由Facebook出品的JavaScript静态类型检查工具,它与Typescript不同的是,它可以部分引入,不需要完全重构整个项目,所以对于一个已有一定规模的项目来说,迁移成本更小,也更加可行。除此之外,Flow可以提供实时增量的反馈,通过运行Flow server不需要在每次更改项目的时候完全从头运行类型检查,提高运行效率...

起步TypeScript,快速入门

2020-06-09
阅读 27 分钟
2k
TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

PostCSS以及cssnext语法

2020-04-11
阅读 5 分钟
3.7k
postcss postcss 一种对css编译的工具,类似babel对js的处理,常见的功能如: 1 . 使用下一代css语法 2 . 自动补全浏览器前缀 3 . 自动把px代为转换成 rem 4 . css 代码压缩等等 postcss 只是一个工具,本身不会对css一顿操作,它通过插件实现功能,autoprefixer 就是其一。 与 less sass 的区别 less sass 是预处理器,...

rollup和webpack

2020-04-01
阅读 2 分钟
13.9k
rollup和webpack的区别 {代码...} {代码...} Rollup 的好处 Tree Shaking: 自动移除未使用的代码, 输出更小的文件 Scope Hoisting: 所有模块构建在一个函数内, 执行效率更高 Config 文件支持通过 ESM 模块格式书写 可以一次输出多种格式:IIFE, AMD, CJS, UMD, ESM Development 与 production 版本: .js, .min.js 文档精...

前端页面实现导出功能的前后台配合方式

2020-03-27
阅读 3 分钟
2.4k
这种方式就是后台将要导出的文件以文件流的方式返回给前端,前端通过blob去解析,再动态创建a标签。let content = res.data; // 文件流let blob = new Blob([content]);let fileName = 'filename.xls';

vue cli 3.0 文件压缩去掉console

2020-03-06
阅读 1 分钟
1.7k
注意:这里使用了环境变量进行控制,只有打生产包的时候才会调用这个插件进行打包优化,因为development环境下config.optimization是undefined 解释一下:vue-cli3.0在打包过程中就使用了terser-webpack-plugin插件进行优化,具体配置可以node_modules/@vue/cli-service/lib/config/prod.js中看到,terser-webpack-plugi...

js判断是否是ie浏览器且给出ie版本

2019-11-25
阅读 1 分钟
7.7k
不废话,直接上代码,详情见代码注释即可 function IEVersion() { {代码...} } 通过调用 IEVersion()可以获得返回值,值如下

git踩坑综合症

2018-12-13
阅读 1 分钟
1.3k
错误一:failed to push some refs to git $ git push -u origin master To git@github.com:yangchao0718/cocos2d.git {代码...} error: failed to push some refs to 'git@github.com:yangchao0718/cocos2d.git hint: Updates were rejected because the tip of your current branch is behin hint: its remote counter...

从html,css,javascript三方面谈谈“浏览器兼容性”的问题

2018-09-30
阅读 10 分钟
3.9k
在IE、FireFox、Netscape等不同的浏览器里,对于document.body的clientHeight、offsetHeight 和 scrollHeight 有着不同的含义.clientHeight:在上述浏览器中, clientHeight 的含义是一致的,定义为网页内容可视区域的高度,即在浏览器中可以看到网页内容的高度,通常是工具条以下到状态栏以上的整个区域高度,与具体的网...

浅谈高性能web前端技术栈——小白轻松做到减少HTTP请求

2018-05-07
阅读 4 分钟
1.7k
小白如何轻松写出高性能web前端页面 一.从减少HTTP请求开始 下面分别从以下几点开篇:图片地图,CSS Sprites,内联图片,样式表合并,脚本文件合并。 1.图片地图:服务器端图片地图和客户端图片地图。 {代码...} 代码实例: {代码...} {代码...} 2.CSS Sprites:更为灵活的将多幅图片合并为一幅单独图片的方式。 {代码......

javascript的深拷贝方法总结(主要针对数组和对象进行整理)

2017-11-24
阅读 3 分钟
7.5k
实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制

前端面试中常遇到的算法题及考察点

2017-10-21
阅读 14 分钟
6.4k
实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制

前端小伙伴如何应对面试中的 call() 和 apply()

2017-10-14
阅读 2 分钟
1.4k
代码中方法执行后控制台输出1,由于func是全局对象window下的一个方法,那么调用该方法的对象就应该是全局对象window,所以this理论上指向的对象就应该是window