非著名coder的窝

由于项目的原因，项目的前端架构要从单纯的angularjs转到nodejs+angular+express的架构，这样的架构对大家来说可能比较眼熟，没错，就是大名鼎鼎的MEAN (mongodb,express,angularjs,node) framework。随着nodejs技术的日益成熟(当然io.js也逐渐崛起，并且和node重归于好)，和其关联技术必将炙手可热，顺利成章地将全栈的概念更加普

原文链接：http://www.sitepoint.com/practical-guide-angularjs-directives/在angular程序中directive是很重要的组件。尽管Angularjs内置了很多的指令，但是你也经常需要创建特定功能的指令。这篇文章给大家一个指令的基本概述并且详解怎么使用。overviewdirective引进了新的语法声明。directive是通过绑定在D

EcmaScript5.1规范于2011年6月发布，现在主流的浏览器基本上都已经支持，这些浏览起包括IE9、IE10，ff21及其以上，safari6及其以上,opera12及其以上都已经基本支持。具体的测试情况可以在线测试，用来确定你使用的浏览器是否支持。测试网站：http://kangax.github.io/compat-table/es5/详细的5.1规范描述可以下载到pdf文件和html文

前端规范而又完整的编码规范并不多见，如果你想找一个完整的，推荐你看下下面的链接内容，千万不能错过。http://coderlmn.github.io/code-standards/另：jquery编码风格js篇如下：http://contribute.jquery.org/style-guide/js/jquery编码风格html篇如下：http://contribute.jquery.org/st

1、const and for..of loops一个常量不可以被重新赋值,并且不能被重复声明浏览器支持情况：IE11,FF31+,chrome35+,opera2+,safari6+,node0.10+,const a = ‘const_a’; console.log(‘This is a const : ’ + a);//browser supply : FF31+ ,chrome37+,s

1、Iterator浏览器支持情况：FF31+js中提供来很多方法遍历集合中的元素，比如说for, forEach, for …of ,map。在ES6中，iterator是一个对象，提供next()方法依次访问下一个元素。也就是说要使用next()方法，就需要先创建一个iterator对象，先看个例子：var lang = { name: ‘JavaScript’, birthYear: 1995

1、展开运算符(spread (…) operator)以前我们把某一个方法作为某一个对象的方法调用时，方法如下： function ecma(x, y, z) { alert('x:' + x + ", y=" + y + ', z=' + z); }var args = [0, 1, 2];ecma.apply(null, args);有了ECMAScript6就

git是一个分布式的版本控制工具，很轻松的就能管理Github的资源，如果你还在为找不到好的入门资源而苦恼的话，请戳下面的链接：http://backlogtool.com/git-guide/cn/本人也是个git小白，这个学习会往后放一下，以后好好学下。当然我的微博中也有很好的git资源，欢迎查询。微博地址：weibo.com/houyaowei

我们以一个APP成功上线，作为思考的起点，往前推，看看我们需要做些什么？1一个99美元的开发者帐号 嗯，如果不需要真机跑程序，这个可以是最后一步。当然早早买个开发帐号，好处会非常大，看到自己的程序在真机上跑，整个人都兴奋起来，就不用老喝鸡汤。2一个App包 当然，这才是真正难点。所以这里会有大量的细分步骤。1)异常控制 在所有数据都没有问题之后，我们需要反复用各种奇葩操作来把应用搞崩溃，或者把数据搞

1、综述：RequireJS的目标是代码的模块化，它使用了不同于传统

Es5的特性以及发布很长时间了，增加了很多实用的特性(Array的 indexOf、every,some,forEach等，Object的create，keys,isFrozen等)，这些特性已经得到个浏览器的支持，比如：IE9+,FF21+,chrome23+,opera 15+,SF6+都已经基本支持全部特性。详细的特性检测见：http://kangax.github.io/compat-tab

1、xmlHttpRequest level1:xmlHttpRequest是一个浏览器脚本语言，用来给server发送http或者https请求来加载，出于安全考虑，这个只能用于同域访问(还有其他的缺点，比如说不能读取或者上传二进制文件，传送和发送数据时没有进度信息)。Xmlhttprequest概念的形成是源于微软的outlook web access，后来使用这样的概念形成了msxml库，这就

Karma是一个JavaScript的测试运行器。Karma更是一个测试环境，使用Karma可以很方便的的运行测试,今天我们简单地介绍一karma测试环境的搭建和基本的测试，我已经写好了一套测试用例，有谁需要可以私信我。官网如下：http://karma-runner.github.io/0.12/index.html我们总是实现完feature后再编写测试用例，但是根据TDD的原则，开发的流程一般

