TypeScript编译安装 npm install -g typescript npm install gulp-typescript -D// gulpfile.js var ts = require('gulp-typescript'); gulp.task('watch', function () { //sass监听 gulp.watch('src/css/sass/*.scss', function () { return gulp .src('src/css/sass/*.scss') .pipe(sass()) .pipe(gulp.dest('dist/css')); }); //less监听 gulp.watch('src/css/less/*.less', function () { return gulp .src('src/css/less/*.less') .pipe(less()) .pipe(gulp.dest('dist/css/')); }); // Typescript gulp.watch('src/js/ts/*.ts', function () { return gulp.src('src/js/ts/*.ts').pipe(ts()).pipe(gulp.dest('dist/js/')); }); });

Less扩展语言编译安装 Less转CSS{callout color="#4defb9"}首先可以引入使用less.js将less解释为css样式。也可以使用命令行转换的方式进行.less文件向.css文件的转换，可以使用gulp构建工具中的gulp-less进行自动转换{/callout}{alert type="info"}const gulp = require('gulp'); var less = require('gulp-less'); //less var sass = require('gulp-sass')(require('sass')); //sass var scss = require('gulp-scss'); //scss var ts = require('gulp-typescript'); //文件监听 gulp.task('watch', function () { //sass监听 gulp.watch('src/css/sass/*.scss', function () { return gulp .src('src/css/sass/*.scss') .pipe(sass()) .pipe(gulp.dest('dist/css')); }); //less监听 gulp.watch('src/css/less/*.less', function () { return gulp .src('src/css/less/*.less') .pipe(less()) .pipe(gulp.dest('dist/css/')); }); });{/alert}语法实践变量{alert type="success"}@width: 10px; @height: @width + 10px; #header { width: @width; height: @height; }{/alert}

前端模块基本插件包 NodeJS{alert type="success"}删除文件npm install del -D npm install clean -D复制文件npm install --save copy压缩文件npm install --save copy反向代理、跨域npm i http-proxy-middleware{/alert}Gulp{alert type="info"}删除文件npm install --save-dev gulp-clean复制文件npm i gulp-copy -D压缩文件npm i uglify -D合并文件npm i gulp-concat -D压缩CSSnpm install gulp-cssnano --save-dev npm install --save-dev gulp-cssmin压缩图片$ npm install --save-dev gulp-imageminHTML文件压缩npm install --save gulp-htmlminSCSS转CSS{callout color="#f0ad4e"}.scss文件或者.sass文件不能以下划线为文件名开头，否则会出错{/callout}npm install --save sass gulp-sass npm install --save gulp-scss{/alert}Grunt{alert type="success"}删除文件npm install grunt-contrib-clean --save-dev复制文件npm i grunt-contrib-copy -D压缩文件npm i grunt-contrib-uglify -D合并文件npm i grunt-contrib-concat -D压缩CSSnpm i grunt-contrib-cssmin -D压缩图片npm install --save-dev grunt-contrib-imageminHTML文件压缩npm install grunt-contrib-htmlmin --save-dev{/alert}

Grunt自动化构建工具 安装npm install grunt -D npm install grunt-cli -g

Gulp:前端自动化构建工具 gulp安装npm install gulp gulp-cli -D新建配置文件根目录下新建gulpfile.js文件const gulp = require('gulp'); // var path = require('path'); const babel = require('gulp-babel'); //babel转码 var less = require('gulp-less'); //less var sass = require('gulp-sass')(require('sass')); //sass const eslint = require('gulp-eslint'); var browserify = require('gulp-browserify'); //browserify var ts = require('gulp-typescript'); //babel转码; gulp.task('babel', function () { return gulp .src('src/**/*.js') .pipe( babel({ presets: ['@babel/env'], }) ) .pipe(gulp.dest('lib')); }); //less编译 gulp.task('less', function () { return gulp.src('src/less/**/*.less').pipe(less()).pipe(gulp.dest('lib/css')); //sass编译 gulp.task('sass', function () { return gulp.src('src/sass/**/*.scss').pipe(sass()).pipe(gulp.dest('lib/css')); }); //eslint gulp.task('eslint', () => { return gulp .src(['src/js/**/*.js']) .pipe(eslint()) .pipe(eslint.format()) .pipe(eslint.failAfterError()); }); // Basic usage gulp.task('build', function () { // Single entry point to browserify return gulp.src('lib/js/app.js').pipe(browserify()).pipe(gulp.dest('./dist')); }); //文件监听 gulp.task('watch', function () { //sass监听 gulp.watch('src/sass/**/*.scss', function () { return gulp .src('src/sass/**/*.scss') .pipe(sass()) .pipe(gulp.dest('lib/css')); }); //less监听 gulp.watch('src/less/**/*.less', function () { return gulp .src('src/less/**/*.less') .pipe(less()) .pipe(gulp.dest('lib/css')); }); //babel转译 gulp.watch('src/js/**/*.js', function () { return gulp .src('src/js/**/*.js') .pipe( babel({ presets: ['@babel/env'], }) ) .pipe(gulp.dest('lib/js')); }); //监听整个src gulp.watch('lib/js/app.js', function () { return gulp .src('lib/js/app.js') .pipe(browserify()) .pipe(gulp.dest('./dist')); }); // TypeScript gulp.watch('src/js/ts/*.ts', function () { return gulp.src('src/js/ts/*.ts').pipe(ts()).pipe(gulp.dest('dist/js/')); }); });

