My Little World

learn and share


  • 首页

  • 分类

  • 标签

  • 归档

  • 关于
My Little World

ES6

发表于 2017-03-06

let

1.let 声明的变量在let 命令所在的代码快内有效
2.不声明直接用变量或者先用再声明都会报错
3.暂时性死区:在变量声明之前就使用变量的代码块

1
暂时性死区的本质就是,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。

4.不允许在同一级别块域内重复声明一个变量
5.let 声明的变量,外层代码块不受内层代码块的影响
—-外层作用域无法读取内层作用域的变量
—-内层作用域可以定义外层作用域的同名变量
6.块级作用域内声明的函数,行为类似于var声明的变量,仅在所在的代码块内有效

const

1.声明的同时进行复制
2.作用域特征同let
3.当声明的变量为对象或者数组时,只可以改变对象属性或数组元素的值,但不可以将变量重新赋值

ES6 6种声明变量的方法:var、function、let、const、import、class
var命令和function命令声明的全局变量,依旧是顶层对象的属性;let命令、const命令、class命令声明的全局变量,不属于顶层对象的属性。

解构赋值

数组

1.‘模式匹配’,左右对应相等,变量取值由位置决定
2.当右边的数据量大于左边变量数,如果是单层数组,则依次匹配,多余形成数组赋给最后一个变量
—-如果变量组成多层数组,则依次匹配,剩余的舍弃
3.当右边小于左边变量数,多余的变量的值就等于undefined
4.可以提前给变量赋默认值,默认值可以是已声明的其他变量,
–注意给变量赋‘undefined’的值的时候,如果变量原来的值不严格等于‘===’undefined,将不会被赋值为undefined

对象

1.对象的属性没有次序,变量必须与属性同名,才能取到正确的值,属性是匹配的标志
2.若变量与属性名不一致,则先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者(变量),而不是前者(属性)
3.如果在声明对象变量的时候为属性值的变量赋值,则相当于同时声明属性值的变量
4.进行套嵌赋值时,注意分清属性名和变量名,被赋值的是变量名,不是属性名
5.进行默认值赋值规则同数组,赋空不会生效
6.属性名表达式

1
2
3
4
let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3

数组arr的0键对应的值是1,[arr.length - 1]就是2键,对应的值是3

函数参数

类似数组,但注意下面两种写法

