分类目录归档：WEB开发

2017
06-14

JavaScript异步进化史

前言JS中最基础的异步调用方式是callback，它将回调函数callback传给异步API，由浏览器或Node在异步完成后，通知JS引擎调用callback。对于简单的异步操作，用callback实现，是够用的。但随着负责交互页面和Node出现，callback方案的弊端开始浮现出来。Promise规范孕育而生，并被纳入ES6的规范中。后来ES7又在Promise的基础上将async函数纳入标准。此为JavaScript异步进化史。同步与异步... 继续阅读 >

2017
06-14

JavaScript六种继承方式

继承是面向对象编程中又一非常重要的概念，JavaScript支持实现继承，不支持接口继承，实现继承主要依靠原型链来实现的原型链首先得要明白什么是原型链，在一篇文章看懂proto和prototype的关系及区别中讲得非常详细原型链继承基本思想就是让一个原型对象指向另一个类型的实例functionSuperType(){this.property=true}SuperType.prototype.getSuperValue=function(){returnthis.property}functio... 继续阅读 >

2017
06-08

近几年工作经验中总结的JavaScript使用技巧

本文作者分享了作者近几年工作中的经验总结的js使用技巧，1.ajax接收JSON，需要用eval转化为字符串，2.ajax发出两个请求，使用同步解决问题，数组合并等1、如果ajax返回单一的json格式，接收方需要这样再格式化一下赋值：varstr=eval("("+msg+")");开发引用：///<referencepath="http://x.autoimg.cn/as/static/js/jquery-1.7.2.min.js"/>2、如果ajax同发出两个以上的请求时，返回的状态会串，... 继续阅读 >

2017
06-07

CSS常见布局解决方案

说起css布局，那么一定得聊聊盒模型，清除浮动，position，display什么的，但本篇本不是讲这些基础知识的，而是给出各种布局的解决方案。水平居中布局首先我们来看看水平居中1.margin+定宽<divclass="parent"><divclass="child">Demo</div></div><style>.child{width:100px;margin:0auto;}</style>相必是个前端都见过，这定宽的水平居中，我们还可以用下面这种来实现不定宽的2... 继续阅读 >

2017
06-07

前端必知的Emmet实用操作

