commonJS和AMD简单实现原理
2018-06-01 14:51
120 查看
a.js内容:
module.exports= "笔记整理来自珠峰公开课";
1、commonJS
(1)用法
CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)} require()用来引入外部模块;exports对象用于导出当前模块的方法或变量,唯一的导出口;module对象就代表模块本身。 虽说Node遵循CommonJS的规范,但是相比也是做了一些取舍,填了一些新东西的。 var math = require('math'); 然后,就可以调用模块提供的方法: var math = require('math'); math.add(2,3); // 5(2)实现
let fs = require('fs'); function req(moudleName) { let content = fs.readFileSync(moudleName,'utf-8') let fn = new Function('exports','module','__dirname','__filename',content + '\n return module.exports'); let module ={ exports:{} } return fn(module.exports,module,req,__dirname,__filename) } let str = req("./a.js") console.log(str);2、AMD(requireJS) (1)简介
(1)实现js文件的异步加载,避免网页失去响应; (2)管理模块之间的依赖性,便于代码的编写和维护。 用法: <script src="js/require.js" defer async="true" ></script> async属性表明这个文件需要异步加载,避免网页失去响应。IE不支持这个属性,只支持defer,所以把defer也写上。 <script src="js/require.js" data-main="js/main"></script> data-main属性的作用是,指定网页程序的主模块。在上例中,就是js目录下面的main.js,这个文件会第一个被require.js加载。 由于require.js默认的文件后缀名是js,所以可以把main.js简写成main。
require.config({ 'baseUrl': 'js', //指定相对路径 'paths': { //管理引用需要的JS模块 jquery: 'libs/jquery-1.11.1.min', underscore: 'libs/underscore-min', backbone: 'libs/backbone-min', }, 'shim': //配置依赖关系 { backbone: { 'deps': ['jquery', 'underscore'], 'exports': 'Backbone' }, underscore: { 'exports': '_' }, }, urlArgs: "version=1.0" //版本号,修改可解决304缓存 });
(2)原理
let factorys ={}; function define(moudleName,dependencies,factory){ factorys[moudleName] = factory; factory.dependencies = dependencies; //将依赖记在函数上。 } function require(mods,callback){ let result = mods.map(function(mod){ //name age let factory = factorys[mod]; let exports; let dependencies = factory.dependencies;//依赖可能是多个, require(dependencies,function(){ exports = factory.apply(null,arguments); }) return exports; }); callback.apply(null,result) } define("name",[],function(){ return "dong" }) define("age",["name"],function(name){ return name+26 }) require(["age"],function(age){ console.log(age)})
阅读更多
相关文章推荐
- 使用C++实现一套简单的状态机模型——原理解析
- jquery简单瀑布流实现原理及ie8下测试代码
- Skinned Mesh原理解析和一个最简单的实现示例
- 单点登录原理与简单实现
- 淘宝HSF服务的原理以及简单的实现
- 以下是根据RemObject的远程方法调用原理实现的简单远程方法
- RxJava学习笔记1--RxJava原理和简单实现
- 单点登录原理与简单实现
- kmp算法实现原理及简单示例
- 高性能页面加载技术--BigPipe设计原理及Java简单实现
- 请简述智能指针原理,并实现一个简单的智能指针。
- Java 反射学习(四)反射技术开发框架原理简单实现
- 约瑟夫环原理及最简单的代码实现(转)
- 数据挖掘笔记-分类-贝叶斯-原理与简单实现
- Skinned Mesh 原理解析和一个最简单的实现示例 作者:n5 Email: happyfirecn##yahoo.com.cn Blog: http://blog.csdn.net/n5
- 原生js简单实现双向数据绑定原理
- handler原理分析及模仿handler实现简单主/子线程通信架构
- JSONP原理及代码简单实现
- Windows虚拟地址转物理地址(原理+源码实现,附简单小工具)
- KVO实现原理简单易懂