思路
只需要在页面内放一个file标签,可以将其display设置为none,再使用图片、按钮及链接来触发file的单击事件。
1 | <html> |
1 | <script language="JavaScript"> |
只需要在页面内放一个file标签,可以将其display设置为none,再使用图片、按钮及链接来触发file的单击事件。
1 | <html> |
1 | <script language="JavaScript"> |
前端趋势—交互越来越多,从页面的整个刷新到利用Ajax的局部刷新,架构从传统后台MVC向前端MV*迁移。
MV*即以下
MVC
MVP
MVVM (Vue.js,Angular.js,react.js)
MVVC框架
轻量级MVVM框架
数据驱动+组件化的前端开发模式
技术选型—>社区,学习曲线,
vue借鉴了angular的指令,react的组件化
npm run build
hs -o -p 9999
http://127.0.0.1:9999/index.html#/home
1 | 使用build的前提,配置了package.json文件 |
补充.安装http server服务
1.Node.js介绍
简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js是一个基于 Chrome V8 引擎的 JavaScript 运行环境;
Node.js使用一个事件驱动、非阻塞式 I/O 的模型,使其轻量且高效;
Node.js的软件包生态系统npm是全球最大的开源库生态系统。
补充:npm:Nodejs的包管理工具(package management),简称npm。一般安装nodejs会一起安装对应的npm工具。
cnpm:淘宝为npm开发了一个镜像站并将镜像站相关操作封装进cnpm。
nvm:mac平台上专门用于管理node.js和npm版本的工具.使用它可以下载指定版本的node.并且使用nvm可以在同一个电脑上安装多个版本的node,并且可以很容易切换版本. windows平台可以使用nvm-windows.默认每个node版本中的module是相互隔离的。
more >>在学习ajax有关,发送请求时,就一直在思考,get方式与post方式提交请求时,分别设置下在请求体里传参数与在url地址里传参数的瞎几把组合。
组合1:post方式+?id=1(url方式?传参)
1 | var xhr = new XMLHttpRequest() |
可以传参,但是服务端要用$_GET接受
组合2:post方式+send(请求体传参)
1 | var xhr = new XMLHttpRequest() |
注意:设置了请求体就一定要设置请求体格式
对于上面代码要在send前添加一句代码:
1 | xhr.setRequestHeader('Content-Type:application/x-www-form-urlencoded')//这种是post提交的默认格式 |
还有种”multipart/form-data”用于文件提交
more >>VSCODE中文化
1.使用快捷键【Ctrl+Shift+P】,在弹出的搜索框中输入【configure language】,然后选择搜索出来的【Configure Display Language】。
2.然后打开locale.json文件,可以看到locale的属性值为en。删除locale后面的属性直到冒号,然后重新输入冒号会自动出现代码提示,这里选择”zh-CN“。
3.然后保存locale.json文件,重新启动VSCode软件,可以看到,并没有变为中文语言环境,那是应为locale.json中的代码配置的意思是说软件启动加载语言配置包为中文,但是实际上刚刚安装的VSCode并没有中文语言包,所以这里并没有显示为中文语言环境。
4.使用快捷键【Ctrl+Shift+X】然后在弹出的搜索框中输入Chinese,然后选择【Chinese (Simplified)Language Pack for Visual Studio Code】,然后点击右侧的【Install】。
5.安装完重启即可
格式化快捷键:Alt+Shift+F
ES6是一种标准
let不存在变量提升
1 | console.log(c) |
let在同一个作用域下只能定义一个同名变量
1 | var t = 1 |
let是块级作用域,var是函数作用域
1 | function fun(){ |
const 声明一个只读的常量,常量的值不能再改变。 常量包括字符串、数值、布尔、undefinded等。
const一定要初始化。
对于一些复杂的数据类型如对象,数组(属于引用类型,在使用const 声明时,不能改变的是它的引用地址)。
1 | const obj = {} |
简化了函数的定义。
1 | 最简单箭头函数 |
箭头函数的this指向的是定义时的谁,而不是执行时的谁。
箭头函数没有自己的this值,箭头函数中所使用的this来自于函数作用域链。
JavaScript是一门比较奇特的语言,它的this与其他语言不一样,并且它的取值还取决于代码是否为严格模式(“use strict”)。
this的值是什么?
this就是代码执行时当前的context object。
Global context
代码没有在任何函数中执行,而是在全局作用域中执行时,``this的值就是global对象,对于浏览器来说,this就是window。
这一条规则还是比较容易接受的。
Function context
函数中的this值取决于这个函数是怎样被调用的,这一条规则就有点变态了,也是很容易出BUG的地方。
另外,this的值还与函数是否为严格模式("use strict")有关,这就非常的丧心病狂了...
大家如果好奇的话,出门左转看MDN文档,我多说无益,只说明一种简单的情况。
As an object method
当函数作为对象的方法被调用时,它的this值就是该对象。
1 | var circle = { |
self = this?
当我们需要在对象方法中嵌套一个内层函数时,this就会给我们带来实际的困扰了,大家应该写过这样的代码:
1 | // 使用临时变量self |
outerDiameter函数是circle对象的方法,因此其this值就是circle对象。
那我们直接写this.radius多好啊,可惜不能这么写,因为内层函数innerDiameter并不会继承外层函数outerDiameter的this值。outerDiameter函数的this值就是circle对象,this.radius等于10。
但是,innerDiameter函数的this值不是circle对象,那它到底是啥?它是innerDiameter函数执行时当前的context object,这个context object又是啥?其实我也晕了,所以不妨测试一下:
1 | // innerDiameter函数中的this是window |
innerDiameter函数中的this是window,为啥是window这个不去管它,反正不是circle对象。
因此,如果我们直接在innerDiameter函数中使用this的话,就出问题了:
1 | // 使用普通函数 |
于是,我们不得不使用一个临时变量self将外层函数outerDiameter的this值搬运到内层函数innerDiameter。
.bind(this)
我们也可以使用.bind(this)来规避this变来变去的问题:
1 | // 使用.bind(this) |
但是,无论是使用临时变量self,还是使用.bind(this),都不是什么很简洁的方式。
总之,普通函数的this取值多少有点奇怪,尤其当我们采用面向对象的方式编程时,很多时候都需要用到this,大多数时候我们都不会去使用.bind(this),而是使用临时变量self或者that来搬运this的取值,写起来当然不是很爽,而且一不小心就会写出BUG来。
正如MDN文档所说:
箭头函数
箭头函数的this取值,规则非常简单,因为this在箭头函数中,可以看做一个普通变量。
箭头函数没有自己的this值,箭头函数中所使用的this都是来自函数作用域链,它的取值遵循普通普通变量一样的规则,在函数作用域链中一层一层往上找。
有了箭头函数,我只要遵守下面的规则,this的问题就可以基本上不用管了:
1 | // 使用箭头函数 |
对于内层函数innerDiameter,它本身并没有this值,其使用的this来自作用域链,来自更高层函数的作用域。innerDiameter的外层函数outerDiameter是普通函数,它是有this值的,它的this值就是circle对象。因此,innerDiameter函数中所使用的this来自outerDiameter函数,其值为circle对象。
set 类似于数组,但成员是唯一
1 | const s = new Set() |
map 类似于对象
1 | const m = new Map() |
1 | <body> |
1 | $(function(){ |
需求
1.图片不变形
2.不留白(满屏)
思路分析
等宽不等高
1 | * { |
1 | $(function(){ |
1 | let num = 1 |
原因: 首先,对于vue项目而言,组件的复用自然而然的会有多个实例,如果data属性值是一个对象,那么这些实例都会共享这些数据,这就会很麻烦,因为你不能确保你的所以实例中的属性值都不会重复。这时利用js中函数具有独立作业域的特点,将组件中的data属性返回一个函数,这样它的每个实例都会有自己的作业域空间,每个实例之间不会影响。
参考:https://blog.csdn.net/shaleilei/article/details/78084171
其实官方也有自己的说法,下面这个是官方的解答:
当一个组件被定义, data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 data 函数,每次创建一个新实例后,我们能够调用 data 函数,从而返回初始数据的一个全新副本数据对象。其实也很好理解,大概意思就是:
类比与引用数据类型。如果不用function return 每个组件的data都是内存的同一个地址,那一个数据改变其他也改变了,这当然就不是我们想要的。用function return 其实就相当于申明了新的变量,相互独立,自然就不会有这样的问题;js在赋值object对象时,是直接一个相同的内存地址。所以为了每个组件的data独立,采用了这种方式。
如果不是组件的话,正常data的写法可以直接写一个对象,比如data:{ msg : ‘ 下载 ‘ },但由于组件是会在多个地方引用
的,JS中直接共享对象会造成引用传递,也就是说修改了msg后所有按钮的msg都会跟着修改,所以这里用function来每次返回一个对象实例。
首先介绍下创建对象的三种方式:
1.调用系统构造函数创建。
1 | var obj=new Object() |
2.自定义构造函数创建。
1 | //先创建自定义构造函数 |
3.字面量的形式创建。(不通过构造函数,速度比构造器快)
1 | var obj={} |
缺失模块。
1、在博客根目录(注意不是yilia根目录)执行以下命令:
npm i hexo-generator-json-content --save
2、在根目录_config.yml里添加配置:
jsonContent: meta: false pages: false posts: title: true date: true path: true text: true raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true