zoukankan      html  css  js  c++  java
  • ES module 实现方式

    随着js社区不断发展,js功能更加强大,细数js的几种 module 方式。

    整理了七种模块化方式

    1.作为新手,练习小的demo,比较喜欢的方式.不适合大的项目。

    <!--html-->
    <script>
        // module1 code
        // module2 code
    </script>

    手动添加注释来标明模块范围,类似于CSS里的分节注释:

    /* -----------------
     * TOOLTIPS
     * ----------------- */

    所有js代码一个js文件写穿,很容易查看,文件较少。原始的模块方案。

    优点:浏览代码容易,可以通过锚点,快速找到代码。

    缺点:文件太长,难以维护。没有实质性的好处,比如(模块化作用域,依赖管理,模块间错误隔离)。

    2.多script标签

    <!--html-->
    <script type="application/javascript" src="PATH/polyfill-vendor.js" ></script>
    <script type="application/javascript" src="PATH/module1.js" ></script>
    <script type="application/javascript" src="PATH/module2.js" ></script>
    <script type="application/javascript" src="PATH/app.js" ></script>

    把各个模块拆分成独立文件,有3个好处:

    • 通过控制资源加载顺序来处理模块依赖

    • 有模块间错误隔离(module1.js初始化执行异常不会阻断module2.jsapp.js的执行)

    • 各模块位于单独文件,切实提高了维护体验

    但还存在2个问题:

    • 没有模块作用域

    • 资源请求数量与模块化粒度相关,需要寻找性能与模块化收益的平衡

  • 相关阅读:
    网页CSS2
    C#(1)—类型、常量及变量
    进制转化
    12月26日提纲
    12月24日笔记
    12月23日笔记
    12月22日笔记
    12月21日笔记
    12月20日笔记
    break、continue与数组
  • 原文地址:https://www.cnblogs.com/regnol/p/9287818.html
Copyright © 2011-2022 走看看