分类：JavaScript开发

2018
01-23

从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理

前言见解有限，如有描述不当之处，请帮忙及时指出，如有错误，会及时修正。———-超长文+多图预警，需要花费不少时间。———-如果看完本文后，还对进程线程傻傻分不清，不清楚浏览器多进程、浏览器内核多线程、JS单线程、JS运行机制的区别。那么请回复我，一定是我写的还不够清晰，我来改。。。———-正文开始———-最近发现有不少介绍JS单线程运行机制的文章，但是发现很多都仅仅是介绍某一部分的知识... 继续阅读 >
2018
01-19

CSS3系列-css3之线性渐变初探

CSS3系列-css3之线性渐变初探1.写在前面入行前端一年多的时间，想提高自己的css技术水平，于是在网上看了些关于css的书籍，想买几本比较好的css书籍啃啃，找来找去，终于找到了《CSS揭秘》这本书。入手这本书后，从开始看到后面，发现书中的很多效果都可以使用渐变来实现，于是，我对渐变产生了兴趣，决定好好掌握css3中的这个属性。结合《CSS揭秘》、张鑫旭大神的深入理解CSS3gradient斜向线性渐变和CSS3radi... 继续阅读 >
2018
01-16

JS设计模式入门和框架中的实践

在编写JS代码的过程中，运用一定的设计模式可以让我们的代码更加优雅、灵活。下面笔者就结合诸如redux的subscribe、ES6的class、vue里面的$dispatch、jquery里面的on/off来给大家简单介绍下设计模式在这些库、语法和框架中的使用。设计模式解决的问题设计模式并不是很玄乎的知识，很多同学在编写JS代码的时候已经在不经意间用了不少设计模式了。笔者认为把设计模式单独抽象出来探讨，就和算法中抽象出来冒泡、... 继续阅读 >
2017
12-28

深入浅出 JS 异步处理技术方案

为什么要异步"当我们在星巴克买咖啡时，假设有100个人在排队，也许咖啡的下单只要10S，但是咖啡的制作到客人领取咖啡要1000S。如果在同步的场景下，第一个客人下单到领取完咖啡要1010S才能轮到下一个客人，这在效率（某些场景）上来说会比较低下。如果我们异步处理这个流程，客人下单10S拿到凭证，客人就可以去做别的事情，并且10S后下一个客人可以继续下单，并不阻碍流程。反而可以通过凭证，让客人拿到自己的咖啡，也许时... 继续阅读 >
2017
12-20

老司机常用的几个JavaScript调试技巧

