前端模块化思想:
前端开发中,起初只要在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属性