AngularJs的源代码,学习最优秀工程师的设计思路

再牛逼的框架他的本质也是javascript代码,只要你会js代码你就能看懂!别怂!

AngularJs是一个很简单的框架(其设计思想很前卫,涉及领域很广,使得它表现出很难的特性,但是你要相信,你使用起来还是很简单的。)

我这里分析的是AngularJS v1.5.7,官网最新版的是2.x(新版的2.x比1.x改进了很多很多,改天再细致分析一遍)

我们来分析一下angular的核心文件(),打开angular.js文件,可以看到整个的代码是放到一个自动执行函数里的,类似如下:

()();//一个简单的js闭包稍微复杂一点:(function(“参数”){})(“参数”);//所有的代码放在了这匿名function中

可以看到大概代码量3万多行,是不是感觉有点崩溃,看起来还是有点费劲的。不用担心,你只要拉到js文件最底部,这里是初始化时调用的几个函数,从这里入口,你会很顺畅的理顺整个angular的整个架构思想。如图:

在最底部,31310行代码处:

判断angular是否启动(初始化)过了,如果初始化过就提示错误,没有则return;

然后是绑定jQuery和提供公共接口API,可以看到注释很清晰。//try to bind to jquery now so that one can write jqLite(document).ready()

具体的实现你可以点击方法看一下。就是如果你引入了jQuery库就调用你引用的,没有引用则使用angular内部的一个轻量级的jQuery(jqLite)。

原文注释:// Use jQuery if it exists with proper functionality, otherwise default to us.

接下来就是初始化model等等操作。你可以打开浏览器打个断点调试一下,享受阅读全球最优秀前端工程师的代码的乐趣。

最后教你一个最简单的方式,因为js是解释型的弱类型语言,也可以说是很没有原则的语言,怎么玩都行,你可以把任意的js对象打印到浏览器页面,利用浏览器的开发者选项查看该js对象的属性,样貌。比单纯的看代码强多了。

用浏览器把angular对象打印出来是这样的:var a = angular;

我这里用的是google的chrome浏览器,可以看到angular对象的每一个熟悉,然后你想了解哪个属性点击它展开就行了。是不是很方便快捷。

好了,我这里不多啰嗦,抛砖引玉,想了解最前卫的设计思想,还是要自己动手哦。

猜你喜欢

转载自blog.csdn.net/fengsuiyingdong/article/details/81186099