1.debugger除了console.log,debugger是我们最喜欢、快速且肮脏的调试工具。执行代码后，Chrome会在执行时自动停止。你甚至可以把它封装成条件，只在需要时才运行。if(thisThing){debugger;}2.用表格显示对象有时，有一组复杂的对象要查看。可以通过console.log查看并滚动浏览，亦或者使用console.table展开，更容易看到正在处理的内容！varanimals=[{animal:'Horse',name:'Henry',ag... 继续阅读 >
2017
12-17

Github分享：精心收集的48个JavaScript代码片段，仅需30秒就可理解！

该项目来自于Github用户Chalarangelo（文末有项目完整地址，原版为英文），目前已在Github上获得了3000多Star，精心收集了多达48个有用的JavaScript代码片段，该用户的代码可以让程序员在30秒甚至更少的时间内理解这些经常用到的基础算法，来看看这些JavaScript代码都传达出了什么吧！Anagramsofstring（带有重复项）使用递归。对于给定字符串中的每个字母，为字母创建字谜。使用map（）将字母与每部分字谜组合，... 继续阅读 >
2017
12-17

解读 JavaScript 之 V8 引擎及优化代码的 5 个技巧

几个星期前，我们开始了一系列旨在深入研究JavaScript及其实际工作方式的系列文章：我们认为通过了解JavaScript的构建块以及它们如何一起协作的，你将能够编写更好的代码和应用程序。本系列的第一篇文章重点介绍了引擎，运行时和调用堆栈的概述。第二篇文章将深入到GoogleV8JavaScript引擎的内部。我们还将提供一些关于如何编写更好的JavaScript代码的快速技巧-我们的 SessionStack开发团队在构建产品时... 继续阅读 >
2017
12-04

开发更好用的 JavaScript 模块

不少人都曾经在 npm 上发布过自己开发的JavaScript模块，而在使用一些模块的过程中，我经常产生“这个模块很有用，但如果能xxx就更好了”的想法。所以，本文将站在模块使用者的角度总结一下，如何能让模块变得更好用。提供ES6模块的入口webpack和rollup都支持对ES6模块做一些静态优化（例如 TreeShaking 和ScopeHoisting），它们都会优先读取package.json中的 module ... 继续阅读 >
2017
11-30

Lens: 从入门到再次入门

类型补全计画从上一篇我们可以看出，Lens就是整合在一起的 Getter 和 Setter ，借助 set , over , view 这三个函数，我们可以分别使用Lens的 Getter 和 Setter 。但是我们目前的Lens类型定义并不是完整的，因此我们首先对Lens的类型进行补全。typeLenssa=Functorf=>(a->fa)->(s->fs)首先让我们看这样一个例子：... 继续阅读 >
2017
11-30

Vue 升级小记

Vue升级小记最近接手了一个Vue1.0的陈年老项目，需要将其升级到Vue2.0。下面记录一下升级过程：安装迁移工具首先需要安装 vue-migration-helper CLI工具：控制台运行命令： npminstall--globalvue-migration-helper CLI工具来帮助项目从Vue1.x迁移到2.x。它扫描文件以查找特定于Vue的代码，并对需要升级的代码提供详细的警告。 vue-migration-helper ... 继续阅读 >
2017
11-29

10个有趣的Javascript和CSS库-2017年11月

TailwindCSSTailwind是用于构建自定义用户界面的实用CSS框架。每个Tailwind小应用都有多种尺寸，这使得创建响应式界面变得非常简单。您可以自定义颜色，边框尺寸，字体，阴影等等，没有任何限制。PrettyCheckbox这是一个纯CSS库，用于创建漂亮的复选框和单选按钮。它提供了不同的形状（正方形，曲线，圆形），选择方式（默认，填充，thick），颜色（主要，成功，信息），颜色类型（实心，轮廓）和动画。... 继续阅读 >
2017
11-29

5个Vuex插件，给你的下个VueJS项目

原文：5VuexPluginsForYourNextVueJSProject作者：AnthonyGore使用Vuex来管理Vue的状态，有很多好的理由。其中之一就是，通过Vuex插件可以非常容易的扩展一些很酷的功能。Vuex社区中的开发人员已经创建了大量的免费插件供你使用，有许多你能想象的功能，还有一些你可能没有想到的功能。在本文中，将向你展示5个特性，你可以通过Vuex插件轻松地添加到下一个项目中。状态持久化... 继续阅读 >
2017
11-03

利用 javascript 实现富文本编辑器

近期项目中需要开发一个兼容PC和移动端的富文本编辑器，其中包含了一些特殊的定制功能。考察了下现有的js富文本编辑器，桌面端的很多，移动端的几乎没有。桌面端以UEditor为代表。但是我们并不打算考虑兼容性，所以没有必要采用UEditor这么重的插件。为此决定自研一个富文本编辑器。本文，主要介绍如何实现富文本编辑器，和解决一些不同浏览器和设备之间的bug。准备阶段在现代浏览器中已经为我们准备好了许多API来让ht... 继续阅读 >
2017
10-09

PopUnder 研究：Javascript逆向与反逆向

缘起最近在研究PopUnder的实现方案，通过Google搜索jspopunder出来的第一页中有个网站popunderjs.com，当时看了下，这是个提供popunder解决方案的一家公司，而且再翻了几页，发现市面上能解决这个问题的，只有2家公司，可见这个市场基本是属于垄断型的。popunderjs原来在github上是有开源代码的，但后来估计作者发现这个需求巨大的商业价值，索性不开源了，直接收费。所以现在要研究它的实现方案，只能上... 继续阅读 >
2017
10-03

从 Template 到 DOM（Vue.js 源码角度看内部运行机制）

写在前面因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。在学习过程中，为Vue加上了中文的注释https://github.com/answershuto/learnVue/tree/master/vue-src，希望可以对其他想学习Vue源码的小伙伴有所帮助。可能会有理解存在偏差的地方，欢迎提issue指出，共同学习，共同进步。从new一个Vue对象开始letvm=newVue({e... 继续阅读 >
2017
10-03

JavaScript是如何工作的：内存管理 + 如何处理4个常见的内存泄露

几周前，我们开始写一个系列，深入探讨JavaScript和它的工作原理。我们认为了解JavaScript的构成以及它们如何协作，有助于编写出更好的代码和应用程序。本系列第一篇重点介绍了引擎、运行时、调用栈。第二篇揭示了谷歌V8JavaScript引擎的内部机制，并且提供了一些关于如何写出更好的JavaScript代码的建议。本文作为第三篇，将会讨论另一个开发者容易忽视的重要主题：内存管理。我们也会提供一些关于如何处理JavaScrip... 继续阅读 >
2017
10-03

2017 年 9 月：15 个有趣的 JS 和 CSS 库

迎来了金秋9月，在这收获的季节，Tutorialzine又为我们带来了哪些新鲜、有趣的前端资源呢？前端开发者们，一起来看看有木有你需要的前端库。1.DisplayJSDisplayJS是一个帮助你渲染DOM的简易框架。使用它，你可以更容易地将JS变量遍历到特定的HTML元素中，类似于React或Vue.js处理模版的方式。项目地址：【传送门】2.ReactBeautifulDnD这是由Atlassian开源的用于制作拖拽... 继续阅读 >
2017
09-29

10 个最终编译成 JavaScript 的脚本语言

与简单的网站相比，现代应用程序有更多不同的需求。但是，浏览器是一个拥有（大部分）固定技术的平台，而且JavaScript仍然是web应用程序的核心语言；需要在浏览器中运行的任何应用程序都必须用该语言实现。我们都知道JavaScript并不是实现所有任务的最佳语言，当遇到复杂的应用时，它可能就不太适合。为了避免这个问题，已经创建了几种新的语言和现有语言的变体，它们都生成可以在浏览器中运行的代码，而无需编写任何Java... 继续阅读 >
2017
09-19

67 个JavaScript和CSS实用工具、库与资源

在这篇文章中，我不会与大家谈论大型的前端框架，如React、Angular、Vue等，也没有涉及那些流行的代码编辑器，如Atom、VSCode、Sublime，我只想与大家分享一个有助于提升开发人员效率的工具列表合集。或许，一些朋友已经对文中的一些工具有所了解，但如果你发现了一些对你有帮助的新工具，那么，我将倍感欣慰。由于这个列表中包含了不同类别的资源，为了便于大家查看，我已将其进行了重新的分类，来Enjoy吧！... 继续阅读 >
2017
09-16

JavaScript作用域和闭包

作用域和闭包在JavaScript里非常重要。但是在我最初学习JavaScript的时候，却很难理解。这篇文章会用一些例子帮你理解它们。我们先从作用域开始。作用域JavaScript的作用域限定了你可以访问哪些变量。有两种作用域：全局作用域，局部作用域。全局作用域在所有函数声明或者大括号之外定义的变量，都在全局作用域里。不过这个规则只在浏览器中运行的JavaScript里有效。如果你在Node.js里，那么全局作用... 继续阅读 >
2017
09-07

不仅仅是面试，JavaScript 开发者都应该知道的十个概念

自学现在学习JavaScript和Web开发的人很多，他们都希望能凭此获得一份工作。然而，自学常常会使学习者对JavaScript语言本身的理解存在知识盲点。实际上，令人感到惊讶的是，他们只需要掌握很少的语言知识就能制作复杂的网页，然而这样通常不能很好掌握JavaScript的基础知识。使用基本的技能来实现功能和避免复杂的需求是相当容易的，通过依赖StackOverflow，而不理解复制来的代码以创建一个网站也是... 继续阅读 >
2017
08-28

浅谈JavaScript中的异步处理

整理于互联网在JavaScript的世界中，所有代码都是单线程执行的由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现异步操作会在将来的某个时间点触发一个函数调用主流的异步处理方案主要有：回调函数(CallBack)、Promise、Generator函数、async/await。一、回调函数(CallBack)这是异步编程最基本的方法... 继续阅读 >
2017
08-27

开发者必读的十大经典书籍

快速迭代的信息社会，技术前进的速度远超人类历史上的任何时期，技术攫取呈现出碎片化的特征，开发者更倾向于通过网络搜素寻求问答。然而，这种浅尝辄止的阅读方式，会给人深沉的浮躁感，难以做到为自己切实所用。新语言、新工具持续更替，让人目不暇接，学习过程中必定伴随着各种琐碎的问题。事实上，许多伟大的技术人在以前就遇到过同样的难题，并且提出了相应的策略和解决方法。虽然具体问题具体对待，但其中蕴含的思... 继续阅读 >