KISSY
add(name?,factory?,deps)  函数挂载在全局对象KISSY上,用来定义模块。
 
一个 JS 文件包含一个add()(这时路径+文件名可以用作模块名),如果一个文件包含多个add(),则必须为每个add()指定模块名,即name参数不可省略
use() 函数挂载在全局对象KISSY上,用来异步调用模块,并在模块加载完成后运行沙箱逻辑。
 
config() 函数挂载在全局对象KISSY上,用来读写全局配置项,包括注册包、预注册模块名称,模块文件的引用规则等等。
KMD 规范诞生之初还未有CommonJS规范以及AMD 和 CMD。KMD 作为一个完整的模块规范,崇尚约定,保持简单,并在 Loader 的实现过程中,新增了别名、包配置、动态combo等实际工作中常用的功能。
 
 
Require
前端开发越来越复杂,代码的管理变得越来越重要。模块化开发简直是前端开发的福音啊,如果你还没有接触前端模块开发,可以了解一下两个著名的模块开发框架SeaJS和RequireJS,这个两个都是非常优秀的模块开发框架,只是两者的遵循的规范不一样,SeaJS提倡按需加载,你需要哪个库或者模块,直接 var myLib = require(‘xxx’);就可以了。而RequireJS则是全部加载完成后才执行。两者方式各有优缺点,按实际需求选择,但是如果是团队开发的话那么用Requirejs会好点,重点是人家文档规范。 
今天时候的是RequireJS打包。在项目开发完成后,需要上线,但是模块太多了,一个个加载肯定不符合前端优化的要求,前端的优化原则是减少请求,合并压缩。那么写那么多的模块最后可定是要合并压缩起来的。这里就需要用到 RequireJS提供的r.js。r.js可以在安装RequireJS后的bin目录下可以找到。  
 
依赖node和r.js
node r.js -o baseUrl=js name=main out=built.js
 
RequireJS加载模块速度很快,很有可能在页面DOM Ready之前脚本已经加载完毕。需要与DOM交互的工作应等待DOM Ready。现代的浏览器通过DOMContentLoaded事件来知会。 但是,不是所有的浏览器都支持DOMContentLoaded。domReady模块实现了一个跨浏览器的方法来判定何时DOM已经ready。下载并在你的项目中如此用它:
require(['domReady'], function (domReady) {
domReady(function () {
//This function is called once the DOM is ready.
//It will be safe to query the DOM and manipulate
//DOM nodes in this function.
});
}); 
requireJs多模块打包合并说明:
1、一个模块只能有一个define模块定义。
2、一个js多个模块则需要写成非匿名模块。一般js压缩合并时会把路径作为模块名加到定义中。
 

Kissy && Require的更多相关文章

  1. kissy小记

    <script> KISSY.add('demo',function(S ,require, exports, module){ var Node = require('node'); v ...

  2. zepto,kissy前端框架实现跨域

    三.jsonp的原理:带有src属性标签的跨域资源获取能力,在jsonp中通常使用<script>标签,因为<script>标签获取的跨域资源可以使用回调函数直接处理 json ...

  3. WCF : 修复 Security settings for this service require Windows Authentication but it is not enabled for the IIS application that hosts this service 问题

    摘要 : 最近遇到了一个奇怪的 WCF 安全配置问题, WCF Service 上面配置了Windows Authentication. IIS上也启用了 Windows Authentication ...

  4. webpack解惑:require的五种用法

    我之前在 <前端搭环境之从入门到放弃>这篇文章中吐槽过,webpack中可以写commonjs格式的require同步语法,可以写AMD格式的require回调语法,还有一个require ...

  5. express全局安装后无法通过require使用

    今天入门了一下express,首先安装依赖. npm install express -g; npm install body-parser -g; npm install cookie-parser ...

  6. require() 源码解读

    2009年,Node.js 项目诞生,所有模块一律为 CommonJS 格式. 时至今日,Node.js 的模块仓库 npmjs.com ,已经存放了15万个模块,其中绝大部分都是 CommonJS ...

  7. 项目开发(Require + E.js)

    最近在做的几个项目,分别用了不同的框架跟方式,有个H5的项目,用了vue框架, 这个项目我还没有正式加入进去, 等手头的这个项目完成就可以去搞vue了, 现在手头的这个项目是一个招聘的项目, 用到了N ...

  8. Javascript模块化编程(三):require.js的用法

    Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...

  9. Torch Problems: require some packages doesn't work

    I've recently got a problem. require 'cutorch' doesn't work. But it was ok yesterday, although I hav ...

随机推荐

  1. 微信小程序 功能函数 购物车商品删除

    // 购物车删除 deleteList(e) { const index = e.currentTarget.dataset.index; let carts = this.data.carts; c ...

  2. rhel和centos7下更改网卡名称ens33为eth0

    Linux使用小Tips 整理些Linux些常遇到的问题. 修改网卡ens33为eth0 在使用RHEL和Centos7,发现网卡名称变成了EnoX,挺不习惯.现更改回旧名称eth0看着顺眼. 备份/ ...

  3. static关键字的总结

    C++的static有两种用法:面向过程程序设计中的static和面向对象程序设计中的static.前者应用于普通变量和函数,不涉及类:后者主要说明static在类中的作用. 1.面向过程设计中的st ...

  4. DAY5-Flask项目

    1.验证参数(WTForms): 当URL为/book/search?q= &page=1 时 ,p=空格,验证器会通过,在forms验证层的book.py文件中添加DataRequired验 ...

  5. VS2013 UML 如何复制文件

    如:复制活动图,文件复制了显示不了 正确做法:新建活动图,打开源活动图,全选,复制,在新建的活动图粘贴,以此实现复制

  6. win10远程连接

    提示凭证不工作问题 https://blog.csdn.net/sinat_25926481/article/details/50775616

  7. 【bzoj2002】 Hnoi2010—Bounce 弹飞绵羊

    http://www.lydsy.com/JudgeOnline/problem.php?id=2002 (题目链接) 题意 数轴上${n}$个点,每个点有一个权值${a_i}$,如果到达这个点,接下 ...

  8. WEB入门.六 盒子模型

    学习内容 CSS盒子模型 盒子之间的关系 页面元素定位 能力目标 理解盒子模型 理解内容与表现分离的优点 理解并掌握盒子之间的关系 理解并掌握绝对定位与相对定位的用法 本章简介 上一章节中已经讲解了页 ...

  9. CAS使用心得

    1.理解CAS实现SSO需要哪些组成部分 2.理解CAS实现SSO流程,包括登陆.注销.二次登陆.其他应用登陆 3.CAS部署需要SSL支持,理解容器如何开启SSL.服务端证书.jre证书信任.创建以 ...

  10. Eclipse – Java.Lang.OutOfMemoryError: Java Heap Space(转)

    In Eclipse IDE, if your program is consuming a lot of memory (loading big data) like this : List< ...