JavaScript基础回顾 {alert type="success"}Document对象{callout color="#68ef4d"}HTMLCollection 是 HTML 元素的集合,NodeList 是一个文档节点的集合。{/callout}document.activeElement:返回当前获取焦点元素document.activeElement;document.addEventListener():向文档添加句柄document.addEventListener('click', function () { ... });document.createAttribute():创建一个属性节点let attr = document.createAttribute('data-value'); attr.value = 'true'; document.getElementById("p").setAttributeNode(attr);document.createComment():创建注释节点let common = document.createComment('ddd'); document.getElementById('content').appendChild(common);document.createElement():创建元素节点let p = document.createElement('p'); p.innerText = 2 ;document.createTextNode():创建文本节点let p = document.createElement('p'); let text = document.createTextNode('文本'); p.appendChild(text);document.images:返回对文档中所有 Image 对象引用document.images; // HTMLCollectiondocument.querySelector():返回文档中匹配指定的CSS选择器的第一元素document.querySelector(".pp"); // 第一个节点document.querySelectorAll():返回文档中匹配的CSS选择器的所有元素节点列表document.querySelector(".pp"); //所有节点document.write():向文档写HTML表达式或JavaScript代码document.write("<h1>Hello World!</h1><p>Have a nice day!</p>");Dom元素对象{callout color="#74f53d"}document.addEventListener(event, function, useCapture)函数中，useCapture指定事件是否 在捕获或冒泡阶段执行,默认false 关闭冒泡。{/callout}element.addEventListener():向指定元素添加事件句柄 document.getElementById("a").addEventListener('click',function(){ ... })element.removeEventListener(): 移除添加的句柄事件element.appendChild():为元素添加一个新的子元素 let ele = document.getElementById('div'); let newEle = document.createElement('p'); let attr = document.createAttribute('name'); attr.value = 'age'; newEle.setAttribute('data-value', 'true'); newEle.setAttributeNode(attr); ele.appendChild(newEle);element.attributes:返回一个元素的属性数组let newEle = document.createElement('p'); let attr = document.createAttribute('name'); attr.value = 'age'; newEle.setAttribute('data-value', 'true'); newEle.setAttributeNode(attr); console.log(newEle.attributes); element.children:返回元素的子元素的集合(HTMLCollection)// HTMLCollection集合转为数组格式 Array.from(document.getElemntById("div").children); [...document.getElemntById("div").children];element.classList:返回元素的类名，作为 DOMTokenList 对象(DOMTokenList)[...document.getElemntById("div").classList];document.getElemntById("div").classList.add("class"); //增加类document.getElemntById("div").classList.contains("class"); // 是否存在指定类document.getElemntById("div").classList.remove("cla1",,); // 移除指定类 多个类以逗号分开document.getElemntById("div").classList.toggle("cla1",true/false); // 在元素中切换类名element.className:设置或返回元素的class属性document.getElemntById("div").className.cinludes("cls");element.cloneNode():克隆某个元素(同JQ中clone()函数)document.getElemntById("div").cloneNode(); // 复制Domelement.contentEditable:设置或返回元素的内容是否可编辑(contenteditable属性)let p = document.getElementById('p'); p.contentEditable = true; // 设置可编辑属性为true console.log(p.getAttribute('contenteditable')); // 输出可编辑属性为true p.setAttribute('contenteditable', false); //关闭可编辑属性 let att = document.createAttribute('contenteditable'); // 创建可编辑属性 att.value = true; p.setAttributeNode(att); // 重新设置可编辑为true let text = document.createTextNode('1234'); // 创建文本节点 p.appendChild(text); //文本节点内容追加于原文本之后 let common = document.createComment('注解内容'); p.appendChild(common); let span = document.createElement('span'); //创建span标签 span.innerHTML = '<strong>世界 你好！</strong>'; p.appendChild(span); p.removeAttribute('contenteditable');element.firstChild：返回元素的第一个子节点document.getElementsByClassName("pp").firstChild;element.hasAttribute()：如果元素中存在指定的属性返回 true，否则返回falsedocument.getElementsByClassName("pp").hasAttribute("name");element.hasFocus()：返回布尔值，检测文档或元素是否获取焦点document.getElementsById("div").hasFocus();element.lastChild：返回最后一个子节点document.getElementsByClassName("pp").lastChild();element.nodeName：返回元素的标记名（大写）document.getElemntById("div").nodeNmae; // DIVelement.removeAttribute()：从元素中删除指定的属性document.getElementById("div").removeAttribute("name");DOM 事件鼠标事件{callout color="#68ef4d"}函数方法中存在event事件变量，包含鼠标点击信息{/callout}oncontextmenu ：在用户点击鼠标右键打开上下文菜单时触发onmousedown ：鼠标按钮被按下onmouseup : 鼠标按键被松开onmouseover ：鼠标移到某元素之上(支持冒泡)onmouseout : 鼠标从某元素移开(支持冒泡)onmouseenter : 当鼠标指针移动到元素上时触发(不支持冒泡)onmouseleave : 当鼠标指针移出元素时触发(不支持冒泡)onmousemove : 鼠标移动触发onwheel：该事件在鼠标滚轮在元素上下滚动时触发键盘事件onkeypress:某个键盘按键被按下并松开onkeydown:某个键盘按键被按下(监听事件使用)onkeyup:某个键盘按键被松开表单事件onfocus:聚焦时间(不支持冒泡)onblur:失焦事件(不支持冒泡)onfocusin:元素即将获取焦点时触发(支持冒泡)onfocusout:元素即将失去焦点时触发(支持冒泡) // #form form表单 // 1. 不支持冒泡 document.getElementById('form').onfocus = function () { console.log('不冒泡'); }; // 2. 不支持冒泡 document.getElementById('form').addEventListener('focus', function () { console.log('不支持冒泡2'); }); // 3. 支持冒泡 document.getElementById('form').addEventListener('focusin', function () { console.log('支持冒泡2'); }); // 4. 支持冒泡 document.getElementById('form').addEventListener( 'focus', function () { console.log('支持冒泡3'); }, true );oninput: 元素获取用户输入时触发onselect:用户选择文本(input,textarea)剪贴板事件oncopy:该事件在用户拷贝元素内容时触发oncut:该事件在用户剪切元素内容时触发onpaste:该事件在用户粘贴元素内容时触发事件属性bubbles ：返回布尔值 事件是否起泡类型target ： 触发事件的元素type ： 当前对象事件名称事件方法event.stopPropagation()：阻止事件冒泡event.preventDefault()： 阻止默认事件Console对象console.group()：在控制台创建一个信息分组。以 console.group() 开始，console.groupEnd() 结束cosnole.trace(): 显示当前执行的代码在堆栈中的调用路径console.table(tabledata,tablecolumns): 输出表格信息.第一个参数必须，数组或对象格式var site1 = { name : "Runoob", site : "www.runoob.com" } var site2 = { name : "Google", site : "www.google.com" } var site3 = { name : "Taobao", site : "www.taobao.com" } console.table([site1, site2, site3]);console.time(): 计时器，开始计时间，与 timeEnd() 联合使用，用于算出一个操作所花费的准确时间console.time('Runoob'); for (i = 0; i < 100000; i++) { // 代码部分 } console.timeEnd('Runoob');JavaScript 闭包{callout color="#6cf4b4"}自调用函数会自调用立即执行闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。{/callout}let add = (function () { let co = 1; console.log(1); return function () { return (co += 1); }; })();{music id="16483438" color="#4efd63" /}{/alert}

