最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
js模块加载seajs框架的教程
时间:2015-10-29 编辑:简简单单 来源:一聚教程网
有些时候,我们不得不写一些前段的东西,但是总感觉前段加载的太乱,管理起来不方便,加载也是问题,其实以前不会写页面,但是偶然机会开始一直写页面+写程序了。我的使用搭配方案是 seajs + angularjs + bootstrap + jquery + grunt + less 。
为什么使用的是 Grunt 其实很简单,因为我也需要编译 less 文件,实施监控文件的改动和对 html 、 js 、css 进行压缩。当然不仅仅是这些,功能很强大,我就不一一介绍了。只是个人喜好而已。感觉这东西跟 golang 中的 bee Application 差不多。你也可以选择你所喜欢的。
一般的 CSS 我使用的是 less 因为 bootstrap 中也是提供了完整的 less 文件,开发和定制前端,最重要的是维护起来真的很方便,不得不这么说。
0X01 seajs 加载原生的 JQuery
很简单,只需要如下就可以
代码如下 | 复制代码 |
define(function(){ |
其实就是将,下载的 JQuery 的源代码放到注释的部分加载就可以了。
0X02 angular js 模块如何加载
angular js 如何加载生效呢? 不能用了咋办? 其实也一样很简单,如下
代码如下 | 复制代码 |
define(function(require,exports,module){ |
只需要在注释的地方假如 angular js 源代码就可以了。
如果使用 angular js的其他模块,譬如route ,只需要将源代码包在 define(function(){ }) 中就可以,如下
代码如下 | 复制代码 |
define(function(){ |
然后,你就可以写一段代码测试一下了,如下
代码如下 | 复制代码 |
define(function(require,exports,module){ |
0X03 grunt 压缩时 angularjs 失效问题
这个也很简单,其实就是将特定的命名再压缩的时候不编译。在你的 uglify -> 项目 -> mangle 添加except
代码如下 | 复制代码 |
mangle: { except: ['require', 'exports','module','$','jquery','angular','$routeProvider','$scope','$routeParams'] }, |
就简单说到这吧!!
相关文章
- JS异步加载的三种实现方式 07-03
- 详解VueJs异步动态加载块 06-13
- 详解基于angular路由的requireJs按需加载js 02-09
- 深入分析seajs加载过程 04-04
- js延时加载特效代码 09-14
- js中判断iframe是否加载完成 02-20