摘要：modelmodel这个词在AngularJS中，既可以表示一个（比如，一个叫做phones的model，它的值是一个包含多个phone的数组）对象，也可以表示应用中的整个数据模型，这取决于我们所讨论的AngularJS文档中的上下文。在AngularJS中，一个模型就是AngularJS作用域对象...
阅读全文
摘要：依赖注入是一种软件设计模式，用来处理代码的依赖关系。一般来说有三种方法让函数获得它需要的依赖：它的依赖是能被创建的，一般用new操作符就行。能够通过全局变量查找依赖。依赖能在需要时被导入。前两种方式都不是很好，因为它们需要对依赖硬编码，使得修改依赖的时候变得困难。特别是在测试的时候不好办，因为对某个...
阅读全文
摘要：AngularJS作用域是一个指向应用模型的对象。它是表达式的执行环境。作用域有层次结构，这个层次和相应的DOM几乎是一样的。作用域能监控表达式和传递事件。作用域的特点作用域提供APIs（$watch）来观察模型的变化。作用域提供APIs($apply)将任何模型的改变，反映到视图上。作用域能通过共...
阅读全文
摘要：在讲angularjs的模块之前，我们先介绍一下angular的一些知识点：AngularJS是纯客户端技术，完全用Javascript编写的。它使用的是网页开发的常规技术(HTML,CSS,Javascript)，目的是让网页应用开发更快更容易。AngularJS简化应用开发的一个重要方法是，将一...
阅读全文
摘要：AngularJS本地化，国际化国际化，简写为i18n，指的是使产品快速适应不同语言和文化。本地化，简称l10n，是指使产品在特定文化和语言市场中可用。对开发者来说，国际化一个应用意味着将所有的文字和其他因地区而异的数据从应用中抽离出来。本地化意味着为这些抽离的数据和文字提供翻译和转变成本地的格式。...
阅读全文
摘要：表单控件(input, select, textarea )是用来获取用户输入的。表单则是一组有联系的表单控件的集合。用户能通过表单和表单控件提供验证的服务，知道自己的输入是否合法。这样能让用户交互变得友好，因为用户能通过反馈来修正自己的错误。不过，虽然客户端的验证能够起到很大作用，但也很容易被绕过...
阅读全文
摘要：AngularJS表达式类似Javascript的代码片段，通常在数据绑定中用到，写在双大括号中，如：{{表达式}}。表达式是用$parse方法来处理的。下面是一些合法的AngularJS表达式1+23*10 | currencyuser.name你可能会认为AngularJS视图中的表达式就是Ja...
阅读全文
摘要：指令是我们用来扩展浏览器能力的技术之一。在DOM编译期间，和HTML元素关联着的指令会被检测到，并且被执行。这使得指令可以为DOM指定行为，或者改变它。AngularJS有一套完整的、可扩展的、用来帮助web应用开发的指令集，它使得HTML可以转变成“特定领域语言(DSL)”。指令可以做为HTML中...
阅读全文
摘要：grunt-init是一个用于自动创建项目脚手架的工具。它会基于当前工作环境和你给出的一些配置选项构建一个完整的目录结构。至于其所生成的具体文件和内容，依赖于你所选择的模版和构建过程中你对具体信息所给出的配置选项。注意：这个独立的程序曾经是作为Grunt内置的"init"任务而存在的。安装为了使用g...
阅读全文
摘要：Grunt是啥？很火的前端自动化小工具，基于任务的命令行构建工具。Grunt能帮我们干啥？假设有这样一个场景：编码完成后，你需要做以下工作HTML去掉注析、换行符 - HtmlMinCSS文件压缩合并 – CssMinifyJS代码风格检查 – JsHintJS代码压缩 – Uglyfyimage压...
阅读全文
摘要：创建插件创建插件主要有以下几个步骤：（1）通过 npm install -g grunt-init 命令安装 grunt-init 。（2）通过 git clone git://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/g...
阅读全文
摘要：每当运行Grunt时, 你可以为其指定一个或多个任务, 这些任务用于告诉Grunt你想要它做什么事情。如果你没有指定一个任务，并且你已经定义一个名为 "default" 的任务，那么该任务将会默认被执行。任务别名如果指定了一个任务列表taskList，新任务名taskName将是这一个或多个指定任务...
阅读全文
摘要：这个Gruntfile 实例使用到了5个 Grunt 插件：grunt-contrib-uglify grunt-contrib-qunitgrunt-contrib-concatgrunt-contrib-jshintgrunt-contrib-watch上面的uglify，concat，wa...
阅读全文
摘要：Grunt的task配置都是在 Gruntfile 中的grunt.initConfig方法中指定的。此配置主要包括以任务名称命名的属性，和其他任意数据。一旦这些代表任意数据的属性与任务所需要的属性相冲突，就将被忽略。举个例子：grunt.initConfig({ concat: { // 这里...
阅读全文
摘要：Grunt和 Grunt 插件是通过 npm 安装并管理的，npm是 Node.js 的包管理器。Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用。老版本的 Node.js 被认为是不稳定的开发版。之前，在用grunt来合并文件时，老是报错，原因是node.js的版本太低了。...
阅读全文
摘要：AngularJS的主要组成部分是：启动(startup)- 展示“hello world!”执行期(runtime)- AngularJS 执行期概览作用域(scope)- 视图和控制器的集合区控制器(controller)- 应用的行为模型(model)- 应用的数据视图(view)- 用户能看...
阅读全文
摘要：自动初始化请将ng-app指令放到你应用的标签节点中, 如果你想要AngularJS自动执行整个程序就把它放在 标签中。比如：AngularJS会在DOMContentLoaded事件触发时执行，并通过ng-app指令寻找你应用的根作用域。如果 ng-app指令找到了，那么AngularJS将会：...
阅读全文
摘要：上一课，大家知道，手机详细模板我们没有写出来，使用的是一个占位模板。这一课，我们先实现手机详细信息视图，这个视图会在用户点击手机列表中的一部手机时被显示出来。为了实现手机详细信息视图，我们将会使用$http来获取数据。以下json对象就是手机详细的信息，我们会在手机详细信息视图中显示这些数据。{ ...
阅读全文
摘要：什么是 AngularJS?AngularJS 是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言，通过扩展HTML的语法，让你能更清楚、简洁地构建你的应用组件。它的创新点在于，利用数据绑定和依赖注入，它使你不用再写大量的代码了。AngularJS是为了克服HTML在构建应用上的...
阅读全文
摘要：上一课的例子中，我们的模型数据是硬编码的，也就是说，我们的数据不是从服务器请求回来的。这里，我们先讲解，如何从服务器获取数据：function PhoneListCtrl($scope, $http) { $http.get('phones/phones.json').success(func...
阅读全文
摘要：我们在上一课做了很多基础性的训练，接下来，我们讲一些难点的知识点，首先，讲一下如何实现一个全文检索功能： ... Search: {{phone.name}} ...
阅读全文
摘要：AngularJS应用程序主要有三个组成部分：模板（Templates）模板是您用HTML和CSS编写的文件，展现应用的视图。 您可给HTML添加新的元素、属性标记，作为AngularJS编译器的指令。 AngularJS编译器是完全可扩展的，这意味着通过AngularJS您可以在HTML中构建您自...
阅读全文
摘要：实现MVC的目的就是为了让M和V相分离。前端的MVC无法做到View和Model的相分离，而MVVM可以。我们先来看一个用MVC模式开发的经典例子：（一定要深入了解这种开发的思想，而不是看懂代码）$(function(){ //基本的Todo模型， var Todo = Backbone.Mod...
阅读全文
摘要：前端架构从MVC到MVP，再到MVVM，它们都有不同的应用场景。但MVVM已经被证实为界面开发最好的方案了。MVP是从经典的模式MVC演变而来，它们的基本思想有相通的地方：Controller/Presenter负责逻辑的处理，Model提供数据，View负 责显示。作为一种新的模式，MVP与MVC...
阅读全文
摘要：var Utils = function(){};Utils.text = { stripTags: function (val) { return val.replace(/]+>/gi, ""); //正则表达式中的]+其实就是匹配不是>的任何一个或多个字...
阅读全文
摘要：使用此验证插件，我们只需要新建一个实例对象，同时传入一个json对象就行了，这里我们只传入了两个属性：checkItem和callback。下面的代码解析，我们就按照这个例子来。var verify =new Validator({ checkItem:[ ...
阅读全文
摘要：jQuery设计思想：（1）选择页面元素css选择器：$(document) 选择整个文档对象， $("#myId") 选择id为myId的页面元素， $("div.myClass")选择class为myClass的div元素jQuery特有的选择器：$("a:first")选择页面中第一个a元素，...
阅读全文
摘要：jQuery UI是jQuery官方提供的功能效果和UI样式。作为官方出的东西，它一直没有被人们看重，一是它没有datagrid，tree等UI库必备的东西，二是它修改太过频繁，体积庞大。其实它所有以ui开头的插件都来自开源社区，为了统一它们的接口，jQuery花了很长的时间。在jQuery1.9中...
阅读全文
摘要：我们先来看一个最简单的例子：(function($){ $.fn.extend({ //把此插件添加到jQuery的原型上 pluginName:function(){ //插件的名字 return this.each(function(){ //遍历匹配元素的集合 ...
阅读全文
摘要：为什么要进行模块化开发？1.当你写了一个这样的comm.js文件时，里面有function tab(){}方法，这时，你给你的同事用，你同事把这个comm.js引入页面后，在页面上又写了一个function tab(){}，这时，就会覆盖你在comm.js中的tab方法。因为这个同事不知道你comm...
阅读全文
摘要：由于低版本浏览器不支持css3 animation，因此我们需要根据浏览器来选择不同的动画引擎。如果浏览器支持css3 animation，那么就使用此动画引擎，如果不支持，就使用javascript的动画引擎。首先，我们看一下判定条件，方便切换。前面说过，浏览器把所有事件类型的构造器放在windo...
阅读全文
摘要：animation是css3的另一个重要的模块，它成型比transition晚，吸取了Flash的关键帧的理念，实用性高。animation是一个复合样式，它可以细分为8个更细的样式。（1）animation-name为@keyframes动画（以@keyframes开头的样式规则，我们称为关键帧样...
阅读全文
摘要：W3C中对transition是这样描述的：允许css的属性值在一定的时间内平滑的过渡，也就是说，以动画的效果改变css的属性值。transition主要包含4个属性值：transition-property：样式名；transition-duration：持续时间；transition-timin...
阅读全文
摘要：大家应该都知道，如果一个页面运行的定时器很多，无论你怎么优化，最后肯定会超过指定时间才能完成动画。定时器越多，延时越严重。为此，YUI，kissy等采用中央队列的方式，将定时器减少至一个。浏览器厂商也因此原生支持了requestAnimationFrame方法，此方法基本上能保证每秒刷新60次。但是...
阅读全文
摘要：Backbone是一个实现了web前端mvc模式的js框架。一种解决问题的通用方法，我们叫做模式。设计模式：工厂模式，适配器模式，观察者模式等，推荐js设计模式这本书。设计模式是一种思想。框架模式：MVC，MVP，MVVM等。框架模式是开发项目的一种方案。MVC指的是什么？M：model（模型），V...
阅读全文
摘要：本课将通过源码分析的形式，来教大家如何实现一个动画引擎的模块。我们先来看一个使用CSS3实现动画倒带的例子：.animate { //这个animate类名加在上面的那个方块元素中，这个类名也可以是其他名字，比如:.move，只要设置的是那个方块元素就OK了。 animation-duration...
阅读全文
摘要：placeholder插件是用来实现input或者textarea文本框显示默认文字的功能，当获得焦点时，默认文字消失。用户按删除键，把输入的字符删除掉，并失去焦点时，默认文字又出现等功能。使用此插件，只需要$("input").placeholder();这input元素，必须有placehold...
阅读全文
摘要：js里面最简单的动画原理：在setTimeout或setInterval定时器中，每隔20-30ms改变元素的样式，于是就有了动画。比如：改变宽高，就叫缩放；改变坐标，就叫做位移；改变坐标轴，就叫旋转；改变透明度，就叫做淡入淡出。css3中有一个transform样式，它的值可以是rotate()旋...
阅读全文
摘要：这一课，我们将讲解val方法，以及对value属性的兼容性处理，jQuery中通过valHooks对象来处理。首先，我们先来看下val方法的使用：$("#input1").val() //获取input元素的value属性值$("#input1").val("hello") //设置inpu...
阅读全文
摘要：这一课，我们将继续讲解jQuery对元素属性操作的方法。首先，我们先看一下这几个方法是如何使用的：$("#div1").addClass("box1 box2"); //给元素div的class属性添加box1和box2$("#div1").removeClass("box1"); //删除...
阅读全文
摘要：本课主要教大家如何书写一个完整的ajax模块，讲解的代码主要跟ajax有关，而jQuery的ajax模块添加了Deferred异步编程的机制，因此对ajax的理解难度增大，还是忽略掉。但是我要讲解的代码跟jQuery的ajax模块思路是一样的，只是没有加入Deferred异步编程的思想，这样更有利于...
阅读全文
摘要：一个完整的Ajax请求：var xhr = new (self.XMLHttpRequest || ActiveXObject)("Microsoft.XMLHTTP"); //new XMLHttpRequest()传入参数不影响。xhr.onreadystatechange = functio...
阅读全文
摘要：上一课主要分析了jQuery1.51版本的jQuery Deferred。在jQuery1.6中，jQuery Deferred添加了两个方法，always，pipe。always用来添加回调，无论成功还是失败，都会执行。pipe就是管道的意思，对回调使用瀑布模型，上一个回调的返回值供下一个会调使用...
阅读全文