ES6基础回顾 {callout color="#27d3b6"}ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现{/callout}{alert type="info"}解构赋值{callout color="#4572f7"}等号的右边必须是数组、对象、Set、Map等可遍历的数据结构(具备Iterator接口){/callout}数组的解构赋值let [a, b, c] = new Set([1, 2]); let [a, b,c] = [1, 2]; // a = 1 b = 2 c = undefined let [a, b, c = 8] = new Set([1, 2]); // a = 1 b = 2 c = 8 对象的结构赋值{callout color="#eabe80"}解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象.对象的解构赋值的内部机制是先找到同名属性，然后再赋值给对应的变量。真正被赋值的是后者，而不是前者.{/callout}let { a = 0, b, c = 4, d: v ,e} = { a: 1, b: 2, d: 5 }; // a = 1 b = 2 c = 4 v = 5 e = undefined字符串的扩展{callout color="#b4c43b"}ES6加强了对Unicode的支持，并且扩展了字符串对象 JavaScript允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的Unicode码点 但是，这种表示法只限于码点在\uOOOO-\uFFFF之间的字符。超出这个范围的字符，必须用2个双字节的形式表达\uD842\uDFB7 示例双字节异体字，此文字unicode码是20BB7，如果使用\u20BB7,JavaScript 会理解成\u20BB+7。由于\u20BB是一个不可打印字符，所以只会显示一个空格，后面跟一个7{/callout}codePointAt()[示例双字节异体字]这个字UniCode码为20BB7,如果使用charCodeAt()函数，可获取十进制Unicode码，但是此函数只能获取到第一个字节的十进制Unicode码55362，即十六进制D842;如果存在第二个UniCode码想获取需要使用charCodAt(1),成功则返回十进制Unicode码，否则返回NaN.codePointAt函数返回完整的十进制Unicode码，可通过toString(16)转换为16进制Unicode码'\uD842\uDFB7' === '\u{20BB7}' // true 大括号表示法与四字节的UTF-16编码是等价的。codePointAt方法是测试一个字符是由2个字节还是4个字节组成的最简单方法。// 判断是否四字节 function is32Bit(v) { return v.codePointAt(0) > 0XFFFF; } // Unicode转码解码函数 $.extend({ encodeUnicode: function (v) { var ascii = ''; for (var i = 0; i < v.length; i++) { var code = Number(v[i].charCodeAt(0)); if (code > 47) { var charAscii = code.toString(16); charAscii = new String('0000').substring(charAscii.length, 4) + charAscii; ascii += '\\u' + charAscii; } else { ascii += v[i]; } } return ascii; }, //解码 Unicode-->字符 decodeUnicode: function (v) { debugger; var r = v.match(/\u[0-9a-fA-F]{4}/g); if (r == null) { return v; } for (var i = 0; i < r.length; i++) { v = v.replace(r[i], unescape(r[i].replace('\\u', '%u'))); } return v; }, });String.fromCodePoint(){callout color="#89e6b1"}ES5提供了String.fromCharCode方法，用于从码点返回对应字符，但是这个方法不能识别32位的UTF-16字符（Unicode编号大于OxFFFF）。{/callout}at(){callout color="#f7c073"}ES5对字符串对象提供了charAt方法，返回字符串给定位置的字符。该方法不能识别码点大于OxFFFF的字符。{/callout}标签模板{callout color="#63d6f2"}模板字符串紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能。{/callout}其他方法inclues() : 返回布尔值，表示是否找到了参数字符串。startsWith() : 返回布尔值，表示参数字符串是否在源字符串的头部。endsWith() : 返回布尔值，表示参数字符串是否在源字符串的尾部。padStart() : 用于头部补全padEnd() : 用于尾部补全数值扩展进制转换0X1E.toString(8); // 36 --> 十六进制转换为八进制 let sum = 455; sum.toString(16) // 1C7 --> 十进制转换为十六进制Number.isFinite():判断值是否为有限Number.isFinite(0); // true Number.isFinite(NaN); // false Number.isFinite(true); // false Number.isFinite(Infinity); // false Number.isFinite(-Infinity); // falseNumber.isNaN():判断是否NaNNumber.isNaN(true); // false Number.isNaN(Number('1')); // true Number.isNaN(Number('E')); // falseNumber.parseInt()、Number.parseFloat()与全局方法使用一致Number.islnteger():判断一个数是否是整数Number.isInteger(true); // false Number.isInteger(25.0); // true Number.isInteger("25"); // falseNumber.isSafelnteger()JavaScript能够准确表示的整数范围在－2^53到2^53之间（不含两个端点），超过这个范围就无法精确表示。Number.isSafeInteger(Math.pow(2,52)); // true Number.isSafeInteger(Math.pow(2,53)); // falseMath对象扩展函数Math.trunc():去除一个数的小数部分，返回整数部分Math.trunc(23.89); // 23Math.sign():判断－个数到底是正数、负数，还是零参数为正数，返回＋l;参数为负数，返回－1参数为0，返回0参数为-0，返回-0其他值，返回NaNMath.sign(0); // 0 Math.sign('2'); // 1 Math.sign('E'); // NaNMath.fround():返回一个数的单精度浮点数形式Math.fround(1.337); // 1.3370000123977661指数运算符(**)2**3; // 8 即2的3次方函数的扩展函数默认值与解构赋值配合function SubEvent({ name = '', age: year = 12,color = 'blue' },attribute = true) { // 得到 name='test' ; year=18 ; color='blue'; attribute=true ....... } SubEvent({ name: 'test', age: 18 });rest参数function SubEvent(...params) { console.log(params); // [{ name: 'test', age: 18 }] } SubEvent({ name: 'test', age: 18 });箭头函数{callout color="#4def68"}函数体内的this对象就是定义时所在的对象，而不是使用时所在的对象箭头函数不可以当作构造函数。也就是说，不可以使用new命令，否则会抛出一个错误且不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用rest参数代替{/callout}let parm = () => 4; let parm2 = () => ({ a: 1, b: 2 }); let parm3 = () => { return Math.trunc(23.78); }; [1, 2, 3].map((res) => res * 2); [1, 2, 3].filter((res) => res > 2);数组的扩展扩展运算待(...){callout color="#4def68"}将一个数组转为用逗号分隔的参数序列{/callout}let params = [2, 3, 4]; console.log(...params); function EsEvent([a, b, c]) { //解构赋值 console.log(a, b, c); // 2 3 4 } function EsEvent2(...parm) { // rest参数 console.log(parm); // [2,3,4] } EsEvent(...params); EsEvent2(...params);// 数组合并 let a = [2, 3]; console.log([0, 1, ...a]); // [0,1,2,3] // 对象合并 let b = { c: 3, d: 4 }; console.log({ a: 1, b: 2, ...b }); // {a:1,b:2,c:3,d:4} // 伪数组转换为数组 [...document.querySelectorAll('._value')]; // HTMLCollection集合转换为数组 [...new Set([...a, 4, 5, ...[2, 4]])]; // Set转为数组格式 去重 [2,3,4,5]// 函数返回值(数组) function GetParams() { let a = [2, 3, 4]; return [...a]; } const [aa, bb, cc = 9] = GetParams(); console.log(aa, bb, cc); // 2 3 4 // 函数返回值(对象) function GetParams2() { let as = { m: 1, n: 2 }; return { ...as }; } const { m, n = 3 } = GetParams2(); console.log(m, n); // 1 2Array.from():将两类对象转为真正的数组{callout color="#68ef4d"}类似数组的对象和可遍历(iterable)对象(包括ES6新增的数据结构Set和Map){/callout}Array.from(new Set([1,2,3])); 效果等同于 [...new Set[1,2,3]];Array.of():将一组值转换为数组。Array.of(3, 11, 8); // [3,11,8]Array.Prototype.find():找出第一个符合条件的数组成员[2,3,4,5].find((value,index)=>{return index>1}) // 4 [2,3,4,5].filter((value,index)=>{return index>1}) // [4,5]数组的空位Array(3); // length属性为3 [ , , ]对象的扩展Object.keys()、Object.values()、Object.entries()let aa = { a: 1, b: 2 }; let bb="c"; // Object.keys() Object.keys(aa); // ['a','b'] // Object.values() Object.values(aa); // [1,2] // Object.entries()方法 Object.entries(aa).forEach(([key, value]) => { console.log(key, value); }); //变量名做属性 { ["d"+"d"]:4, foo:false, [bb]:3, }Object.is():比较两个值是否相等(严格相等)Object.is(fasle,false); // true Object.is('2',2); //fasleObject.assign():将源对象(source)的所有可枚举属性复制到目标对象{callout color="#a2fd81"}Object.assign方法实行的是浅复制，而不是深复制。也就是说，如果源对象某个属性的值是对象，那么目标对象复制得到的是这个对象的引用。{/callout}let a1={a:1,b:{c:1}}; let a2=Object.assign({},a1); a1.b.d=2; console.log(a2); // {a:1.b:{c:1,d:2}} // 克隆对象 let vs = { a: 1, b: 2 }; Object.assign(Object.create(Object.getPrototypeOf(vs)), vs);属性的可枚举性{callout color="#f0ad4e"}对象的每一个属性都具有一个描述对象(Descriptor),用于控制该属性的行为.一旦把属性的 configurable 设置为 false，就不能再把它变回可配置了。此时，再调用 Object.defineProperty()方法修改除 writable 之外的特性，都会导致错误。{/callout}let os = { a: 1, b: 2 }; Object.getOwnPropertyDescriptor(os, 'a'); // 描述对象 { // 可配置 configurable: true, // 可枚举 enumerable: true, // 值 value: 1, // 可写 writable: true } Object.getOwnPropertyDescriptors(os);// 获取所有属性的描述对象 { "a": { "value": 1, "writable": true, "enumerable": true, "configurable": true }, "b": { "value": 2, "writable": true, "enumerable": true, "configurable": true } }属性的遍历for...in循环：遍历对象自身和继承的可枚举属性(不包含Symbol属性)Object.keys(): 遍历对象自身的所有可枚举属性(不包含Symbol属性)Reflect.OwnKeys(): 遍历对象自身的所有属性,不管是否可枚举和属性名是SymbolObject.getOwnPropertyNames():遍历对象自身所有(不包含Symbol属性)属性，不管是否可以枚举Object.getOwnPropertySymbols():遍历对象自身的所有Symbol属性__proto__属性{callout color="#6dee9a"}__proto__属性（前后各两个下画线）用来读取或设置当前对象的prototype对象。{/callout}Object.prototype.attrs=123; let os = new Object(); os.__proto__ == Object.getPrototypeOf(os); // true Object.is(os.__proto__,Object.getPrototypeOf(os)); // trueObject.setPrototypeOf(){callout color="#f0ad4e"}Object.setPrototypeOf方法的作用与proto相同，用来设置一个对象的prototype对象，返回参数对象本身。它是ES6正式推荐的设置原型对象的方法。{/callout}Object.getPrototypeOf()let os = { a: 1, b: 2 }; Object.getPrototypeOf(os);Object.keys()、Object.values()、Object.entries()let os = { a: 1, b: 2 }; Object.keys(os); // ['a','b'] Object.values(os); // [1,2] Object.entries(os); // [ ['a',1],['b',2]] Object.entries(os).forEach(([key, value]) => { console.log(key, value); });对象的扩展运算待let { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 }; // a=1 b=2 z={ c: 3, d: 4} let c = { c: 5, ...z }; // { c: 3, d: 4 } let d = { ...c, ...z }; // { c: 3, d: 4 }传导运算符let os = { a: 1, b: {c:3,d:4} }; os?.a; // 1 os?.['a']; // 1 Set Map{callout color="#f0ad4e"}遍历方法:map.keys();map.values();map.entries();forEach();{/callout}Set{callout color="#f0ad4e"}成员唯一，属于伪数组{/callout}add(param):添加元素clear():清空Setdelete(): 清除某个元素has(): 判断是否存在元素size属性：元素个数ler set = new Set([1,2,3,3]); //set.size = 3 Array.from(new Set([1,2,3,3])); length=3 等同于 [...new Set([1,2,3,3])]; // length = 3 Maplet map = new Map(); map.set('a',1); map.get('a'); // 1 ReflectReflect.has(): 判断对象内是否存在指定属性let os = { a: 1, b: 2 }; Reflect.has(os, 'a'); 'a' in osReflect.deleteProperty(): 删除对象某一属性let os = { a: 1, b: 2 }; Reflect.deleteProperty(os, 'a'); delete os.a;Reflect.getPrototypeOf(): 获取对象原型let os = { a: 1, b: 2 }; Reflect.getPrototypeOf(os); // 读取对象的__proto__属性Reflect.setPrototypeOf(): 设置原型let os = { a: 1, b: 2 }; Reflect.setPrototypeOf(os, null);Reflect.defineProperty(): 与Object.defineProperty作用相同let os = { a: 1, b: 2 }; Object.defineProperty(os, 'a', { value: 3, // 值 enumerable: true, // 可枚举性 writable: true, // 可写性 configurable: false, // 可配置性 });Reflect.getOwnPrope时yDescriptor(): 获取对象的可描述对象与Object.getOwnPrope时yDescriptor()一致let os = { a: 1, b: 2 }; Reflect.getOwnPropertyDescriptor(os, 'a'); { "value": 1, "writable": true, "enumerable": true, "configurable": true }Reflect.isExtensible()：对象是否可扩展 与Object.isExtensible()一致Object.isExtensible(os); // trueReflect.ownKeys(): 遍历对象的自身所有属性，不管是否可枚举和是否Symbol属性Promiselet data = new Promise((resolve, reject) => { $.ajax({ url: 'https://jsonplaceholder.typicode.com/todos/1', dataType: 'json', async: false, success(res) { resolve(res); }, }); }) .then((result) => { return new Promise((resolve, reject) => { $.ajax({ url: 'https://jsonplaceholder.typicode.com/todos/1', dataType: 'json', async: false, success(res) { resolve({ result, res }); }, }); }); }) .catch((error) => { console.log(error); }); let data2 = Promise.resolve({ a: 1, b: 2 });async函数{callout color="#4def6d"}async函数返回一个Promise对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。{/callout}async function GetData() { let res1 = await data; let res2 = await data2; return { res1, res2 }; } GetData().then((res) => { console.log(res); });{/alert}

