angularjs+requlirejs 搭建前端框架(1)
第一部分:发发牢骚吧
随着富前端时代的逐渐深入,越来越多的前端技术框架层出不穷,可以说是百花齐放。让我们这些爱好前端的人疲于奔命,今天学习这个框架,明天研究那个框架,哎,说不出的蛋疼。。。感觉好累。。。各种大神各种框架@#¥%,看得我是云里来雾里,心中一万只羊驼狂奔。。。看着大牛“越走越远”的背影,带着这颗被狂奔的心,我也只能继续前行啊。。。
之前说过,没有一颗成为“将军”的心,没有为成为“将军”而付出的人,那么你就只能接受“士兵”待遇。也许知足常乐、也许废寝忘食,见仁见智,没有对错……
第二部分:angularjs简介及优缺点
AngularJS 简介:
AngularJS 是一个 JavaScript 框架。通过新的属性和表达式扩展了 HTML。这个也是目前前端各种框架的共同点了。都是以扩展HTML属性作为框架基调。然后通过特定的符号(expression ),达到实现框架的目的。当然,angularjs称这样的属性为指令。把特定的符号称之为表达式。
所以,AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库,通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。
Angularjs优点:
1、实现前端模块化开发;
2、通过强大而丰富的指令,减少了前端代码量;
3、基于前端的MVC(MVVM)思想,实现代码抽象分离;
4、数据双向绑定、路由、服务、过滤器、依赖注入等;
Angularjs缺点:
1、错误信息提示功能很薄弱(应该是目前大部分js框架通病);
2、版本很多,且版本之间差异也很多,没做到完美兼容(已经被很多人诟病了);
3、框架有点笨重;
虽然angularjs存在一些缺点,但总的来说,angular引入了很多好的服务端的思想(依赖注入、路由。。。),正在朝一个良性的方向发展。并且这种前端的开发模式,的确让前端代码更加有层次感(模块化开发),也能提高开发的效率。并且摒弃了以前以DOM(选择器)优先的观念,使用以数据模型优先规则。
第三部分:requirejs简介
Requirejs简介
RequireJS是一个工具库,主要用于客户端的模块管理。它可以让客户端的代码分成一个个模块,实现异步或动态加载,从而提高代码的性能和可维护性。它的模块管理遵守AMD规范(Asynchronous Module Definition)。RequireJS的基本思想是,通过define方法,将代码定义为模块;通过require方法,实现代码的模块加载。
首先,将require.js嵌入网页,然后就能在网页中进行模块化编程了。
<script data-main="scripts/main" src="scripts/require.js"></script>
上面代码的data-main属性不可省略,用于指定主代码所在的脚本文件,在上例中为scripts子目录下的main.js文件。用户自定义的代码就放在这个main.js文件中。
define方法:定义模块
define方法用于定义模块,RequireJS要求每个模块放在一个单独的文件里。按照是否依赖其他模块,可以分成两种情况讨论。第一种情况是定义独立模块,即所定义的模块不依赖其他模块;第二种情况是定义非独立模块,即所定义的模块依赖于其他模块。
(1)独立模块
如果被定义的模块是一个独立模块,不需要依赖任何其他模块,可以直接用define方法生成。
define({ method1: function() {}, method2: function() {}, });
上面代码生成了一个拥有method1、method2两个方法的模块。
另一种等价的写法是,把对象写成一个函数,该函数的返回值就是输出的模块。
define(function () { return { method1: function() {}, method2: function() {}, }; });
后一种写法的自由度更高一点,可以在函数体内写一些模块初始化代码。
值得指出的是,define定义的模块可以返回任何值,不限于对象。
(2)非独立模块
如果被定义的模块需要依赖其他模块,则define方法必须采用下面的格式。
define(['module1', 'module2'], function(m1, m2) { ... });
require方法:调用模块
require方法用于调用模块。它的参数与define方法类似。
require(['foo', 'bar'], function ( foo, bar ) { foo.doSomething(); });
AMD模式小结
define和require这两个定义模块、调用模块的方法,合称为AMD模式。它的模块定义的方法非常清晰,不会污染全局环境,能够清楚地显示依赖关系。
AMD模式可以用于浏览器环境,并且允许非同步加载模块,也可以根据需要动态加载模块。
requirejs部分摘自(http://www.360doc.com/content/15/0424/17/21412_465723360.shtml)
RequireJs优点:
1、防止js加载阻塞页面渲染;
2、美化加载js的方式,不用通过<script>标签引入js文件;
第四部分:为啥选择angularjs+requirejs搭建框架
这里说到为啥选择angularjs+requirejs。其实前端优秀框架很多React、Backbone等等。。。这些都是好的选择,当然我也还在学习中。。。
我选择angularjs+requirejs也算是一个巧合(此处省去1W字),当然最主要的原因还是有由于这两个js框架自身的优点,我是一个做后台出生的。向之前提到的IOC、Restful、Route等等都是后端所拥有的框架,也是我比较喜欢的设计思想,以前想着这些对于前端而言远遥不可及,但是前端的这些大牛们做到了这些。做别人不愿做,想别人不敢想的,向各位大牛致敬。
扯远了,angularjs和requirejs都提倡模块化开发,所谓“英雄所见略同”,这也是他们之间配合的基础吧,angularjs控制模块,requirejs预加载模块,各司其职。当然我的项目中也用到了$ocLazyLoad来配合异步加载模块,和requirejs不冲突。
本项目架构:
V1.0版本:
V2.0版本(将modules抽象出一层)
说明:js文件夹下,1controllers文件夹里面都是控制器,2services里面是服务,3routes是路由(这里我用的是ui-router,commonjs文件夹目的是存放一些公用的js操作,4Modules存放模块信息,libs里面存放的是基类js文件(如angularjs、requirejs......) ,view文件夹下存放的是部分视图,用来存放部分加载html文件的。
废话说这么多,也是够了,下一篇直接进入正题。
链接地址:
最后的最后,如果有需要源码的或者想共同探讨的同仁,随时联系我,QQ:296319075 ,注明园友就好,同时也希望大家也能提出宝贵意见,不吝赐教。秉承共同探讨、共同进步!欢迎转载,请注明出处,谢谢!^_^ |
angularjs+requlirejs 搭建前端框架(1)的更多相关文章
- EasyUI搭建前端框架
EasyUI搭建前端框架 前言: 最近在忙公司的项目,也没太多时间来更新博客,谢谢大家的关注. 好啦,有了前面的系统整体简介和用户登录界面,我们开始使用EasyUI搭建前端页面框架! EasyUI官方 ...
- 【转】MEAN:Nodejs+express+angularjs+mongodb搭建前端项目框架NJBlog
http://www.cnblogs.com/mz121star/archive/2013/03/13/njblog.html 项目地址:https://github.com/mz121star/ ...
- 【原】jQuery easyUI 快速搭建前端框架
jQueryEasyUI jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要 ...
- 关于AngularJS与其他前端框架混合使用的思考
AngularJS 是一个为动态WEB应用设计的结构框架,拥有双向数据绑定,模板,MVVM,依赖注入,指令5大优点,Angular最有诱惑力的就是数据绑定功能,使用MVC模式进行开发,Angular在 ...
- Angularjs,WebAPI 搭建一个简易权限管理系统 —— Angularjs 前端主体结构(五)
目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 6 Angularjs 前端主体结构 6.1 A ...
- 为SpringMvc项目安装BootStrap和AngularJs前端框架
在我们"用SpringMVC写一个注册的小Demo"之前,我们学习一下如何给该项目安装Bootstrap和AngularJs的前端框架,这样我们就能轻松排版出漂亮的登录界面.我们采 ...
- Xvfb+YSlow+ShowSlow搭建前端性能测试框架 - 前端技术 | TaoBaoUED
Xvfb+YSlow+ShowSlow搭建前端性能测试框架 - 前端技术 | TaoBaoUED Xvfb+YSlow+ShowSlow搭建前端性能测试框架 作者:黑三 | 时间:2010-07-07 ...
- 前端框架——AngularJS
前 言 AngularJS是一款为了克服HTML在构建应用上的不足而设计的优秀的前端JS框架.AngularJS有着诸多特性,最为核心的是:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注 ...
- 基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【六】【引入bootstrap前端框架】
https://blog.csdn.net/linzhefeng89/article/details/78752658 基于springboot+bootstrap+mysql+redis搭建一套完整 ...
随机推荐
- Python函数-complex()
complex([real[, imag]]) 作用: 创建一个值为real + imag * j的复数或者转化一个字符串或数为复数.如果第一个参数为字符串,则不需要指定第二个参数. 参数real: ...
- python之 前端HTML/CSS基础知识学习笔记
1. 文件结构: HTML文件的固定结构: <html> <head>...</head> <body>...</body> </ht ...
- (二 )结构ztree的 ajax交互的简单使用
在第一篇的基础上更改,在实际项目中的使用. 一:HTML 代码: <SCRIPT type="text/javascript"> var setting = { asy ...
- Angular5学习笔记 - 创建服务(九)
一.创建服务 ng generate service service-name #简写 ng g s component-name ng g s services/userService 二.效果 三 ...
- 机器学习:线性回归法(Linear Regression)
# 注:使用线性回归算法的前提是,假设数据存在线性关系,如果最后求得的准确度R < 0,则说明很可能数据间不存在任何线性关系(也可能是算法中间出现错误),此时就要检查算法或者考虑使用其它算法: ...
- java代码输入流篇2
总结: 方法.和之前的有不同,但是名字太长了+++++ package com.aini; import java.io.*; public class ghd { public static voi ...
- NAND FLASH 驱动分析
NAND FLASH是一个存储芯片 那么: 这样的操作很合理"读地址A的数据,把数据B写到地址A" 问1. 原理图上NAND FLASH和S3C2440之间只有数据线, ...
- “百度杯”CTF比赛 十一月场(Misc)
签到题: 题目提示: 文件在i春秋的ctf2群里,加群下载文件 下载下来之后发现有压缩密码 题目提示有提示解压密码:key:ichunqiumemeda 打开文件,得到flag 签到题2: 点击下载附 ...
- 2015.3.4 VS2005调用MFC dll时报错及解决
今天在用VS2005调用MFCdll时报错: 正试图在 os 加载程序锁内执行托管代码.不要尝试在 DllMain 或映像初始化函数内运行托管代码... 原因是我在dll的CSpaceApp::CSp ...
- Java连接mysql数据库攻略
一. 软件下载 Mysql 下载版本:4.1.11 http://dev.mysql.com/downloads/mysql/4.1.html JDBC驱动 下载版本:3.1.8 http://dev ...