seajs学习笔记（基础）

一：前端开发中常遇到的问题

      如果我们的网站简单的时候，结构上也许不会有什么问题，但是如果我们的网站越来复杂的时候（比如功能越来越多的时候，加入项目的人越来越多的时候），我们书写的代码就会遇到下面的两个问题：

 

    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可以运行在任何的浏览器引擎上。

 

五：使用Sea.js

         上面讲了一些基础知识，下面来讲一下 sea.js该怎么用：

      主要可以分四步：

      1） 引入sea.js库：在文件头开始的时候引入 <script src="sea.js"></script>，路径要自己根据实际情况改变。

      2 )  如何变成模块：

           单写一个js文件，用define定义模块，然后加入普通的函数形式。比如我们定义了普通函show(),

           普通函数：function show(){

                                alert(1111);

                            }

            sea.js模块：define(function(require,exports,module){  

                                   function show(){

                                        alert(1111);

                                     }

                               });

            注意：define(),这种形式也相当于JS里面的函数形式，所以里面可以套用函数，里面的第一个函数有三个参数，分别是：request,exports,module，这里有固定的三个参数，不允许随意修改字母以及变换位置，你可以三个参数都写或是三个都不写，要不就是只写第一个，或是只写前两个，这就是sea.js里面的死规定。

         3 )  如何引入模块：

            exports：

            seajs.use("相对地址的模块名",function(参数){ });

 

            sea.js中三个参数分别是什么意思呢？

            require：引入，模块之间依赖的接口

            exports：导出，对外提供接口

            module：批量导出

 

       4）如何依赖模块：

            普通模块： require（"相对地址的模块名"）

            seajs模块：require（"相对地址的模块名"）. seajs模块名

 

转载于:https://www.cnblogs.com/hongjingwu/p/5639117.html