笔记

最新推荐文章于 2024-05-30 15:48:53 发布

在路上_a

最新推荐文章于 2024-05-30 15:48:53 发布

阅读量136

点赞数 1

分类专栏： es6 前端文章标签： javascript

本文链接：https://blog.csdn.net/abc_26zm/article/details/111180949

版权

前端同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

es6

1 篇文章 0 订阅

订阅专栏

git

拉取远程分支

git clone www.git.com //git 地址

提交git

git status 查看当前状态

git add . 或者单独提交文件 git add xxx

git commit -m “提交代码”

git pull 先拉去

git push 后提交

响应式布局

1、百分比布局

2、媒体查询布局

@media screen and (max-width: 960px){	/* 最大宽度960 */
 body{
 background-color:#FF6699
 }
}
@media screen and (max-width: 550px){  /* 最小宽度 */
 body{
 background-color:#6633FF;
 }
}

通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，比如我们为不同分辨率的屏幕，设置不同的背景图片。比如给小屏幕手机设置@2x图，为大屏幕手机设置@3x图，通过媒体查询就能很方便的实现

缺点是样式繁琐

3、rem响应式布局

//动态为根元素设置字体大小
function init () {
 // 获取屏幕宽度
 var width = document.documentElement.clientWidth
 // 设置根元素字体大小。此时为宽的10等分
 document.documentElement.style.fontSize = width / 10 + 'px'
}
//首次加载应用，设置一次
init()
// 监听手机旋转的事件的时机，重新设置
window.addEventListener('orientationchange', init)
// 监听手机窗口变化，重新设置
window.addEventListener('resize', init)

4、vw响应式布局

css3中引入了一个新的单位vw/vh

与百分比布局很相似，但更好用

5、flex弹性布局

rem和其他单位之间的区别

（1）px单位

px（像素），国内网站相对来说用得比较多，任意浏览器的默认字体高都是16px。
相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
IE无法调整那些使用px作为单位的字体大小，国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；

（2）pt单位

pt是point，是印刷行业常用单位，等于1/72英寸。

（3）em单位

相对长度单位。相对于当前对象内文本的字体尺寸。如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸16px。
em才是真正的“相对单位”，它不是一个具体的数值，而是相对于父元素的属性计算出来的大小，一般移动终端布局用em比较合适。

(4) rem单位

rem单位是CSS3中新增的一个相对单位，只不过它要比em单位强大一些
rem相对于根元素HTML,而如果我们想修改大小，只需修改根元素HTML 的大小就可以了。
除了IE8及更早的版本个，目前所有的主流浏览器均支持此属性。

es6

var 声明变量是全局变量，可修改，也可不赋值

let 在块级作用域声明，外部无法调用，可修改，也可不赋值

const 声明变量不能修改，并且声明时不能不赋值，比如 const arr

es6的对象字面量增强写法

什么是字面量？ const obj = {} 这个大括号就是字面量

普通写法

const obj = {
	name:'张三',
    age:'16',
    fun:function(){
        console.log('在奔跑')
    }
}

1、属性的增强写法

es5的写法

const name = '张三'
const age = '28'
const obj = {
    name:name,
    age:age
}

es6写法

const name = '张三'
const age = '28'
const obj = {
    name,
    age
}

2、函数的增强写法

es5写法

const obj = {
	fun:function(){
		console.log('奔跑')
	}，
	edit:function(){
		console.log('吃饭')
	}
}

es6

const obj = {
	fun(){
		console.log('奔跑')
	},
    edit(){
        console.log('吃饭')
    }
}

javascript

截取字符串split()

split() 对字符串做截取

例：

let string = '张三，李四'
const array = string.split(',')  //array此时便是一个数组
//赋值
const zs = array[0]
const ls = array[1]

Object.assign() 合并对象也可用来浅拷贝

语法 Object.assign(target, …sources) target 目标对象sources源对象

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }

也可用于复制对象

const obj = { a: 1 };
const copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }

深拷贝

JSON.parse(JSON.stringify())

深拷贝的原理：用json.stringify转换成json字符串，在用json.parse把字符串解析成对象，这样新的对象就产生了，并给对象开辟了新的栈(内存栈)，实现深拷贝，但是该方法不是处理函数

js 数组求和

reduce方法 rui diu si
//语法 array.reduce(function(total, currentValue, currentIndex, arr), initialValue)  
let arr = [20, 2, 342, 4];
let sum = arr.reduce((prev, cur, index, arr)=> {
     console.log(prev, cur, index);
     return prev + cur;
}, 0) //注意这里设置了初始值
console.log(arr, sum);

js 数组筛选

