dwqs
发表于
2015-09-29 08:19:49

从作用域链谈闭包

闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。神马是闭包关于闭包的概念，是婆说婆有理。因而，我就翻阅了红皮书(p178)上对于闭包的陈述：闭包是指有权访问另外一个函数作用域中的变量的函数这概念有点绕，拆分一下。从概念上说，闭包有两个特点：1、函数2、能访问另外一个函数作用域中的变量在ES 6之前，Javascript只有函数作用域的概念，没有块级作用域（但catch捕获的异常只能在catch块中访问）的概念（IIFE可以创建局部作用域）。每个函数作用域都是封闭的，即外部是访问不到函数作用域中的变量。functiongetName(){varname="美女的名字";console.log(name);//"美女的名字"}functiondisplayName(){console.log(name);//报错}但是为了得到美女的名字，不死心的单身汪把代码改成了这样：functiongetName(){varname="美女的名字";functiondisplayName(){console.log(name);}returndisplayName;}var美女=getName();美女()//"美女的名字"这下，美女是一个闭包了，单身汪想怎么玩就怎么玩了。(但并不推荐单身汪用中文做变量名的写法，大家不要学)。关于闭 ...继续阅读 (22)

dwqs
发表于
2015-09-25 04:53:35

CSS中的百分比

CSS支持多种单位形式，如百分比、px、pt、rem等，百分比和px是常用的单位，随着移动端和响应式的流行，rem、vh、vw也开始普遍使用，这些单位你可能未必知道，想了解？可以戳此文：CSS：7个你可能不认识的单位。今天在SegmentFault社区碰到了两个关于百分比计算的问题，一个是在translate中使用百分比的时候，是相对于哪个DOM元素的大小计算的；另外一个是在padding、margin等中使用百分比时，百分比又是怎么转为px的呢？对于第一个，移动距离是根据自身元素的大小来计算的：[The percentage] refer[s] to the size of the element’s box具体参考：css3 translate in percent(自备梯子)对于第二个，我认为percentage转px应该是浏览器根据css规定来完成的，但是具体怎么算呢？Example 1: Margins<divstyle="width:20px"><divid="temp1"style="margin-top:50%">Test top</div><divid="temp2"style="margin-right:25%">Test right</div><divid="temp3"style= ...继续阅读 (14)

dwqs
发表于
2015-09-22 02:55:30

JavaScript的高阶函数

在Javascript中，有高阶函数的概念，因而很适合函数式编程。那神马是高阶函数呢？没有神马具体的定义，但高阶函数有两个显著的特征：。用函数做参数或返回一个函数。函数作为参数众所周知，函数是Javascript中的一等公民，不仅能被赋值，也能和普通变量一样，作为函数的参数。如果你有Javascript的Web编程经验或者是一个前端开发者，就会经常碰到回调函数。在某个操作完成之后会被执行的函数就被称为回调函数。通常，回调函数都是匿名的，并作为最后一个函数传递给调用者。由于Javascript是单线程的，也就意味着，同一时刻只有一个操作在进行，其它操作则在队列中等候当前操作的完成。在支持高阶函数特性的语言中，采取的策略是传递一个将在父函数操作完成之后被执行的函数，可以允许异步行为，因此，在等待响应时，脚本可以继续执行。这在Web的编程中是非常有用的，因为脚本可能在某处会向服务器发送一个Ajax请求，并且需要处理服务器的响应，而由于网络延迟或者服务器处理时间是不可控的，我们并不知道响应会什么时候到达。Node.js会频繁使用回调来充分利用服务器资源。举个粟子，看看下面的Javascript代码片段，给按钮添加一个点击监听：<buttonid="clicker">So Clickable</button>document.getElementById("click ...继续阅读 (22)

dwqs
发表于
2015-09-19 02:34:02

七个对我最好的职业建议

一、不要别人点什么，就做什么我的第一份工作，只干了8个月，那家公司就倒闭了。我问经理，接下来我该怎么办，他说：“小伙子，千万不要当一个被人点菜的厨师，别人点什么，你就烧什么。不要接受那样一份工作，别人下命令你该干什么，以及怎么干。你要去一个地方，那里的人肯定你对产品的想法，相信你的能力，放手让你去做。”我从此明白，单单实现一个产品是不够的，你还必须参与决定怎么实现。好的工程师并不仅仅服从命令，而且还给出反馈，帮助产品的拥有者改进它。二、推销自己我进入雅虎公司以后，经理有一天跟我谈话，他觉得我还做得不够。“你工作得很好，代码看上去不错，很少出Bug。但是，问题是别人都没看到这一点。为了让其他人相信你，你必须首先让别人知道你做了什么。你需要推销自己，引起别人的注意。”我这才意识到，即使做出了很好的工作，别人都不知道，也没用。做一个角落里静静编码的工程师，并不可取。你的主管会支持你，但是他没法替你宣传。公司的其他人需要明白你的价值，最好的办法就是告诉别人你做了什么。一封简单的Email：”嗨，我完成了XXX，欢迎将你的想法告诉我”，就很管用。三、学会带领团队工作几年后，已经没人怀疑我的技术能力了，大家知道我能写出高质量的可靠代码。有一次，我问主管，怎么才能得到提升，他说：“当你的技术能力过关以后，就要考验 ...继续阅读 (16)

dwqs
发表于
2015-09-10 15:57:17

项目总结（二）：组件开发中的数据流

P项目的开发是一个比较发杂的SPA，各个模块都被抽成独立组件进行开发。各个组件会相互通讯，产生数据交互，也会产生独立的数据流。在P项目中，采用了Flux，单向数据流的思想在项目中得到了很好地体现，对于部分数据交互，则用中间层做辅助，但是，我们从直接数据流开始说起吧。直接数据流Ajax的出现带来了极好的用户体验。当用户产生一个交互，如输入、点击等，要产生数据变化时，可以直接利用Ajax想后台程序请求数据，然后将数据填充到前台的对应元素中，展示给用户。这就产生了直接数据流。//搜索框var$search=$('input');$search.keyup(function(){if($(this).val()!==''){$.ajax({url:'./res.php',method:'POST',contentType:"application/json",dataType:'json',data:JSON.stringify({key:$(this).val()}),success:function(data){//todo}})}});res.php拿到值之后，则根据关键字搜索结果：//省略。。。$res=mysqli_query('select de1,de2 from userdb where username = '+value);数据流向应该是这样子的：这种方式简单方便，但是 ...继续阅读 (22)

dwqs
发表于
2015-09-05 01:42:58

Jade快速入门

Jade是Node的一个模板引擎，借鉴了Haml，语法上和Haml有很多类似之处，Jade的主要优势为HTML元素同事渲染闭合和开始标签，当然也会添加符号<>和< />。标签一行开头的任何文本都会被默认解释称HTML标签，标签后的文本和空格会被解析成内联的HTML，即元素的文本内容：bodydivh1Hellonodep jade语法divfooter©App上述模板会被解析成：<body><div><h1>Hello node</h1><p>jade 语法</p></div><div><footer> App</footer></div></body>变量/数据传给Jade模板的数据称为locals。有输出一个变量，使用等号=:h1=titlep=body//传递的locals{title:'数据1',body:'body变量'}输出地HTML:<h1>数据1</h1><p>body变量</p>如果要在文本中读取变量的值，则通过#{name}语法实现：-vartitle='node.js'p I am studying#{title ...继续阅读 (22)

dwqs
发表于
2015-09-01 01:44:21

Getting started with ECMAScript 6

1、尝试ES6这里有三种简单地方式用于ES6编程：1.Web浏览器：使用Babel REPL,可以将ES6编译成ES5的平台，并且并不需要安装。2.命令行：使用babel-node，可以执行ES6的Node.js版本（会在内部编译es5）。需要通过npm安装。3.各种js引擎：根据ES6语法兼容表，找出被支持的ES6功能。对于第一点和第二点，这有更多细节。1.1 Babel REPLBabel REPL主要有四个部分：1、左上角包含es6源代码2、左下角可以查看es6中的语法错误3、右上角是es6被编译成es5的源代码4、右下角是通过console.log()的输出结果1.2 babel-nodebabel-node可以通过npm安装：$ npm install--globalbabel跟node一样，可以命令开启REPL交互：$ babel-node一旦开启REPL，就可以去执行ES6代码：>letarr=[1,2,3];>arr.map(x=>x*x)[1,4,9]注意：babel-node目前不支持多行输入Babel官网上有管多关于Babel CLI的工具。2. 从var到let/constes6有两种新的方式来声明变量：1、let用于声明块级作用于变量2、const用于声明常量，其值不能被改变。let或const可以用来替代var声明变量，但是不能盲目使用 ...继续阅读 (28)

dwqs
发表于
2015-08-28 08:49:05

项目总结（一）：滚动条定位

这是在P项目碰到的一个功能实现，我姑且把它称为滚动条定位。假设有一个这样的列表组件U，当我点击item7时,U会产生scrollTop值,同时U会被重新渲染。当我刷新页面时或者点击item5，scrollTop会自动变为0（点击item或刷新页面,U均会被重新渲染），而要实现的功能是刷新页面或点击当前可是范围内的其它item时，此组件仍维持当前的状态（scrollTop的值不改变），这需要维护scrollTop值，对滚动条定位。假设index.js输出的页面的HTML结构是酱紫的：<divclass="box"><ulclass='ul'><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li><li>item6</li><li>item7</li><li>item8</li><li>item9</li><li>item10</li><li>item11</li><li>item12</li> ...继续阅读 (22)

dwqs
发表于
2015-08-14 13:28:49

自定义右键菜单和多选

最近在项目中要实现一些自定义效果，例如右键菜单、全选、不连续选择等等，个人认为主要是理清楚逻辑和事件关系。要实现这些，也有现成的插件可以用，如jQuery UI的selectable。右键菜单当浏览网页时，单击鼠标右键（或ctrl+触模板左键）会出现浏览器默认的右键菜单项，就像这样子的：但是当要对某个元素自定义右键，像这样子的：就必须得先禁用浏览器默认的菜单，需要监听contextmenu事件，关键代码如下：$(function(){$('#box').on('contextmenu',function(event){event.preventDefault();$(this).trigger('click');$('#menulist').css({top:event.pageY,left:event.pageX});});$('#box').click(function(){$('#menulist').css('display','block');});})完成示例：https://jsfiddle.net/dwqs/jvxopkqk/全选默认的ctrl+A(MAC下是command+A)会选择整个网页或者某个获得焦点的可编辑元素。这是个div，这是个div，这是个div，这是个div，这是个div，这是个div，这是个div，这是个div，这是个div，这是个div，这是另 ...继续阅读 (11)

dwqs
发表于
2015-08-08 14:25:52

jQuery实现上传进度条效果

最近呢，老大让做一个进度条的效果出来，这个之前还真没做过。刚好这周没什么东西了，就拿这个来充一下数吧。文件上传，得先准备一个“按钮”：这个看上去还是不错的吧，实现也是很简单的：开始上传文件太丑了，就用span来做了，可控性强。添加点css:.upload-span{display:inline-block;width:120px;height:40px;color:#FFFFFF;text-align:center;line-height:40px;background-color:blue;border:2pxsolid blue;border-radius:5px;cursor:pointer;letter-spacing:2px;}当点击就会触发上传效果，之后添加事件。逼真一点，得再加一个遮罩和一个显示进度条的控件，点击span后，效果大概是这样子的：关闭确认取消加点css上去：.upload-mask{position:absolute;top:0;left:0;z-index:9;width:100%;height:100%;background-color:rgba(84,84,84,0.3);display:none;}.upload-component{position:absolute;z-index:99;top:50%;left:50%;margin-left ...继续阅读 (13)

dwqs
发表于
2015-08-02 07:30:29

Handlebars.js初探

引言Handlebars是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。利用Handlebars处理HTML模板时，一般步骤如下：1. 获取模板内容2. 预编译模板3. 模板数据填充4. 将结果追加到页面中下图是html模板被渲染后的结果：有两种方式来实现这个小小的demo1.直接在HTML中渲染DOCTYPE htmldemo2{{demo1}}{{desc}}varcontext={"demo1":"this is a demo","desc":"study Handlebars","color":"red"};//1. 获取模板内容vartpl=$(".tpldemo").html();//2. 预编译模板vartemplate=Handlebars.compile(tpl);//3. 模板数据填充varhtml=template(context);//4. 将结果追加到页面中$(".tpldemo").html(html);2.借用标签{{demo1}}{{desc}}varcontext={"demo1":"this is a demo","desc":"study Handlebars","color":"red"};//1. 获取模板内容vartpl=$("#tpl").html();//2. 预编译模板vartempla ...继续阅读 (32)

dwqs
发表于
2015-07-28 14:53:43

Qunit初探

前言2008年5月，Qunit随JQuery的核心库一起发布，在2009年重构之后，Qunit独立出来，可以用于测试各种Javascript应用和框架，其提供的断言方法遵循了CommonJS维护规范。尽管Qunit能再服务端和命令行运行，但是其主要还是用于测试浏览器端的Javascript。先看一个简单地测试demo:DOCTYPE htmltest("hello",function(){ok(true,"world");});QUnit Hello World先从这里下载对应的js和css文件。Qunit提供的test()方法定义一个为”hello”的测试，第二个参数是传递给test()的函数，里面才是真正的测试代码，示例中调用ok()方法，该方法第一个参数是一个布尔值，用于判断测试是否通过，第二个是测试不通过时的输出消息。Qunit会在页面加载完后运行，上面运行后截图如下：test("hello",function(){ok(false,"test faild");});ok()期待返回一个True，若返回false，测试不会通过：测试结果中给出了具体的测试结果。和test()类似的另一个方法是asyncTest()，后者用于异步测试。Writing QUnit Tests给一个稍复杂一点的demo：DOCTYPE htmlQUnit TestQUnit ...继续阅读 (17)

dwqs
发表于
2015-07-25 10:26:48

JQuery总结四：Ajax和延迟对象

一、Ajax方法1.发送请求Ajax方法说明$.ajax([url],options)使用传入的options发送一次Ajax请求.load(url,[data],[callback])向传入的url生成一次Ajax请求，然后将响应放在匹配的元素中$.get(url,[data],[callback],[returnType])向传入的url发送一个get请求$.getJSON(url,[data],[callback])向传入的url发送一个Ajax请求，将响应作为JSON数据结构解析$.getScript(url,[callback])向传入的url发送一个Ajax请求，将响应作为Javascript解析$.post(url,[data],[callback],[returnType])向传入的url发送一个post请求2.监视请求Ajax方法说明.ajaxComplete(handler)绑定Ajax请求完成后调用的处理程序.ajaxError(handler)绑定Ajax请求发生错误后调用的处理程序.ajaxSend(handler)绑定Ajax请求开始时调用的处理程序.ajaxStart(handler)绑定Ajax请求开始但没有其它Ajax请求时调用的处理程序.ajaxStop(handler)绑定Ajax请求结束但没有其它Ajax请求时调用的处理程序.ajaxSucc ...继续阅读 (14)

dwqs
发表于
2015-07-18 14:54:04

Gulp不完全入门教程

引言gulp是基于Nodejs的自动任务运行器，能自动化地完成javascript/coffee/sass/less/html/image/css等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，gulp借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单.一、安装Gulpgulp是基于Nodejs的自动任务运行器，所以安装gulp之前要先安装node.js环境。打开Nodejs官网，点击硕大的绿色“install”按钮，可以检测一下安装的Node和npm版本：然后全局安装gulp：npm install-g gulp同样安装完之后，可以检测gulp的版本：全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，然后在命令行中执行：npm install gulp如果想在安装的时候把gulp写进项目package.json文件的依赖中，则可以加上–save-dev：npm install gulp--save-dev--save：将保存配置信息至package.json（package.json是nodejs项目配置文件。package.json是一个普通json文件，不能添加任何注释。参看http://www.zhi ...继续阅读 (21)

dwqs
发表于
2015-07-12 15:15:48

10个用于Web开发的最好 Python 框架

Python 是一门动态、面向对象语言。其最初就是作为一门面向对象语言设计的，并且在后期又加入了一些更高级的特性。除了语言本身的设计目的之外，Python标准库也是值得大家称赞的，Python甚至还自带服务器。其它方面，Python拥有足够多的免费数据函数库、免费的Web网页模板系统、还有与Web服务器进行交互的库、这些都可以设计到你的Web应用程序里面。在这篇文章里，我们将为Python Web开发者介绍基于Python的10大Web应用框架。CubicWebCubicWeb的最重要的支柱就是代码的可重用性。CubicWeb宣扬自己不仅是一个Web开发框架，而且还是一款语义Web开发框架。CubicWeb使用关系查询语言（RQL Relation Query Language）与数据库之间进行通信。Zope2Zope 2是一款基于Python的Web应用框架，是所有Python Web应用程序、工具的鼻祖，是Python家族一个强有力的分支。Zope 2的“对象发布”系统非常适合面向对象开发方法，并且可以减轻开发者的学习曲线，还可以帮助你发现应用程序里一些不好的功能。Web2pyWeb2py是一个用Python语言编写的免费的开源Web框架，旨在敏捷快速的开发Web应用，具有快速、可扩展、安全以及可移植的数据库驱动的应用，遵循LGPLv3开源协议。Web2py提供一站式的解决 ...继续阅读 (14)

dwqs
发表于
2015-07-10 00:14:36

JQuery总结三：DOM完全操作和动画

特性和属性方法说明.attr(key)取得特性key的值.attr(key，value)设置特性key的值为value.attr(key，fn)将fn的返回值作为key的值.attr(obj)根据传入的键值对象参数设置特性的值.removeAttr(key)删除特性key的值.prop(key)取得属性key的值.prop(key，value)设置属性key的值为value.prop(key，fn)将fn的返回值作为key的值.prop(obj)根据传入的键值对象参数设置属性的值.removeProp(key)删除属性key的值.addClass(class)为匹配元素添加传入的类.removeClass(class)为匹配元素删除传入的类.toggleClass(class)对于匹配元素，如果存在类则删除，不存在则添加.hasClass(class)匹配元素中至少一个包含传入的类则返回true.val()获取第一个匹配元素的value属性值.val(value)设置每个匹配元素的value属性关于特性和属性：DOM元素的特性（Attribute）和属性（Property）内容操作方法说明.html()获取第一个匹配元素的HTML内容.html(value)将每个匹配元素的HTML内容设置为value.text()获取所有匹配元素的文本，以字符串返回.text(value)将每个匹 ...继续阅读 (37)

dwqs
发表于
2015-07-08 00:34:11

【译】29个你必须知道的Linux命令

虽然Linux发行版支持各种各样的饿GUI（graphical user interfaces），但在某些情况下，Linux的命令行接口(bash)仍然是简单快速的。Bash和Linux Shell需要输入命令来完成任务，因而被称为命令行接口。命令是计算机执行任务的指令。可以使用命令去关闭计算机，或者列出当前目录的文件列表，或当前文本的内容，或者屏幕显示一条消息。如果你是一个新手，并尝试使用命令行接口，我们收集了各种基本的Linux命令来供你学习，帮你在各种Linux发行版中完成各种任务。虽然不是很详细，但是对Linux初学者，或普通用火，或管理员都是很有用的。1.ls – Listls会列举出当前工作目录的内容（文件或文件夹），就跟你在GUI中打开一个文件夹去看里面的内容一样。2.mkdir – Make Directorymkdir常见一个新目录3.pwd – Print Working Directorypwd显示当前工作目录4.cd – Change Directory对于当前在终端运行的会中中，cd将给定的文件夹（或目录）设置成当前工作目录。5.rmdir – Remove Directoryrmdir删除给定的目录。6.rm – Removerm会删除给定的文件或文件夹，可以使用rm -r递归删除文件夹7.cp – Copycp命令对文件或文件夹进行复制，可以使用cp ...继续阅读 (17)

dwqs
发表于
2015-07-06 02:08:36

【译】创建优雅表格的8个js工具

当需要呈现数百个表的数据时，展示和可访问性扮演着至关重要的角色。在这种情况下，倘若一个数据网格能够支持大量数据集的HTML Table并提供诸如排序、搜索、过滤和分页等功能，那是棒棒哒。在这篇文章中，将介绍8个用于创建优雅表格的js工具。SigmaGridSigmaGrid是一个开源的Ajax数据表格组件，可以在一个可滚动和可排序的表格中展示和编辑数据。了解更多，戳此：learn moreIngridIngrid是一个低调的JQuery组件，支持数据网格添加行为（列调整、分页、排序和设置列、行的样式等等）了解更多，戳此：learn moreTableKitTableKit基于Prototype框架，用于增强HTML表格的功能。了解更多，戳此：TableKitMyTableGridMyTableGrid是基于JavaScript的数据表格，并依赖于Prototype。它允许你用一种简单灵活的方式来展现你的数据。了解更多，戳此：MyTableGridDataTables – Data Table jQuery pluginDataTables是一个JQuery插件，具有高度的灵活性，添加了高级交互控制。了解更多，戳此：DataTablesjTPS – Datatable jQuery PluginjTPS提供了分页、动画滚动页面和aa智能自然排序能力，是一个JQuery插件。了解更多， ...继续阅读 (17)

dwqs
发表于
2015-07-03 12:38:43

JQuery总结二：DOM遍历和事件处理

1.筛选元素方法返回的元素.filter(selector)与selector匹配的元素.filter(callbaxk)callback中返回true的元素.eq(index)从0开始计数的第index个选中元素.first()选中元素中的第一个元素.last()选中元素的最后一个元素.slice(start[,end])从0开始计数的给定范围内的选中元素.not(selector)与selector不匹配的元素.has(selector)与selector匹配的的后代元素2.后代元素方法返回的元素.find(selector)与selector匹配的后代元素.contents()子节点（包括文本节点）.children([selector])子节点，可传入selector进行筛选3.同辈元素方法返回的元素.next([selector])每个选中元素紧邻的下一个元素，可传入selector进行筛选.nextAll([selector])每个选中元素后的所有同辈元素，可传入selector进行筛选.nextUntil([selector],[filter])每个选中元素之后、直至但不包含第一个和selector匹配的元素，可传入filter进行筛选.prev([selector])每个选中元素紧邻的上一个元素，可传入selector进行筛选.prevAll([selector]) ...继续阅读 (18)

dwqs
发表于
2015-06-30 09:07:24

【译】18个网站优化技巧

快速的页面加载对提升搜索引擎排名、网站转化率和整体的用户体验是非常重要的。网站页面的加载速度也是衡量网站性能的一个重要因素。如果网站不是以最好的性能在运行，迟缓的加载会让你在低的排名和搜索流量上花费更大的代价。页面的加载速度会对用户的行为和转化率产生很大的影响。那么？有哪些简单的方式可以优化加载速度呢？1、图片优化首先，你需要优化你网站上的图片，来获得丝毫加速网站的机会。从原图上移除额外的注解、不必要的空间和无用的颜色，将图片保存为JPEG格式，因为它即使占用空间小，也能保证图片的高质量。对于WordPress网站，建议使用smush.it插件来自动优化网站的图片。如果图片是PNG格式，可以使用tinypng优化图片，提高图片质量。2、开启GZip压缩GZip压缩听起来很复杂，但实际上很简单，被用于减少HTTP请求的大小来缩短响应时间。因为这允许你发送GZip压缩文件而不是HTML文件给浏览器，它将缩短页面等待时间和加载时间。对于Apache服务器，可以将下面的代码添加到.htaccess文件中来开启GZip压缩。mod_gzip_on Yesmod_gzip_dechunk Yesmod_gzip_item_include file .(html?|txt|css|js|php|pl)$mod_gzip_item_include handler ^cgi-script$mod_g ...继续阅读 (19)

dwqs
发表于
2015-06-29 00:48:57

JQuery总结一：选择器归纳

1、基本选择器选择符匹配元素*所有元素id给定ID的元素element给定类型的所有元素.class给定类的所有元素a,b与a或b匹配的元素a ba的后代元素中与b匹配的元素a>ba的直接子元素中与b匹配的元素a+ba的直接同辈元素中与b匹配的元素a~ba的同辈元素中与b匹配的元素2、位置选择器选择符匹配元素a b:nth-child(index)a的子元素中，第index个与b匹配的元素（从1开始计数）a b:nth-child(even)a的子元素中，第偶数个与b匹配的元素（从1开始计数）a b:nth-child(odd)a的子元素中，第奇数个与b匹配的元素（从1开始计数）a b:nth-child(2n+2)a的子元素中，第2n+2个与b匹配的元素（从1开始计数）,n为自然数a b:nth-last-child()同:nth-child()，从最后一个元素开始计数a b:first-childa的子元素中，第1个与b匹配的元素a b:last-childa的子元素中，最后一个个与b匹配的元素:only-child作为其父元素唯一一个子元素的元素a b:nth-of-type()同:nth-child()，只计同类元素a b:nth-last-of-type()同:nth-last-child()，只计同类元素a b:first-of-type()同:first-child( ...继续阅读 (32)

dwqs
发表于
2015-06-26 06:15:02

答读者问（1）：关于学习和实习

考试临近，在我准备开天辟地的预习的时候，收到了一个提问，如下图:在正文之前，首先谢谢这位读者对我的肯定以及精心准备的提问。关于学习红皮书是一本好书，这本书我看过6遍，每一次去看都对过往的知识有新的理解和认知。这是我最喜欢的一本书之一，也是我看的次数最多的，另外一本是《细说PHP》，翻了四遍，不过最后一次看它是大半年之前的事了，因为我转移重心了。回到正题。红皮书可以说是JavaScript很经典的书籍之一，其对闭包、原型、继承、面向对象等知识讲解的比较详细、透彻，值得多翻几遍。个人觉得，无论是Beginner还是developer，这本书都应该是必备的参考书之一。另外的一些不错的书籍如犀牛书、蝴蝶书等等。然而，在实际开发中，因为效率和浏览器的各种兼容问题，却比较少用到原生的JavaScript开发（我自身的经验存在缺陷，这些根据在BAT等工作过的学长得到的反馈）。公司更倾向于用现成的JavaScript框架，如JQuery，这样既能提高开发速度和效率，又能节约人力、时间和产品的开发成本，缩短产品的迭代周期，并且框架能解决大部分的JavaScript兼容问题。而我们去花时间学习原生的JavaScript，能够帮助我们了解这门语言的特性和设计思想。设计思想才是一门语言的精髓（这话完全是为了提高逼格）。一些流行的框架也是需要学习的，如JQuery、ExtJS、Prototype等，它能有利 ...继续阅读 (18)

dwqs
发表于
2015-06-24 04:13:19

【译】Top 10：HTML5、JavaScript 3D游戏引擎和框架

由于很多人都在用JavaScript、HTML5和WebGL技术创建基于浏览器的3D游戏，所有JavaScript 3D游戏引擎是一个人们主题。基于浏览器的游戏最棒的地方是平台独立，它们能在iOS、Android、Windows或其他任何平台上运行。有很多的JavaScript能够用于创建基于浏览器、使用HTML5和WebGL的3D游戏。然后，选择一个合适的游戏引擎是一个不小的挑战，它有时能帮你完成项目或突破项目瓶颈。为了让你的选择变的容易，我们已经通过分析大多数JavaScript 3D游戏引擎在今天的市场并列出了十大游戏引擎来帮助您用JavaScript创建非常棒的HTML5,WebGL游戏。1. Babylon.js毫无疑问，Babylon.JS是最好的JavaScript3D游戏引擎，它能创建可以出售的专业级游戏。Babylon.JS是David Catuhe对3D游戏引擎热爱的结果，他在用DirectX, OpenGL, 和Silverlight创建3D游戏引擎方面是经验丰富，并最终自己完成了一个游戏引擎。Babylon.js的一些核心功能包含了场景图与灯光、摄像机、材料和网格、碰撞引擎、物理引擎、音频引擎和优化引擎。这是一个Babylon.js试验场，你可以拿你手边的游戏来试试这个游戏引擎。2.Three.jsThree.js是另一个广泛应用并且功能强大的JavaScr ...继续阅读 (17)

dwqs
发表于
2015-06-22 02:45:28

ECMAScript 6新特性介绍

箭头函数箭头函数使用=>语法来简化函数，在语句结构上和C#、Java 8 和 CoffeeScript类似，支持表达式和函数体。。=>`操作符左边为输入的参数，而右边则是进行的操作以及返回的值。varsum=(num1,num2)=>num1+num2;// 等同于varsum=function(num1,num2){returnnum1+num2;};关于this，绑定定义时所在的对象，而不是使用时所在的对象。varhandler={id:"123456",init:function(){document.addEventListener("click",event=>this.doSomething(event.type),false);},doSomething:function(type){console.log("Handling "+type+" for "+this.id);}};上面代码的init和doSomething方法中，都使用了箭头函数，它们中的this都绑定handler对象。否则，doSomething方法内部的this对象就指向全局对象，运行时会报错。箭头函数有几个使用注意点。1.函数体内的this对象，绑定定义时所在的对象，而不是使用时所在的对象。2.不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。3.不可以使用argumen ...继续阅读 (14)

dwqs
发表于
2015-06-19 00:20:34

【译】CSS：你未必知道的@规则

at-rule是一个声明，为CSS提供执行或怎么表现的指令。每个声明以@开头,后紧跟一个可用的关键字，这个关键字充当一个标识符，用于表示CSS该做什么。这是一个通用的语法，尽管每个at-rule有其它语法变体。常规规则常规规则遵循下面的语法：@[KEYWORD](RULE);@charset这个规则定义了浏览器使用的字符集，如果样式表包含非ASCII characters(e.g:UTF-8)。注意，被放在HTTP头部的字符集将会覆盖@charset规则@charset"UTF-8";@import这个规则指示请求样式表，在这一行，如果内容是正确的，就会引入一个外部的CSS文件。@import'global.css';虽然流行的CSS预处理器都支持@import，但是应该指出的是，它们的工作原理不同于原生的CSS：预处理器会抓取CSS文件并将它们处理成一个CSS文件，对原生CSS，每一个@import都是一个独立的HTPP请求。@namespace对于将CSS应用在XML HTML（XHTML），这个规则是非常有用的，因为XHTML元素能在CSS中被作为一个选择器使用。/* Namespace for XHTML */@namespaceurl(http://www.w3.org/1999/xhtml);/* Namespace for SVG embedded in XHTML ...继续阅读 (24)

dwqs
发表于
2015-06-17 01:14:03

【译】CSS3:clip-path详解

我的一个学生，Heather Banks,想要实现他在Squarespace看到的一个效果：根据她的以往经验，这个网站的HTML和CSS是完全在她的能力范围以内，于是我帮助她完成了这个效果。显示nav被裁减的效果是一个不简单的任务，我看到图片的第一反应是创建一个相匹配的背景被部分裁剪的图像，然后把它设置为一个after元素。问题是，至少要解决响应式问题，并且响应式并不完全可控的。了解CSS属性：clip-pathclip-path是工作草案的一部分，它是一个通过屏蔽和裁减来隐藏元素的一部分的工具。尽管clip-path没有被主流的浏览器支持（包括IE和Firefox），但在webkit浏览器中，它仍然是一个实现时尚效果的小工具。注意，在现代浏览器中需要使用-webkit-前缀。clip-path简单的工作原理是提供一系列的X和Y值来创建路径。当使用这些值创建一条完整路径时，就会把图像按照路径内部的尺寸进行裁剪。利用clip-path，我们可以创建圆形、椭圆和多边形等不同的形状，创造力是唯一的限制。一个简单的三角形裁减View the code on codepen对元素简单地运用clip-path就能实现上面的效果：.clipClass{-webkit-clip-path:polygon(0100%,50%0,100%100%);}逐步分析很像定位属性，我们需要考虑X值和Y值。X: ...继续阅读 (16)

dwqs
发表于
2015-06-15 01:34:05

因一段JavaScript代码引发的闲扯

前两天，一朋友给我发了一段JavaScript代码：functionf1(){varn=999;nAdd=function(){n+=1};functionf2(){alert(n);}returnf2;}varresult1=f1();varresult2=f1();result1();// 999result2();//999nAdd();result1();// 是999而不是1000，这是为何呢？result2();//1000问题的原型在这里：javascript关于闭包的面试题这里主要利用两个知识点：声明提升和闭包。在JavaScript中，没有用var关键字声明的变量均是隐式的全局变量。首先将全局变量声明提前，代码是这样子：varnAdd=undefined;functionf1(){varn=999;nAdd=function(){n+=1};functionf2(){alert(n);}returnf2;}varresult1=f1();varresult2=f1();result1();// 999result2();//999nAdd();result1();// 是999而不是1000，这是为何呢？result2();//1000然后根据个人理解来解释一下原因：varresult1=f1();varresult2=f1();这里两次调用f1()，因返回的f2 ...继续阅读 (17)

dwqs
发表于
2015-06-12 13:15:00

【译】下一代选择器：CSS4

2014年1月，我写了一篇文章：The Current Generation of CSS3 Selectors，这篇文章的目的是介绍一些CSS3中新增的选择器。文中的选择器已经有了很多文档，并且也被大多数浏览器支持（包括IE9+）。由于Selectors Level 4 specification目前已是工作草案状态，并且Editor’s Draft of the same spec也在进行中(编辑草案通常被视为更有权威)，未来的CSS选择器看起来很明朗了，这篇文章重点介绍没有在之前那篇文章中出现的新选择器。浏览器对这些新特性的支持并不乐观，所以我不建议在生产环境中使用这些新选择器。可以把这篇文章视为当规范进一步完善并且浏览器开始支持CSS4的时候，它会带来什么影响。对于已经被支持的特性，我例举了demo。:read-only 和 :read-write这两个选择器是很简单的。任何可编辑的元素都是read-write状态，反之，元素则是read-only状态。看一下下面HTML:type="text"readonly>type="text"disabled>type="text">contenteditable>CSS如下：:read-only{outline:solid1pxblue;}:read-write{outline:solid1pxred;}对上述代码的分析如下：开始 ...继续阅读 (16)

dwqs
发表于
2015-06-10 01:43:17

美团面试中被问到的问题汇总

美团的面试已经结束了将近半个月了，前后的三轮面试也经过了10天左右（人在广州，都是电话面试），结果也还是好的，顺利拿到了美团的暑期实习。本来不打算写什么面试总结，为什么？看下图：按照0.01%的有效率转化，算了一下，大概也有174篇面试总结够看了。虽然说没有看过这么多，但前前后后也看过50篇上下的面试总结了，看到有点呕吐的感觉了。但是昨晚突然想到对于每一轮面试，都做了一些笔记，为了不浪费这些笔记，就把被问到的问题做了汇总。笔试5.11投的简历，当天收到一份笔试题的git链接，三个笔试题：扩展reduce、异步顺序执行和图形搜索（求n*n矩阵中连续三个数的最大值），时间是一天完成。面试由于是电话面试，面试前需要作的准备：一支笔+一张纸+空阔一点的环境（保证手机信号畅通）+一杯水。一面我的一面主要是技术面试，前后一个钟左右，被问到的问题如下（按照笔记顺序）：自身的缺点和优点自己的职业规划问题说说自己理解比较透彻的一个技术点碰到问题的解决方式（我的方式：思考–>查书–>问人–>谷歌）JavaScript创建对象的方式（四、创建对象的方式）JavaScript对象的继承：（JavaScript的继承方式）Ajax的几种实现方式当时只回答了get、post两种，然后被追问还有没有其他方式，我说我只了解这两种。面试结束后，搜了一下Ajax相关资料，除了get ...继续阅读 (23)

dwqs
发表于
2015-06-09 01:01:18

JavaScript面向对象精要(二)

构造函数和原型对象构造函数也是函数，用new创建对象时调用的函数，与普通函数的一个区别是，其首字母应该大写。但如果将构造函数当作普通函数调用（缺少new关键字），则应该注意this指向的问题。varname="Pomy";functionPer(){console.log("Hello "+this.name);}varper1=newPer();//"Hello undefined"varper2=Per();//"Hello Pomy"使用new时，会自动创建this对象，其类型为构造函数类型，指向对象实例；缺少new关键字，this指向全局对象。可以用instanceof来检测对象类型，同时每个对象在创建时都自动拥有一个constructor属性，指向其构造函数(字面量形式或Object构造函数创建的对象，指向Object，自定义构造函数创建的对象则指向它的构造函数)。console.log(per1instanceofPer);//trueconsole.log(per1.constructor===Per);//true每个对象实例都有一个内部属性：[[Prototype]]，其指向该对象的原型对象。构造函数本身也具有prototype属性指向原型对象。所有创建的对象都共享该原型对象的属性和方法。functionPerson(){}Person.prototype.nam ...继续阅读 (15)