面试的抖音电商前端岗位，已拿offer。岗位薪资还不错，福利也多，需要内推的同学可以私信我！！ 1. 讲一下浏览器的盒模型，以及IE和chrome中盒模型的区别 答：浏览器中的元素占据的空间都是一块一块的长方形，长方形从外到内是margin，border，padding和内部元素 IE盒模型：box-sizing: border-box。元素的宽高会计算padding和border。 Chrome盒模型：box-sizing: conent-box。元素的宽高不计算padding和border。 2. 子元素css上添加的flex有三个属性，分别代表什么意思 答： 这三个属性是flex-...

背景 在JavaScript中，将函数作为参数传入另一个函数执行的回调函数很常见。例如，一个简单的循环数组的函数，定义如下： function loopArray(arr, callback) { for (var i = 0; i < arr.length; i++) { callback(arr[i]); } } 这里callback就是回调函数，针对数组中每一个值进行处理，调用方法如下： var arr=[7,8,9]; forLoop(arr,function(node){ console.log(node); }); 这样将一个函数作为参数...

项目重构前 公司的项目以springcloud做微服务开发，那么多个微服务项目怎么保存登录状态呢？不可能会员项目、商城项目、患者项目都要跳转微服务端信登录一次。 之前考虑的是sso单点登录，采用开源的cas框架。架构图如下： 这样也解决了微信登录的回调url只能设置一个的问题。 项目重构后 在公司决定重构项目后，架构师指出微服务去session也是重构的一部分，使用JWT代替session有一些好处，我总结如下： 去session，减少服务端内存开销。 去sso单点登录，减少维护项目，减少代码量。 减...

背景 接上一篇《多个Vue前端项目公共组件的使用之npm publish》，使用node_module的方式引入公共项目，在公共项目修改后，每次都要npm install重新引入公共项目，若频繁改动公共项目，这就造成了开发过程中调试中极大的不方便。 这一期讲一个npm 私有包依赖 本地开发调试频繁更新解决方案 npm link 解决问题 依旧是上一期的三个项目，doctor、patient、aikang-common。其中doctor和patient分别为医生端和患者端，aikang-common为公共项目，里面包含了供调用的许多公共组件。 首先进入aikang-common项目的控...

原因 在开发中有个需求，要统计用户在每个页面的访问量，和停留时间。这个在Vue项目中很好实现，利用全局路由，在router的beforeEach方法和afterEach方法中做事情就可以了。 但小程序中没有全局路由，又不想在每个页面的onShow和onHide中写重复代码，该怎么实现呢？ 解决方案 先说明这个解决方案没有完美的解决，还是有些问题，有部分问题没法解决。 方法就是重写微信的三个方法，wx.navigateTo，wx.switchTab，wx.navigateBack，这三个方法分别对应跳转页面、切换tab、返回上一页三个功能，在这三个方法中调用后端接口，记录访问日志。 ...

概述 在上一篇《微信小程序实现类似Vue的全局路由，实现日志记录》中，通过重写wx.navigateTo，wx.switchTab，wx.navigateBack这三个方法实现类似全局路由的功能，但重写这三个方法后仍有一些局限性，无法拦截底部tab的点击事件和安卓手机的物理返回键的返回事件。 如果不需要在跳转前进行拦截，那么有一个更好的方案，重写Page函数。 解决方案 新建myPage.js文件，代码如下： let data // 这里data从app.js中传入，为了获取data的一些参数 function init(_data) { data = _data // 重写...

起因 先看一段Vue的代码，在Vue的原型链上增加了一个setData方法，然后实例化Vue对象，传入一个Object类型的参数 Vue.prototype.setData = function (key, val) { if (this.data) { this.data[key] = val } else { this.data = { [key]: val } } } let options = { el: '#divBody', created: function () { this.setData('a', 1)//...

什么是装饰器模式 装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其结构，它是作为现有的类的一个包装。这种模式创建了一个装饰类，用来包装原有的类，并在保持类方法签名完整性的前提下，提供了额外的功能。 关键词：现有的对象，添加新功能。 通过子类的方式是对父类添加新的功能，针对的是类。而装饰器模式针对的是一个现有的对象，而不是类。 解释 看下面的例子： public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOExcep...

原因 这几天，公司开发的小程序有部分用户用户打开咨询列表页显示空白，我们查后台日志没有错误。最让人头疼的是，这种前端显示不正确，只是在某些机型上才出现，我们的测试人员无法复现该问题。无法复现，又没有错误日志记录，这种问题咋解决？ 方案1 思前想后，我们需要将小程序端所有的错误日志记录下来，并上传给后台。因为小程序的特性，除了App.js，所有其他的逻辑都在Page函数中，我们只需要处理Page函数中所有的方法，结合之前的一篇《微信小程序重写Page函数，实现全局日志记录》，我们可以在那基础上继续改写Page函数，使用try catch捕获所有函数的异常，然后将捕获的异常信息上传到服务端。...

原因 在上一篇《微信小程序实现数据侦听器，类似vue的watch，替代Observer》中，我们实现的watch功能，但使用起来还是有点麻烦。能不能像Vue那样直接写个watch属性呢？当然可以，这就是写这一片博客的目的。我们要实现以下几个目标： 支持侦听对象的变化，侦听对象的子属性的变化，支持立即执行 少量几行代码即可引入，不修改之前代码结构，不需要每个页面都引入 使用方式和vue的watch一样 页面销毁时可以注销watch，减少开销 在组件和Page中实现 微信小程序实现watch功能，有如下四个关键点： 侦听子属性变化时，watch的key类似于'a.b.c....

原因 先看一段简单、常规的vue代码。 <template> <div v-if="list && list.length>0"> <div v-for="row in list"> <span>{ {row.xxx}}</span> //显示剩下数据 </div> </div> <div v-else> <div>暂无数据</div> &lt...

原因 前端开发很多时候需要获取手机型号和系统，尤其是当出了前端兼容性问题的时候需要知道手机型号和系统版本。然后开发人员根据特定的的手机型号和系统版本解决兼容性问题。 方案 前端浏览器获取设备信息和系统信息只能通过navigator对象的userAgent属性获取。小米9和苹果7plus的userAgent长这样： //米9 "Mozilla/5.0 (Linux; Android 9; MI 9 Build/PKQ1.181121.001; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/66.0.3...

原因 公司项目使用Spring Cloud做后端架构，后端接口间调用使用的是Feign。前几天在生产上发现了一个问题，定时任务会重复执行。分析了日志后，得出结论，因为定时任务执行时间较长，定时任务模块调用业务模块接口会等到超时，然后Spring Cloud 的Feign会重试请求，导致定时任务执行两次。 百度查到的都不能解决我遇到的问题，我下决心要看源码透彻了解这个问题。 以下不完全是上述问题的解决，也有对Spring其他源码的理解，若嫌篇幅长，可直接翻到底看解决方案。 分析Feign 既然大致确定是因为Feign导致请求重发，我们就从分析Feign的重试来着手。 Feign有个R...

开始 上一期《微信小程序实现数据侦听器watch》，在小程序中实现了Vue的watch功能。但小程序没有状态管理，目前的状况下，跨页通讯和数据传递非常的蛋疼，会造成难以维护和调试。这次就来实现store，全局状态管理功能，来解决这个蛋疼的问题，有以下几个目标： 在Page和Component中所有生命周期和函数中均可使用store，均可修改state 少量几行代码即可引入，不修改之前代码结构，不需要每个页面都引入 使用方式和vue一样 方案 store其实就是一个全局变量，所有页面都共享，实现store功能有2个关键点 Page和Component中怎么引用全局变量st...