代码改变世界

随笔分类 - WebForm

JavaScript单线程和浏览器事件循环简述

2015-10-29 23:48 by 破狼, 6017 阅读, 收藏, 编辑
摘要:在上篇博客《Promise的前世今生和妙用技巧》的开篇中,我们曾简述了JavaScript的单线程机制和浏览器的事件模型。应很多网友的回复,在这篇文章中将继续展开这一个话题。当然这里是博主的一些理解,如果还存在什么纰漏的话,请不吝指教。 JavaScript这门语言运行在浏览器中,是以单线程的方式运行的。说到单线程,就得从操作系统进程开始说起。进程和线程都是操作系统的概念。进程是应用程序的执行实例,每一个进程都是由私有的虚拟地址空间、代码、数据和其它系统资源所组成;进程在运行过程中能够申请创建和使用系统资源(如独立的内存区域等),这些资源也会随着进程的终止而被销毁。而线程则是进程内的一个独立执行单元,在不同的线程之间是可以共享进程资源的,所以在多线程的情况下,需要特别注意对临界资源的访问控制 阅读全文

Promise的前世今生和妙用技巧

2015-10-22 19:43 by 破狼, 13773 阅读, 收藏, 编辑
摘要:浏览器事件模型和回调机制 JavaScript作为单线程运行于浏览器之中,这是每本JavaScript教科书中都会被提到的。同时出于对UI线程操作的安全性考虑,JavaScript和UI线程也处于同一个线程中。因此对于长时间的耗时操作,将会阻塞UI的响应。为了更好的UI体验,应该尽量的避免JavaScript中执行较长耗时的操作(如大量for循环的对象diff等)或者是长时间I/O阻塞的任务。所以在浏览器中的大多数任务都是异步(无阻塞)执行的,例如:鼠标点击事件、窗口大小拖拉事件、定时器触发事件、Ajax完成回调事件等。当每一个异步事件完成时,它都将被放入一个叫做”浏览器事件队列“中的事件池中去。而这些被放在事件池中的任务,将会被javascript引擎单线程处理的一个一个的处理,当在此次处理中再次遇见的异步任务,它们也会被放到事件池中去,等待下一 阅读全文

CSS尺寸和字体单位-em、px还是%

