分类：WEB开发

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
03-30

浅析前端页面渲染机制

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

Vue.js 插件开发详解

前言随着Vue.js越来越火，Vue.js的相关插件也在不断的被贡献出来，数不胜数。比如官方推荐的vue-router、vuex等，都是非常优秀的插件。但是我们更多的人还只停留在使用的阶段，比较少自己开发。所以接下来会通过一个简单的vue-toast插件，来了解掌握插件的开发和使用。认识插件想要开发插件，先要认识一个插件是什么样子的。Vue.js的插件应当有一个公开方法install。这个方法的第一个参数是Vue构造... 继续阅读 >
2017
03-28

我眼中的 JavaScript 函数式编程

JavaScript函数式编程是一个存在了很久的话题，但似乎从2016年开始，它变得越来越火热。这可能是因为ES6语法对于函数式编程更为友好，也可能是因为诸如RxJS(ReactiveX)等函数式框架的流行。看过许多关于函数式编程的讲解，但是其中大部分是停留在理论层面，还有一些是仅针对Haskell等纯函数式编程语言的。而本文旨在聊一聊我眼中的函数式编程在JavaScript中的具体实践，之所以是“我眼中的”即... 继续阅读 >
2017
03-28

前端模块化（CommonJs,AMD和CMD）

前端模块规范有三种：CommonJs,AMD和CMD。CommonJs用在服务器端，AMD和CMD用在浏览器环境。AMD是RequireJS在推广过程中对模块定义的规范化产出。CMD是SeaJS在推广过程中对模块定义的规范化产出。AMD:提前执行（异步加载：依赖先执行）+延迟执行CMD:延迟执行（运行到需加载，根据顺序执行） 模块函数写法functionf1(){//...}functionf2(){//...}模块就是实现特定... 继续阅读 >
2017
03-13

Vuex新手入门指南

很多人在学习完Vue.js之后还会看到一个经常被提及的词语叫做Vuex。Vuex字面上看与Vue.js只差了一个字母，但是他们两个做的事情完全不一样。在本文我会像之前的Vue.js新手入门指南文章一样的问答形式来写文章。1.Vuex是什么？我们还是像以往一样先看一看官方文档对此的解读（Vuex是什么？·GitBook）Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的... 继续阅读 >
2017
03-13

Vue.js新手入门指南

最近在逛各大网站，论坛，以及像SegmentFault等编程问答社区，发现Vue.js异常火爆，重复性的提问和内容也很多，楼主自己也趁着这个大前端的热潮，着手学习了一段时间的Vue.js，目前用它正在做自己的结业项目。在做的过程中也对Vue.js的官方文档以及其各种特性有了许多认识。作为一个之前以PHP+模版引擎为主的开发，从一个从未接触过除HTML+CSS+JavaScript+JQuery以外的前端技术的人到现在可以独立使用Vue.js以及各种附... 继续阅读 >
2017
03-11

2017 年值得学习的 3 个 CSS 新特性

在众多的CSS新特性中，有3个今年采用的新特性让我抑制不住地激动。1.特性查询不久前，我写了我真心期望的一个CSS特性，就是关于特性查询，现在基本上可以说它已经存在了！它支持除InternetExploer之外的主流浏览器(包括OperaMini)。特性查询，使用@supports规则，允许我们将CSS包含在一个条件块中，这个条件块中会检查当前useragent是否支持一个CSS属性键值对，在支持的情况下其中的内容才... 继续阅读 >
2017
03-11

[译] 再谈 CSS 中的代码味道

谈CSS中的代码味道回到2012年，我写了一篇关于潜在CSS反模式的文章CSS中的代码味道。回看那篇文章，尽管四年过去了，我依然认同里面的全部内容，但是我有一些新的东西加到列表中。再次说明，这些内容并不一定总是坏的东西，因此把它们称为代码味道：在你的使用案例中它们也许可以很好的被接受，但是它们仍然让人觉得有一点奇怪。在我们开始前，让我们回想一下什么是代码味道，摘自维基百科(emphasismine)：... 继续阅读 >
2017
03-07

如何使用CSS实现多行文本的省略号显示

 合理的截断多行文本是件不容易的事情，我们通常采用几种方法解决：overflow:hidden直接隐藏多余的文本text-overflow:ellipsis只适用于单行文本的处理各种比较脆弱的javascript实现。之所以说这种实现比较脆弱是由于需要文本长度的变化时刻得到回流（relayout）后的布局信息，如宽度原文写作时间是2012.9.18号，比较有意义的一天。不过作者忽略了WebKit提供的一个扩展属性-webkit-lin... 继续阅读 >
2017
03-07

CSS3 新特性学习

CSS3是最新的CSS标准，并且完全向后兼容，不过目前W3C仍然在对CSS3规范进行开发，虽然标准的规范还没有正式发布，但是现代浏览器已经支持相当多的CSS3属性了。CSS3提供了很多可以把玩的新特性，模糊了之前只控制样式的定义，让之前很难处理的样式（如：圆角、多列等）和只能通过Javascript来实现的动画效果等现在都能通过CSS3新特性提供的属性很轻松的实现，功能是越来越强大。一、CSS3边框在css3中新增的... 继续阅读 >
2017
02-28

JavaScript 面试题：重复输出一个给定的字符串

其实这是可以作为一道很好的面试题，可以考察开发人员的综合能力。面试题：重复输出一个给定的字符串（str第一个参数）n次（num第二个参数），如果第二个参数num不是正数的时候，返回空字符串。functionrepeatStringNumTimes(str,num){returnstr;}repeatStringNumTimes("abc",3);提供测试情况：repeatStringNumTimes("*",3)//应该返回"***".repeatStringNumTimes("abc",3)//应该返... 继续阅读 >
2017
02-23

全面解析 Javascript - this

为什么要写这篇文章？我之前在阿里面试，以及其它公司面试的时候曾经被问到过这个问题，所以想要分享给大家，如果你能清楚地知道下面this七种情况的区别，能跟面试官解释清楚，无疑是一个大大的加分项，理解完这篇文章，面试官再怎么问你this都不怕了。谈及Javascript中的this，竟然让人觉得头疼，它不像Java，C++中的this指向调用this的该对象。在函数中this到底取何值，是在函数真正被调用执... 继续阅读 >
2017
02-23

你知道怎么用原生 JS 设置样式么

用JS来动态设置CSS样式，常见的有以下几种1.直接设置style的属性某些情况用这个设置!important值无效如果属性有'-'号，就写成驼峰的形式（如textAlign） 如果想保留-号，就中括号的形式 element.style['text-align']='100px';element.style.height='100px';2.直接设置属性（只能用于某些属性，相关样式会自动识别）element.setAttribute('height',100);element.setAttribute('height... 继续阅读 >