前端开发require

    看到这个标题想必大家都想问 所谓的前端开发工程师是什么呢？在IT的大家庭中处于什么位置呢？有什么理由让我选择前端开发呢？那么我会直接告诉你，前端优化是所有公司的第一选择，当公司接到项目时，客户考虑的是什么，客户不会考虑你是用什么技术实现的，总之界面要好看，合理，人性，这就是前端开发要做的事情，可能说到这你就会问，这跟做网站美化有什么区别，那你就小看了前端开发这个岗位，前端开发大致为：前端优化工程师，资深前端开发工程师，前端开发架构师这几个岗位等分的比较细，那选择了前端开发的小伙伴都不要灰心，好好努力吧。

    下面将一下前端开发需要的一些技能， 曾经听过很多这样的说法：会用DIV+CSS，会用 Javascript 写一些页面特效，还会用Photoshop处理下图片，就是前端开发工程师！很遗憾，这种说法很肤浅，也很无知。可以毫不客气的说，这是页面仔的行当；甚至说，你不过是个切图的…. 上面的会这个会那个的只是前端开发工程师必须的基础知识，也是皮毛，再说现在会这个的何止千千万。下面简单说几个： 会点设计，不要求精湛，处理图片，设计个小广告是要的； 精通HTML+CSS，并能快速处理各浏览器兼容问题； 熟练掌握Javascript或Actionscript，精通加分； 熟练使用JS框架，如jQuery/YUI等，并解读过源码，熟练多框架加分； 精通Ajax技术，必须的； 精通开发调试工具，如Firebug等； 代码语义化，懂优化，压缩和反压缩； 对SEO有一定的了解，尤其是HTML结构和标签的使用； 高效合成CSS Sprite； 了解服务器方面基本知识； 熟练掌握一门后端语言，如spring等， 有自己的网站（看对网站所有东西的把握）； 对移动开发有一定的了解和涉入； 熟练HTML5和CSS3技术（主要用于移动应用开发）； 效率开发，精湛的开发软件操作； 有过用户体验研究，更关注人性化页面开发； 了解浏览器工作原理，了解w3c标准，了解web2.0； …. 补充录入 ….。

    说这么多，不是吓人，是需要这么去干。当然这些也不过是好前端开发必备技能而已，做这些只是为了让页面更好的呈现在访客面前，这就是真正意义上的前端开发吧 ！啊

   下面给大家推荐一个前端优化requireJS，已经找到或者没找到工作的同学有时间看看，在学校做项目时，用iframe框架，为了使top或者导航能被从用，这也是现在国内大部分网站开发的现状，但是考虑过优化问题的童鞋就知道看出了问题，在页面加载的时候，浏览器会把整个引用过的js，script全部加载进来，比如一个jqueryJS，top加载一次，左边导航加载一次，右边的主题加载一次，就会在网页里下载3次。这样就会加大网站载入速度，影响用户体验，那么有什么好的办法让各个页面分离开互不影响呢，那就是 http://www.vipaq.com/rtfm/JavaScript/RequireJs/zh-cn/2.1.9/index.htm requireJS和
  http://wiki.sitemesh.org/display/sitemesh/Home   SiteMesh，               

本人也是在网上学的

  今天给大家先将一下requireJS ，siteMesh明年来了在补上， 随着网站逐渐变成" 互联网应用程序 "，嵌入网页的Javascript代码越来越庞大，越来越复杂。 网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法，管理网页的业务逻辑。 Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。（不懂的可以去了解下javascript基本语法），原始写法：

   function m1(){ } function m2(){}  这样简单的一个模块就完成了，就可以使用m1() 调用方法， 这种做法的缺点很明显："污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。为了解决上面的问题，把代码改为：

var module1 = new Object({

　　　　_count : 0,

　　　　m1 : function (){
　　　　　　//...
　　　　},

     m2 : function (){

      //...

　　　　}

　　});

这样就把m1 m2 这两个方法封装在了module1 中，使用的时候就可以module1.m1()调用。

