闲话js前端框架(2)——庞大的angularjs
2015-08-18 22:26
691 查看
闲话js前端框架
前端人员=美工+设计+代码+测试——题记
专题文章:
一、从avalonjs的模板说起
二、庞大的angularjs
三、再也不想碰DOM
四、组件化?有没有后端的事?
五、再看自己一年前设计的微型渲染引擎
六、在浏览器标准上做文章
七、抛开浏览器,构建应用容器
八、为何Flash、银光和Java都在网页端一蹶不振
本文属 西风逍遥游 原创, 转载请注明出处: 西风世界 http://blog.csdn.net/xfxyy_sxfancy
二、庞大的angularjs
Angularjs是目前最常用、功能极强,被广泛应用于生产实践中的一套框架。而且由于学习的人多,基本专业点的前端都熟练掌握,这样也比较好招人。但唯一的问题就是,太!大!了!
需要引入的一个库就近800K,而且还只是最核心的功能,要用动画啊,路由啥的还得再引入其他库,这么恐怖的大小真让人无奈。
看了看核心的代码行数,居然有22000+行,再看看avalon,压缩后也就50K+,这么鲜明的反差,真希望angularjs能好好缩减代码规模,优化结构。
设计初衷
AngularJS是为了克服HTML在构建应用上的不足而设计的。现有的浏览器,用的底层技术实在是太过古老,像HTML这种基础的技术设计自93年。史上第一款获得普遍使用的浏览器,正是Mosaic浏览器,第一版于1993年4月22日发布。浏览器,到现在已经20余年的历史,但原理性的技术从来没有改变。HTML是静态的为了表达富文本而设计的,但现在的网站越来越活,动态性不断增强,功能已经和客户端几乎等同。Angularjs,正是看到了互联网发展的需要,设计出来这款方便做网络APP的框架,从此避免了容易出错的dom操作。
通过数据绑定、数据模型,这些概念,Angularjs很适合做CRUD应用,这样,代码非常的灵活和统一。
示例
<!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> Your name: <input type="text" ng-model="yourname" placeholder="World"> <hr> Hello {{yourname || 'World'}}! </body> </html>
同样,angularjs用的也是动态模板,可以非常方便的绑定事件到元素上。
在HTML5应用和手机应用上引入angularjs
另外一点,如果你喜欢用浏览器技术制作手机应用或桌面应用,那么angularjs也许能表现的更好,html5应用,往往都有和底层语言或后台通信的接口,使用js,能够直接获取到需要用的数据。而angularjs也就很方便的将js模型中的数据给呈现出来。并且,在移动应用上,js变成了本地存储,再也不用担心体积庞大带来的网站速度减慢问题了。例如流行的跨平台手机应用开发工具phonegap,那么很不错,非常适合和angularjs搭配食用。
安装方法很简单
sudo npm install -g phonegap
然后你还需要选用一款html模拟手机UI的UI框架,可以是jQueryMobile,或者是强大的Ionic
sudo npm install -g jquery-mobile 或 sudo npm install -g ionic
安装angularjs:
sudo npm install -g angularjs
使用时:
phonegap create my-app cd my-app phonegap run android
几个包安装时间比较长,可能需要耐心等待。
尝试在样例代码上修改,引入angularjs来渲染界面,比原生应用开发要方便多了。
附录:早期浏览器发展史
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- JavaScript拆分字符串时产生空字符的原因
- IE8开发人员工具教程(二)
- Mootools 1.2教程(2) DOM选择器
- DOM 事件流详解
- 在flex中执行一个javascript方法的简单方式
- Flex结合JavaScript读取本地路径的方法
- Dom在ajax技术中的作用说明
- PowerShell中执行Javascript的方法示例
- javascript asp教程第六课-- response方法
- javascript asp教程More About Recordsets