码迷,mamicode.com
首页 > Web开发 > 详细

seajs学习笔记(基础)

时间:2016-07-04 01:15:26      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:

一:前端开发中常遇到的问题
      如果我们的网站简单的时候,结构上也许不会有什么问题,但是如果我们的网站越来复杂的时候(比如功能越来越多的时候,加入项目的人越来越多的时候),我们书写的代码就会遇到下面的两个问题:
 
    1. 恼人的命名冲突
     比如我们多人开发一个项目,事先由我自己写好了一个共公的组件库common.js供大家调用,里面的包括
         function tab(){
                 实现代码:
          };  
        function drag(){ 
              实现代码:
        };    
        function dialog(){ 
               实现代码:
        };.........
      同事用的时候直接在页面里引入common.js,然后调用下面的方法即可,如果后面又有一些新的同事加进来,他们在做其它的功能开发的时候,很有可能在页面也会出现我组件库里的方法,这样这两个组件之间就出现了冲突,是很影响功能效果的。
    这个时候我们通常的做法是用命名空间来解决冲突的问题:比如原来的common.js变成
org.tab=function(){
     实现代码:
};
org.drag=function(){
    实现代码:
};
org.dialog=function(){
     实现代码:
}
    这样做在一定的程度上是解决了命名冲突的问题,但是由于前面的名字有可能比较长,调用的时候并不是特别的方便,而且这种做法只是降低了命名冲突的问题,并不能完全解决这个问题。看似简单的冲突问题,但是如何才能优雅的解决,解决方案先不讲,先看下面一个问题。
 
  2. 繁琐的文件依赖
      继续上面的例子,我接着ul层通用组件,这样其他的同事就不用再重复的写了。
      其中有一个被大家非常喜欢的组件是tab.js,使用方法很简单。例如下面的调用
      <script src="common.js"></script>
      <script src="tab.js"></script>
    
      但是即便它非常的好用,还是会有同事跑过来说这个组件在调用的过程中会出现问题,经过一番的排查发现,原来在调用tab.js之前没有引用common.js,导致tab.js无法正常工作。
     所以从以上的问题中可以看出,冲突与依赖是前端开发中经常出现的问题,下面我们来看如何用模块化开发来解决,我们使用Seajs作为模块开发的框架。
 
二:Sea.js是什么?
       sea.js是一个加载器,是淘宝前端攻城师玉伯所著,他是根据commonjs规范的一种表现。何为commonJS?commonJs可以理解成一个组织,他们中的所有人都致力于提高javascript程序的可移植性以及可交互性。这种可移植性以及可交互性不仅仅局限于浏览器端,而且也包括了服务器端的javascript.
       那seaJS到底是什么呢?seaJS就是根据commonJS组织规范写的一个加载器。其内部可用的API并不多主要有以下几个:alias,config,use,define。主要就这四个API。seaJS主要就是根据这四个API对其环境中的javascript进行管理的。
        sea.js主要用在大型项目或是多人合作的时候,如果小型的企业网站完全没有必要用到它。另外,同 sea.js很相似的还有一个模块开发的加载器,它叫require.js。它们之间有什么不同呢?
        sea.js是国产的,遵循CMD(common module define)规范    下载官网:http://seajs.org/docs/
        require.js是进口的,遵循AMD(Asynchronous module define)规范,下载官网:http://www.requirejs.org/

三:为什么我们要使用Sea.js?
 
        seajs追求简单、自然的代码书写和组织方式,具有以下的核心特征:
        1.简单友好的模块定义规范:sea.js遵行CMD规范,可以像Node.js一样书写模块代码;
        2.自然直观的代码组织方式:依赖的自动加载、配置简洁清晰,可以让我们更多的享受编码的乐趣;
        sea.js提供了常用插件,非常有助于开发调试和性能优化,并具有丰富的可可扩展接口;
 
四:Sea.js的兼容性
      sea.js有着完备的测试用例,兼容所有的主流浏览器
        chrome 3+    √
        FireFox 2+    √
        Safari  3.2+   √
        opera  10+   √
        IE5.5+          √
        sea.js还可以运行在Mobiel端,包括Hybrid上。理论上sea.js可以运行在任何的浏览器引擎上。

 

seajs学习笔记(基础)

标签:

原文地址:http://www.cnblogs.com/hongjingwu/p/5639117.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!