模块化开发

拜拜、爱过 提交于 2020-02-29 06:23:49

mobile

1,模块===包

    * 传统开发,整个网页我们写了一个js文件,所有的特效都写在里面了

        <script src="js/app.js"></script>

        缺点:变量容易全局环境

            耦合度太高,代码之间的关联性太强,不便于后期的维护

    * 将一个复杂的js文件

      <script src="js/1.js"></script>

      <script src="js/2.js"></script>

      <script src="js/3.js"></script>

      缺点:发生的请求次数过多,依赖模糊,难以维护

    *使用模块化开发

      优点:减少代码之间的关联,

         部署方便,

            更好的分离,

            按需加载,

            避免命名冲突,

            容易维护

模块化和传统开发的区别 

1,依赖加载。

    这种方式是最广泛的,像requirejs,sea.js等,除了 编写规范 不一样,实际都是通过相关require api把模块chunk文件拿回来,当加载完成之后再运行逻辑代码。

2,依赖打包。

    经典代表就是webpack,其实就是写代码的时候分开模块,但打包的时候按依赖关系找到各个模块,最后打包到同一个文件上,并给每个chunk标识id,运行逻辑代码时将模块引用指向该id,从而实现模块化。

什么是模块化?

  • 模块化就是为了减少系统耦合度,提高高内聚,减少资源循环依赖,增强系统框架设计。
  • 让开发者便于维护,同时也让逻辑相同的部分可复用
  • 模块化开发:针对js、css,以功能或业务为单元组织代码。js方面解决独立作用域、依赖管理、api暴露、按需加载与执行、安全合并等问题,css方面解决依赖管理、组件内部样式管理等问题。

  

  •  node自带的规范· commonjs规范
  •     commonjs是node的规范,运行在服务端,不是浏览器端,

    如果使用在浏览器端,需要使用对该文件进行打包编译(借鉴工具-browserify,webpack,gulp等)

  •  书写模块的时候,对外暴露接口

    module.exports={}  export.xxx=

    引入模块require(路径)

  •  commonjs暴露的本质是一个叫exports的对象
  •     module.exports={}  export.xxx= 区别:  

    二者暴露的本质是一样的,都是暴露一个exports对象

    module.exports={} 会覆盖,重新一个新地址
    export.xxx= 是添加属性,

  •   commonjs是node的规范,但他是同步加载的

    同步加载在浏览器端是一个坑,只要一个环节卡主了,后面的就没发执行了,所以不建议使用

    如果非要使用,就需要编辑打包

  

  • web端

    每个js都是一个模块,每个模块都必须有一个暴露接口,每个js文件有一个全局的方法require(路径)用于引入模块
    模块---
    1,node自带的模块(包)···path url fs
    2,第三方模块···weui jquery axios zepto npm

    3,自定义模块···我们写的
      * 配置模块说明文件· npm init·就会生成一个package.json的文件
      1,main:index.js ;我们的主文件是index.js
        index.js是这个包的输出文件,即便删除了package.json只要不改变index.js的文件名就没事,一旦改了就报错
      2,var obj=require('cui')
        默认在node_modules文件夹下找这个包
        * 在浏览器端,说require is not defined 说明浏览器不支持commonjs,需要借鉴打包工具
        browserify

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!