在工作的时候总是会用到模块化开发,那接下来我就顺着这个问题来说一下什么是模块化

前端模块化 !!!

JS 模块化提供给我们三种规范

分别就是

No.1

commonjs  这个其实也就代表了node.js 它适合后台开发, 因为是同步的呢. 所以不太适合用于前端, 前端的客户端是浏览器, 浏览器追求异步加载, 所以 浏览器不能等太久的时间.

No.2

前端模块的规范是  AMD 规范 代表就是require.js , 它是异步的呢, 很多前端框架都是用的 amd 规范, 比如 jQuery angular 等等…

No.3

第三个模块化的规范就是 es6 了呀.

那说完规范后, 来说一说 如何操作叭. 顺序的话顺着上面的顺序说哦.

common.js的操作

  它的所有模块化都是两个方向,  [ 暴露模块接口 和 引入模块 ]

  module.exports =  { } 暴露一个就是 exports的对象

  然后用 require()  引入一个模块

  其实这是后台的规范, 在 node.js环境合一直接运行, 但是在客户端不能直接运行, 需要对文件打包解析 . (这里列举常用的打包工具 webpack gulp)

前端的 AMD 规范

amd 是 前端模块化的一种规范, 全称 async module definition 异步模块加载机制, 所以需要按照这个规范去定义模块和使用模块. 

这里 require.js 提供了一个全局方法 叫 define() 用来定义模块的

 

定义 模块 分两种   第一种就是 不依赖其他模块  另一种就是依赖其他模块啦.

这里先说一下  不依赖其他模块的写法 ( 下面就是啦) 

下面这个是有依赖的模块

 

那 定义好了之后 如何 在主文件中分别引入这两部分呢

 

下面就告诉大家如何使用哦.

 

在主文件夹中 分两部分   一部分是 配置模块 , 另一部分是使用模块.

 

 

 这样就是一个完整的使用啦.

最后在引入的 <script> 的标签中 写上src   [!!! 这里要注意一个东西, 看下面截图]

这里的  data-main  是必须要写的  等于号 后面的是 你最后 配置的模块的路径.

这样  就是一个完整的使用过程啦.

''

es6呢  我就留在下次跟大家详细解释啦. 

喜欢的点个关注哦.  难搞哦.

模块化 require.js 入门教学(前端必看系列)的更多相关文章

  1. 程序员收藏必看系列:深度解析MySQL优化(二)

    程序员收藏必看系列:深度解析MySQL优化(一) 性能优化建议 下面会从3个不同方面给出一些优化建议.但请等等,还有一句忠告要先送给你:不要听信你看到的关于优化的“绝对真理”,包括本文所讨论的内容,而 ...

  2. require.js入门

    小颖目前所在的公司在用require.js,小颖一只说要写个小demo,今天抽空把自己写的小demo分享出来,希望对初学者有一些帮助,嘻嘻 学习资料: CSDN上的一篇文章:使用RequireJS优化 ...

  3. require.js 入门笔记

    网站越来越庞大,JS也是越写越多. 当所有的JS 都集中在 HTML的 head 部分时,网页加载变得很慢,很多的 JS代码也并不是全都适用在当前的页面,造成了代码的冗余度非常高. 而且长长的JS代码 ...

  4. require.js 入门学习 (share)

    以下内容转自阮一峰老师的网络日志:http://www.ruanyifeng.com/blog/2012/11/require_js.html 更多学习资源: require.js官网:http:// ...

  5. require.js入门指南(一)

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  6. require.js 入门学习-备

    一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...

  7. require.js入门指南(三)

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  8. require.js入门指南(二)

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  9. JavaScript模块化-require.js

    http://www.cnblogs.com/duanhuajian/archive/2013/01/04/2844151.html 原文:http://www.ruanyifeng.com/blog ...

随机推荐

  1. ADO.net之2-成功连接到数据库---ShinePans

    配置数据库: 连接字符串: server=潘尚\\SQLEXPRESS;database=db_test;Trusted_Connection=true 连接代码: using System; usi ...

  2. Matlab Tricks(二十)—— Hilbert matrix 的创建

    Hij=1i+j−1 N = 5; A = ones(N, 1)*(1:N); B = A'; H = 1./(M+N-1);

  3. EJB什么,它真的有这么神奇??

    1. 我们不禁要问,什么是"服务集群"?什么是"企业发展"? 现在说EJB 至"服务集群"和"企业发展",然后,说什么是 ...

  4. .net core注入服务

    1.在Startup的ConfigureServices里面,通过IServiceCollection进行注入 public void ConfigureServices(IServiceCollec ...

  5. Logback 专题

    logback-spring.xml <?xml version="1.0" encoding="UTF-8"?> <configuratio ...

  6. JS trim函数

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  7. wpf 绑定数据无法更新ui控件可能存在的问题

    BindingMode的枚举值有: ① OneWay ② TwoWay ③ OneTime:根据源端属性值设置目标属性值,之后的改变会被忽略,除非调用BindingExpression.UpdateT ...

  8. jq自定义下拉菜单,在点击非当前下拉菜单区域时,关闭下拉菜单(点击事件的对象不是目标元素本身)

    jq自定义下拉菜单,在点击非当前下拉菜单区域时,关闭下拉菜单(点击事件的对象不是目标元素本身) //点击非当前下拉菜单区域时,关闭下拉菜单 $(document).mousedown(function ...

  9. 蓝牙模块在HHARM2410上的移植

    最近两天在HHARM2410-R3上移植了USB蓝牙设备和 BlueZ 蓝牙协议栈,呵呵,蓝牙果然是个很好的东西,协议栈内容很丰富,挂上去以后可以使用很多功能.我现在就可以用它来接收 GPS 数据以及 ...

  10. Win8Metro(C#)数字图像处理--2.3图像反色

    原文:Win8Metro(C#)数字图像处理--2.3图像反色 [函数名称] 图像反色函数ContraryProcess(WriteableBitmap src) [算法说明]     反色公式如下: ...