//语法 array.filter(function(currentValue,index,arr), thisValue)
filter()方法 fou te
let arr = [32, 33, 16, 40,20];
 let src = arr.filter((item,index,arr)=>{
	      return item >10
 })
 console.log(src)
map方法 数组元素的平方根
//语法 array.map(function(currentValue,index,arr), thisValue)

javascript——原型与原型链

一、prototype

在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。

例如：

function Person(age) {
    this.age = age       
}
Person.prototype.name = 'kavin'
var person1 = new Person()
var person2 = new Person()
console.log(person1.name) //kavin
console.log(person2.name)  //kavin

上述例子中，函数的prototype指向了一个对象，而这个对象正是调用构造函数创建时的实例的原型，也就是person1和person2的原型。

原型的概念

每一个javascript对象(除null外)创建的时候，就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型中“继承”属性。

让我们用一张图表示构造函数和实例原型之间的关系：

二、__ proto __

这是每个对象(除null外)都会有的属性，叫做__ proto __，这个属性会指向该对象的原型。

function Person() {

}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true

而关系图：

补充说明：

绝大部分浏览器都支持这个非标准的方法访问原型，然而它并不存在于 Person.prototype 中，实际上，它是来自于 Object.prototype ，与其说是一个属性，不如说是一个 getter/setter，当使用 obj.__ proto __ 时，可以理解成返回了 Object.getPrototypeOf(obj)。

三、constructor

每个原型都有一个constructor属性，指向该关联的构造函数。

function Person() {

}
console.log(Person===Person.prototype.constructor)  //true

所以再更新下关系图：

function Person() {

}

var person = new Person();

console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true
// 顺便学习一个ES5的方法,可以获得对象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype) // true

补充说明：

function Person() {

}
var person = new Person();
console.log(person.constructor === Person); // true

当获取 person.constructor 时，其实 person 中并没有 constructor 属性,当不能读取到constructor 属性时，会从 person 的原型也就是 Person.prototype 中读取，正好原型中有该属性，所以：

person.constructor === Person.prototype.constructor

四、实例与原型

当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止。

function Person() {

}

Person.prototype.name = 'Kevin';

var person = new Person();

person.name = 'Daisy';
console.log(person.name) // Daisy

delete person.name;
console.log(person.name) // Kevin

在这个例子中，我们给实例对象 person 添加了 name 属性，当我们打印 person.name 的时候，结果自然为 Daisy。

但是当我们删除了 person 的 name 属性时，读取 person.name，从 person 对象中找不到 name 属性就会从 person 的原型也就是 person.proto ，也就是 Person.prototype中查找，幸运的是我们找到了 name 属性，结果为 Kevin。

但是万一还没有找到呢？原型的原型又是什么呢？

五、原型的原型

在前面，我们已经讲了原型也是一个对象，既然是对象，我们就可以用最原始的方式创建它，那就是：

var obj = new Object();
obj.name = 'Kevin'
console.log(obj.name) // Kevin

其实原型对象就是通过 Object 构造函数生成的，结合之前所讲，实例的 proto 指向构造函数的 prototype ，所以我们再更新下关系图：

六、原型链

简单的回顾一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么假如我们让原型对象等于另一个类型的实例，结果会怎样？显然，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立。如此层层递进，就构成了实例与原型的链条。这就是所谓的原型链的基本概念。——摘自《javascript高级程序设计》

其实简单来说，就是上述四-五的过程。

继上述五中所说，那 Object.prototype 的原型呢？

console.log(Object.prototype.__proto__ === null) // true

null 表示“没有对象”，即该处不应该有值。

所以 Object.prototype.__ proto __ 的值为 null 跟 Object.prototype 没有原型，其实表达了一个意思。

所以查找属性的时候查到 Object.prototype 就可以停止查找了。

最后一张关系图也可以更新为：

图中由相互关联的原型组成的链状结构就是原型链，也就是蓝色的这条线。

何为原型链

在JavaScript中万物都是对象，对象和对象之间也有关系，并不是孤立存在的。对象之间的继承关系，在JavaScript中是通过prototype对象指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的链条，专业术语称之为原型链。

vue

$set ()

//数据改变但视图未发生改变

//给data添加新的属性

//语法this.$set(obj, key, value)/vue.set(obj, key, value)
//obj   要给那个对象追加元素
//key   要添加元素的变量
//value 要添加的值
data(){
    return{
        obj:{
            name:'张三'
        }
    }
}，
methods:{
    this.$set(this.obj,'age',12)
}

vue数据双向绑定 v-model

vue的数据双向绑定主要通过Object.defineProperty()方法来进行数据劫持以及发布者-订阅模式来实现的，

vue生命周期