2015-10-10 11:35 by 破狼, 25318 阅读, 收藏, 编辑
摘要:在页面整体布局中,页面元素的尺寸大小(长度、宽度、内外边距等)和页面字体的大小也是重要的工作之一。一个合理设置,则会让页面看起来层次分明,重点鲜明,赏心悦目。反之,一个不友好的页面尺寸和字体大小设置,则会增加页面的复杂性,增加用户对页面理解的复杂性;甚至在当下访问终端(iPhone、iPad、PC、... 阅读全文

HTML5特性速记图

2015-09-15 15:10 by 破狼, 1256 阅读, 收藏, 编辑
摘要:今天推荐大家一张HTML5特性速记图,供大家平时查阅,也可以打印放在电脑旁帮助速记、速查。此图笔者收集于网络图片。 阅读全文

Swagger - 前后端分离后的契约

2015-07-29 15:55 by 破狼, 129132 阅读, 收藏, 编辑
摘要:前后端分离按照现在的趋势,前后端分离几乎已经是业界对开发和部署方式所达成的一种共识。所谓的前后端分离,并不是传统行业中的按部门划分,一部分人只做前端(HTML/CSS/JavaScript等等),另一部分人只做后端(或者叫服务端),因为这种方式是不工作的:比如很多团队采取了后端的模板技术(JSP, ... 阅读全文

Ng Http Request/response格式转换

2014-09-03 08:19 by 破狼, 4783 阅读, 收藏, 编辑
摘要:angular作为Single Page Application推荐的交互方式当然是基于json的ajax调用。但今天要说的是当你不幸工作在一个遗留或者不可控制的服务上,而这服务是基于非json提交方式(或许是常规表单(form)提交,或者其他自定义数据格式),那么我们只能改变ng内部$http默认... 阅读全文

细说angular Form addControl方法

2014-02-22 09:30 by 破狼, 9345 阅读, 收藏, 编辑
摘要:在本篇博文中,我们将接触angular的验证。angular的验证是由form 指令和ngModel协调完成的。今天博主在这里想要说的是在验证在的一种特殊情况,当验证控件没有没有name属性这是不会被form捕获的。或者是你希望在ngRepeat中使用动态表达式。下面且让我们先来从angular源码中看起如下:首先是ngModel: var ngModelDirective = function() { return { require: ['ngModel', '^?form'], controller: NgModelController, ... 阅读全文

Angularjs中文版本开发指南发布

2014-02-16 15:49 by 破狼, 46700 阅读, 收藏, 编辑
摘要:从本人开始在写关于Angularjs的文章开始,也算是见证了Angularjs在国内慢慢的火起来,如今的Angularjs正式如日中天。想知道为什么Angularjs会这么火,请移步angularjs移除不必要的$watch.也是一次偶然的机会,在Angular.js中文社区群里相遇一群Angula... 阅读全文

为Angularjs ngOptions加上index解决方案

2014-02-15 22:33 by 破狼, 16044 阅读, 收藏, 编辑
摘要:今天在Angularjs交流群中有位童学问道如何为Angular select的ngOptions像Angularjs的ngRepeat一样加上一个索引$index.其实对于这个问题来说Angular本身并未提供$index之类的变量供使用。但是也不是说对于这个问题我们就没有解决方案。把这个问题换成角度来看,我们所需要的就是js数组的下标,所以我们如果我们能够在对象上加入下标,使用表达式作为option的label就能解决了。但是第一印象让我想起的是js数组本来就是一个key/value的对象,只是key为数组下标而已,所以有了如下之设计:html: js:$scope.getDesc1 =. 阅读全文

angularjs组件之input mask

2013-12-15 20:36 by 破狼, 14805 阅读, 收藏, 编辑
摘要:今天将奉献一个在在几个angularjs项目中抽离的angular组件 input mask。在我们开发中经常会对用户的输入进行控制,比如日期,货币格式,或者纯数字格式之类的限制,这就是input mask的使用场景,在项目中也是会经常被提及需的需求之一。当然在官方的angular-ui ui-utils中有一个相应的组件叫做ui-mask,但是其mask功能是很初级脆弱的。所以我希望能得到一个更强大的mask组件。我所知的jquery.inputmask就是这样一个我所期望的强大的mask组件,所以我不必再去重造轮子,好的软件就是为了不停被重复利用。所以写了一个adapter,https:/ 阅读全文

angular ng-model类型格式转化

2013-12-15 09:43 by 破狼, 24796 阅读, 收藏, 编辑
摘要:在angular开发中我们经常会遇见输入框中的string的值,却想在scope上的model表现为整型、浮点、货币,或者在radio的value是一个true,false的Boolean类型,一组check box的vlue组成一个Array的数组类型,因为我们的后台程序的model设计接口如此。你是否还在后台应用程序或者ajax提交前做mapper,还在重复着着伪angular的做法?在本人github创建了一个开源项目[https://github.com/greengerong/ngmodel-format](https://github.com/greengerong/ngmodel 阅读全文

生成PDF的新选择-Phantomjs

2013-12-10 20:35 by 破狼, 15491 阅读, 收藏, 编辑
摘要:最近在node.js项目开发中,遇见生成PDF的需求,当然生成PDF不是一个新意的需求;我可以选择利用开源的pdfkit或者其他node pdf模块,或者通过edge.js调用.net/python下的pdf库去做生成pdf。但是在我看来对于这些东西不管如何也需要花费我们太多的时间(pdf报表的内容... 阅读全文

prerender-SPA程序的SEO优化策略

2013-12-09 01:22 by 破狼, 11885 阅读, 收藏, 编辑
摘要:随着web2.0的兴起,ajax的时代已经成为了事实,更如今Knockout,backbone, angular,ember前端MDV(model driver view)框架强势而来,Single Page Application已经为大家所熟悉了。如今常见的SPA程序,restfull和前端MDV之类的框架能够实实在在的减少我们的代码开发量,让我更多的注意力关注在真正的业务逻辑上。在众多前端MDV框架从博客中可以看出来笔者还是钟爱于angular,然而服务端平台的选择的话:在.net平台笔者会首选webapi+oData,jvm平台spring restfull。但是相应带来的是搜索引擎优 阅读全文

利用Node.js为Node.js生成HttpStatusCode辅助类并发布到npm

2013-04-09 00:07 by 破狼, 3025 阅读, 收藏, 编辑
摘要:作为一个好的Restfull Api不仅在于service url的语义,可读性,幂等,正交,作为http状态码也很重要,一个好的Http Status Code给使用者一个很好的响应,比如200表示正常成功,201表示创建成功,409冲突,404资源不存在等等。所以在做一个基于node.js+mongodb+angularjs的demo时发现node.js express没有提供相应的辅助类,但是本人不喜欢将201,404这类毫无语言层次语义的东西到处充斥着,所以最后决定自己写一个,但是同时本人也很懒,不喜欢做重复的苦力活,怎么办?那就从我最熟悉的c#中HttpStatusCode枚举中c. 阅读全文

Angularjs的IOC Inject分析

2013-03-27 00:50 by 破狼, 10241 阅读, 收藏, 编辑
摘要:在上一篇《Angularjs开发一些经验总结》中提到angular开发中的IOC inject优先,所以在这节将引用angularjs的注入代码来分析angularjs的注入方式。在《再谈angularjs DI(Dependency Injection)》中提到angularjs的注入方式分为3中方式,如果你还不清楚的请移步。推断式注入:在angularjs中我们可以在我们需要注入的地方按照名称注入,这里要求参数名称必须和注入服务实例名称相同,一种名称约定,angularjs会提取参数名称查找相应DI实例注入;:标记注入:在angularjs中我们可以利用$inject标注DI注入,这里需. 阅读全文

(转载)JavaScript大师Nicholas C. Zakas谈TypeScript

2012-12-20 21:58 by 破狼, 798 阅读, 收藏, 编辑
摘要:在Web领域,几乎每周都会出现新的语言来试图取代JavaScript,比如谷歌推出的Dart就是想解决所有JavaScript不能修复的根本性问题;后来CoffeeScript的出现更煽动了这场取代JavaScript的战争。现在,微软也加入了,这不禁让我想知道为什么?[CSDN.NET 张红月/编译] 前段时间,微软发布了TypeScript语言,这个项目主要的负责人是 Anders Hejlsberg (C#、TurboPascal 之父)。TypeScript提供了类、模块和接口来帮助您构建健壮的组件,它可以帮助 JavaScript开发人员更容易地编写和维护应用程序。这似乎预示着微软正 阅读全文

开源:Angularjs示例--Sonar中项目使用语言分布图(CoffeeScript版)

2012-12-20 21:50 by 破狼, 3482 阅读, 收藏, 编辑
摘要:关于SonarLanguage是什么东东,这里就不在描述了,如果你对它感兴趣的话,请移步到上篇随笔开源:Angularjs示例--Sonar中项目使用语言分布图。这里是最近学习CoffeeScript的练习版。 CoffeeScript是一门简洁的,构架于JavaScript之上的预处理器语言,可以静态编译成JavaScript,语法主要受ruby和python影响,目前已经为众多rails和node项目采用。CoffeeScript不是JavaScript的超集,也不是完全替代品。CoffeeScript有点在于:更少,更紧凑,和更清晰的代码通过规避和改变对JavaScript中不良部分的. 阅读全文

angularjs 过滤器filter

2012-10-31 23:36 by 破狼, 43385 阅读, 收藏, 编辑
摘要:在前面介绍angularjs已经很多了,中途由于工作和一切生活琐事,暂停了很久。今天在这里将继续angularjs讲解,这节我们来看看angularjs的过滤去filter。 在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化,才能显示给用户。比如时间本地化,或者yyyy-MM-dd HH:mm:ss格式,数字精度格式化,本地化,人名格式化等等。在angularjs中为我们提供了叫filter的指令,让我们能够很轻易就能做到着一些列的功能,angularjs内部为我们提供了number等很多内置的filter。并且我们能够很轻易的自定义自己的领域filter。 如下实例:html:. 阅读全文

angularjs表达式-Expression

2012-09-14 00:28 by 破狼, 25490 阅读, 收藏, 编辑
摘要:紧接上节谈到再谈angularjs DI(Dependency Injection),在这里介绍关于angularjs的表达式expression。expression指的是javascript的一小片段代码,通常用于绑定(binding)例如:{{ expression }}。在angularjs中是通过$parse service解析。 $parse用法: $parse(expression); 参数:javascript代码片段。 返回值:{function(context, locals)},表达式编译结果: context:嵌入表达式执行的作用于scope。 locals:... 阅读全文

再谈angularjs DI(Dependency Injection)

2012-09-11 19:42 by 破狼, 11184 阅读, 收藏, 编辑
摘要:在前面已经介绍了关于angularjs,以及扩展了一些jQuery ui的一些组件为angularjs的directive。在这里应进口007 在上篇留言我们来看看在angularjs中的DI特性。 DI:依赖注入,是一种软件设计模式,应DIP依赖倒置原则,描述组件之间高层组件不应该依赖于底层组件。依赖倒置是指实现和接口倒置,采用自顶向下的方式关注所需的底层组件接口,而不是其实现。其应用框架则为IOC,在.net中有很多我们熟悉的IOC框架,如Unity,Castle windsor,Ninject,Autofact等等,其常常分为构造注入,函数注入,属性注。同时在IOC和Service L. 阅读全文