在使用AngulaJS编写应用时，我们经常需要做的一件事情就是对模型中的变量进行监视，并对其发生的变化做出相应的回应。AngularJS为我们提供了一个非常方便的$watch方法，它可以帮助我们在每个scope中监视其中的变量。下面是一个非常简单的例子：<html ng-app=’myApp’> <head> <meta charset=”UTF-8”>

原文地址：http://angular-tips.com/blog/2013/08/understanding-service-types/Angular中有几种不同类型的services。每一种都有自己的独特用法。需要记住的非常重要的一点是service总是一个单体，无论是哪种类型的service，这是个很被期望的行为。注释：单体是一种设计模式，它限制了每一个类仅能够实例化为一个对象。无论我们在什

前言写本篇文章的初衷是追寻各浏览器对css、js实现性能而码，再说了，个人认为要做个负责前端应该要对其底层有所了解，这样在有的时候对bug能迅捷的对症下药。小熊花了近6个小时搜索相关资料加上本身开发的一些经验总结出本篇。起初开始的小熊只知道IE核心、FF核心、OP核心等（前些年的主流浏览器），而如今风行的Safari(本文简称SF)和Chrome(本文简称GG)，都是Webkit的开源核心，虽然代表

ECMAScript5的strict mode在javascript中是一种限制变量的一种方式。strict mode 不仅仅是一个子集：它的本意就是从正常的代码中有不同的语意。不支持严格模式的浏览器运行严格模式下的代码将有不同的行为，所以不要依靠没有功能测试支持相关方面的严格模式.另外，严格模式和非严格模式的代码可以共存，所以脚本可以选择严格模式。严格模式较正常的JavaScript语义有几项变动

coder比较偏好debug，调试node比较麻烦，我们借助高大上的工具webStorm(我用的是10)来调试node，配置也比较简单，直接上图： 首先，配置node环境，在导航栏选择”Edit/configuration”, wKioL1V2tlSBNlg4AAB_DyzeGkY678 接下来配置 wKiom1V2tM3xYJl8AAKv65JQYfU260 注：javascript f

