分类目录归档：WEB开发

2018
08-30

漂在旧金山

旧金山是美国房价最高的城市，因为它就在硅谷旁边，有大量的科技公司。每年，无数年轻人涌向那里，寻找自己的梦想，结果形成了一个类似"北漂"的特殊群体。昨天，我读到美国Salon杂志的一篇文章，关于旧金山普通程序员的生活。读完很有感触，就把它翻译了出来。硅谷不仅仅是光鲜亮丽的科技巨头，更多的是努力奋斗的普通程序员。================================漂在旧金山原载salon.com译者... 继续阅读 >
2018
08-28

JavaScript 引擎基础：原型优化

本文就所有JavaScript引擎中常见的一些关键基础内容进行了介绍——这不仅仅局限于V8引擎。作为一名JavaScript开发者，深入了解JavaScript引擎是如何工作的将有助于你了解自己所写代码的性能特征。在前一篇文章中，我们讨论了JavaScript引擎是如何通过Shapes和InlineCaches来优化对象与数组的访问的。本文将介绍优化流程中的权衡与取舍，并对引擎在优化原型属性访问方面的工作进行介绍。原文JavaScript... 继续阅读 >
2018
08-28

小程序开发实践总结 - WEB前端

从微信发布小程序以来，各大公司纷纷跟进都想从微信这个流量池里捞一杯羹。我司也不例外，我们整个前端团队这半年来基本上都是在开发小程序。前前后后也开发了四五个小程序了。总觉得要留下点什么，既是记录那些年我们踩过的坑，也是希望大家别再掉坑。那些年我们踩过的坑css样式不能引用本地图片资源，只能引用线上资源( background-image )，引用本地图片资源只能用 <image> 标签。{{}... 继续阅读 >
2018
08-21

JS传参技巧总结

1.隐式创建html标签<inputtype="hidden"name="tc_id"value="{{tc_id}}">这种方法一般配合ajax，上面的value使用了模板引擎2.window['data']window['name']="thewindowobject";3.使用localStorage，cookie等存储window.localStorage.setItem("name","xiaoyueyue");window.localStorage.getItem("name")特点：1、localStorage是持久存储，不主动删除一直存在sessionStorage是临时存储,关闭浏览... 继续阅读 >
2018
08-08

同样是晶体管，为什么寄存器比内存快呢？

计算机的存储层次（memoryhierarchy）之中，寄存器（register）最快，内存其次，最慢的是硬盘。同样都是晶体管存储设备，为什么寄存器比内存快呢？MikeAsh写了一篇很好的解释，非常通俗地回答了这个问题，有助于加深对硬件的理解。下面就是我的简单翻译。原因一：距离不同距离不是主要因素，但是最好懂，所以放在最前面说。内存离CPU比较远，所以要耗费更长的时间读取。以3GHz的CPU为例，电流每... 继续阅读 >
2018
08-08

SVG 图像入门教程

一、概述SVG是一种基于XML语法的图像格式，全称是可缩放矢量图（ScalableVectorGraphics）。其他图像格式都是基于像素处理的，SVG则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。SVG文件可以直接插入网页，成为DOM的一部分，然后用JavaScript和CSS进行操作。<!DOCTYPEhtml><html><head></head><body><svgid="mysvg"xmlns="http://www.w3.org/2000/sv... 继续阅读 >
2018
08-08

网上JS正则基础教程没有涉及的一些知识

正则起源最近看完了《精通正则表达式》，收获颇丰，略过了一些晦涩难懂的理论部分，主要看了实战和教程部分。下面引用一下百度百科里的内容。正则表达式的“鼻祖”或许可一直追溯到科学家对人类神经系统工作原理的早期研究。美国新泽西州的WarrenMcCulloch和出生在美国底特律的WalterPitts这两位神经生理方面的科学家，研究出了一种用数学方式来描述神经网络的新方法，他们创造性地将神经系统中的神经... 继续阅读 >
2018
08-08

重读 ES6 - async+await 同步/异步方案

异步编程一直是JavaScript编程的重大事项。关于异步方案，ES6先是出现了基于状态管理的Promise，然后出现了Generator函数+co函数，紧接着又出现了ES7的async+await方案。本文力求以最简明的方式来疏通async+await。异步编程的几个场景先从一个常见问题开始：一个for循环中，如何异步的打印迭代顺序？我们很容易想到用闭包，或者ES6规定的let块级作用域来回答这个问题。for(let... 继续阅读 >
2018
08-08

javascript引擎工作原理

1.什么是JavaScript解析引擎？简单地说，JavaScript解析引擎就是能够“读懂”JavaScript代码，并准确地给出代码运行结果的一段程序。比方说，当你写了 vara=1+1; 这样一段代码，JavaScript引擎做的事情就是看懂（解析）你这段代码，并且将a的值变为2。学过编译原理的人都知道，对于静态语言来说（如Java、C++、C），处理上述这些事情的叫编译器（Compiler），相应地对于JavaScript这样的... 继续阅读 >
2018
08-08

CSS 的空格处理

一、空格规则HTML代码的空格通常会被浏览器忽略。<p>◡◡hello◡◡world◡◡</p>上面是一行HTML代码，文字的前部、内部和后部各有两个空格。为了便于识别，这里使用半圆形符号◡表示空格。浏览器的输出结果如下。helloworld可以看到，文字的前部和后部的空格都会忽略，内部的连续空格只会算作一个。这就是浏览器处理空格的基本规则。如果希望空格原样输出，可以使用<pre>标签。<pre>◡◡hello◡◡world◡◡</pre>另... 继续阅读 >
2018
07-10

Web Worker 使用教程

一、概述JavaScript语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。随着电脑计算能力的增强，尤其是多核CPU的出现，单线程带来很大的不便，无法充分发挥计算机的计算能力。WebWorker的作用，就是为JavaScript创造多线程环境，允许主线程创建Worker线程，将一些任务分配给后者运行。在主线程运行的同时，Worker线程在后台运... 继续阅读 >
2018
06-20

JavaScript 的 this 原理

一、问题的由来学懂JavaScript语言，一个标志就是理解下面两种写法，可能有不一样的结果。varobj={foo:function(){}};varfoo=obj.foo;//写法一obj.foo()//写法二foo()上面代码中，虽然obj.foo和foo指向同一个函数，但是执行结果可能不一样。请看下面的例子。varobj={foo:function(){console.log(this.bar)},bar:1};varfoo=obj.foo;varbar=2;obj.foo()//1foo()//2这种差异的原因，就在于... 继续阅读 >
2018
06-20

深入理解js的同步与异步

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器... 继续阅读 >
2018
05-30

2018年中高级前端面试题目小结

前言关于前端面试，及面试题目，我之前有很多文章总结过，可以在右侧搜索面试，进行查找。其实面试中可以问的问题很多，最近几年，我也面试过很多工作2-4年的前端，我一般会抓住他们做的项目，进行更详细的追问。所以，初中级前端面试的时候，除了掌握基础知识之外，项目中用到的技术要理清楚，假如你项目中用到的技术，问的时候却一问三不知，那么，基本上就会pass掉了。针对比较资深或者高级的前端面试，可能和初中级面试... 继续阅读 >
2018
05-28

系统认识JavaScript正则表达式

一、正则表达式简介1、什么是正则表达式正则表达式，又称规则表达式。（英语：RegularExpression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。简单的说，就是按照某种规则去匹配符合条件的字符串。2、可视化正则表达式工具Regexper：https://regexper.com/二、RegExp对象实例化RegExp的两种方式。两种方式定义RegExp对象。1、字面量le... 继续阅读 >
2018
05-16

[译]深入ES6之箭头函数

箭头一族缺少的家庭成员在JavaScript出现以来，箭头（Arrow）就一直是其语法的一部分。一般来说，JavaScript教程的第一篇就会讲如何在HTML中插入箭头括号来作为注释，这会阻止不支持JS的浏览器错误的将你的JS代码作为文字展现出来，比如这个：<scriptlanguage="javascript"><!--document.bgColor="brown";//red//--></script>老旧的浏览器只会看到两个不支持的tag以及一个注释，而现代... 继续阅读 >
2018
04-30

数组的遍历你都会用了，那Promise版本的呢

这里指的遍历方法包括：map、reduce、reduceRight、forEach、filter、some、every。因为最近要进行了一些数据汇总，node版本已经是8.11.1了，所以直接写了个async/await的脚本。但是在对数组进行一些遍历操作时，发现有些遍历方法对Promise的反馈并不是我们想要的结果。当然，有些严格来讲并不能算是遍历，比如说some，every这些的。但确实，这些都会根据我们数组的元素来进行多次的调用传入的回调。这些方法都是... 继续阅读 >
2018
04-30

为什么程序员们愿意在GitHub上开源自己的成果?

从2008年4月10日正式上线到今天，GitHub已经完成了它的第一个十年，正式进入下一个十年。ChrisDiBona（Google的开源代码经理）认为“Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐！抛开“代码闭源是否就能赚很多钱”这个话题先不谈，我们直接总结一下程序员愿意在GitHub公开自己的源代码的几点主要原因：1... 继续阅读 >
2018
04-25

一个HTML元素和五个CSS属性的魔力

假设我告诉你，我可以使用一个HTML元素和五个CSS属性实现下图的效果。而且这个效果没有使用任何一行SVG代码，也没有使用图像（只是在html元素上使用了background设置了一个背景图片，只是为了表明这个元素有一些透明的部分），同样也没有使用JavaScript代码。你一定会觉得很神奇，对吧！有好奇之心，对于我们做前端的同学而言，应该一直都有，只有这样才能做出很多我们一直以为实现不了的效果，比如接下来要介绍的内容。这... 继续阅读 >
2018
04-22

Vue 2.0学习笔记：Vue的render函数

前几天想学学Vue中怎么编写可复用的组件，提到要对Vue的render函数有所了解。可仔细一想，对于Vue的render函数自己只是看了官方的一些介绍，并未深入一点去了解这方面的知识。为了更好的学习后续的知识，又折回来了解Vue中的render函数，这一切主要都是为了后续能更好的学习Vue的知识。回忆Vue的一些基本概念今天我们学习的目的是了解和学习Vue的render函数。如果想要更好的学习Vue的render函数相关的知识，... 继续阅读 >
2018
04-16

移动 Web入门前奏

从最早的IE6时代到现在的HTML5时代，前端的主战场也从PC端转移到了移动端。几年前前端工程师还在为固定布局和流动布局打伤脑筋，而在如今的移动Web上我们可以使用弹性布局轻易实现以前在Pc端的复杂布局，甚至更强大的网格布局也在Css下一版本的规范。移动web在将来的一段时间仍然是前端工程师的主战场，本文将阐述一些移动web入门前需要了解的知识点。像素像素是网页布局的基础，通常我们是这样理解橡树的的：一个... 继续阅读 >
2018
04-11

使用让 JavaScript 安全且并发的 Web Workers

WebWorkers提供了一种在浏览器单线程执行外运行JS代码的方式。单线程处理了包括页面内容展示，通过键盘、鼠标点击和其他装置的用户交互，以及对于AJAX请求响应的一些请求。事件处理和AJAX请求是异步发生的，可以作为一种通用浏览器展示代码路径之外的运行代码的方式，但是它们仍然在这一单线程内运行，并且必须很快完成。否则，浏览器中的交互会失去作用。WebWorkers允许在一个单独的线程运行JS代码，... 继续阅读 >
2018
04-03

送给 ES6 开发者的7个 hack

关注原来的JavaScripthacks，上面有一些新的好东西。2018使用JavaScript写代码真的又变得有意思了！Hack#1—交换变量使用数组结构来交换值leta='world',b='hello'[a,b]=[b,a]console.log(a)//->helloconsole.log(b)//->world//是的，很神奇Hack#2—使用解构的Async/Await再说一遍，数组结构真的很棒。通过和async/await以及promise结合可以让复杂的流程变得简单... 继续阅读 >
2018
04-03

Vue.js最佳实践（五招让你成为Vue.js大师）

对大部分人来说，掌握Vue.js基本的几个API后就已经能够正常地开发前端网站。但如果你想更加高效地使用Vue来开发，成为Vue.js大师，那下面我要传授的这五招你一定得认真学习一下了。第一招：化繁为简的Watchers场景还原：created(){this.fetchPostList()},watch:{searchInputValue(){this.fetchPostList()}}组件创建的时候我们获取一次列表，同时监听input框，每当发生变化的时候重新获取... 继续阅读 >