
前端工程师学习笔记
文章平均质量分 57
唐小狼
“人们称赞我是最勤奋的人,如果思考也算劳动的话,或许的确如此,因为一天之中从睁开眼,我几乎一直在思考。但是,如果工作被认为是在特定时间,根据狭隘标准从事某些特定活动的话,那么或许我是最懒惰的家伙。”
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
JavaScript——Array——reduce()方法应用
问题:从某数据库接口得到如下值:{ rows: [ ["Lisa", 16, "Female", "2000-12-01"], ["Bob", 22, "Male", "1996-01-21"] ], metaData: [ {name: "name", note: ''}, {name: "age", note: ''}, {name: "gender", no原创 2016-12-30 15:54:18 · 2116 阅读 · 0 评论 -
React与Redux学习总结(一)
React与Redux学习总结: 主要集中在容易困扰人的数据流与组件状态的关系与变化原创 2017-04-15 18:56:23 · 733 阅读 · 0 评论 -
ES6 学习笔记 Class
1. 子类必须在 constructor 方法中调用 super 方法, 否则新建实例时会报错。这是因为子类没有自己的 this 对象, 而是继承了父类的 this 对象, 然后对其进行加工。 如果不调用 super 方法, 子类就得不到 this 对象。2. this 指向的固定化,并不是因为箭头函数内部有绑定 this 的机制,实际原因是箭头函数根本没有自己的 this, 导致内部的原创 2017-05-08 16:17:22 · 407 阅读 · 0 评论 -
Promise 的含义(ES6 学习札记)
Promisse原创 2017-06-01 14:11:46 · 993 阅读 · 0 评论 -
React渲染动态HTML——dangerouslySetInnerHTML
dangerouslySetInnerHTML原创 2017-06-01 14:29:48 · 7508 阅读 · 0 评论 -
你不知道的JS——札记(二)
1. 一个常见的错误论断是“ JavaScript 中的一切都是对象”2. instanceofThe instanceof operator tests whether an object in its prototype chain has the prototype property of a constructor.3. 在必要的时候语言会自动地将 "strin原创 2017-06-07 14:11:23 · 377 阅读 · 0 评论 -
你不知道的JS——札记(一)
读书札记原创 2017-06-06 15:26:13 · 457 阅读 · 0 评论 -
固定宽度中,展示图片和旋转图片展示的实现姿势
。。。。待整理原创 2017-07-06 17:35:34 · 315 阅读 · 0 评论 -
Generator 函数基础(一) (The Basics of ES6 Generators)
原文地址:The Basics Of ES6 Generators作者简介:Kyle Simpson is an Open Web Evangelist from Austin, TX, passionate about all things JavaScript. He's an author, workshop trainer, tech speaker, and OSS contri翻译 2017-07-31 19:05:14 · 892 阅读 · 0 评论 -
IE 、Edge、360兼容模式 浏览器背景抖动处理
问题原因:出现这种情况原因是这几个浏览器对于滚动处理方面有 bug,滚动的执行频率和浏览器的渲染频率不搭配,导致 fixed 背景图先随屏幕滚动到上方,然后又从新渲染回来。这样就出现了上下抖动的情况。解决办法:if(navigator.userAgent.match(/Trident\/7\./)) { document.body.addEventListener && doc原创 2017-07-26 18:13:49 · 3180 阅读 · 2 评论 -
深入探讨JavaScript的执行环境和栈
原文网址:http://davidshariff.com/blog/what-is-the-execution-context-in-javascript/这篇文章我将会深入地讨论JavaScript中最根本的一部分——Execution Context(执行上下文)。在文章结束的时候,你应该对解释器的工作原理有一个比较清晰的理解,对于为什么会存在‘变量提升’,它们的值又是如何被真正确定的翻译 2016-08-01 17:02:46 · 2297 阅读 · 2 评论 -
标签解析和JavaScript的闭包
原文地址:http://davidshariff.com/blog/javascript-scope-chain-and-closures/#more-271从我的上篇文章中,我们知道每个函数都会有一个关联的execution context,execution context包含一个变量对象variable object[VO]。变量对象由函数的局部变量、内部函数和参数声明组成。翻译 2016-08-04 15:42:43 · 430 阅读 · 0 评论 -
总结 input propertychange 监听输入框
常常会有输入框检查的需求,最常见的就是即时搜索。即时搜索的三个方案:(1) change事件—触发该事件必须满足两个条件:当前对象属性改变,并且是由键盘或鼠标事件激发的(脚步触发无效)当前对象失去焦点(onblur)(2) keypress 就是只能监听键盘事件,鼠标复制粘贴操作无能为力(3) propertychange(ie) 和 input 事件i原创 2017-02-04 16:12:30 · 9352 阅读 · 0 评论 -
vagrant box配置本地开发环境以及常见错误解决方案
这里有一个参考链接(http://jingyan.baidu.com/article/642c9d34e15cdd644b46f74b.html),当然也可以按照下面的步骤来操作:一:准备各种材料了(1)VirtualBox (https://www.virtualbox.org/)(2)vagrant (https://www.vagrantup.com/downloads.原创 2016-10-13 11:07:01 · 20090 阅读 · 2 评论 -
学习webpack的好文档
1.http://webpack.github.io/docs/configuration.html#output2.http://webpackdoc.com/原创 2017-02-06 16:38:33 · 677 阅读 · 0 评论 -
从 URL 输入到页面展现发生了什么?(What really happens when you navigate to a URL)
写在前面的话,这是一篇译文,阅读资料时顺带整理翻译的,原文地址:http://igoro.com/archive/what-really-happens-when-you-navigate-to-a-url/作为一个程序员,你应该对web应用是如何工作的有一个高水平的认识,它工作过程都包含了哪些技术:浏览器、HTTP、HTML、web server、 request handlers等翻译 2017-01-22 18:39:43 · 2432 阅读 · 1 评论 -
React-Component-Keys
React渲染列表时,会遇到这样的警告:Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Game`. See https://fb.me/react-warning-keys for more information.下原创 2017-02-13 15:55:02 · 1279 阅读 · 0 评论 -
读书笔记——You Don't Know Js Up & Going
1. JavaScript has typed values, not typed variables.2. The proper way to characterize them is that == checks for value equality with coercion allowed, and === checks for value equality without all原创 2017-03-28 14:39:44 · 355 阅读 · 0 评论 -
canvas烟雾效果学习
一、学习背景与效果前些天翻大神blog,看到了张鑫旭大神写的一篇《canvas图形绘制之星空、噪点与烟雾效果》,深受启发。详细了研究了一下烟雾效果的代码,效果如下: 动态效果请点击。(!-- 去掉了原文中的背景图 --!)效果图: 代码如下:html>head> title>canvas实现的烟雾缭绕效果title> style> .smoke原创 2017-03-24 11:57:13 · 4737 阅读 · 4 评论 -
范畴论——函数式编程
函数式编程学习总结,慢慢更新!原创 2017-04-11 16:49:58 · 1027 阅读 · 0 评论 -
学习NodeJs一讲——模块
一、写在前面的讨论:关于NodeJs是单线程,不能充分利用CPU的说法(1) Nodejs 所谓的单线程是指你写的 JS 代码是单线程,事件驱动跑的是 C++ 代码,背后的原生模块及其IO操作,C++ 扩展模块都是运行在线程池当中。(2) NodeJs 极大地节省了线程资源和内存资源,从而也大幅降低了 CPU 上下文切换的次数。是并发编程中充分利用CPU性能的典范。(考虑到 I原创 2017-02-07 17:18:55 · 1746 阅读 · 0 评论 -
Redux 生产实践使用注意事项
背景:在我们使用 React 时,通常都是和 Redux 配合使用,Redux 管理数据状态,去控制 DOM 的渲染与更新。在使用 Redux 的时候,有一些注意的地方,否则可能出现意料之外的情况,却不知道原因是什么,其中有一点就是下面这个例子:/** * action-reducer.js * @param {*} uid */const getUid = (uid)原创 2017-07-28 15:13:45 · 496 阅读 · 0 评论 -
深入 Generator 函数(三) (Going Async With ES6 Generators)
Going Async With ES6 Generators作者简介:Kyle Simpson is an Open Web Evangelist from Austin, TX, passionate about all things JavaScript. He's an author, workshop trainer, tech speaker, and OSS contribu翻译 2017-08-06 22:44:36 · 544 阅读 · 0 评论 -
小程序系列——始
第一个问题:什么是小程序从关注的角度不同,可能理解得出的结论也不尽相同。例如:作为一个产品经理,可能更关注小程序的亮点,基于此亮点我们能做出什么有受众群体的微app。比如,小程序是以微信这个超级 app 为宿主的,微信本身的使用群体与便捷性可能会导致小程序的使用场景最好是挥之即来,用完即去的情况,等等。但是,从开发的角度来看,我们可能更关心的是技术实现。更关注我们用这套框架,可使用的能力有哪些,存原创 2017-11-30 11:36:54 · 2169 阅读 · 3 评论 -
小程序系列——进
小程序系列——进这是小程序进行曲的第二篇,主要会集中在 api 的讨论与功能实现上面。可能会分多个篇幅来进行分享,每个篇幅选择几个功能主题来分析,每个功能主题又会发散出多个 api 的应用与相关注意事项。这个曲目看完,对于基础的小程序需求,我们应该都能 hold 一下了。OK,Battle Symphony ~ ~ ~转发/分享在小程序中的转发或者分享(下文统一使用转发),我们根据转发内容的不同可原创 2017-12-08 12:08:49 · 2151 阅读 · 0 评论 -
小程序系列——缠
这一篇文章将是小程序系列的第三篇文章,我们会更加的篇实践。上一篇文章最后介绍的知识点是模板,这个知识点很重要,因为它对于功能模块的封装,进行模块化开发,启着关键的作用。所以,这一篇文章第一个知识点还是模板使用,我们使用模板,实践封装一个小程序 toast。模板实践开发我们要利用模板,开发一个小程序的 toast。因为,原生 api 提供的 toast 对于类型、字数等方面都有很大的局限性。所以,我原创 2018-01-15 20:11:41 · 647 阅读 · 0 评论 -
「初探」小程序插件功能
「初探」小程序插件功能3月13日,小程序发布了新功能—— 小程序插件。即,在小程序基础库 1.9.6 版本上,允许开发者开发插件,同时将插件提供给其它小程序使用。微信小程序在构建自己生态的征程上,又迈进了一步~~最开始我以为微信小程序的插件会和 npm 包类似,我们可以封装各种各样便捷的功能,提供给他人使用。但是,通过实践和文档的整理阅读,发现小程序的插件与传统意义上的插件还是有很大差别的。小程序...原创 2018-03-28 17:39:36 · 16637 阅读 · 0 评论 -
git 基本原理 与 常见case 处理方法
git 基本原理 与 常见case 处理方法现在的项目开发中,基本都是多人参与,这就需要版本控制系统来管理我们的项目了。和大多数事物一样,git 诞生于一个极富纷争和大举创新的年代。0. 简史Linux 内核开源项目有着为数众广的参与者。 绝大多数的 Linux 内核维护工作都花在了提交补丁和保存归档的繁琐事务上(1991-2002年间)。 到 2002 年,整个项目组开始启用一个专有的分布式版本...原创 2018-04-13 15:12:16 · 902 阅读 · 0 评论 -
CSS3 线性渐变循环动画
CSS3 线性渐变循环动画最近开发,遇到一个首屏加载优化的情况,需要如下图的线性渐变动画:网页动态效果(http://htmlpreview.github.io/?https://github.com/tangxiaolang101/imageView/blob/master/gradientAnimation.html)代码如下:1.// css file2..loading-list-wra...原创 2018-05-09 17:30:47 · 5868 阅读 · 0 评论 -
那些我们常见的 UML 图
那些我们常见的 UML 图统一建模语言(UML)是 COMET 方法使用的表示法。是有 OMG 推广维护的一个标准。我在日常软件开发中,经常会用到的图有:用例图、类图、活动图、对象图、通信图、顺序图(时序图)、状态机图等等。当然,日常码的话,排名前三的三种 UML 图应该就是:活动图、类图、用例图和顺序图了。1. 用例建模用例建模是一种描述系统的功能性需求的方法。用例模型 用参与者和用例描述系统的...原创 2018-06-13 17:45:03 · 2646 阅读 · 0 评论 -
git 基本原理与常见 case 处理(二)
内部原理本质:Git 是一个内容寻址(content-addressable)文件系统,并在此之上提供了一个版本控制系统的用户界面。 核心的三个功能模块: (1)内容寻址的文件系统——>Git 的核心部分是键值对数据库。 (2)传输机制 (3)版本管理任务下面我们通过实际操作,一步步认清 git 内部的工作原理。git 核心文件首先,我们 git init test创建一...原创 2018-08-22 16:50:09 · 598 阅读 · 0 评论 -
与端共舞
随着智能手机的普及,移动网络的提速升级,越来越多的场景我们都在使用移动app了,我们早已经进入全面移动的时代。app 的迭代发展必然会越来越快,而且需要更加灵活。这就促使了 Native App 嵌入 H5 页面模式出现,今天聊得就是我们的 H5 如何能够和 Native App 协同共赢,提供更好的服务的。H5 与 Native App 交互可以大致分为端外和端内两个场景,这两个场景的解决...原创 2019-04-08 17:11:33 · 613 阅读 · 0 评论 -
如何恰当地使用 React 生命周期方法
对于 React 生命周期方法,如果你不清楚什么情况下该使用哪一个方法,可能会感到困扰。今天,我将向你展示存在哪些生命周期方法以及该如何使用它们。介绍React 组件拥有几个“生命周期方法”(lifecycle methods),它们允许我们在特定的时间点执行一些 actions(例如:从 server 请求数据)。当我开始学习 React 时,我发现很难弄清楚我应该为某些操作翻译 2017-09-28 15:22:18 · 1067 阅读 · 0 评论 -
深入 Generator 函数(二) (Diving Deeper With ES6 Generators)
Diving Deeper With ES6 Generators作者简介:Kyle Simpson is an Open Web Evangelist from Austin, TX, passionate about all things JavaScript. He's an author, workshop trainer, tech speaker, and OSS contri翻译 2017-08-02 00:00:33 · 602 阅读 · 0 评论 -
CSRF 攻击的应对之道
CSRF 背景与介绍CSRF(Cross Site Request Forgery, 跨站域请求伪造)是一种网络的攻击方式,它在 2007 年曾被列为互联网 20 大安全隐患之一。其他安全隐患,比如 SQL 脚本注入,跨站域脚本攻击等在近年来已经逐渐为众人熟知,很多网站也都针对他们进行了防御。然而,对于大多数人来说,CSRF 却依然是一个陌生的概念。即便是大名鼎鼎的 Gmail, 在 20转载 2017-08-14 18:30:34 · 385 阅读 · 0 评论 -
HTTP Referer 的故事
什么是HTTP Referer简言之,HTTP Referer是header的一部分,当浏览器向web服务器发送请求的时候,一般会带上Referer,告诉服务器我是从哪个页面链接过来的,服务器籍此可以获得一些信息用于处理。比如从我主页上链接到一个朋友那里,他的服务器就能够从HTTP Referer中统计出每天有多少用户点击我主页上的链接访问他的网站。Referer其实应该是英文单词转载 2017-08-14 18:34:45 · 702 阅读 · 0 评论 -
super() OR super(props) -- What's The Difference
Questions:When is it important to pass props to super(), and why ?class MyComponent extends React.Component { constructor(props) { super(); // or super(props) ? }}Answer :Th原创 2017-08-15 14:58:31 · 461 阅读 · 0 评论 -
用Javascript获取页面元素的位置
用Javascript获取页面元素的位置 学习笔记整理网页概念网页大小 —— 通常情况由内容和 CSS 样式表决定。浏览器窗口(viewport)大小 —— 在浏览器窗口中看到的网页面积显然,如果网页的内容能够在浏览器窗口中全部显示(也就是不出现滚动条),那么网页的大小和浏览器窗口的大小是相等的。如果不能全部显示,则滚动浏览器窗口,可以显示出网页的各个部分。原创 2017-08-16 00:26:03 · 745 阅读 · 0 评论 -
模块固顶和固底的一种实现方法—Api(Element.getBoundClientRect())
页面固顶和固底的一种实现方式引:在 pc web 开发的过程中,经常会遇到一些模块固定的需求,接下来介绍一种固定的方式,通过 Element.getBoundClientRect() Api 来实现。开发过程中需要获取页面元素的位置,可以参考 用Javascript获取页面元素的位置 这篇文章。具体的效果 Demo,可以查看这个 git 仓库。效果展示 看这里。原创 2017-08-31 15:24:21 · 1383 阅读 · 0 评论 -
水平垂直居中固定比例 Div
水平垂直居中固定比例 Div场景:div 宽度百分比,高宽固定比例,水平垂直居中展示对于这种情况肯定会有多种实现,有的可能用 js 去计算设计,有的可能直接用 css 实现,而 css 实现又会有多种实现方式。下面主要讨论的是用 css 绝对定位实现的一种方式。对于本文来说,这种效果的实现是次要的,我们主要来讨论一下它里面所涉及到的知识点,细细分析下来,是会有很多值得注意的知识原创 2017-08-31 19:14:25 · 953 阅读 · 0 评论