前端模块化

Posted gdqx

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端模块化相关的知识,希望对你有一定的参考价值。

   

 

为什么要使用的模块化开发

 

  1.之前我们所用的传统开发将整个网页的效果都写到一个js文件,这样或导致耦合度过高,代码关联性太强,不便于后期维护,还会造成全局污染

 

  2.功能化的js文件会导致发生的请求次数过多,依赖模糊,也难以维护

 

  3.模块化开发会减少代码的关联度,部署方便,按需加载,避免命名冲突,容易维护

 

js 模块化提供的三种规范

  1. commonjs 规范,代表 nodejs 适合后台开发,因为是同步的,服务器运行快,等待时间不长,comminjs 不适合用于前端,前端的客户端是浏览器,浏览器追求异步加载,浏览器不能等待太长时间

  2. 前端模块规范:amd 代表是 requirejs 是异步的

  3. 第三个模块化规范:es6 

  有很多的前端框架都是 amd 规范,jQuery  angular等

  模块化的操作

  commonjs 的操作

    所有的模块化,都是两个方向;

    暴露接口 和 引入模块

    module.exports=  暴露的是一个叫 exports 的对象

    require()  引入一个模块

  这是后台的规范,在 node 环境 可以直接运行,但是在在客户端不能直接运行(会报错:require is not defined ),需要对文件进行打包编译:webpack,gulp

  

  浏览器是一个对象,在 window 对象

  在 window 中查找

  方法也是属性,属性值是 function 

  作用域:

    当执行 js 代码时,浏览器会给一个全局环境,叫window,作用域分两部分,一个是内存部分,一个是执行部分,代码从上到下执行,碰到变量,

  就会在 window 中(内存部分) 查找这个变量是否存在,存在便看赋值了没有,赋值了便是后面的值,没赋值 undefined , 没声明这个变量 xxx is not defined  

 

  拓展:

    var a  

    var a 就是声明的一个变量a,本质就是浏览器往 window 上添加的一个属性 a 

  

  前端模块,不借鉴模块,自定义模块

  主文件的名字  app.js  main.js  index.js  的操作

  避免函数的命名冲突,采用自调用函数

    自调用函数执行时,会形成一个私有的作用域,对内部的变量进行保护的作用;

    暴露模块,需要后面的所有 js 文件都能访问这个模块,将该模块注册在 window 下面;

   AMD模块开发案例(一个轮播加一个tab切换):  

    技术图片

    app.html 里面的大致内容:

      技术图片

      轮播内容(swiper)

      技术图片

      tab切换:

      技术图片

    css样式:

    技术图片

 

    app.js

      技术图片

     技术图片  里面js的内容     xh.js    技术图片

          yj.js

              技术图片

 

       

 

      

 

 

以上是关于前端模块化的主要内容,如果未能解决你的问题,请参考以下文章

浅谈前端工程化模块化组件化

前端工程化实战:React 模块化开发性能优化和组件化实践

前端模块化

前端模块化详解

前端模块化

js前端模块化之加载器原理解析