NodeJS基础记录 基础备忘{alert type="info"}Node提供两个全局变量，都以两个下划线开头。__filename：指向当前运行的脚本文件名。__dirname：指向当前运行的脚本所在的目录。{/alert}

package.json文件 scripts字段{callout color="#f0ad4e"}scripts指定了运行脚本命令的npm命令行缩写，比如start指定了运行npm run start时，所要执行的命令。{/callout}{alert type="info"}下面的设置指定了npm run preinstall、npm run postinstall、npm run start、npm run test时，所要执行的命令。"scripts": { "preinstall": "echo here it comes!", "postinstall": "echo there it goes!", "start": "node index.js", "test": "tap test/*.js" }{/alert}dependencies字段，devDependencies字段{callout color="#91d9fd"}dependencies字段指定了项目运行所依赖的模块，devDependencies指定项目开发所需要的模块。它们都指向一个对象。该对象的各个成员，分别由模块名和对应的版本要求组成，表示依赖的模块及其版本范围。{/callout}{alert type="success"}{ "devDependencies": { "browserify": "~13.0.0", "karma-browserify": "~5.0.1" } }{/alert}{alert type="error"}对应的版本可以加上各种限定，主要有以下几种：指定版本：比如1.2.2，遵循“大版本.次要版本.小版本”的格式规定，安装时只安装指定版本。波浪号（tilde）+指定版本：比如~1.2.2，表示安装1.2.x的最新版本（不低于1.2.2），但是不安装1.3.x，也就是说安装时不改变大版本号和次要版本号。插入号（caret）+指定版本：比如ˆ1.2.2，表示安装1.x.x的最新版本（不低于1.2.2），但是不安装2.x.x，也就是说安装时不改变大版本号。需要注意的是，如果大版本号为0，则插入号的行为与波浪号相同，这是因为此时处于开发阶段，即使是次要版本号变动，也可能带来程序的不兼容。latest：安装最新版本。{/alert}{alert type="success"}package.json文件可以手工编写，也可以使用npm init命令自动生成。$ npm init $ npm init -y有了package.json文件，直接使用npm install命令，就会在当前目录中安装所需要的模块。$ npm install如果一个模块不在package.json文件之中，可以单独安装这个模块，并使用相应的参数，将其写入package.json文件之中。# 安装到生产环境(dependencies节点) $ npm install express --save $ npm install express -S # 安装到开发环境(devDependencies) $ npm install express --save-dev $ npm install express -D{/alert}bin字段{alert type="info"}bin项用来指定各个内部命令对应的可执行文件的位置。"bin": { "someTool": "./bin/someTool.js" }上面代码指定，someTool 命令对应的可执行文件为 bin 子目录下的 someTool.js。Npm会寻找这个文件，在node_modules/.bin/目录下建立符号链接。在上面的例子中，someTool.js会建立符号链接node_modules/.bin/someTool。由于node_modules/.bin/目录会在运行时加入系统的PATH变量，因此在运行npm时，就可以不带路径，直接通过命令来调用这些脚本。 因此，像下面这样的写法可以采用简写。scripts: { start: './node_modules/bin/someTool.js build' } // 简写为 scripts: { start: 'someTool build' } 所有node_modules/.bin/目录下的命令，都可以用npm run [命令]的格式运行。在命令行下，键入npm run，然后按tab键，就会显示所有可以使用的命令。{/alert}main字段{alert type="info"}main字段指定了加载的入口文件，require('moduleName')就会加载这个文件。这个字段的默认值是模块根目录下面的index.js。{/alert}config 字段{alert type="success"}config字段用于添加命令行的环境变量。{ "name" : "foo", "config" : { "port" : "8080" }, "scripts" : { "start" : "node server.js" } }然后，在server.js脚本就可以引用config字段的值。http .createServer(...) .listen(process.env.npm_package_config_port){/alert}

