require.js 和 angular

前端模块化思想:

前端开发中,起初只要在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属性

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容