computed   计算属性
//引用
<div>{{fullNumber}}</div>	//不需要添加小括号
computde: {
    //基本使用
    //引用是就把当前函数当成一个属性来用
    fullNumber() {
      return: this.A + this.B
    }
    //复杂使用
    
  }

vue的四种跳转以及传参方式

router-link :to="{name:‘home’, params: {id:1}}"

类似于html当中的a标签

params传参数

<router-link :to="{name:'home', params: {id:1}}"> 
    params传参数 (类似post)
    路由配置 path: "/home/:id" 或者 path: "/home:id" 
    不配置path ,第一次可请求,刷新页面id会消失
    配置path,刷新页面id会保留
    html 取参  $route.params.id
    script 取参  this.$route.params.id

query传参

<router-link :to="{name:'home', query: {id:1}}"> 
	query传参数 (类似get,url后面会显示参数)
	路由可不配置
	html 取参  $route.query.id
	script 取参  this.$route.query.id

this.$router.push()

事件内的跳转跳转会添加到页面栈内

queryc传参

this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
	//html 取参  $route.query.id
	//script 取参  this.$route.query.id

params传参

this.$router.push({name:'home',params: {id:'1'}})  
	//只能用 name
	//路由配置 path: "/home/:id" 或者 path: "/home:id" ,
	//不配置path ,第一次可请求,刷新页面id会消失
	//html 取参  $route.params.id
	//script 取参  this.$route.params.id

$router.replace()

跳转不会添加页面栈内,并跳转到指定url，返回也会返回到上上页面

$router.go()

向前或者向后跳转到第n个页面，n可为正数也可为负数

组件之间通讯

父到子

父组件引入子组件 impot xxx from ‘…/xxx.vue’

在components内定义组件

父组件

变量可以为单个参数，也可为 [] , {}

<xxx :name="变量"></xxx>

子组件接收参数

如果是单个参数

props['name']

对象或者是数组

props:{
    type:Object/Array,
        default:()=>{} //[]    default不能直接赋值对象或者数组，需要通过工厂模式return一个默认对象或者数组  工厂模式：（工厂模式是一种用来创建对象的设计模式）
}

父组件调用子组件方法并且传参

<xxx ref="child"></xxx> 	//定义ref（类似于calss）
methods:{
	click(){
		this.$refs.child.XXX(params)   //  clild.方法名(想要传的参数)
	}
}

子组件向父组件传参

子组件事件内添加this.$emit来调用父组件的方法

<button @click="parentClick"></button>
parentClick(){
    this.$emit('handleChange','需要传的参数')  //$emit 父组件的@handleChange方法（自定义方法）
}

父组件接收子组件参数

<xxx @handleChange="方法名"></xxx>
//在methods内定义一个方法
方法名（变量）{
//接收 this.XXX = 变量
}

计算属性 computed

1.根据已有属性，计算得到一个新的属性
2.在computed里面写一个函数，这个函数很特殊，它的函数名，将来可以作为一个属性来使用
3.计算属性是依赖于缓存的，当页面中调用同一个计算属性多次的时候，后面的计算属性的值，会直接从第一次得到的结果中去取，所以说，它的性能比较高，推荐使用计算属性

<div>{{fullName}}</div>
data(){
    return{
        A = 1,
        B = 2
    }
}
computhd:{
    //简写
    fullName(){
        return this.A + this.B
    }
    //完整的写法
    fullName:{
        //计算属性一般是没有set方法，只读属性
        set(){
            
        },
        get(){
            //最常用的get方法
            return this.A + this.B
        }
    }
}

计算属性与methods的对比

.vue

<div>
    <h1>{{gitFullName()}}</h1>
    <h1>{{gitFullName()}}</h1>
    <h1>{{gitFullName()}}</h1>
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
</div>

methods:{
    gitFullName(){
       	//每一次在页面当中调用当前方法便会打印一次，不会有缓存
        console.log('gitFullName') 
        return this.A + this.B
    }
}
//
computhd:{
    //计算属性会对你的数据做一次缓存，他会观察有没有发生变化，如果每次调用this.A与this.B都没有发生变化，他会直接把原来的值返回，而不是重新计算，
	fullName(){
        //重复调用也只会执行一次
        console.log('gitFullName') 
        return this.A + this.B
    }
}

在路上_a

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
笔记

git拉取远程分支git clone www.git.com //git 地址提交gitgit status 查看当前状态git add . 或者单独提交文件 git add xxxgit commit -m “提交代码”git pull 先拉去git push 后提交响应式布局1、百分比布局2、媒体查询布局@media screen and (max-width: 960px){ /* 最大宽度960 */ body{ background-color:#FF669
复制链接

扫一扫