标签前端下的文章

Jerry Bendy 发布于 04月26, 2016

【译】创建自定义angularJS指令(六)- 使用控制器

基础独立作用域独立作用域和函数参数transclude与restrictlink函数使用控制器CreatingaUniqueValueDirectiveusing$asyncValidators在这个AngularJS指令系列的文章中你已经了解到一些指令的关键部分,但还没有任何指令与控制器绑定相关的内容。控制器在AngularJS中的典型用途就是把路由和视图联系在一起,在指令中也是如此。事实上,在指令中使用控制器通常会使代码看起来更简洁,并且更易于维护。当然,指令中的控制器是可选的,如果你喜欢用简单的方式创建指令,你会发现控制器在很多情况下是适用的,并且更好用。使用控制器会让指令看起来更像是“子视图”。在这篇文章...

阅读全文 »

Jerry Bendy 发布于 04月25, 2016

【译】创建自定义angularJS指令(四)- transclude与restrict

基础独立作用域独立作用域和函数参数transclude与restrictlink函数使用控制器CreatingaUniqueValueDirectiveusing$asyncValidators在这个系列的第三节中,我们介绍了怎样定义函数独立作用域属性并且传递参数给函数。这一节我将讲解关于指令的包含(transclude)与限制(restrict)。restrict(约束)指令在HTML里可以被定义为元素、属性、CSS类或者注释。那么你将如何限制你的自定义指令可以使用哪种方式?为了限制一个指令可以如何以及在哪里被使用,你可以用restrict属性来定义,它可以接收以下值:E——元素指令可以作为一个独立的元素使用,...

阅读全文 »

Jerry Bendy 发布于 04月08, 2016

【译】创建自定义angularJS指令(三)- 独立作用域和函数参数

基础独立作用域独立作用域和函数参数transclude与restrictlink函数使用控制器CreatingaUniqueValueDirectiveusing$asyncValidators文章的第二部分我们介绍了独立作用域以及独立作用域如何被用来使指令更易于重用。关于独立作用域的很大一部分都是本地作用域属性以及如何使用如@、=以及&来处理数据绑定和委托。使用这些属性你可以传递数据到AngularJS的指令中,以及从指令中输出数据。如果你对这方面还不了解的话可以先阅读上一篇关于独立作用域的文章。这一节将着重讲下指令本地作用域属性中的函数部分,&的具体用法。独立作用域和函数参数通过使用本地作用域...

阅读全文 »

Jerry Bendy 发布于 04月03, 2016

【译】创建自定义angularJS指令(二)- 独立作用域

基础独立作用域独立作用域和函数参数transclude与restrictlink函数使用控制器CreatingaUniqueValueDirectiveusing$asyncValidators在这个系列的第一篇文章中介绍了AngularJS自定义指令以及一些简单的例子,这篇文章我们去了解下AngularJS的独立作用域,以及独立作用域在创建自定义指令时有多重要。什么是独立作用域?默认情况下,指令是可以直接访问父作用域中的属性的。例如,下面的指令依靠父作用域来输出一个自定义对象的name和street属性:angular.module('directivesModule').directive('myShared...

阅读全文 »

Jerry Bendy 发布于 04月01, 2016

【译】创建自定义angularJS指令(一)- 基础

基础独立作用域独立作用域和函数参数transclude与restrictlink函数使用控制器CreatingaUniqueValueDirectiveusing$asyncValidatorsAngularJS提供了很多指令可以帮助我们操作DOM、处理事件、数据绑定、绑定控制器与作用域(ngView)等等。例如ngClick、ngShow、ngHide、ngRepeat以及其它很多AngularJS核心的指令都可以帮助我们很轻松的使用这个框架。虽然内置的指令已经覆盖了大部分的使用场景,但在实际使用中为了简化操作或组件重用等我们经常需要创建自己的指令。在这个系列的文章中我将一步步带你了解AngularJS指令是如...

阅读全文 »

Jerry Bendy 发布于 03月24, 2016

前端AJAX请求跨域时遇到的一些坑

这两天在做公司的PC站时因为需要使用angular的$http服务存取数据,而且接口又在另一个域名下面,不得不研究下跨域的问题.以下把这两天遇到的一些问题总结下.(都是我自己遇到的一些问题,所以可能不太全面)Access-Control-Allow-Origin的问题跨域遇到的第一个问题就是Access-Control-Allow-Origin的错误,Chrome报错Responsetopreflightrequestdoesn'tpassaccesscontrolcheck:No'Access-Control-Allow-Origin'headerispresentonthereques...

阅读全文 »

Jerry Bendy 发布于 03月08, 2016

12步创建高性能Web APP

现在,WebApp日益重视用户的交互体验,了解性能优化的方式则可以有效提高用户体验。阅读和实践下面的性能优化技巧,可以帮你改善应用的流畅度、渲染时间和其他方面的性能表现。概述对WebApp进行性能优化是一份冗杂沉重的工作,这不仅是因为构建一个WebApp需要前后端协作,而且需要多方面的技术栈:数据库、后端、前端,需要运行在多种平台:iOS,安卓,Chrome,Firefox,Edge。这太复杂了!不过,还是有一些历经实践的通用方式可以用来优化WebApp的性能。在接下来的小节中,我们将逐步介绍相关的细节。一份来自Bing的研究表明,页面加载时间每增加10ms,每年就会减少$250k的收入。————RobTrace...

阅读全文 »

Jerry Bendy 发布于 12月20, 2015

仅用一个DIV和CSS绘制中国国旗

看了国外一个网站使用一个DIV绘制图形的例子,想到也试着用一个DIV画一面中国国旗吧,于是便动手试了下。当然因为文字投影没办法旋转的原因,四颗小星星不能做到指向中心的大星星,还是有些BUG的。以下是实现效果: 下面是使用的HTML代码,外层的DIV仅仅是后面的背景,请无视。<divid="flag"><div></div></div>CSS代码:#flag{width:600px;height:400px;background:#898989;margin:0auto;position:relative;}#flagdiv{position:absolut...

阅读全文 »

Jerry Bendy 发布于 06月05, 2015

使用JavaScript检测浏览器支持哪种CSS动画完成事件

以前或许我们在做前端效果时都是在使用JS来,如JQuery的animate,而如今在前端效果中,CSS3占据越来越重要的作用,如何检测一个CSS3的动画是否结束并在结束后执行下一个动画呢?用jQuery的时候可能是这样:$('.element').animate({left:'100px'},function(){alert('动画执行结束');});下面以一个简单的例子演示下使用CSS3的动画如何响应这种操作:/*一个简单的CSS3动画(这里不再写-webkit-之类的前缀了*/@keyframesfade{from{left:0;}to{left:200px;}}.animate-fade{animation...

阅读全文 »