1、什么是provider provider可以为应用提供通用的服务，所有的服务工厂都是有provider提供的，可以提供字符串，对象等。我们先看下provider的源码：function provider(name, provider_) { assertNotHasOwnProperty(name, ‘service’); if (isFunction(provider_)

原文地址：http://www.smashingmagazine.com/2013/10/29/get-up-running-grunt/这篇文章中，我们将介绍如何在项目使用Grunt让你的网站更快。我们简要分析下grunt能够做什么，如何创建和使用各种插件完成各种繁重的任务。我们将看看如何构建一个简单的表单验证器，使用Sass预处理器，如何使用grunt-cssc和CssMin结合压缩我们的CSS

原文地址：http://javascriptplayground.com/blog/2015/02/promises/?utm_source=javascriptweekly&utm_medium=email这篇文章我们一起来看下在异步编程事怎么拥抱promise，编写良好的代码。这篇不是全面深入地剖析Promise，如果想更全面的了解，Jake Archibald’s post on HTML5

原文地址：http://www.html5rocks.com/zh/tutorials/es6/promises/#toc-api女士们先生们，请准备好迎接 Web 开发历史上一个重大时刻……[鼓声响起]JavaScript 有了原生的 Promise！[漫天的烟花绽放，人群沸腾了]这时候你大概是这三种人之一：你的身边拥挤着欢呼的人群，但是你却不在其中，甚至你还不大清楚“Promise”是什么。你耸

原文地址：http://www.webdeveasy.com/interceptors-in-angularjs-and-useful-examples/AngularJS 的 $http 服务允许我们通过发送 HTTP 请求方式与后台进行通信。在某些情况下，我们希望可以捕获所有的请求，并且在将其发送到服务端之前进行操作。还有一些情况是，我们希望捕获响应，并且在完成调用之前处理。一个很常用的场景就是

最近在探索React相关的东西。Redux本身和React并没有之间的关联，它是一个通用Javscript App模块，用做App State的管理。要在React的项目中使用Redux，比较好的方式是借助react-redux这个库来做连接，这里的意思是，并不是没有react-redux，这两个库就不弄一起用了，而是说react-redux提供了一些封装，一种更科学的代码组织方式，让我们更舒服地在

译者按：近几个月React相关话题依旧火热，相信越来越多的开发者在尝试这样一项技术，我们团队也在PC和移动端不断总结经验。2016来了，这应该是React走向成熟的一年，不管你是新手，还是已经对React有所了解，是时候总结一下最佳实践了，让我们看看国外的开发者总结了哪些好的实践吧~===========译文分割线==============2015可以算是React之年了，关于其版本发布和开发者大

UPDATE: This post has seen a significant change from the first version of the code. It now relies on a much simpler method: a hidden object element that relays its resize event to your listeners.DOM El

During your coding adventures, you may have run into occasions where you wanted to know when an element in your document changed dimensions – basically the window resize event, but on regular elements.

这两者太容易混淆了，简单来说，DOM对象拥有property属性，是一种特定的变量，property可以指定为任意的变量，如字符串，数字，对象等，jquery1.6以后的版本可以使用$.prop(key)方法获得properties，举个例子Hi$(‘#linkID’).prop(‘href’); // returns “http://example.com/page2.html” (‘#link

from:http://www.html5rocks.com/zh/tutorials/webcomponents/shadowdom/IntroductionWeb Components is a set of cutting edge standards that:Make it possible to build widgets …which can be reused reliably

from:http://www.html5rocks.com/en/tutorials/webcomponents/customelements/IntroductionThe web severely lacks expression. To see what I mean, take a peek at a “modern” web app like Gmail: There’s noth

在做图片管理或者人员信息管理（比如说头像上传）时，总会涉及到图片上传和图片预览的问题，通常会有两种解决方案做图片上传预览，第一种方案是先将图片“偷偷滴”传到server，然后server返回图片的url，在客户端的img标签中将src属性设置为刚返回的url。这种方式显然消耗了额外的带宽，因为包含了上传和下载过程。第二种方案是上传前就进行预览，下面我们看下解决方案： IE下图片浏览处理 IE中的

“喂喂喂，那个切图的，把页面写好就发给研发工程师套模板吧。”你好，切图仔。不知道你的团队如何定义前端开发，据我所知，时至今日仍然有很多团队会把前端开发归类为产品或者设计岗位，虽然身份之争多少有些无谓，但我对这种偏见还是心存芥蒂，酝酿了许久，决定写一个系列的文章，试着从工程的角度系统的介绍一下我对前端，尤其是Web前端的理解。只要我们还把自己的工作看作为一项软件开发活动，那么我相信读过下面的内容你也一

DevOps1 与大数据和PRISM（NSA的监控项目之一），DevOps（开发运维）如今是科技人士挂在嘴边的热词，但遗憾的是，类似圣经，每个人都引用DevOps的只言片语，但真正理解并能执行的人极少。根据CA的一项调查，45%的受访者并不了解DevOps的含义，其余则有17%认为DevOps只不过是炒作。DevOps如今几乎成了创新的同义词，但其原本的含义却在业界的流传中被人们弃之脑后。在开发者

你是什么样的前端coder？ 前端（html＋css＋javascript，我说的和框架无关，框架如果你不读源码的话，你也只是会用而已，代码搬运工。），入门容易，想精通，难上加难。总之，是各种坑各种兼容处理，你如果是一个front－end,你一定有相同的体会。初级问题直接撇过去，如果基础的东西都没有搞掂，就没法混了，也走不远。上一点高级问题： css： 你能做移动终端碎片化适配吗？css3的原

From：Why use Redux over Facebook Flux? redux是不同于flux的。尽管它们是相同的框架，但是redux可以通过方法组合的方法减少复杂的累积，而flux通过注册回调方法实现的。 虽然这不是最基础的区别，但是redux却可以实现更轻松的抽象，或者说容易实现，然而在flux中是很难或者不容易实现的。Reducer 组合 以分页为例，使用flux＋react

From : State of the Art JavaScript in 2016 So, you’re starting a brand new JavaScript front end project or overhauling an old one, and maybe you haven’t kept up with the breakneck pace of the ecosyste

来自：http://www.cnblogs.com/rubylouvre/p/3990290.html这里说的隐性类型转换，是==引起的转换。1、如果存在NaN，一律返回false 2、再看有没有布尔，有布尔就将布尔转换为数字 3、接着看有没有字符串, 有三种情况，对方是对象，对象使用toString进行转换；对方是数字，字符串转数字；对方是字符串，直接比较；其他返回false 4、如果是数字

先上代码： var randomNum = (function(){ var today = new Date(); var seed = today.getTime(); function rnd(){ seed = ( seed * 9301 + 49297 ) % 233280; return seed / ( 233280.0 ); }; return function ra

From:http://taligarsiel.com/Projects/howbrowserswork1.htm引子： 浏览器可能是我们最经常使用的软件了。在这章节我将解释浏览器怎么运行的背后。我们将看到当你在地址栏输入google.com后到浏览器打开Google主页这段时间内都发生了什么事情。我们讨论的浏览器 当今主流浏览器有五类： Internet Explorer, Firefox,

引子 当我们安装了一个Ubuntu14.04 server的时候，我们需要简单的配置步骤来为服务的安装做些准备，这样做可以提高服务器的安全性和易用性，也是为后续的操作提供基础。第一步：使用Root用户登录 登录server，你当然要知道server的IP地址和root用户密码，然后使用root用户登录。首先，客户端使用putty或者xshell登录，请注意root权限是Linux系统的最高权限，