- 博客(32)
- 收藏
- 关注
RSS订阅原创 jquery的$()，到底做了什么事情
首先来看一段代码：index.html<!DOCTYPE html><html> <head> </head> <body> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.
2018-11-09 17:09:26
767
原创 nodejs实现简单爬虫
要实现爬虫，首先我们需要安装三个依赖，分别是express，superagent和cheerio。这里默认大家已经在本地安装好了node环境，不会安装的小伙伴建议自行百度～首先来介绍一下上述提到的三个库：superagent是个http方面的库，可以发起get或post请求，在本例中，我们使用；cheerio可以理解为nodejs版的jquery，用来从网页中以css selector...
2018-11-09 16:10:09
2038
原创 浏览器从输入URL----获取网页资源的具体流程
作为前端开发人员，只有了解浏览器的工作原理才能更好的做好优化。下面，我们就来聊一聊，当客户端（浏览器）输入一个网址（URL）后，浏览器具体做了哪些操作吧！浏览器组成结构用户界面 浏览器引擎 渲染引擎 网络 UI后端 JS解释器 数据持久化存储当我们在浏览器中输入URL并且回车后，主要发生四个过程：查找IP 建立连接 相互通信 断开连接主要流程如下：客户端根据域...
2018-11-07 19:31:19
2666
原创 用css画三角形
效果实现：css代码：.trangle { position: fixed; top: 0rpx; right: 142rpx; width: 0rpx; height: 0rpx; z-index: 2000; border-top: 16rpx solid transparent; border-right: 16rpx solid #fff; ...
2018-10-17 15:19:49
225
原创 css3文本换行
首先我们看一下未对文本进行处理的效果：下面是代码实现：<!DOCTYPE html><html> <head> <style> .text { width: 300px; height: auto; border: 1px solid pink; } </style...
2018-10-11 10:23:22
2730
原创 微信小程序canvas绘制雷达图
效果图展示：代码实现（具体实现）：github地址：https://github.com/Yana5417/Radar/调用：// 画雷达图 drawRadar() { const categories = ['故事绘本', '英语教育', '数学教育', '科学教育', '情商教育', '通识教育']; const data = [4, 11, 3,...
2018-09-22 20:36:05
2953
2
原创 React中的props和state
一、propsreact中的prop是从外部传递给组件的数据。给组件的prop赋值：<SelectTagModel params='params' visible={this.state.showTagsModel} onCancel={this.handleCancel.bind(this, 'tags')} onOk={this.handleOk.bind(...
2018-09-18 15:22:43
346
原创 css3的filter（滤镜）属性
filter属性定义了元素（通常是<img>）的可视效果，例如：模糊与饱和度。none 默认值，没有效果 blur(px) 给图像设置高斯模糊，值越大越模糊。默认值为0 brightness(%) 给图片应用一种线性乘法，使其看起来更亮或更暗。0%：全黑。100%：图像无变化。>100%：图像比原来更亮。默认为1 contrast...
2018-09-18 10:52:28
354
原创 Flex的使用场景
1.固定宽度代码实现（某一侧固定，另一侧自适应）：<!DOCTYPE html><html><head> <title>Flex布局-一侧固定，另一侧自适应</title> <style> .parent { display: flex; width: 500px; ...
2018-09-12 11:15:52
1827
2
原创 JavaScript数组全面解析
一、定义let arr = [];二、数组的内置方法concat / slice / splice sort / reverse push / unshift pop / shift toString join三、数组的基本操作1.合并两个数组concat：[1, 2].concat(3, 4); // [1, 2, 3, 4][1].concat([2, 3...
2018-09-11 16:27:47
208
原创 微信小程序中web-view的使用，实现小程序与h5页面间跳转
微信小程序文档中提到，web-view组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。web-view的出现，可以缓解小程序size告急的问题。web-view的使用方法：<!-- wxml --><!-- 指向微信公众平台首页的web-view --><web-view src="https://mp.weixin.qq.com/">...
2018-09-11 10:47:43
29042
1
原创 微信小程序实现禁止弹框下的scroll-view滚动
最近在做页面优化，发现自己有个有弹框的页面，在弹框出现时底下的scroll-view还是在滚动。这极大的影响了用户体验，下面就来说一下我是如何解决这个问题的。其实解决方案也很简单，给你的弹框添加一个catchtouchmove='true'这个属性，就可以实现效果了。...
2018-09-10 10:07:02
3343
4
原创 微信小程序中的this指向问题
最近开发小程序发现一个很奇怪的问题，有些情况下用 this.setData 可以改变视图显示，有些情况下使用this.setData无效，需 const that = this; that.setData({ xx }); 使用 that 来保存当前的this状态，这样才能更新视图。下来我们就来解释一下，微信小程序中的this指向问题。首先我们来看一段错误代码：handleReadBook(...
2018-09-01 13:53:33
5663
原创 微信小程序canvas组件层级最高问题解决方案
最近产品新提了一个需求，在canvas页面上实现一个弹框。微信小程序文档中有提供cover-view组件，能覆盖canvas，map，video，camera等原生组件。但是也有一定的限制。比如：cover-view中只支持嵌套cover-view、cover-image，button。不可以使用input组件，这与我的需求不相符合，所以只能另辟蹊径。下面来看一下原型图：实现过程中遇到...
2018-08-24 18:44:07
44714
7
原创 js中的事件机制及事件
一、事件机制 1.事件js和html之间的交互是通过事件来实现的。事件描述的是文档或浏览器特定的交互瞬间。 2.事件流描述的是从页面中接收事件的顺序。包括：IE事件冒泡流和netscape事件捕获流。事件冒泡流是指从最具体节点出发依次往上走到较不具体的节点。事件捕获流是指从较不太确定的节点出发到最具体的节点。DOM2级事件流的三个阶段：事件捕获阶段处...
2018-08-22 19:55:13
324
原创 flex布局解析
Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。一、基本概念采用Flex布局的元素，称为Flex容器，容器的直接子元素称为Flex项目，容器默认有两个轴心线，用于项目的对齐与排列，水平主轴为main axis，垂直主轴为cross axis，主轴的开始位置为start，结束位置为end。 主轴和交叉轴的判定：如果...
2018-08-20 11:45:05
364
原创 div模拟实现textarea效果
效果展示：代码实现：<!DOCTYPE html><html> <head> <title>div实现textarea效果</title> <style> #textarea { height: 200px; width: 300px; ...
2018-08-16 15:40:00
3495
原创 微信小程序中隐藏右上角转发选项，实现在页面内点击转发按钮转发
最近开发小程序遇到了一个需求，在页面内定义一个转发按钮，只能在页面内点击这个转发按钮才能触发转发，右上角转发隐藏掉。实现效果：页面内部转发按钮：实现方法：微信小程序官方文档中提到，使用wx.hideShareMenu();方法隐藏转发按钮；...
2018-08-16 12:13:18
25887
4
原创 css中实现单行及多行文本溢出显示省略号
最近项目中很多地方有文本溢出显示省略号的需求，今天就来整理一下，怎样用css实现单行/多行文本溢出的功能。1.单行文本溢出显示效果如下：html中的定义：<p class="signal">css实现单行文本溢出显示省略号css实现单行文本溢出显示省略号css实现单行文本溢出显示省略号css实现单行文本溢出显示省略号css实现单行文本溢出显示省略号</p&g...
2018-08-16 11:57:56
456
原创 小程序中实现点击一个转发按钮，携带当前点击参数，转发另一个页面的功能
微信官方文档新提供了button的open-type="share"属性，然后js中直接定义onShareAppMessage()方法,旨在更直观的触发用户转发。但是有时候需要转发另一个页面，并且需要将当前点击对象的信息传递到要转发的页面。下面就来展示一下实现过程：wxml：<button class="zanbtn shared" data-item="{{comme...
2018-08-13 18:26:14
12043
原创 React中组件的生命周期
React严格定义了组件的生命周期，主要有三个过程： 装载过程（Mount），组件第一次在DOM树中渲染的过程。 更新过程（Update），当组件被重新给 i 呢渲染的过程。 卸载过程（Unmount），组件从DOM中删除的过程。1、组件的装载过程当组件第一次被渲染的时候，依次调用的函数为： constructor：类的构造函数，主要作用是初始化...
2018-08-12 10:42:40
165
原创 javascript中的严格模式以及严格模式的限制
'use strict;'指令是ECMAscript添加的第二种运行模式，严格模式(strict mode)即在严格的条件下运行，"use strict" 指令只允许出现在脚本或函数的开头。设立“严格模式”的目的：消除javascript语法中的一些不合理、不严谨之处，减少一些怪异行为； 消除代码运行的一些不安全之处，保证代码运行的安全； 提高编译器效率，增加运行速度； 为未来新版本...
2018-08-07 17:22:19
1335
原创 canvas绘图
Canvas是HTML5新增的组建，它就像一块幕布，可以用JavaScript在上面绘制各种图标、动画等。一、测试浏览器是否支持canvas<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible...
2018-08-07 15:57:32
245
原创 css中的mixin及其用法
一、mixin是什么？@mixin是一种简化代码的方法，能够提高代码的重复使用率。二、mixin的用法mixin定义（使用@mixin定义）：@mixin hexagon-generator($hexagon-width, $factor, $border-radius){ display: inline-block; border-radius: 50%; widt...
2018-08-07 14:06:01
15869
原创 js使用require 和 import 引入依赖的区别？
require 和 import，都是为了JS模块化使用。最近项目中，因为多人协同开发，出现了一个项目中同时使用了require 和 import 引入依赖的情况。正常情况下，一个项目中最好是对引入方式做一个规范。下面我们就来看一下require 和 import的区别：一.require require是Commonjs的规范，node应用是由模块组成的，遵从common...
2018-07-21 23:20:09
42034
2
原创 跨域解决方案
一、什么是跨域跨域，是指浏览器不能执行其它网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。同源策略会限制以下行为：a、Cookie、LocalStorage和IndexDB无法读取；b、DOM和JS对象无法获取；c、Ajax请求发送不出去；二、常见的跨域场景同源策略是指，域名、协议、端口均为相同。 三、跨域的解决方法1...
2018-07-13 17:25:58
377
原创 小程序优化方案
最近一直在做小程序，开始的时候因为项目太急，功能模块很少，权衡之下选择了原生的小程序开发模式。然后随着功能迭代，小程序的大小又有限制，所以决定开始尽可能的优化项目。下面是用到的一些优化方案：1. wx:if vs hidden 小程序官方文档中描述，wx:if如果在初始渲染条件为false时，框架什么耶不会做，只有当值变为真时，才开始局部渲染。hidden只是简单的控制显示与...
2018-07-05 11:07:02
16580
原创 前端经典面试题
一、JavaScript全局变量和全局函数 1.全局变量： Infinity：无穷大的数值； NaN：判断某个值是不是数字值； undefined：未定义的值； 2.全局函数： decodeURI(): 解码某个编码的URI； decodeURIComponent(): 解码一个编码的URI组件； en...
2018-06-29 17:30:09
226
原创 JavaScript中this全面解析
一、关于thisthis关键字是JavaScript中最复杂的机制之一。它是一个很特别的关键字，被自动定义在所有函数的作用域中。 1.1 为什么要用this首先我们来看一段代码：function identify() { return this.name.toUpperCase();}function speak() { var greeting = "...
2018-06-28 15:21:14
402
原创 Javascript闭包问题
一、什么是闭包？ 概念：一个函数有权访问另一个函数作用域内的变量，这个函数就是闭包。 function funA() { var a = 'lyn'; function funB() { console.log(a); }; return funB; }; var a = funA(); a(); // lyn ...
2018-06-28 12:00:50
153
原创 Promise、async/await的用法
1.什么是Promise？ Promise是一种异步编程的解决方案。2.为什么要用Promise？ 背景：js是单线程执行的，所以JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行会产生很多回调函数，为了解决这种回调函数太多（又称回调地狱），社区提出了Promise，作用与回调方法一致。3.怎么用Promise？ let p1 = new Pr...
2018-06-27 19:51:34
838
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人