AngularJs2与AMD加载器(dojo requirejs)集成

现在是西太平洋时间凌晨,这个问题我鼓捣了一天,都没时间学英语了,英语太差,相信第二天我也看不懂了,直接看结果就行. 核心原理就是require在AngularJs2编译过程中是关键字,而在浏览器里面运行时候AngularJs2不会去关心require方法.所以只要在原始的ts代码中不出现require就没问题.所以在AMD的加载器加载完毕之后,立即用一个全局变量保存,在AngularJs2的代码中使用这个全局变量在做加载器. Because require is a key word of An…

AMD加载器实现笔记（一）

之前研究过AMD,也写过一篇关于AMD的文章<以代码爱好者角度来看AMD与CMD>.代码我是有看过的,基本的原理也都明白,但实际动手去实现却是没有的.因为今年计划的dojo教程<静静的dojo>中,有一章节来专门讲解AMD,不免要把对AMD的研究回炉一下.时隔多日,再回头探索AMD实现原理时,竟抓耳挠腮,苦苦思索不得要领.作为开发人员,深感惭愧.故有此文,记录我在实现一个AMD加载器时的思考总结. requireJS是所有AMD加载器中,最广为人知的一个.目前的版本更凝聚了几位大牛…

AMD加载器实现笔记（二）

