脚本宝典收集整理的这篇文章主要介绍了2019年5月所遇知识点整理,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
*注:本文章是在工作过程中所接触的知识点的整理,涉及的东西比价杂乱,如有错误之处,欢迎纠错与指导
一, 新窗口打开页面
1, js跳转页面与新窗口的打开
1.1, 超链接<a href="XXXXX">Welcome</a>
等同于
window.location.href="XXXXX";//在同当前窗口中打开窗口
1.2, 超链接<a href="XXXXX" target="_blank">Welcome</a>
等同于
window.open("XXXXX"); //在另外新建窗口中打开窗口
1.3, 在原来的窗体中直接跳转用
window.location.href="你所要跳转的页面";
2, vue-router在新窗口打开页面
2.1, <router-link>标签实现新窗口打开
<router-link target="_blank" :to="{path:'/home'}">新页面打开home页</router-link>
2.2, 编程式导航
可以借助router的示例方法,通过编写代码实现。但是vue2.0之后, $router.push 和 $router.go不支持新窗口打开的属性。所以使用 $router.resolve
openNewWindow(){
let routeUrl = this.$router.resolve({
path: "/openNewWindow"
});
window.open(routeUrl.href, '_blank');
}
二, 获取属性的方法总结
属性:用input标签为例,value id style disabled等就是属性。
获取属性的方法如下
1, 通过点的方式
<input type="text" value="hello" id="text" style="width:10px;"/>
var oText = document.getElementById("text")
oText.value可以直接获取到
注意:
1, 点要查找的是JS中本来就存在的属性名,不能找到变量或者函数的参数
2, 标准浏览器下无法访问html中的自定义属性,可以获取通过JS参加的自定义属性
3, 无法获取相对网址
2, 通过中括号[]的方式。
oText[value]
注意:
1,可以访问任何变量和参数
2,标准浏览器下无法访问HTML中的自定义属性,可以获取通过JS参加的自定义属性。
3,无法获取相对网址,比如img.src获取的是绝对路径。
两者区别:
1, 中括号运算符总是能代替点运算符。但点运算符却不一定能全部代替中括号运算符。
2, 中括号运算符可以用字符串变量的内容作为属性名。点运算符不能。obj['string'+variable]
3, 中括号运算符可以用纯数字为属性名。点运算符不能。
4, 中括号运算符可以用js的关键字和保留字作为属性名。点运算符不能。
3, 通过DOM的方式
获取属性的值:getAttribute(属性名) oText.getAttribute('value')
设置属性的值:setAttribute(属性名, 要设置的值) oText.setAttribute('value','hello')
删除:removeAttribute(属性名) oText.getAttribute('value')
Dom获取属性的优势:
1,可以获取html中自定义的属性
2,获取的是相对网址,不过 IE7以下还是绝对网址
3,IE下可以通过style访问
//IE下可以这样用:oText.style.getAttribute('width') 标准浏览器不可以
三, BFC
**这个知识点真的是没怎么闹明白,收藏了几个写的不错的文章,多看看多学学吧
BFC 块格式化上下文(Block Formatting Context)。
W3C的定义:浮动元素和绝对定位元素,非块级盒子的块级容器(例如inline-blocks,table-cells,和table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的BFC。
什么是BFC //写的很通俗易懂
什么是BFC //写的比较详细系统
前端精选文摘:BFC 神奇背后的原理
四, VSCode设置Emmet的使用
1, 插件安装
设置-->管理扩展-->搜索Emmet安装
2, 配置
文件-->首选项-->设置
代码如下
{
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
"emmet.triggerExpansionOnTab": true,
"emmet.showSuggestionsAsSnippets": true,
}
五, display:flow-root
对于display的属性,常见的有block、inline、inline-block、flex、grid、table和table-cell等。flow-root是display的新属性值,常用于清除浮动。
之前一般用的清除浮动的方案是clear:both;overflow:hidden,父元素display:table等。
几种常见的清除浮动方法
优势对父元素的设置比较友好
清除浮动案例:
.parentElement{
display: flow-root;
}
使用的时候因为浏览器兼容性的原因,需要做一些处理。使用css的条件选择属性@supports()。
@supports的具体用法可以看 CSS3条件判断 @supports
.floatElement{
float: left; /*或者right*/
}
.parentElement::after {
content:'';
display: table;
clear: both
}
@supports(display:flow-root){
.parentElement{
display: flow-root;
}
.parentElement::after{
content:none;
}
}
或者
.floatElement{
float: left; /*或者right*/
}
@supports not (display:flow-root) {
.parentElement::after {
content: '';
display: table;
clear:both;
}
}
六, module.exports
遇到这个知识点是在自学webpack过程中还有看见同事将极验相关的操作抽出来放在一个服务里面,用到了module.exports,于是就去了解了一下。
极验教程:极验教程链接
开发中,可以将代码拆分成多个脚本文件,并且让它们相互调用。如何定义和使用模块,这个步骤简称为模块化。相当于:HTML 中的 <link>。module.exports就是提供模块使用时候的接口。
var Demo = {
name: 'Demo',
author: 'xiaoyuan',
sayName: function(name){
console.log(this.name);
}
}
module.exports = Demo;
返回一个json object。这样可以全局共享的变量或者方法。
调用方法:
var Demo= require('./Demo.js');
Demo.sayName('hello'); //hello
或者:
var func1 = function() {
console.log("func1");
};
var func2 = function() {
console.log("func2");
};
exports.function1 = func1;
调用方法:
var functions = require("./functions");
functions.function1();
functions.function2();
官方说明: 链接地址
发现在开发过程中(主要使用vue+ES6),几乎很少用到module.exports。而使用module.exports达到的效果发现export也可以实现。于是去查了一下两者的关系。发现了第七个知识点
七, module.exports,exports,export, export default的区别
module.exports和exports遵循的是CommonJS模块规范。export和export default遵循的是ES6模块规范。CommonJS模块规范和ES6模块规范完全是两种不同的概念,阮一峰大神有全面详细的文档讲解。CommonJS模块规范 、ES6模块规范
每个模块内部,module变量代表当前模块,是一个变量对象,指向一块内存,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实是加载该模块的module.exports属性。
exports:是一个变量对象,它不是module的引用,它是{}的引用,它指向module.exports的{}模块
exports只能使用.语法向外暴露内部变量。例:exports.xxx=xxx
module.exports既可以通过点语法,也可以直接赋值一个对象(module.exports.xxx=xxx。module.exports=xxx)
Node为每个模块提供一个exports变量,指向module.exports。这等同在每个模块头部,有一行这样的命令。
var exports = module.exports;
**添加一个知识点,模块module.exports与实例化 链接地址
default就是别名,默认值的意思。所以export default向外暴露的成员,可以使用任意变量来接收,但是只能向外暴露一次。
//test.js
var word = 'hello world';
export default word;
//testDemo.js
import wordDemo from './test.js';
export default {
data(){
return {}
},
methods: {
test(){
console.log("testDemo");
}
}
}
export向外暴露的成员,使用{}来接收,可以定义多个,需要使用哪一个的时候就引入哪一个。名字必须按照定义好的名字,实在不想用,可以用as来取别名。
//test.js
export var wordOne = 'hello world';
export var wordTwo = 'hello';
export var wordThree = 'hi';
//testDemo.js
import {wordOne,wordThree as wordFour} from './test.js';
export default {
data(){
return {}
},
methods: {
test(){
console.log("testDemo");
}
}
}
export与export default可以同时使用
exports 和module.exports 必须后面跟=,export与export default不需要
发现module.exports一般配合require使用,export一般配合import使用,ps:一般没有定死。于是去了解了一下require与import的区别
八, require和import的区别
九, vue中使用base64,md5和sha1
base64:编码方式,可以加密和解密。可逆加密。
md5:消息摘要算法, 不可逆加密。
sha1:安全哈希算法, 不可逆加密。
md5,sha1 是信息摘要,确保信息的唯一性。
安装:
npm install js-base64 --save
npm install js-md5 --save
npm install js-sha1 --save
使用:
import md5 from 'js-md5';
let Base64 = require('js-base64').Base64;
import Sha1 from 'js-sha1';
export default{
data(){
return {
value: 'xxxxx'
}
},
methods:{
encryptData(val){
let md5Value = md5(val);
let shaVaule = Sha1(val);
let base64Value = Base64.encode(val);//解密 Base64.decode(base64Value);
}
}
}
十, 图片base64的使用
CSS中使用:background-image: url("data:image/png;base64,iVBORw0KGgo=...");
HTML中使用:<img src="data:image/png;base64,iVBORw0KGgo=..." />
有点:
无额外请求,没有跨域问题,无需考虑缓存、文件头或者cookies问题
缺点:减少一个图片的 HTTP 请求,但是css体积增大,影响渲染,可能会导致比较长时间的空白屏幕。
十一, Http Header里的Content-Type
Content-Type是指http/https发送信息至服务器时的内容编码类型,contentType用于表明发送数据流的类型,服务器根据编码类型使用特定的解析方式,获取数据流中的数据。
一般常用的有这样几种:application/x-www-form-urlencoded、multipart/form-data、application/json、text/plain
十二, 校验总结
以上是脚本宝典为你收集整理的2019年5月所遇知识点整理全部内容,希望文章能够帮你解决2019年5月所遇知识点整理所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。