1，为什么使用require，下面写一段代码，相信it的人都见过

   <script src="1.js"></script>
　　<script src="2.js"></script>
　　<script src="3.js"></script>
　　<script src="4.js"></script>
　　<script src="5.js"></script>
　　<script src="6.js"></script> 在一个网页中引用了6个JS，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载，这样的写法有很大的缺点。首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；其次，由于js文件之间存在依赖关系，因此必须严格保证加载顺序（比如上例的1.js要在2.js的前面），依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。

require.js的诞生，就是为了解决这两个问题：（1）实现js文件的异步加载，避免网页失去响应；（2）管理模块之间的依赖性，便于代码的编写和维护。                使用：先去require官方网站下载JS ，然后在页面引用                     <script src="js/require.js"></script> 为了避免网页失去响应，可以把引用放在地步，        也可以 <script src="js/require.js" defer async="true" ></script> async表面文件异步加载，加载完之后就需要加载自己的JS了<script src="js/require.js" data-main="main"></script> data-main,制定网页的主模块（有点像java里的main方法），规定自己的JS路径，main就是自己的main.js .js后缀取消，那么网页就会先加载main。js 下面看main。js怎么写

// main.js

　　require(['jquery', 'underscore', 'backbone'], function (moduleA, moduleB, moduleC){

　　　　// some code here

　　});

2.require()函数接受两个参数。第一个参数是一个数组，表示所依赖的模块，上例就是['moduleA', 'moduleB', 'moduleC']，即主模块依赖这三个模块；第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。require()异步加载moduleA，moduleB和moduleC，浏览器不会失去响应；它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。

上个实例主模块的依赖模块是['jquery', 'underscore', 'backbone']。默认情况下，require.js假定这三个模块与main.js在同一个目录，文件名分别为jquery.js，underscore.js和backbone.js，然后自动加载。

使用require.config()方法，我们可以对模块的加载行为进行自定义。require.config()就写在主模块（main.js）的头部。参数就是一个对象，这个对象的paths属性指定各个模块的加载路径。

require.config({

　　　　paths: {

　　　　　　"jquery": "lib/jquery.min",

       "underscore": "underscore.min",

　　　　　　"backbone": "backbone.min"

　　　　}

　　}); jquery 就是在lib文件下面 还可以直接改变根URL 就是在 paths：上面加段 baseUrl: "js/lib",url也可以直接写html路径eg：www.baidu.com/XXX.js。
3.AMD模块的写法 
 require.js加载的模块，采用AMD规范。也就是说，模块必须按照AMD的规定来写。

具体来说，就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。

假定现在有一个math.js文件，它定义了一个math模块。那么，math.js就要这样写：
 // math.js

　　define(function (){

　　　　var init = function (){

　　　　　　alert("欢迎唐瑞东！");

　　　　};

　　　　return {

　　　　　　init: init 
　　　　};

　　});
 如何引用：require(['math'], function (math){

　　　　alert(math.int());

　　}); 如果这个模块需要依赖其他的模板 就需要在加入define(['jquery'], function()
当require()函数加载上面这个模块的时候，就会先加载jquery.js文件。 就可以实现 哪里用哪里加载，
 require简单的用法已经介绍完了，下面说说使用的时候会出现错误的地方，1，使用requireJS 会是模块里的代码模块化，内部调用方法会出现 undefined XXX（）需要这种情况就需要加依赖了。2，在模块里面绑定事件，切记不要使用 onclick ，jquery .attr 因为在模块里循环绑定事件时会出现迭代，像猴子下山拾东西，最终只会捡起最后一个事物带回家，可以使用jquery1.7以上版本的 on().off事件绑定解决问题，大家可以试试这个效果，由于商业机密就不给发大家本项目出现类型的效果图了，3，打开网页是出现404 等 ，查看下baseUrl paths: 这就是JS 路径不对，或者是依赖的JS路径不对，没下载成功。暂时就这些，后续有注意的地方会加上。
过年了，祝大家新年里风风火火，马到成功！                             2014-01-21-11:30录 唐瑞东。