前端模块化思想：

前端开发中，起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果，后来js得到重视，应用也广泛起来了，jQuery,Ajax,Node.JS,MVC,MVVM等的助力也使的前端开发得到重视，也使得前端项目越来越复杂，然而，JavaScript却没有组织代码提供任何明显帮助，甚至没有类的概念，更不用说模块（module）了，那么什么是模块呢？

目前，通行的js模块主要有两种：CommonJS和AMD。

AMD即Asynchronous Module Definition ,中文名字是“异步模块化定义”的意思。它是一个在浏览器端模块化开发的规范，服务器的规范是CommonJS。

模快将被异步加载，模块加载不影响后面语句的运行。所有依赖某些模块的语句均放置在会点函数中。

AMD 是 RequireJS 在推广的过程中对模块定义的规范化的产出。

AMD只定义了一个函数define,他是全局变量。

RequireJS

RequireJS要求每个模块放在一个单独的文件里。核心价值是让javascript的模块化开发变得简单自然。

RequireJS对模块的态度是预执行

为什么使用requireJS？试想一下，如果一个网页有很多的js文件，那么浏览器在下载该页面的时候会先加载js文件，从而停止了网页的渲染，如果文件越来越多，浏览器可能会失去响应，其次，要保证js文件的依赖性，依赖性最大的模块（文件）要房子啊最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。

RequireJS就是为了解决这个问题而诞生的：

                       实现js文件的异步加载，避免网页失去响应；

                        管理模块之间的依赖性，便于代码的编写和维护。

AMD是依赖关系前置，CMD是按需加载

在CMD规范中，一个模块就是一个文件。

AMD是（提前执行）提前加载，推崇依赖前置，CMD是（延迟执行）延迟加载，推崇依赖就近

AMD：API根据使用范围有区别，但使用同一个api接口；

CMD：每个API的职责单一。

AMD优点：异步加载，在AMD的规范下，同时异步加载是不会产生错误的。

CMD的机制则不同，这种加载方式会产生错误，如果能规范化模块内容形式，也可以。jquery1.7以上版本会自动模块化，支持AMD模式，主要是使用define函数，sea.js虽然是CommonJS规范，但却使用了define来定义模块。所以jQuery已经自动模块化啦。

requirejs.config是用来定义别名的，在paths属性下配置别名，然后通过requirejs（参数1，参数2）；参数1是数组，传入我们需要引入的模块名，第二个参数是回调函数，回调函数传入一个变量，代替刚才引入的模块。

require()异步加载各个模块，浏览器不会失去响应，只有前面的模块都加载成功，才会执行，解决了依赖性的问题。

NODE

1、引入express模块

var express = require('express');

var fs = require('fs');

2、创建app

var app = express();

3、检测get请求

参数1：代表检测的地址，*代表任何

参数2：回调函数，处理请求对象和响应对象

通过fs读取文件内容:

app.get('/index.html',function(req,res){

               fs.readFile('about.html','utf-8',function(err,data){

                          res.send(data);

                });

})

4、设置端口以及回调

参数1、端口

参数2、域名

参数3、回调函数

           app.listen('8888','localhost',function(){

                           console.log('服务器启动成功！');

             });

AngularJS

angularJS通过指令ng-app=" " 定义一个angular应用程序，然后开发者可以通过后续的代码来架构我们的这个应用。

在head里引入angular.js

angularJS指令

1、ng-app=" " ; 用来定义一个angular应用程序，表示这是一个angular程序的开始

2、ng-iniit=" " ;用来初始化应用程序数据，不太常用，因为项目中数据一般来自网络请求，这里可以做简单的数据，配合待定情况下使用。

3、ng-model="";负责将数据绑定到应用程序。

4、ng-repeat指令负责遍历数组或者对象，这里要注意的是ng-repeat遍历之后的value只有在直接子元素才可以使用，兄弟元素或者孙子元素拿不到，要单独处理。

5、ng-controller指令定义应用的控制器，然后我们可以通过控制器来单独控制应用程序的某个view。

6、ng-if 指令在条件为false时移除html元素。

7、ng-src指令定义img标签的src属性。

8、ng-controller设置控制器。

9、AngularJS的内置服务，使用的时候，直接把名称写在控制器的回调函数中即可。

10、$watch:检测某个变量的值得改变，并作出范围的处理。

自定义指令

可以通过自定义指令来实现定义一些组件，比如项目中的某个地方代码重复率很高，这样我们就把他封装到一个自定义指令里作为一个组件，提高代码的复用性，同时也更加简洁。

var app = angular.module("myApp",[]);

app.controller("ctrll",function(){

                   return{

                                template:"<h1>自定义指令！</h1>"

                 };

});

可以通过元素名、属性、类名、注释四种不同的方式来定义自定义指令。

元素名：<runoob-directive></runoob-directive>

属性：<div runoob-directive></div>

类名：<div class="runoob-directive"></div>

注释：<!--指令：runoob-directive-->

$scope对象

scope是每个controller里的那个模型对象，我们可以通过这个对象来取出注入每个controller里的数据或者通过scope来获取数据，然后在html页面可以通过这个对象直接拿到数据。

$rootScope可作用于真个应用中，是各个controller中scope的桥梁。用rootscope定义的值，可以在各个controller中使用。

AngularJS过滤器

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

currency：格式化数字为货币格式

filter：从数组项中选择一个子集

orderBy:根据某个表达式排列数组

lowercase：格式化字符串为小写

uppercase：格式化字符串为大写

过滤器中同样可以使用自定义服务

依赖注入

拥有内建的依赖注入系统，可以帮助开发人员更容易的开发、理解和测试应用。

指令：可以用来创建自定义的标签，也可以用来装饰元素，或者操作DOM属性