2019年5月所遇知識點整理

mylxsw 發布于2019-08-30 11:00 / 1570人閱讀

摘要：發現了第七個知識點七的區別和遵循的是模塊規范。消息摘要算法，不可逆加密。，是信息摘要，確保信息的唯一性。其實就是排除數字只能是英語或者特殊字符發現的校驗比較全的網站鏈接地址鏈接地址注判斷長度的時候，英文字母和中文漢字占的字節數不同。

*注：本文章是在工作過程中所接觸的知識點的整理，涉及的東西比價雜亂，如有錯誤之處，歡迎糾錯與指導

一, 新窗口打開頁面 1, js跳轉頁面與新窗口的打開

1.1, 超鏈接Welcome
等同于
window.location.href="XXXXX";//在同當前窗口中打開窗口
1.2, 超鏈接Welcome
等同于
window.open("XXXXX"); //在另外新建窗口中打開窗口
1.3, 在原來的窗體中直接跳轉用
window.location.href="你所要跳轉的頁面";

2, vue-router在新窗口打開頁面

2.1, 標簽實現新窗口打開

新頁面打開home頁

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, 通過點的方式


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 中的。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的區別

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中使用：
有點：
無額外請求，沒有跨域問題，無需考慮緩存、文件頭或者cookies問題
缺點：減少一個圖片的 HTTP 請求，但是css體積增大，影響渲染，可能會導致比較長時間的空白屏幕。

十一, Http Header里的Content-Type

Content-Type是指http/https發送信息至服務器時的內容編碼類型，contentType用于表明發送數據流的類型，服務器根據編碼類型使用特定的解析方式，獲取數據流中的數據。
一般常用的有這樣幾種：application/x-www-form-urlencoded、multipart/form-data、application/json、text/plain
具體格式可以看下面的博客 POST提交數據之---Content-Type的理解

十二, 校驗總結

注：先了解一下js的正則表達式語法 RegExp 參考手冊

//判斷手機號
export  function isMobile(val){
    return /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+d{8})$/.test(val);
}

//判斷郵箱
export  function isEmail(val){
    return /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/.test(val);
}

//判斷是否為郵箱或者手機號
export  function isMobileOrEmail(val){
    return /^w+((-w+)|(.w+))*@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+)*.[A-Za-z0-9]+$/.test(val)||/^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+d{8})$/.test(val);
}

//數字
export  function isNumber(val){
    return /^[0-9]*$/.test(val);
}

//校驗是否為純數字 js的isNaN函數
export let checkNum = (val) => {

if(isNaN(val)){
    return false;
}
return true;

}

//校驗是否為純數字(正則)
export let checkNum1 = (val) => {

return /^[0-9]+.?[0-9]*$/.test(val);

}
//匹配：0-9出現一次或多次,·出現零次或一次,0-9出現零次或多次。/^[0-9]+.?[0-9]*$/這樣寫法，012.23也是匹配的

//由字母、數字組合
export  function isCombination(val){
    return /^(([a-z]+[0-9]+)|([0-9]+[a-z]+))[a-z0-9]*$/i.test(val);
}

