资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/前端模块化规范

前端模块化规范

李义 / 3686人阅读

摘要：一模块化命名空间二命名空间库名类别名方法名三规范一个文件为一个模块，通过暴露快接口，通过引入模块，同步执行文档示例四规范使用定义模块使用加载模块依赖前置，提前执行规范文档示例模块名字模块输出模块输出等于在最前面声明并初始化了要用到的模块即使

一、js模块化 
</>复制代码 
  1. 命名空间
  2. commonJS
  3. AMD/CMD/UMD
  4. ES6 module
二、命名空间

库名.类别名.方法名

</>复制代码 
  1. var NameSpace = {}
  2. NameSpace.type = NameSpace.type || {}
  3. NameSpace.type.method = function () {
  4. }
三、commonJS规范

一个文件为一个模块，通过module.export暴露快接口，通过require引入模块，同步执行

commonJS 文档

示例：

</>复制代码 
  1. const Router = require("./router/route")
  2. export = module.exports = createApplication;
四、AMD规范 
</>复制代码 
  1. Async Module Definition
  2. 使用define定义模块
  3. 使用require加载模块
  4. RequireJS
  5. 依赖前置，提前执行

AMD规范文档

示例：

</>复制代码 
  1. define(
  2.     // 模块名字
  3.     "alpha",
  4.     // 模块输出
  5.     ["require", "exports", "beta"],
  6.     // 模块输出
  7.     function (require, exports, beta) {
  8.         exports.verb = function () {
  9.             return beta.verb();
  10.             return require("beta").verb();
  11.         }
  12.     }
  13. )
  14. define(
  15.     ["a", "b", "c"],
  16.     function (a, b, c) {
  17.         // 等于在最前面声明并初始化了要用到的模块
  18.         if (false) {
  19.             // 即使没用到模块b，但b还是提前执行了
  20.             b.foo();
  21.         }
  22.     }
  23. )
五、CMD 
</>复制代码 
  1. Common module definition
  2. 一个文件为一个模块
  3. 使用define来定义一个模块
  4. 使用require来加载一个模块
  5. SeaJS
  6. 尽可能懒加载

示例：

</>复制代码 
  1. // 所有模块都通过define定义
  2. define(function (require, exports, module) {
  3.     // 通过require引入模块
  4.     var $ = require("jquery");
  5.     var Spining = require("./spinning");
  6.     // 通过exports对外提供接口
  7.     exports.doSomething =
  8.     // 或者通过module.exports 提供整个接口
  9.     module.exports =
  10. })
六、UMD 
</>复制代码 
  1. Universal Module definition
  2. 通用解决方法
  3. 三个步骤： 
  4. 1.判断是否支持AMD
  5. 2.判断是否支持CommonJS
  6. 3.如果都没有，使用全局变量

示例：

</>复制代码 
  1. (function (root, factory) {
  2.     if (typeof define === "function" && define.amd) {
  3.         define([], factory);
  4.     } else if (typeof exports == "object") {
  5.         module.exports = factory();
  6.     } else {
  7.         root.returnExports = factory()
  8.     }
  9. }(this, function () {
  10.     return {}
  11. }))
七、ESM 
</>复制代码 
  1. esmascript module
  2. 一个文件一个模块
  3. export / import

示例：

</>复制代码 
  1. // 加载模块的变量或方法
  2. import theDefault, {named1, named2} from "src/mylib"
  3. import theDefault from "src/mylib"
  4. import {named1, named2} from "src/mylib"
  5. // 引入模块进来并且将named1命名为Named1
  6. import {named1 as myNamed1} from "src/mylib"
  7. // 加载模块里全部的变量和方法
  8. import * as mylib from "src/mylib";
  9. // 只加载，不做任何处理
  10. import "src/mylib"
  11. // 定义一个模块，暴露的接口
  12. export var name1 = "Bob";
  13. export let name2 = "Bob";
  14. export let NAME3 = "Bob";
  15. export function myFunc() {}
  16. export class MyClass {}
  17. // 可以选择暴露
  18. const USERNAME = "Bob";
  19. function myFunc() {}
  20. export {USERNAME, myFunc};
  21. export {USERNAME as NAME, myFunc as Fn};
  22. // 引入其他文件的变量或方法，再暴露出去
  23. export * from "src/other_module";
  24. export {foo, bar} from "src/other_module";
  25. export {foo as myFoo, bar} from "src/other_module";
  26. export {foo as myFoo, bar} from "src/other_module"
