2020---工作总结

沉静的木头
1,012 阅读12分钟

框架

框架：1是什么：框架就是一套规范。既然是规范，你使用这个框架就要遵守这个框架所规定的约束。
              在Java开发中，框架是用一套规则+一群jar包来表示的。
    犹如盖房子要有一个图纸给一个规范约束，房子就能改成想要的  vue wx flutter uni-app

1.JIRA

JIRA是Atlassian公司出品的项目与事务跟踪工具，被广泛应用于缺陷跟踪、客户服务、需求收集、流程审批、任务跟踪、项目跟踪和敏捷管理等工作领域。（用于测试发布bug，然后前端在用来修改bug的）

2.Sourcetree

  GIT衍生的app  使用于提交  拉取  推送代码 

svn  

https://wiki.open.qq.com/wiki/SVN%E4%BD%BF%E7%94%A8%E6%8C%87%E5%BC%95%EF%BC%88%E6%9C%AC%E5%9C%B0%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%B8%BAWindows%EF%BC%89

3.后台管理系统的详细解释

juejin.cn/post/684490…


4.拼接字符串

比如："/v2.1/pay/recharge/bank/voucher?uid="+`${userdata.user_info.uid}`

"&username="+'${userdata.user_info.username}' ;

5._this  是原始对象   this总是指向调用函数的对象

6.父组件向子组件传递数据

比如：

edit(row){ 
     this.isAdd = false;
    const _this=this.$refs.form
     _this.devicesIds = []
     getDev(this.list,row.uid).then( response => {
         response.result.assets.forEach(function (data,index){
             _this.devicesIds.push(data.did)

             //_this.form = Object.assign({},row)
             

        }      }

this.lister = { aid:this.$parent.sid   }

ableadd(this.lister).then(response => {
         this.$parent.getData()
})

7.项目目录架构

segmentfault.com/a/119000001…


8.  下载书籍的好地方：

绿色  www.downcc.com/soft/129230…

3322  www.3322.cc/soft/34681.…

9. 好的网址

蚂蚁部落：www.softwhy.com/portal.php

配色网站： http：//colorhunt.co 

插件类网站： http://www.jq22.com/ 

素材类网站：http://588ku.com/ 

工具类：http://tool.lu/   

图标： www.iconfont.cn/collections…

菜鸟： https://www.runoob.com/vue2/vue-tutorial.html

掘金： https://juejin.cn/user/1978776663101687
腾讯云： https://cloud.tencent.com/developer/article/1061592

富书：富书

10.枚举

在JavaScript中，对象的属性分为可枚举和不可枚举之分，它们是

由属性的enumerable值决定的。

可枚举性决定了这个属性能否被for…in查找遍历到

数组可以被foreach语句遍历数组中的元素

11.computed和watch

computed

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

:function(){}  匿名函数   没有名字就无法像普通函数那样随时随地调用了

1.vm.reversedMessage总是取决于值vm.message

console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'

2. computed是一个计算的属性，(依赖缓存) computed本来就是响应的，且自动更新 依赖没有更新的情况，调用计算属性并不会重新计算

3.这意味着只要(message没有改变)，多次访问reversedMessage计算属性将立即返回先前计算的结果，而(不必再次运行该函数)。

watch

观察和响应Vue实例上的数据更改：监视属性。当你有一些数据需要根据其他数据进行更改时，过度使用会很诱人watch

<div id="demo">{{ fullName }}</div>var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})上面的代码是必要的和重复的。将其与计算出的属性版本进行比较：var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})这便是更好的形式，不是吗？

12.计算的Setter

计算属性默认为只有getter，但您也可以在需要时提供setter：

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

现在，当你运行时vm.fullName = 'John Doe'，setter将被调用，vm.firstName并且vm.lastName会相应地更新。

12---$set

◇适用于添加新属性它出发视图更新

◇this.$set(Object, key, value)     对象

◇this.$set(Array, index, newValue)    数组


使用this.$set(obj, key, value)/vue.set(obj, key, value)
              目标 属性  属性值
<script>
export default {
 data() {
   return {
     student: {
       name: '张三',
     }
   }
 },
 methods: {
   setMessage() {
     this.$set(this.student, 'age', 15)
     console.log(this.student)
   }
 }
}
</script>

12 --- $nextTick

◇ Vue.nextTick()作用：在下次dom更新循环结束之后，执行延迟回调。在修改数据之后立即使用这个方法，获得更新后的dom

