angularjs + fis +modJS 对于支持amd规范的组建处理(PhotoSwipe 支持,百度webUpload支持)
这不是很好的处理方式,但是能够解决问题,希望有大神推荐更好的方式。
前端模块使用angularjs + fis +modJS 开发前端应用有两个月了。总结了以下的优点:
fis 自动构建,自动发布,功能非常方便
modJS 的require方式 类似写 nodejs ,写起来方便(后面才知道坑就在这里)
因为angular在模块化中做了很多事情,所以基于amd 的模块化其实很清淡,大部分是用来加载一些别人写的类库。
问题1: 解决PhotoSwipe 支持
1:导入PhotoSwipe就是放入libs 文件夹下,(你的不一定叫libs)
2: 封装成一个指令,便于使用其他地方使用。
3: require(photoSwipe);
4: 打开console,发现 PhotoSwipe is undefined ,为啥呢?
;(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(factory);
} else if (typeof exports === 'object') {
module.exports = factory();
} else {
root.PhotoSwipe = factory();
}
})(this, function () {
因为有这个头,官方声明为了兼容requirejs 的amd 方式,很多流行库中都有这么一段大同小异的代码,
然而 modJS 自动打包以后会自动添加
define('photoswipe', function(require, exports, module){}
导致无法实例化 PhotoSwipe
解决方式:
将this
改成 window
,同时 将 var PhotoSwipe
= 改成 window.PhotoSwipe
; 解决问题;
问题2: 百度上传插件;
同样的问题 WebUpload 无法初始化, 但是细心的你一定发现无法像上面那么添加window 修改,因为 里面已经写 window了
解决方式:
因为webUpload有自己的加载方式,用的是 require
,而这个 require
跟 modJs
的 require
是冲突的,
将 require
修改为 _require
问题解决;
如开头所说,这不是理想的解决方式,甚至是不正确的方式,如有好的方法,麻烦留言告,感谢!
angularjs + fis +modJS 对于支持amd规范的组建处理(PhotoSwipe 支持,百度webUpload支持)的更多相关文章
- AMD规范学习笔记
背景 NodeJS的一套比较简洁 Moudles 规范, 使得在服务器端的模块化变得更加简单.很长一段时间,很多公司或者项目都有自己的一套模块化机制, 却未能形成一套统一的标准, NodeJS的Mou ...
- Javascript模块规范(CommonJS规范&&AMD规范)
Javascript模块化编程(AMD&CommonJS) 前端模块化开发的价值:https://github.com/seajs/seajs/issues/547 模块的写法 查看 AMD规 ...
- JavaSript模块规范 - AMD规范与CMD规范介绍
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题 ...
- JavaSript模块规范 - AMD规范与CMD规范介绍(转)
JavaSript模块规范 - AMD规范与CMD规范介绍 JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者 ...
- JavaSript模块化-AMD规范与CMD规范
JavaScript模块化 在了解AMD,CMD规范前,先来简单地了解下什么是模块化,模块化开发. 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性的分解以之处 ...
- JavaSript模块规范 - AMD规范与CMD规范介绍 (转载lovenyf.blog.chinaunix.net)
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题 ...
- JavaScript模块化---AMD规范
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问 题进行系 ...
- RequireJS和AMD规范
目录 概述 define方法:定义模块 require方法:调用模块 AMD模式小结 配置require.js:config方法 插件 优化器r.js 参考链接 概述 RequireJS是一个工具库, ...
- 【转】JavaSript模块规范 - AMD规范与CMD规范介绍
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题 ...
随机推荐
- 从 HTTP 到 HTTPS - IIS 部署免费 HTTPS
这篇文章首发于我的个人网站:听说 - https://tasaid.com/,建议在我的个人网站阅读,拥有更好的阅读体验. 这篇文章与 博客园 和 Segmentfault 共享. 前端开发QQ群:3 ...
- MRC下多个对象的内存管理
//set方法传递进来对象的生命周期,要求是在当前对象销毁之前,它一直存在就好- (void)setCar:(Car *)car{ //1.判断set方法传递进来的值是否与成员变量中保存的是同一个对象 ...
- JavaScript的个人学习随手记(三)
JavaScript Window - 浏览器对象模型 Window 对象 以下window对象时使用均可省略window 所有浏览器都支持 window 对象.它表示浏览器窗口. 所有 JavaSc ...
- 初识angularjs
1,angular的ng-model带来了双向绑定机制 2,用angular的表达式{{...}}现实在HTML中,存储在我们的$scope上 3,在angular中$scope是连接controll ...
- php new self()和new static()
class A { public static function get_self() { return new self(); } public static function get_static ...
- mac brew & gcc安装
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" ...
- ORA-12523: TNS: 监听程序无法找到适用于客户机连接的例程
今天使用PL/SQL Developer连接到一台新的测试服务器时,遇到ORA错误:ORA-12523: TNS: 监听程序无法找到适用于客户机连接的例程.对应的监听日志文件里面错误为TNS-1252 ...
- Linux挂载卸载光盘&实践
在Linux下有时候需要挂载光盘,拷贝文件或安装系统,例如拷贝Redhat操作系统镜像文件等.下面介绍一下在Linux系统下挂载.卸载光盘的方法. 在Linux系统中,每一个物理设备都可以看做是一个文 ...
- Linux备份ifcfg-eth0文件导致的网络故障问题
今天在给一台操作系统为Oracle Linux Server release 5.7的服务器配置网络时,遇到了备份ifcfg-eth0配置文件,导致网卡无法绑定IP地址的情况.觉得是个有意思的案例,特 ...
- Red Hat Enterprise Linux 各个版本以及发布日期
Red Hat Enterprise Linux 7 Release/Update General Availability Date redhat-release Errata Date* Kern ...