//判斷身份證
export function isIdCard(idCard){
    var vcity={ 11:"北京",12:"天津",13:"河北",14:"山西",15:"內蒙古",  
                            21:"遼寧",22:"吉林",23:"黑龍江",31:"上海",32:"江蘇",  
                            33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山東",41:"河南",  
                            42:"湖北",43:"湖南",44:"廣東",45:"廣西",46:"海南",50:"重慶",  
                            51:"四川",52:"貴州",53:"云南",54:"西藏",61:"陜西",62:"甘肅",  
                            63:"青海",64:"寧夏",65:"新疆",71:"臺灣",81:"香港",82:"澳門",91:"國外"  
                           }; 
                     idCard = idCard.toUpperCase();
                     if(!(/(^d{15}$)|(^d{17}([0-9]|X)$)/.test(idCard))) {
                         return false;
                     }
                     var province = idCard.substr(0,2);  
                     if(vcity[province] == undefined)  {  
                         return false;
                     }   
                     
                     var len = idCard.length,re;
                     if(len == 15){
                         re = new RegExp(/^(d{6})(d{2})(d{2})(d{2})(d{3})$/);
                            var arrSplit = idCard.match(re);
                            var dtmBirth = new Date("19" + arrSplit[2] + "/" + arrSplit[3] + "/"+ arrSplit[4]);
                            var bGoodDay;
                            bGoodDay = (dtmBirth.getFullYear()== Number(arrSplit[2]))
                                    && ((dtmBirth.getMonth() + 1) == Number(arrSplit[3]))
                                    && (dtmBirth.getDate() == Number(arrSplit[4]));
                            if (!bGoodDay) {
                                return false;
                            } else {
                                var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5,8, 4, 2);
                                var arrCh = new Array("1", "0", "X", "9", "8", "7", "6", "5", "4","3", "2");
                                var nTemp = 0, i;
                                idCard = idCard.substr(0, 6) + "19" + idCard.substr(6, idCard.length - 6);
                                for (i = 0; i < 17; i++) {
                                    nTemp += idCard.substr(i, 1) * arrInt[i];
                                }
                                idCard += arrCh[nTemp % 11];
                                return true;
                            }
                     }
                     if(len == 18){
                            re = new RegExp(/^(d{6})(d{4})(d{2})(d{2})(d{3})([0-9]|X)$/);
                            var arrSplit = idCard.match(re);  
                            var dtmBirth = new Date(arrSplit[2] + "/" + arrSplit[3] + "/"+ arrSplit[4]);
                            var bGoodDay;
                            bGoodDay = (dtmBirth.getFullYear() == Number(arrSplit[2]))
                                    && ((dtmBirth.getMonth() + 1) == Number(arrSplit[3]))
                                    && (dtmBirth.getDate() == Number(arrSplit[4]));
                            if (!bGoodDay) {
                                return false;
                            } else {  
                                var valnum;
                                var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5,8, 4, 2);
                                var arrCh = new Array("1", "0", "X", "9", "8", "7", "6", "5", "4","3", "2");
                                var nTemp = 0, i;
                                for (i = 0; i < 17; i++) {
                                    nTemp += idCard.substr(i, 1) * arrInt[i];
                                }
                                valnum = arrCh[nTemp % 11];
                                if (valnum != idCard.substr(17, 1)) {
                                    return false;
                                }
                                return true;
                            }
                     }
}

//只能是英文字母
export let isLetter = (val) => {
    return /^[a-zA-Z]*$/.test(val);
}

//只能是漢字
export let isChinese = (val) => {
    return /^[u0391-uFFE5]+$/.test(val);
}

//只能是數字
export let isNumber = (val) => {
    return /^[0-9]+$/.test(val);
}

//獲取字符串的真實長度（包含漢字）
export function stringLength(val){
    //定義字符串的長度和字符串相應位置字符的編碼值
    var len = 0, code = 0;
    for(var i = 0; i < val.length; i++){
        code = test.charCodeAt(i);
        if(code >= 0 && code<=127){
            len += 1;
        }else{
            len += 2;
        }
    }
    return len;
}

//8-16位，不能是純字母、數字、不能有特殊字符
export let isPasswordRational = (val) => {
    return /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/.test(val);
}

//驗證座機號
export let checkTel = (val) => {
    return /^((d{3,4})|d{3,4}-)?d{7,8}$/.test(val);
}

//校驗ip
export let checkIp = (val) => {
    var reSpaceCheck = /^(d+).(d+).(d+).(d+)$/; 
    if(reSpaceCheck.test(val)){
        val.match(reSpaceCheck);
        //RegExp.$1是RegExp的一個屬性,指的是與正則表達式匹配的第一個 子匹配(以括號為標志)字符串
        if(RegExp.$1 <= 255 && RegExp.$1 >= 0 && RegExp.$2 <= 255 && RegExp.$2 >=0  
            &&RegExp.$3 <= 255 && RegExp.$3 >= 0 && RegExp.$4 <= 255 && RegExp.$4>=0){
                return true;
            }else{
                return false;
            }
    }else{
        return false;
    }
}