在以下两个情况下需要用到Vue.nextTick()

1、Vue声明周期的created() 钩子函数进行的DOM操作一定要放在Vue.nextTick() 的回调函数中，因为created() 执行的时候DOM实际上并未进行任何渲染，此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。

　　与之对应的就是mounted 钩子函数，因为该函数执行时所有的DOM挂载和渲染都已完成，此时再钩子函数中进行任何DOM操作都不会有问题。

2、在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作应该放进Vue.nextTick() 的回调函数中

简而言之，如果你在数据改变之后的操作跟改变之后的DOM有关，那么就应该使用Vue.nextTick()

getText(){
	this.showDiv = true;
	this.$nextTick(function () {
		var text = document.getElementById('div').innerHTML;
		console.log(text)
	})
	
}

13.防抖和节流

防抖是某一段里执行一次  使用场景  输入框搜索联想    窗口改变

节流是间隔一段时间执行一次  使用场景  王者技能不断触发，单位时间里只触发一次

滑倒底部，自动加载

14.面向对象

面向过程与面向对象编程

1、面向过程：所有的工作都是现写现用。

2、面向对象：是一种编程思想，许多功能事先已经编写好了，在使用时，只需要关注功能的运用，而不需要这个功能的具体实现过程。

javascript对象
将相关的变量和函数组合成一个整体，这个整体叫做对象，对象中的变量叫做属性，变量中的函数叫做方法。javascript中的对象类似字典。

创建对象的方法  ---单体  
1、单体

<script type="text/javascript">
var Tom = {
    name : 'tom',
    age : 18,
    showname : function(){
        alert('我的名字叫'+this.name);    
    },
    showage : function(){
        alert('我今年'+this.age+'岁');    
    }
}
</script>

2、工厂模式

<script type="text/javascript">

function Person(name,age,job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.showname = function(){
        alert('我的名字叫'+this.name);    
    };
    o.showage = function(){
        alert('我今年'+this.age+'岁');    
    };
    o.showjob = function(){
        alert('我的工作是'+this.job);    
    };
    return o;
}
var tom = Person('tom',18,'程序员');
tom.showname();

</script>

2、构造函数

<script type="text/javascript">
    function Person(name,age,job){            
        this.name = name;
        this.age = age;
        this.job = job;
        this.showname = function(){
            alert('我的名字叫'+this.name);    
        };
        this.showage = function(){
            alert('我今年'+this.age+'岁');    
        };
        this.showjob = function(){
            alert('我的工作是'+this.job);    
        };
    }
    var tom = new Person('tom',18,'程序员');
    var jack = new Person('jack',19,'销售');
    alert(tom.showjob==jack.showjob);
</script>

3、原型模式

<script type="text/javascript">
    function Person(name,age,job){        
        this.name = name;
        this.age = age;
        this.job = job;
    }
    Person.prototype.showname = function(){
        alert('我的名字叫'+this.name);    
    };
    Person.prototype.showage = function(){
        alert('我今年'+this.age+'岁');    
    };
    Person.prototype.showjob = function(){
        alert('我的工作是'+this.job);    
    };
    var tom = new Person('tom',18,'程序员');
    var jack = new Person('jack',19,'销售');
    alert(tom.showjob==jack.showjob);
</script>

4、继承

<script type="text/javascript">

        function fclass(name,age){
            this.name = name;
            this.age = age;
        }
        fclass.prototype.showname = function(){
            alert(this.name);
        }
        fclass.prototype.showage = function(){
            alert(this.age);
        }
        function sclass(name,age,job)
        {
            fclass.call(this,name,age);
            this.job = job;
        }
        sclass.prototype = new fclass();
        sclass.prototype.showjob = function(){
            alert(this.job);
        }
        var tom = new sclass('tom',19,'全栈工程师');
        tom.showname();
        tom.showage();
        tom.showjob();
    </script>

15.prototype

在JavaScript中，prototype对象是实现面向对象的一个重要机制。
每个函数就是一个对象（Function），函数对象都有一个子对象 prototype对象，类是以函数的形式来定义的。prototype表示该函数的原型，也表示一个类的成员的集合。


定义和用法

prototype 属性使您有能力向对象添加属性和方法。

语法

object.prototype.name=value

<script type="text/javascript">

function employee(name,job,born)
{
this.name=name;
this.job=job;
this.born=born;
}

var bill=new employee("Bill Gates","Engineer",1985);

