发表于 |
字数统计: 377 | 阅读时长 ≈ 2

border-image 图片 实现

1
2
3
4
.border-image-1px {
    border-width: 1px 0;
    -webkit-border-image: url('')
}

缺点 要有图片，圆角会模糊

background-image 渐变实现

1
2
3
4
5
6
7
8
9
10
.border {
      background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
      linear-gradient(270deg, red, red 50%, transparent 50%),
      linear-gradient(0deg, red, red 50%, transparent 50%),
      linear-gradient(90deg, red, red 50%, transparent 50%);
      background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
      background-repeat: no-repeat;
      background-position: top, right top,  bottom, left top;
      padding: 10px;
  }

缺点， 圆角会模糊 优点，不用图片

阅读全文 »

发表于 |
字数统计: 113 | 阅读时长 ≈ 1

组件化 极大的提高了代码的复用性

数据驱动

  • 数据驱动视图（修改数据源，获取DOM节点，将数据更新到DOM节点上）
  • 原生JS要通过操作DOM来改变视图（修改数据源，然后就会自动更新数据（react是调用render方法重新渲染）到页面上）

跨平台开发（使用JS来开发不同平台下的应用）

  • react=>react Native
  • Vue=>Weex
  • Angular=>ionic

发表于 | 分类于 |
字数统计: 528 | 阅读时长 ≈ 3

浅拷贝

浅拷贝只复制一层对象的属性，并不包括对象里面的为引用类型的数据 

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
var obj1 = {
        'name' : '熊大',
        'age' :  '10',
        'language' : [1,[2,3],[4,5]],
    };

    var obj2 = obj1;//把对obj1的引用赋值给了obj2，他们都是指向同一个引用，对obj2的更改会改变obj1


    var obj3 = shallowCopy(obj1);
    function shallowCopy(src) {
        var dst = {};
        for (var prop in src) {
            if (src.hasOwnProperty(prop)) {
                dst[prop] = src[prop];
            }
        }
        return dst;
    }

    obj2.name = "熊二";
    obj3.age = "20";

    obj2.language[1] = [22,33];
    obj3.language[2] = [44,55];//浅拷贝只复制一层对象的属性，这里操作的和obj1是同一个堆内存的数据

    console.log(obj1);  
    //obj1 = {
    //    'name' : '熊二',
    //    'age' :  '10',
    //    'language' : [1,[22,33],[44,55]],
    //};

    console.log(obj2);
    //obj2 = {
    //    'name' : '熊二',
    //    'age' :  '10',
    //    'language' : [1,[22,33],[44,55]],
    //};

    console.log(obj3);
    //obj3 = {
    //    'name' : '熊大',
    //    'age' :  '20',
    //    'language' :[1,[22,33],[44,55]],
    //};
阅读全文 »

发表于 | 分类于 |
字数统计: 973 | 阅读时长 ≈ 4

JavaScript 创建对象的 7 种方法

工厂模式

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
function Person() {
  var o = new Object();
  o.name = 'hanmeimei';
  o.say = function() {
    alert(this.name);
  }
  return o;
}
var person1 = Person();
``` 
> 缺点：
* 无法通过constructor识别对象，以为都是来自Object，无法得知来自Person
* 每次通过Person创建对象的时候，所有的say方法都是一样的，但是却存储了多次，浪费资源。

<!-- more -->

### 构造函数模式
```javascript
function Person(){
  this.name='abc'
  this.say = function (){
      alert(this.name)
  }
}
var person1 = new Person()

优点：

  • 通过constructor或者instanceof可以识别对象实例的类别
  • 可以通过new 关键字来创建对象实例，更像OO语言中创建对象实例

缺点：

  • 多个实例的say方法都是实现一样的效果，但是却存储了很多次（两个对象实例的say方法是不同的，因为存放的地址不同）

注意：

  • 构造函数模式隐试的在最后返回return this 所以在缺少new的情况下，会将属性和方法添加给全局对象，浏览器端就会添加给window对象。
  • 也可以根据return this 的特性调用call或者apply指定this。这一点在后面的继承有很大帮助。

原型模式

1
2
3
4
5
6
7
function Person(){}
Person.prototype.name = 'abc'
Person.prototype.say = function (){
    alert(this.name)
}
Person.prototype.friends = ['lilei'];
var person1 = new Person();

优点：

  • say方法是共享的了，所有的实例的say方法都指向同一个。
  • 可以动态的添加原型对象的方法和属性，并直接反映在对象实例上。
    1
    2
    3
    4
    5
    var person1 = new Person()
    Person.prototype.showFriends = function() {
      console.log(this.friends)
    }
    person1.showFriends()  //['lilei']

缺点：

  • 出现引用的情况下会出现问题具体见下面代码：
    1
    2
    3
    4
    var person1 = new Person();
    var person2 = new Person();
    person1.friends.push('xiaoming');
    console.log(person2.friends)  //['lilei', 'xiaoming']

因为js对引用类型的赋值都是将地址存储在变量中，所以person1和person2的friends属性指向的是同一块存储区域。

  • 第一次调用say方法或者name属性的时候会搜索两次，第一次是在实例上寻找say方法，没有找到就去原型对象(Person.prototype)上找say方法，找到后就会在实力上添加这些方法or属性。
  • 所有的方法都是共享的，没有办法创建实例自己的属性和方法，也没有办法像构造函数那样传递参数。

