前端模块的基本操作与介绍(二)

一、seajs config  配置信息
    用于配置seajs的一些选项参数,接收一个对象,该对象的属性值,就是我们的配置选项
    1. alias
        定义模块别名
        当我们引入一些基础库时,经常会涉及到版本升级(版本号发生改变),此时在每个模块中修改版本号风险是比较大的,如果使用alias定义这个模块,使用时引用别名,更新时改变需要修改的版本即可
        jq:jquery1.3.js     jq
    2. paths 路径
        用来定义模块的路径
        用途,当我们创建的模块文件夹路径很深的时候,路径比较麻烦,可以将一些路径定义为path,这样引入模块时就比较简单
    3. vars 变量
        定义变量,给模块的路径使用
        如果模块的路径比较复杂,我们可以对路径进行简化,通过将路径定义为变量,使用{}匹配语法使用变量
    4. map  映射处理
        用于匹配文件做映射处理
        当模块开发完后,我们打包处理或压缩处理时,文件名可能有所不同,通过map映射找到这些文件,修改成对应的文件名
        通过配置 main.js 去加载 main.min.js
    5. base 基础目录
        设置模块基础目录
        seajs 引入时的根目录是seajs所在的位置,此时我们想引入一些模块就比较麻烦,可以通过这个属性自定义根目录,这样引入模块就比较方便了
    6. charset 字符集
        用来设置模块的编码方式
    7. debug 调试模式
        debug:true  开启调试模式,可以在控制台输出一些错误,查看加载的文件
    8. preload  预加载
        seajs插件预加载文件
        有时候我们需要提前加载一些工具库或一些文件,使用preload可以提前加载,加载的文件在全局作用域下使用
    9. css  加载css文件
        有时候我们在某个模块中生成的元素需要一些样式,我们就可以使用css加载这些css文件,seajs-css.js
二、requirejs
    1.简介
        Github;https://github.com/requirejs/requirejs
        官网:http://requirejs.org/
        官网中文:http://www.requirejs.cn/
        npm安装:npm install requirejs
        requirejs也是一种模块化开发依赖管理的代码工具,与seajs很相似
        requirejs与seajs的不同点:
            1) seajs引入模块的根目录是sea.js文件所在的目录,requirejs的根目录是引入了require.js的html文件所在的目录
            2) 在模块内引入其他模块,seajs依然是相对sea.js根目录为基础,但是require则是相对当前文件为基础
            3) seajs可以对define传递一个字符串参数定义一个模块,但是require不是
    2.模块定义  define
        与seajs对比:
            1) 不能创建一个字符串
            2) 可以传递一个对象
            3) 可以传递一个函数(commonjs的规范)主要区别在于module
                (1) id表示模块的id,id没有后缀名称,seajs有后缀
                (2) 没有依赖集合
                (3) config配置不同
                相同点:
                    (1) uri都是表示路径
                    (2) 都有exports属性
            4) 传递两个参数时:第一个参数时依赖模块的集合数组,第二个参数是模块主体函数,函数的参数表示前边依赖的引用,注意顺序
    3.定义接口  (模块返回值)
        AMD与CMD的区别:
            common.js是用在服务端的,同步的,eg:nodejs
            AMD和CMD使用在浏览器端的,异步的,比如:requirejs,seajs
            AMD先提出,CMD是在commonjs和AMD基础上提出的
            CMD依赖就近原则,AMD依赖前置
            CMD是延迟执行的,AMD是提前执行
        CMD(seajs)定义:
            1) exports.color='red'
            2) module.exports.color='red'
            3) module.exports={
                color:'red'
            }
            4) return
        AMD(requirejs)定义:
            在AMD规范定义模块中没有exports参数,所以我们只能通过return暴露接口
                1) return 对象,可以将模块内部多个属性或方法暴露出来
                2) return 函数,可以暴露一个方法,而在父模块中调用该方法访问该模块中的属性和方法
三、requirejs配置
    在app.js中引用主模块,进行对require的配置,require.config({});
    1. baseUrl  根目录
        与seajs中的base一样
    2. paths    定义路径
        与seajs的paths一样
    3. map  模块引用的简化
        seajs中的map做映射,但是require不是
        当我们存在多个页面时,可能每个页面都要引入代码库,此时可以通过map配置,对每个文件配置不同的代码库文件
    4. shim 配置模块依赖关系
        对于一些定义在全局的代码库,经常获取不到这类库的模块,此时通过定义shim的模块依赖关系,可以在模块中取到这类库
    5. 引入css
        如果main模块的视图依赖main.css   引入的方法见案例
        css!main.css
        css代表lib/css
        !代表要引入css文件
        main.css代表引入的css文件

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值