employee.prototype.salary=null;
bill.salary=20000;

document.write(bill.salary);

</script>      输出  // 20000

简介

编辑
在通过new创建一个类的实例对象的时候，prototype对象的成员都成为实例化对象的成员。
1、该对象被类所引用，只有函数对象才可引用；
2、在new实例化后，其成员被实例化，实例对象方可调用。
同时，函数是一个对象，函数对象若直接声明成员，不用被实例化即可调用。 [1]

优点

编辑
prototype.js是由Sam Stephenson写的一个javascript类库。该框架的设计思路巧妙，而且兼容标准的类库，能够帮助开发人员轻松建立有交互性良好的web2.0特性富客户端页面。 [1]


prototype ：每个函数对象都会有prototype，普通对象是没有这个属性的（这里为什么说普通对象呢，因为JS里面，一切皆为对象，所以这里的普通对象不包括函数对象）。它是构造函数的原型对象；

_ proto _ ：每个对象都有这个属性,它指向它的构造函数的原型对象；

16.原型链 https://www.jianshu.com/p/17b2d4dd6867

原型链是JavaScript实现继承的重要方式，原型链的形成是真正是靠proto 而非prototype，实例与原型之间的链条，这就是原型链


每个对象拥有一个原型对象，通过 __proto__ (读音: dunder proto) 指针指向其原型对象，并从中继承方法和属性，同时原型对象也可能拥有原型，这样一层一层，最终指向 null(Object.prototype.__proto__ 指向的是null)。这种关系被称为原型链 (prototype chain)，通过原型链一个对象可以拥有定义在其他对象中的属性和方法。
构造函数 Parent、Parent.prototype 和 实例 p 的关系如下:(p.__proto__ === Parent.prototype)
19. prototype 和 __proto__ 区别是什么？
prototype是构造函数的属性。
__proto__ 是每个实例都有的属性，可以访问 [[prototype]] 属性。
实例的__proto__ 与其构造函数的prototype指向的是同一个对象。
function Student(name) { this.name = name; } Student.prototype.setAge = function(){ this.age=20; } let Jack = new Student('jack'); console.log(Jack.__proto__); //console.log(Object.getPrototypeOf(Jack));; console.log(Student.prototype); console.log(Jack.__proto__ === Student.prototype);//true 复制代码


17.实列化

是指在面象对象的编程中，把类创建对象的过程称为实列化

格式：    类名 对象名 = new 类名

就是用日期类创建了一个日期的对象，就叫对象的实例化

Date date=new Date();
以Java为例
public class A{
    public static void main(String[] args){
        B b = new B();//实例化
        b.print();
    }
}
class B{
    public void print(){
        System.out.println("Hello,World!");
    }
}

所以你要让一个类防止被实例化，就需要对这个类的构造方法使用private修饰符

举个例子

public class A{
    public static void main(String[] args){
        B b = new B();//编译会出错，无法实例化
        b.print();
    }
}
private class B{
    public void print(){
        System.out.println("Hello,World!");
    }
}

17-01.扩展运算符

www.fly63.com/article/det…

18.解构赋值

   -数组解构赋值

ES6

允许写成下面这样。

let [a, b, c] = [1, 2, 3];

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。

本质上，这种写法属于<模式匹配>
，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

let [foo, [[bar], baz]] = [1, [[2], 3]];

foo // 1

bar // 2

baz // 3

let [ , , third] = ["foo", "bar", "baz"];


如果解构不成功，变量的值就等于undefined

let [foo] = [];

let [bar, foo] = [1];

以上两种情况都属于解构不成功，

foo

的值都会等于

undefined

。

   -对象解构赋值

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

let { bar, foo } = { foo: "aaa", bar: "bbb" };

foo // "aaa"

bar // "bbb"

let { baz } = { foo: "aaa", bar: "bbb" };

baz // undefined


   -字符串解构赋值

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

const [a, b, c, d, e] = 'hello';

a // "h"

b // "e"

c // "l"

d // "l"

e // "o"

类似数组的对象都有一个:length
属性，因此还可以对这个属性解构赋值。

let {length : len} = 'hello';

len // 5

   -数值和布尔值的解构赋值

解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。

let {toString: s} = 123;

s === Number.prototype.toString // true

let {toString: s} = true;

s === Boolean.prototype.toString // true

上面代码中，数值和布尔值的包装对象都有

toString

属性，因此变量

s

都能取到值。