1
2
3
4
5
6
7
8
function move({x = 0, y = 0} = {}) {
return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

为变量x和y赋值

1
2
3
4
5
6
7
8
function move({x, y} = { x: 0, y: 0 }) {
return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

为x,y的默认值赋值

字符串、数字、布尔

字符串:字符串被转换成数组
数字/布尔:先转换成对象

字符串方法

方法 es5/js es6 2017
Unicode表示法 只限于\u0000——\uFFFF之间的字符 只要将码点放入大括号,就能正确解读该字符
charCodeAt 只会正确返回16位的UTF-16字符的码点
codePointAt 会正确返回32位的UTF-16字符的码点
String.fromCharCode 只会识别16位的UTF-16字符
String.fromCodePoint 会会识别32位的UTF-16字符
for 不可以识别大于0xFFFF的码点
for…of 可以识别大于0xFFFF的码点
charAt 不能识别码点大于0xFFFF的字符
at 能识别码点大于0xFFFF的字符
normalize ‘\u01D1’===’\u004F\u030C’ //false ‘\u01D1’.normalize() === ‘\u004F\u030C’.normalize()// true
indexOf 确定一个字符串是否包含在另一个字符串中
includes() 返回布尔值,表示是否找到了参数字符串
startsWith 返回布尔值,表示参数字符串是否在源字符串的头部
endsWith 返回布尔值,表示参数字符串是否在源字符串的尾部
repeat(n) 返回一个新字符串,表示将原字符串重复n次。
padStart(),padEnd() padStart()用于头部补全,padEnd()用于尾部补全
模板字符串 反引号(`),保留空格和换行,变量名写在${}中

数值处理方法

方法 es5/js es6 2017
二进制和八进制表示法 在严格模式之中,八进制就不再允许使用前缀0表示 二进制0b或0B、八进制0o或0O
isFinite()/isNaN() 先调用Number()将非数值的值转为数值,再进行判断
Number.isFinite() 检查一个数值是否为有限的,非数值一律返回false。
Number.isNaN() 检查一个值是否为NaN,非数值一律返回false。
parseInt()、parseFloat() 移植到Number对象上面,行为完全保持不变。
Number.isInteger() 判断一个值是否为整数
Number.EPSILON 极小的常量,为浮点数计算设置一个误差范围
Number.isSafeInteger 判断一个整数是否落在整数范围之内
Number.MAX_SAFE_INTEGER、Number.MIN_SAFE_INTEGER 表示整数范围的上下限
Math.trunc 去除一个数的小数部分,返回整数部分
Math.sign 判断一个数到底是正数、负数、还是零
Math.cbrt 计算一个数的立方根
Math.clz32 返回一个数的32位无符号整数形式有多少个前导0
Math.imul 返回两个数以32位带符号整数形式相乘的结果,返回的也是一个32位的带符号整数。
Math.fround 返回一个数的单精度浮点数形式
Math.hypot 返回所有参数的平方和的平方根
Math.expm1(x) 返回Math.exp(x) - 1
Math.log1p(x) 返回1 + x的自然对数
Math.log10(x) 返回以10为底的x的对数
Math.log2(x) 返回以2为底的x的对数
Math.sign() 判断一个值的正负
指数运算符(**) 指数运算符与Math.pow的实现不相同
Math.sinh(x) 返回x的双曲正弦
Math.cosh(x) 返回x的双曲余弦
Math.tanh(x) 返回x的双曲正切
Math.asinh(x) 返回x的反双曲正弦
Math.acosh(x) 返回x的反双曲余弦
Math.atanh(x) 返回x的反双曲正切

深入理解es6笔记

let/const

常量如果是对象,则对象中的值可以修改

js引擎在扫描代码发现变量声明时,要么将它们提升至作用域顶部(var),要么将声明放到TDZ(let/const),访问TDZ中的变量会触发运行时错误,只有执行过变量声明语句后,变量才会从TDZ中移出,然后可正常访问。
TDZ在块作用域中,相对于let,const所在块作用域来说。
但在let声明的作用域外对该变量使用typeof不会报错

1
2
3
4
console.log(typeof val);
if(condition) {
let value = 'blue'
}

字符串、正则表达式

在对字符串进行比较排序操作前,按照统一标准进行标准化

1
2
3
let normalized = values.map(function(text){
return text.normalize();// 默认NFC格式
})

正则表达式Y修饰符使用注意:
1.只有调用exec()和test()这些正则表达式对象的方法时才会涉及lastIndex属性,调用字符串方法,例如match(),则不会触发粘滞行为
2.对于粘滞正则表达式而言,如果使用^字符串来匹配字符串开端,只会从字符串的起始位置或多行模式的首行进行匹配。

函数

函数name属性不一定引用同名变量,他只是协助调试用的额外信息,所以不能使用name属性的值来获取对函数的引用

js函数有两个不同的内部[[Call]]和[[Construct]]
当通过new关键字调用函数时,执行的是[[Construct]]函数,他负责创建一个被称作实例的新对象
然后在执行函数将this绑定到实例上;
如果不通过new关键字调用函数,则执行[[Call]]函数,从而直接执行代码中的函数体
具有[[Construct]]方法的函数被统称为构造函数。

可以在函数内部使用new.target来判断是否在使用new 操作符调用函数,
以及判断是否被某个特定构造函数调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
1.
function Person(name){
if(typeof new.target !== 'undefined'){
this.name = name;
}else {
throw new Error('必须通过new 操作符调用该函数')
}
}
2.
function Person(name){
if(typeof new.target !== 'Person'){
this.name = name;
}else {
throw new Error('必须通过new 操作符调用该函数')
}
}
function AnotherPerson(name){
Person.call(this,name)
}

var person = new Person('kely');
var anotherPerson = new AnotherPerson('kely'); // 抛出错误

如果箭头函数被非箭头函数包含,则this绑定的是最近一层非箭头函数的this;
否则this会被设置为全局对象

对象

在使用===进行比较时,+0和-0得到结果相等;NaN和自身比较不相等
但可以使用Object.is()方法弥补
Object.js(+0,-0)得到false;
Object.js(NaN,NaN)得到true.

Object.assign()方法不能将提供者的访问器属性复制到接收对象中
会被转变成接收对象中的一个数据属性。

对象自有属性枚举顺序的基本规则是
1.所有数字键按升序排序
2.所有字符串键按照他们被加入对象的顺序排序
3.所有Symbol键按照他们被加入对象的顺序排序

Super引用相当于指向对象原型的指针,实际上也就是Object.getPrototypeof(this)的值

解构

获取数组副本

1
2
3
let colors = ['red','green'];

let [...cloneColor] = colors;

通过给解构参数提供默认值,将解构参数定义为可选的

1
function setCookie(name, value ,{secure,path,domain}={}){}

为解构参数指定默认值

1
2
3
4
5
6
7
8
9
10
const setCookieDefaults = {
secure: false,
path:'/',
damin:'example.com'
}
function setCookie(name,value,{
secure = setCookieDefaults.secure,
path = setCookieDefaults.path,
domain = setCookieDefaults.domain
} = setCookieDeaults)

Symbol

使用Symbol.for()可以创建可共享的Symbol
使用Symbol.keyFor()可以在Symbol全局注册表中检索共享的Symbol
使用Symbol创建的Symbol属性不能用Symbol.keyFor()去查找

Symbol类型的值不可以被转化为数字或者字符串

Object.getOwnPropertySymbol()可以返回包含所有Symbol自有属性的数组

一些特殊的Symbol值被用于暴露更多语言内部逻辑
主要使用思路就是通过这些特殊Symbol属性覆盖掉原始方法的响应方式
例如
给一个对象A定义
|属性|覆盖方法|被调用时机|
|—|—|—|
|Symbol.hasInstance|instanceOf|C instanceOf A|
|Symbol.toPrimitive|默认数字字符串转换值|A+’!’|
|Symbol.toStringTag|Object.prototype.toString(),Object.prototype.toString.call()方法时的返回值|A.toString或者Object.prototype.toString.call(A)|

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
1.
默认模式只用于==,+及Date构造函数传递一个参数时,大多数操作使用字符串、数字模式
function Temperature(degrees) {
this.degerees = degrees;
}

Temperature.prototype[Symbol.toPrimitive] = function(hint){
switch(hint) {
case 'string' : return this.degerees+'123'
case 'number': return this.degerees
case 'default': return this.degerees+' degrees'
}
}

var freezing = new Temperature(32);
console.log(freezing + '!'); // 32 degrees
console.log(freezing/2);// 16
console.log(String(freezing));// 32123

2.Symbol.toString 的使用
覆盖Object.prototype.toString
function Person(name){
this.name = name
}
Person.prototype[Symbol.toString] = 'Person'

Person.prototype.toString = function() {
return this.name
}

var me = new Person('ww');

console.log(me.toString())// ww
console.log(Object.prototype.toString.call(me)) // [object.Person]

用于覆盖正则表达式的方法

1
2
3
4
5
6
7
8
9
10
11
12
let hasLengthOf10 = {
[Symbol.match]: function(value){return ...},
[Symbol.replace]: function(value,replacement){return 。。。},
[Symbol.search]: function(value){return ...},
[Symbol.split]: function(value){return ...},
}

let str = 'hwrwrirrrk';
console.log(str.match(hasLengthOf10))
console.log(str.replace(hasLengthOf10))
console.log(str.search(hasLengthOf10))
console.log(str.split(hasLengthOf10))

Set 和 Map

Set中如果存储对象的话,是强引用,只要Set实例中引用存在,垃圾回收机制就不能释放该对象的内存空间。
WeakSet 只存储对象弱引用,并且不可以存储原始值,如果集合中的弱引用是对象的唯一引用,则会被回收并释放相应内存
所以如果只需要跟踪对象引用,应该使用WeakSet集合而不是普通的Set集合。

WeakMap集合中的键名必须是一个对象,如果使用非对象键名会报错:
集合中保存的是这些对象的弱引用,如果在弱引用之外不存在其他的强引用,
引擎的垃圾回收机制会自动回收这个对象,同时也会移除WeakMap集合中的键值对
但是只有集合的键名遵从这个规则,键名对应的值如果是一个对象,则保存的是对象的强引用,不会触发垃圾回收机制

数组方法

find和findIndex方法都接受两个参数,一个是回调函数,
另一个是可选参数,用于指定回调函数中this的值

fill 方法可以传入第二个和第三个参数用于只改变一部分值,分别指定开始索引和不包含结束索引

Proxy 和 Reflect

使用Proxy的陷阱方法,可以拦截对象的默认特性方法
对应的Reflect方法可以在proxy陷阱方法中重新使用对象的内减特性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
let target = {
name: 'target'
}

let proxy = new Proxy(target,{
// set 写入一个属性时
// 代理目标对象target,要写入的键,要写入的值,proxy代理本身
set (trapTarget,key,value,receiver){
// 忽略不希望受到影响的已有属性
if(!trapTarget.hasOwnProperty(key)){
if(isNaN(value)){
throw new TypeError('属性必须是数字')
}
}
// 添加属性
return Reflect.set(trapTarget,key,value,receiver);
}

// 读取一个属性时
// 代理目标对象,要读的键,代理对象本身
get(trapTarget,key,receiver) {
if(!key in receiver){
throw new TypeError('属性'+key+'不存在')
}

return Reflect.get(trapTarget,key,receiver)
}

// 使用in操作符时
has(trapTarget,key){
if(key === 'value'){
return false;
} else {
return Reflect.has(trapTarget,key)
}
}

// 使用delete操作符删除对象属性时
deleteProperty(trapTarget,key){
if(key === 'value'){
return false;
} else {
return Reflect.deleteProperty(trapTarget,key)
}
}

// Object.getPrototypeOf(proxy)时
//区别
// Object.getPrototypeOf()如果传入值非对象会将参数强制转成对象
// Reflect.getPrototypeOf()如果传入非对象,则报错
getPrototypeOf(trapTarget) {
// return null
return Reflect.getPrototypeOf(trapTarget) //返回默认行为,但有上述区别
}

// Object.setPrototypeOf(proxy, {})时
// 区别
// Object.getPrototypeOf()操作失败就报错
// Reflect.setPrototypeOf()返回布尔来表示操作是否成功
setPrototypeOf(trapTarget,proto) {
// return false
return Reflect.setPrototypeOf(trapTarget,proto)
}

// Object.isExtensible(proxy)时,
// 返回布尔值,表示对象是否可扩展
// 区别
// Object.isExtensible() 传入非对象返回false
// Reflect.isExtensible() 传入非对象报错
isExtensible(trapTarget) {
// return null
return Reflect.isExtensible(trapTarget)
}

// Object.preventExtension(proxy)时,
// 阻止对象扩展,返回布尔表示操作是否成功
// 区别
// Object.preventExtension()无论参数是否为对象都返回参数
// Reflect.preventExtension()参数非对象报错,否则根据操作是否成功返回布尔值
preventExtension(trapTarget) {
// return null
return Reflect.preventExtension(trapTarget) // 会转发到底层,target也会被阻止掉
}

// Object.defineProperty(proxy)时,
// 区别
// Object.defineProperty()返回第一个参数
// Reflect.defineProperty()根据操作是否成功返回布尔值
defineProperty(trapTarget,key,descriptor) {
return Reflect.defineProperty(trapTarget,key,descriptor)
}

// Object.getOwnPropertyDescriptor(proxy)时,
// 区别
// Object.getOwnPropertyDescriptor()传入非对象转成对象
// Reflect.getOwnPropertyDescriptor()传入非对象报错
getOwnPropertyDescriptor(trapTarget,key) {
return Reflect.getOwnPropertyDescriptor(trapTarget,key)
}

// 拦截内部方法[[OwnPropertyKeys]],
// Object.keys(),Object.getOwnPropertyName() (不含Symbol属性)
// Object.assign()(字符串和Symbol属性),Object.getOwnPropertySymbols()(仅含Symbol属性)
//4个方法调用时会被拦截到,输出的数组再被以上4个方法处理返回
ownKeys(trapTarget) {
return Reflect.ownKeys(trapTarget).filter(key=>{
return typeof key !== 'string' || key[0] !== '_'
})
}

// 代理目标是一个函数才可以,函数被普通调用执行时会被拦截
// 代理目标函数,函数被调用时内部this值,传给函数的参数数组
apply(trapTarget,thisArg, argumentList) {
return Reflect.apply(trapTarget,thisArg, argumentList)
}
// 通过这样操作,可以实现不用new 调用函数,实现new调用函数的效果
apply(trapTarget,thisArg, argumentList) {
return Reflect.construct(trapTarget,thisArg, argumentList)
}

// 代理目标是一个函数才可以,函数被new调用时会被拦截
// 代理目标函数,传给函数的参数数组
construct(trapTarget,argumentList) {
return Reflect.construct(trapTarget, argumentList)
}

})

// proxy是可被插销的代理对象,调用revoke方法后,不能在通过proxy代理到target对象
let { proxy,revoke } = Proxy.revocable(target,{})
revoke()

模块

用逗号将默认的本地名称与大括号包裹的非默认值分隔开,请记住,在import语句中,默认值必须排在非默认值之前。

My Little World

js 的~~

发表于 2017-03-06

~~ 符号是一种类型转换符号,将参数转换成数据类型
~~true == 1
~~false == 0
~~”” == 0
~~[] == 0
~~undefined ==0
~~!undefined == 1
~~null == 0
~~!null == 1

应用:计算大数相加
function add(a,b) {
// 实现该函数
var res=’’, c=0;
a = a.split(‘’);
b = b.split(‘’);
while (a.length || b.length || c){
c += ~~a.pop() + ~~b.pop();//对应位相加,加上前一位进位
res = c % 10 + res;//去掉进位,累积拼接取对应位相加后的结果,
c = c>9;//本轮相加,有进位,c是1,没进位c是0
}
return res.replace(/^0+/,’’);//把开头0去掉
}

My Little World

正则表达式

发表于 2017-03-06

判断邮箱格式

1
2
var match = /.+@.+\.[a-zA-Z]{2,4}$/;
match.test(变量)

输入框input只允许输入数字

在input标签里添加:
onKeyUp=”value=value.replace(/[^\d]/g,’’)”

以上方法input 限制了仅输入数字,但更换中文输入法之后还能输入出数字之外字符
解决办法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
html:
<input type="text" class="form-control form-filter" id="inputorp_i" autocomplete="off" ng-model="min_score" placeholder="正整数">
js:
var bind_name = 'input';
   if (navigator.userAgent.indexOf("MSIE") != -1){
   bind_name = 'propertychange';
  }
   $('#inputorp_i').bind(bind_name, function(){
  clearNoNum(this);
   })
$('#inputorp_i1').bind(bind_name, function(){
  clearNoNum(this);
   })
function clearNoNum(obj)

{
//先把非数字的都替换掉,除了数字
obj.value = obj.value.replace(/[^\d]/g,"");
}

判断输入值是否是url

1
2
3
 javascript
var match = /^((ht|f)tps?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-\.,@?^=%&:\/~\+#]*[\w\-\@?^=%&\/~\+#])?$/;
match.test(变量)

常用正则表达式

My Little World

图的存储结构

发表于 2017-03-01

1.邻接矩阵

1.无向图

graph1
一个一维数组存储图中顶点信息,

顶点数组 v0 v1 v2 v3

一个二维数组(邻接矩阵)存储图中边或弧的信息
0表示不存在顶点间的边,1表示顶点间存在边

v0 v1 v2 v3
v0 0 1 1 1
v1 1 0 1 0
v2 1 1 0 1
v3 1 0 1 0

无向图构成的邻接矩阵为对称矩阵,对角线值为0
—–顶点Vi在邻接矩阵中第i行(或第i列)的元素之和为该顶点的度
—–扫描矩阵中第i行元素,元素为1的列为顶点Vi的邻接点

2.有向图

graph2
一个一维数组存储图中顶点信息,

顶点数组 v0 v1 v2 v3

坐标[Vi][Vj]的值,1表示Vi指向Vj的弧存在,0表示不存在

v0 v1 v2 v3
v0 0 0 0 1
v1 1 0 1 0
v2 1 1 0 0
v3 0 0 0 0

第Vi列的元素之和为顶点Vi的入度
第Vi行的元素之和为顶点Vi的出度

3.网

tu3
邻接矩阵各元素的值不再用0/1表示,而是用权表示
顶点间若不存在弧,则用\infty无穷表示,顶点自己到自己的权为0

v0 v1 v2 v3
v0 0 \infty \infty 18
v1 8 0 2 \infty
v2 4 \infty 0 \infty
v3 \infty \infty \infty 0

2.邻接表

无向图

顶点用一个一维数组存储
每个顶点Vi的所有邻接点构成一个线性表,由于个数不确定,用单链表来表示
tu4
tu5

有向图

把顶点当弧尾建立邻接表,邻接表长度就是该顶点出度
tu6
把顶点当弧头建的表叫逆邻接表,邻接表长度就是该顶点入度
tu7

网

在边表结点定义中再增加一个数据域来存储权值
tu8

3.十字链表(有向图)

顶点表结构

|data|firstIn|firstOut|
data:顶点数据
firstIn:第一个入边表的指针
firstOut:第一个出边表的指针

边表结点结构 表示以条边

tailVex headVex headLink tailLink

tailVex:该弧起点的顶点在顶点表的下标
headVex:该弧终点的顶点在顶点表的下标
headLink:指向headVex的弧的指针
tailLink: 从tailVex出发的弧的指针
graph2
tu9

4.邻接多重表(无向表)

关注对象是图中的表不是顶点
|iVex|iLink|jVex|jLink|
iVex和jVex是与某条边依附的两个顶点在顶点表中的下标
iLink:指向依附顶点iVex的下一条边,
jLink:指向依附顶点jVex的下一条边,
tu10

5.边集数组

由两个一维数组构成
一个是存储顶点的信息
另一个存储边的信息
边数组的每个数据元素由一条边的起点下标(begin)、终点下标(end)和权(weight)组成

tu11

顶点数组 v0 v1 v2 v3
边数组 begin end weight
edges[0] 0 3 5
edges[1] 1 0 4
edges[2] 1 2 3
edges[3] 2 0 8
My Little World

日期格式兼容

发表于 2017-02-26

IE11/chrome/360/火狐兼容日期格式兼容

$scope.date= new Date().toLocaleDateString().replace(/\//g,’-‘);
获取到的”year-month-day”格式支持/chrome/360/火狐,但到了IE11就变成”year年month月day”

var date = new Date();
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
var day = date.getDay();
var dateString=y+”-“+m+”-“+d;
$scope.date= dateString;

这样获取的”year-month-day”格式支持以上四种浏览器

My Little World

AngularJs自定义指令实现图片上传

发表于 2017-02-22

//定义file-Model指令的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
MetronicApp.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs, ngModel) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function(event){
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
//附件预览
scope.file = (event.srcElement || event.target).files[0];
scope.getFile();
this.value = ''; //清除已上传的文件,否则无法连续上传相同文件
});
}
};
}
])

//在HTML使用时的代码

1
2
3
4
5
6
7
8
9
10
 <div class="form-group">
<label class="control-label col-md-3">图片上传</label>
<div class="col-md-9 fileinput">
<img src="{{detaildata.banner}}" name="img" style="width:40px;height: 40px;">
<span class="btn red btn-outline btn-file" style="margin-left: 10px;margin-top:0px;">
<span class="fileinput-new"> 重新上传 </span>
<input type="hidden"><input id="upload" type="file" file-model="myFile" name="..." accept="image/*" >
</span>
</div>
</div>

//Controller中上传图片时的js函数

1
2
3
4
5
6
7
8
$scope.getFile = function () {
var postData = {
fileName: $scope.file
};
fileReader.readAsDataUrl($rootScope.settings.url + "", postData).success( function(response) {
$scope.detaildata.banner = response;
});
};

//定义fileReader服务的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
angular.module('MetronicApp')
.factory('fileReader', ["$http", function($http){
var readAsDataURL = function (url, data) {
var fd = new FormData();
angular.forEach(data, function(val, key) {
fd.append(key, val);
});
var args = {
method: 'POST',
url: url,
data: fd,
headers: {'Content-Type': undefined},
transformRequest: angular.identity
};
return $http(args);
};
return {
readAsDataUrl: readAsDataURL
};
}])

整个上传的过程,点击“重新上传”按钮,file-model指令绑定的change事件会检测本次选择的图片与上次是否为一致,不一致则会执行file-model定义时的代码
element.bind(‘change’, function(event){
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
//附件预览
scope.file = (event.srcElement || event.target).files[0]; //给Controller 中$scope.file赋值
scope.getFile(); //调用Controller 中 $scope.getFile();
this.value = ‘’; //清除已上传的文件,否则无法连续上传相同文件
});
控制器中的$scope.getFile()函数用到fileReader.readAsDataUrl函数上传图片给后台,这个函数在定义fileReader时被定义

定义指令时,若没有清除已上传文件,连续多次上传时,将导致无法连续上传相同图片的bug.

My Little World

图

发表于 2017-02-22

图的定义

图:由顶点的有穷非空集合和顶点之间边的集合组成,通常表示为:G(V,E),
—-G表示一个图,V是图G中顶点的集合,E是图G中边的集合
| | 线性表 | 树 | 图 |
| ————- |:—————-:| —————–:|
| 数据元素 | 元素 | 结点 | 顶点 |
| 没有数据元素 | 空表 | 空树 | 不能没有顶点,有穷非空 |
| 数据元素间关系 | 相邻之间:线性关系| 相邻两层:层次关系 | 任意两个顶点之间都可能有关系顶点之间逻辑关系用边表示,边集可以是空的|
无向边:顶点Vi到Vj之间的边没有方向,用无序偶(Vi,Vj)表示
有向边/弧:顶点Vi到Vj之间的边有方向,用有序偶<Vi,Vj>表示,Vi称为弧尾,Vj称为弧头
简单图:在该类图结构中,不存在顶点到其自身的边(自己指向自己)且同一条边不重复出现
无向完全图:在该类图结构中,任意两个顶点之间都存在边,含n个顶点的无向完全图有n(n-1)/2条边
有向完全图:在该类图结构中,任意两个顶点之间都存在方向互为相反的两条弧,含n个顶点的有向完全图有n
(n-1)条边
稀疏图:边或弧数小于nlogn(n是顶点的个数)
稠密图:边或弧数大于n
logn(n是顶点的个数)
权:图的边或弧带有的与它相关的数字
网:带权的图
子图:图G1(V1,E1),和G2(V2,E2),如果V2 \subseteq V1,E2 \subseteq E1 ,V2 属于 V1,E2 属于 E1则称G2为G1的子图
http://blog.csdn.net/sanqima/article/details/48576361
邻接点:无向图G=(V,E),如果边(V1,V2)属于E,则称顶点V1和V2互为邻接点,即V1和V2相邻接
——-边(V1,V2)依附于顶点V1和V2,或者说边(V1,V2)与顶点V1和V2相关联
顶点V的度:和顶点V相关联的边的数目,记为TD(V)
邻接:有向图G=(V,E),如果边<V1,V2>属于E,则称顶点V1邻接到顶点V2,顶点V2邻接自顶点V1
顶点V的入度:以顶点V为头的弧的数目,记为 ID(V)
顶点V的出度:以顶点V为尾的弧的数目,记为 OD(V)
TD(V) = ID(V) + OD(V);
路径:图G=(V,E)中从顶点V1到顶点V2的路线叫从顶点V1到顶点V2的路径,注意有向图和无向图的区别
路径的长度:路径上边/弧的数目
回路/环:第一个顶点和最后一个顶点相同的路径
简单路径:序列中顶点不重复出现的路径
简单回路/简单环:除了第一个顶点和最后一个顶点之外,其余顶点不重复出现的回路
连通:在无向图G中,如果顶点V1到顶点V2有路径则称V1和V2是连通的
连通图:图中任意两个顶点Vi和Vj都是连通的,则称G是连通图
连通分量:无向图中的极大连通子图
—-连通的子图
—-连通子图含有极大顶点数
—-具有极大顶点数的连通子图包含依附于这些顶点的所有边
强连通图:在该类有向图G中,每一对Vi到Vj都存在路径
强连通分量:有向图中的极大强连通子图
非强连通图有强连通分量,强连通分量不止属于强连通图
连通图的生成树:极小的连通子图,它含有图中全部n个顶点,但只有足以构成一棵树的n-1条边
有向树:如果一个有向图恰有一个顶点入度为0,其余顶点入度为1,则该图将生成有向树,从而构成森林

My Little World

《穷爸爸富爸爸》摘抄

发表于 2017-02-18
  1. 富人买入资产,穷人只有支出,中产阶级购买自以为是资产的负债
  2. 资产是能把钱放进你口袋里的东西,负债是把钱从你口袋里取走的东西
  3. 为了财务安全,人们需要关注自己的事业,你的事业的重心是你的资产项,而不是你的的收入项。要知道资产与负债的区别,并且去买入资产。富人关心的焦点是资产而其他人关注的是收入。
  4. 资产分类:
    a.不需要我到场就可以正常运作的业务。我拥有他们,但由别人经营和管理。如果我必须在那里,那它就不是我的事业而是我的职业了
    b.股票
    c.债券
    d.共同基金
    e.能够产生收入的房地产
    f.票据(收据)
    g.版税,如音乐,手稿,专利
    h.其他任何有价值,可产生收入或有增值潜力,并且有良好的销路的东西
    5.
拥有公司的富人 为公司工作的人
挣钱 挣钱
支出 缴税
缴税 支出

=>拥有由资产组成的公司

  1. 财商:
    a.财务知识,会计,阅读理解数字的能力
    b.投资策略
    c.市场,供给,与需求
    d.法律规章
  2. 理财能手:
    a.如何寻找其他人都忽视的机会
    b.如何增加资金
    c.怎样把精明的人组织起来
  3. 管理技能:
    a.对现金流的管理
    b.对系统(你本人,时间及家庭)的管理
    c.对人员的管理
  4. 克服困难:恐惧心理、愤世嫉俗、懒惰、不良习惯、自负
  5. 开发
    我需要一个超现实的理由—-精神的力量
    每天做出自己的选择—-选择的力量
    慎重的选择朋友—-关系的力量
    掌握一种模式,然后在学习一种模式—-快速学习的力量
    首先支付自己—-自律的力量
    给你的经纪人以优厚的报酬—-好建议的力量
    用资产来购买奢侈品—-专注的力量
    对英雄的崇拜—-神话的力量
    先予后取—-给予的力量
My Little World

阿里巴巴iconfont使用

发表于 2017-02-18

1.登录http://iconfont.cn/plus/home/index?spm=a313x.7781069.1998910419.2.QImsN2 进入搜索界面
2.通过输入关键字搜索自己想要的图标
3.将鼠标放到自己想要的图标会出现选择层,点击第一个购物车图标,添加入库
4.将所有想要的图标添加完后,点击右上角购物车图标打开项目添加页,点击“加入项目”右侧图标,为选择的图标新建项目,点确定
iconfont1
iconfont2
5.关闭项目添加页,点击导航栏的“图标管理”,进入“我的项目”栏目


图片名称
图片名称

6.使用图标到我们的HTML代码中,可以通过线上链接使用,也可以通过下载至本地使用

通过线上链接使用

1.点击查看在线链接,复制代码到项目的静态资源的css文件中一般在src/assets/css路径下的文件
2.设置一个类icon,通过这个类的属性改变图标样式,同时在HTML中引用这个类

1
2
3
4
5
6
7
8
9
10
11
.icon {
font-family: "iconfont" !important;
font-style: normal;
display: inline-block;
vertical-align: middle;
background-size: 100% auto;
background-position: center;
-webkit-font-smoothing: asntialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}

3.在标签中添加icon类,在标签中间加入图标代码,例如: 

下载至本地

1.点击下载至本地
2.将在线链接代码中用到的文件放到项目静态文件夹中,
3.将在线链接代码中文件的路径更改为项目中的文件路径,
4.其他步骤同线上路径
5.也可直接打开下载文件的IconFontDemo/assets/iconfont/的demo.html代码,看如何使用

My Little World

git问题处理

发表于 2017-02-18 | 分类于 categories

git pull 更新代码出现问题

1
2
3
4
5
6
7
8
9
There is no tracking information for the current branch.
Please specify which branch you want to merge with.
See git-pull(1) for details

git pull <remote> <branch>

If you wish to set tracking information for this branch you can do so with:

git branch --set-upstream-to=origin/<branch> develop_hotfix

解决办法
git branch -D 分支名 ##删除本地待更新分支
git checkout 分支名 ##将待更新分支切回来
Git pull 再更新

git remote add origin 遇到远程分支已存在的情况

解决办法
git remote rm origin ##先删除远程分支
git remote add origin 地址 ## 再修改远程仓库地址

git push 遇到问题

1
fatal: unable to access 'https://github.com/YooHannah/WeiXindemo.git/': Failed to connect to github.com port 443: Timed out

解决办法
先删除远程分支 git remote rm origin
再将本地分支的上游分支设置为远程分支同时push
git push –set-upstream origin master
以后再执行git push 就不会出现报以上错误或一直没反应的状况

1
error:src refspec master does not match any

只进行了init,没有add和commit,本地版本库为空, 空只进行了init,目录不能提交

1
2
3
If no other git process is currently running, this probably means a
git process crashed in this repository earlier. Make sure no other git
process is running and remove the file manually to continue.

解决方法:
rm -f ./.git/index.lock

npm 运行项目错误

npm run dev error [npm ERR! code ELIFECYCLE]
node_modules安装问题,执行以下:
rm -rf node_modules rm package-lock.json npm cache clear –force npm install

git merge 之后,git commit 出现问题

husky > pre-commit hook failed (add –no-verify to bypass)
git merge 之后,git commit 出现问题,解决:
出现这样的原因在于楼主使用了husky,并且配置了”precommit”: “npm run lint”
因此会在你git commit的时候执行npm run lint 也就是eslint –ext .js src test
如果报错的话,会返回非0,从而组织代码commit。
因此有两种方式解决:

  1. 执行npm run lint, 根据提示修改错误,如果是其他人的报错,请求别人协助(推荐)
  2. git commit -m ‘’ -n 强制推送
    3.更新远程分支列表
    git remote update origin –prune

IE报vuex requires a Promise polyfill in this browser问题解决

第一步: 安装 babel-polyfill 。 babel-polyfill可以模拟ES6使用的环境,可以使用ES6的所有新方法
npm install –save babel-polyfill
第二步: 在 Webpack/Browserify/Node中使用
在webpack.config.js文件中,使用
module.exports = {
entry: {
app: [“babel-polyfill”, “./src/main.js”]
}
};

git 分支处理

背景

A同学提交了两次代码,但在第二次提交代码前,B同学有提交自己的代码,并且在合并代码时,
将A同学第一次提交的代码merge丢弃了,导致A同学第一次代码无法合并到主分支

原理知识

git reset 可以撤销commit命令的提交
git rebase 把分叉提交历史’整理’成一条直线
git stash 可以把工作现场’储藏起来’,等以后恢复现场后可以继续工作

分析

在分支代码处理时,A同学本地有主分支host(公共分支)和自己的本地分支local,
工作流程是
在自己本地分支local分支开发完毕后,
切换host分支,git pull 拉取远端分支更新后,
将本地分支local合并merge到host分支
然后git push到远端

而B同学直接在本地的主分支(公共分支)开发,git push时冲突,
git pull 拉取远端A同学第一次的代码时,直接将代码变更进行了丢弃
然后push了自己的代码到远端分支

A同学第二次提交时,并不知道B同学丢弃了自己第一次提交的代码,
在进行第二次提交时,在host上拉取远程更新之后,
继续合并推送最终结果就是自己的第一次代码丢失了

解决

利用A同学本地分支local没有合并远程分支的间隙,将A同学的两次提交保存下来,回到两次提交前的状态
然后拉取B同学的提交,再将A同学的两次提交拿出来进行合并,这样就可以实现三次提交都保存下来,再提交到远端

在A同学的本地分支进行操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1.在主分支host上取消第二次提交
git reset --hard HEAD~1

2.将远端第二次提交撤销掉,让分支保留在B同学提交的状态
git push --force

3.切换本地分支local,回滚版本到两次提交前
git reset HEAD^^

4.保存两次提交 可以通过git stash list查看保存状态
git stash
git stash list

5. 合并主分的B同学的提交到本地分支local,这时本地分支就有B同学的代码变更了
6. 取出A同学的两次提交,与B同学代码进行提交
git stash pop
7. 切换主分支host,合并本地分支local,推送到远端

1…212223…27
YooHannah

YooHannah

262 日志
1 分类
23 标签
RSS
© 2025 YooHannah
由 Hexo 强力驱动
主题 - NexT.Pisces