随笔分类 - javascript相关
与js相关的知识
摘要：前言 时间过的真快，不知不觉就到年底了。问问自己，这一年你对自己的工作满意吗？ 评价标准是什么呢？当然是马云的那两条准则了：钱给到了吗？干的爽吗？如果答案都是no，那么，你准备好跳槽了吗？ 为了应对年后跳槽高峰的到来，从现在开始我要把基础过一遍了。从网上搜集的面试题入手，尽量全面的覆盖到前端的基础知识。为年后的面试提前热身~虽然本人也不是什么面霸，没有什么面试经验，但把基础打扎实是永远不会错的，所以不嫌麻烦不嫌重复劳动，我会收集一些简单基础的面试题，从中提炼出相关的前端知识，然后分析加以记录。大概算了算，只要勤快点，从现在开始一直积累到年后，应该也能小有收获~ 另外还想说一下我对原生js...
阅读全文
摘要：在谈路由机制前有必要先提一下现在比较流行的单页面应用，就是所谓的single page APP。为了实现无刷新的视图切换，我们通常会用ajax请求从后台取数据，然后套上HTML模板渲染在页面上，然而ajax的一个致命缺点就是导致浏览器后退按钮失效，尽管我们可以在页面上放一个大大的返回按钮，让用户...
阅读全文
摘要：过滤器（filter）正如其名，作用就是接收一个输入，通过某个规则进行处理，然后返回处理后的结果。主要用在数据的格式化上，例如获取一个数组中的子集，对数组中的元素进行排序等。ng内置了一些过滤器，它们是：currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。总共九种。除此之外还可以自定义过滤器，这个就强大了，可以满足任何要求的数据处理。 过滤器的内容非常简单，只要明白了内置的如何使用，自己如何定义一个filter...
阅读全文
摘要：今天学习了一下ng的service机制，作为ng的基本知识之一，有必要做一个了解，在此做个笔记记录一下。一、认识服务（service） 服务这个概念其实并不陌生，在其他语言中如java便有这样的概念，其作用就是对外提供某个特定的功能，如消息服务，文件压缩服务等，是一个独立的模块。ng的服务是这样定义的：Angular services are singletons objects or functions that carry out specific tasks common to web apps. 它是一个单例对象或函数，对外提供特定的功能。首先是一个单例，即无论这个服务被注入到...
阅读全文
摘要：上一篇文章介绍了HTML5版的文件上传插件，相比flash，采用HTML5的新技术无疑可以提升程序的加载速度。但是在目前的情况看来，HTML5的特性支持度不高，插件的可用性范围确实比较窄。例如，我在插件中使用到的新特性有：标签的multiple属性File和FileList APIXMLHttpRequest2的upload和onprogressFormData 就拿File来讲，IE9都不支持，所以在当前环境下IE系列浏览器几乎无法使用。因此做一个兼容方案还是有必要的。如何做兼容呢？这不是废话，忘了你的H5版uploadify是怎么来的了？我们可以在不支持这些特性的浏览器上运行flas...
阅读全文
摘要：相信有不少同学用过uploadify这一款文件上传插件，它支持多文件选择、能显示进度条、可配置性高，总体来说是比较好用的。官网有两个版本供下载，分别是flash版和HTML5版。不过令人惋惜的是，HTML5版是收费的。活了这么多年，啥时候用软件掏过钱啊！秉着发扬我们的优良传统，我决定照着它的API自己实现一个HTML5版的。 经过一番折腾，终于覆盖了大部分API，已经能够实现基本的文件上传需求。如下，是插件中的default配置：var defaults = { fileTypeExts:'',//允许上传的文件类型，格式'*.jpg;*.doc' uploa.
阅读全文
摘要：自定义指令学习有段时间了，学了些纸上谈兵的东西，还没有真正的写个指令出来呢。。。所以，随着学习的接近尾声，本篇除了介绍剩余的几个参数外，还将动手结合使用各参数，写个真正能用的指令出来玩玩。 我们在自定义指令（上）中，写了一个简单的，能够跟美女打招呼。但是看看人家ng内置的指令，都是这么用的：n...
阅读全文
摘要：上一篇简单介绍了自定义一个指令的几个简单参数，restrict、template、templateUrl、replace、transclude，这几个理解起来相对容易很多，因为它们只涉及到了表现，而没有涉及行为。这一篇将继续学习ng自定义指令的几个重量级参数，了解了它们之后我们的custom directive将不光能“看”，还要能“动”。开始~理解compile和link 不知大家有没有这样的感觉，自己定义指令的时候跟写jQuery插件有几分相似之处，都是先预先定义好页面结构及监听函数，然后在某个元素上调用一下，该元素便拥有了特殊的功能。区别在于，jQuery的侧重点是DOM操作，而n...
阅读全文
摘要：一、有感而发的一些话 在学习ng之前有听前辈说过，angular上手比较难，初学者可能不太适应其语法以及思想。随着对ng探索的一步步深入，也确实感觉到了这一点，尤其是框架内部的某些执行机制，其复杂程度并非是我现在的功力能够理解的，只能是知其皮毛。我现在学习的途径是官方文档 + AngularJS在github上的中文粗译版（https://github.com/basestyle/angularjs-cn）+ 网上搜到的一些文章。鉴于本人资质平平以前也只用过jQuery，目前只能做到理解ng的API文档，相关特性的使用方式。故博客的主要内容也就是记载一些我的理解与应用，对ng框架内部的机制只.
阅读全文
摘要：jQuery的ajax模块封装了非常强大的功能，有时候我们在发送一个ajax请求的时候希望能有一个超时的时间，想让程序在一段时间请求不到数据时做出一些反馈。幸运的是jQuery为我们提供了这样的参数：timeout。今天试了一下，做个记录。 首先在试验之前，有一个一直搞不明白的东西，那就是默认的超时时间是多少？这个配置在到底在什么地方设置。jQuery中？还是apache中？PHP中？ 经过一番搜索，暂得到如下结论： ①jQuery没有默认的超时时间，只可以通过参数来配置； ②apache2的默认超时时间是300秒，但是我在httpd.conf中设置Timeout 10，压根没起到...
阅读全文
摘要：通过使用模板，我们可以把model和controller中的数据组装起来呈现给浏览器，还可以通过数据绑定，实时更新视图，让我们的页面变成动态的。ng的模板真是让我爱不释手。学习ng道路还很漫长，从模板开始入手是个不错方式，因为这部分内容相对简单好理解，而且是视图层的东西，大家都喜欢可以立马看得见的东西嘛。本篇我将搜罗模板中的常用指令一一测试，了解其使用方法，有点像背单词的感觉，会比较枯燥。不过对于初学，这样的枯燥是必须要经历的，开始~一、模板中可使用的东西及表达式 模板中可以使用的东西包括以下四种：指令(directive)。ng提供的或者自定义的标签和属性，用来增强HTML表现力。标记...
阅读全文
摘要：一、前言 前端技术的发展是如此之快，各种优秀技术、优秀框架的出现简直让人目不暇接，作为一名业界新秀，紧跟时代潮流，学习掌握新知识自然是不敢怠慢。当听到AngularJs这个名字并知道是google在维护它时，便一直在关注，看到其在国外已经十分火热，可是国内的使用情况却有不小的差距，参考文献/网络文章也很匮乏。朝思暮想良久，决定深入学习angular，并写系列博客，一方面作为自己学习路程上的记录，另一方面也给有兴趣的同学一些参考。 首先我自己是一名学习者，会以学习者的角度来整理我的行文思路，故该系列博客也不能叫做教程，只能是些探索，有理解或是技术上的错误还请大家指出。其次我特别喜欢编写小例子..
阅读全文
摘要：被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇，也是我计划中的最后一篇，说来太惭愧了，本来计划一到两个星期写完的，谁知中间遇到了很多事情，公司的个人的，搞的自己心烦意乱浮躁了一段时间，好在最近这些事情都一件件趋于平息，我也有了精力继续写文章。 这个自定义事件其实是挺让我纠结的，首先自己平时从未使用过，只是有一次遇到一个问题有人指点说可以用自定义事件，才对这个东西有了印象。在网上搜“javascript自定义事件”，发现也有不少文章在写，不过说实话让我佩服的却一篇也没找到，就连张鑫旭大哥写的漫谈javascript自定义事件也把我看的云里雾里。陆续查阅了一些资料后越...
阅读全文
摘要：作为全球最知名的js框架之一，jQuery的火热程度堪称无与伦比，简单易学的API再加丰富的插件，几乎是每个前端程序员的必修课。从读《锋利的jQuery》开始，到现在使用jQuery有一年多的时间了，对jQuery算是比较了解了，唯一没做到的就是读源码。网上看到有人写jQuery源码解析的，我也没细看，个人觉得如果光是为了解析源码而解析源码，未免有点太劳神了，没有实际用途，我更倾向于在实际应用中遇到不懂的方法或是文档说明不清楚的地方，可以查找到相应的位置看下源码，足矣。 闲话不多讲了，今天的主题是jQuery中的事件监听器的绑定方式。在学习jQuery之初，就在网上不只一次搜过相关主题，...
阅读全文
摘要：一、事件的捕获与冒泡 由W3C规定的DOM2标准中，一次事件的完整过程包括三步：捕获→执行目标元素的监听函数→冒泡，在捕获和冒泡阶段，会依次检查途径的每个节点，如果该节点注册了相应的监听函数，则执行监听函数。以下面的HTML结构为例： 父亲 孩子 执行的流程应该是这样的： 下面是一组例子，分别点击孩子节点可以清楚的看到第三个参数的影响：父亲孩子 父亲节点的监听函数在捕获阶段执行：var parent1 = document.getElementById('parentdiv1');var child1 = document.getElementById('child..
阅读全文
摘要：一、开篇 在学习javascript之初，就在网上看过不少介绍javascript事件的文章，毕竟是js基础中的基础，文章零零散散有不少，但遗憾的是没有看到比较全面的系列文章。犹记得去年这个时候，参加百度的实习生面试，被问到事件模型，当时被问的一头雾水，平时敲onclick敲的挺爽，却没有关注到事件模型的整体概念。这个周末难得清闲，决定就javascript中的事件模型写个系列，算是对知识点的一个总结，也是对自己的一个交代。 初步计划分为以下几个部分： ① javascript事件的基本概念及基于原始、IE、DOM2的三种模型的异同点 ② javascript事件流介绍，捕获-冒泡...
阅读全文
摘要：消息提示插件大伙并不陌生了，无论是个系统还是网站，基本都要有消息系统。但我认为，一个好的提示插件应当具备很好的独立性，不与页面其他元素发生任何关系，其次是能对外提供丰富的接口，因为你生来就是被别人来调用的嘛。看了下百度个人首页的右侧滑出层效果还不错（尽管百度的UI一直被广大业内人士诟病），决定仿造它来做个消息提示插件。插件写的不多，拿此来练练手~ 百度的我的 样式是由单独的css文件控制的，不喜欢的可以自己设置。下面介绍一下对外提供的API： 首先，代码中有这么一行：$(function(){ window.msgbox = $.msgbox(); }); 即创建一个全...
阅读全文
摘要：很早以前，“焦点图”这个名称就出现在了网页制作中，能够完成绚丽的图片切换效果。有很多由flash和jquery制作的焦点图，其特点就是一个比一个炫。其中有一种特效就是有镜头左右摇摆或是拉远拉近的视觉效果，如果你印象不深了，可以点击这里体验一下。随着CSS3的发布，我们可以利用它的变形、渐变、动画属性来代替jquery的动画函数，用更少的代码来实现这种有“镜头感的”效果。本文就将探索一下如何利用CSS3来制作一个有镜头感的网页。 从最终效果来想想原理，在页面上依次出现的这些内容，其实一开始页面加载的时候就已经都在页面上了，只不过大部分内容都在浏览器窗口“之外”，我们看不到，等到需要显示它的...
阅读全文
摘要：一、history API知识点总结 在HTML4中，我们已经可以使用window.history对象来控制历史记录的跳转，可以使用的方法包括： history.forward();//在历史记录中前进一步 history.back();//在历史记录中后退一步 history.go(n);//在历史记录中跳转n步，n=0则刷新当前页，n=-1则后退一步 在HTML5中，又新增了四个可用的API，包括：history.pushState(data[,title][,url]);//向历史记录中追加一条记录，data是一个js对象，可以是任何格式的json数据，title参数暂时不起作...
阅读全文
摘要：一、需求的诞生 在我们的网页或者web应用中，想要对列表中的元素进行位置调整（或者说排序）是一个常见的需求。实现方式大概就以下两种，一种是带有类似“上移”、“下移”的按钮，点击可与相邻元素交换位置，另一种便是通过拖拽进行排序。搜索“jquery拖拽排序插件”，你会看到相关插件层出不穷。在HTML5拖拽API完善再加上移动设备横行的今天，后者似乎更受青睐，因为它有更简洁的操作，你看看，拖来拖去就可以调整顺序，多炫啊。 但是！为什么要说但是呢，因为这种拖拽操作也有它的弊端。首先是功能不明显，用户进来你的页面后不知道原来这些东西是可以拖动的，除非你再旁边加一行说明“拖动这些图片可以进行排序”；其..
阅读全文