js - 模块化开发的兼容exports的套路
补充:除了第一种的套路,还可以这样使用第二种。都是用来自执行函数的。第二种的好处是,还可以返回一个true。
// 常用
;(function () {})(); // 小技巧(如果不加上!会报错,加上之后还能返回true呢。)
// 但由于衡返回true。所以只有某些函数是只执行,不在于返回结果的可以用这种。
;!function(){};
兼容套路1:适用于遵循CommonJs 、 AMD/CMD 的套路
;(function (root, factory) {
if (typeof exports === "object") {
module.exports = factory();
} else if (typeof define === "function" && define.amd) {
define([], factory);
} else {
root.ol = factory();
}
}(this,function () {
// ... 这里编写你的代码
return { };
})
兼容套路2:jquery的套路
(function( global, factory ) { "use strict"; if ( typeof module === "object" && typeof module.exports === "object" ) { // For CommonJS and CommonJS-like environments where a proper `window`
// is present, execute the factory and get jQuery.
// For environments that do not have a `window` with a `document`
// (such as Node.js), expose a factory as module.exports.
// This accentuates the need for the creation of a real `window`.
// e.g. var jQuery = require("jquery")(window);
// See ticket #14549 for more info.
module.exports = global.document ? factory(global, true) : function( w ) {
if ( !w.document ) {
throw new Error( "jQuery requires a window with a document" );
}
return factory( w );
};
} else {
factory( global );
} // Pass this if window is not defined yet
})( typeof window !== "undefined" ? window : this, function( window, noGlobal ) { //... 这里编写你的代码,例如:
if ( !noGlobal ) {
window.jQuery = window.$ = jQuery;
} return jQuery;
})
兼容套路3:第三方中学习过来的简单套路
"use strict";
(function(exports, undefined) {
var ns = exports.Best = exports.Best || {}; /***************************/
/********** Game **********/
/***************************/
var Game = ns.Game = function(options) {
for (var p in options) {
this[p] = options[p]
}
};
Game.prototype = {}; /***************************/
/********** Scene **********/
/***************************/
var Scene = ns.Scene = function(options) {
for (var p in options) {
this[p] = options[p]
}
};
Scene.prototype = {};
})(this); // index.js
var game = new Best.Game({
// some options...
});
是不是很奇怪一个闭包是怎么把变量Best暴漏到外部的?这是因为闭包传入的this。实际上是window。
另一个重要的知识点:对象的赋值,是值引用的。什么意思呢?举个例子
window.a = {};
var aa = a;
aa.fuck = 'you';
console.log(a); // => {fuck: "you"}
js - 模块化开发的兼容exports的套路的更多相关文章
- JS模块化开发:使用SeaJs高效构建页面
一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就 ...
- JS模块化开发----require.js
前言 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等的助力也使得前 ...
- JS模块化开发(三)——seaJs+grunt
1.seaJs直接构建存在的问题 由于模块之间的依赖require引用的是模块名,当多个js模块被合并成一个时,会由于找不到模块名而报错 2.seaJs+grunt开发 用到的插件:grunt-cmd ...
- Js模块化开发的理解
Js模块化开发的理解 模块化是一个语言发展的必经之路,其能够帮助开发者拆分和组织代码,随着前端技术的发展,前端编写的代码量也越来越大,就需要对代码有很好的管理,而模块化能够帮助开发者解决命名冲突.管理 ...
- js模块化开发——前端模块化
在JavaScript发展初期就是为了实现简单的页面交互逻辑,寥寥数语即可:如今CPU.浏览器性能得到了极大的提升,很多页面逻辑迁移到了客 户端(表单验证等),随着web2.0时代的到来,Ajax技术 ...
- JS模块化开发(一)——seaJs
模块化开发要解决的问题: 1.冲突 比如:多人协作开发时,不同js库中的函数重名问题 可以用命名空间解决: var module={} module.a=1; module.b=function(){ ...
- Js模块化开发--seajs和gruntJs
1.Seajs库 解决开发中的冲突依赖等问题,提供代码可维护性. SeaJS 是由玉伯开发的一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意 JavaScript 模块和css ...
- require.js模块化开发
模块化开发的原因: 1.引入的js过多然后在加载的过程中容易出现假死的状态,导致页面会发生白屏 2.变量名的问题 在多人协作开发的时候容易出现变量名的冲突 面向对象 3.引入优先级的问题 模块化开发分 ...
- 前端模块化 | 解读JS模块化开发中的 require、import 和 export
本篇分为两个部分 第一部分:总结了ES6出现之前,在当时现有的运行环境中,实现"模块"的方式: 第二部分:总结了ES6出现后,module成为ES6标准,客户端实现模块化的解决方案 ...
随机推荐
- 高效mysql的习惯(程序员版本)
高效的mysql 一定要有主键 如果没有主键: 数据多次读写后可能更离散,有更多随机I/O MySQL复制环境中,如果选择RBR模式,没有主键的update需要读全表,导致复制延迟 好的主键特点: 没 ...
- vijos P1190繁忙的都市(Kruskal)(最小生成树)
P1190 繁忙的都市 城市C是一个非常繁忙的大都市,城市 中的道路十分的拥挤,于是市长决定对其中的道路进行改造.城市C的道路是这样分布的:城市中有n个交叉路口,有些交叉路口之间有道路相连,两个交叉 ...
- 【二分答案】【哈希表】【字符串哈希】bzoj2946 [Poi2000]公共串
二分答案,然后搞出hash值扔到哈希表里.期望复杂度O(n*log(n)). <法一>next数组版哈希表 #include<cstdio> #include<cstri ...
- 6.3(java学习笔记)缓冲流
一.缓冲流 使用缓冲流后的输入输出流会先存储到缓冲区,等缓冲区满后一次性将缓冲区中的数据写入或取出. 避免程序频繁的和文件直接操作,这样操作有利于提高读写效率. 缓冲流是构建在输入输出流之上的,可以理 ...
- java web(学习笔记)项目路径问题
最近刚接触java web特别是是关于项目路径这一块很晕,就把自己遇到的一些疑惑和理解写下来. 首先贴上路径,这里用的是eclipse. 其中我们要注意看WebContent目录,这是web程序的根目 ...
- Java多线程——ReentrantLock源码阅读
上一章<AQS源码阅读>讲了AQS框架,这次讲讲它的应用类(注意不是子类实现,待会细讲). ReentrantLock,顾名思义重入锁,但什么是重入,这个锁到底是怎样的,我们来看看类的注解 ...
- JavaBean的详细及引用
1.JavaBean实际是具有统一接口格式的java类 2.JavaBean的组成:属性(Properties).方法(Method).事件(Events) 3.一个JavaBean的例子(该例子是用 ...
- SQL server 2008 安装问题解决 转
http://www.cnblogs.com/Hackerman/p/4472811.html 安装sqlserver2008 出现的一些问题解决方法 1,安装sqlserver的时候出现如下图所 ...
- Cisco模拟器Web-IOU使用说明 转
http://blog.sina.com.cn/s/blog_af0abf1f0102uztk.html GNS3作为使用最多的Cisco官方模拟器,是因为它使用简单,所有设置图形化,是一款非常强 ...
- Telnet窗口尺寸选项
转:http://www.cnpaf.net/Class/Telnet/200408/6.html 1.命令名称和选项代码 名称=NAWS(NegotiateAboutWindowSize)协商窗口的 ...