![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端
文章平均质量分 66
kellywong
这个作者很懒,什么都没留下…
展开
-
构建属于你自己的基于react的前端UI组件库
一. storybook二. eslint+prettier+changelog构建代码规范三. 文档(gitbook/vuepress)四. 版本管理原创 2021-05-13 17:32:00 · 1195 阅读 · 3 评论 -
了解Hybird和小程序和react-native的技术架构
1. Hybrid App1.1 Hybrid app的优势Hybrid app是介于native和web之间的一种混合app,它既有native良好的用户体验和兼容性特点,又具有web跨平台和快速开发迭代的特点。可以对比下三种app 在开发成本,用户体验,迭代速度等方面的表现:webHybridnative开发成本低较低高用户体验差较优优迭代速度快速快速较慢安装不需要需要需要跨平台支持怼支持不支持1.2 Hybri原创 2020-09-26 13:45:35 · 625 阅读 · 0 评论 -
冲刺大厂你需要知道的前端性能优化
前端性能优化原创 2020-08-19 12:01:13 · 443 阅读 · 0 评论 -
彻底搞懂js原型,原型链,继承
一、js中的原型和原型链和其他的面向对象编程语言不同,最开始js并没有引入class的概念,但是js中有在大量使用对象,为了保证对象之间的联系,JavaScript引入了原型与原型链的概念。1、什么是原型在js中,每一个构造函数都拥有一个prototype属性,这个属性指向一个对象,也就是原型对象。原型对象默认拥有一个constructor属性,指向指向它的那个构造函数,每个对象都拥有一个隐藏的属性[[prototype]],指向它的原型对象。原型对象就是用来存放实例中共有的那部分属性。2. 什么是原创 2020-05-23 17:20:40 · 613 阅读 · 0 评论 -
前端项目工程化工具webpack,gulp,babel的使用和原理
一、项目中的工程化node.js 运行时,npm 包管理expressjs 服务端框架babel 编译 ES2015+ 代码到 ES5webpack打包和压缩源码eslint 检查代码规范(腾讯那套)prettier.js 代码自动美化排版git hook规范代码提交格式(按照anjular.js)mocha 单元测试二、webpack使用和工作原理webpack是前端项目...原创 2020-02-22 18:02:19 · 1254 阅读 · 0 评论 -
使用抓包工具fiddler修改接口返回值进行调试
安装完fiddler, 配置https和Connections.配置完点击options-HTTPs右侧Action-导入证书到桌面。 然后在谷歌浏览器设置-高级-管理证书-受信任的跟证书颁发机构中导入fillder证书,重启fillder和浏览器。...原创 2019-02-18 16:54:14 · 2590 阅读 · 0 评论 -
读you don't know js提取自己没注意的点
1. == 和===区别之前理解:前者检查值的等价性,而后者检查值和类型两者的等价性,一般随意两者随意使用读书之后理解:前者在允许强制转换的条件下检查值的等价性,而后者是在不允许强制转换的条件下检查值的等价性。判断是何时使用哪个的规则:如果一个比较的两个值之一可能是true或false值,避免==而使用===如果一个比较的两个值之一可能是这些具体的值(0,"",或[] —— 空数组),避...原创 2019-02-20 13:27:05 · 145 阅读 · 0 评论 -
项目遇到的问题以及解决方法---h5页面回退,保留前一个页面用户浏览位置
具体需求描述:一个h5的产品列表页,用户滑动列表页,当用户滑动到感兴趣的产品,点击进入详情页,浏览完详情页在回退到列表页能保留之前用户浏览位置。(react下开发)1.开始什么都没做,回退的时候自然无法保留用户浏览位置。2.然后考虑怎么解决,最开始的想法是保留scrolly的值,在回退的时候使用window.scrollTo()强制回退到上次浏览位置。但是这面临着一个问题,回退相当于重新加载页...原创 2019-02-22 17:55:17 · 2281 阅读 · 1 评论 -
坑货----win10下的node canvas
在安装node canvas的时候直接使用npm install canvas结果报错,具体可能由于canvas一堆依赖并依赖C++,于是查找资料,按照https://my.oschina.net/wangr15/blog/1540126操作的,装了一堆东西,然后依旧报错:C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\V120\Micros...原创 2019-01-30 19:20:22 · 1111 阅读 · 2 评论 -
es6中class继承的坑
1. es6继承的过程ES6 的继承机制和ES5完全不同,实质是先将父类实例对象的属性和方法,加到this上面(所以必须先调用super方法),然后再用子类的构造函数修改this。在子类的构造函数中,只有调用super之后,才可以使用this关键字,否则会报错。这是因为子类实例的构建,基于父类实例,只有super方法才能调用父类实例。2. super关键字super作为函数调用时,代表父类...原创 2018-11-23 11:40:37 · 1493 阅读 · 0 评论 -
react中进行状态提升,多个组件公用的组件提到父组件
我们使用一个日期和毫秒实时转化的样例作为例子,像图中这种,上面输入日期,下边可以实时转为毫秒,同时毫秒也可以实时转为日期:大概思考的方向:首先需要一个输入组件,承载用户的输入;然后需要一个父组件存放这两个输入组件。如果把state放在子组件中,那再父组件中调用的两个子组件就是完全相互独立的,就不能实时更新,因此我们需要把state提升到父组件中,既然state提升到父组件中了,那么两个子组件...原创 2018-11-19 13:47:51 · 1077 阅读 · 0 评论 -
小程序中scroll-view组件实现效果之--------城市列表页的索引(scroll-into-view)
想要实现的功能是在一个城市列表页实现字母索引点击字母跳转到相应的位置,在小程序里面利用scroll-view特别简单首先需要索引字母添加一个点击事件,捕获到点击的id <view wx:for ="{{searchLetter}}" wx:key="index" data-letter="{{item.name}}" catchtouchend="clickLetter">{...原创 2018-10-11 14:25:09 · 2374 阅读 · 0 评论 -
项目遇到的问题以及解决方法---小程序页面因数据量大带来问题的优化
一 、问题描述:小程序开发中开发一个城市列表选择页,如下:但是由于接口返回的城市数量过多,导致首屏白页的问题:怎么优化这个问题?1. 首先考虑是把接口返回数据存储为本地文件,进行本地加载,可以节约请求回显时间,但是这种做法并没有使问题获得改善,这表示接口返回应该是很快的,请求或者本地并不是主要影响,那么主要影响可能是在真机上数据太大导致列表渲染耗时太长。2. 采用本地、分段加载:把按照...原创 2019-02-20 15:22:58 · 6403 阅读 · 0 评论 -
webpack原理,使用,优化
1.webpack的原理2.webpack的使用3.webpack的优化上图是采用常规webpack配置,并未采用优化手段打包,打包时间60s…原创 2019-10-10 19:53:18 · 991 阅读 · 0 评论 -
使用hash和history实现前端路由切换,含完整源码
1.什么是路由路由最早出现在后端,也就是服务器端的路由,对于服务器来说,当接收到客户端发来的HTTP请求,就会根据所请求的相应URL,来找到相应的映射函数,然后执行该函数,并将函数的返回值发送给客户端。对于最简单的静态资源服务器,可以认为,所有URL的映射函数就是一个文件读取操作。对于动态资源,映射函数可能是一个数据库读取操作,也可能是进行一些数据的处理,等等。然后根据这些读取的数据,在服务器端...原创 2019-07-20 14:32:40 · 1242 阅读 · 0 评论 -
移动端h5使用touchstart,touchmove实现多图片拖拽效果
1、需求描述:对移动端多张图片可以进行拖动排序(例子中使用两排5张图片)2、实现过程:主要思想就是能够通过用户手势,捕捉到被拖 动元素以及拖动结束后的被交换元素,通过交换这两个元素实现拖动排序。除此之外,我们还需要获得被拖动元素在拖动过程中的的left和top值,增加拖动过程中的效果。在这个过程中会用到移动端的手势事件touchstart,touchmove,touchend首先,需要...原创 2019-05-17 10:47:25 · 3676 阅读 · 0 评论 -
多个组件实例上添加事件监听器导致的问题
问题描述:最近在做项目遇到一个问题:项目是一个mvc的框架,在项目站内切换的时候不会卸载上一个页面的组件,这就会导致一个问题,如果一个组件被多个页面调用,并且该组件上涉及到添加事件监听器,如果使用getId的方式获得dom并添加事件监听器,那势必会导致在a页面的时候调用这个组件,并在a组件实例上添加了监听器,当进入到b页面使用getId的方式获得dom是a页面的,并且监听器也并没有被移除,那再b...原创 2019-05-10 16:21:10 · 1416 阅读 · 0 评论 -
微信小程序开发----分享
分享是小程序中使用最多的功能,包括小程序原生页面的分享和使用webview打开的h5页面的分享。原生页面:onShareAppMessage(),点击右上角的三个点分享会自动执行该函数,关于该函数需要注意:该函数是同步函数,里面涉及到的分享参数不能通过异步函数获取,如果想异步获取,需要在点击分享之前准备好相应参数分享参数要做好容错,不然很容易出现奇奇怪怪问题h5页面的分享:在小程序里...原创 2019-04-29 17:35:07 · 461 阅读 · 0 评论 -
windows下配置并运行react-native项目
因为后边要做rn项目,所以需要搭建下环境,过程中遇到很多问题,特记录下来。首先我是按照react-native中文网官方提供的教程进行进行安装的。react-native 需要的依赖的环境:node, python2, jdk,react-native-cli. 这里需要注意,python必须是2,jdk必须是1.8以上,jdk遇到过坑,因为本地安装了多个版本的jdk,使用java -ve...原创 2019-04-19 15:07:12 · 1369 阅读 · 0 评论 -
获取图片高度问题------页面图片加载完成后获取图片高
问题描述:因为埋点的需要,需要判断一个产品是否进入用户可视区域,在实现过程中出现:每次新打开一个窗口,使用element.getBoundingClientRect().top的值都是错的,但是刷新页面,值又正常了。思考过程:为什么会出现这种情况啊,明明是在componentDidMount中做的处理,该生命周期函数运行的时候不是页面dom都加载完了吗,那不应该获取不到图片高度啊?是不是...原创 2019-04-26 17:01:47 · 2584 阅读 · 0 评论 -
js中异步处理-------callback,promise, async/await
1. 回调函数callback回调就是在异步操作之后把得到的值传递给回调函数进行处理。function queryCity(latitude, longitude, callback) { wx.request({ url: "/restapi/soa2/10398/json/LBSLocateCity", method: "POST", ...原创 2019-03-28 10:25:08 · 1489 阅读 · 0 评论 -
准备js面试容易被忽略的知识点总结(一)
一、 js中的数据类型的检测1、使用typeof来判断数据类型typeof 运算符把类型信息当作字符串返回,一般会返回下面几种类型 undefined string boolean number object -------对象或者null返回的是object function symbol2、使用constructor 属性来判断数据类原创 2017-08-10 22:12:30 · 239 阅读 · 0 评论 -
关于angularjs应该知道的知识点一双向绑定
1、双向数据绑定<div ng-app="myApp" ng-controller="myCtrl"> 名: <input type="text" ng-model="firstName"> 姓: <input type="text" ng-model="lastName"><br> <br> 姓名: {{firstName + " " + lastName}}</原创 2017-07-14 16:41:14 · 255 阅读 · 0 评论 -
js 事件流,事件处理程序,事件对象
js 事件流,事件处理程序,事件对象闲来无事想总结一下js中有关事件的知识点。一、事件流为啥要叫事件流呢,这是因为当在一个html页面中某个元素触发一个事件的时候,接收这个事件的元素不止一个,而是多个,所以我们使用事件流描述页面中接收事件的顺序。目前存在的事件流主要有两种:冒泡流 事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后逐级向上传播至最不具体的那个节点(文档)。知持事件原创 2017-06-09 16:36:02 · 536 阅读 · 0 评论 -
angularjs知识点四指令
指令是AngularJS中最为重要的部分,所以这个框架本身也是自带了比较多的的指令,但是在开发中,这些指令通常不能满足我们的需要,所以我们也是需要自定义一些指令的,因此框架指令包含:框架自身指令(ng-###)自定义指令对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能。内置的指令肯定是系统自身定义的,那自定义指令怎么使用呢?AngularJS应用的模块中有原创 2017-07-27 11:14:43 · 255 阅读 · 0 评论 -
Mysql-python安装出现的问题的记录
电脑安装了pip,所以一开始直接使用:pip install Mysql-python进行安装,结果报错: error: Microsoft Visual C++ 9.0 is required. Get it from http://aka.ms/vcpython27看来就是缺少icrosoft Visual C++ 9.0,经过搜索,绝大多数的回答都是:需要安装Microsoft Visual原创 2017-07-06 17:32:42 · 1361 阅读 · 0 评论 -
qq提供的聊天接口
在做网页时候,我们有时候需要做在线咨询功能,我们可以通过qq提供的接口来通过点击一个链接来直接弹出聊天对话框<html> <head></head> <a href="tencent://message/?uin=123456789&Site=&Menu=yes">点这个链接会打开一个和QQ是123456789的用户聊天的窗口</a> </html> 好简单,记录下来。原创 2017-06-27 10:16:25 · 15293 阅读 · 0 评论 -
记录一下自己在学习中遇到的前端知识点
1、如果我们想要设置元素中的文字在垂直方向上居中,比如设置一个按钮中的文字在垂直方向上居中:可以设置css中 line-height=元素本身设置的高度。 2、在js中访问对象中的属性或者方法使用: element.method===element[method] 二者完全等价。 3、兼容问题的收集: a. IE会将注释节点实现为元素,所以在IE中调用getElements原创 2017-06-21 09:24:48 · 223 阅读 · 0 评论 -
前端一些工具,文档,插件,学习网址等等的记录(慢更)
1、Amaze Ui(妹子UI):中国首个html5跨屏前端框架 http://amazeui.org/ 2、WebUploader:一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。http://fex.baidu.com/webuploader/。原创 2017-07-14 13:28:26 · 391 阅读 · 0 评论 -
angularjs知识点三过滤器
html中的过滤器在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器。例如,假设我们希望将字符串转换成大写,可以对字符串中的每个字符都单独进行转换操作,也可以使用过滤器:{{ name | uppercase:parm }},有很多内置过滤器。js中的过滤器在JavaScript代码中可以通过$filter来调用过滤器。例如,在JavaScript代码中使用lowercase过滤器:app原创 2017-07-14 21:16:20 · 201 阅读 · 0 评论 -
Django的入门使用2
在入门使用1中我们介绍了最基础的django最基础的使用,这篇文章我们主要介绍django中的model,也就是和数据库的交互。 首先需要了解django中的model是什么? 简单的说model就相当于数据库中的表,它是用类的形式实现的。它使用的是ORM,也就是对象关系映射,把数据库数据表映射成django中的类,不需要操作数据库只需要操作类就可以啦。同样我们以我们之前的myblog为例,这个原创 2017-07-05 15:39:20 · 194 阅读 · 0 评论 -
Django的入门使用1
一、Django的安装在django安装之前需要先安装Python,这里不具体说Python的安装过程了,不会的请自行百度。 django安装有两种方式: 1、使用Python的包管理工具pip: 首先要想使用pip,需要把python自带的pip的路径加入到环境变量中,也就是你Python安装目录的Script目录,我的是F:\Python27\Scripts。然后使用:原创 2017-07-05 10:47:09 · 379 阅读 · 0 评论 -
js中变量,作用域
一、js中的变量ECMAScript 变量可能包含两种不同数据类型的值:基本类型值和引用类型值。基本类型值指的是简单的数据段,而引用类型值指那些可能由多个值构成的对象。js中种有5种基本数据类型Undefined、Null、Boolean、Number 和String。js对于基本数据类型和引用类型的访问是不同的。基本数据类型是按值访问的,因为可以操作保存在变量中的实际的值。引用类型的值是保存在内存原创 2017-06-13 09:38:26 · 440 阅读 · 0 评论 -
使用js中常用的鼠标事件实现一个拖拽的例子
一、js中常用的几个必备鼠标事件onclick: 元素上发生鼠标点击时触发.ondblclick: 元素上发生鼠标双击时触发.onmousedown: 当元素上按下鼠标按钮时触发.onmouseup: 当在元素上释放鼠标按钮时触发.onmouseout: 当鼠标指针移出元素时触发.onmousemove: 当鼠标指针移动到元素上时触发.onmouseover: 当鼠标指针移动到元素上时原创 2017-06-20 17:25:24 · 17559 阅读 · 0 评论 -
angularjs知识点五完整的项目结构
anjularjs中一个完整的项目结构是怎么样的呢?先看张图: packge.json:你在项目中安装的nodejs的各种工具的配置文件。 node_modules:安装的nodejs的存放目录。 app:项目主文件index.html:是一个主视图文件 加载js文件然后放一个主视图<div ng-view></div>tpls:代码片段,受路由控制,会根据不同的路由把代码片段原创 2017-07-27 21:28:58 · 1069 阅读 · 0 评论 -
欢迎使用CSDN-markdown编辑器
谈谈对浏览器渲染html文件的理解最近在准备找工作,总结一下浏览器渲染的步骤,发现好多博客说的都不是很明白,我自己也总结了好多个版本,都感觉有哪里不怎么对,最近好像有点理清了,记录一下,不保证完全正确,如果有错误欢迎指出。1.浏览器对html文档下载的顺序和渲染的顺序都是自上而下进行的。 2.在渲染到html页面的某一部分的时候,其页面上所有的部分都已经下载完(这里不包括所有相关元素奥) 3.在原创 2017-09-07 16:21:10 · 269 阅读 · 0 评论 -
js高级程序设计(第三版)这一遍的总结——第四章变量、作用域和内存问题
一、基本类型和引用类型1、基本类型的复制 基本类型复制之前和复制之后的两个值是完全独立的,并不会相互影响。2、引用类型的复制 引用变量在复制的时候复制的是变量的指针,复制操作结束后,两个变量实际上将引用同一个对象。3、参数传递ECMAScript 中所有函数的参数都是按值传递的。也就是说,把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样原创 2018-01-21 16:25:56 · 239 阅读 · 0 评论 -
react实现pc端图片轮播
1.开始展示多张图片效果图:点击左右按钮的时候可以滑动,当向左滑动完成之后,有按钮消失;当像右滑动完成之后左按钮消失。 解决方法:可以直接使用jquery的动画效果。。。(开始想使用原生js,各种报错。。。后边在想下) 具体操作:首先react组件中的图片是循环输出的,每次点击一个城市,其相应的景点信息就会输出在它的下方,需要操作的内容如下: &lt;div classNa...原创 2018-08-21 09:36:26 · 7071 阅读 · 1 评论 -
react中实现效果——点击除弹层区域的其他页面区域,弹层消失
比如如下面的情况: 当我们点击更多时候,页面出现一个弹层,点击叉叉,再次点击更多或者点击其中某个城市,这个弹层都会消失,但是现在我们希望点击页面其他任意区域弹层也会消失,为此,我们使用react实现它。首先我们在react的生命周期函数中增加监听器,给整个页面最顶级(window)增加一个点击事件处理函数componentDidMount() { window.addEven...原创 2018-08-28 11:29:25 · 7311 阅读 · 0 评论 -
秒杀需求的实现思路
首先大致说一下需求:大概就是要实现下面的效果,秒杀分为三个阶段: 预热中,抢购中,已结束。 预热中的展示效果又分为两种:当距离秒杀开始超过24小时的时候显示秒杀什么时候开始;当距离秒杀开始时间少于24小时的时候,开始倒计时。 抢购中的展示效果也分为两种:当距离秒杀结束超过24小时的时候显示秒杀什么时候结束;当距离秒杀结束时间少于24小时的时候,开始倒计时。 结束就展示已经结束。 基于i...原创 2018-08-30 19:59:36 · 2250 阅读 · 0 评论