菜单

bootstrap基本CSS Class

2018年11月15日 - Bootstrap

说明格行/单元格背景颜色:
active
success
info
warning
danger

好像的内有着定义的不二法门,都是不可枚举的

按钮:
btn 一般作用于a、button、input元素
btn-default、btn-primary、btn-success、btn-info、btn-warning、btn-danger、btn-link
btn-lg、btn-sm、btn-xs
btn-block 块级按钮(宽度占满)

class Point {
  // ...
}

typeof Point // "function"
Point === Point.prototype.constructor // true

表明单验证状态:
has-warning 作用为form-group、form-lable、form-control用来表示严重状态
has-error 同上
has-success 同上

function Point(x,y){
  this.x = x;
  this.y = y ;
}
Point.prototype.toString = function(){
  return 'x:'+this.x +',y:'+this.y;
}
let point = new Point(1,3);
console.log(point.toString())

Class 的静态属性与实例属性

§

静态属性指的是 Class
本身的习性,即Class.propName,而未是概念在实例对象(this)上的性能。

// 以下两种写法都无效
class Foo {
  // 写法一
  prop: 2

  // 写法二
  static prop: 2
}

Foo.prop // undefined

类的实例属性

好像的实例属性可以为此等式,写入类的概念之中。

class MyClass {
  myProp = 42;

  constructor() {
    console.log(this.myProp); // 42
  }
}

new是由构造函数生成实例对象的通令。ES6
为new命令引入了一个new.target属性,该属性一般用当构造函数之中,返回new命令作用为之酷构造函数。如果构造函数不是通过new命令调用的,new.target会返回undefined,因此是特性可以用来规定构造函数是怎么调用的。

function Person(name) {
  if (new.target !== undefined) {
    this.name = name;
  } else {
    throw new Error('必须使用 new 命令生成实例');
  }
}

// 另一种写法
function Person(name) {
  if (new.target === Person) {
    this.name = name;
  } else {
    throw new Error('必须使用 new 命令生成实例');
  }
}

var person = new Person('张三'); // 正确
var notAPerson = Person.call(person, '张三');  // 报错

得小心的凡,子类继承父类时,new.target会返回子类。

class Rectangle {
  constructor(length, width) {
    console.log(new.target === Rectangle);
    // ...
  }
}

class Square extends Rectangle {
  constructor(length) {
    super(length, length);
  }
}

var obj = new Square(3); // 输出 false

下是特性,可以描绘起非能够独运用、必须连续后才能够应用的好像

class Shape {
  constructor() {
    if (new.target === Shape) {
      throw new Error('本类不能实例化');
    }
  }
}

class Rectangle extends Shape {
  constructor(length, width) {
    super();
    // ...
  }
}

var x = new Shape();  // 报错
var y = new Rectangle(3, 4);  // 正确

帮助类:
text-muted、text-primary、text-success、text-info、text-warning、text-danger
bg-primary、bg-success、bg-info、bg-warning、bg-danger

class Point {
  constructor(x,y){
    this.x = x;
    this.y = y ;

  }
  toString(){
    return 'x:'+this.x +',y:'+this.y;
  }
}
let point = new Point(1,3);
console.log(point.toString())

列表:
list-unstyled 无列表样式
list-inline 行内列表
dl-horizontal 自定义列表水平排列(dt和dd的情在与一行)

class Widget {

  // 公有方法
  foo (baz) {
    this._bar(baz);
  }

  // 私有方法
  _bar(baz) {
    return this.snaf = baz;
  }
另一种方法就是索性将私有方法移出模块,因为模块内部的所有方法都是对外可见的。
  class Widget {
  foo (baz) {
    bar.call(this, baz);
  }

