分类目录归档：WEB开发

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-13

67 个拯救前端开发者的工具、库和资源 - SDK.CN - 中国领先的开发者服务平台

67个拯救前端开发者的工具、库和资源摘要：在本文中，我不会去谈React、Angular、Vue等等这些大的前端框架，也不会谈Atom、VScode、Sublime等等这些已经很出名的代码编辑器，我只是想简单的分享一套我认为有助于提升开发者工作流的工具集。这套工具集中的大部分你可能见过，也可能没见过，如果有哪个/些让你眼前一亮，那么我的分享就很值了。本文由myvin在众成翻译平台翻译。在本文中，我不会去谈React... 继续阅读 >
2017
12-08

ES6和Babel你不知道的事儿

因babel的版本从5升级到6有很多改动，比如babel本身不再提供任何transform的工作，都需要借助插件来完成，本文的所有讨论都是建立在babel6之上的。如果只想看结论，直接跳到文章最后。---写在前面ES6即ECMAScript6，是前端开发的JS最新规范，现在大家的开发都在使用ES6，对此并不陌生了。只是浏览器对ES6的支持并不完整，想要更好让ES6在各个平台完美运行还需一番折腾，特此一叙。下图是ES6的浏览器兼容性一览表（已ES6... 继续阅读 >
2017
12-08

WebSocket探秘

首先长连接：一个连接上可以连续发送多个数据包，在连接期间，如果没有数据包发送，需要双方发链路检查包。TCP/IP：TCP/IP属于传输层，主要解决数据在网络中的传输问题，只管传输数据。但是那样对传输的数据没有一个规范的封装、解析等处理，使得传输的数据就很难识别，所以才有了应用层协议对数据的封装、解析等，如HTTP协议。HTTP：HTTP是应用层协议，封装解析传输的数据。从HTTP1.1开始其实就默认开启了... 继续阅读 >
2017
12-06

四种常见的 POST 提交数据方式

HTTP/1.1协议规定的HTTP请求方法有OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT这几种。其中POST一般用来向服务端提交数据，本文主要讨论POST提交数据的几种方式。我们知道，HTTP协议是以ASCII码传输，建立在TCP/IP协议之上的应用层规范。规范把HTTP请求分为三个部分：状态行、请求头、消息主体。类似于下面这样：BASH<method><request-URL><version><headers><entity-body>协议规定... 继续阅读 >
2017
12-06

这么多前端优化点你都记得住吗？

围绕前端的性能多如牛毛，涉及到方方面面，以下我们将围绕PC浏览器和移动端浏览器的优化策略进行罗列。注意，是罗列不是展开，遇到不会不懂的点还请站外扩展。开车速度有点快，坐稳了。tips:这么多前端优化点你都记得住吗？反正我是收藏起来备查的。PC浏览器前端优化策略PC端优化的策略很多，如YSlow（YSlow是Yahoo发布的一款Firefox插件，现Chrome也可安装，可以对网站的页面性能进行分析，提... 继续阅读 >
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-18

尝一尝Vue全家桶

Vue.js是当下很火的一个JavaScriptMVVM库，它以数据驱动和组件化的思想构建。不管你是Angular的忠实粉，还是React的迷恋者，有机会多了解一个框架也没什么坏处，更何况Vue上手难度还是比较低的。本文将介绍Vue全家桶（Vue+Vue-router+Vuex）在项目中的使用。经过一个项目的开发，个人感觉相比于React，Vue给我最大的感受是简单、易理解，不过这可能和我自身对React的掌握程度及本次开发的项目大小有关。... 继续阅读 >
2017
09-16

JavaScript作用域和闭包

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

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

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