- 博客(52)
- 收藏
- 关注
RSS订阅
原创 this.$refs获取不到dom的可能原因及方法解决
背景搞饿了么高仿APP时，使用this.$refs.wrapper.getElementsByClassName('food-list')时获取不到dom节点正常能获取到应该是如下图：然后我又用了网上的方法:this.$refs.foodList（foodList是li的dom节点）结果还是刷新页面时获取不到dom然后我对比了网友访的饿了么的源码，下面是网友的下面是我的：...
2018-12-27 18:19:42
45096
3
原创 前端-浏览器回流和重绘
回流对于dom结构中的各个元素都有自己的盒子模型，这些都需要浏览器根据各种样式（浏览器的、开发人员定义的等）来计算并且根据计算结果将元素放到它该出现的位置，这个过程叫做回流（reflow）。例如浏览器计算开发人员定义的float、flex、margin等，得到结果后放到头部、底部等等位置重绘当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按...
2019-10-29 18:41:18
275
原创 react 类名设置函数className
function className(data) { return Object.entries(data).reduce((str, [key, value]) => { let name = '' if(value) { name = key } str += `${name} ` ret...
2019-10-16 22:07:36
1887
原创 JS - 判断类与函数
function A { render() { console.log(A) }}class B { render() { console.log(B) }}//判断是不是一个函数A instanceof Function //trueB instanceof Function //true//类和构造函数不同的是 开头的...
2019-09-20 10:11:08
728
原创 electron再mac环境下打包react成桌面程序
按electron官网文档，与react项目src同级目录下新建main.js1.main.js// 引入electron并创建一个Browserwindowconst {app, BrowserWindow} = require('electron')const path = require('path')const url = require('url')// 保持wind...
2019-07-30 18:37:36
1983
原创 网页中下拉出现动画效果的实现
效果的实现只需要两个库：1.animate.css 2.wow.jsanimate.css 参考：https://daneden.github.io/animate.css/wow.js 参考：https://github.com/matthieua/WOW1.新建index.html,在head中引入animate.css<head><link rel="s...
2019-07-29 10:33:43
2499
1
原创 css 设置 浏览器滚动条样式
效果如下：管他三七二十一，直接把下面样式导入即可::-webkit-scrollbar { height: 8px; width: 8px; background: rgba(222, 222, 222, 0.5); transition: all 0.3s ease-in-out; border-radius: 5px;} ::-we...
2019-07-29 09:54:43
178
原创 react 实现图片的滚动缩放和按住鼠标左键移动图片效果
在react项目按住鼠标左键移动图片效果html（jsx）中<img className='zoomImg' onDragStart={this.handleStopDrag} onMouseDown={(e) => { e.persist(); this.handleDrag(e) }}/>handleDrag事件 handleD...
2019-07-16 21:45:32
3116
4
原创 js 正则方法以及支持正则的string对象方法。
在使用正则匹配之前，我们需要了解正则的方法或支持正则的方法。支持正则表达式的string对象的方法1.search检索与正则表达式相匹配的值2.match找到一个或多个正则表达式的匹配3.replace替换与正则表达式匹配的子串4.split把字符串分割为字符串数组之前一直以为replace是RegExp对象的方法,其实是字符串的方法，只是这些方法可以接受Reg...
2019-07-05 19:27:18
899
原创 react防样式污染小助手-css module
react与vue不同，vue可以通过在script中设置scoped来限制样式的生效范围，不至于样式污染,CSS 的局部作用域解决了大问题。在w3c 规范中，CSS 始终是「全局的」。在传统的 web 开发中，最为头痛的莫过于处理 CSS 问题。因为全局性，明明定义了样式，但就是不生效，原因可能是被其他样式定义所强制覆盖。接手老项目更是噩梦，改对了一个地方的样式，却把另外许多地方的样式打乱。...
2019-07-02 00:08:27
3699
原创 重写react项目（一）使用less
react默认是不暴露webpack配置的，但是我们可以通过一些插件在不暴露webpack的情况下使用less需要借助两个库react-app-rewired和customize-cra1.安装react-app-rewiredhttps://github.com/timarney/react-app-rewired/npm install react-app-rewired -...
2019-07-01 23:41:45
1021
原创 ant-degisn的数字输入框的使用和表格的价格计算
需求1.最近在项目中需要用表格计算价格，所以需要用到ant-design中的数字输入框。如下图这里有两个表格，我需要实现的是1.表格内价格的计算和总价格的计算2.数字输入框只能输入1-99的数字，不能输入中文。实现1.数据格式。这里从后台返回的数据格式是这样的。[ [{parts_messages: [{parts_price,amount,vendor_oe}...
2019-06-14 00:02:01
1342
原创 react-动态声明类名和动态设置内联样式
需求1.有一列导航条，我们需要根据当前点击的导航来设置样式。2。表格中有价格一列，价格为空时显示为-，不为空时显示价格， 但是价格是红色，如下当金额小记为空时，显示的时黑色的'-'，有价格时应当显示红色，实现1.动态设置类名：可以通过es的模版字符串实现动态设置类名handle = (index) => { this.setState({ c...
2019-06-13 23:36:46
1187
原创 js中实例方法、静态方法和原型方法详解
背景之前一直以为构造函数可以直接访问原型方法，是错的，现在说一下实例方法构造函数中this上添加的成员,在Cat构造方法里面，定义在this中的变量和方法，只有实例才能访问到：如this.name,this.move,this.eat这些都是实例拥有，无法通过Cat直接调用。function Cat(name){ this.name = name this.move =...
2019-05-24 10:57:47
7580
3
原创 学习js面向对象编程设计模式
目录描述创建对象工厂模式构造函数模式原型模式构造函数模式+原型模式寄生构造模式稳妥构造函数模式描述面向对象的语言有一个标志，就是都有类的概念，而通过类可以创建很多具有相同属性和方法的对象。对象可以定义为无序属性的集合，其属性可以包含基本值，对象或者函数创建对象创建自定义对象的最简单的方式就是创建一个Object的实例。let cat ...
2019-05-23 20:46:08
365
原创 复习第一轮-各种数组方法
背景最近面试被问懵了，所以必须复习一波数组ES5栈方法：LIFO先进后出结构puth()pop()队列方法：FIFO先进先出结构shift() 数组前端删除值unshift() 数组前端添加值重排序方法：reverse() 反转数组项顺序sort() 排序算法 默认升序操作方法concat() 数组拷贝slice(开始位置下标，结束位置...
2019-05-19 19:46:49
148
原创 复习第一轮-作用域、作用域链和执行环境以及搞懂闭包。
目录背景作用域执行环境变量对象作用域链闭包背景最近汉得面试官问了闭包问题，想要深入理解闭包，所以需要回头复习。作用域参考文章：https://www.cnblogs.com/ukerxi/p/8027236.html官方解释是：“一段程序代码中所用到的名字并不总是有效/可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。funct...
2019-05-18 14:54:10
163
转载 代码简洁之-命名（2）
本文转载自：https://www.jianshu.com/p/75591d47312ajs命名应遵循 简洁、语义化 的原则用有意义且常用的单词命名变量1.变量命名方法: 小驼峰式命名法命名规范：前缀为形容词 （函数前缀为动词, 以此来区分函数和变量）好的命名方式let maxCount = 10;let tableTitle = '啦啦啦';不好的命名方式let setCo...
2019-05-07 17:32:23
136
转载 代码简洁之-RESTful规范（1）
背景最近做毕设时，觉得自己的代码写的非常乱，所以想要让代码简洁 RESTful规范是很重要的。本文是截取了部分阮一峰老师的文章：http://www.ruanyifeng.com/blog/2018/10/restful-api-best-practices.html动词+宾语RESTful 的核心思想就是，客户端发出的数据操作指令都是"动词 + 宾语"的结构。比如，GET /articl...
2019-05-07 17:16:50
230
原创 JS-Date对象
Date类型1.new Date()如果不传入任何参数，将自动获得当前的日期和时间如果想根据特点的日期和时间创建日期对象，必须传入该日期的毫秒数为了简化计算过程，ES提供了两个方法Date.parse()和Date.UTC()2.Date.parse()接收一个表示日期的字符串参数，然后根据该字符串返回相应日期的毫秒数3.Date.UTC()Date.UTC()的参数分别是年份...
2019-05-05 15:02:46
213
原创 js中使用sort根据数组内对象某个值大小进行升降序
背景：最近做毕设的项目时碰到需要实现价格进行升降序的功能。1.浏览器返回数值1和-12.根据接收到的两个值决定升降序解决使用sort方法简单数组：result =[{ name: 'chen', age: 12},{name: 'liu',age: 18},{name: ''ba', age: 40}]1.id值，全局值2.定义方法let id = 从浏览器返回的值1或...
2019-04-16 17:55:53
495
原创 koa框架koa-static配置静态目录获取图片
背景：之前学习了使用koa-multer上传图片，那么思考浏览器如何查看上传的图片，这里就用到了koa-static。koa-static中间件可以使的我们省去很多步骤，简单几步就可以获取到项目中的图片。实现1.首先是安装koa-staticnpm install koa-static --save2.引入。这是目录结构，app.js是我们的入口文件。为了public里面保存有我们...
2019-04-09 14:32:32
7998
4
原创 mock在vue项目中的安装使用
一.安装依赖npm install mockjs --save或者cnpm install mockjs --save二.引入使用在vue项目中src目录下新建mock目录然后再src/mock目录下新建user目录和index.js文件,该文件内容格式如下import Mock from "mockjs"import "@/mock/user/login"//指定被拦截的 请...
2019-03-02 14:33:05
1044
原创 vuex在vue项目中的使用
一.安装依赖npm install vuex --save或者cnpm install vuex --save二.引入为了便于维护。在vue项目中的src目录下新建目录store，在改store目录下新建index.js文件和一个modules目录index.js文件如下import Vue from "vue"import Vuex from "vuex"import ac...
2019-03-02 13:55:03
275
原创 less在vue项目中的使用
一.安装依赖 npm install less less-loader --save 或者 cnpm install less less-loader --save二.修改配置在vue项目中build/webpack.base.conf.js：moduls对象的rules数组中最后添加 { test: /\.less$/, loader: "style-loade...
2019-03-02 13:37:14
644
原创 vue路由的scrollBehavior的使用
问题背景当我们从A页面跳转到B页面，然后在B页面浏览一篇很长的文章，但是这时候我们讲页面滚动到某个位置的时候，我们不小心按了一下浏览器的后退键，这时候我们再按浏览器的前进键的时候会发现，该文章又要从头开始阅读了，这时候就脑壳疼了。解决当我们在用vue路由的时候，可以const router = new VueRouter({ routes: [...], scrollBehavio...
2019-01-16 10:03:25
2094
原创 vue学习之vm.$attrs与inheritAttrs的简单理解
问题背景文档的这段话什么意思？简单理解来就是父子孙…组件传值用的简单例子如下：父组件子组件上图中，父组件有两个属性分别是title和message,需要传递给子组件，而子组件接受父组件传来的值是需要props的对吧，但是此时我props只接受了一个title,而没有接收message,这个时候会发现如下图message这个属性会在子组件上div中显示，而在子组件使用了inh...
2019-01-11 15:38:53
873
原创 ES6之解构赋值用途
1.交换变量的值let x=1;let y=2;[x,y] = [y,x];2.从函数返回多个值函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便//返回一个数组function example() { return [1,2,3];}let [a,b,c]= example()//返回一个对象function e...
2019-01-10 13:49:24
314
原创 HTTP学习之了解Web及网络基础（一）
1.1使用HTTP协议访问Web你知道当我们在网页浏览器(Web browser)的地址栏中输入URL时，Web页面时如何呈现的吗？1.在浏览器地址栏输入URL之后，信息会被送往某处2.在某处获得回复，内容酒会显示在Web页面上Web页面当然不能凭空显示出来，根据Web浏览器地址栏中指定的URL，Web浏览器从Web服务器端获取文件资源（resource）等信息，从而显示出Web页面客户...
2019-01-09 17:13:35
210
原创 移动设备分辨率
1.逻辑分辨率 pt简单来说就是视觉上的单位，与我们的屏幕的物理尺寸有关2.物理分辨率 px可以理解为像素点，相同pt下，像素点越多，物理分辨率越高,但不是越高越好，这是因为人眼会有识别上线,下图的Reader为2x和3x的其实看上去清晰度一样。3.rpxiphone6下 1rpx=1px=0.5pt,所以最好以ip6为设计稿。...
2019-01-08 10:20:15
221
原创 微信小程序学习之template模板的使用
问题背景A页面有代码<view> <button>点击我</button> ........ //此处省略n行</view>B页面也有相同代码<view> <button>点击我</button> .......&l
2019-01-08 09:59:06
223
原创 前端模块化，组件和，工程化的理解
前端工程化前端工程化我认为就是将前端项目当成一项系统工程进行分析、组织和构建从而达到项 目结构清晰、分工明确、团队配合默契、开发效率提高的目的。工程化是一种思想而不是某种技术(当然为了实现工程化我们会用一些技术)在一个大型web项目中往往有更加复杂的结构和非常多的页面需要很多人甚至是多个团队配合才能把项目做完,我们需要有更加严谨和复杂的工程化思维去组织结构。从更高层面的项目组织来看我们要做项...
2018-12-27 10:10:34
972
原创 less学习总结（一）
Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术，让你的Css更具维护性，主题性，扩展性。Less 可运行在 Node 环境,浏览器环境和Rhino环境.同时也有3种可选工具供你编译文件和监视任何改变。使用1.使用koala软件，实时将.less文件转换为.css文件...
2018-12-25 22:12:33
132
原创 小白必看 jquery选择器
jQuery选择器分为目录基本选择器层次选择器过滤选择器 基本过滤选择器 内容过滤选择器 可见性过滤选择器 属性过滤选择器 子元素过滤选择器 表单对象属性过滤选择器表单选择器基本选择器 ID选择器 #id 类选择器 .class 标签名 div 通配符 * 组选择器 s...
2018-09-21 10:41:18
113
原创 JS之Array类型迭代方法
every():对数组中的每一项运行给定函数，如果该函数对每一项都返回true,则返回true var data=[{ id:1, name:'terry', age:12 },{ id:20, name:'lerry', age:13 }]; var val=data.every(function(item){ ...
2018-09-20 20:26:20
230
原创 JS学习之typeof操作符
typeof用于检测给定变量的数据类型 对一个值使用typeof操作符可能返回下列某个字符串 "undefined"---------如果这个值未定义 "boolean"-----------如果这个值是布尔值 "string"-------------如果这个值是字符串 "number"----------如果这个值是数值 "f...
2018-09-19 09:53:39
259
原创 jquery学习之选择器与过滤器
基本选择器 普遍选择器 * 所有的 id选择器 #id 类选择器 .class 标签选择器 标签名 群组选择器 #one,.two 取并集 复合选择器 div#one 取交集子代或后代选择器 子代选择器 > 直接孩子 后代选择器 空格 所有的后代 body * body...
2018-09-18 11:15:15
157
原创 JS学习之Array数组forEach方法
它只是对数组中的每一项运行传入的函数。什么意思？看例题说话var arr=[1,2,3,4,5];arr.forEach(function(item){ consolo.log(item); consolo.log("----");}结果如图 也就是说，forEach首先对arr数组中的第一项（也就是1，索引为0）的执行函数内的代码，然后对第二项（...
2018-09-06 19:31:29
15951
1
原创 JS学习之基本概念
一.区分大小写 ECMAScript中的一切(变量、函数、操作符)都区分大小写。这意味着。变量名test和变量名Test分别表示两个不同的变量，而函数名不能使用typeof,因为它是一个关键字，但是typeOf则完全可以是一个有效的函数名 二.标识符 所谓标识符。就是指变量、函数、属性的名字，或者函数的参数。标识符可以是按照下列格式规则组合起来的一个或多个字符： 第一个字符必须是一个字符，...
2018-08-30 14:58:44
99
原创 JS学习之工厂模式
一。 虽然Object构造函数或对象字面量都可以用来创建单个对象，但这些方式有个明显的缺点：使用同一个接口创建很多对象，会产生大量的重复代码，为解决这个问题，可以使用工厂模式的一种变体。 二。 ECMAScript中无法创建类，开发人员发明了一种函数，用函数来封装以特定接口创建对象的细节，如下所示。function createPerson(name,age,job){var o=...
2018-08-29 19:25:03
117
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人