一些回顾和总结
这几天又在回顾一些angularjs、还有一些项目基本目录结构、项目打包相关的东西;
不禁要感叹一句 “吾生也有涯，而知也無涯。以有涯隨無涯，殆已。”
1.回顾过程中，重新发现的点，这个项目的背景就是客户端的框架结构是我用"拿来主义"镜像的,今天才留意到?t=这段,我前面一直以为是webpack或者gulp的版本控制 ,当时看的时候没留意到;
<script src="api/internal/properties/env.jsx"></script>//window.XXX = {"version":xxx}
document.writeln((window.XXX.env === "dev"?[
xxxx
]:[
xxxx
]).map(function (s) {
return '<link href="' + s + '?t=' + window.XXX.version + '" rel="stylesheet" type="text/css"/>'
//return '<script type="application/javascript" src="' + s + '?t=' + window.XXX.version + '"><\/script>'
}).join('\n'));2. 很容易了解到的是angularjs的前端路由机制,在一个现有的前端项目代码中做一些路由修改增改不难，但是让你在仔细想想你的angularjs项目具体使用的什么路由手段的时候，此时我茫然了
形如:
$stateProvider.state("login", {
'url': "/login",
'views': {
'header': {
'controller': 'headerCtrl',
'templateUrl': 'xxx/header.html'
},
'content': {
'templateUrl': function () {
return 'xxx/login.action';
}
//'controller': 'XXXCtrl',
//template: '<ui-view/>'
}
}
//'controller': 'xxxCtrl',
//'templateUrl': function () {
// return 'xxxx/xxxx.action';
//},
'resolve': {
loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load( [
xxx
]);
}]
}
//'abstract': true,
//'cache': false,似乎和标准的angularjs路由写法并不相同,这属于那种呢？见参考;
参考:
https://stackoverflow.com/questions/22790209/angular-ui-router-ui-views-vs-directives
https://ivanproskuryakov.github.io/publications/AngularJS-routeProvider-and-stateProvider/
3.关于前端的代码项目目录的组织结构
D:. │ index.html │ style.css │ ├─api │ ├─internal │ │ ├─i18n │ │ │ 语言包.jsx │ │ │ │ │ ├─properties │ │ │ 环境.jsx │ │ │ │ │ └─sso │ │ 单点登录 │ │ │ └─private │ │ │ ├─npi │ ├─collection │ │ │ ├─xxx │ │ └─XXController │ │ │ └─v1 │ └─xxxx │ ├─common │ 一些公用的静态资源 │ ├─fonts │ xxx.woff │ ├─images │ │ 一些静态的图片资源 │ ├─js │ │ 外部的js │ │ ├─node_modules │ ├─npi │ 一些动态请求的template │ │ ├─pages │ ├─common │ │ ├─公用的一些模板和，相当于component │ │ ├─js其controller │ │ │ │ │ │ ├─XXX │ │ │ │ XXXView.html │ │ │ │ │ │ │ └─js │ │ │ XXXView.js │ ├─state │ 打包后的js │ ├─style │ │ css样式 │ └─upload 文件上传的url
这个路径下混杂这一些后端路径，生产环境和开发环境的路径也是混杂的;
参考:
https://scotch.io/tutorials/angularjs-best-practices-directory-structure
https://stackoverflow.com/questions/18542353/angularjs-folder-structure
https://tutorialedge.net/javascript/angularjs/angularjs-project-structure-tutorial/
http://bguiz.github.io/js-standards/angularjs/application-structure/
https://dzone.com/articles/angularjs-%25E2%2580%2593-recommended
https://github.com/rudolfolah/learning-angularjs/blob/master/project-structures.org
https://thinkster.io/egghead/directive-for-route-handling
https://stackoverflow.com/questions/21414133/angularjs-directive-vs-routeprovider
4.关于angular-ui
参考:
http://angular-ui.github.io/bootstrap/
由于plnkr.co不在公司内网白名单, 居然想不到简单的运行样例代码的方法了，后来发现包裹代码在plucker.js中;
5.关于项目打包
项目打包的重点在于将解决方案有机的融合到自己的当前项目中去,也就意味着框架和开发流还是有不完整和缺失的;
参考:
https://blog.csdn.net/ZWQ0325/article/details/90694099
https://www.webpackjs.com/guides/getting-started/
https://webpack.js.org/plugins/commons-chunk-plugin/
https://stackoverflow.com/questions/30329337/how-to-bundle-vendor-scripts-separately-and-require-them-as-needed-with-webpackhttps://github.com/wooorm/vendors/blob/master/package.json
https://www.toptal.com/javascript/optimize-js-and-css-with-gulp
http://blog.namangoel.com/browserify-vs-webpack-js-drama
https://www.cleveroad.com/blog/gulp-browserify-webpack-grunt
https://blog.csdn.net/dear_mr/article/details/72589256
https://www.npmjs.com/package/bundle-js
6.关于前端测试
规模比较小的团队说实话很难花太多人力和精力投入这部分内容,但是自动接口测试和系统测试其实是版本可靠性的不可缺少的保障;尤其可以避免的情况是，在频繁迭代的项目中，发布前自动测试可以避免出现后面的开发影响前面的功能这类情况;
摘一段:
11. 测试 测试的目的在于能以最少的人力和时间发现潜在的各种错误和缺陷，这在项目更新、重构等的过程中尤其重要，因为每当更改一些代码后，你并不知道这些代码有没有问题、会不会影响其他的模块。如果有了测试，运行一遍测试用例，就知道更改的代码有没有问题、会不会产生影响。 一般前端测试分以下几种： 单元测试：模块单元、函数单元、组件单元等的单元块的测试 集成测试：接口依赖（ajax）、I/O 依赖、环境依赖（localStorage、IndexedDB）等的上下文的集成测试 样式测试：对样式的测试 E2E 测试：端到端测试，也就是在实际生产环境测试整个应用 一般会用到下面的一些工具： jest enzyme cypress selenium puppeteer 另外，可以参考 聊聊前端开发的测试。
参考:
https://segmentfault.com/a/1190000017158444
https://github.com/senntyou/blogs
https://github.com/senntyou/blogs/blob/master/web-extend/10.md
7.angularjs的一些常见的小点
angularjs的$compile
.controller('dataAuditCtrl', ['$scope', ..., '$timeout','$compile',..., function ($scope,..., $timeout,$compile,...) {
angular.element(document.getElementById("drop_" + tableId)).append($compile(html)($scope));//编译进去
angularjs的$timeout---适用于你希望下一帧执行的这类场景，我这个描述可能不太准确
$timeout(function() {
});
angularjs $broadcast
参考：
https://stackoverflow.com/questions/37717493/usage-of-broadcast-emit-and-on-in-angularjs/42772444
https://stackoverflow.com/questions/19446755/on-and-broadcast-in-angular
angularjs component的几种bindings
@ > =
angularjs ng-if vs ng-show
angularjs ng-repeat中$index始终不变时看一下是否存在autocomplate等
angularjs中deferred使用
To make it shorter, here's what you should know: deferred.resolve() - means request succeeded deferred.reject() - request failed deferred.resolve(data) - means request succeeded and here's some data deferred.reject(data) - request failed and here;s some data
angularjs服务的写法
angularjs服务Service
angular.module('xxx.service', []).factory('locals', ['$window', function ($window) {
return {
...//https://stackoverflow.com/questions/37431652/angularjs-localstorage-with-object
}
}]).service('xxxService', ['locals', '$timeout', '$http', '$httpParamSerializerJQLike','$q', function (locals, $timeout, $http, $httpParamSerializerJQLike,$q) {
var xxxService = {
};
return xxxService;
}]).service("SsoService", ['$q', '$injector', '$rootScope', function ($q, $injector, $rootScope) {
return {
login: function (err) {
...
}
}
}]).constant('xxxConstant', {//定义前端使用的常量
XXX:'xxx'
});angularjs发送json
PostJson: function (url, data, successFun) {
if (url.indexOf(window.xxx.contextPath)===-1){
url = window.xxx.contextPath + url;
}
return $http.post(url, angular.toJson(data), {headers: {'Content-Type': 'application/json'}}).then(function (response) {
if (angular.isFunction(successFun)) {
return successFun(response);
}
})
}angularjs发送form结构
PostJQlike: function (url, data, successFun) {
if (url.indexOf(window.xxx.contextPath)===-1){
url = window.xxx.contextPath + url;
}
return $http.post(url, $httpParamSerializerJQLike(data), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(function onSuccess(response) {
if (angular.isFunction(successFun)) {
return successFun(response);
}
})
}一些暂未分类的参考:
https://github.com/thelgevold/angular-lazy-load
https://github.com/go-gitea/gitea
/*---------------------------------- 分割线-------------------------------------*/
关于前端优化：
https://zhuanlan.zhihu.com/p/52625231
- 点赞
- 收藏
- 关注作者
评论（0）