第一部分:发发牢骚吧


  随着富前端时代的逐渐深入,越来越多的前端技术框架层出不穷,可以说是百花齐放。让我们这些爱好前端的人疲于奔命,今天学习这个框架,明天研究那个框架,哎,说不出的蛋疼。。。感觉好累。。。各种大神各种框架@#¥%,看得我是云里来雾里,心中一万只羊驼狂奔。。。看着大牛“越走越远”的背影,带着这颗被狂奔的心,我也只能继续前行啊。。。

  之前说过,没有一颗成为“将军”的心,没有为成为“将军”而付出的人,那么你就只能接受“士兵”待遇。也许知足常乐、也许废寝忘食,见仁见智,没有对错……

第二部分: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文件的。

  废话说这么多,也是够了,下一篇直接进入正题。

  链接地址:

  angularjs+requirejs 搭建前端框架(1)

  angularjs+requirejs 搭建前端框架(2)

最后的最后,如果有需要源码的或者想共同探讨的同仁,随时联系我,QQ:296319075 ,注明园友就好,同时也希望大家也能提出宝贵意见,不吝赐教。秉承共同探讨、共同进步!欢迎转载,请注明出处,谢谢!^_^

 

angularjs+requlirejs 搭建前端框架(1)的更多相关文章

  1. EasyUI搭建前端框架

    EasyUI搭建前端框架 前言: 最近在忙公司的项目,也没太多时间来更新博客,谢谢大家的关注. 好啦,有了前面的系统整体简介和用户登录界面,我们开始使用EasyUI搭建前端页面框架! EasyUI官方 ...

  2. 【转】MEAN:Nodejs+express+angularjs+mongodb搭建前端项目框架NJBlog

    http://www.cnblogs.com/mz121star/archive/2013/03/13/njblog.html 项目地址:https://github.com/mz121star/  ...

  3. 【原】jQuery easyUI 快速搭建前端框架

    jQueryEasyUI jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要 ...

  4. 关于AngularJS与其他前端框架混合使用的思考

    AngularJS 是一个为动态WEB应用设计的结构框架,拥有双向数据绑定,模板,MVVM,依赖注入,指令5大优点,Angular最有诱惑力的就是数据绑定功能,使用MVC模式进行开发,Angular在 ...

  5. Angularjs,WebAPI 搭建一个简易权限管理系统 —— Angularjs 前端主体结构(五)

    目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 6 Angularjs 前端主体结构 6.1 A ...

  6. 为SpringMvc项目安装BootStrap和AngularJs前端框架

    在我们"用SpringMVC写一个注册的小Demo"之前,我们学习一下如何给该项目安装Bootstrap和AngularJs的前端框架,这样我们就能轻松排版出漂亮的登录界面.我们采 ...

  7. Xvfb+YSlow+ShowSlow搭建前端性能测试框架 - 前端技术 | TaoBaoUED

    Xvfb+YSlow+ShowSlow搭建前端性能测试框架 - 前端技术 | TaoBaoUED Xvfb+YSlow+ShowSlow搭建前端性能测试框架 作者:黑三 | 时间:2010-07-07 ...

  8. 前端框架——AngularJS

      前  言 AngularJS是一款为了克服HTML在构建应用上的不足而设计的优秀的前端JS框架.AngularJS有着诸多特性,最为核心的是:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注 ...

  9. 基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【六】【引入bootstrap前端框架】

    https://blog.csdn.net/linzhefeng89/article/details/78752658 基于springboot+bootstrap+mysql+redis搭建一套完整 ...

随机推荐

  1. Python函数-complex()

    complex([real[, imag]]) 作用: 创建一个值为real + imag * j的复数或者转化一个字符串或数为复数.如果第一个参数为字符串,则不需要指定第二个参数. 参数real: ...

  2. python之 前端HTML/CSS基础知识学习笔记

    1. 文件结构: HTML文件的固定结构: <html> <head>...</head> <body>...</body> </ht ...

  3. (二 )结构ztree的 ajax交互的简单使用

    在第一篇的基础上更改,在实际项目中的使用. 一:HTML 代码: <SCRIPT type="text/javascript"> var setting = { asy ...

  4. Angular5学习笔记 - 创建服务(九)

    一.创建服务 ng generate service service-name #简写 ng g s component-name ng g s services/userService 二.效果 三 ...

  5. 机器学习:线性回归法(Linear Regression)

    # 注:使用线性回归算法的前提是,假设数据存在线性关系,如果最后求得的准确度R < 0,则说明很可能数据间不存在任何线性关系(也可能是算法中间出现错误),此时就要检查算法或者考虑使用其它算法: ...

  6. java代码输入流篇2

    总结: 方法.和之前的有不同,但是名字太长了+++++ package com.aini; import java.io.*; public class ghd { public static voi ...

  7. NAND FLASH 驱动分析

    NAND FLASH是一个存储芯片 那么: 这样的操作很合理"读地址A的数据,把数据B写到地址A" 问1. 原理图上NAND FLASH和S3C2440之间只有数据线,       ...

  8. “百度杯”CTF比赛 十一月场(Misc)

    签到题: 题目提示: 文件在i春秋的ctf2群里,加群下载文件 下载下来之后发现有压缩密码 题目提示有提示解压密码:key:ichunqiumemeda 打开文件,得到flag 签到题2: 点击下载附 ...

  9. 2015.3.4 VS2005调用MFC dll时报错及解决

    今天在用VS2005调用MFCdll时报错: 正试图在 os 加载程序锁内执行托管代码.不要尝试在 DllMain 或映像初始化函数内运行托管代码... 原因是我在dll的CSpaceApp::CSp ...

  10. Java连接mysql数据库攻略

    一. 软件下载 Mysql 下载版本:4.1.11 http://dev.mysql.com/downloads/mysql/4.1.html JDBC驱动 下载版本:3.1.8 http://dev ...