这是一篇介绍Emmet的文章，Emmet是专为我们前端开发人员设计的一个工具，可以大大提高您的HTML和CSS工开发效率。可以说是前端开发的神器之一Emmet简介作为一个前端，你肯知道在前端开发的过程中，一大部分的工作是写HTML、CSS代码。特别是手动编写HTML代码的时候，效率会特别低下，因为需要敲打很多尖括号，而且很多标签都需要闭合标签等。于是，就有了Emmet（前身为ZenCoding）。(当然这是以前的情况，现在... 继续阅读 >

2017
06-07

jQuery日期范围选择器

准备使用该日期选择器插件需要jQuery1.3.2+和Moment2.2.0+的支持。<linkrel="stylesheet"href="css/daterangepicker.css"/><scriptsrc="js/moment.min.js"></script><scriptsrc="js/jquery.daterangepicker.js"></script>HTML结构在需要放置日期选择器的地方添加以下html结构，就是一个输入框。<inputtype="text"id="datepicker"value="">调用插件调用jQueryDateRangePicker插件非常... 继续阅读 >

2017
05-26

Jquery实现的几款漂亮的时间轴

引言最近项目中使用了很多前端的东西，对于我一个做后台开发的人员，这是一个很好的锻炼的机会。经过这段时间的学习，感觉前端的东西太多了，太强大了，做出来的东西太炫酷了。现在有很多开源的前端框架，做的都非常的漂亮，h5发展了这么多年了，改变了互联网行业啊！下面给大家介绍几款漂亮的时间轴，也许大家以后工作中会用到。一、纵向折叠时间轴1、js文件（jQuery.js或者jQuery.min.js）2、CSS文件@CHA... 继续阅读 >

2017
05-19

2017年最佳Web前端框架赏鉴

构建和开发前端最重要的基础工作就是选择一个高效并且符合需求的web前端框架，一个合理并且高效开发的框架并不仅仅降低你的时间成本，同时也会给你持续开发的信心和乐趣。在这篇分享中，我们将介绍2017年当下最值得你关注的前端开发框架，每一个框架都拥有独特的样式，帮助创建网格布局，按钮，表单或者其他页面元素最重要的一句话-不管你选择哪种框架，都会大大好过你自己从头开发自己的基础框架，现代web开发从来就... 继续阅读 >

2017
05-12

Javascript的继承与多态

本文先对es6发布之前javascript各种继承实现方式进行深入的分析比较，然后再介绍es6中对类继承的支持以及优缺点讨论。最后介绍了javascript面向对象编程中很少被涉及的“多态”，并提供了“运算符重载”的思路。本文假设你已经知道或了解了js中原型、原型链的概念。es6之前，javascript本质上不能算是一门面向对象的编程语言，因为它对于封装、继承、多态这些面向对象语言的特点并没有在语言层面上提供原生的支持。但是，它... 继续阅读 >

2017
05-06

探讨判断横竖屏的最佳实现

在移动端，判断横竖屏的场景并不少见，比如根据横竖屏以不同的样式来适配，抑或是提醒用户切换为竖屏以保持良好的用户体验。判断横竖屏的实现方法多种多样，本文就此来探讨下目前有哪些实现方法以及其中的优缺点。CSSMediaQueries通过媒体查询的方式，我们可以通过以下方法来实现根据横竖屏不同的情况来适配样式：1.内联样式@mediascreenand(orientation:portrait){    //竖屏}@... 继续阅读 >

2017
05-04

10个基于JavaScript的机器学习案例

在过去的几年里，机器学习的开发库增长很快，可用性也变得越来越可靠，而且没有减慢的趋势。一直以来Python作为机器学习的主力语言，现在神经网络可以应用任何语言了，包括JavaScript!web生态系统虽然最近一直在取得进步，但是在机器学习领域JavaScropt和Node.js相对Python和Java来说还是稍弱，但是现在它们已经有足够的能力来处理机器学习方法的问题了。Web语言也有一个优势，就是你所有的JavaScript机器学习工程只需要浏览器支... 继续阅读 >

2017
04-27

写好循环也不容易--8种遍历方法执行速度深度°对比

关于数组或对象遍历，相信很多人都没有深入观察过执行效率。这是一个曾在群里吵翻天的话题，读懂后你将成为遍历效率话题的大师。导读遍历数组或对象是一名程序员的基本素养之一.然而遍历却不是一件简单的事,优秀的程序员知道怎么去选择合适的遍历方法,优化遍历效率.本篇将带你走进JavaScript遍历的世界,享受分析JS循环的快感.本篇所有代码都可以直接运行,希望您通读本篇后,不止是浏览,最好是亲手去实践下.... 继续阅读 >

2017
04-27

JavaScript 巧学巧用

前言由于工作和生活上的一些变化，最近写文章的频率有点下降了，实在不好意思，不过相信不久就会慢慢恢复过来，感谢大家一直以来的关注和支持。本文主要给大家分享一下在编写JavaScript代码的时候存在的一些方法和技巧，虽然有时候条条大路都通向罗马，但是也许总会有那么一条最短的路径可走。希望通过以下几点JavaScript技巧让大家的代码“化繁为简，化简为精”。巧学巧用1.newSet()可能有人知道ES6中提... 继续阅读 >

2017
04-27

JavaScript异步编程

还记得一年前写过一篇关于JavaScript异步编程简述的文章，主要介绍了JavaScript的单线程特性与异步编程实现方式：回调函数，发布订阅模式，Promise对象三种，关于Promise介绍的比较简略，决定再详细总结一下，既是对上一篇文章的补充，也能以更深刻的方式分享自己关于异步编程的理解。前言如果你有志于成为一个优秀的前端工程师，或是想要深入学习JavaScript，异步编程是必不可少的一个知识点，这也是区分初级，... 继续阅读 >

2017
04-21

JQuery坑，说说哪些大家都踩过的坑

1乱用选择器坑人指数：200JQuery选择器调用代价很大，反复调用效率更低。应采用缓存对象的方法或采用链式调用的方式。//错误的写法$("#button").click(function(){$('#listli').addClass('strong');$('#listli').css('color','red');});//正确的写法$("#button").click(function(){$lis=$('#listli');$lis.addClass('strong');$lis.css('color','red');});//更好的写法$("#button").cl... 继续阅读 >

2017
04-21

现在就可以使用的5个 ES6 特性

这篇文章介绍了5个ES6特性，使你的JavaScript代码变的更好。不用说，我们大多数前端开发工程师非常关注JavaScript的性能和特性，这就是为什么ES6对于我们来说是如此令人兴奋。ES6的变化是巨大的，是令人兴奋的，也有令人困惑的地方。在本文中，我将介绍5个ES6的新特性，您可以立即使用它们来增强你的JavaScript代码，以及哪些特性不建议使用。Ecma是什么？JavaScript多年来已经有了很多版本，但总... 继续阅读 >

2017
04-21

JavaScript常用代码总结

分享了一些常用JavaScript代码，有：1.手机类型判断、2.字符串长度、3.获取url中的参数、4.js绑定事件、5.当前浏览器JS的版本、6.全选/全不选、7.移除事件、8.回车提交、9.ajax提交等。经常使用的JS方法，今天记下，以便以后查询手机类型判断varBrowserInfo={userAgent:navigator.userAgent.toLowerCase()isAndroid:Boolean(navigator.userAgent.match(/android/ig)),isIphone:Boolean(naviga... 继续阅读 >

2017
04-14

深入理解JavaScript执行上下文、函数堆栈、提升的概念

首先明确几个概念：EC：函数执行环境（或执行上下文），ExecutionContextECS：执行环境栈，ExecutionContextStackVO：变量对象，VariableObjectAO：活动对象，ActiveObjectscopechain：作用域链想当初自己看到这几个概念的时候是一(m)脸(d)懵(z)逼(z)，但是不得不说这几个概念对以后深入学习JS有很大的帮助。来不及解释了，赶紧上车~EC（执行上下文）每次当... 继续阅读 >

2017
04-13

80%应聘者都不及格的JS面试题

写在前面，笔者在做面试官这2年多的时间内，面试了数百个前端工程师，惊讶的发现，超过80%的候选人对下面这道题的回答情况连及格都达不到。这究竟是怎样神奇的一道面试题?他考察了候选人的哪些能力?对正在读本文的你有什么启示?且听我慢慢道来不起眼的开始招聘前端工程师，尤其是中高级前端工程师，扎实的JS基础绝对是必要条件，基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选... 继续阅读 >

2017
04-13

JavaScript中数组对象详解

Array对象即数组对象用于在单个变量中存储多个值，JS的数组是弱类型的，所以允许数组中含有不同类型的元素，数组元素甚至可以是对象或者其他数组。创建数组的语法1、Array构造器1、varlist=newArray();2、varlist=newArray(size);3、varlist=newArray(element0,element1,...elementn);2、字面量的方式varArray[element0,element1,...elementn];举例子varlist=newArray(1,true,nu... 继续阅读 >

2017
04-13

2017前端性能优化清单

你开始使用渐进启动了么？是不是已经使用过React和Angular中tree-shaking和code-splitting两个工具？有没有用过Brotli、Zofli和HPACK这几种压缩技术，或者OCSP协议（在线证书状态协议）？知不知道资源提醒，客户端提醒和CSScontainment一类的技术？了解IPv6，HTTP/2和ServiceWorker这些协议吗？回想那些年，大家往往在完成了产品之后才会去考虑性能。常常把与性能相关的事情拖到项目的最后来做，所做的也不过是对服... 继续阅读 >

2017
04-13

JavaScript引用是如何工作的

JavaScript中没有指针，并且JavaScript中的引用与我们通常看到的大多数其他流行编程语言的工作方式不同。在JavaScript中，不可能有一个变量到另一个变量的引用。而且，只有复合值（例如对象或数组）可以通过引用来赋值。整片文章中将使用下列属于：标量–单个值或数据单元（如整数、布尔值、字符串）复合--由多个值组成（如数组、对象、集合）原始-直接的价值，而不是对包含值的东西的引用。Jav... 继续阅读 >

2017
04-01

一道有价值的JS继承面试题

题目原题目来源于一个网友的问答varA=function(){this.name='apple';}A.prototype.getName=function(){returnthis.name;}//补充代码varB=A.extend({initialize:function(){this.superclass.initialize.call(this);this.total=3;},say:function(){return'我有'+this.total+'个'+this.getName()}});varb=newB();console.log(b.say());/... 继续阅读 >

2017
03-30

浅析前端页面渲染机制

作为一个前端开发，最常见的运行环境应该是浏览器吧，为了更好的通过浏览器把优秀的产品带给用户，也为了更好的发展自己的前端职业之路，有必要了解从我们在浏览器地址栏输入网址到看到页面这期间浏览器是如何进行工作的,进而了解如何更好的优化实践，本篇主要围绕这两点展开阐述。前端页面渲染机制可谓是老生常谈，但又很有必要再谈的话题，于是还是决定写一篇，即是对知识的回顾总结，又能与大家分享，何乐而不为。网上相关类型... 继续阅读 >