八、webpack支持 
</>复制代码 
  1. AMD(require)
  2. ES Modules 推荐
  3. CommonJS
九、CSS模块化 
</>复制代码 
  1. OOCSS
  2. SMACSS
  3. Atomic CSS
  4. MCSS
  5. AMCSS
  6. BEM
  7. CSS modules

Atomic CSS 每个类都是独立的

MCSS 多层级的css

AMCSS 针对属性来写css

BEM：Block，Element，Modifier

</>复制代码 
  3.     Default Button 
  6.     Success Button 
  9.     Danger Button
GPU云服务器 云服务器 前端规范 前端规范文档 前端模块化 前端模块

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116748.html

相关文章

  • 前端模块化的意义

    摘要：而前端要使用模块化的原因或者要解决的问题就是解决命名冲突管理依赖提高代码的可复用性相关模块化规范常见的规范有规范规范是在推广过程中对模块定义的规范化产出，主要用于浏览器端。目前的各类全局变量都可以模块化。 开发中明显可以感觉到加载一个HTML需要依赖很多的JS文件依赖，比如到一定阶段的HTML页面，尾部就是这样的： 随着所需功能越来越多，我们就需引入更多的JS依...

    ThreeWords 评论0 收藏0

  • 前端资源系列（4）-前端学习资源分享&前端面试资源汇总

    摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

    princekin 评论0 收藏0

  • 微内核架构在大型前端系统中的应用

    摘要：微内核架构在大型前端系统中的应用只讨论架构，不讨论框架名词解释由一群尽可能将数量最小化的软件程序组成，他们负责提供实现一个操作系统所需要的各种机制和功能。而微内核架构已经在操作系统和很多的产品的后端服务及前端中经过了很多的实践。 微内核架构在大型前端系统中的应用 只讨论架构，不讨论框架 1、名词解释 由一群尽可能将数量最小化的软件程序组成，他们负责提供、实现一个操作系统所需要的各种机制...

    li21 评论0 收藏0

  • 前端模块化（一）nodeJS中的CommonJS规范

    摘要：要想让模块再次运行，必须清除缓存。模块加载的顺序，按照其在代码中出现的顺序。最近参加了公司开展的一次培训，结构性思维培养。 序言 模块化，大家用vue，react等东西，都会接触到像exports，module.exports，export，export default，require，define，import等等字段，感觉很多人对于这些东西还是分不清，概念非常的模糊，便想着写这么一...

    Charlie_Jade 评论0 收藏0

  • 前端模块化开发

    摘要：来源于阿贤博客模块化今天给大家写一篇关于前端模块化开发知识点。前端模块化开发那点历史模块化是指在解决某个复杂混杂问题时，依照一种分类的思维把问题进行系统性的分解以之处理。 来源于：阿贤博客 javascript模块化 今天给大家写一篇关于前端模块化开发知识点。 前端模块化开发那点历史 模块化： 是指在解决某个复杂、混杂问题时，依照一种分类的思维把问题进行系统性的分解以之处理。模块...

    tianhang 评论0 收藏0

  • 前端、HTML+CSS+JS编写规范（终极版）

    摘要：文档规范和文档必须采用编码格式文档必须使用的标准文档格式编写规范和的标签属性类名都必须使用小写字母和的属性类名命名必须具有语义化代码必须保持文档结构清晰，必须合理的进行代码缩进文件禁止样式表内引用文件编写格式，样式代码保持一行，多个选择器 HTMLCSS文档规范 HTML和CSS文档必须采用UTF-8编码格式； HTML文档必须使用HTML5的标准文档格式； HTMLCSS编写规范...

    jsyzchen 评论0 收藏0

发表评论

登陆后可评论

0条评论

李义

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<