weiyong_94的博客

原创 前端架构

根据我们自己公司的架构，整理出来这个思维导图。

原创 多个前端开发框架对比

前端开发框架对比前端多端开发框架对比一、常见的多端小程序开发技术框架：1、Taro vs Uni-app1.1多端效果对比：1.2 性能对比：1.3开发体验：1.4 网络资源对比：2、小结：二、常见的多端原生开发框架：1、常见使用场景：2、小结：前端多端开发框架对比一、常见的多端小程序开发技术框架：框架技术栈H5IOSAndriod微信小程序支付宝小程序百度小程序Mpvuevue✅❌❌✅❌❌Taroreact✅✅✅✅✅✅uni-a

原创 前端开发规范(html+vue+react)

前端开发规范一、编程规范（一）命名规范1.1.1 项目命名1.1.2 目录命名1.1.3 JS、CSS、SCSS、HTML、PNG 文件命名1.1.4 命名严谨性(二)HTML 规范 （Vue Template 同样适用）1.2.1 HTML 类型1.2.2 缩进1.2.3 分块注释1.2.4 语义化标签1.2.5 引号(三) CSS 规范1.3.1 命名1.3.2 选择器1) css 选择器中避免使用标签名2) 很多前端开发人员写选择器链的时候不使用 直接子选择器（注：直接子选择器和后代选择器的区别）。有

原创 前端处理后台接口返回文件流方法记录