注意：

  • 优点②中存在一个问题就是直接通过对象字面量给Person.prototype进行赋值的时候会导致constructor改变，所以需要手动设置，其次就是通过对象字面量给Person.prototype进行赋值，会无法作用在之前创建的对象实例上
    1
    2
    3
    4
    5
    6
    7
    8
    var person1 = new Person()
    Person.prototype = {
    	name: 'hanmeimei2',
      	setName: function(name){
          this.name = name
      	}
    }
    person1.setName()   //Uncaught TypeError: person1.set is not a function(…)

这是因为对象实例和对象原型直接是通过一个指针链接的，这个指针是一个内部属性[[Prototype]]，可以通过proto访问。我们通过对象字面量修改了Person.prototype指向的地址，然而对象实例的proto，并没有跟着一起更新，所以这就导致，实例还访问着原来的Person.prototype，所以建议不要通过这种方式去改变Person.prototype属性

构造函数和原型组合模式

1
2
3
4
5
6
7
8
9
function Person(name) {
  this.name = name
  this.friends = ['lilei']
}
Person.prototype.say = function() {
  console.log(this.name)
}
var person1 = new Person('hanmeimei')
person1.say() //hanmeimei

优点：

  • 解决了原型模式对于引用对象的缺点
  • 解决了原型模式没有办法传递参数的缺点
  • 解决了构造函数模式不能共享方法的缺点

动态原型模式

寄生构造模式

稳妥构造模式

参考 [‘https://juejin.im/entry/58291447128fe1005cd41c52']

发表于 | 分类于 |
字数统计: 217 | 阅读时长 ≈ 1

箭头函数this指向

1
2
3
4
5
6
7
8
9
10
11
12
class Animal {    
    constructor(){        
        this.type = 'animal'
    }
    says(say){
        setTimeout( () => {            
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
} 
 var animal = new Animal()
 animal.says('hi')  //animal says hi

当我们使用箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。并不是因为箭头函数部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this。

阅读全文 »

发表于 | 分类于 |
字数统计: 3,378 | 阅读时长 ≈ 12

position的值

  • static 默认值。没有定位，元素出现在正常的流中
  • relative生成相对定位的元素，相对于其在普通流中的位置进行定位。
  • absolute生成绝对定位的元素，相对于static定位以外的第一个祖先元素进行定位。
  • fixed生成绝对定位的元素，相对于浏览器窗口进行定位。

对BFC规范的理解？

BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。

说说你对语义化的理解？

  • 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
  • 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
  • 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
  • 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

Doctype作用?严格模式与混杂模式如何区分？它们有何意义?

  • <!DOCTYPE>声明位于文档最前面。告知浏览器以何种模式来渲染文档。
  • 严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。
  • 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
  • DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
阅读全文 »

发表于 | 分类于 |
字数统计: 1,371 | 阅读时长 ≈ 5

对象原型

JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象拥有一个原型对象，对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型，并从中继承方法和属性，一层一层、以此类推。这种关系常被称为原型链 (prototype chain)，它解释了为何一个对象会拥有定义在其他对象中的属性和方法。

准确地说，这些属性和方法定义在Object的构造器函数(constructor functions)之上的prototype属性上，而非对象实例本身。

在传统的 OOP 中，首先定义“类”，此后创建对象实例时，类中定义的所有属性和方法都被复制到实例中。在 JavaScript 中并不如此复制——而是在对象实例和它的构造器之间建立一个链接（它是proto属性，是从构造函数的prototype属性派生的），之后通过上溯原型链，在构造器中找到这些属性和方法。

注意

  • 理解对象的原型（可以通过Object.getPrototypeOf(obj)或者已被弃用的proto属性获得） 每个实例上都有的属性
  • 与构造函数的prototype属性之间的区别是很重要的。构造函数的属性
  • 也就是说，Object.getPrototypeOf(new Foobar())和Foobar.prototype指向着同一个对象。
阅读全文 »

发表于 | 分类于 |
字数统计: 1,961 | 阅读时长 ≈ 8

#JS执行机制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
setTimeout(function(){
    console.log('定时器开始啦') //主线程没任务就执行  d
});

new Promise(function(resolve){
    console.log('马上执行for循环啦');//new Promise立即执行   和宏任务属于同一队列  a
    for(var i = 0; i < 10000; i++){
        i == 9999 && resolve(i);
    }
}).then(function(i){
    console.log('执行then函数啦',i)//resolve()执行才会打印   c
});

console.log('代码执行结束');//   b

// 马上执行for循环啦
// 代码执行结束
// 执行then函数啦
// 定时器开始啦

阅读全文 »

发表于 | 分类于 |
字数统计: 881 | 阅读时长 ≈ 4

JavaScript定时器与执行机制解析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(new Date, i,',');
    }, 1000);
}
console.log(new Date, i,'>>>')

 Wed May 09 2018 22:54:19 GMT+0800 (中国标准时间) 5 ">>>"
 undefined
 Wed May 09 2018 22:54:20 GMT+0800 (中国标准时间) 5 ","
 Wed May 09 2018 22:54:20 GMT+0800 (中国标准时间) 5 ","
 Wed May 09 2018 22:54:21 GMT+0800 (中国标准时间) 5 ","
 Wed May 09 2018 22:54:21 GMT+0800 (中国标准时间) 5 ","
 Wed May 09 2018 22:54:21 GMT+0800 (中国标准时间) 5 ","
`循环执行过程中，几乎同时设置了 5 个定时器`，一般情况下，这些定时器都会在 1 秒之后触发，而循环完的输出是立即执行的


Immediate  立即的，直接的
阅读全文 »