分类：WEB开发

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，而不理解复制来的代码以创建一个网站也是... 继续阅读 >
2017
09-05

【整理】CSS布局方案

我们在日常开发中经常遇到布局问题，下面罗列几种常用的css布局方案话不多说，上代码！居中布局以下居中布局均以不定宽为前提，定宽情况包含其中1、水平居中a)inline-block+text-align.parent{text-align:center;}.child{display:inline-block;}tips：此方案兼容性较好，可兼容至IE8，对于IE567并不支持inline-block，需要使用csshack进行兼容b)table+margin.child{displ... 继续阅读 >
2017
08-29

你所不知道的 CSS 动画技巧与细节

怕标题起的有点大，下述技巧如果你已经掌握了看看就好，欢迎斧正，本文希望通过介绍一些CSS不太常用的技巧，辅以一些实践，让读者可以更加深入的理解掌握CSS动画。废话少说，直接进入正题，本文提到的动画不加特殊说明，皆指CSS动画。正负旋转相消嗯。名字起的很奇怪，好像数学概念一样。（写完文章才发现这里应该叫正反旋转相消，图都截完了，大家心里清楚就好）在动画中，旋转是非常常用的属性... 继续阅读 >
2017
08-28

浅谈JavaScript中的异步处理

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

浏览器前端优化

优化全都是与速度和满意度有关。从用户体验的角度，我们希望前端提供可以快速加载和执行的网页。而从开发者体验的角度，我们希望前端是快速、简单而规范的。这不仅会给我们带来快乐的用户和快乐的开发者，而且由于Google偏向于优化，SEO排名也会显著提高。如果你已经花费了大量时间来改善你网站的GooglePagespeedInsights分数，那么这将有助于揭示这一切实际上意味着什么，以及我们必须为优化前端所采取的... 继续阅读 >
2017
08-27

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

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

给前端工程师讲设计终篇

一.工程师对设计偏见的起源迅速想象一副世界地图，它是什么样子的？这样?还是这样？如果仔细观察上面两幅图，可以看出其中的差异：以英文为关键词搜索，大部分世界地图的中心是美洲欧洲；但如果以中文为关键词搜索，搜索结果中地图的中心则是亚洲。为什么是这样？因为我们总是以自己的经验为中心建构世界，而上面的地图，不过是这种构建中心差异的展示——亚洲人以自己为中心，欧美人也同样以他... 继续阅读 >
2017
08-19

移动 H5 首屏秒开优化方案探讨

随着移动设备性能不断增强，web页面的性能体验逐渐变得可以接受，又因为web开发模式的诸多好处(跨平台，动态更新，减体积，无限扩展)，APP客户端里出现越来越多内嵌web页面（为了配上当前流行的说法，以下把所有网页都称为H5页面，虽然可能跟H5没关系），很多APP把一些功能模块改成用H5实现。虽然说H5页面性能变好了，但如果没针对性地做一些优化，体验还是很糟糕的，主要两部分体验：页面启动白... 继续阅读 >
2017
08-10

编写高质量代码的思考

最近在看《代码大全》，可以说是一本软件开发的百科全书，特别厚，但是干货也很多。平时写代码，代码规范是一个最低的要求（很多老代码连最低要求都达不到），为什么要这样规定代码要这么写，而不是那么写？这是一个值得深究的问题。而不是说我照着代码规范写代码就算完了，高质量的代码是一个专业工程师的追求。要知其然知其所以然，最近写发票解析的代码，因为涉及带解析PDF的算法，复杂度比较高，所以花了很多时间在重构，学... 继续阅读 >
2017
08-05

使用 JavaScript 进行即时表单验证

HTML5引入了几个新的属性来实现基于浏览器的表单验证。pattern属性是一个正则表达式，用于定义textarea元素和大多数input元素类型的有效输入范围。required属性指定某个字段是否需要输入。对于没有实现这些属性的传统浏览器，我们可以使用它们的值作为填充表单的基础。我们还可以使用它们来提供更有趣的增强功能-即时表单验证。来自作者的更多内容一个JavaScript可访问性的失败实验的经验教训可用的多... 继续阅读 >
2017
07-26

纯 CSS 实现波浪酷炫效果

一直以来，使用纯CSS实现波浪效果都是十分困难的。因为实现波浪的曲线需要借助贝塞尔曲线。而使用纯CSS的方式，实现贝塞尔曲线，额，暂时是没有很好的方法。当然，借助其他力量（SVG、CANVAS），是可以很轻松的完成所谓的波浪效果的，先看看，非CSS方式实现的波浪效果。使用SVG实现波浪效果借助SVG，是很容易画出三次贝塞尔曲线的。看看效果：代码如下：<svgwidth="200... 继续阅读 >
2017
07-20

十大经典排序算法的JS版

前言这世界上总存在着那么一些看似相似但有完全不同的东西，比如雷锋和雷峰塔，小平和小平头，玛丽和马里奥，Java和javascript….当年javascript为了抱Java大腿恬不知耻的让自己变成了Java的干儿子，哦，不是应该是跪舔，毕竟都跟了Java的姓了。可如今，javascript来了个咸鱼翻身，几乎要统治web领域，Nodejs，ReactNative的出现使得javascript在后端和移动端都开始占有了一席之地。可以这么说,在Web的江湖，JavaScript可... 继续阅读 >
2017
07-20

10个JavaScript难点

译者按：能够读懂这篇博客的JavaScript开发者，运气不会太差…原文:10JavaScriptconceptseveryNode.jsprogrammermustmaster译者:Fundebug为了保证可读性，本文采用意译而非直译，并且对示例代码进行了大量修改。另外，本文版权归原作者所有，翻译仅用于学习。1.立即执行函数立即执行函数，即ImmediatelyInvokedFunctionExpression(IIFE)，正如它的名字，就是创建函数的同时立即执行。它没有... 继续阅读 >