• 模块化开发(二)--- seaJs入门学习


    SeaJS是一个基于CMD模块定义规范实现一个模块系统加载器
     
    如何选择一个技术产品栈:
    - 看作者是否是大牛
    - 看社区是否活跃
    - 看是否经常更新
    SeaJS的作者已经不更新该项目了,但是国内很多公司还是在使用SeaJS作为前端模块化解决方案,
    学习SeaJS有助于我们学习 Node.js 中的模块系统,因为他们所使用的规范基本一致。
    学习完SeaJS之后可以自学 RequireJS[RequireJS官方网站](http://requirejs.org/),思想基本一样。无非是API的区别。
    ### 体验官方demo
    ###seaJs使用步骤:
    1. 下载 sea.js 库
    2. 在页面中引入 sea.js
    3. define - 定义模块
    4. module.exports - 暴露接口
    5. require - 加载模块
    6. seajs.use - 从入口模块启动模块系统
        seaJs.use('./././',function(a){
            console.log(a);//其中a就是exports而不是module.exports
        }
    10、define()的用法:
        define(object)
        define(string)
        define(function(require,exports,medule){
            //所有的自己的js 代码都写在回调函数中
        })
        例子1:
         define(function (require ,exports , module ){    //最好在每一次定义模块的时候,尽量都使用匿名函数,并传入三个参数的方式;不要重命名require函数;
                module.exports = {    //通过这种形式将对象暴漏到模块之外,供其他文件使用,可以直接使用exports = ...
                        add : require ( ' ./././ ' ) ,  //require的参数值必须是字符串,该字符串就是表示模块的一个模块标识
                        mod : require ( ' ./././ ' )    // 访问的时候使用 mod() 直接调用
               }
        })
        例子2:
        define ( function ( require , exports , module ) {
                exports.add = reuire ( ' ./././' ) ;    // 访问的时候需要通过 exports.add()方式进行调用
                exports.mod =require ( './././' );
        })
    11、require('./././')加载文件模块
            最好吧所有的require都写在define 函数中js 代码的最上面
            [require 书写约定](https://github.com/seajs/seajs/issues/259)
    12、seaJs在页面中的使用:
            首先加载sea.js 文件
            然后再启动模块:<script> </script>标签中加载入口模块 seajs.use('./a') 
                启动模块系统----开机
                seaJs.use方法是异步加载模块文件
    13、模块标识:其实就是模块的路径,可以不包含文件的后缀名,因为加载的都是js文件
            相对标识:以 ./ 或者 ../ 开始的都是相对标识,相对于当前出现的位置所属的文件
            顶级标识:不以 ./ 或者 ../ 或者 / 开始的标识是顶级标识,顶级标识相对模块系统的基础路径来解析,模块系统的基础路径在不指定的情况下,
                默认顶级目录是第三方插件 sea.js 所在的目录,可以通过 seajs.config() 方法来指定顶级标识的基础路径
                顶级标识配置:seajs.config({
                    base : ' ./ '  ; //指定当前目录为顶级目录 
                })
            模块标识永远相对于require出现的文件路径。
    14、require.async( './文件' )实现异步按条件加载
            if(true){require('./a')}else{require('./b')}这时候a和b文件都会被加载下来
            require是所有加载成功之后才解析和执行
            require.async可以按照条件进行加载,代码执行到具体位置的时候才会加载和执行
             if(true){
                    require.async('./b' , function (foo){
                        console.log(foo) ;  // foo就是在./b 文件中表露出来的内容
                    })
             }else {
                    require.async('./a' , function () {   }  )
             }
    15、exports 和 module
            module.exports就是模块对外导出 的接口对象,相当于执行了 return module.exports
            exports就是module.exports的一个别名而已。
            module.exports就是当前模块与外部文件的接口对象。
        首先需要明白:
            var  foo2 = {}
            var foo3 =foo2
            foo3.name = 'name' // 这是修改了foo3 ,它的引用也被修改
            console.log(foo2)
            console.log(foo3)
            foo3 = 'hello'  // 这是对foo3重新赋值后,就丢失了原来foo2的引用
            console.log(foo2)
            console.log(foo3)
        然后:
            var foo ={
                obj : {}
            }
            function changeFoo(obj,foo){
                console.log(obj===foo.obj) //true
                obj.name = 'jack'
                obj = 'hello'
                console.log(obj===foo.obj)  //false
                return foo.obj
            }
            console.log(changeFoo(foo.obj,foo)) // {name : jack}
        最后:
            obj 就相当于 exports,foo 就相当于 module。综上所述可知,不能给exports重新赋值,这样就切断了exports与module.exports之间的联系,必须通过 点 的形式修改exports的值。
    16、浏览器中的JS不能做什么?
            不能操作数据库、不能操作文件、浏览器的JS只能通过AJAX发送请求而不能接受请求(后面的Socket网络编程就可以进行双向通信了)
            JS可以脱离浏览器单独运行(这时候就没有BOM和DOM), JS仅仅是语言而已(以前所学的JS仅仅是ECMAScript)
     
  • 相关阅读:
    快速生成移动设备应用图标的在线工具 makeappicon
    绝对令人的惊叹的CSS3折叠效果
    GBin1专题之Web热点秀#14
    对一个正整数n,求出n!中末尾0的个数。
    大整数加法
    HDOJ2013
    HDOJ1203 I NEED A OFFER!
    HDOJ1005【苏哥的解法】
    HDOJ1297
    HDOJ1004
  • 原文地址:https://www.cnblogs.com/z-one/p/6641084.html
Copyright © 2020-2023  润新知