CommonJS规范 {alert type="info"}文章内容来自于阮一峰老师博客,其他详情请拜读原文。{/alert}概述{alert type="info"}每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。如果想在多个文件分享变量，必须定义为global对象的属性。global.warning = true;所有代码都运行在模块作用域，不会污染全局作用域。模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。模块加载的顺序，按照其在代码中出现的顺序。{/alert}module对象{callout color="#f0ad4e"}　　如果在命令行下调用某个模块，比如node something.js，那么module.parent就是null。　　如果是在脚本之中调用，比如require('./something.js')，那么module.parent就是调用它的模块。利用这一点，可以判断当前模块是否为入口脚本。{/callout}{alert type="success"}if (!module.parent) { // ran with `node something.js` app.listen(8088, function() { console.log('app listening on port 8088'); }) } else { // used with `require('/.something.js')` module.exports = app; }{/alert}{alert type="warning"}每个模块内部，都有一个module对象，代表当前模块。它有以下属性。module.id 模块的识别符，通常是带有绝对路径的模块文件名。module.filename 模块的文件名，带有绝对路径。module.loaded 返回一个布尔值，表示模块是否已经完成加载。module.parent 返回一个对象，表示调用该模块的模块。module.children 返回一个数组，表示该模块要用到的其他模块。module.exports 表示模块对外输出的值。{/alert}module.exports属性{callout color="#b070ff"}module.exports属性表示当前模块对外输出的接口，其他文件加载该模块，实际上就是读取module.exports变量。如果一个模块的对外接口，就是一个单一的值，不能使用exports输出，只能使用module.exports输出。{/callout}require命令{alert type="info"}require命令用于加载文件，后缀名默认为.js。根据参数的不同格式，require命令去不同路径寻找模块文件。如果参数字符串以“/”开头，则表示加载的是一个位于绝对路径的模块文件。比如，require('/home/marco/foo.js')将加载/home/marco/foo.js。如果参数字符串以“./”开头，则表示加载的是一个位于相对路径（跟当前执行脚本的位置相比）的模块文件。比如，require('./circle')将加载当前脚本同一目录的circle.js。如果参数字符串不以“./“或”/“开头，则表示加载的是一个默认提供的核心模块（位于Node的系统安装目录中），或者一个位于各级node_modules目录的已安装模块（全局安装或局部安装）。如果参数字符串不以“./“或”/“开头，而且是一个路径，比如require('example-module/path/to/file')，则将先找到example-module的位置，然后再以它为参数，找到后续路径。如果指定的模块文件没有发现，Node会尝试为文件名添加.js、.json、.node后，再去搜索。.js件会以文本格式的JavaScript脚本文件解析，.json文件会以JSON格式的文本文件解析，.node文件会以编译后的二进制文件解析。如果想得到require命令加载的确切文件名，使用require.resolve()方法。{/alert}模块的缓存{alert type="info"}第一次加载某个模块时，Node会缓存该模块。以后再加载该模块，就直接从缓存取出该模块的module.exports属性。所有缓存的模块保存在require.cache之中，如果想删除模块的缓存，可以像下面这样写。{/alert}{alert type="info"}// 删除指定模块的缓存 delete require.cache[moduleName]; // 删除所有模块的缓存 Object.keys(require.cache).forEach(function(key) { delete require.cache[key]; }){/alert}模块的加载机制{alert type="success"}CommonJS模块的加载机制是，输入的是被输出的值的拷贝。也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。{/alert}CommonJS与ES6区别CommonJS模块输出的是一个值的复制 ES6模块输出的是值的引用CommonJS模块是运行时加载，ES6模块是编译时输出接口// CommonJS module.exports = { foo:"hello", bar:"world" } // 等同于 exports.default = { foo:"hello", bar:"world" } exports.foo = 'hello'// ES6 export default { foo:"hello", bar:"world" } export let foo = 'heool'

前端Babel转码使用Browserify打包 {alert type="success"}1. 安装模块npm install babel-cli babel-preset-env browserify -D 2. 新建配置.babelrc转码规则{ "presets": ["env"] }3. package.json中添加转码打包脚本{callout color="#39c6aa"}&& : 相继执行(指令串顺序执行)& : 同时执行(指令串同时执行){/callout} ....... "scripts": { "build": " babel src/js -d dist/js && npx browserify dist/js/app.js -o lib/main.js" },4. 引入文件编译文件运行{callout color="#ddc4a1"}css、js文件置于根目录下不能访问到{/callout} <script type="module" src="./lib/main.js"></script>{/alert}

彩色文字跳动输出特效 前言{alert type="success"}　　冲浪的时候，看见一位仁兄泽楠云的彩色文字跳动输出函数，玩起来很有意思，为了方便调用，班门弄斧做了一些小的修改，所以做此记录。作者原文章链接在下文。{/alert}效果{alert type="success"}{/alert}代码{alert type="success"}原生函数/** * @ Param _this : JS对象 * @ Param freeze : 出现之后不再闪动消失的部分 * @ Param con : 一直保持闪动的正文 */ function ContTransition(_this, freeze = '', con = '') { if (!(freeze && con)) return false; let content = [con].map(function (v) { return v + ''; }),a = 2,g = 1,s = 5,d = 75, b = ['rgb(110,64,170)','rgb(150,61,179)','rgb(191,60,175)','rgb(228,65,157)','rgb(254,75,131)','rgb(255,94,99)','rgb(255,120,71)','rgb(251,150,51)','rgb(226,183,47)','rgb(198,214,60)','rgb(175,240,91)','rgb(127,246,88)','rgb(82,246,103)','rgb(48,239,130)','rgb(29,223,163)','rgb(26,199,194)','rgb(35,171,216)','rgb(54,140,225)','rgb(76,110,219)','rgb(96,84,200)', ], c = {text: '',prefixP: -s,skillI: 0,skillP: 0,direction: 'forward',delay: a,step: g, }; (function auto() { let t = content[c.skillI]; c.step ? c.step-- : ((c.step = g), c.prefixP < freeze.length ? (c.prefixP >= 0 && (c.text += freeze[c.prefixP]), c.prefixP++) : 'forward' === c.direction ? c.skillP < t.length ? ((c.text += t[c.skillP]), c.skillP++) : c.delay ? c.delay-- : ((c.direction = 'backward'), (c.delay = a)) : c.skillP > 0 ? ((c.text = c.text.slice(0, -1)), c.skillP--) : ((c.skillI = (c.skillI + 1) % content.length), (c.direction = 'forward'))), (_this.textContent = c.text), _this.appendChild( (function (iv) { for ( var n = document.createDocumentFragment(), i = 0; iv > i; i++ ) { var l = document.createElement('span'); (l.textContent = String.fromCharCode(94 * Math.random() + 33)), (l.style.color = b[Math.floor(Math.random() * b.length)]), n.appendChild(l); } return n; })( c.prefixP < freeze.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP) ) ), setTimeout(auto, d); })(); }JQ扩展方法/** * @ Param freeze : 出现之后不再闪动消失的部分 * @ Param con : 一直保持闪动的正文 */ $.fn.ContTransition = function (freeze = '', con = '') { if (!(freeze && con)) return false; _this = this[0]; let content = [con].map(function (v) { return v + ''; }),a = 2,g = 1,s = 5,d = 75, b = ['rgb(110,64,170)','rgb(150,61,179)','rgb(191,60,175)','rgb(228,65,157)','rgb(254,75,131)','rgb(255,94,99)','rgb(255,120,71)','rgb(251,150,51)','rgb(226,183,47)','rgb(198,214,60)','rgb(175,240,91)','rgb(127,246,88)','rgb(82,246,103)','rgb(48,239,130)','rgb(29,223,163)','rgb(26,199,194)','rgb(35,171,216)','rgb(54,140,225)','rgb(76,110,219)','rgb(96,84,200)', ], c = {text: '',prefixP: -s,skillI: 0,skillP: 0,direction: 'forward',delay: a,step: g, }; (function auto() { let t = content[c.skillI]; c.step ? c.step-- : ((c.step = g), c.prefixP < freeze.length ? (c.prefixP >= 0 && (c.text += freeze[c.prefixP]), c.prefixP++) : 'forward' === c.direction ? c.skillP < t.length ? ((c.text += t[c.skillP]), c.skillP++) : c.delay ? c.delay-- : ((c.direction = 'backward'), (c.delay = a)) : c.skillP > 0 ? ((c.text = c.text.slice(0, -1)), c.skillP--) : ((c.skillI = (c.skillI + 1) % content.length), (c.direction = 'forward'))), (_this.textContent = c.text), _this.appendChild( (function (iv) { for ( var n = document.createDocumentFragment(), i = 0; iv > i; i++ ) { var l = document.createElement('span'); (l.textContent = String.fromCharCode(94 * Math.random() + 33)), (l.style.color = b[Math.floor(Math.random() * b.length)]), n.appendChild(l); } return n; })( c.prefixP < freeze.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP) ) ), setTimeout(auto, d); })(); };{/alert}参考链接{alert type="info"}原文链接 : https://iizny.com/1084/{/alert}

