css
关注
分享
扫一扫
文章平均质量分 72
非著名coder
一个非著名coder，喜欢折腾前端各种技术。也慢慢向后端渗透。个人网站：http://www.houyuewei.cn
展开
-
也玩图片预览
在做图片管理或者人员信息管理（比如说头像上传）时，总会涉及到图片上传和图片预览的问题，通常会有两种解决方案做图片上传预览，第一种方案是先将图片“偷偷滴”传到server，然后server返回图片的url，在客户端的img标签中将src属性设置为刚返回的url。这种方式显然消耗了额外的带宽，因为包含了上传和下载过程。第二种方案是上传前就进行预览，下面我们看下解决方案： IE下图片浏览处理 IE中的原创 2016-05-18 14:31:32 · 356 阅读 · 0 评论 -
angularjs培训之service
原文地址：http://angular-tips.com/blog/2013/08/understanding-service-types/Angular中有几种不同类型的services。每一种都有自己的独特用法。需要记住的非常重要的一点是service总是一个单体，无论是哪种类型的service，这是个很被期望的行为。注释：单体是一种设计模式，它限制了每一个类仅能够实例化为一个对象。无论我们在什转载 2016-05-18 15:55:54 · 283 阅读 · 0 评论 -
angularjs中的$watch
在使用AngulaJS编写应用时，我们经常需要做的一件事情就是对模型中的变量进行监视，并对其发生的变化做出相应的回应。AngularJS为我们提供了一个非常方便的$watch方法，它可以帮助我们在每个scope中监视其中的变量。下面是一个非常简单的例子：<html ng-app=’myApp’> <head> <meta charset=”UTF-8”>原创 2016-05-18 15:54:04 · 729 阅读 · 0 评论 -
Karma测试环境搭建
Karma是一个JavaScript的测试运行器。Karma更是一个测试环境，使用Karma可以很方便的的运行测试,今天我们简单地介绍一karma测试环境的搭建和基本的测试，我已经写好了一套测试用例，有谁需要可以私信我。官网如下：http://karma-runner.github.io/0.12/index.html我们总是实现完feature后再编写测试用例，但是根据TDD的原则，开发的流程一般原创 2016-05-18 15:52:11 · 1650 阅读 · 0 评论 -
XMLHttpRequest level2介绍
1、xmlHttpRequest level1:xmlHttpRequest是一个浏览器脚本语言，用来给server发送http或者https请求来加载，出于安全考虑，这个只能用于同域访问(还有其他的缺点，比如说不能读取或者上传二进制文件，传送和发送数据时没有进度信息)。Xmlhttprequest概念的形成是源于微软的outlook web access，后来使用这样的概念形成了msxml库，这就原创 2016-05-18 15:51:48 · 682 阅读 · 0 评论 -
ECMAScript5特性介绍之数组篇
Es5的特性以及发布很长时间了，增加了很多实用的特性(Array的 indexOf、every,some,forEach等，Object的create，keys,isFrozen等)，这些特性已经得到个浏览器的支持，比如：IE9+,FF21+,chrome23+,opera 15+,SF6+都已经基本支持全部特性。详细的特性检测见：http://kangax.github.io/compat-tab原创 2016-05-18 15:50:31 · 508 阅读 · 0 评论 -
异步加载的requirejs，你值得拥有
1、综述：RequireJS的目标是代码的模块化，它使用了不同于传统原创 2016-05-18 15:48:37 · 480 阅读 · 0 评论 -
开发流程告诉你，为什么是软件工程师而不是码农
我们以一个APP成功上线，作为思考的起点，往前推，看看我们需要做些什么？1一个99美元的开发者帐号 嗯，如果不需要真机跑程序，这个可以是最后一步。当然早早买个开发帐号，好处会非常大，看到自己的程序在真机上跑，整个人都兴奋起来，就不用老喝鸡汤。2一个App包 当然，这才是真正难点。所以这里会有大量的细分步骤。1)异常控制 在所有数据都没有问题之后，我们需要反复用各种奇葩操作来把应用搞崩溃，或者把数据搞原创 2016-05-18 15:42:26 · 2134 阅读 · 0 评论 -
一般人都能看懂的git教程
git是一个分布式的版本控制工具，很轻松的就能管理Github的资源，如果你还在为找不到好的入门资源而苦恼的话，请戳下面的链接：http://backlogtool.com/git-guide/cn/本人也是个git小白，这个学习会往后放一下，以后好好学下。当然我的微博中也有很好的git资源，欢迎查询。微博地址：weibo.com/houyaowei原创 2016-05-18 15:41:56 · 424 阅读 · 0 评论 -
ECMAScript6学习之三
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就原创 2016-05-18 15:40:09 · 610 阅读 · 0 评论 -
EcmaScript6学习之二
1、Iterator浏览器支持情况：FF31+js中提供来很多方法遍历集合中的元素，比如说for, forEach, for …of ,map。在ES6中，iterator是一个对象，提供next()方法依次访问下一个元素。也就是说要使用next()方法，就需要先创建一个iterator对象，先看个例子：var lang = { name: ‘JavaScript’, birthYear: 1995原创 2016-05-18 15:39:28 · 487 阅读 · 0 评论 -
EcmaScript6学习之入门
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原创 2016-05-18 15:36:45 · 493 阅读 · 0 评论 -
发现了个很好的前端代码规范和最佳实践，mark一下
前端规范而又完整的编码规范并不多见，如果你想找一个完整的，推荐你看下下面的链接内容，千万不能错过。http://coderlmn.github.io/code-standards/另：jquery编码风格js篇如下：http://contribute.jquery.org/style-guide/js/jquery编码风格html篇如下：http://contribute.jquery.org/st原创 2016-05-18 15:36:10 · 518 阅读 · 0 评论 -
EcmaScript5和EcmaScript6规范一览表
EcmaScript5.1规范于2011年6月发布，现在主流的浏览器基本上都已经支持，这些浏览起包括IE9、IE10，ff21及其以上，safari6及其以上,opera12及其以上都已经基本支持。具体的测试情况可以在线测试，用来确定你使用的浏览器是否支持。测试网站：http://kangax.github.io/compat-table/es5/详细的5.1规范描述可以下载到pdf文件和html文原创 2016-05-18 15:35:37 · 4617 阅读 · 0 评论 -
[转载]汇总各浏览器核心(js引擎及排版引擎)深究
前言写本篇文章的初衷是追寻各浏览器对css、js实现性能而码，再说了，个人认为要做个负责前端应该要对其底层有所了解，这样在有的时候对bug能迅捷的对症下药。小熊花了近6个小时搜索相关资料加上本身开发的一些经验总结出本篇。起初开始的小熊只知道IE核心、FF核心、OP核心等（前些年的主流浏览器），而如今风行的Safari(本文简称SF)和Chrome(本文简称GG)，都是Webkit的开源核心，虽然代表转载 2016-05-18 16:01:56 · 1020 阅读 · 0 评论 -
自己构建mean framework
由于项目的原因，项目的前端架构要从单纯的angularjs转到nodejs+angular+express的架构，这样的架构对大家来说可能比较眼熟，没错，就是大名鼎鼎的MEAN (mongodb,express,angularjs,node) framework。随着nodejs技术的日益成熟(当然io.js也逐渐崛起，并且和node重归于好)，和其关联技术必将炙手可热，顺利成章地将全栈的概念更加普转载 2016-05-18 16:02:30 · 681 阅读 · 0 评论 -
[Repost]Custom Elements defining new elements in HTML
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转载 2016-05-18 14:25:15 · 573 阅读 · 0 评论 -
[Repost]Shadow DOM 101
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转载 2016-05-18 14:24:17 · 508 阅读 · 0 评论 -
Attribute vs property
这两者太容易混淆了，简单来说，DOM对象拥有property属性，是一种特定的变量，property可以指定为任意的变量，如字符串，数字，对象等，jquery1.6以后的版本可以使用$.prop(key)方法获得properties，举个例子Hi$(‘#linkID’).prop(‘href’); // returns “http://example.com/page2.html” (‘#link原创 2016-05-18 14:28:32 · 413 阅读 · 0 评论 -
[Repost]Cross-Browser, Event-based, Element Resize Detection ，the 1st version
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.转载 2016-05-18 14:27:29 · 365 阅读 · 0 评论 -
[Repost]Cross-Browser, Event-based, Element Resize Detection ，the 2nd version
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转载 2016-05-18 14:25:59 · 458 阅读 · 0 评论 -
[转载]React.js 2016 最佳实践
译者按：近几个月React相关话题依旧火热，相信越来越多的开发者在尝试这样一项技术，我们团队也在PC和移动端不断总结经验。2016来了，这应该是React走向成熟的一年，不管你是新手，还是已经对React有所了解，是时候总结一下最佳实践了，让我们看看国外的开发者总结了哪些好的实践吧~===========译文分割线==============2015可以算是React之年了，关于其版本发布和开发者大转载 2016-05-18 14:11:51 · 1090 阅读 · 0 评论 -
React和Redux的连接react-redux
最近在探索React相关的东西。Redux本身和React并没有之间的关联，它是一个通用Javscript App模块，用做App State的管理。要在React的项目中使用Redux，比较好的方式是借助react-redux这个库来做连接，这里的意思是，并不是没有react-redux，这两个库就不弄一起用了，而是说react-redux提供了一些封装，一种更科学的代码组织方式，让我们更舒服地在原创 2016-05-18 14:11:04 · 370 阅读 · 0 评论 -
angularjs中的interceptor和挺好的例子
原文地址：http://www.webdeveasy.com/interceptors-in-angularjs-and-useful-examples/AngularJS 的 $http 服务允许我们通过发送 HTTP 请求方式与后台进行通信。在某些情况下，我们希望可以捕获所有的请求，并且在将其发送到服务端之前进行操作。还有一些情况是，我们希望捕获响应，并且在完成调用之前处理。一个很常用的场景就是转载 2016-05-18 15:56:19 · 543 阅读 · 0 评论 -
javascript Promises
原文地址：http://www.html5rocks.com/zh/tutorials/es6/promises/#toc-api女士们先生们，请准备好迎接 Web 开发历史上一个重大时刻……[鼓声响起]JavaScript 有了原生的 Promise！[漫天的烟花绽放，人群沸腾了]这时候你大概是这三种人之一：你的身边拥挤着欢呼的人群，但是你却不在其中，甚至你还不大清楚“Promise”是什么。你耸转载 2016-05-18 15:53:36 · 580 阅读 · 0 评论 -
拥抱javascript的Promise
原文地址：http://javascriptplayground.com/blog/2015/02/promises/?utm_source=javascriptweekly&utm_medium=email这篇文章我们一起来看下在异步编程事怎么拥抱promise，编写良好的代码。这篇不是全面深入地剖析Promise，如果想更全面的了解，Jake Archibald’s post on HTML5转载 2016-05-18 15:52:45 · 524 阅读 · 0 评论 -
使用Grunt启动和运行
原文地址：http://www.smashingmagazine.com/2013/10/29/get-up-running-grunt/这篇文章中，我们将介绍如何在项目使用Grunt让你的网站更快。我们简要分析下grunt能够做什么，如何创建和使用各种插件完成各种繁重的任务。我们将看看如何构建一个简单的表单验证器，使用Sass预处理器，如何使用grunt-cssc和CssMin结合压缩我们的CSS转载 2016-05-18 15:56:53 · 2250 阅读 · 1 评论 -
搞颠provider,factory 和service
1、什么是provider provider可以为应用提供通用的服务，所有的服务工厂都是有provider提供的，可以提供字符串，对象等。我们先看下provider的源码：function provider(name, provider_) { assertNotHasOwnProperty(name, ‘service’); if (isFunction(provider_)原创 2016-05-18 16:04:49 · 757 阅读 · 0 评论 -
使用WebStorm调试node工程
coder比较偏好debug，调试node比较麻烦，我们借助高大上的工具webStorm(我用的是10)来调试node，配置也比较简单，直接上图： 首先，配置node环境，在导航栏选择”Edit/configuration”, wKioL1V2tlSBNlg4AAB_DyzeGkY678 接下来配置 wKiom1V2tM3xYJl8AAKv65JQYfU260 注：javascript f原创 2016-05-18 16:03:11 · 1055 阅读 · 0 评论 -
angularjs培训之directive（1）
原文链接：http://www.sitepoint.com/practical-guide-angularjs-directives/在angular程序中directive是很重要的组件。尽管Angularjs内置了很多的指令，但是你也经常需要创建特定功能的指令。这篇文章给大家一个指令的基本概述并且详解怎么使用。overviewdirective引进了新的语法声明。directive是通过绑定在D原创 2016-05-18 15:35:09 · 292 阅读 · 0 评论 -
javascript中的严格模式
ECMAScript5的strict mode在javascript中是一种限制变量的一种方式。strict mode 不仅仅是一个子集：它的本意就是从正常的代码中有不同的语意。不支持严格模式的浏览器运行严格模式下的代码将有不同的行为，所以不要依靠没有功能测试支持相关方面的严格模式.另外，严格模式和非严格模式的代码可以共存，所以脚本可以选择严格模式。严格模式较正常的JavaScript语义有几项变动原创 2016-05-18 15:34:34 · 622 阅读 · 0 评论 -
js中的墙头草—this
在Java中，this永远都是‘忠贞’地指向当前类的实例。而在javascript中，this就没有“忠贞”了，this会随着执行环境的变化而变化，也就是说this永远执行执行环境所在的对象。直接上代码：代码一：function test(){ alert(this == window) } test() 通过运行代码发现结果为true，这是因为test方法的调用时在window环原创 2016-05-18 15:33:48 · 338 阅读 · 0 评论 -
Understanding process.nextTick()
I have seen quite a few people being confused about process.nextTick(). Let’s take a look at what process.nextTick() does, and when to use it.As you might already know, every Node application runs on a原创 2016-05-18 14:39:27 · 365 阅读 · 0 评论 -
开源license
开放源代码的定义由Bruce Perens（曾是Debian的创始人之一）定义如下：自由再散布（Free Distribution）：获得源代码的人可自由再将此源代码散布。 源代码（Source Code）：程序式的可执行档在散布时，必需随附完整源代码或是可让人方便的事后取得源代码。 衍生著作（Derived Works）：让人可依此源代码修改后，在依照同一授权条款的情形下再散布。原创作者程式源原创 2016-05-18 14:38:41 · 1405 阅读 · 0 评论 -
Mocking Dependencies in AngularJS Tests
From :http://www.sitepoint.com/mocking-dependencies-angularjs-tests/AngularJS was designed with testing in mind. The source code of the framework is tested really well and any code written using the fr原创 2016-05-18 14:38:10 · 446 阅读 · 0 评论 -
［知乎问题］如何衡量一个人的angularjs水平？
前一段时间在知乎上看到 民工精髓回答的一个帖子，关于衡量angularjs水平的问题。结合自身检查了下，感觉自己还是处于初级水平，现在把这些问题记录下，以后作为关注和学习的重点。angular的数据绑定采用什么机制？详述原理两个平级界面块a和b，如果a中触发一个事件，有哪些方式能让b知道，详述原理一个angular应用应当如何良好地分层？angular应用常用哪些路由库，各自的区别是什么？原创 2016-05-18 14:37:19 · 4442 阅读 · 0 评论 -
前端性能优化概述
对于web程序，快速的页面载入速度给用户很好的使用体验，试想，当用户浏览你的个人网站时，网页半天都没有打开，或者打开后由于css文件或者js文件加载失败导致页面巨丑无比，用户的脑袋中可能只有一个想法，这是个嘛玩意儿！这样的结果恐怕也不是你建个人网站的初衷，个人网站无非就几个目的：知识传播，个人推广，知识积累。如果一个差点用户体验，都会把你的最初的好的构想夷为平地。当然你也还有几种提高网站速度的办法：原创 2016-05-18 14:32:35 · 548 阅读 · 0 评论 -
install nginx on ubuntu
引子 当我们安装了一个Ubuntu14.04 server的时候，我们需要简单的配置步骤来为服务的安装做些准备，这样做可以提高服务器的安全性和易用性，也是为后续的操作提供基础。第一步：使用Root用户登录 登录server，你当然要知道server的IP地址和root用户密码，然后使用root用户登录。首先，客户端使用putty或者xshell登录，请注意root权限是Linux系统的最高权限，原创 2016-05-18 14:32:07 · 455 阅读 · 0 评论 -
[翻译]浏览器是怎么工作的
From:http://taligarsiel.com/Projects/howbrowserswork1.htm引子： 浏览器可能是我们最经常使用的软件了。在这章节我将解释浏览器怎么运行的背后。我们将看到当你在地址栏输入google.com后到浏览器打开Google主页这段时间内都发生了什么事情。我们讨论的浏览器 当今主流浏览器有五类： Internet Explorer, Firefox,翻译 2016-05-18 14:30:41 · 2789 阅读 · 0 评论 -
js的随机数生成器，不再使用Math.random
先上代码： 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原创 2016-05-18 14:29:42 · 4119 阅读 · 0 评论