//檢驗url地址
export let checkUrl = (val) => {
    return /(http|ftp|https)://[w-_]+(.[w-_]+)+([w-.,@?^=%&:/~+#]*[w-@?^=%&/~+#])?/.test(val);
}

//檢驗日期 格式為YYYY-MM-DD
export let checkDate = (val) => {
    var result = val.match(/((^((1[8-9]d{2})|([2-9]d{3}))(-)(10|12|0?[13578])(-)(3[01]|[12][0-9]|0?[1-9])$)|(^((1[8-9]d{2})|([2-9]d{3}))(-)(11|0?[469])(-)(30|[12][0-9]|0?[1-9])$)|(^((1[8-9]d{2})|([2-9]d{3}))(-)(0?2)(-)(2[0-8]|1[0-9]|0?[1-9])$)|(^([2468][048]00)(-)(0?2)(-)(29)$)|(^([3579][26]00)(-)(0?2)(-)(29)$)|(^([1][89][0][48])(-)(0?2)(-)(29)$)|(^([2-9][0-9][0][48])(-)(0?2)(-)(29)$)|(^([1][89][2468][048])(-)(0?2)(-)(29)$)|(^([2-9][0-9][2468][048])(-)(0?2)(-)(29)$)|(^([1][89][13579][26])(-)(0?2)(-)(29)$)|(^([2-9][0-9][13579][26])(-)(0?2)(-)(29)$))/);
    if (result == null) {
        return false;
    }
    return true;
}

//檢驗金額
export let checkMoney = (money) => {
    if (money == "") {
        return false;
    }
    money = money.replace(/(^s*)|(s*$)/g, ""); //去除目標字符串左右兩邊的空白字符^是開始s是空白 *表示0個或多個|是或者$是結尾g表示全局
    var reg = /^[0-9]*.?[0-9]{0,2}$/;
    if (!checkNum(money)) {
        return false;
    }
    if (money.length > 3) {
        if (money.substr(0, 1) == "0") {
            if (money.substr(3, money.length).length > 2) {
                return false;
            }
        }
    }
    if(!reg.test(money)){
        return false;
    }
    return true;
}

//銀行卡號
export let isBankCard = (val) => {
    val = val.replace(/s+/g, ""); //去掉空格
    return /^([1-9]{1})(d{14}|d{18})$/.test(val);
}

//統一社會信用代碼
export let isSocialCreditCode = (val) => {
    return /[^_IOZSVa-zW]{2}d{6}[^_IOZSVa-zW]{10}/g.test(val);
}

//組織機構代碼（企業）
export let isOrganizationCode  = (val) => {
    return /[a-zA-Z0-9]{8}-[a-zA-Z0-9]/.test(val);
}

//營業執照注冊號
export let isBusinessLicense  = (val) => {
    return /(^(?:(?![IOZSV])[dA-Z]){2}d{6}(?:(?![IOZSV])[dA-Z]){10}$)|(^d{15}$)/.test(val);
}

//判斷是否是英語或者特殊字符。其實就是排除數字
export function removeNumber(rule, value, callback) {
    const reg = /[^D]/g
    if(!reg.test(value)){
        callback()
    }else{
        callback(new Error("只能是英語或者特殊字符"));
    }
}

發現的校驗比較全的網站鏈接地址鏈接地址

注：判斷長度的時候，英文字母和中文漢字占的字節數不同。一般來說英文是1個，中文是兩個。

