有些时候，我们不得不写一些前段的东西，但是总感觉前段加载的太乱，管理起来不方便，加载也是问题，其实以前不会写页面，但是偶然机会开始一直写页面+写程序了。我的使用搭配方案是 seajs + angularjs + bootstrap + jquery + grunt + less 。
为什么使用的是 Grunt 其实很简单，因为我也需要编译 less 文件，实施监控文件的改动和对 html 、 js 、css 进行压缩。当然不仅仅是这些，功能很强大，我就不一一介绍了。只是个人喜好而已。感觉这东西跟 golang 中的 bee Application 差不多。你也可以选择你所喜欢的。
一般的 CSS 我使用的是 less 因为 bootstrap 中也是提供了完整的 less 文件，开发和定制前端，最重要的是维护起来真的很方便，不得不这么说。
0X01 seajs 加载原生的 JQuery
很简单，只需要如下就可以
| 代码如下 | 复制代码 |
|
define(function(){ //这里放JQuery源代码 return $.noConflict(); }); |
|
其实就是将，下载的 JQuery 的源代码放到注释的部分加载就可以了。
0X02 angular js 模块如何加载
angular js 如何加载生效呢？ 不能用了咋办？ 其实也一样很简单，如下
| 代码如下 | 复制代码 |
|
define(function(require,exports,module){ // angular js 源代码 module.exports = angular; }); |
|
只需要在注释的地方假如 angular js 源代码就可以了。
如果使用 angular js的其他模块，譬如route ,只需要将源代码包在 define(function(){ }) 中就可以，如下
| 代码如下 | 复制代码 |
|
define(function(){ //angular-route 源代码 }) |
|
然后，你就可以写一段代码测试一下了，如下
| 代码如下 | 复制代码 |
|
define(function(require,exports,module){ var angular = require('angular'); require('angular-route'); var app = angular.module('myapp',['ngRoute']).config(function($routeProvider){ $routeProvider.when('/',{ controller : function($scope){ $scope.message = '这里是首页'; }, template : "{{message}}" }).when('/list/:id',{ controller : function($scope,$routeParams){ $scope.message = $routeParams.id; }, template : "您的用户id是{{message}}" }).when('/product',{ controller : function($scope){ $scope.message = "这里是产品页"; }, template : "{{message}}" }).otherwise({ redirectTo : '/' }); }); app.controller('test',['$scope','$location',function($scope,$location){ $scope.message = 'widuu.com'; }]); }); |
|
0X03 grunt 压缩时 angularjs 失效问题
这个也很简单，其实就是将特定的命名再压缩的时候不编译。在你的 uglify -> 项目 -> mangle 添加except
| 代码如下 | 复制代码 |
| mangle: { except: ['require', 'exports','module','$','jquery','angular','$routeProvider','$scope','$routeParams'] }, |
|
就简单说到这吧！！
时间： 2024-09-12 13:00:41