必备
文章平均质量分 92
随手整理一些前端工程师必备知识,从基础入手,深入浅出
想淋场大雨
你没进入黑暗,你在走向光明
展开
-
必备-15.npm
文章目录必备-15.npm必备-15.npmnpm的作用?npm(node package manager):包管理器;作用:实现项目中所有依赖模块的管理,包含:安装、卸载、更新等操作默认安装源:http://www.npmjs.com,源在国外,安装较慢切换安装源(淘宝镜像)nrm/cnpmyarn…npm安装慢,我们想提速,如何操作?1.切换安装源 nrm (cnpm)$npm i nrm -g$nrm ls 查看可用源$nrm use xxx 使用某个源原创 2022-01-02 23:42:48 · 720 阅读 · 1 评论 -
必备-4.前端优化方案整理
文章目录前端优化方案整理一、关键渲染路径优化二、页面打开速度优化三、运行时代码优化四、webpack层面优化五、vue/react层面优化前端优化方案整理将前端项目性能优化的方案做了大致的整理,以针对方面不同进行了分类,共分为三类:1、针对于关键渲染路径的优化 【13种】2、针对于提高页面第一次打开速度的优化{减少白屏等待时间}【6种】3、针对于运行时代码优化【9种】4、针对于webpack层面优化【补充】5、针对于vue/react层面优化【补充】一、关键渲染路径优化@1 不同的原创 2021-11-16 20:40:37 · 910 阅读 · 0 评论 -
必备-19.小程序
必背-13.小程序小程序官网:https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html全局配置全局配置在根目录下的app.json文件pages:创建文件和文件夹的window:全局的默认窗口表现tobBar:创建小程序的上边栏或下边栏标签<view>:-><div><text>:-><span><block>:-&原创 2021-12-25 18:57:33 · 12080 阅读 · 12 评论 -
必备-14.vue3
必背-12.vue3vue3和vue2的版本npm i vue@lasted:下载的是vue2npm i vue@next:下载的是vue3老版本:vue2vuex3vue-router3element-ui 2新版本:vue3vuex4vue-router4element-plus 1npm i vuex@next vue-router@next element-plusvue3的安装使用一、安装vue3:npm i vue@next二、安装vue3版本原创 2021-12-20 23:26:08 · 1051 阅读 · 1 评论 -
必备-13.vue-router
必背-11.vue-router什么是vue-routervue-router:Vue的路由网址:多页面/单页面前端路由有哪些?前端路由(vue-router/react-router-dom)实现SPA(single page application):单页面应用一个项目只有一个页面,我们基于路由,控制页面展示不同的代码片段(或组件),当展示内容改变的时候,页面并不会刷新MPA(multi page application):多页面应用一个项目有很多页面,我们做的是页面之原创 2021-12-13 23:49:05 · 1889 阅读 · 0 评论 -
必备-1.js各数据类型必知必会方法
js各数据类型必知必会方法StringES5的11个,ES6的6个ES5除了replace,其他常用方法不会改变原字符串一共11个方法。三对方法:charAt():得到指定位置字符,如果超出范围则返回undefinedcharCodeAt():得到指定位置字符的ASCII码indexOf():检索字符在字符串中第一次出现的位置lastIndexOf():检索字符在字符串最后一次出现的位置toUpperCase():将字符串全部转为大写toLowerCase():将字符串全部转原创 2021-10-23 23:51:16 · 472 阅读 · 0 评论 -
必备-2.浏览器底层渲染机制全套详解
文章目录浏览器底层渲染机制全套详解一、如何创建一个个人的网站二、URL请求网址过程1.URL地址解析2.缓存检查2.1强缓存2.2协商缓存2.3数据缓存3.DNS解析4.TCP三次握手5.基于HTTP建立连接6.TCP四次挥手7.浏览器底层渲染浏览器底层渲染机制全套详解一、如何创建一个个人的网站我们如何发布一个自己的网站,可以供别人看?第一步:购买一台服务器:阿里云、腾讯云每台服务器都有一个自己的外网IP:123.111.222.12第二步:基于FTP上传工具[fileZilla]将原创 2021-11-15 21:19:19 · 1323 阅读 · 0 评论 -
必备-3.Promise详细解读
Promise详细学习Promise是ES6新增的一个内置类(不兼容IE浏览器)如果需要兼容,则自己手写Promise(PromisesA+)【有一个模块实现了Promise的封装@babel/polyfill】Promise是什么?Promise是一种设计模式(承诺者模式)Promise的作用是什么 ?Promise是为了管理异步编程代码,解决异步编程中的回调地狱问题Promise的组成需要什么?@1立承诺:要干的事情、状态(成功、失败)、成功对应要做什么、失败对应要做什么原创 2021-11-16 20:41:19 · 878 阅读 · 0 评论 -
必备-5.http状态码及报文字段列表
必备-http状态码列表状态码分类(判断响应)1xx:信息响应类,【快递正在路上】,表示服务器端接受了请求并正在处理2xx:处理成功响应类,【快递送到了你手上】,表示操作被成功接收并处理3xx:重定向响应类,【快递送到了快递柜】,表示为了完成指定动作,必须接受进一步处理4xx:客户端错误,【客户地址的错误】,客户请求包含语法错误或者不能正确执行5xx:服务器端错误,【商家无能的错误】,服务器不能正确执行一个正确请求状态码状态码英文名称中文描述1xx2个响应处理类原创 2021-11-18 22:01:06 · 2825 阅读 · 0 评论 -
必备-6.axios和fetch用法
文章目录必背-6.axios和fetch用法axiosFetch同源与跨域必背-6.axios和fetch用法axios1.axios是什么?axios官方网址:http://www.axios-js.com/zh-cn/docs/axios是什么:axios是基于Promise封装的ajax库,基于这个类库发送ajax请求,默认就是基于promise管理的,核心是XMLHttpRequest==axios基于请求方式分为了:get/head/delete/opations/post/put/原创 2021-11-20 22:54:43 · 1387 阅读 · 1 评论 -
必备-7.同源及跨域
必背-7.同源及跨域同源与跨域同源与跨域?客户端给服务器端发送请求同源:客户端的http协议、域名、端口号与服务器的三者完全相同跨域:只要客户端的http协议、域名、端口号其中一个与服务器的这三者不同真实项目开发中,基本都是跨域的还是同源的?开发环境:我们在本地开发项目,我们需要调用后台的接口,此时前后端代码基本不在一起,这样的访问是跨域的生产环境:如果我们把前后端代码放在同一个服务器下,这样数据的请求是同源的【很少】一般我们都是分服务器部署[web服务器、数据服务器原创 2021-11-26 21:34:31 · 755 阅读 · 1 评论 -
必备-9.vue
必背-8.vue常用方法及含义vue是什么Vue是渐进式框架:vue.min.js只包含了vue最核心的内容【例如:options api/数据处理、template模板视图的解析等操作】;真实项目中我们还会根据需求导入vuex:实现公共状态管理vue-router:实现SPA(single page application)单页面应用element-ui(饿了么)、antdv(蚂蚁金服)、iview()、vant()、cube…基于这些UI组件库快速创建项目axios:实现数据通信@vu原创 2021-11-29 23:19:07 · 544 阅读 · 0 评论 -
必备-11.webpack
文章目录必背-9.webpackwebpack是什么模块化开发webpack使用webpack使用步骤webpack配置文件wepack.config.js配置项生产者模式开发者模式必背-9.webpackwebpack是什么webpack(web应用打包工具)是自动打包部署工具优点:可以把css、js按照依赖关系,打包合并成一个(压缩)Eslint词法检测(检测语法是否符合规则)小图转为base64格式编码想用webpack必须要安装nodejs,webpack的安装和使用,是基于np原创 2021-12-03 23:07:01 · 411 阅读 · 0 评论 -
必备-10.@vue/cli
必备-10.vue/clivue-cli是什么vue/cli(Command Line Interface):vue的命令行接口,我们称之为脚手架,其作用是帮助我们快速生成一个可以放到服务器上的项目使用网址:https://cli.vuejs.org/zh/guide/installation.htmlvue-cli创建一个项目第一步:安装@vue-cli使用vue必须有nodejs安装nodejs:(https://nodejs.org/en/) 验证 node -v(v原创 2021-12-05 23:06:52 · 1246 阅读 · 0 评论 -
必备-12.vuex
必备-12.vuexvuex:状态管理库**(公共大仓库)**,集中式存储管理所有组件的状态值,相当于把所有Vue组件的状态数据放到一个公共数据库中,任何一个组件修改了公共数据库中的状态值,其他使用了该状态值的组件都会跟着刷新渲染这个值Vuex 使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源“而存在。这也意味着,每个应用将仅仅包含一个 store 实例vuex的作用:1、vuex是专为Vue.js应用程序开发的状态管理模式(集中式存储)—&g原创 2021-12-28 23:03:12 · 1633 阅读 · 0 评论 -
必备-16.跨域身份验证方式
必备-16.跨域身份验证方式登录态校验登录态校验第一步:客户端发送POST请求做登录态校验,服务器端检验用户名密码是否准确,如果正确则返回成功第二步:客户端收到成功响应后,在本地手动设置cookie,存储登录成功,例如:isLogin=true第三步:之后再访问页面,检测本地是否有isLogin的cookie信息,有表示已经登陆过了,无需再验证缺陷:不准确,不安全,cookie可以随便修改客户端设置cookie客户端设置cookie:会话存储第一步:客户端发送POST原创 2021-12-28 23:04:06 · 1486 阅读 · 0 评论 -
必备-17.突击
必备-17.突击函数防抖节流防抖:防止"老年帕金森",如果事件在n秒内被触发了多次,就重新计时,事件绑定的函数只能在最后一次触发的n秒后执行**思路:**每次触发函数之前,都清除之前的定时器,即使没有定时器,clearTimeout(timer)也不会报错,以input为例 function debounce(fn) {//利用闭包保存timeout属性 let timeout = null; // 创建一个标记用来存放定时器的返回值 return func原创 2021-12-30 23:38:37 · 427 阅读 · 0 评论 -
必备-8.git基础用法
文章目录必备-8.gitDOS命令git用法必备-8.gitDOS命令打开DOS命令窗口的几种方法?win+r–>输入cmd,文件资源管理器路径上输入cmd,直接进入当前文件路径的cmd安装git ->鼠标右键点击Bash Here2.常用DOS命令?DOS系统下使用,bash系统下有些不能用:进入文件夹:cd:修改路径,进入cd …/:回退上一级cd /:快速回到根目录tab:遍历当前路径下的文件和文件夹cd tab键:遍历当前路径下的文件夹cd Desk原创 2022-01-02 22:57:57 · 736 阅读 · 0 评论 -
必备-18.react
必备-18.reactreact:渐进式框架(react用的mvc设计模式,vue用的mvvm设计模式)官方网址:https://react.docschina.org/tutorial/tutorial.htmlnpm没有一个很好的移动端框架react的组件库:antdUI组件库、antd-proredux的发展史:react-redux->dva(集成了redux-saga)->umi[阿里研发的,针对于ract的集成封装框架]命令创建项目:npm原创 2022-01-02 23:22:36 · 510 阅读 · 0 评论