分类目录归档：WEB开发

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... 继续阅读 >

2017
02-23

2017前端开发者必学清单

前端生态系统高速发展，我们把时间花费在尝试新技术并在网上讨论它们。我并非指不该如此，但也许我们可以放缓脚步，去多关注下那些变化不大的东西。这些东西能很大程度改善工作质量，提升工作价值，帮我们去理解新的工具。这篇文章里有我自己过往的经验也有新年的计划，同时也希望能收到你们的反馈。学习如何编写可读的代码我们大多数的工作不是写新代码，而是维护既有的代码。这也就意味着你读代码的时间要远多于... 继续阅读 >

2017
02-23

面试中要注意的 3 个 JavaScript 问题

JavaScript是所有现代浏览器的官方语言。因此，各种语言的开发者面试中都会遇到JavaScript问题。本文不讲最新的JavaScript库，通用开发实践，或任何新的ES6函数。而是讲讲面试中经常出现的3个JavaScript问题。我问过这些问题，我的朋友说他们也问。当然不是说你在准备JavaScript面试时只要学习这3个问题——你还有很多途径去更好的准备即将到来的面试——但面试官很有可能通过下面3个... 继续阅读 >

2017
02-22

关于ES6中的Maps你需要知道的那些事

JavaScriptES6引入了一个新的数据结构，叫做maps。Maps是设计用来代替使用ObjectLiteral进行键值对存储的数据结构，它需要键值唯一，并且为循环提供了很多可用的方法。 使用Objectliterals作为“Maps”Objectliterals是JavaScript中最基础的功能了，没有之一。创建一个Map只需要以下这样简单的代码：varmap={"key1":"value1","key2":"value2"}map.key1;//=="value1"很多情... 继续阅读 >

2017
02-17

CSS通用数据类型

CSS中属性的值有着许多种格式。为了让用户代理（即浏览器）能够识别一个值是否有效，则需要确认该值是否符合该类值支持的格式的其中一种。这些属性值所支持的格式叫做数据类型，在规范中用<this>的形式标识。CSS中存在两种数据类型——特定数据类型和通用数据类型。特定数据类型只与一个单独的属性或某一类属性有关联。例如，<transform-function>这一数据类型仅仅只能用作transform属性的值。相反的，通用数据类... 继续阅读 >

2017
02-14

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

随着新的一年到来，我们有一整套新的东西要开始学习。虽然今年的新特性有很多，但有3个新的特性是最令我激动不已的。1.FeatureQueries前段时间，我写过关于FeatureQueries的一篇文章，叫“我最想要的CSS特性之一”。好了，现在它已经出现在这里了。它支持除了IE浏览器之外的所有主流浏览器（包括OperaMini）。FeatureQueries，使用这个@supports规则，允许我们包含CSS在一个条件块，但只有当前用户客户端支... 继续阅读 >

2017
02-11

在过去的一年里谁JavaScript 之最？

JavaScript社区正在不断地发展创新，趋势在不断地变化着。本文将通过比较过去1年里在Github上的star 数，告诉你2016年的主要趋势。在2015年，React成为最大赢家，Redux在与Flux的大战中赢得胜利。那么谁是2016年的JavaScript新星？1、通过一年中最热门的10个项目，您可以很好地了解2016年的Web开发环境：2016年最热门的项目是Vue.JS项目，在去年的Github上获得了超过25,000star，超过了包括React和Angular... 继续阅读 >

2017
02-11

JavaScript This 的六道坎

鉴于this风骚的运作方式，对this的理解是永不过时的话题，本文试图通过将其大卸六块来钉住这个磨人的妖精。首先this isallaboutcontext.this说白了就是找大佬，找拥有当前上下文（context）的对象（contextobject）。大佬可以分为六层，层数越高权力越大，this只会认最大的。第一层：世界尽头权力最小的大佬是作为备胎的存在，在普通情况下就是全局，浏览器里就是window；在uses... 继续阅读 >

2017
02-11

深入理解 javaScript 原型继承

继承的本质：重用在探讨javaScript的原型继承之前，先不妨想想为什么要继承？考虑一个场景，如果我们有两个对象，它们一部分属性相同，另一部属性不同。通常一个好的设计方案是将相同逻辑抽出来，实现重用。以xiaoMingliLei两位同学举例。这两位同学有自己的名字，并且会介绍自己。抽象为程序对象，可以做如下表示。varxiaoMing={name:"xiaoMing",hello:function(){console.log('Hello,m... 继续阅读 >

2017
02-09

2017年前端领域可能迎来的6个发展趋势

2016是前端技术，特别是HTML5技术突飞猛进的一年，加上各类AR、VR技术的出现，一下让前端市场变得火热。这可不是偶然现象，是消费升级后，人们追求更高品质前端展现效果、企业追求更轻量和高效开发效率的必然结果。那么，2017年前端技术将会在哪些领域得到深入应用？带来怎么样的想象？不过可以肯定的是，浏览器作为前端程序的运转平台，必然会随着前端技术的成熟涌现更多想象。下面跟随这位来自腾讯的工程师Ouven来提前感... 继续阅读 >

2017
02-07

前端优化：九个技巧，提高Web性能

当今数字世界，存在着无数的网站，每天都需要处理各种不同的原因的访问。然而，这些网站中有很大一部分显得笨重，使用起来也很麻烦。没怎么优化的网站会被各种各样的问题困扰，包括加载时间、不支持移动设备、浏览器兼容性问题，等等。这篇文章讲述可以帮助改善优化前端的技术，非常有用。主要内容有清理代码、压缩图片、压缩外部资源、使用CDN，以及一些其它方法。这些方法会为你的网站带显著的速度提升和整体性能提升... 继续阅读 >

2017
02-04

加快JavaScript加载和执行效率

JavaScript在浏览器中的性能成为开发者所面临的最重要的可用性问题。而这个问题又因JavaScript的阻塞特性变的复杂，也就是说当浏览器在执行JavaScript代码时，不能同时做其他任何事情。本文详细介绍了如何正确的加载和执行JavaScript代码，从而提高其在浏览器中的性能。概览无论当前JavaScript代码是内嵌还是在外链文件中，页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript执行过程耗时越久，浏览... 继续阅读 >

2017
02-04

JavaScript 很少为人所知的玩法

StackOverFlow的联合创始人杰夫·阿特伍德（JeffAtwood）曾提出著名的“Atwood定律”，即：AnyapplicationthatcanbewritteninJavaScript,willeventuallybewritteninJavaScript.任何能够用JavaScript实现的应用，最终都必将用JavaScript实现。毫无疑问，JavaScript已然成为当下最流行的编程语言之一，这点已经不需要争论了，不服的话前后端乃至全栈工程师肯定跟你急。最近，hackereart就发表... 继续阅读 >