IP地址查询API接口 {callout color="#99f3ff"}　　国内的IP请求建议使用国内API服务接口，国外的IP使用国外API服务，若是使用国内服务请求国外IP响应内容会有偏差，响应内容与国外API相比甚至不在同一个州，准确性不高（可能由于国内屏蔽国外部分IP缘故导致）。{/callout}聚合数据{alert type="info"}官方地址 : https://www.juhe.cn/docs/api/id/1 {/alert}{alert type="success"}聚合数据IP获取API接口免费30次/天,返回数据结果基本和百度IP查询结果一致。返回JSON数据示例如下:{ "resultcode":"200", "reason":"查询成功", "result":{ "Country":"中国", "Province":"上海", "City":"上海", "District":"", "Isp":"电信" }, "error_code":0 }{/alert}IPInfo{alert type="info"}官网首页 : https://ipinfo.io/官网文档 ： https://ipinfo.io/developersGitHub文档 ： https://github.com/ipinfo/{/alert}{alert type="success"}具有50万次/月的免费额度，查询信息返回JSON为英文格式。与微软、npm、cisco、vmware合作，可信度很高。付费状态下响应数据的字段会更丰富，免费额度的JSON响应示例如下：{ "ip": "66.87.125.72", "hostname": "ip-66-87-125-72.spfdma.spcsdns.net", "city": "Springfield", "region": "Massachusetts", "country": "US", "loc": "42.1015,-72.5898", "org": "AS10507 Sprint Personal Communications Systems", "postal": "01101", "timezone": "America/New_York" }收费的响应示例如下：{ "input": "201.197.56.230", "data": { "ip": "201.197.56.230", "hostname": "www230.asd.tj.cn", "city": "Tianjin", "region": "Tianjin", "country": "CN", "loc": "39.1422,117.1767", "org": "AS4837 CHINA UNICOM China169 Backbone", "timezone": "Asia/Shanghai", "asn": { "asn": "AS4837", "name": "CHINA UNICOM China169 Backbone", "domain": "chinaunicom.cn", "route": "221.196.0.0/15", "type": "isp" }, "company": { "name": "China Unicom Tianjin Province Network", "domain": "chinaunicom.cn", "type": "isp" }, "privacy": { "vpn": false, "proxy": false, "tor": false, "relay": false, "hosting": false, "service": "" }, "abuse": { "address": "No.21,Financial Street, Beijing,100033, P.R.China", "country": "CN", "email": "hqs-ipabuse@chinaunicom.cn", "name": "ChinaUnicom Hostmaster", "network": "221.196.0.0-221.198.255.255", "phone": "+86-10-66259764" }, "domains": { "total": 0, "domains": [] } } }{/alert}阿里云市场{alert type="info"}云市场 ： 第三方IPAPI{/alert}{alert type="success"}云市场中第三方API商家较多，大多数具有免费的少量请求额度，其接口均与阿里云控制台结合使用，有一定保障，因为是第三方服务，风险和服务需要自行斟酌。某一第三方JSON返回示例如下：{ "code": 100, "message": "success", "ip": "110.188.234.66", "result": { "en_short": "CN", //英文简称 "en_name": "China", //归属国家英文名称 "nation": "中国", //归属国家 "province": "四川省", //归属省份 "city": "绵阳市", //归属城市 "district": "涪城区", //归属县区 "adcode": 510703, //归属地编码 "lat": 31.45498, //纬度 "lng": 104.75708 //经度 } }{/alert}{callout color="#ffecd1"}部分国外IP被封禁强制和谐了，导致是查询不到的。可以使用https://ipinfo.io/.{/callout}

