前端
fed_jiao
这个作者很懒,什么都没留下…
展开
-
前端常看学习文档
文章目录vue全家桶相关学习文档链接vue全家桶相关学习文档链接vue.js 官网 参考:https://cn.vuejs.org/Vue Router 官网 参考:https://router.vuejs.org/zh/Vuex 官网 参考:https://vuex.vuejs.org/zh/ECMAScript 6 入门 参考:http://es6.ruanyifeng.com/es6 精简篇 https://www.jianshu.com/p/287e0bb867ae原创 2021-08-23 15:26:08 · 265 阅读 · 0 评论 -
技术周报:2021.08.13
微前端究竟是什么,可以带来什么收益EMP for Vue&React 互相远程调用对比多种微前端方案原创 2021-08-10 15:58:55 · 128 阅读 · 0 评论 -
项目中用到的base.css
@font-face { font-family: "PingFangSCRegular"; src: url('../fonts/PingFangSCRegular.ttf') format('truetype');}@font-face { font-family: 'iconfont'; src: url('../fonts/iconfont.eot'); src: url('../fonts/iconfont.eot?#iefix') format('em原创 2021-08-09 22:45:35 · 234 阅读 · 0 评论 -
返回顶部按钮及js代码实现
<!-- 返回顶部按钮 --> <a href="javascript:;" class="backtotop" id="backtotop"> 返回<br>顶部 </a> <script src="js/backtotop.js"></script>// backtotop.js(function() { var backtotop = document.getElementB原创 2021-08-09 22:39:02 · 658 阅读 · 0 评论 -
create-react-app创建项目时的初始化配置
npx create-react-app jira --template typescript//问题一:项目中目录的引用,避免多个…/…/在tsconfig.json文件中加入baseUrl: “./src”,//问题二:团队统一的格式化规则,项目中安装格式化插件prettier// https://prettier.io/docs/en/install.html//第一步:yarn add --dev --exact prettier//第二步:echo {}> .prettie原创 2021-06-08 11:19:31 · 210 阅读 · 0 评论 -
学习Javascript的9张思维导图【转】
收藏9张图片:javascript变量javascript运算符javascript数组javascript流程语句javascript字符串函数javascript函数基础javascript基础DOM操作文档对象模型DOMjavascript正则表达式javascript变量javascript运算符javascript数组javascript流程语句javascript字符串函数javascript函数基础javascript基础DOM操作文档对象模原创 2021-06-03 16:52:27 · 299 阅读 · 0 评论 -
前端首屏性能优化
网络请求过程以及浏览器的工作原理(主要是渲染原理),搞清楚这两个点,我们才有了优化的理论基础。前端首屏性能优化的知识点很多,很杂。我分成了两个大的方向:资源加载优化 和 页面渲染优化。资源加载优化减小资源大小减少Http请求次数提高Http响应速度优化资源加载时机优化加载方式资源加载优化主要是从大小、数量、速度、时机这几个基本方面进行优化,每一项优化最终都是对这四个基本面中一个或多个方面的优化页面渲染优化优化html代码,优化js和css代码,优化动画效果优化方向主要在以下几个方面原创 2021-06-03 15:15:07 · 453 阅读 · 0 评论 -
es6相关知识点
Let 和const命令变量的解构赋值字符串的扩展字符串的新增方法正则的扩展数值的扩展函数的扩展数组的扩展对象的扩展对象的新增方法symbolset和Map数据结构ProxyReflectPromise对象Iterator和for…of循环Generator函数的语法Generator函数的异步应用async函数class的基本语法class的继承module的语法Module的加载实现编辑风格读懂规格异步遍历器ArrayBuffer最新提案Deco.原创 2021-06-03 14:52:29 · 92 阅读 · 0 评论 -
web安全总结
0308-03原创 2021-03-08 22:05:32 · 226 阅读 · 0 评论 -
JS模块化总结
0308-02原创 2021-03-08 22:04:56 · 93 阅读 · 0 评论 -
使用 Prettier 修复格式错误
ESLint 包含了一些代码格式的检查,比如空格、分号等。但前端社区中有一个更先进的工具可以用来格式化代码,那就是 Prettier。Prettier 聚焦于代码的格式化,通过语法分析,重新整理代码的格式,让所有人的代码都保持同样的风格。首先需要安装 Prettier:npm install --save-dev prettier然后创建一个 prettier.config.js 文件,里面包含 Prettier 的配置项。Prettier 的配置项很少,这里我推荐大家一个配置规则,作为参考:/原创 2021-03-08 11:55:17 · 2079 阅读 · 0 评论 -
0305-03 架构设计
0305-03原创 2021-03-05 21:22:38 · 86 阅读 · 1 评论 -
如何写《技术方案设计》文档
0305-02原创 2021-03-05 21:21:36 · 688 阅读 · 0 评论 -
解决ajax跨域问题【5种解决方案】
0305-01原创 2021-03-05 21:21:06 · 1732 阅读 · 0 评论 -
Webpack HMR 原理解析
Hot Module Replacement(以下简称 HMR)是 webpack 发展至今引入的最令人兴奋的特性之一 ,当你对代码进行修改并保存后,webpack 将对代码重新打包,并将新的模块发送到浏览器端,浏览器通过新的模块替换老的模块,这样在不刷新浏览器的前提下就能够对应用进行更新。例如,在开发 Web 页面过程中,当你点击按钮,出现一个弹窗的时候,发现弹窗标题没有对齐,这时候你修改 CSS 样式,然后保存,在浏览器没有刷新的前提下,标题样式发生了改变。感觉就像在 Chrome 的开发者工具中直接修转载 2021-03-04 22:04:01 · 677 阅读 · 1 评论 -
手把手教你使用 VuePress 搭建个人博客
手把手教你使用 VuePress 搭建个人博客https://www.cnblogs.com/softidea/p/10084946.html原创 2021-03-04 21:52:07 · 246 阅读 · 1 评论 -
使用vuePress开发个人网站
VuePressVuePress 由两部分组成:第一部分是一个极简静态网站生成器,它包含由 Vue 驱动的主题系统和插件 API,另一个部分是为书写技术文档而优化的默认主题,它的诞生初衷是为了支持 Vue 及其子项目的文档需求。每一个由 VuePress 生成的页面都带有预渲染好的 HTML,也因此具有非常好的加载性能和搜索引擎优化(SEO)。同时,一旦页面被加载,Vue 将接管这些静态内容,并将其转换成一个完整的单页应用(SPA),其他的页面则会只在用户浏览到的时候才按需加载。快速上手# 安装原创 2021-03-04 21:50:27 · 228 阅读 · 1 评论 -
ssh: Could not resolve hostname -: nodename nor servname provided, or not known
$ssh - [email protected]: Could not resolve hostname -: nodename nor servname provided, or not known原创 2021-03-03 23:12:11 · 6247 阅读 · 1 评论 -
for in 和 for of的区别详解
for in 和 for of 相对于大家肯定都不陌生,都是用来遍历属性的没错。那么先看下面的一个例子:例1const obj = { a: 1, b: 2, c: 3}for (let i in obj) { console.log(i) // a // b // c}for (let i of obj) { console.log(i) // Uncaught TypeError: obj is not iterable 报错了}以上代码通过 for原创 2021-03-03 21:45:21 · 577 阅读 · 2 评论 -
http2&http3学习笔记小结
http2&http3总结HTTP2的主要特性H2是一个二进制协议,H1是超文本协议.传输的内容都不是一样的。H2遵循多路复用即,代替同一host下的内容,只建立一次连接. H1不是。H2可以使用HPACK进行头部的压缩,H1则不论什么请求都会发送。H2允许服务器,预先将网页所需要的资源PUSH到浏览器的内存当中。HTTP2的多路复用在HTTP1.1的协议中,我们传输的request和response都是基本于文本的,这样就会引发一个问题:所有的数据必须按顺序传输,比如需要传输:h原创 2021-03-03 20:59:31 · 147 阅读 · 1 评论 -
学习笔记-前端脚手架cli实现
学习笔记-前端脚手架(cli)实现commander.js,可以自动的解析命令和参数,用于处理用户输入的命令。download-git-repo,下载并提取 git 仓库,用于下载项目模板。inquirer.js,通用的命令行用户界面集合,用于和用户进行交互。handlebars.js,模板引擎,将用户提交的信息动态填充到文件中。ora,下载过程久的话,可以用于显示下载中的动画效果。chalk,可以给终端的字体加上颜色。log-symbols,可以在终端上显示出 √ 或 × 等的图标。——原创 2021-03-03 16:35:06 · 168 阅读 · 1 评论 -
0303-03Taro笔记
微信小程序原生基础知识:https://www.w3cschool.cn/weixinapp/9wou1q8j.htmlreact中文学习文档:https://react.docschina.org/docs/hello-world.htmlredux中文学习文档:http://www.redux.org.cn/Taro框架中文文档:https://nervjs.github.io/taro/安装-启动#全局安装taronpm i -g @tarojs/cli#安装完成后,查看taro.原创 2021-03-03 12:00:58 · 245 阅读 · 0 评论 -
0303-02前端资源整合
前端资源整合目录面试资源项目资源知识锦集前端早读课文章Vue 相关React 相关Javascript 函数式编程TypeSctiptwebpackParcelGulpes系列Babelhttp 请求库PromiseNodeJSMongoDBGit移动端可视化工具提高生产力工具PythonPWAFlutterGraphQL机器学习Chrmoe其他博客/社区业界技术交流会Github资源vue文档Vue 官方文档Vuex 文档vu原创 2021-03-03 11:57:42 · 237 阅读 · 0 评论 -
0303-01分享知名前端团队
分享知名前端团队一、腾讯1.腾讯IMWEB2.腾讯AlloyTeam3.腾讯CDC二、阿里1.淘宝前端团队FED三、京东1.凹凸实验室2.京东设计中心JDC四、百度1.百度Fex2.百度efe3.百度eux五、360奇舞团1.奇虎360六、去哪儿1.去哪大前端YMFE携程1.携程UED美团1.美团前端有赞1.有赞技术团队滴滴出行1.滴滴开源平台人人网1.人人Fed字节跳动1.字节跳动技术博客其他1.印记中文2.deepOcean3.优优设计网原创 2021-03-03 11:56:01 · 162 阅读 · 0 评论 -
前端技术点整理-面试/复习知识点
前端技术点整理-面试/复习知识点$nextTick原理,事件循环原理,移动端布局方案,移动端穿透问题方案,ES6新特性,es5,es6,async/await的使用和实现,异步方案,promise问题,promise原理,vue数据流逻辑算法题,移动端布局方案,移动端穿透问题方案,vue高阶问题,浏览器工作原理浏览器相关知识es6\vue、pc端的兼容、移动端、svg、html5\css3原创 2021-02-26 17:09:18 · 144 阅读 · 1 评论 -
react实现页面后退按钮
react实现页面后退按钮import React from 'react';import PropTypes from "prop-types";static contextTypes = { router: PropTypes.object.isRequired};backNav = () => { this.context.router.history.goBack();}render () { return ( <Button className原创 2021-01-29 10:42:53 · 841 阅读 · 0 评论 -
前端性能统计与优化
前端性能统计与优化1 为什么做这件事情2 前端性能指标3 如何统计与优化为什么做这件事情原因:页面速度影响用户体验,我们要不断加强用户体验。亚马逊:加载时间每增加100MS,就会减少1%销售。谷歌:加载10个结果0.4S,变成加载30个结果0.9S,降低20%的广告收入时间就是金钱效率就是生命前端性能监控目的目的:页面加载速度更快前端性能指标不就是页面加载完毕时间吗? 图片页面加载顺序1,用户点击链接或者输入URL2,下载完header3,下载完html4,下载完成所有的原创 2021-01-26 14:24:56 · 164 阅读 · 2 评论 -
快速查看-taro中文文档
简介#Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 等应用。现如今市面上端的形态多种多样,Web、React Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。特性React 语法风格Taro 遵循 React 语法规范,它采用与原创 2021-01-21 10:31:32 · 295 阅读 · 2 评论 -
13条编程习惯-转
取个好名字不管是包名,类名还是函数方法和变量,不要随意命名,像什么 foo, bar, a,b,c 这种没有任何意义的名字会污染你的整个代码先构思再写代码拿到一个需求最开始是分析需求,拆解问题,将大问题拆解为更小问题,思路清晰了代码写起来才快。能用Google就不用百度百度搜出来的东西一是广告太多,难以辨识,二是质量太差,容易被带偏。写注释“最好的注释就是代码本身”,这句话不是你不写注释的借口,相信我你的代码时间久了自己都不知道什么意思。必要的地方加上注释不仅方便别人理解你的代码,也方便自己。转载 2021-01-21 10:22:41 · 52 阅读 · 0 评论 -
axios中文文档整理
原文地址:https://4m.cn/y6u3yaxiosaxios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范有以下特点:从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF安装npm安装$ npm ins转载 2021-01-20 18:28:32 · 171 阅读 · 0 评论 -
node版本升级-笔记整理
node版本如何升级,整理笔记如下:https://github.com/tj/nnpm i -g n #升级到指定的版本 n 版本号 如 n 10.0.0 #安装最新的版本 n latest #安装最近的稳定版本 n stablenode -v有很多同学会发现,安装完成之后,用node –v查看,还是老版本,安装未生效。原因:n 切换之后的 node 默认装在 /usr/local/bin/node,先用 which node 检查一下当前使用的 node 是否是这个路径下原创 2021-01-07 17:24:51 · 296 阅读 · 0 评论 -
学习react的几个链接地址,初学者可收藏
react中文文档https://react.docschina.org/在 create-react-app 中使用antdhttps://ant.design/docs/react/use-with-create-react-app-cnCreate React App 中文文档https://www.html.cn/create-react-app/docs/getting-started/原创 2020-09-24 16:35:17 · 257 阅读 · 0 评论 -
改变 placeholder 的字体颜色大小
这个方法也就在 PC 端可以input::-webkit-input-placeholder { /* WebKit browsers */ font-size:14px; color: #333;} input::-moz-placeholder { /* Mozilla Firefox 19+ */ font-size:14px; color: #333;} input:-ms-input-placeholder { /* In原创 2020-09-23 11:54:25 · 151 阅读 · 0 评论 -
css实现不可复制内容
-webkit-user-select: none; -ms-user-select: none;-moz-user-select: none;-khtml-user-select: none;user-select: none;原创 2020-09-23 11:52:09 · 114 阅读 · 0 评论 -
css实现单行或多行文本溢出显示 ...
单行文本溢出显示 …实现方法:overflow: hidden;text-overflow:ellipsis;white-space: nowrap;当然还需要加宽度width属来兼容部分浏览。实现多行文本溢出显示…实现方法:display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;适用范围:因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器原创 2020-09-23 11:50:05 · 462 阅读 · 0 评论 -
整理收藏-可能用到的meta标签
<!-- 设置缩放 --><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /><!-- 可隐藏地址栏,仅针对IOS的Safari(注:IOS7.0版本以后,safari上已看不到效果) --><meta name="apple-mobile-web-app-capable" content="yes" />原创 2020-09-23 11:40:46 · 75 阅读 · 0 评论 -
vue-cli3.0脚手架搭建项目的详解
使用vue-cli3.0搭建项目文章目录1、全局安装过旧版本的 `vue-cli`(1.x 或 2.x)要先卸载它,否则跳过此步:2、安装vue-cli 3.03、初始化项目1、全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它,否则跳过此步:npm uninstall vue-cli -g # or yarn global remove vue-cli2、安装vue-cli 3.0npm install -g @vue/cli# oryarn global add @v原创 2020-09-23 11:36:38 · 265 阅读 · 0 评论 -
整理收集utils.js
export default { toThousands: function (num) { var num = (num || 0).toString(), result = ''; while (num.length > 3) { result = ' ,' + num.slice(-3) + result; num = num.slice(0, num.length - 3); } .原创 2020-09-23 11:29:32 · 202 阅读 · 0 评论 -
获取百度地图可视区域左下角和右上角的坐标
获取百度地图可视区域左下角和右上角的坐标map.addEventListener("dragend", function () { var bs = map.getBounds(); //获取可视区域var bssw = bs.getSouthWest(); //可视区域左下角var bsne = bs.getNorthEast(); //可视区域右上角alert("当前地图可视范围是:" + bssw.lng + "," + bssw.lat + "到原创 2020-09-02 19:19:44 · 1760 阅读 · 0 评论 -
React高频面试题梳理
React高频面试题梳理React生命周期有哪些,16版本生命周期发生了哪些变化?setState是同步的还是异步的?为什么有时连续多次 setState只有一次生效?React如何实现自己的事件机制?为何 React事件要自己绑定 this?原生事件和 React事件的区别?React的合成事件是什么?React和原生事件的执行顺序是什么?可以混用...原创 2020-04-09 00:53:15 · 153 阅读 · 0 评论