前端模块化思想：
前端开发中，起初只要在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属性
网友评论