AMD加载器实现笔记(一)中,我们实现了一个简易的模块加载器.但到目前为止这个加载器还并不能称为AMD加载器,原因很简单,我们还不支持AMD规范中的config配置.这篇文章中我们来添加对config的中baseUrl和packages的支持.API设计如下: require.config({ baseUrl: "./", packages: [{ name: "more", location: "./more" }, { name: "…

AMD加载器实现笔记（五）

前几篇文章对AMD规范中的config属性几乎全部支持了,这一节主要是进一步完善.到目前为止我们的加载器还无法处理环形依赖的问题,这一节就是解决环形依赖. 所谓环形依赖,指的是模块A的所有依赖项的依赖中有没有依赖A模块本身的模块.如果有那就说明存在环形依赖.所以检验的方式是利用递归,检查一个模块的依赖的依赖项中有没有依赖A模块,以及依赖项的依赖项的依赖项中有没有A模块,核心代码如下: function checkCircleRef(start, target){ var m = modules[…

AMD加载器实现笔记(四)

继续这一系列的内容,到目前为止除了AMD规范中config的map.config参数外,我们已经全部支持其他属性了.这一篇文章中,我们来为增加对map的支持.同样问题,想要增加map的支持首先要知道map的语义. 主要用于解决在两个不同模块集中使用一个模块的不同版本,并且保证两个模块集的交互没有冲突. 假设磁盘有如下文件: 当'some/newmodule'请求'foo'模块时,它将从foo1.2.js总得到'foo1.2'模块:当'some/oldmodule'请求'foo'模块时它将从foo…

AMD加载器实现笔记（三）

上一篇文章中我们为config添加了baseUrl和packages的支持,那么这篇文章中将会看到对shim与paths的支持. 要添加shim与paths,第一要务当然是了解他们的语义与用法.先来看shim,shim翻译成中文是“垫片”的意思.在AMD中主要用途是把不支持AMD的某些变量包装AMD模块.shim是一个哈希对象,key为包装后的模块Id,value是关于这个包装模块的一些配置,主要配置项如下: deps:定义模块需要的依赖项的moduleId数组 exports:模块输出值 in…

Promise实现简易AMD加载器

在最新的Chrome和FF中已经实现了Promise.有了Promise我们用数行代码即可实现一个简易AMD模式的加载器 var registry = { promises: { }, resolves: { }, getDependencyPromise: function(name) { if (!this.promises[name]) { var resolves = this.resolves; this.promises[name] = new Promise(function(r…

JavaScript AMD 模块加载器原理与实现

关于前端模块化,玉伯在其博文前端模块化开发的价值中有论述,有兴趣的同学可以去阅读一下. 1. 模块加载器模块加载器目前比较流行的有 Requirejs 和 Seajs.前者遵循 AMD规范,后者遵循 CMD规范.前者的规范产出比较适合于浏览器异步环境的习惯,后者的规范产出对于写过 nodejs 的同学来说是比较爽的.关于两者的比较,有兴趣的同学请参看玉伯在知乎的回答 AMD和CMD的区别有哪些.本文希望能按照 AMD 规范来简单实现自己的一个模块加载器,以此来搞清楚模块加载器的工作原理.…

KnockoutJS 3.X API 第六章组件(5) 高级应用组件加载器

无论何时使用组件绑定或自定义元素注入组件,Knockout都将使用一个或多个组件装载器获取该组件的模板和视图模型. 组件加载器的任务是异步提供任何给定组件名称的模板/视图模型对. 本节目录默认组件加载器组件加载器实用函数实现自定义组件加载器可以实现的功能 getConfig(name, callback) loadComponent(name, componentConfig, callback) loadTemplate(name, templateConfig, callback)…

使用RequireJS并实现一个自己的模块加载器 (一)

RequireJS & SeaJS 在模块化开发开发以前,都是直接在页面上引入 script 标签来引用脚本的,当项目变得比较复杂,就会带来很多问题. JS项目中的依赖只有通过引入JS的顺序来确定,项目会变得复杂难以维护. 复杂的脚本会暴露很多全局变量, 比如 $,_. ... . 同步加载的时候,网页会停止渲染,加载时间越长,网页失去响应的事件就越长. 于是,AMD 规范就诞生了,AMD 即为异步模块定义,有效避免同步加载导致页面的假死现象.RequireJS 是一个 AMD 的实现,后来…

构建服务端的AMD/CMD模块加载器

本文原文地址:http://trock.lofter.com/post/117023_1208040 . 引言: 在前端开发领域,相信大家对AMD/CMD规范一定不会陌生,尤其对requireJS.seaJS等模块加载器更是耳熟能详,不少网站目前也正在使用.requireJS.seaJS的出现,极大程度的促进了前端模块化编程方式的发展,前端的代码风格趋近标准化.而两者的共同特点都是运行在浏览器端的模块加载器,可以智能解析模块依赖关系,并自动加载相关模块.而我们今天介绍的是服务端的AMD/CMD…

【Dojo 1.x】笔记7 配置对象dojoConfig的内容1：has属性、加载器的属性

说完了出身,即出身自dojo/_base/目录下的config模块,那就要好好讲讲这对象有什么可以写的属性了. 1. has属性官方说是用于更好的特征检测的,具体有什么用现在还不得知. 例如: <script> dojoConfig = { has: { "dojo-amd-factory-scan": false } }; </script> 和 <script> dojoConfig = { has: { "dojo-firebug&…

实现一个类 RequireJS 的模块加载器 (二)

2017 新年好 ! 新年第一天对我来说真是悲伤 ,早上兴冲冲地爬起来背着书包跑去实验室,结果今天大家都休息 .回宿舍的时候发现书包湿了,原来盒子装的牛奶盖子松了,泼了一书包,电脑风扇口和USB口都进牛奶了,赶紧拔掉电池,用风扇吹啊吹.强行开机,无线网卡坏掉,屏幕里面进牛奶,难看死啦 ~ 鼠标也坏掉了,谁能赠送我一个鼠标啊 ..O... 中午吃完饭,就开始完善模块加载器了.到傍晚,差不多了,出去浪了一会儿 ~ my-Require.js 回顾在使用RequireJS 并实现一个自己的Requ…

一个简单的AMD模块加载器

一个简单的AMD模块加载器参考 https://github.com/JsAaron/NodeJs-Demo/tree/master/require PS Aaron大大的比我的完整 PS 这不是一个通用的模块加载器, 实际上只是require define 函数的实现所以每个模块的js都要引入到html文件中如何防止变量冲突呢? 实际上就是用函数把他们包起来 (function(exp){ var mod = { name:'modA' }; exp[mod.name] = mod; }…

使用RequireJS并实现一个自己的模块加载器 (二)

RequireJS 是一个JavaScript模块加载器

RequireJS 是一个JavaScript模块加载器.它非常适合在浏览器中使用, 它非常适合在浏览器中使用,但它也可以用在其他脚本环境, 就像 Rhino and Node. 使用RequireJS加载模块化脚本将提高代码的加载速度和质量. IE 6+ .......... 兼容 ✔Firefox 2+ ..... 兼容 ✔Safari 3.2+ .... 兼容 ✔Chrome 3+ ...... 兼容 ✔Opera 10+ ...... 兼容 ✔ 获取 REQUIREJS§ 1 去下载 …

第三章：模块加载系统（requirejs）

任何一门语言在大规模应用阶段,必然要经历拆分模块的过程.便于维护与团队协作,与java走的最近的dojo率先引入加载器,早期的加载器都是同步的,使用document.write与同步Ajax请求实现.后来dojo开始以JSONP的方法设计它的每个模块结构.以script节点为主体加载它的模块.这个就是目前主流的加载器方式. 不得不提的是,dojo的加载器与AMD规范的发明者都是james Burke,dojo加载器独立出来就是著名的require.本章将深入的理解加载器的原理. 1.AMD规范…

【模块化编程】理解requireJS-实现一个简单的模块加载器

在前文中我们不止一次强调过模块化编程的重要性,以及其可以解决的问题: ① 解决单文件变量命名冲突问题 ② 解决前端多人协作问题 ③ 解决文件依赖问题 ④ 按需加载(这个说法其实很假了) ⑤ ...... 为了深入了解加载器,中间阅读过一点requireJS的源码,但对于很多同学来说,对加载器的实现依旧不太清楚事实上不通过代码实现,单单凭阅读想理解一个库或者框架只能达到一知半解的地步,所以今天便来实现一个简单的加载器加载器原理分析分与合事实上,一个程序运行需要完整的模块,以下代码为例: /…

JS模块化编程之加载器原理

世面上有好多JavaScript的加载器,比如 sea.js, require.js, yui loader, labJs...., 加载器的使用范围是一些比较大的项目, 个人感觉如果是小项目的话可以不用, 我用过seaJS和requireJS, 在项目中用过requireJS, requireJS是符合AMD,全称是(Asynchronous Module Definition)即异步模块加载机制 , seaJS是符合CMD规范的加载器. AMD__和__CMD AMD规范是依赖前置, CM…

js模块化加载器实现

背景自es6以前,JavaScript是天生模块化缺失的,即缺少类似后端语言的class, 作用域也只以函数作为区分.这与早期js的语言定位有关, 作为一个只需要在网页中嵌入几十上百行代码来实现一些基本的交互效果的脚本语言, 确实用不着严格的组织代码规范.但是随着时代的发展,js承担的任务越来越重, 从原先的script引入几十行代码即可的状态变成现在多人协作文件众多的地步, 管理和组织代码的难度越来越大,模块化的需求也越来越迫切. 在此背景下,众多的模块化加载器便应运而生. 模块化规范和实现…

js模块化/js模块加载器/js模块打包器

之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7628(大神的文章写的很详细,建议先看完大神的文章) 一.js模块化什么是js模块化,我们从历史说起. 1.一开始我们怎么写脚本?就是在html文件中用<script></script>写代码这种方式的缺点:代码复用靠复制,基本是全局变量. 2.后来我们用js文件写代码,用<…

小矮人Javascript模块加载器

https://github.com/miniflycn/webkit-dwarf 短小精悍的webkit浏览器Javascript模块加载器 Why 我们有许多仅基于webkit浏览器开发的应用无论是使用requirejs还是seajs都需要先加载完模块加载器本身之后才能加载其他模块无论出于首屏优化需要,还是手机2G优化需要,我们都需要一个足够小的模块加载器内置CDN失败回源策略 AMD & CMD require([module], callback); 这是AMD规范中模块引用的经典…

dojo1.7 加载器

原文地址:http://dojotoolkit.org/documentation/tutorials/1.7/modules/ dojo现在支持在异步模块异步(AMD)定义中加入模块写入功能了,这使得代码更容易编写和调试.在这一节中,我们学习关于这个模块的使用,并探讨如何使用它. 概述异步模块定义(AMD)格式是一种新的模块格式,只使用于1.7版本以上.它取代了dojo.provide, dojo.require, dojo.requireIf, dojo.requireAfterIf,…

实现简单的 JS 模块加载器

实现简单的 JS 模块加载器 1. 背景介绍按需加载是前端性能优化的一个重要手段,按需加载的本质是从远程服务器加载一段JS代码(这里主要讨论JS,CSS或者其他资源大同小异),该JS代码就是一个模块的定义,如果您之前有去思考过按需加载的原理,那你可能已经知道按需加载需要依赖一个模块加载器.它可以加载所有的静态资源文件,比如: JS 脚本 CSS 脚本图片资源如果你了解 webpack,那您可以发现在 webpack 内部,它实现了一个模块加载器.模块加载器本身需要遵循一个规范,当然您可…

js 简易模块加载器示例分析

前端模块化关注前端技术发展的各位亲们,肯定对模块化开发这个名词不陌生.随着前端工程越来越复杂,代码越来越多,模块化成了必不可免的趋势. 各种标准由于javascript本身并没有制定相关标准(当然es6已经有了import和export),所以在模块化方面诞生了各种不同的规范.主要有AMD规范(随requirejs诞生而普及),CMD规范(随seajs的出现而普及),commonjs(主要用于node,并不适合前端).至于以上几种规范的异同,无耻的我在这里就不多费口水了,请还不了解的亲们自行…

JS模块加载器加载原理是怎么样的？

路人一: 原理一:id即路径原则.通常我们的入口是这样的: require( [ 'a', 'b' ], callback ) .这里的 'a'.'b' 都是 ModuleId.通过 id 和路径的对应原则,加载器才能知道需要加载的 js 的路径.在这个例子里,就是 baseUrl + 'a.js' 和 baseUrl + 'b.js'. 但 id 和 path 的对应关系并不是永远那么简单,比如在 AMD 规范里就可以通过配置 Paths 来给特定的 id 指配 path. 原理二:crea…

webpack进阶构建项目(一)：1.理解webpack加载器

1.理解webpack加载器 webpack的设计理念,所有资源都是“模块”,webpack内部实现了一套资源加载机制,这与Requirejs.Sea.js.Browserify等实现有所不同. Webpack提供了一套加载器,比如css-loader,less-loader,style-loader,url-loader等,用于将不同的文件加载到js文件中,比如url-loader用于在js中加载png/jpg格式的图片文件,css/style loader用于加载css文件,less-loa…