- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

一些回顾和总结

Amrf 发表于 2019/11/12 20:19:29 2019/11/12

【摘要】这几天又在回顾一些angularjs、还有一些项目基本目录结构、项目打包相关的东西;不禁要感叹一句 “吾生也有涯，而知也無涯。以有涯隨無涯，殆已。”1.回顾过程中，重新发现的点，这个项目的背景就是客户端的框架结构是我用"拿来主义"镜像的,今天才留意到?t=这段,我前面一直以为是webpack或者gulp的版本控制 ,当时看的时候没留意到;<script src="api/internal/p...

这几天又在回顾一些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/27645202/what-is-the-difference-between-routeprovider-and-stateprovider

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

https://stackoverflow.com/questions/37069110/what-is-the-difference-between-controller-and-directives-in-angular-js/37070464

https://stackoverflow.com/questions/31481000/difference-between-and-when-to-use-controllers-vs-directives

https://stackoverflow.com/questions/38342664/what-are-the-main-differences-between-components-and-directives-in-angularjs-1-5

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-webpack https://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

https://stackoverflow.com/questions/36460706/what-is-the-difference-between-deferred-resolvedata-and-deferred-resolve-i

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);
                }
            })
        }