前端模块化

77 阅读1分钟

背景:

js语言发展壮大,jquery等库一个js文件通常有上万行代码,这使得js不再是一个单纯的脚本语言,当有多人在同时协作时,则容易产生多人声明同一变量等问题,并且影响到代码的复用,模块化就是为了解决这种问题。

解决方案:

 大体思路:
   将js代码“包装”起来,这样有了函数作用域的限制,就会让代码产生闭包,从而互不影响,并且也不影响代
   码的复用,通过包装成对象来获取调用这些函数的能力。vue中组件就定义了包装出去的接口。

常见的模块化规范

commonjs, es6中的modules, AMD ,CMD

export的基本使用(es6)

LYH1~%(}R_@{LLOA94~G_EU.png

函数也是和变量类似

export default 的使用

  在某些情况下,一个模块中包含某些功能,我们不希望给这个功能命名而是让导入者自己命名,
就使用这个导入方法。
  当使用这个方法导入时,不需要使用大括号来括住自己导入的对象
  export default只可以声明一次,用该方法导出的对象在导入时是没有命名规则的, 

导入的小tips: 如果要引入全部变量的话,可以

import * as modules from "test.js"