文档章节

angularjs + fis +modJS 对于支持amd规范的组建处理(PhotoSwipe 支持,百度webUpload支持)

jiuyuehe
 jiuyuehe
发布于 2016/04/28 16:40
字数 463
阅读 85
收藏 0

这不是很好的处理方式,但是能够解决问题,希望有大神推荐更好的方式。

前端模块使用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,而这个 requiremodJsrequire 是冲突的,

require 修改为 _require

问题解决;

如开头所说,这不是理想的解决方式,甚至是不正确的方式,如有好的方法,麻烦留言告,感谢!

© 著作权归作者所有

jiuyuehe
粉丝 2
博文 12
码字总数 7185
作品 2
深圳
架构师
私信 提问
给 Web 开发者的 25 款最有用的 AngularJS 工具

AngularJS 是一种新 JavaScript 框架,目的是降低要求,加快开发速度。AngularJS 是让 HTML 标记动态,使其对 web 开发者更有帮助,同时从大量的分段中给定一个标准结构,使开发速度更快更高...

oschina
2015/03/05
68.5K
19
使用Angular cli升级AngularJS项目——(一)引导Angular混合应用

前言 都9102年了,笔者所在的公司的主要项目还是用AngularJS 1.6这种史诗的框架进行开发的。另外由于历史的原因,代码的凌乱程度早已超越想象。为此,笔者决定痛下决心把整个项目重构了一遍....

益生菌。
02/14
0
0
Angular 的 Material Design 风格框架 - Angular Material

Material Design for Angular 是 Angular 官方团队开发的基于最新版本 Angular 的 Material Design 风格的框架,可和 Nest.js 搭配使用做全栈开发。 针对 Angular 1 版本的实现 https://www....

匿名
2018/05/15
6.5K
4
AngularJS2.0 教程系列(一)

Why Angular2 Angular1.x显然非常成功,那么,为什么要剧烈地转向Angular2? 性能的限制 AngularJS当初是提供给设计人员用来快速构建HTML表单的一个内部工具。随着时间的推移,各种特性 被加...

笔阁
2015/07/22
24.5K
1
如何优雅的使用 Angular 表单验证

随便说说,这一节可以跳过 去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模块中使用最新的 An...

why520crazy
01/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Replugin借助“UI进程”来快速释放Dex

public static boolean preload(PluginInfo pi) { if (pi == null) { return false; } // 借助“UI进程”来快速释放Dex(见PluginFastInstallProviderProxy的说明) return PluginFastInsta......

Gemini-Lin
今天
4
0
Hibernate 5 的模块/包(modules/artifacts)

Hibernate 的功能被拆分成一系列的模块/包(modules/artifacts),其目的是为了对依赖进行独立(模块化)。 模块名称 说明 hibernate-core 这个是 Hibernate 的主要(main (core))模块。定义...

honeymoose
今天
4
0
CSS--属性

一、溢出 当内容多,元素区域小的时候,就会产生溢出效果,默认是纵向溢出 横向溢出:在内容和容器之间再套一层容器,并且内部容器要比外部容器宽 属性:overflow/overflow-x/overflow-y 取值...

wytao1995
今天
4
0
精华帖

第一章 jQuery简介 jQuery是一个JavaScript库 jQuery具备简洁的语法和跨平台的兼容性 简化了JavaScript的操作。 在页面中引入jQuery jQuery是一个JavaScript脚本库,不需要特别的安装,只需要...

流川偑
今天
7
0
语音对话英语翻译在线翻译成中文哪个方法好用

想要进行将中文翻译成英文,或者将英文翻译成中文的操作,其实有一个非常简单的工具就能够帮助完成将语音进行翻译转换的软件。 在应用市场或者百度手机助手等各大应用渠道里面就能够找到一款...

401恶户
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部