  // ...
}

function bar(baz) {
  return this.snaf = baz;
}

图片:
img-responsive 响应式图片(宽度100%)
img-rounded 圆角
img-circle 原型
img-thumbnail 带边框

地方代码中,x和y都是实例对象point自身之习性(因为定义在this变量上),所以hasOwnProperty方法返回true,而toString是原型对象的性能(因为定义在Point类上),所以hasOwnProperty方法返回false。这些都和
ES5 的行为保持一致。

栅格系统:
container
container-fluid
row 行
col-md-* 列
col-md-offset-* 已左边为极向右侧偏移

个体方法是大需求,但 ES6 不提供,只能通过变通方法模拟实现

表单:
form-control
form-group 用来拿表单控件与label进行重组
form-inline 行内表单
form-horizontal
form-group内lable与control水平排列,这是form-group相当给row
checkbox 一般作用于div,然后拿checkbox和lable放上
radio 同上
checkbox-inline 一般作用为lable,用来包裹checkbox,起至行内效果
radio-inline 同上
input-lg
input-sm
form-group-lg
form-group-sm
help-block 控件帮助文本,把控件的aria-describedby属性设置为协助文本的Id

地方这种写法与传统的面向对象语言(比如 C++ 和
Java)差异大十分,很易吃初修就宗语言的程序员发纳闷。

表格:
table
table-striped 斑纹表格
table-bordered 带边框的表
table-hover hover效果
table-responsive table的响应式容器(<div
><table..></div>)

new Foo(); // ReferenceError
class Foo {}

传统一个函数的阐明和办法成立,如下所示:

class Point {
  // ...
}

// 报错
var point = Point(2, 3);

// 正确
var point = new Point(2, 3);

//定义类
class Point {

  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }

}

var point = new Point(2, 3);

point.toString() // (2, 3)

point.hasOwnProperty('x') // true
point.hasOwnProperty('y') // true
point.hasOwnProperty('toString') // false
point.__proto__.hasOwnProperty('toString') // true

私家属性

与个体方法同样,ES6
不支持个体属性。目前,有一个提案,为class加以了私属性。方法是于属性名之前,使用#表示。
this 的指向
接近的点子中如果带有this,它默认指向类的实例。但是,必须特别小心,一旦单独采取该方法,很可能报错。

class Logger {
  printName(name = 'there') {
    this.print(`Hello ${name}`);
  }

  print(text) {
    console.log(text);
  }
}

const logger = new Logger();
const { printName } = logger;
printName();  // TypeError: Cannot read property 'print' of undefined

面代码中,printName方法吃的this,默认指于Logger类的实例。但是,如果以此方式提取出单独采取,this会指向该法运行时所于的环境,因为找不交print方法而造成报错。

一个比较简单的化解办法是,在构造方法中绑定this,这样便无见面寻找不至print方法了。

class Logger {
  constructor() {
    this.printName = this.printName.bind(this);
  }

  // ...
}
或者
class Logger {
  constructor() {
    this.printName = (name = 'there') => {
      this.print(`Hello ${name}`);
    };
  }

  // ...
}
或者
function selfish (target) {
  const cache = new WeakMap();
  const handler = {
    get (target, key) {
      const value = Reflect.get(target, key);
      if (typeof value !== 'function') {
        return value;
      }
      if (!cache.has(value)) {
        cache.set(value, value.bind(target));
      }
      return cache.get(value);
    }
  };
  const proxy = new Proxy(target, handler);
  return proxy;
}

const logger = selfish(new Logger());

Class 的取值函数(getter)和存值函数(setter)

§

及 ES5
一样,在“类”的中可以以getset着重字,对某个属性设置存值函数和取值函数,拦截该属性之存取行为。

class MyClass {
  constructor() {
    // ...
  }
  get prop() {
    return 'getter';
  }
  set prop(value) {
    console.log('setter: '+value);
  }
}

let inst = new MyClass();

inst.prop = 123;
// setter: 123

inst.prop
// 'getter'

Class 的静态方法
看似相当给实例的原型,所有在类中定义之法子,都见面吃实例继承。如果以一个术前,加上static关键字,就代表该措施无会见受实例继承,而是径直通过类似来调用,这即叫“静态方法”。

class Foo {
  static classMethod() {
    return 'hello';
  }
}

Foo.classMethod() // 'hello'

var foo = new Foo();
foo.classMethod()
// TypeError: foo.classMethod is not a function

顾,如果静态方法包含this关键字,这个this指的是类,而休是实例。

父类的静态方法,可以被子类继承。

class Foo {
  static classMethod() {
    return 'hello';
  }
}

class Bar extends Foo {
  static classMethod() {
    return super.classMethod() + ', too';
  }
}

Bar.classMethod() // "hello, too"
class Point {
  constructor(x, y) {
    // ...
  }

  toString() {
    // ...
  }
}

Object.keys(Point.prototype)
// []
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]

恍如非有变量提升(hoist),这一点以及 ES5 完全两样。

接近的实例对象

上面代码表明,类的数据类型就是函数,类本身就是针对构造函数

ES6 提供了双重类似传统语言的写法,引入了
Class(类)这个概念,作为目标的沙盘。通过class关键字,可以定义类。

相关文章

标签:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图