- 博客(45)
- 收藏
- 关注
RSS订阅转载 写给初中级前端的高级进阶指南（万字路线）
前言我曾经一度很迷茫，在学了 Vue、React 的实战开发和应用以后，好像遇到了一些瓶颈，不知道该怎样继续深入下去。相信这也是很多一两年经验的前端工程师所遇到共同问题，这篇文章，笔者结合自己的一些成长经历整理出一些路线，帮助各位初中级前端工程师少走一些弯路。本篇文章面对的人群是开发经验1到3年的初中级前端工程师。JavaScript原生 js 系列冴羽大佬的这篇博客里，除了 undescore 的部分，你需要全部都能掌握。并且灵活的运用到开发中去。JavaScript 深入系列、JavaScr
2021-02-02 14:39:15
1050
1
原创 微信支付，支付宝支付
微信支付，支付宝支付文章目录微信支付，支付宝支付业务场景介绍：一、移动端微信支付，vue中如何玩？外支付内支付二、移动端支付宝支付业务场景介绍：H5移动端支持微信支付 [ 微信支付分为微信内支付（JSAPI支付官方API）和微信外支付（H5支付官方API）] && 支付宝支付 [手机网站支付转 APP 支付 官方API ]订单生成逻辑：前端请求后端提交订单，后端去和微信或者支付宝对接生成订单（后续支付都是这个逻辑进行的对接）一、移动端微信支付，vue中如何玩？在移动端微信支付分
2020-12-07 20:54:23
583
转载 混合app
混合app通俗来讲，就是将h5我们写好的移动端页面，放到ios设备以及安卓设备中，在里面我们可以享受ios和安卓给我们的所有支持，通过方法调用，回调函数进行使用 给我们提供的方法就是方法调用方法我们H5不好写的功能或者无法写的就交给原生写，通过函数的形式返还回来，我们在使用事件调用即可，就是用我们的方法吊用他们的方法。混合APP开发(原生+H5)混合开发（Hybrid App开发），是指在开发一款App产品的时候，为了提高效率、节省成本而利用原生与H5的开发技术的混合应用。通俗点来说，这就是网页
2020-12-07 20:52:27
261
原创 js 单线程、宏任务与微任务的执行顺序
js 单线程、宏任务与微任务的执行顺序js 单线程众所周知js是单线程，但js是可以执行同步和异步任务的，同步的任务众人皆知是按照顺序去执行的；而异步任务的执行，是有一个优先级的顺序的，包括了 **宏任务（macrotasks）**和 微任务(microtasks)宏任务是指消息队列中的等待被主线程执行的事件，宏任务执行时都会重新创建栈，然后调用宏任务中的函数，栈也会随着变化，但宏任务执行结束时，栈也会随之销毁。包括 整体代码script，setTimeout，setInterval ，s
2020-12-07 20:51:21
535
1
原创 如何根据设计图设计rem比例
如何根据设计图设计rem比例/*750代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少; 100代表换算比例，这里写100是为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/Rem(750, 100)window.onresize = function() { getRem(750, 100)}function Rem(pwidth, prem) { var oWidth = document.body.clientWidth |
2020-12-07 20:50:21
293
原创 关于Javascript遇到的一些面试题（回文数字，对称数）
文章目录1.输出字符串中所有的叠字2.打印出 1-1000000 之间的对称数（回文数字），例如 121，131,141，13313.获取页面中所有的checkbox属性的input框4.编写一个函数来判断x是不是整数5.下面语句的输出结果6.写出下面代码块的输出结果7.写出下面代码的输出结果8.写出下面代码的打印结果9.输出下面代码的输出顺序10.写出下面代码的输出结果（这是一道经典的面试题，我在很多的地方见过）11.数组乱序1.输出字符串中所有的叠字输入’晴川历历汉阳树，芳草萋萋鹦鹉洲’，输出
2020-12-05 14:11:40
514
原创 uniApp
文章目录什么是uni-app？1.搭建环境2.使用vuex3.配置4.获取节点5.都有哪些项目上出现的问题，以及如何解决的6.从uniapp使用的开发软件，到创建，到运行，如何打包不同平台的代码，如何打包apk，云打包，如何运行在不同的端7.uniapp怎么进行路由跳转8.怎么配置tabbar9.如何请求接口10.如何使用组件11.基础语法是什么12.生命周期都有哪些uni-app支持如下页面生命周期函数:应用生命周期函数：13.uniapp中 nvue是什么？描述一下他的特点14.如何进行存储数据，获取.
2020-12-04 21:28:01
673
2
原创 什么是低耦合、高内聚
高内聚就是说相关度比较高的部分尽可能的集中，不要分散低耦合就是说两个相关的模块尽可以能把依赖的部分降低到最小，不要让两个系统产生强依赖可能那么说，有点官方，下面我就举例子说明：所谓的高内聚就是把功能相关的模块集合在一起，举例：用户模块，就可以把用户的相关内容放在一起，比如用户个人信息，用户一些收藏等。新闻模块，就可以把新闻相关的内容放在一起，比如新闻的一起查看，新闻的详情展示等。如果把新闻相关的内容放到用户模块里面，首先新闻相关得内容和用户模块没有多大得关联性，这样得内聚就不是高聚合。在举个最
2020-12-04 11:47:50
6415
5
原创 开发微信小程序中遇见的难点，以及解决方法
一、传参问题跳转分类传递参数id，使用wx.switchTab方法传参，发现wx.switchTab方法传递不过去，通过管看官方文档发现不可以传参，然后使用本地存储来解决的二、保存内容登录的用户ID，刚登陆后用户ID会显示，跳转其他tabber页面在跳转回我的页面用户ID就会消失，解决方案就是通过获取到用户ID时，通过本地存储的方式保存在本地，然后更新视图时读取本地的数据即可三、项目启动慢分包加载大部分小程序都会由某几个功能组成，通常这几个功能之间是独立的，但会依赖一些公共的逻辑，并且这些功能通
2020-11-29 20:39:51
6422
2
原创 微信小程序登录流程
文章目录微信小程序登录的实现思路实现登录的代码app.jsmy.js微信小程序登录的实现思路打开小程序判断是否已经授权如果没有授权，就显示授权登录的按钮，用户点击授权，点击取消就返回到授权按钮，点击确定就会获取用户的基本信息和调用wx.login方法获取code码。携带code码和用户基本信息，调用后期登录接口，判断是否是新用户。如果是新用户就在使用wx.login方法获取新的code码，调用注册接口，注册完毕在调用登录接口完成登录，并返回生成token，小程序保存token,可以使用token
2020-11-29 19:24:45
297
原创 微信小程序
微信小程序在生活中随处可见，传播以微信为主体，微信二维码小程序推广以及小程序入口，连接，方便 快捷，不需要下载app，小程序的优势：体积小，使用方便，miniApp微信小程序安装小程序开发文档 https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html小程序开发文档 https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html小
2020-11-22 21:03:03
651
4
原创 小程序自定义组件和组件通信
小程序自定义组件一、自定义组件1、什么是自定义组件？ 小程序中常常会有一些通用的交互模块，比如“下拉选择列表”、“搜索框”、“日期选择器”等。这些界面交互模块可能会在多个页面中用到，逻辑也相对独立。然而，用传统的小程序开发方法来实现这样的模块是非常繁琐的。面对这个情况，小程序基础库提供了让开发者自己创建界面组件的特性，称之为**“自定义组件”**。通过这个特性，开发者就能够将这样的交互模块抽象成界面组件，使界面代码组织变得非常灵活。2、使用场景（1） 多个页面用到同样的东西（2） 页面
2020-11-21 11:55:47
189
1
原创 javascript 基础（四）
文章目录详解Javascript中的Object对象创建对象的四种方式：对象的方法：对象的属性和属性值：对象存储在哪里：对象的枚举对象的原型详解Javascript中的Function函数函数创建的方式Javascript函数形参与实参函数自执行的方法:--就是立即执行JavaScript函数的返回值函数里this里的指向变量的声明提前和函数的声明提前全局作用域和函数作用域垃圾的回收机制（GC）详解Javascript中的Object对象 Object是在javascript中一个被我们经常使用的类型
2020-11-21 11:45:09
139
原创 JavaScript基础（三）
文章目录JavaScript中的if条件判断语句JavaScript中的switch条件判断语句语法：JavaScript中break和continue的区别JavaScript 循环for循环一般写法：使用for循环while循环语法实例do/while 循环语法实例比较 for 和 whileJavaScript中的if条件判断语句if条件判断语句：条件成立，执行什么代码；条件不成立，执行什么代码结构一：只判断真(true)，条件为假，什么也不做if(条件判断：判断结果是一个布尔值){条件为真(
2020-11-18 18:35:18
164
原创 JavaScript基础（二）
Javascript 强制类型转换函数将其它的数据类型转换为String方式一： 调用被装换数据类型的toString()方法 该方法不会影响原变量，他会将转换的结果返回 但是注意：null和undefined这两个值没有toStruing()方法，如果调用他们的方法，会报错方式二： 调用toString()函数，并将被转换的数据作为参数传递给函数 使用toString()函数做轻质类型转换时， 对于Number和Boolean实际上就是调用的toS
2020-11-17 15:36:14
159
原创 webpack的简单搭建
文章目录webpackwebpack 是什么？webpack 的特点？webpack的核心？webpack 手动搭建步骤webpacksass gulp转换成css文件 一个页面很多个js文件，维护只能加 轻易不能删 页面的优化，js/html/css文件的压缩，图片压缩webpack 是什么？打包工具 （静态资源打包工具） 前端必备webpack 的特点？1. js依赖进行整合处理 （打包整合）2. 一些预处理的sass，less可以在环境中进行编译 （转换）3. 可以对js、
2020-11-17 15:22:58
131
原创 vue与原生（ios，安卓）交互
文章目录1.Vue和原生（ios和安卓）的交互（第一种方法）一、原生调用Vue方法1、Vue2、原生安卓iOS二、Vue 调用原生1、Vue2、原生安卓iOS2.Vue和原生（ios和安卓）的交互（第二种方法）统一使用WebViewJavascriptBridge：1.Vue和原生（ios和安卓）的交互（第一种方法）一、原生调用Vue方法1、Vuecreated() { //Vue的方法给原生调用，则需要把方法挂在Window下面 window.getDataFromNative =
2020-11-17 14:55:02
3774
1
原创 vue项目实战
文章目录1.顶部悬停效果html代码script代码style2.电话本列表效果（ 右边字母分类 上下滑动 旁边字母显示高亮）1.安装依赖2.模拟数据3.将data.json 转成模拟数据4.dom.js 编写5.singer.js 编写6.编写scroll.vue子组件编写7.编写list.vue子组件8.编写phonelist.vue父组件3.vue做代理解决跨域第一步安装依赖第二步进行配置第三步api.js调用第四步页面调用4.Vue路由切换时的左滑和右滑效果示例1.顶部悬停效果html代码&l
2020-11-17 14:53:51
837
原创 vue常见面试题（三）
文章目录51.params和query的区别1.query方式传参和接收参数2.params方式传参和接收参数另外，二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示52. vue mock数据2.将data.json 转成模拟数据3.vue页面调用53 vue封装通用组件vue组件三要素基本用法一、props:数据父组件传入子组件二、子组件触发父组件事件三、记得留一个 slot再来个例子：54.vue初始
2020-11-17 14:51:55
744
原创 vue常见面试题（二）
文章目录26.v-if和v-for的优先级27.assets和static的区别28.列举常用的指令29.vue常用的修饰符修饰符（1）.lazy（2）.number（3）.trim事件修饰符（1）.stop(2) .prevent(3).capture(4).self(5) .once(6).passive(7).事件修饰符还可以串联键盘修饰符系统修饰键.exact修饰符鼠标按钮修饰符30.数组更新检测31.Vue.set视图更新Vue.set() 响应式新增与修改数据32.自定义指令详解第一步第二步完善
2020-11-17 14:51:14
1063
原创 vue常见面试题（一）
文章目录1.vue优点2.vue父组件向子组件传递数据？3.子组件像父组件传递事件4.v-show和v-if指令的共同点和不同点5.如何让CSS只在当前组件中起作用6.的作用是什么?7.如何获取dom通过refs方法8.说出几种vue当中的指令和它的用法？9. vue-loader是什么？使用它的用途有哪些？10.为什么使用key11.axios及安装1.axios是什么？2.axios安装？12.axios解决跨域13.v-model的使用14.scss的安装以及使用15. 请说出vue.cli项目中sr
2020-11-17 14:49:43
542
原创 vuex常见面试题
文章目录1.vuex是什么？怎么使用？哪种功能场景使用它？2.vuex有哪几种属性总结3.不使用Vuex会带来什么问题4.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？5.vuex一个例子方法1.首先定义两个页面2.开始使用vuex，新建一个 sotre文件夹，分开维护 actions mutations getters3.在store/index.js文件中新建vuex 的store实例4.actions5.mutations6.getters7.在main.
2020-11-17 12:02:02
1605
原创 vue路由（vue-router）面试题
文章目录1.mvvm 框架是什么？MVVMMVCMVPMVVM模式的优点以及与MVC模式的区别2.vue-router 是什么?它有哪些组件3.active-class 是哪个组件的属性？active-class使用方法4.怎么定义 vue-router 的动态路由? 怎么获取传过来的值获取传过来的值5.vue-router 有哪几种导航钩子?1.导航钩子的作用2.植入路由导航的方式最后是完整的导航解析流程：6.$route 和 $router 的区别7.vue-router响应路由参数的变化8.vue-r
2020-11-17 12:00:48
11301
原创 Vue生命周期函数面试题
1.什么是 vue 生命周期vue生命周期详解Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁。实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问
2020-11-17 11:58:54
488
原创 JavaScript基础（一）
什么是JavaScript、为什么要使用JavaScript、使用它有什么好处？JavaScript是一门基于对象的脚本语言。Web标准——结构、样式、行为。只有这三个完美结构，web页才能算是好的网页。JavaScript就是负责网页的行为。JavaScript可以操作DOM、验证数据。丰富的web表现。JS常用的三种输出方式alert(“内容”) 在浏览器中弹出框显示内容document.write(“内容”) 在页面中输出显示内容console.log(“内容”) 最
2020-11-15 21:43:29
247
原创 使用promise封装 原生ajax，$.ajax(),以及fetch
使用Promise封装的AJAX请求// Promise 封装 ajaxfunction p(method="GET", url, data=null){ return new Promise((resolve, reject) => { var xhr = new XMLHttpRequest(); var method = method || "GET"; var data = data || null; xhr.open
2020-11-13 08:30:02
262
原创 ES6新增方法面试题
1.let const var比较let 和 const 定义的变量不会出现变量提升，而 var 定义的变量会提升。let 和 const 是JS中的块级作用域let 和 const 不允许重复声明(会抛出错误)let 和 const 定义的变量在定义语句之前，如果使用会抛出错误(形成了暂时性死区)，而 var 不会。const 声明一个只读的常量。一旦声明，常量的值就不能改变(如果声明是一个对象，那么不能改变的是对象的引用地址)2.反引号（`）标识用一对反引号(`)标识，它可以当作普通字
2020-11-12 16:16:56
1158
1
原创 ES6数组面试题
1.forEach()var arr = [1,2,3,4];arr.forEach((item,index,arr) => { console.log(item) //结果为1,2,3,4})// 数组的遍历方法，无返回值，不改变原数组2.map()var arr = [1,2,3,4];arr.map((item,index,arr) => { return item*10 //新数组为10,20,30,40})//map遍历数组，返回一个新数组，不改变原
2020-11-12 16:16:11
1697
3
原创 ES6编程题
1.使用解构，实现两个变量的值的交换let a = 1;let b = 2;[a,b] = [b,a];2.利用数组推导，计算出数组 [1,2,3,4] 每一个元素的平方并组成新的数组。var arr1 = [1, 2, 3, 4];var arr2 = [for (i of arr1) i * i];console.log(arr2);3.使用ES6改下面的模板let iam = "我是";let name = "王德发";let str = "大家好，"+iam+name+
2020-11-12 16:15:30
801
原创 JS面试题-正则表达式常见面试题
1.给一个连字符串例如：get-element-by-id转化成驼峰形式。var str = "get-element-by-id";var reg = /-\w/g; // 匹配横杆以及之后的一个字符，全局匹配console.log(str.replace(reg,function($0){ return $0.slice(1).toUpperCase(); // 匹配到到是-e -b -i 形式截取后一个字符转成大写 }));2.匹配二进制数字var str = "1010
2020-11-12 15:35:19
1996
2
原创 JS前端面试题（二）
31.说说你对promise的了解依照Promise/A+的定义，Promise有四种状态：pending:初始状态, 非fulfilled或rejected.fulfilled:成功的操作.rejected:失败的操作.settled: Promise已被fulfilled或rejected，且不是pending另外，fulfilled与rejected一起合称settledPromise对象用来进行延迟(deferred) 和异步(asynchronous) 计算Promise
2020-11-12 15:34:25
1118
1
原创 JS前端面试题（三）
61.new的原理是什么？通过new的方式创建对象和通过字面量创建有什么区别？new:创建一个新对象。这个新对象会被执行[[原型]]连接。将构造函数的作用域赋值给新对象，即this指向这个新对象.如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。function new(func) { lat target = {}; target.__proto__ = func.prototype; let res = func.call(targe
2020-11-12 15:33:55
4715
14
原创 JS前端面试题（一）
1.简述同步和异步的区别同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容2.怎么添加、移除、复制、创建、和查找节点（1）创建新节点createDocumentFragment() //创建一个DOM片段createElement() //创建一个具体的元素createTextNode() //创建一
2020-11-12 15:33:18
788
原创 浏览器、html、css面试题（三）
61.absolute的containing block计算方式跟正常流有什么不同？无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；否则,则由这个祖先元素的 padding box 构成。如果都找不到，则为 initial
2020-11-12 11:20:53
457
1
原创 浏览器、html、css面试题（二）
31.data-属性的作用data-为H5新增的为前端开发者提供自定义的属性，这些属性集可以通过对象的 dataset 属性获取，不支持该属性的浏览器可以通过 getAttribute 方法获取 :需要注意的是：data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。 所有主流浏览器都支持 data-* 属性。即：当没有合适的属性和元素时，自定义的 data 属性是能够存储页面或 App 的私有的自定义数据。32.如何让Chrome浏览器显示小于12px的文字为了兼容所有的浏
2020-11-12 11:20:07
687
2
原创 浏览器、html、css面试题（一）
1.什么是盒模型盒模型margin(外边距)- 清除边框外的区域，外边距是透明的。border(边框)- 围绕在内边距和内容外的边框。padding(内边距)- 清除内容周围的区域，内边距是透明的。content(内容)- 盒子的内容，显示文本和图像。W3C的标准盒模型在标准的盒子模型中，width指content部分的宽度IE的盒模型在IE盒子模型中，width表示content+padding+border这三个部分的宽度css如何设置两种模型这里用到了CSS3 的属性
2020-11-12 10:57:39
3209
6
原创 前端面试题：JavaScript算法
js去重（基础）数组去重function qc(arr1){//创建一个新的数组let arr = [];//遍历数组arr1for( let i = 0; i < arr1.length; i++) {//如果arr1不在arr中 会返回-1 那么将和这个元素存在新建的arr中 if( arr.indexOf(arr1[i]) == -1) { arr.push(arr1[i]) }}//返回arrreturn arr;}arr1 =
2020-11-11 21:12:08
439
1
原创 http/https协议、常见状态码、get/post请求、http缓存机制
一、什么是HTTP协议 “Http”协议称为是“超文本传输协议”（HTTP-Hypertext transfer protocol）。它定义了浏览器怎么向万维网服务器请求万维网文档，以及服务器怎么样把文档传送给浏览器，从层次的角度看，Http是面向应用层协议，它是万维网能够可靠的交换文件的重要基础，并且详细的规定了客户端浏览器与服务器之间互相通信的规则。Http是一个基于TCP/IP通信协议来传递数据（HTML文件、图片文件等）l 客户端发送给服务器的”信”，我们称之为”请求协议”。l 服务器端发送
2020-11-11 20:56:08
442
2
原创 ES6新增
字符串新增模板字符串：``模板字符串中嵌入变量，需要将变量名写在${}之中： `${}`includes()：返回布尔值，表示是否找到了参数字符串。startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。对象新增Object.assgin()方法： Object.assign({},obj,obj1);对象 Object.assign([],obj,obj1);数组特点：浅拷贝、对象属性
2020-11-10 19:12:21
393
3
原创 vue常用指令、动态绑定样式、动态添加类名、单选、多选
vue常用指令1、v-if：根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。2、v-else-if 必须和v-if一起用才可以 不能单独用 而且必须在v-if下面 中间有别的标签也会报错。3、v-else 必须和v-if一起用才可以 不能单独用 而且必须在v-if下面 中间有别的标签也会报错。4、v-show：根据表达式之真假值，切换元素的 display CSS 属性。5、v-for：循环指令，基于一个数组或者对象渲染一个列表，vue 2.0以上必须需配合 k
2020-11-09 17:14:06
1024
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人