解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于

undefined

和

null

无法转为对象，所以对它们进行解构赋值，都会报错。

let { prop: x } = undefined; // TypeError

let { prop: y } = null; // TypeError

   -函数参数的解构赋值



   -圆括号的问题

   -用途

19.构造函数

构造函数 ，是一种特殊的方法。主要用来在创建对象时初始化对象， 即为对象成员变量赋初始值，总与new运算符一起使用在创建对象的语句中。特别的一个类可以有多个构造函数 ，可根据其参数个数的不同或参数类型的不同来区分它们 即构造函数的重载。

外文名：constructor
作 用：为对象成员变量赋初始值
语 句：new运算符一起使用

<script type="text/javascript">
    function Person(name,age,job){            
        this.name = name;
        this.age = age;
        this.job = job;
        this.showname = function(){
            alert('我的名字叫'+this.name);    
        };
        this.showage = function(){
            alert('我今年'+this.age+'岁');    
        };
        this.showjob = function(){
            alert('我的工作是'+this.job);    
        };
    }
    var tom = new Person('tom',18,'程序员');
    var jack = new Person('jack',19,'销售');
    alert(tom.showjob==jack.showjob);
</script>

20.JSON.parse() 方法用于将一个 JSON 字符串转换为对象。

21.JSON.stringify()方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串

21.---Object.assign

Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。  ---

const target = { a: 1 };