一般來說英文是1個，中文是兩個。但是會根據編碼方式不同而不同。以下是搬運：
英文字母和中文漢字在不同字符集編碼下的字節數
英文字母：
字節數 : 1;編碼：GB2312
字節數 : 1;編碼：GBK
字節數 : 1;編碼：GB18030
字節數 : 1;編碼：ISO-8859-1
字節數 : 1;編碼：UTF-8
字節數 : 4;編碼：UTF-16
字節數 : 2;編碼：UTF-16BE
字節數 : 2;編碼：UTF-16LE
中文漢字：
字節數 : 2;編碼：GB2312
字節數 : 2;編碼：GBK
字節數 : 2;編碼：GB18030
字節數 : 1;編碼：ISO-8859-1
字節數 : 3;編碼：UTF-8
字節數 : 4;編碼：UTF-16
字節數 : 2;編碼：UTF-16BE
字節數 : 2;編碼：UTF-16LE
JS判斷字符串長度

GPU云服務器云服務器 2019年迅雷cdn 2019年中國十大idc公司排名阿里云香港服務器丟包2019年6月7日服務器配置　5年規劃

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114709.html

2019年7月所遇知識點整理

摘要：注本文章是在工作過程中所接觸的知識點的整理，涉及的東西比價雜亂，如有錯誤之處，歡迎糾錯與指導 *注：本文章是在工作過程中所接觸的知識點的整理，涉及的東西比價雜亂，如有錯誤之處，歡迎糾錯與指導

fyber 2019-08-02 15:26 評論0 收藏0
2019年7月所遇知識點整理

摘要：注本文章是在工作過程中所接觸的知識點的整理，涉及的東西比價雜亂，如有錯誤之處，歡迎糾錯與指導 *注：本文章是在工作過程中所接觸的知識點的整理，涉及的東西比價雜亂，如有錯誤之處，歡迎糾錯與指導

xietao3 2019-08-23 18:25 評論0 收藏0
2019年7月所遇知識點整理

摘要：注本文章是在工作過程中所接觸的知識點的整理，涉及的東西比價雜亂，如有錯誤之處，歡迎糾錯與指導一，自定義背景顏色，按鈕顏色和文字的處理二，對象 *注：本文章是在工作過程中所接觸的知識點的整理，涉及的東西比價雜亂，如有錯誤之處，歡迎糾錯與指導一，自定義背景顏色，按鈕顏色和文字的處理二， Arguments 對象

HmyBmny 2019-08-30 11:16 評論0 收藏0
2019年4月所遇知識點整理

摘要：注本文章是在工作過程中所接觸的知識點的整理，涉及的東西比價雜亂，如有錯誤之處，歡迎糾錯與指導一，的使用二，布局三，開發環境測試環境生產環境的了解四，與與五，對于已經學好的頁面，如何快速的改成自適應頁面六，開發者工具的使用七，的和八，的 *注：本文章是在工作過程中所接觸的知識點的整理，涉及的東西比價雜亂，如有錯誤之處，歡迎糾錯與指導一， iframe的使用二， flex布局三，開...

paulquei 2019-08-30 11:05 評論0 收藏0
2019年3月所遇知識點整理

摘要：注本文章是在工作過程中所接觸的知識點的整理，涉及的東西比價雜亂，如有錯誤之處，歡迎糾錯與指導一，前端項目性能優化二，數據頁面刷新丟失問題三，模式鉤子四，五，刪除元素所有子節點六，調試器安裝七，項目打包部署到八，布局總結實現，頭部高 *注：本文章是在工作過程中所接觸的知識點的整理，涉及的東西比價雜亂，如有錯誤之處，歡迎糾錯與指導一，前端項目性能優化二， Vuex數據頁面刷新丟失問題...

Java3y 2019-08-30 11:05 評論0 收藏0
2019年1月所遇知識點整理

摘要：注本文章是在工作過程中所接觸的知識點的整理，涉及的東西比價雜亂，如有錯誤之處，歡迎糾錯與指導一，之模塊化二，組件化設計與開發三，打包并將文件加載到指定的位置四，五，編寫模塊化 *注：本文章是在工作過程中所接觸的知識點的整理，涉及的東西比價雜亂，如有錯誤之處，歡迎糾錯與指導一， webpack之css模塊化二，組件化設計與開發三， webpack打包并將文件加載到指定的位置四，...

zebrayoung 2019-08-30 11:05 評論0 收藏0