zoukankan      html  css  js  c++  java
  • require.js模块化开发

    模块化开发的原因:

    1、引入的js过多然后在加载的过程中容易出现假死的状态,导致页面会发生白屏

    2、变量名的问题 在多人协作开发的时候容易出现变量名的冲突 面向对象

    3、引入优先级的问题


    模块化开发分类:

     (1).requireJS:

        参考网址:http://www.requirejs.cn/ 

        RequireJS 是基于 AMD 规范的模块加载器,它不依赖于任何 JavaScript 新语言特性,可以直接运行在浏览器环境中。这是个比较老、曾经非常流行的模块加载器,它主要提供的功能是: 

    1. 提供了模块化得支持。
    2. 可以异步、按需加载模块,这样就可以在用到某个 JS 模块的时候再去加载它,能提高首屏加载速度。

    ES6 的 Modules:

    1. 提供了模块化的支持。

    但是 es6 Modules 是JavaScript新特性,目前浏览器还不支持,不能直接用,就算以后可以直接用了,如果希望做到按需、异步加载的话也需要配合相应的加载器来加载 JS 文件。

    但是如果你用 webpack 的话,直接用 ES6 是最好的选择。因为:

    1. webpack 可以通过 babel-loader 来转义 ES6 为浏览器可以支持的方式。
    2. webpack 的 code split 功能可以实现按需、异步加载。

    是完全覆盖 RequireJS 的所有功能的。

     (2).seaJs

     (3).commonJS

     (4).module

    AMD CMD commonjs

    模块化:将一个大的功能拆分成若干个小的功能 每一个功能都是一个模块

    原则:高内聚 低耦合


    require使用


    0、require其实就是一个js模块加载器

    1、引入requirejs

    2、设置异步加载 defter async="true"

    3、data-main:加载一个入口文件

    4、遵循requirejs的规范AMD

    不管AMD规范还是CMD规范还是COMMONJS规范
    所谓的规范就是如果定义模块 如何接受模块


    AMD如何定义模块

    define()

     

    /*
    require:第一个参数是模块名字  第二个参数是一个回调函数 
    回调函数里面有(n:有多少个模块就有多少个参数)个参数
     */
    //先去引入配置文件  当配置文件引入以后再去加载你需要的一些模块
    require(["config"],function() {
    require(["jquery","highcharts","layer","alert"],function($,his,layer,alert) {
    alert.init();
    console.log($,layer,alert)
    })
    })

    步骤

    1、引入require
    2、引入入口文件
    3、配置config文件
    4、将config文件在appjs文件内进行引入  然后在去加载其他模块
    5、书写自己的模块 必须遵循AMD规范 用define定义  定义完毕以后将当前函数return出去
    6、配置当前模块的路径
    7、在app.js中引入改模块 
    8、调用该方法
     */
  • 相关阅读:
    Thinkph5——模型软删除
    ThinkPHP5——URL参数带中文,报"模块不存在"
    ThinkPHP5多模板配置二级域名
    使用Composer安装阿里云短信失败
    GIT快速入门
    Python全栈之路系列----之-----面向对象4(接口与抽象,多继承与多态)
    Python全栈之路系列----之-----面向对象3(继承与派生)
    Python全栈之路系列----之-----面向对象1(初识)
    Python全栈之路系列----之-----异常处理
    Python全栈之路系列----之-----内置函数和匿名函数lamdba
  • 原文地址:https://www.cnblogs.com/yunshangwuyou/p/9276361.html
Copyright © 2011-2022 走看看