第一部分:发发牢骚吧


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

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

第二部分: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嵌入网页,然后就能在网页中进行模块化编程了。

  1.  <script data-main="scripts/main" src="scripts/require.js"></script>

  上面代码的data-main属性不可省略,用于指定主代码所在的脚本文件,在上例中为scripts子目录下的main.js文件。用户自定义的代码就放在这个main.js文件中。

  define方法:定义模块

  define方法用于定义模块,RequireJS要求每个模块放在一个单独的文件里。按照是否依赖其他模块,可以分成两种情况讨论。第一种情况是定义独立模块,即所定义的模块不依赖其他模块;第二种情况是定义非独立模块,即所定义的模块依赖于其他模块。

  (1)独立模块

  如果被定义的模块是一个独立模块,不需要依赖任何其他模块,可以直接用define方法生成。

  1.  define({ method1: function() {}, method2: function() {}, });

  上面代码生成了一个拥有method1、method2两个方法的模块。

  另一种等价的写法是,把对象写成一个函数,该函数的返回值就是输出的模块。

  1. 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. WINRAR4.2破解方式或注册码

    急求WINRAR4.2破解方式或注册码,谢谢大侠们!~ 亲,我是复制别个的但是可以用64位32位都可以用 自己动手破解 那感觉才棒! 来吧 将以下数据复制到记事本中 然后另存名为“rarreg.key ...

  2. [转]angular的路由机制

    在谈路由机制前有必要先提一下现在比较流行的单页面应用,就是所谓的single page APP.为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而a ...

  3. 异常java.sql.SQLException: Field 'id' doesn't have a default value

    使用spring data jpa出现这个情况. entity中的自增策略已经加好了. 还是出现这个异常.去数据库中查看,发现没有给主键加上自增. 出现这个问题去实体类跟数据库中看一下就可以了.

  4. linux user date

    useradd username 添加用户 userdel username 删除用户 passwd username 设置用户密码 passwd 设置当前用户密码 passwd -d usernam ...

  5. (转)通过WMI获取网卡MAC地址、硬盘序列号、主板序列号、CPU ID、BIOS序列号

    最近由于项目的需要,需要在程序中获取机器的硬盘序列号和MAC地址等信息,在C#下,可以很容易的获得这些信息,但是在C++程序中感觉比较麻烦.经过百度,发现很多大虾都是通过WMI来获取这些硬件信息的,网 ...

  6. Azure CLI脚本查看未挂载的ManagedDisk

    本文介绍如何用Azure CLI的脚本查看未挂载的Managed Disk,以及Managed Disk挂载到哪些资源. 具体的脚本如下: #!/bin/bash rm -rf noownerdisk ...

  7. 记录启用HTTPS的全过程

    因为 https 采用 ssl 加密,所以部署 https 时需要申请证书,证书的作用就是对浏览器和Web服务器双方的身份验证. 步骤1:申请证书 我们采用Let's Encrypt签发的免费证书,虽 ...

  8. Mybatis 一对一(OneToOne)关系映射__INSERT

    今天测试Ibatis的一对一的关联映射时总是出现错误,其中很多的错误都是自己不小心写错的..现把整个Ibatis源代码记录下来,以便以后熟记: 1.数据库脚本: CREATE TABLE t_pers ...

  9. spring中JavaConfig相关的注解

    在spring3.0中增加配置spring beans的新方式JavaConfig,可以替换spring的applicataion.xml配置.也即@Configuration对等<beans/ ...

  10. codeforce -39E-What Has Dirichlet Got to Do with That?(博弈+dfs)

    You all know the Dirichlet principle, the point of which is that if n boxes have no less than n + 1  ...