larry_liujunwei的博客

原创 30分钟入门react

react用了很久了，但是一直有一些小白问如何去学习，怎么能快速上手！以前常用答案：找开源项目撸代码今日份发现更好的入门手册：其实撸代码前，还是需要有一定的基础认知，毕竟react和以往前端的一些技术语法和思路差异较大，是一个真正把函数式编程发挥极致的框架。循序学习链接：https://blog.csdn.net/qq_30216635/article/details/108458305?utm_medium=distribute.pc_relevant.none-task-blog-2%7Ed

原创 前端如何做文件打包压缩并且生成二进制流（背景：批量生成小程序二维码，打包压缩）

原创 非图片资源，前端如何实现浏览器自动下载

原创 前端base64图片自动下载

var funDownload = function (domImg, filename) { // 创建隐藏的可下载链接 var eleLink = document.createElement('a'); eleLink.download = filename; eleLink.style.display = 'none'; // 图片转base64地址 var canvas = document.createElement('canvas'); .

原创 普通二维码跳转到小程序

h5端：通过qrcodejs插件动态把url地址生成二维码，携带相关的用户信息；（用url地址生成二位码是因为微信跳转到url相关页面的时候会判断是否需要跳转小程序）小程序：进入小程序开发平台 -> 开发 -> 开发设置 ->扫普通链接二维码打开小程序二维码规则： 微信api里说的很清楚了 1、二维码规则的域名须通过ICP备案的验证。 2、支持http、https、ftp开头的链接（如：http://wx.qq.com、https://...

原创 mvc mvp mvvm区别

要了解MVC、MVP和MVVM，就要知道它们的相同点和不同点。不同部分是C(Controller)、P(Presenter)、VM(View-Model)，而相同的部分则是MV(Model-View)这里有一个可以对数值进行加减操作的组件：上面显示数值，两个按钮可以对数值进行加减操作，操作后的数值会更新显示。转载地址：https://www.cnblogs.com/zhouyangla/p/6936455.html...

原创 测试工程师进阶指南

开篇：最近看了一些测试开发的相关博客，结合自己的开发经验，给各位小白或者想转测试的童鞋提点建议测试段位：一段 （纯小白） 只需要根据产品提供的需求和原型，按照流程一步一步点击就行二段 （有过互联网运营或者相关经验） 产品需求如果没精确到每一个功能点的话，用例的覆盖，问题的跟踪，其实更多的依赖测试的经验。例如：邮箱是不是校验格式了，点击按钮是否掉接口异常了三段...

原创 前端中高级必备技能

手写一个JS深拷贝乞丐版： var newObj = JSON.parse( JSON.stringify( someObj ) );面试够用版：function deepCopy(obj){ //判断是否是简单数据类型， if(typeof obj == "object"){ //复杂数据类型 var result = obj.c...

转载 为什么互联网公司开始用node.js做web服务的中间件

微服务架构下的企业开发困境近几年来，在企业开发中越来越推崇微服务架构，而它在不经意间却导致前端同学和后端同学之间关于 API 接口颗粒度的争吵，越来越多见：「你自己请求 2 个接口再组装不就行了？」 - 后端同学追求服务下沉和解耦。 「少一次 HTTP 啊，加一个接口有那么难么？」 - 前端同学离用户最近，需要考虑用户体验灵活性。归结为一个问题：『服务端设计的接口究竟是面向 UI 还是...

原创 iterator 思路练习

Iterator 原生应用场景我们再回到最开始使用 for of 来进行遍历字符串、数组、map，我们并没有为他们部署Iterator接口，仍然可以使用 for of 遍历。这是因为在 ES6中有些对象已经默认部署了此接口，不需要做任何处理，就可以使用 for of 来进行遍历取值。不信？ 咿，你好难搞，我不要你说 - 信，我要我说 - 信。看看能不能拿到它们的迭代器。...

原创 element tree node-click 有的时候节点选中，但是节点绑定的事件没执行

原来的逻辑： 用的node-click事件 nodeClick(datanode){ if(node.checked){ this.parentNodesChange(node); }else{ this.childNode...

原创 ElementUi rules表单验证

rules: { name:[{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 2, max: 5, message: '长度在 2 到 5 个字符' },{ patter...

原创 数组对象求交集和差集

原创 vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解

要求：1、选中父节点，子节点及孙子节点（甭管有多少层级，兹要是子辈节点）可以不选中，取消选中父节点，子节点及孙子节点也还是没有任何变化；2、选中子节点或孙子节点，必须选中父节点及祖父节点（甭管有多少层级，兹要是祖辈节点），取消选中子节点或孙子节点，父节点及祖父节点可以不取消选中；3、基于需求2，此时子节点及孙子节点和父节点、祖父节点都已选中，那么若取消选中父节点，则子节点及孙子节点必须...

原创 webpack入门宝典

阅读本文之前，先看下面这个webpack的配置文件，如果每一项你都懂，那本文能带给你的收获也许就比较有限，你可以快速浏览或直接跳过；如果你和十天前的我一样，对很多选项存在着疑惑，那花一段时间慢慢阅读本文，你的疑惑一定一个一个都会消失；如果你以前没怎么接触过Webpack，而你又你对webpack感兴趣，那么动手跟着本文中那个贯穿始终的例子写一次，写完以后你会发现你已明明白白的走进了Webpack的...

转载 vue路径优化之resolve

1. resolve.extensions　　在webpack.base.conf.js中，我们可以看到resolve配置，其中的extengsions是一个数组，如下所示： extensions: ['.js', '.vue', '.json'],　　通过这样的配置，我们在组件中过着路由中应用组件时，就可以更为方便的应用，比如： import Hello fro...

转载 解决Vue引入百度地图JSSDK：BMap is undefined 问题

百度地图官网文档介绍使用JSSDK时，仅提供了2种引入方式：script引入 异步加载但vue项目中仅某一两个页面需要用到百度地图，所以不想在 index.html 中全局引用。那在单个vue组件页面中如何引入呢？详细方案：https://segmentfault.com/a/1190000012815739...

原创 详解CommonsChunkPlugin的配置和用法

简介CommonsChunkPlugin主要是用来提取第三方库和公共模块，避免首屏加载的bundle文件或者按需加载的bundle文件体积过大，从而导致加载时间过长，着实是优化的一把利器。实战应用以下几个demo主要是测试以下几种情况：不分离出第三方库和自定义公共模块 分离出第三方库、自定义公共模块、webpack运行文件，但它们在同一个文件中 单独分离第三方库、自定义公共模块...

转载 ajax方式下载文件

在web项目中需要下载文件，由于传递的参数比较多（通过参数在服务器端动态下载指定文件），所以希望使用post方式传递参数。通常，在web前端需要下载文件，都是通过指定<a>标签的href属性，访问服务器端url即可下载并保存文件到本地。但是这种方式使用的是HTTP GET方法，参数只能通过URL参数方式传递，无法使用POST方式传递参数。于是，想到使用ajax方式下载文件。实...

转载 vue插件编写与实战

1. 插件与组件在讲解插件之前，我们首先来了解下vue插件和组件的关系，在我们的vue项目中我们使用组件的频率往往会大于插件，关系如下图所示：在没有封装组件之前，如果不使用第三方插件，那么很多情况下我们会编写几个常用的组件来提供给页面使用，如Alert/Loading组件，而你可能需要在很多页面中引入并且通过components注册组件，但是像这样使用率很高的组件一般我们希望全局注册后...

转载 异步加载进阶

在面试中我们会碰到这种场景：面试官：能解释下什么是同步,异步么？程序员：假如我们执行A,B两个IO操作的时候，如果必须等待A完成后才能执行B那么这个就是同步的，如果A,B可以同时执行那么就是异步的。面试官：那能解释下什么是阻塞什么是非阻塞么？程序员：如果必须等待A完成后才能执行B那么这个就是阻塞的，如果A,B可以同时执行那么就 是非阻塞的面试官：那你的意思异步/同步的概念与阻...

原创 document.referrer 详解

项目一个需求，单点登录，从oa系统到我们系统，用户如果登录了不需要再次登录，怎么判断用户在oa过来的。解决方案：javascript 有一个可以获取前一页面的URL地址的方法 document.referrer无法获取 referrer 信息的情况下面的场景无法获得 referrer 信息直接在浏览器中输入地址 使用location.reload()刷新（location.hre...

原创 利用谷歌浏览器模拟网速慢的情况

在network下面的offline旁边可以选择网速：slow3G是最慢的情况，也可以通过add自定义网速

原创 Vue.nextTick 的原理和用途

官方文档说明：      在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM疑问：DOM 更新循环是指什么？ 下次更新循环是什么时候？ 修改数据之后使用，是加快了数据更新进度吗？ 在什么情况下要用到？原理   参考下面链接地址：https://segmentfault.com/a/1190000012861862...

原创 vuex简单、入门文档

如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 。我在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 但是表单 ( 子组件 ) 里的数据和页面 ( 父组件 ) 按钮交互的时候 , 它们之间的通讯很麻烦 : 之所以这么麻烦 , 是因...

原创 jquery-ui datepicker设置z-index

原创 apache自带测试大并发工具使用

1.找到ab.exe的目录      apache/bin/ab.exe2, 进入cmd控制台   命令： ab.exe -n 10000（访问的总次数） -c100（瞬间多少人在访问）  url（访问的地址）   例如：ab.exe -n 10000 -c 100 http://localhost/test.php3.4。当把-c调整到一千的时候，发现apache瘫痪。这时候可调整a...

原创 hack

解析IE6,IE7,火狐浏览器兼容性写法 　　用DIV+CSS布局的网页在IE下显示一切正常,可是在火狐(FireFox)浏览器里打开，结果个是非常混乱……　　用DIV+CSS布局的网页在IE下显示一切正常,可是在火狐(FireFox)浏览器里打开，结果个是非常混乱，这一定会影响到你的网站的推广，seo优化，不利于搜所引擎的搜索，所以解决DIV+CSS浏览器兼容的问题是完全必须的。...

原创 失败的简历总结

最近工作需要，于是乎开始了各种海量的简历筛选。筛选的过程是极其苦逼和无奈，深深体会到了HR的虐心感受。一份好的简历真的是很容易打动一个技术面试官的心下面就来点干货，如果你是面试官，看到后会怎样想（我们最近要的都是有vue开发经验的前端）No1:  看到北京地质大学这样的知名背景还是很期待的，但是看完简历的整体描述真的是失望透顶。做了这么久的leader写出的简历这么的“...

原创 git常用命令总结

1）git创建分支1-1）举例要在远程develop上创建一个分支feature_optimize_deploy，需要以下三步：$ git checkout -b feature_optimize_deployorigin/develop$ git push origin feature_optimize_deploy$ git branch --set-upstream-to o...

原创 工作项目git分支管理流程

1、git分支管理和约定：     主要采用git的flow模式，根据咱们项目稍作调整：          两个主要分支：master和develop     三个辅助分支：修改bug的(bug分支)，单独功能开发的（feature分支），提交测试的分支（release分支,暂时用origin/master merge到开发分支替代这一个分支）    1）master用于线...

原创 js异步加载

同步加载的问题　　默认的js是同步加载的，这里的“加载”可以理解成是解析、执行，而不是“下载”，在最新版本的浏览器中，浏览器对于代码请求的资源都是瀑布式的加载，而不是阻塞式的，但是js的执行总是阻塞的。这会引起什么问题呢？如果我的index页面要加载一些js，但是其中的某个请求迟迟得不到响应，于是阻塞了后面的js代码的执行（同步加载），同时页面渲染也不能继续（如果js引入是在head标签后）。...

原创 ES6总结第一课

1.let  （1）let只在块作用域起作用          var a=[];           for(let i=0;i&lt;10;i++){                a[i]=i;            }           a[7]()       输出7；   （2）let不存在变量提升           console.log(a); ...

原创 git+bitbucket

1.官网下载git安装，安装完后的目录    2.生成ssh keygen连接bitbucket   用ssh-keygen生成的密钥连接bitbucket可以避免每次提交代码时输入密码。   打开gitbash   输入ssh-keygen   生成id_rsa.pub，id_rsa两个文件3. 点击bitbucket右上角账号头像，进入账号管理=&gt;SSH密钥，添加密...