zoukankan      html  css  js  c++  java
  • 模块化

     1、什么是模块化  
    模块化开发 ,可以一次性引入多个模块文件 ,同时也没有引入的顺序 
    require.js加载的模块,采用AMD规范。也就是说,模块必须按照AMD的规定来写。
    具体来说,就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块,那么可以直接定义在define()数之中。
     
    引入时:需要注意 引入顺序    频繁引入
    jquery.js
    cookie.js 
    ajax.js
    public.js
     
     
    2、如何实现模块化开发(以requirejs来说)
     
    第一步:
         在页面中引入:<script src="require.js" data-main="main"></script>
                     data-main的值是一个入口文件   main 实际上就是 main.js
    第二步: 入口函数实现:
     
         通过cinfig方法为模块指定别名
    requirejs.config({  //为引入的模块指定别名
         paths:{
               jquery:"jquery-1.11.1.min"   //为jquery库文件指定一个别名,方便后期调用
         }
    })
    第三步: 通过requirejs方法将写好的模块引入,并根据他们编写子代码
    3、requirejs模块化开发常用的方法
     
    ①requirejs.config为模块指定别名,方便模块的引用
     
    ②requirejs将写好的模块引入,并根据他们编写子代码
    有两个参数
    第一个参数是一个数组:引入的每个模块名称,
    第二个参数是一个回调函数,函数中就是页面要实现某个功能的子代码
     
    ③define用它编写模块(功能),在相应的地方进行引入
    有两个参数
    第一个参数是该模块要依赖的其它模块,是一个数组  (可以省略)
    第二个参数是一个回调函数  函数中实现该模块的功能
     
    4、关于requirejs(模块化开发)好处
     
    ①整个项目中一般不会出现全局变量(防止全局变量的污染)
    ②整个项目中所有模块的项目加载顺序不固定(顺序任意)
    ③整个项目中模块之间的执行是异步的
    ④整个项目实现代码均是面向对象的书写方式,便于模块的管理和维护
     
    5、关于AMD
     
    AMD:  requirejs所倡导的就是AMD开发方式
         是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。
    AMD推崇的是依赖前置
     
    CMD seajs模块化  推崇的是依赖就近
     
    es5在AMD中引入子模块 : require()  例如gulp中插件的引入问题
     
    6、es6的模块化 : 
     
    import 和 export模块 
      • export :负责进行模块化,也是模块的输出。
      • import : 负责把模块引入,也是模块的引入操作。
    将es6转成es5需要通过 gulp-babel 插件完成    (babel配置过程)
     (此时运行:babel  src/index.js –o dist/index.js  )
     
    npm install  -g babel-cli   全局安装babel     打开cmd直接安装
    npm install --save-dev  babel-preset-es2015  babel-cli      本地gulp项目下安装babel
    项目目录创建文件,新建-自定义文件:      .babelrc ,输入代码:
    {
          "presets":[
               "es2015"
    ],
    "plugins":[]
    }
    ,再次运行  babel  src/index.js –o dist/index.js   ,就可以正常的将es6代码转成es5了
     
    export 多变量定义 : 
     
    var a = 9
     
    var b = 8
     
    var c = 90
     
    export{ a,b,c }    起别名用  as
     
    执行 import 导入的内容 : 
    import {name} from "./temp.js";
     
    babel-node  src2/xx.js
     
     
    7、模块化
    requireJs     seaJS       CommonJS      ES6 module
       异步           异步             同步                  同步
    AMD            CMD           common             import
     
    8.模块化规范
    如何导出模块 如何接收模块?
    define定义  return导出   require接收(requireJs )
     
    module.exports 导出   require 导入(commonJS)
     
    export default 导出    import 导入 (ES6 module)
     
  • 相关阅读:
    链表逆序输出 ---九度1511
    java 通过ssh连接linux服务器的测试代码
    C/C++时间函数总结
    C,C++,windows api, linux api 操作文件总结
    基于大数据计算思想的分布式数据库
    手机定位的方式
    矩阵取数问题
    回文字符串
    linux shell重定向总结
    apache flink 入门
  • 原文地址:https://www.cnblogs.com/cqdd/p/10420118.html
Copyright © 2011-2022 走看看