const source1 = { b: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

注意，如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

const target = { a: 1, b: 1 };

const source1 = { b: 2, c: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

如果只有一个参数，Object.assign会直接返回该参数。

const obj = {a: 1};
Object.assign(obj) === obj // true

22.对前端性能优化有什么了解？一般都通过那几个方面去优化的？

  1. 减少请求数量
  2. 减小资源大小
  3. 减少重绘回流
  4. 优化网络连接
  5. 优化资源加载
  6. 性能更好的API
  7. webpack优化
前端安全也经常被问到的，常见的有两种——XSS、CSRF，详见前端安全

23.JavaScript 中 call()、apply()、bind() 的用法

   对比call 、bind 、 apply 传参情况下

　

obj.myFun.call(db,'成都','上海')；　　　　 // 德玛 年龄 99  来自 成都去往上海
obj.myFun.apply(db,['成都','上海']);      // 德玛 年龄 99  来自 成都去往上海  
obj.myFun.bind(db,'成都','上海')();       // 德玛 年龄 99  来自 成都去往上海
obj.myFun.bind(db,['成都','上海'])();　　 // 德玛 年龄 99  来自 成都, 上海去往 undefined

24.get post 的区别

post 和get都是向服务器提交数据，并且都会从服务器获取数据。

区别：

1. 传送方式：get通过地址栏传输，post通过报文传输

2. 传送长度：get参数有长度限制（受限于url长度），而post无限制

3. GET和POST还有一个重大区别，简单的说：

  GET产生一个TCP数据包；POST产生两个TCP数据包

（传输控制协议（TCP，Transmission Control Protocol）是一种面向连接的、可靠的、基于字节流的传输层通信协议，由IETF的RFC 793 [1] 定义。）

长的说：

对于get方式的请求，浏览器会吧http header和data一并发送出去

而对于POST,浏览器先发送header,服务器响应100 contine, 浏览器再发送data,服务器再

响应在200ok (f返回数据）

25.this.$store.dispatch

dispatch：含有异步操作，

 存储: this.$store.dispatch('setTargetUser',friend); 

 取值: this.$store.getters.targetUser; 

commit：同步操作，

 存储: this.$store.commit('setTargetUser',friend); 

取值: this.$store.state.setTargetUser 

 methods: {   
         showPwd() {    
              if (this.passwordType === 'password') {     
                          this.passwordType = ''    
                   } else {        this.passwordType = 'password'      }     
             this.$nextTick(() => {        this.$refs.password.focus()      })    },   

 handleLogin() {      this.$refs.loginForm.validate(valid => {        const user = {   
       username: this.loginForm.username,          password: this.loginForm.password, 
           type:3,          tid:configtid.localtid       
         }       
       if (valid) {   
           this.loading = true        
           this.$store.dispatch('Login', user).then(() => {  
                //异步储存到vuex --密码 号 tid      
             this.$router.push({ path: this.redirect || '/' })          
              this.loading = false          }).catch(() => {       
                  this.loading = false                            //在user.js 也储存          })        } else {          console.log('error submit!!')          return false        }      })    }  }




vuex存密码
localstorage  存后台的所有
cookie     存  token
           存  erg.tid


26.

龙哥:
https://mp.weixin.qq.com/s/iUNvzmOCC8qgp9EkcBSTHA
微信H5页面前端开发，大多数人都会遇到的几个兼容性坑

龙哥:
12个前端必会的 H5 问题及解决方法
https://mp.weixin.qq.com/s/IMVoR4gG5Sb-s13HOx48qA

龙哥:
css兼容性问题  你在项目中碰到什么问题 怎么解决？

27.  单页面 的优缺点？

优

1.良好的交互体验  ---不需要加载整个页面 获取数据ajax异步获取

，没有页面之间的切换，--页面显示流畅

2.良好的前后端工作分离模式

  后端不再负责模板渲染，输出页面工作

3.减轻服务器压力

缺

1.首屏加载慢 ---Vue-router懒加载  使用CDN加速  异步加载组件  服务端渲染 

2.不适合大型项目

  • 　大型项目中可能会涉及大量的DOM操作、复杂的动画效果，也就不适合使用Vue、react框架进行开发

3.不利于SEO

  • 服务端渲染

　　　　服务器合成完整的 html 文件再输出到浏览器

  • 页面预渲染
  • 路由采用h5 history模式

28. 移动端的兼容性问题

1.安卓浏览器看背景图片，有些设备会模糊。

比如：同等·比例的图片在pc机上很清楚，但手机上很模糊，

是devicePixelRatio在作怪

2.图片加载

若您遇到图片加载很慢的问题，对这种情况，手机开发一般用canvas方法加载：

3、假如手机网站不用兼容IE浏览器，一般我们会使用zeptojs。

4、防止手机中网页放大和缩小。

6、format-detection

format-detection 启动或禁用自动识别页面中的电话号码。

7、html5调用安卓或者ios的拨号功能

html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了。

8、html5GPS定位功能

具体请看：http://www.jb51.net/post/html5_GPS_getCurrentPosition

9、上下拉动滚动条时卡顿、慢

body {-webkit-overflow-scrolling:

touch;overflow-scrolling: touch;}

Android3+和iOS5+支持CSS3的新属性为overflow-scrolling

10、禁止复制、选中文本

13、ios和android下触摸元素时出现半透明灰色遮罩

29.微信h5的兼容性的坑

www.imooc.com/article/290…

30.router-view的底层

router-link ：路由链接组件，声明用以提交路由请求的用户接口router-view：路由视图组件，负责动态渲染路由选中的组件

31.rem布局

fnResize();
window.onresize = function () {
  fnResize();
}
function fnResize() {
  var deviceWidth = document.documentElement.clientWidth || window.innerWidth;
  if (deviceWidth >= 750) {
    deviceWidth = 750;
  }
  if (deviceWidth <= 320) {
    deviceWidth = 320;
  }
  document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px';
}

blog.csdn.net/Robin_star_…

www.cnblogs.com/SilverSquab…

字体特效

{    "workbench.startupEditor": "welcomePage",    "search.followSymlinks": false,    "emmet.triggerExpansionOnTab": true,    "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\cmd.exe",    "explorer.confirmDelete": false,    "files.autoSave": "afterDelay",    "explorer.confirmDragAndDrop": false,   "powermode.enabled": true, //启动效果"powermode.presets": "particles", // flames 火花效果"powermode.enableShake": false,"window.zoomLevel": 0,"workbench.sideBar.location": "left","diffEditor.ignoreTrimWhitespace": false,"[javascript]": {    "editor.defaultFormatter": "HookyQR.beautify"},"[html]": {    "editor.defaultFormatter": "vscode.html-language-features"},"files.associations": {} // 关闭代码抖动}

{
"workbench.startupEditor": "welcomePage",
"search.followSymlinks": false,
"emmet.triggerExpansionOnTab": true,
"terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\cmd.exe",
"explorer.confirmDelete": false,
"files.autoSave": "afterDelay",
"explorer.confirmDragAndDrop": false,
"powermode.enabled": true, //启动效果
"powermode.presets": "particles", // flames 火花效果
"powermode.enableShake": false,
"window.zoomLevel": 0,
"workbench.sideBar.location": "left",
"diffEditor.ignoreTrimWhitespace": false,
"[javascript]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"files.associations": {

} // 关闭代码抖动
}



avatar
文章
阅读
粉丝