前端基础回顾再整理 HTML{alert type="info"}<!--描述 HTML 文档的元数据:每三十秒刷新界面--> <meta http-equiv="refresh" content="2" /><!--网站图标--> <link rel="shortcut icon" href="图片地址" type="image/x-icon" /><!--规定页面上所有链接的默认 URL 和默认目标 置于头部之内--> <base href="..." target="_blank">/*media属性:对两种不同媒介类型使用不同样式表*/ <style type="text/css" media="print"> <style type="text/css" media="screen and (max-height:700px)"> /*应用样式到元素的父元素及其子元素。*/ <style type="text/css" scoped>{card-list}{card-list-item}MDN参考文档{/card-list-item}{card-list-item}Media Types文档参照{/card-list-item}{/card-list}img、、 图像映射<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"> <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"> </map>属性表述属性表述border显示框线bgcolor表格背景cellspacing单元格之间的距离cellpadding单元格内容与其边框之间的空白<!--type: a A i I 1 --> <ol start="50" type="I" > <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>iframe<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200" frameborder="0" scrolling="auto"> </iframe>{/alert}HTML5{callout color="#70c8ff"}HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。{/callout} {alert type="info"}<!--画布 --> <canvas id="myCanvas" width="200" height="100"></canvas>canvas基本了解表单属性required ： 必填placeholder ： 提示autofocus ： 自动聚焦autocomplete ： 自动填充 on/offformaction ： 表单提交的URL地址.覆盖form的action属性 与type="submit"配合使用formenctype ： 提交到服务器的数据编码 与type="submit"配合使用 “ multipart/form-data ”全局属性hidden : 隐藏contenteditable : 元素是否可编辑accesskey : 配合Alt实现快捷访问超链接{/alert}CSS/CSS3引入和@import引入差别{card-list}{card-list-item}1.本质的差别：link 属于 XHTML 标签，而 @import 完全是 CSS 提供的一种方式。{/card-list-item}{card-list-item}2.加载顺序的差别： 当一个页面被加载的时候（就是被浏览者浏览的时候) ，link 引用的 CSS 会同时被加载，而 @import 引用的 CSS 会等到页面全部被下载完再被加载。所以有时候浏览 @import 加载 CSS 的页面时开始会没有样式(就是闪烁)，网速慢的时候还挺明显。{/card-list-item}{card-list-item}3.兼容性的差别: @import 是 CSS2.1 提出的，所以老的浏览器不支持，@import 只有在 IE5 以上的才能识别，而 link 标签无此问题。{/card-list-item}{card-list-item}4.使用 dom(document o bject model文档对象模型 )控制样式时的差别：当使用 javascript 控制 dom 去改变样式的时候，只能使用 link 标签，因为@import 不是 dom 可以控制的。{/card-list-item}{/card-list}文本{alert type="success"}对齐方式 ： text-aligncenter ： 居中right ： 居右justify : 两端对齐文本修饰 : text-decoration: text-decoration-line text-decoration-color text-decoration-styleoverline : 上划线 red dotted/wavyline-through ： 管穿线 red dotted/wavyunderline ： 下划线 red dotted/wavy文本转换 ： text-transformuppercase ： 大写lowercase ： 小写capitalize ： 首字母大写段落中的文本换行 : white-spacenormal ： 默认。空白会被浏览器忽略。nowrap ： 文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。inherit ： 规定应该从父元素继承 white-space 属性的值。pre : 空白会被浏览器保留。其行为方式类似 HTML 中的 标签。pre-wrap : 保留空白符序列，但是正常地进行换行。pre-line : 合并空白符序列，但是保留换行符。单词、汉字间隔 : word-spacing字母、汉字 : letter-spacing文本方向 ： direction : rtl设置元素的垂直对齐 : vertical-align 值 描述 baseline 默认。元素放置在父元素的基线上。 sub 垂直对齐文本的下标。 super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素放置在父元素的中部。 bottom 使元素及其后代元素的底部与整行的底部对齐。 text-bottom 把元素的底端与父元素字体的底端对齐。 length 将元素升高或降低指定的高度，可以是负数。 % 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 inherit 规定应该从父元素继承 vertical-align 属性的值。 边框合并 ： border-collapse:collapse;隐藏元素 ： visibility:hidden控制内容溢出元素框时显示的方式 : overflowvisible : 默认值。内容不会被修剪，会呈现在元素框之外。hidden ： 内容会被修剪，并且其余内容是不可见的。scroll ： 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto ： 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit ： 规定应该从父元素继承 overflow 属性的值。文本溢出显示 ： text-overflowellipsis ： 显示省略符号 ... 来代表被修剪的文本clip ： 剪切文本string ： 使用给定的字符串来代表被修剪的文本允许长的内容可以自动换行 ： word-wrap:break-word ;元素的总高度和宽度包含内边距和边框 : box-sizing: border-box;box-shadow: h-shadow/水平阴影位置 v-shadow/垂直阴影位置 blur/模糊距离 spread/阴影大小 color/颜色 inset;{callout color="#f4ddbe"}标注内容{/callout}mediatype : all/全部 ; print/打印机，screen/用于电脑屏幕，平板，智能手机等,speech/用于屏幕阅读器not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。only: 用来定某种特别的媒体类型。all: 所有设备，这个应该经常看到。and ：and 操作符用于将多个媒体查询规则组合成单条媒体查询，{/alert}多媒体查询{alert type="info"}1. 在中使用/* 多媒体查询语法 */ @media not|only mediatype and (mediafeature and|or|not mediafeature) { CSS 代码...; } /* 代码一 */ @media screen and (max-width: 600px) { div.example { display: none; } } /* 代码二 */ @media screen and (max-width: 699px) and (min-width: 520px) { ul li a { padding-left: 30px; background: url(email-icon.png) left center no-repeat; } ul li a:before { content: "Email: "; font-style: italic; color: #666666; } } /* 代码三 */ @media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) { ul li a { padding-left: 30px; background: url(email-icon.png) left center no-repeat; } }2. 在中使用<!-- 多媒体查询语法 --> <link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css"> <!-- 代码 --> <link rel="stylesheet" media="screen and (min-width:300px)" href="print.css">3. 在@import中使用/* 多媒体查询语法 */ @import url('landscape.css') screen and (orientation:landscape); /* 代码 */ @import url('landscape.css') only screen and (min-width:400px);{/alert}JavaScript标签{alert type="warning"}可以为代码块设置标签，使用break跳出指定代码框cars=["BMW","Volvo","Saab","Ford"]; list: { document.write(cars[0] + "<br>"); document.write(cars[1] + "<br>"); document.write(cars[2] + "<br>"); break list; document.write(cars[3] + "<br>"); document.write(cars[4] + "<br>"); document.write(cars[5] + "<br>"); }{/alert}this{alert type="info"}　　all() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。　　两者的区别在于第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。{/alert}JavaScript 静态方法{alert type="success"}class Runoob { constructor(name) { this.name = name; } static hello() { return "Hello!!"; } } let noob = new Runoob("菜鸟教程"); // 可以在类中调用 'hello()' 方法 document.getElementById("demo").innerHTML = Runoob.hello(); // 不能通过实例化后的对象调用静态方法 // document.getElementById("demo").innerHTML = noob.hello(); // 以上代码会报错{/alert}JQuery

Windows 的包管理工具：Chocolatey的安装及基本使用 网址导航：Chocolatey社区Chocolatey包检索下载资源慢解决方案Chocolatey的安装{card-default label="PowerShell方式安装：" width="100%"}{timeline}{timeline-item color="#19be6b"}1.以管理员方式运行PowerShell：{/timeline-item}{timeline-item color="#ed4014"}2.运行命令：Get-ExecutionPolicy. 如果返回Restricted，则运行Set-ExecutionPolicy AllSigned或Set-ExecutionPolicy Bypass -Scope Process{/timeline-item}{timeline-item color="#7FFFAA"}3.现在运行以下命令：Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1')){/timeline-item}{/timeline}{/card-default} {card-default label="cmd方式安装：" width="100%"}{timeline}{timeline-item color="#19be6b"}1.以管理员方式运行cmd.exe：{/timeline-item}{timeline-item color="#7FFFAA"}2.执行以下命令：@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "[System.Net.ServicePointManager]::SecurityProtocol = 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"{/timeline-item}{/timeline}{/card-default}常用命令操作：{card-default label="查询" width="100%"}升级Chocolatey： choco upgrade chocolatey显示choco安装的应用： choco list --local-only/choco list -lo显示计算机安装的所有应用及版本： choco list -li显示帮助文档： choco list -laichoco list --page=0 --page-size=25查看安装的指定应用的信息： choco info chocolatey查看那些应用需要更新： choco outdated查看 源下载 地址：choco source list {/card-default}{card-default label="安装" width="100%"}choco install=cinst查看已安装应用信息：choco info检查要安装的程序是否是想要的：choco search scripts安装多个软件，同意一切行为：choco install --yes bandizip firefox potplayer teamviewer googlechromechoco install scripts =cinst scriptschoco install ruby --version 2.1.5 -my 安装指定版本{/card-default}{card-default label="升级" width="100%"}choco upgrade --yes Bandizip 升级指定choco upgrade --yes all 升级所有cup scripts = choco upgrade scripts{/card-default}Chocolatey GUI安装：{alert type="info"}安装： choco install chocolateygui升级： choco upgrade chocolateygui卸载： choco uninstall chocolateygui安装Beta版： choco upgrade chocolateygui --pre --source="'https://myget.org/f/chocolateygui'"{/alert}{callout color="#affb8e"}存疑问题可参阅官方文档{/callout}{music id="28987655" color="#56e6a8" autoplay="autoplay"/}

