- 博客(31)
- 收藏
- 关注
RSS订阅原创 IntersectionObserver与元素可见性
场景旧有项目出于各种原因，不能进行大改版，但由于视觉提升或者业务兼容，又必须对原产品进行重构。需要接入新功能，但又不想增大旧项目体积，所以必须要通过引包来管理。市面上常见的包管理方式有npm，yarn，brew等等。但是今天说的都不是这些。...
2021-08-01 01:25:54
369
原创 requestIdleCallback 和 requestAnimationFrame如何使用
requestIdleCallback 和 requestAnimationFrame如何使用requestIdleCallback原理使用方式演示效果requestAnimationFrame原理使用方式演示效果requestIdleCallback原理将在浏览器的空闲时段内调用的函数排队。这使开发者能够在主事件循环上执行后台和低优先级工作，而不会影响延迟关键事件，如动画和输入响应。函数一般会按先进先调用的顺序执行，然而，如果回调函数指定了执行超时时间timeout，则有可能为了在超时前执行函数而打
2021-07-30 15:20:25
228
原创 React PureComponent 和 Component
PureComponent 和 Componentreact区别使用PureComponent的条件最佳食用方式react你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。区别PureComponent 是浅比较, 如五种基础类型(boolean, string, n...
2019-08-23 14:21:19
188
原创 前端之模块化思想
如你所知，npm作为一个包管理工具，能做到开箱即用，模块化可以说是其思想支撑。最近做了一个地图相关的项目，地图上四种元素，每种元素里面都有一个数据可视化模块(图表)。最开始写这个项目的时候，地图上只有一种元素：灯。在灯的图表上面加了一堆的东西，比如：chart，拖拽，消息处理，打印等等。后来发现修改过于复杂，于是进行模块化整理，无疑对代码可读性有较大的提升。之后灯连成组，再加上电表以及...
2018-06-16 17:09:41
1815
原创 区分浏览器
QQ, 360, 搜狗(都是极速模式下)QQ浏览器: navigator.userAgent.indexOf("QQBrowser")>-1360浏览器(这个最恶心, UA根本无法区分, 所幸在GitHub找到解决方案): window.showModalDialog && window.chrome搜狗浏览器: navigator.userAgent.indexOf("MetaSr")>-1
2017-10-11 17:04:50
406
原创 webpack压缩
国庆节前, 用react写了个小项目, 写完就扔给别人, 然后出去浪了…等回来, 被告知JS文件太大(770KB), 用户体验太差. 然后改呗 压缩之前的webpack.config.js如下:var webpack = require("webpack")module.exports = { entry: "./src/app.js", output: { pa
2017-10-10 19:55:27
1852
原创 state和props的区别__react
首先说明: state和props是每个组件都有的 其次: state可变, 但props不可变(这是官网给出的说法) 但实操过程中, state的确可变, 但props也可以变, 是不是fb搞错了? 当然不是! 这里的可变与不可变, 说的是改变后, 是否会重新渲染当前组件. 可变对应的是组件会重新渲染, 不可变(props)是不会渲染的. 至于原因, 则与内部实现机制有关: 每次用 th
2017-09-20 14:56:11
640
原创 循环定时器--用setTimeout代替setInterval
续前缘 … 循环定时器的写法, 很多人应该熟悉/* *func 回调 *interval 间隔时间*/setInterval(func, interval)大部分人(包括之前的我)都将循环定时器理解为: 每间隔一段时间就执行一次回调. 其实这种说法并不准确. 如果强行这么理解, 那就要加上两个条件: JS进程永远处于空闲状态; 回调函数执行时间小于间隔时间. 可以做个试验:setInt
2017-07-19 11:57:43
1612
原创 定时器和ajax
JS中关于定时器, 有两种: setTimeout和setInterval,区别在于单次与循环. 众所周知, JS运行在单线程的环境中, 也就没有什么并行处理的说法. 既然是单线程, 那么肯定有个队列(FIFO)来排列代码的执行顺序, 要不然一拥而上去抢购, 那程序肯定 crash. 先来看一段代码:for(var i=0; i<5; i++){ setTimeout(function(
2017-07-10 14:42:31
3694
原创 JS中的队列(queue)和栈(stack)
队列: 遵循先进先出(FIFO)原则. 比如火车过隧道, 在入口, 车头先进去; 在出口, 车头先出去. 栈: 遵循先进后出(FILO)原则. 比如圆筒状的硬包装薯片, 不想吃, 就把薯片A放回去(肯定是放到离开口最近的地方); 过了一会, 又想吃了, 就拿出距开口最近的薯片A. JS中, 栈和队列的界限不是那么明显, 所以也无法准确了解他们之间的区别. 接下来, 我会用数组来详述栈和队列的不
2017-07-06 12:00:44
1013
原创 JS事件发布和订阅的原理
我是小白 学过nodeJS的人, 对eventEmmit这个包应该很熟悉吧…它采用的是事件发布和订阅模式. eventEmmit可以自定义事件名, 并跟某些特定的元素绑定. 而本文抛弃nodeJS包, 尝试从自己的角度剖析这个神器的内在. 原生JS有一个createEvent方法, 跟createElement类似, 不过前者是用来创建自定义事件的. 如下:// createEvent的参数最好是
2017-06-21 16:49:27
3086
原创 Uncaught SyntaxError: Unexpected token
想必前端同学对这个很熟悉, 造成这个错误的原因, 大多数情况下是JS语法不规范—即只有开始的符号, 没有结束的符号. 很可惜, 我不是一小部分人, 所以, 我也遇到了这个问题, 并且被它困扰了三个月. 当然, 于我而言, 错误的原因跟其他人不一样. 我不知道有多少同学知道SSO(单点登录)的概念, 如果不清楚, 请点击链接. 首先说一下我遇到的情形: 上线大半年了, 页面突然之间崩了(包括样式
2017-06-21 13:49:10
1221
原创 抽丝剥茧看路由---2__原生JS仿写路由
…续前缘 上一篇文章只是作为本文的对比, 本文重点是原生JS仿写路由 既然是仿写, 那么结构自然要基本一样咯index.html<!DOCTYPE html ><html ><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, max
2017-06-20 15:36:26
465
原创 抽丝剥茧看路由_angular1.X---1
该文章分为两部分:angular-route和原生JS写路由 在学习前端框架时, 每个同学不可避免的会接触到路由(route)…而本篇文章则以angular1.X为例, 向各位同学逐步 拆开路由(route)的神秘面纱… 首先我们看一下ng正常的路由配置, 如下:index.html<!DOCTYPE html><html lang="en" ng-app="myApp"><head>
2017-06-20 13:55:55
923
原创 JS事件捕获与冒泡
先解释下事件捕获和冒泡: 捕获—事件从最上一级标签开始往下查找，直到捕获到事件目标(target) 冒泡—事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。在嵌套很多层的情况下, 如下:html<div class="div1" onclick="outer();"> <div class="div2" onclick="middle();"> <di
2017-06-15 15:53:06
459
翻译 翻译--https://github.com/ruanyf/react-demos/blob/master/README.md
此文章为阮一峰大神写的关于react的DEMOreact的DEMO, 建议看英文版 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 此项目是一个针对reactJS 简单DEMO的集合. 有道是大繁若简, 在没有样式的前提下, DEMO被写出来; 同样, 你会发现, 在跟
2017-06-05 17:50:43
4048
原创 PHP与微信小程序的纠葛---3
…续前缘 其实本篇跟小程序没多大关系了, 蹭一波热度 由于PHP中的mysql组件快要被移除了, 所以就换成了PDO, 本文主要理解PDO一些常见执行语句的结果.// 连接数据库$dsn = 'mysql:dbname=dbname;host=127.0.0.1;charset=utf8';$user = 'user';$password = 'password';$dbh = new
2017-05-25 01:37:10
479
原创 PHP与微信小程序的纠葛---2
…续前缘 上文说到服务器和数据库相关工作 , 再说下数据库的连接 $dsn = 'mysql:dbname=dbname;host=127.0.0.1;charset=utf8'; $user = username; $password = pwd; $dbh = new PDO($dsn, $user, $password);上述就是数据库的连接操作. 因为我是一个
2017-05-19 15:50:45
628
原创 PHP与微信小程序的纠葛---1
最近和朋友合伙做了一个小程序, 朋友写前端, 我写后台. 都是新手, 所以坑采的有点深, 所幸最后都爬出来了. 后台是PHP写的. 下面开始是正文.后台操作无非就是增删改查, 再高深一点就是写文件, 数据分析. 我们做的仅仅是最初的增删改查. 首先, 你得到腾讯云上面买一个服务器, 貌似阿里云不行. 再部署后台相关环境, 腾讯云上面有个一键打包安装的, 最好自己到服务器上自己安装. 原因之后会解
2017-05-18 17:13:37
842
原创 de/encodeURI(Component)--"http%3A%2F%2Fwww.baidu.com%2Fasd%3Fa%3D123"
对于”http%3A%2F%2Fwww.baidu.com%2Fasd%3Fa%3D123”这种特殊字符被转义成16进制的字符串, 虽然知道”%3A”表示冒号(百分号”%”是转义符, 相当于正则当中的反斜杠”/”), 但是很少人会采用这种匹配字符串的方法来强行转义, 因为这种匹配不仅不准确, 而且效率很低. 对于前端的”首屏加载”而言, 实在过于痛苦. 而JS当中早就有了这种方法, encode
2017-04-25 11:28:16
50301
原创 笔记---jQuery
犹记得高中时的语文, 说是读书, 不妨说成是读心–作者的心情。肄业后, 本以为此后不再分析作者的想法; 凡事就怕一个但是, 如今看源码, 仍然要分析作者的想法。 —————————————————————————————————————merge: function(a, b) { for(var c = +b.length, d = 0, e = a.length; c
2017-04-21 11:29:32
364
原创 跨域解决方案之三---postMessage
…….续前缘前文说到的jsonp, 正在向前端靠拢. 而本文所说的postMessage, 跟后台已经没有任何关系了. 因为用的是HTML5 新API: canvas, video, audio, history, postMessage. 百度百科对它的解释如下: PostMessage是Windows API(应用程序接口) 中的一个常用函数，用于将一条消息放入到消息队列中。 战前准备: 两
2017-03-27 16:03:05
470
原创 跨域解决方案之二---jsonp
…….续前缘……. 前文讲到, 用类似爬虫的方式抓取数据; 本篇则讲解使用jsonp解决同源问题. jsonp原理如下: 利用script标签的跨域性, 在地址后面携带参数, 被请求方则根据参数来处理请求. 需要后台和前端一起合作才能完成. 战前准备工作: 两个**非同源**webSite(必须). 楼主用的是本机(localhost)模拟非同源网站, 一个是wamp(localhost
2017-03-27 15:07:29
852
原创 跨域解决方案
说到跨域,就必须要知道同源策略.以下是来自百度百科的解释:同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响; 可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。 同源意味着域名, 端口, 协议必须保持完全一致, 否则无法通信. 好了, 问题来了. web前端愈加复杂的今天
2017-03-27 11:17:34
693
1
原创 ES5中, 函数未注册(Uncaught ReferenceError: fn is not defined)
正常浏览器环境下, 如果在不加载babel等转义文件的前提下, 开发者如果在准备就绪函数中(如:onload() 或者 $.jQuery.ready())注册函数(fn), 那么调用的时候可能找不到(实例化对象除外).原因就在于, 事件和函数的绑定关系. DOM渲染完毕之前, JS的onload和ready方法肯定没有运行; 但是渲染的时候就已经在JS中寻找已经注册过的函数,去和DOM绑定在一起.
2017-03-24 11:55:14
1856
原创 初探angular之[$injector:modulerr]
学习angular的人, 想必对这个错误—$injector:modulerr都不陌生. 大多数遇到的错误生成原因, 应该是ui.route.js引入错误.但是其实有另一个原因也会导致这个错误.如下:window.onload = function(){ var app = angular.module('myApp', []); a
2016-12-29 17:27:37
14000
原创 PHP传给前端的值有大量html代码
话不多说, 直接上代码<br /><font size='1'><table class='xdebug-error xe-deprecated' dir='ltr' border='1' cellspacing='0' cellpadding='1'><tr><th align='left' bgcolor='#f57900' colspan="5"><span style='backgrou
2016-12-29 10:29:48
3365
2
原创 让弹性盒模型失效
话不多说, 直接上代码(本文中所有代码只能在webkit内核运行)CSS:.parent{display:-webkit-box;width:800px;}.child-left{width:200px;}.child-right{-webkit-box-flex:1;}html:<div class='parent'> <div class='child-left'>左子节点</d
2016-12-19 11:15:08
1342
1
原创 fastClick入坑爬坑详解
fastClick入坑爬坑详解公司之前要上线一个移动支付项目,主要页面如下: 问题来了,移动端click事件一般至少有300ms的延迟,如果输入频率不高,完全可以忽视这个问题; 但是,变态的测试要求跟原生效果一样(当时我心里是懵逼的,因为完全没搞过啊). 老板逼得紧,强行上呗(公司就我一个前端).
2016-12-16 15:33:02
3891
转载 欢迎使用CSDN-markdown编辑器
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
2016-12-16 11:42:39
225
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人