分类目录归档：WEB开发

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)，正如它的名字，就是创建函数的同时立即执行。它没有... 继续阅读 >

2017
07-18

JavaScript机器学习之KNN算法

上图使用plot.ly所画。上次我们用JavaScript实现了线性规划，这次我们来聊聊KNN算法。KNN是k-Nearest-Neighbours的缩写，它是一种监督学习算法。KNN算法可以用来做分类，也可以用来解决回归问题。GitHub仓库：machine-learning-with-jsKNN算法简介简单地说，KNN算法由那离自己最近的K个点来投票决定待分类数据归为哪一类。如果待分类的数据有这些邻近数据，NY:7,NJ:0,IN:4，... 继续阅读 >

2017
07-18

8个JavaScript中常遇到的坑

1.你是否尝试过对数组元素进行排序？JavaScript默认使用字典序(alphanumeric)来排序。因此，[1,2,5,10].sort()的结果是[1,10,2,5]。如果你想正确的排序，应该这样做：[1,2,5,10].sort((a,b)=>a-b)2.newDate()十分好用newDate()的使用方法有：不接收任何参数：返回当前时间；接收一个参数x:返回1970年1月1日+x毫秒的值。newDate(1,1,1)返回1901年2月1号。然而....，new... 继续阅读 >

2017
07-13

JavaScript中8个常见的陷阱

这里我们针对JavaScript初学者给出一些技巧和列出一些陷阱。如果你已经是一个砖家，也可以读一读。1.你是否尝试过对数组元素进行排序？JavaScript默认使用字典序(alphanumeric)来排序。因此，[1,2,5,10].sort()的结果是[1,10,2,5]。如果你想正确的排序，应该这样做：[1,2,5,10].sort((a,b)=>a-b)2.newDate()十分好用newDate()的使用方法有：不接收任何参数：返回当前时间；接收一个参数x:返回1... 继续阅读 >

2017
07-11

揭开 this & that 之迷

新手在入门JavaScript的过程中，一定会踩很多关于this的坑，出现问题的本质就是this指针的指向和自己想的不一样。笔者在入门学习的过程中，也踩了很多坑，于是便写下本篇文章记录自己“踩坑”历程。一.this在哪里？在上篇《从JavaScript作用域说开去》分析中，我们知道，在ExecutionContext中有一个属性是this，这里的this就是我们所说的this。this与上下文中可执行代码的类型有直接关系，*... 继续阅读 >

2017
07-10

12个令人惊叹的JavaScript技巧

原文:12AmazingJavaScriptShorthandTechniques译者:Fundebug在这里我把使用多年的奇淫技巧给大家分享出来，教大家写出更加简洁的代码。1.空(null,undefined)验证当我们创建了一个新的变量，我们通常会去验证该变量的值是否为空(null)或则未定义(undefined)。这对于JavaScript编程来说，是一个经常要考虑到的验证。如果直接写，那么像下面这样：if(variable1!==null||variable1!==u... 继续阅读 >

2017
07-06

JavaScript 进阶之深入理解数据双向绑定

前言谈起当前前端最热门的js框架，必少不了Vue、React、Angular，对于大多数人来说，我们更多的是在使用框架，对于框架解决痛点背后使用的基本原理往往关注不多，近期在研读Vue.js源码，也在写源码解读的系列文章。和多数源码解读的文章不同的是，我会尝试从一个初级前端的角度入手，由浅入深去讲解源码实现思路和基本的语法知识，通过一些基础事例一步步去实现一些小功能。本场Chat是系列Chat的开篇，我会首... 继续阅读 >

2017
06-27

JavaScript中的惰性数组介绍

今天我要介绍的是lazy-arr，它给JavaScript中带来了惰性数组。什么是惰性数组，它为什么有用？我们来重现一下你第一次面试软件工程师时的题目：写一个斐波纳契函数。我们明确了0和1的基本情况，然后递归生成剩下的：letfib=n=>{switch(n){case0:return0case1:return1default:returnfib(n-1)+fib(n-2)}}小菜一碟。这种解决方案有什么问题吗？还用说么-效率真的真... 继续阅读 >

2017
06-25

不朽经典，无我编程的十大戒律

无我编程的十大戒律最早出现在1971年GeraldWeinberg出版的《程序开发心理学》里。后由StackOverflow网站的联合创始人JeffAtwood在博客中整理列出。虽然过去了几十年，但这些经典原则仍值得每一位程序员拜读。 1、理解并接受自己会犯错的事实–犯错无法避免，关键要在错误进入生成环境前及时找出。幸好除了一小部分需要在JPL（喷气推进实验室）开发火箭指导软件的程序员外，大部分程序员都不... 继续阅读 >

2017
06-20

文件上传那些事儿

导语正好新人导师让我看看能否把产品目前使用的FileUploader从老的组件库分离出来的，自己也查阅了相关的各种资料，对文件上传的这些事有了更进一步的了解。把这些知识点总结一下，供自己日后回顾，也供有需要的同学参考，同时也欢迎各位大牛拍砖指点共同学习。FileUpload对象在网页上传文件，最核心元素就是这个HTMLDOM的FileUpload对象了。什么鬼？好像不太熟啊~别急，看到真人就熟了：<inputtype="file">... 继续阅读 >

2017
06-20

JavaScript 新手的踩坑日记

引语在1995年5月，Eich大神在10天内就写出了第一个脚本语言的版本，JavaScript的第一个代号是Mocha，MarcAndreesen起的这个名字。由于商标问题以及很多产品已经使用了Live的前缀，网景市场部将它改名为LiveScript。在1995年11月底，Navigator2.0B3发行，其中包含了该语言的原型，这个版本相比之前没有什么大的变化。在1995年12月初，Java语言发展壮大，Sun把Java的商标授权给了网景。这个语言被再次改名，变成了最... 继续阅读 >

2017
06-17

JavaScript 最新特性实现的三大黑科技

依次执行多项异步任务有时候，我们希望批量执行一组异步任务，但是不是并行，而是依次执行，这组任务是动态的，在一个数组里，当然我们可以用for循环然后一个一个await执行，但是还有另外一种方式：JSBinonjsbin.com在上面的例子里，我们定义了一个taskReducer：asyncfunctiontaskReducer(promise,action){letres=awaitpromise;returnaction(res);}这个reducer的两个参数是promis... 继续阅读 >

2017
06-14

WebView性能、体验分析与优化

在App开发中，内嵌WebView始终占有着一席之地。它能以较低的成本实现Android、iOS和Web的复用，也可以冠冕堂皇的突破苹果对热更新的封锁。然而便利性的同时，WebView的性能体验却备受质疑，导致很多客户端中需要动态更新等页面时不得不采用其他方案。以发展的眼光来看，功能的动态加载以及三端的融合将会是大趋势。那么如何克服WebView固有的问题呢？我们将从性能、内存消耗、体验、安全几个维度，来系统的分析客户端默... 继续阅读 >