ng2-EventEmitter

ng2-EventEmitter

demo:

1.组件样式问题

A组件嵌入了B组件,那么被嵌入的结构的样式应写在B组件内。

2.组件通讯

父组件中,对子组件进行事件绑定:
html

<app-loader [url]="'/api/index/index'" [method]="'get'" [body]="body" (onReceive)="receiveTheData($event)"></app-loader>

ts

export class FindComponent implements OnInit {
  receiveTheData(action) {
    // 从loader组件返回action
    // console.log(action);
    this.topCarousel = action.locationAds[0].ads;
    this.list = action.hotProducts;
  }
}

子组件输出
ts

export class LoaderComponent implements OnInit, OnChanges {
data;
@Output() onReceive = new EventEmitter();
  receiveTheData() {
    this.onReceive.emit(this.data);
  }
  ngOnInit(){
   this.ajax(){

   //假如异步返回是res的结果

   this.data = res;
   this.receiveTheData();
   }
 }
}

3.对于angular HTML中,各标签属性的应用。
模板绑定是通过 property 和事件来工作的,而不是 attribute。
在 Angular 的世界中,attribute 唯一的作用是用来初始化元素和指令的状态。 当进行数据绑定时,只是在与元素和指令的 property 和事件打交道,而 attribute 就完全靠边站了。

举个例子:
data = '<p>123</p>'
<div [innerHTML]="data"></div>
输出:
<div>
<p>123</p>
</div>

工作记录–window.onresize与$(window).resize的区别2017.3.23

window.onresize只能绑定一个函数,而jquery的resize可以绑定多个函数。
举个例子:

window.onresize = function (){ console.log(1)}; // 1
window.onresize = function (){ console.log(2)}; // 2

重复的赋值,后一个会覆盖前一个。

$(window).resize(function(){console.log(3)}); // 3
$(window).resize(function(){console.log(4)}); // 3 和 4交替打印

这样就实现了一个resize事件绑定了多个函数。
注意:此例子中,$(window).resize(function(){console.log(3)}); 会打印出1和3,因为之前有绑定事件,进一步说明,jquery的resize事件不会覆盖原生有的函数。

JavaScript创建对象的应用

最优方式:


 function Person(name,age,job){//构造函数首字母大写
 this.name = name;
 this.age = age;
 this.job = job;
 }
 Person.prototype.say = function(){
 alert(this.name);
 //将方法绑定到原型上是为了避免实例的重复复制,毕竟功能是一样的
 //在实例调用该属性时,会从原型链上去查找,直到找到该属性
 //如果实例有一个重名属性,将会调用实例本生属性
 //若想调用原型链上的属性,必须使用delete删除该属性
 }
 var person1 = new Person('wuyang',25,'web');
 person1.say();
 //将会弹窗'wuyang'

call() 的用法:
window.name = 'xxxxx';
person1.say.call(window);
person1.say.call(this);
person1.say.call();
//都会是弹窗xxxxx
注意:该方法的作用和 apply() 方法类似,只有一个区别,就是call()方法接受的是若干个参数的列表,而apply()方法接受的是一个包含多个参数的数组

感谢:于江水

拿来主义–常用正则表达式2016.9.7


/^[\u4e00-\u9fa5]+$/i 全是中文
/.*[\u4e00-\u9fa5]+.*$/ 包含中文
/^\d+$/ 全是数字
/^ +| +$/ 全是空格
/\.jpg$|\.jpeg$|\.gif$/i 图片格式,验证成功返回true

工作记录–IE滤镜和透明背景2016.7.26

一、透明背景

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);

#7f000000

1、7f为16进制的透明值,0.5*255,toString(16),结果即为7f。

2、在less里面,颜色值需要预先定义。

二、滤镜

filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=1);

webpack

1、

webpack will analyze your entry file for dependencies to other files. These files (called modules) are included in yourbundle.js too. webpack will give each module a unique id and save all modules accessible by id in the bundle.js file. Only the entry module is executed on startup. A small runtime provides the require function and executes the dependencies when required