项目背景：开发者平台
一 、介绍
介绍：开发者平台是一个贯穿在项目开发过程中的工具集群，包括【项目管理】、【项目组】、【监控系统】、【管理中心】、【基础服务管理】五大功能模块，能一站式提供开发者在开发过程中除编程外的服务，
核心功能: web自动部署，错误日志在线查看，web业务监控，服务器健康状态监控，游戏服务监控
开发者可以通过该平台进行以下操作:
1.高效的进行部署任务。
2.获得监控服务，帮你快速发现问题，定位问题，解决问题。实现项目，游戏的高可靠。
3.统一管理自己的项目。
4.随时查看或下载项目日志。
5.团队管理，让管理者能够对开发团队的人力，权限关系，资源分配与使用有一个更标准化的管理。
二、问题总结
1.【js】Object.assign() 用于把一个或多个源对象的可枚举属性值复制到目标对象中,返回值为目标对象
Object.assign(target, ...sources) target：目标对象； sources： 源对象
2.【js】事件处理器
在事件处理器中经常需要调用
event.preventDefault()
event.stopPropagation()
事件修饰符：.prevent 与 .stop
按键修饰符：如 <input v-on:keyup.13 = ‘submit’>
按键名： enter tab delete esc space up down left right space up down left right
【举例】
<!--在某个组件的根元素上监听一个原生事件-->
<a v-on:click.native=""></a>
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
3.【js】$.extend
作用：1.合并多个对象。2.深度嵌套对象。
1.合并多个对象。
这里使用的就是$.extend()的嵌套多个对象的功能。所谓嵌套多个对象，有点类似于数组的合并的操作。
用法: jQuery.extend(obj1,obj2,obj3,..)
var Css1={size: "10px",style: "oblique"}
var Css2={size: "12px",style: "oblique",weight: "bolder"}
$.jQuery.extend(Css1,Css2)
//结果:Css1的size属性被覆盖,而且继承了Css2的weight属性
// Css1 = {size: "12px",style: "oblique",weight: "bolder"}
2.深度嵌套对象。
jQuery.extend(
{ name: “John”, location: { city: “Boston” } },
{ last: “Resig”, location: { state: “MA” } }
);
// 结果:
// => { name: “John”, last: “Resig”, location: { state: “MA” } }
// 新的更深入的拷贝 .extend()
jQuery.extend( true,
{ name: “John”, location: { city: “Boston” } },
{ last: “Resig”, location: { state: “MA” } }
);
// 结果
// => { name: “John”, last: “Resig”, location: { city: “Boston”, state: “MA” }
4.【js】this.$nextTick() 异步更新队列
用于默认异步更新DOM, 下次事件循环时清空队列, 执行必要的DOM更新
Vue.nextTick(callback);
5.【HTML】比较html text val
(1).HTML
html():取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档
html(val):设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
(2).TEXT
text():取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
text(val):设置所有匹配元素的文本内容,与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体).
(3).VAL
val():获得第一个匹配元素的当前值。
val(val):设置每一个匹配元素的值。
6.【js】 监控页面刷新,关闭 事件的方法
页面加载时: 只执行onload
页面关闭时: 先执行onbeforeunload，最后onunload
页面刷新时: 先执行onbeforeunload，然后onunload，最后onload。
onbeforeunload：在页面刷新和关闭的时候触发事件，表示正要去服务器读 取新的页面时调用，此时还没开始读取，
onunload：则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。
7.【css】换行整理
1). word-break:break-all; 只对英文起作用，以字母作为换行依据
2). word-wrap:break-word; 只对英文起作用，以单词作为换行依据
3). white-space:pre-wrap; 只对中文起作用，强制换行
4). white-space:nowrap; 强制不换行，都起作用
5). white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持）
*注意：设置强制将英文单词断行，需要将行内元素设置为块级元素。
二期构建
1.【vuex】Getters
const getters = {
LOG_lists : state => state.log_server_lists,
};
等同于
computed: {
LOG_lists() {
return this.$store.state.log_server_lists
}
}
2.【webpack】 webpack.common.js 里设置 resolve alias 用于 [ 重定向别名 ]
举例：
resolve: {
extensions: ['.js', '.vue', '.scss', '.css'],
alias: {
'moment': 'moment/min/moment-with-locales.min.js',
'vue': 'vue/dist/vue.min.js',
'vue-router': 'vue-router/dist/vue-router.min.js',
'@': resolve('src'),
'components': resolve('src/components'),
'config': resolve('src/config'),
'images': resolve('src/images'),
'store': resolve('src/store'),
'view': resolve('src/view'),
'utils': resolve('src/utils')
}
}
3.【css】flex布局 水平垂直居中
display: flex;
align-items: center;
justify-content: center;
4.【css】calc : 用于动态计算长度值，函数支持 "+", "-", "*", "/" 运算；
运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)
5.【vue】刷新当前页 this.$router.go(0)
6.【js】保留两位小数 toFixed
var num = 2.446242342;
num = num.toFixed(2); // 输出结果为 2.45
扩展：
问题： js 数字计算时可能出现精度溢出，导致计算结果不准确。如 1.1*100时结果为 110.00000000000001
解决方法： 用toFixed()将数字的精度缩小
举例： 判断两个数字相等
function isEqual (num1, num2 , digits = 10) {
return num1.toFixed(digits) === num1.toFixed(digits)
}
7.【vue】router-link
可点击击内容，实现 在新标签中打开链接
<router-link :to ="{ path: 'xxx', query: {} }"> {{ content }} </router-link>
8.【vue】$set用于给对象新增属性， 并使该对象新增属性的变化能被监听，
用this.$set(item,'showAll',false) 实现给item添加一个showAll属性并设置默认值为false。
9.【js】循环删除数组
10.【js】ajax abort
11.【es6】
(1) 数组操作
- map： 包含相同数量元素的新数组
- filter： 包含原始数组子集的新数组
- find： 找到通过传入函数测试的第一个元素
- every： 检查数组的每个元素是否通过传入函数的测试，该函数应该返回true或false（每个函数都返回true，则结果为true，否则为false）。
- some ： 检查数组的任何元素是否通过由提供的函数实现的测试，该函数应该返回true或false。(有一个函数返回true，则结果true。否则结果为false)
reduce #方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。 累加器的初始值应作为reduce函数的第二个参数提供。
(2) 指定默认函数参数，当一个数组成员严格等于undefined，默认值才会生效
function (arr = [], type = 'year') { xxxx }
(3)reset参数和扩展运算符
// 数组的浅拷贝
var array = ['red', 'blue', 'green']
var copyOfArray = [...array]
// 合并数组
var defaultColors = ['red', 'blue', 'green']
var userDefinedColors = ['yellow', 'orange']
var mergedColors = [...defaultColors, ...userDefinedColors]
// 将前几个函数参数绑定到变量，其他变量作为数组绑定到单个变量
function printColors(first, second, third, ...others) {
console.log('Top three colors are ' + first + ', ' + second + ' and ' + third + '. Others are: ' + others)
}
printColors('yellow', 'blue', 'orange', 'white', 'black')
--》Top three colors are yellow, blue and orange. Others are: white,black
（4）Promise
new Promise( (resolve, reject)=>{
reject( 'rejected value' );
});
myPromise.then(onfulfilled).catch(onrejected);
12.【js】中止ajax请求
function abortAll() {
$.each(ajaxs, function(i, myajax) {
myajax.abort();
});
}
13.require.ensure 代码拆分
webpack 在编译时，会静态地解析代码中的 require.ensure()，同时将模块添加到一个分开的 chunk 当中。这个新的 chunk 会被 webpack 通过 jsonp 来按需加载。
require.ensure(dependencies: String[], callback: function(require), chunkName: String)
// vue 项目中使用
component: resolve => require.ensure([], () => (require('../components/Hello')), 'demo')
14.【js es6】promise.all
应用场景：多个异步请求都完成后，再执行某个方法
15.Object.keys(obj) 返回一个由一个给定对象的自身可枚举属性组成的数组
let obj = { foo: "bar", baz: 42 },
keys = Object.keys(obj);
网友评论