Select2:基于 jQuery 的选择框替代品 {callout color="#e6ddd1"}Select2 是一个基于 jQuery 的选择框替代品。它支持搜索、远程​​数据集和结果分页。{/callout}文档导航：Select2-官方网Select2-中文网Select2-GitHubJSONPlaceholder测试案例： <script> $(function () { $('select').select2({ theme: 'classic', // 占位符 placeholder: '这是我的占位符', // 显示清除选择 allowClear: true, // 开启多选 multiple: false, // 动态创建选项 tags: false, // 远程数据源 ajax: { url: 'http://jsonplaceholder.typicode.com/posts', dataType: 'json', // 搜索参数 data: function (params) { var query = { search: params.term, type: 'public', }; // 查询参数将是 ?search=[term]&type=public return query; }, cache: true, processResults: function (data) { // results结果对象数组中必须含有id和text属性 let datas = $.map(data, function (value) { value.text = value.title; return value; }); return { results: datas, }; }, }, // 自定义下拉结果呈现方式-可为html或者JQ templateResult: templateResult, //自定义选择项在输入框中的呈现方式-可为html或者JQ templateSelection: templateSelection, }); }); function templateSelection(state) { console.log(state); return state.text; } function templateResult(state) { return state.text; } </script>注意事项：为select赋值操作时,需在界面渲染完成相关元素被绑定之后操作。普通select赋值不生效，可链式触发change事件赋值。select.js引入需要在JQ引入之后，当发现错误时可尝试切换JQ版本。若是需要对已经绑定过的同一个select控件切换数据源,可以在再次重新绑定源之前先remove掉上一次绑定的option.

Javascript中的深拷贝和浅拷贝 {alert type="success"}1.javascript变量包含两种不同数据类型的值：基本类型和引用类型。基本类型值指的是简单的数据段，包括es6里面新增的一共是有6种，具体如下： number 、 string 、 boolean 、 null 、 undefined 、 symbol 引用类型值指那些可能由多个值构成的对象，只有一种如下： object 而数组Array和对象Object的数据类型都属于引用数据类型 object 在将一个值赋给变量时，解析器必须确定这个值是基本类型值还是引用类型值。基本数据类型是按值访问的，因为可以操作保存在变量中的实际的值。引用类型的值是保存在内存中的对象。与其他语言不同，JavaScript 不允许直接访问内存中的位置，也就是说不能直接操作对象的内存空间。 在操作对象时， 实际上是在操作对象的引用而不是实际的对象。2.Javascript的变量的存储方式--栈（stack）和堆（heap）栈：自动分配内存空间，系统自动释放，里面存放的是基本类型的值和引用类型的地址堆：动态分配的内存，大小不定，也不会自动释放。里面存放引用类型的值。3.值传递与址传递 //地址传递 var aa="strs"; var bb=aa; aa="strs2"; console.log(aa); //strs2 console.log(bb); //strs //浅拷贝 地址传递 var aa = { a: 1, b: 2 }; //定义对象 数组同例 var bb = aa; //此时是地址传递,两个变量指向栈上同一个地址 aa.a = 3; //改变堆上地址对应的值 console.log(aa); //{ a: 3, b: 2 }; console.log(bb); //{ a: 3, b: 2 }; //深拷贝 地址传递 var aa = { a: 1, b: 2 }; var bb = JSON.parse(JSON.stringify(aa));//序列化之后反序列化,在栈上开辟了独立空间 aa.a = 3; //改变堆上地址对应的值 console.log(aa); //{ a: 3, b: 2 }; console.log(bb); //{ a: 1, b: 2 }; 需要注意的是，如果对象比较大，层级也比较多，深复制会带来性能上的问题。在遇到需要采用深复制的场景时，可以考虑有没有其他替代的方案。在实际的应用场景中，也是浅复制更为常用.{/alert}

javascript中script标签的async和defer两种加载属性 　　默认情况下，浏览器是同步加载 JavaScript 脚本，即渲染引擎遇到 <script> 标签就会停下来，等到执行完脚本，再继续向下渲染。如果是外部脚本，还必须加入脚本下载的时间。如果脚本体积很大，下载和执行的时间就会很长，因此造成浏览器堵塞，用户会感觉到浏览器“卡死”了，没有任何响应。 　　上面代码中，<script> 标签打开 defer 或 async 属性，脚本就会异步加载。渲染引擎遇到这一行命令，就会开始下载外部脚本，但不会等它下载和执行，而是直接执行后面的命令。两者的区别:defer 要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行async 一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染一句话，defer 是 “渲染完再执行”，async 是 “下载完就执行”如果有多个 defer 脚本，会按照它们在页面出现的顺序加载，而多个 async 脚本是不能保证加载顺序的

Webstorm配置ES6自动转ES5 {alert type="success"}1.初始化npm生成package.json文件:在项目之中点击左下角 Terminal 进入命令行模式, 执行 node init ,没有修改的话一路点击确定生成package.json文件2.安装babel相关：preset使用 babel-preset-env ,如果以前使用 babel-preset-es2015 ,可以执行 npm uninstall --save-dev babel-preset-es2015 卸载# 1.安装babel-cli npm install --save-dev babel-cli # 2.安装preset npm install babel-preset-env --save-dev 3.项目根目录下建立.babelrc文件,内容如下:{ "presets": [ "env" ] }4.WebStorm配置:setting>Languages & Frameworks>JavaScript 选择 ECMAScript6setting>Tools>File Watchers ,点击右上角添加Babel,在弹出的界面选择babel.cmd的位置.可以选择项目内的node_modules下.bin文件夹下的babel.cmd.也可以选择全局安装babel之后,在C:\Users\Administrator\AppData\Roaming\npm下的babel.cmd此时配置完成,当含有ES6的js文件发生变化时,会在根目录下/dist文件夹下生成同名js文件,修改同步更新.{/alert}

Mockjax模拟Ajax响应数据 {alert type="info"}jQuery Mockjax 插件提供了简单而且极度灵活的接口，用来模拟ajax的请求和回应.在引入Mockajx之前需要先引入jquery.CDN引入使用BootCDN,下载可在GitHub下载.<!--mockjax引入--> <script src="https://cdn.bootcdn.net/ajax/libs/jquery-mockjax/2.6.0/jquery.mockjax.min.js"> </script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery-mockjax/2.6.0/jquery.mockjax.js"> </script>一些不支持JSON转换的浏览器比如IE 6,7,8等,需要额外引入json.js.有以下Ajax请求需要响应数据: $.ajax({ url: '/sakura/user/login', data: { usercode: 'admin', password: 'admin' }, type: 'POST', async: false, success: function (res) { console.log(res); }, });只需要设置://设置响应数据,如果是多个虚拟mockajx设置,可使用$.mockajx([{options},{...}]) //$.mockajx({options}) Const ID=$.mockjax({//返回索引 url: '/sakura/*',//可通过通配符 正则 匹配 //模拟网络和服务器延迟（以毫秒为单位）的整数-number responseTime: '500', responseText: JSON.stringify({ status: 200, msg: '数据获取成功', }), //响应的模拟文本或模拟对象文字-String });如果响应数据是从文件获取,而不是手动设置,可设置proxy属性,值为.json文件路径. 如果同时设置proxy和responseText,则proxy配置优先执行.//通过.json文件获取响应数据 $.mockjax({ url: '/sakura/*', status: 200, //number statusText: 'success', //服务器响应代码描述-String responseTime: '500', //模拟网络和服务器延迟（以毫秒为单位）的整数-number contentType: 'application/json;', //指定响应的内容类型-String proxy: './json.json', //数据获取路径 });//.json文件 { "data": { "aa": 111, "bb": 222 } }options默认参数设置对象:$.mockjaxSettings = { logging: true, status: 200, statusText: "OK", responseTime: 500, isTimeout: false, throwUnmocked: false, contentType: 'text/plain', response: '', responseText: '', responseXML: '', proxy: '', proxyType: 'GET', lastModified: null, etag: '', headers: { etag: 'IJF@H#@923uf8023hFO@I#H#', 'content-type' : 'text/plain' } };外部函数:$.mockjax.clear(number|String ):清除模拟请求,若无参数,清除全部模拟请求(void ) number:清除具有该 ID 的处理程序 String: 清除具有该匹配 URL 的处理程序 $.mockjax.mockedAjaxCalls():返回所有模拟 ajax 调用的数组(Array<Object>){/alert}