问题一在我们的项目中，登录的时候有一个图形验证码功能，这个图形实际为一张后台返回的图片，通过get请求接口获取图片流。问题一实现方法将接口返回的数据设置成返回blob类型：responseType:‘blob’axios({ method:'get', url: url[urlStr], responseType:'blob'}).then(response => { resolve(response)}).catch(error => {

转载 打包优化记录

如果我们的Vue项目比较大．或者说项目中引入了许多第三方库，那么在执行npm run build构建项目的时候会极其的慢．比如我现在的项目就每次打包就要83s。 下面是我整理的一些优化技巧，可以有效地提高打包速度。一、配置 resolve.modules1，优化原理（1）webpack的resolve.modules是用来配置模块库（即nod...

原创 Vue打包速度优化

一、使用 webpack-parallel-uglify-plugin 插件来压缩代码1、默认情况下webpack使用UglifyJS插件进行代码压缩，但由于其采用单线程压缩，速度很慢。2、我们可以改用webpack-parallel-uglify-plugin插件，它可以并行运行UglifyJS插件，从而更加充分、合理的使用CPU资源，从而大大减少构建时间。二、操...

转载 PureComponent Vs Component

一.它们几乎完全相同，但是PureComponent通过prop和state的浅比较来实现shouldComponentUpdate，某些情况下可以用PureComponent提升性能1.所谓浅比较(shallowEqual)，即react源码中的一个函数，然后根据下面的方法进行是不是PureComponent的判断，帮我们做了本来应该我们在shouldComponentUpdate中做的事情...

原创 create-react-app创建react项目，使用less，使用npm run eject命令报错问题解决

1、安装less,在项目中执行: cnpm install less less-loader --save2、配置config/webpack.config.js文件webpack.config.js文件配置好之后运行：npm start但是Create React App（以下简称 CRA）是创建 React 应用的一个脚手架，它与其他脚手架不同的一个地方就是将一...

原创 Error: ENOENT: no such file or directory, scandir 'F:\react-elm-master\node_modules\node-sass\vendor

转载 popstate的bug解决方案

在知乎里面看到一篇爝爷的文章，感觉很有用，赶紧那笔记下来！！！首先，我们接到用户投诉，在某些网络运营商的网络下，某些android机型的浏览器中，访问我们的页面会有一些诡异的行为。一，起因：行为表现是，进入页面后，什么都不操作，页面加载完毕后，用户的浏览器居然直接跳转到了某个网站的一个搜索页面，每次搜索的结果还都不一样。一开始我们发现了这个bug后，是非常被动的，因为用户进行了录屏...

原创 python 入坑学习之函数式编程06

lambda表达式：（简写函数）stm = lambda x,y: return x+y 高阶函数：（把函数作为参数使用的函数）函数名就是一个变量 系统自带的高阶函数：1、map()原意就是映射，即把集合或者列表的元素，每一个元素都按照一定规则进行操作，生成一个新的列表或者集合，map函数是系统提供的具有映射功能的函数，返回值是一个迭代对象。例：l1 = [...

原创 python 入坑学习之异常处理和常用包05

异常广义上的错误分为错误和异常错误指的是可以人为避免异常是指在语法逻辑正确的前提下，出现的问题在python里，异常是一个类，可以处理和使用 异常的分类AssertError 断言语句（assert）失败AttributeError 尝试访问未知的对象属性EOFError 用户输入文件末尾标志EOF（Ctrl+d）FloatingPointError 浮点计...

原创 python 入坑学习之模块与包管理04

在现在的计算机编程语言中都会出现这个模块话的概念，当然在我学习的前端技术中也有这个模块，模块话，模块打包等等。现在我也来总结一下自己学习python中模块的知识点 一、模块：就是一个包含python代码，后缀名是.py的python文件优点：这个模块的优点和其他语言都类似：程序太大需要拆分程序代码块这样可以帮助程序员对整个项目或一个大功能的开发；模块化的代码可以重复利用；当作命名中...

原创 python 入坑学习之面向对象基础总结03

在学习js的时候，学到面向对象的时候也是一脸懵逼，在学到python的这个面向对象的时候虽然接受的比当时快了一点，但是学到最后还是很蛋疼啊 下面是面向对象的概述（当然也是将大佬的直接拿来用了）：OOP思想：接触到任意一个任务，首先想到的是任务这个世界的构成，是由模型构成的几个名词：     OO:面向对象     OOA：面向对象的分析     OOD：面向对象的设...

原创 前端小白入坑python学习之语法基础总结02

list（列表）：类似于js中的数组1、声明语法：l1 = []l2 = list()l3 = ['1','2','3']2、列表用下标访问：L = ['1','2','3','1','2','3','1','2','3']L[5] => 33、分片访问：生成一个新列表L = ['1','2','3','1','2','3','1','2','3']L...

原创 前端小白入坑python学习之语法基础总结01

我是一个前程序员，学过了JavaScript，HTML，CSS。下面再学习和总结蟒蛇的过程中基本的语法等地方难免会忍不住的会和JS进行对比。有不对的地方还望指出来，谢谢 一，字符串声明格式：str =“这是一个字符串......” 声明的字符串可以用单引号，双引号和三个单引号的方式括起来例如：str1 ='单引号括起来的字符串'           str2 =“双引号...

转载 css 11种垂直居中方法

1. 使用绝对定位和负外边距对块级元素进行垂直居中html代码：<div id="box"> <div id="child">我是测试DIV</div> </div>css代码：#box { width: 300px; height: 300px; background: #ddd; position: relative; } #ch...

转载 网站组建css样式初始化css代码

PC雅虎工程师提供的CSS初始化示例代码体，DIV，DL，DT，DD，UL，醇，LI，H1，H2，H3，H4，H5，H6，预先，代码，格式，字段集，图例，输入，按钮，文本区域，P，BLOCKQUOTE，日td {margin：0; 填充：0; } body {background：#fff; 颜色：＃555; 字体大小：14px的; font-family：Verdana，Arial，Hel...

转载 NPM 小白了解

npm install moduleName # 安装模块到项目目录下npm install -g moduleName # -g 的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置。npm install -save moduleName # -save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写...

转载 terminal快捷键以及vim快捷键

1.linux，mac终端快捷键  linux/mac输入terminal命令的快捷键：      ctrl+c,停止运行       ctrl+s,暂停屏幕输出  ctrl+q,恢复屏幕输出      ctrl+a, 跳到行开始  ctrl+e,跳到行end       ctrl+left,跳到上一个单词 ctrl+right,跳到下一个单词（mac下是alt快捷键）      ctrl+u, ...

转载 弹性布局

父级元素的属性 display：flexflex-direction 属性决定主轴的方向（即项目的排列方向）。row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。flex-wrap属性定义，如果一条轴线排不下，如何换行nowrap（默认）：不换行。wra...

原创 vue学习之路2

全局API学习（api,定义好的方法，全局API并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能）Vue.directive自定义指令（自己定义v-指令）<div v-direc="color">{{mesgess}}</div><script>Vue.derective('direc',function(el,binding,vnode){e...

原创 vue学习之路1

内部指令学习<div id="app">{{mesgee}}</div><script>var app = new Vue({el:'#app',data:{'mesgee':'hello word!'}});</script>* 通过双大括号的形式给设置的变量赋值；同时初始化Vue插件，el为执行元素的区域。v-if v-else v-show&...