MergeApi装饰器方案 定义一个接口可以入参数组当一个时间内的不同调用参数形成多个Api请求时候，可以合并请求，使用下面的合并请求装饰器装饰器import { mergeWith, isArray, unionWith, isEqual } from 'lodash' /** * log * @param type log类型 * @param id logId * @param input 输入 * @param pending 延时 */ function log(id: string, input: any, pending?: number) { console.group('%c%s(%s)', 'color:#0764E9;padding:2px;', '[MergeApi]', id) console.log('%c延时:', 'color:green;padding:2px;', `${pending} ms`) console.log('%c参数:', 'color:green;padding:2px;', input) console.groupEnd(); } export interface MergeApiConfig { delay?: number, debug?: boolean, } /** * 合并接口调用 * @param config 配置 * @returns */ export function MergeApi(config?: MergeApiConfig) { let cache: object = {}; let timer: number | null = null; let promise: Promise<any> = Promise.resolve(); return function(target: any, propertyKey: string, descriptor: TypedPropertyDescriptor<any>) { const { delay = 500, debug = false, } = config || {} const key = `${target.name}.${propertyKey}` const method = descriptor.value; descriptor.value = function(arg: object = {}) { const input = JSON.parse(JSON.stringify(arg)) mergeWith(cache, input, (obj, src) => { if (isArray(obj)) { return unionWith(obj, src, isEqual); } }) if (timer) { return promise } promise = new Promise((resolve, reject) => { timer = window.setTimeout(() => { debug && log(key, cache, delay) method.apply(this, [cache]) .then(resolve) .catch(reject) clearTimeout(timer as number) timer = null cache = {} }, delay) }) return promise; } return descriptor } } 使用export class ApiTranslate { @MergeApi({ delay: 800, }) static translate(args) { return Promise... } }

MockApi装饰器方案 在项目开发初期，需要前后端约定数据结构，Mock数据开发的时候，可以使用下面的MockApi可以在控制台看到mock数据的结构，方便联调。装饰器import axios from 'axios' import type { AxiosRequestConfig } from 'axios' import { isFunction } from 'lodash' import { Random } from 'mockjs' export function MockGet(url: string) { return Mock({ url, method: 'GET', }) } export function MockPost(url: string) { return Mock({ url, method: 'POST', }) } export function MockPut(url: string) { return Mock({ url, method: 'PUT', }) } export function resolve<T>(data: T, delay = 1000): Promise<T> { return new Promise((resolve) => { setTimeout(() => { resolve(data) }, delay) }) } export function Mock(config: AxiosRequestConfig) { return function(target: any, propertyKey: string, descriptor: TypedPropertyDescriptor<any>) { descriptor.value = function(...args: any[]) { return axios(config).then(({ data, }) => { // @ts-ignore const res = { error_code: 0, status: true, data, } console.warn('Mock', `[${config.method}] ${config.url}`, res, args); return res.data; }) } return descriptor } } /** * mockApiLog * @param type log类型 * @param id logId * @param input 输入 * @param output 返回 * @param pending 耗时 */ function mockApiLog(id: string, input: any, output: any, pending?: number) { console.group('%c%s(%s)', 'color:#0764E9;padding:2px;', '[MockApi]', id) console.log('%c耗时:', 'color:green;padding:2px;', `${pending} ms`) console.log('%c参数:', 'color:green;padding:2px;', input) console.log('%c返回:', 'color:green;padding:2px;', output) console.groupEnd(); } export interface MockApiConfig { pending?: number, } /** * 拦截接口调用，返回mock数据 * @param mock mock方法或者直接返回mock数据 * @returns */ export function MockApi(mock: any, config?: MockApiConfig) { return function(target: any, propertyKey: string, descriptor: TypedPropertyDescriptor<any>) { let { pending, } = config || {} if (pending === undefined) { pending = Random.integer(200, 2000) } const key = `${target.name}.${propertyKey}` descriptor.value = function(...args: any[]) { const output = isFunction(mock) ? mock.apply(this, [...args]) : mock; const input = JSON.parse(JSON.stringify(args)) return resolve(output, pending).then(data => { mockApiLog(key, input, data, pending); return data }) } return descriptor } } 使用export function projectsMockData(...args: any[]) { const tagStructure = mock({ 'tagStructure|1-10': [ { id: '@id', name: '@cword(1, 5)', } ], }) return mock({ 'items|0-20': [{ id: '@id', name: '@ctitle(1, 10)', icon: () => Random.pick( Random.range(1, 6).map(i => `${i}`) ), description: '@cword(6, 30)', 'tags|3': [() => Random.pick(tagStructure.tagStructure).id], 'members|0-16': [ { id: '@id', name: '@cname', email: '@email', } ], update_ts: '@datetime', created_at: '@datetime', }], ...tagStructure, }); }@MockApi(projectsMockData, { pending: 1000, })

JS监听VUE的HASH变化 (history) { let pushState = history.pushState; history.pushState = function(state) { if (typeof history.onpushstate === 'function') { history.onpushstate({ state: state }); } return pushState.apply(history, arguments); }; let replaceState = history.replaceState; history.replaceState = function(state) { if (typeof history.onreplacestate === 'function') { history.onreplacestate({ state: state }); } return replaceState.apply(history, arguments); }; })(window.history);window.onhashchange = window.onpopstate = history.onpushstate = history.onreplacestate = function() { console.log('change!')};

JS判断dom元素是否在可视范围内 function isElementInViewport (el, offset = 0) { const box = el.getBoundingClientRect(), top = (box.top >= 0), left = (box.left >= 0), bottom = (box.bottom <= (window.innerHeight || document.documentElement.clientHeight) + offset), right = (box.right <= (window.innerWidth || document.documentElement.clientWidth) + offset); return (top && left && bottom && right); }

JS 模拟点击链接打开新页面 let hrefElement = document.createElement('a')hrefElement.setAttribute('href', 'http://www.baidu.com') hrefElement.setAttribute('target', '_blank') let mouseEvents = document.createEvent('MouseEvents') mouseEvents.initEvent('click', true, true) hrefElement.dispatchEvent(mouseEvents)

fs递归删除文件或者文件夹 function deleteRecursive(path) { if (fs.existsSync(path)) { // file if (fs.statSync(path).isFile()) { fs.unlinkSync(path); return; } // directory let files = []; if (fs.statSync(path).isDirectory()) { files = fs.readdirSync(path); files.forEach(function (file, index) { deleteRecursive(path + "/" + file); }); fs.rmdirSync(path); } } };

js实现html转成pdf代码 引入依赖import html2canvas from 'html2canvas'; import jsPDF from 'jspdf'; html2pdf方法html2pdf(fileName) { fileName = typeof (fileName) == 'string' ? fileName : `pdf_${new Date().getTime()}`; html2canvas(document.body).then(function (canvas) { let contentWidth = canvas.width, contentHeight = canvas.height, //一页pdf显示html页面生成的canvas高度; pageHeight = contentWidth / 592.28 * 841.89, //未生成pdf的html页面高度 leftHeight = contentHeight, //页面偏移 position = 0, //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高 imgWidth = 595.28, imgHeight = 592.28 / contentWidth * contentHeight, pageData = canvas.toDataURL('image/jpeg', 1.0), pdf = new jsPDF('', 'pt', 'a4'); //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围，无需分页 if (leftHeight < pageHeight) { pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight); } else { while (leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight; position -= 841.89; //避免添加空白页 if (leftHeight > 0) { pdf.addPage(); } } } pdf.save(`${fileName}.pdf`); }); }

js常见缩写语法 初级篇1、三目运算符下面是一个很好的例子，将一个完整的 if 语句，简写为一行代码。const x = 20; let answer; if (x > 10) { answer = 'greater than 10'; } else { answer = 'less than 10'; } 简写为：const answer = x > 10 ? 'greater than 10' : 'less than 10'; 2、循环语句当使用纯 JavaScript（不依赖外部库，如 jQuery 或 lodash）时，下面的简写会非常有用。for (let i = 0; i < allImgs.length; i++) 简写为：for (let index of allImgs) 下面是遍历数组 forEach 的简写示例：function logArrayElements(element, index, array) { console.log("a[" + index + "] = " + element); } [2, 5, 9].forEach(logArrayElements); // logs: // a[0] = 2 // a[1] = 5 // a[2] = 9 3、声明变量在函数开始之前，对变量进行赋值是一种很好的习惯。在申明多个变量时：let x; let y; let z = 3; 可以简写为：let x, y, z=3; 4、if 语句在使用 if 进行基本判断时，可以省略赋值运算符。if (likeJavaScript === true) 简写为：if (likeJavaScript) 5、十进制数可以使用科学计数法来代替较大的数据，如可以将 10000000 简写为 1e7。for (let i = 0; i < 10000; i++) { } 简写为：for (let i = 0; i < 1e7; i++) { } 6、多行字符串如果需要在代码中编写多行字符串，就像下面这样：const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t' + 'adipisicing elit, sed do eiusmod tempor incididunt\n\t' + 'ut labore et dolore magna aliqua. Ut enim ad minim\n\t' + 'veniam, quis nostrud exercitation ullamco laboris\n\t' + 'nisi ut aliquip ex ea commodo consequat. Duis aute\n\t' + 'irure dolor in reprehenderit in voluptate velit esse.\n\t' 但是还有一个更简单的方法，只使用引号：const lorem = `Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.` 高级篇1、变量赋值当将一个变量的值赋给另一个变量时，首先需要确保原值不是 null、未定义的或空值。可以通过编写一个包含多个条件的判断语句来实现：if (variable1 !== null || variable1 !== undefined || variable1 !== '') { let variable2 = variable1; } 或者简写为以下的形式：const variable2 = variable1 || 'new'; 可以将下面的代码粘贴到 es6console 中，自己测试：let variable1; let variable2 = variable1 || ''; console.log(variable2 === ''); // prints true variable1 = 'foo'; variable2 = variable1 || ''; console.log(variable2); // prints foo 2、默认值赋值如果预期参数是 null 或未定义，则不需要写六行代码来分配默认值。我们可以只使用一个简短的逻辑运算符，只用一行代码就能完成相同的操作。let dbHost; if (process.env.DB_HOST) { dbHost = process.env.DB_HOST; } else { dbHost = 'localhost'; } 简写为：const dbHost = process.env.DB_HOST || 'localhost'; 3、对象属性ES6 提供了一个很简单的办法，来分配属性的对象。如果属性名与 key 名相同，则可以使用简写。const obj = { x:x, y:y }; 简写为：const obj = { x, y }; 4、箭头函数经典函数很容易读写，但是如果把它们嵌套在其它函数中进行调用时，整个函数就会变得有些冗长和混乱。这时候可以使用箭头函数来简写：function sayHello(name) { console.log('Hello', name); } setTimeout(function() { console.log('Loaded') }, 2000); list.forEach(function(item) { console.log(item); }); 简写为：sayHello = name => console.log('Hello', name); setTimeout(() => console.log('Loaded'), 2000); list.forEach(item => console.log(item)); 5、隐式返回值返回值是我们通常用来返回函数最终结果的关键字。只有一个语句的箭头函数，可以隐式返回结果（函数必须省略括号（{ }），以便省略返回关键字）。要返回多行语句（例如对象文本），需要使用（）而不是{ }来包裹函数体。这样可以确保代码以单个语句的形式进行求值。function calcCircumference(diameter) { return Math.PI * diameter } 简写为：calcCircumference = diameter => ( Math.PI * diameter; ) 6、默认参数值可以使用 if 语句来定义函数参数的默认值。ES6 中规定了可以在函数声明中定义默认值。function volume(l, w, h) { if (w === undefined) w = 3; if (h === undefined) h = 4; return l * w * h; } 简写为：volume = (l, w = 3, h = 4 ) => (l * w * h); volume(2) //output: 24 7、模板字符串过去我们习惯了使用“+”将多个变量转换为字符串，但是有没有更简单的方法呢？ES6 提供了相应的方法，我们可以使用反引号和 $ { } 将变量合成一个字符串。const welcome = 'You have logged in as ' + first + ' ' + last + '.' const db = 'http://' + host + ':' + port + '/' + database; 简写为：const welcome = `You have logged in as ${first} ${last}`; const db = `http://${host}:${port}/${database}`; 8、解构赋值解构赋值是一种表达式，用于从数组或对象中快速提取属性值，并赋给定义的变量。在代码简写方面，解构赋值能达到很好的效果。const observable = require('mobx/observable'); const action = require('mobx/action'); const runInAction = require('mobx/runInAction'); const store = this.props.store; const form = this.props.form; const loading = this.props.loading; const errors = this.props.errors; const entity = this.props.entity; 简写为：import { observable, action, runInAction } from 'mobx'; const { store, form, loading, errors, entity } = this.props; 甚至可以指定自己的变量名：const { store, form, loading, errors, entity:contact } = this.props; 9、展开运算符展开运算符是在 ES6 中引入的，使用展开运算符能够让 JavaScript 代码更加有效和有趣。使用展开运算符可以替换某些数组函数。// joining arrays const odd = [1, 3, 5]; const nums = [2 ,4 , 6].concat(odd); // cloning arrays const arr = [1, 2, 3, 4]; const arr2 = arr.slice( ) 简写为：// joining arrays const odd = [1, 3, 5 ]; const nums = [2 ,4 , 6, ...odd]; console.log(nums); // [ 2, 4, 6, 1, 3, 5 ] // cloning arrays const arr = [1, 2, 3, 4]; const arr2 = [...arr]; 和 concat( ) 功能不同的是，用户可以使用扩展运算符在任何一个数组中插入另一个数组。const odd = [1, 3, 5 ]; const nums = [2, ...odd, 4 , 6]; 也可以将展开运算符和 ES6 解构符号结合使用：const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 }; console.log(a) // 1 console.log(b) // 2 console.log(z) // { c: 3, d: 4 } 10、强制参数默认情况下，如果不向函数参数传值，那么 JavaScript 会将函数参数设置为未定义。其它一些语言则会发出警告或错误。要执行参数分配，可以使用if语句抛出未定义的错误，或者可以利用“强制参数”。function foo(bar) { if(bar === undefined) { throw new Error('Missing parameter!'); } return bar; } 简写为：mandatory = ( ) => { throw new Error('Missing parameter!'); } foo = (bar = mandatory( )) => { return bar; } 11、Array.find如果你曾经编写过普通 JavaScript 中的 find 函数，那么你可能使用了 for 循环。在 ES6 中，介绍了一种名为 find（）的新数组函数，可以实现 for 循环的简写。const pets = [ { type: 'Dog', name: 'Max'}, { type: 'Cat', name: 'Karl'}, { type: 'Dog', name: 'Tommy'}, ] function findDog(name) { for(let i = 0; i<pets.length; ++i) { if(pets[i].type === 'Dog' && pets[i].name === name) { return pets[i]; } } } 简写为：pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy'); console.log(pet); // { type: 'Dog', name: 'Tommy' } 12、Object [key]虽然将 foo.bar 写成 foo ['bar'] 是一种常见的做法，但是这种做法构成了编写可重用代码的基础。请考虑下面这个验证函数的简化示例：function validate(values) { if(!values.first) return false; if(!values.last) return false; return true; } console.log(validate({first:'Bruce',last:'Wayne'})); // true 上面的函数完美的完成验证工作。但是当有很多表单，则需要应用验证，此时会有不同的字段和规则。如果可以构建一个在运行时配置的通用验证函数，会是一个好选择。// object validation rules const schema = { first: { required:true }, last: { required:true } } // universal validation function const validate = (schema, values) => { for(field in schema) { if(schema[field].required) { if(!values[field]) { return false; } } } return true; } console.log(validate(schema, {first:'Bruce'})); // false console.log(validate(schema, {first:'Bruce',last:'Wayne'})); // true 现在有了这个验证函数，我们就可以在所有窗体中重用，而无需为每个窗体编写自定义验证函数。13、双位操作符位操作符是 JavaScript 初级教程的基本知识点，但是我们却不常使用位操作符。因为在不处理二进制的情况下，没有人愿意使用 1 和 0。但是双位操作符却有一个很实用的案例。你可以使用双位操作符来替代 Math.floor( )。双否定位操作符的优势在于它执行相同的操作运行速度更快。Math.floor(4.9) === 4 //true 简写为：~~4.9 === 4 //true 原文链接：https://www.sitepoint.com/shorthand-javascript-techniques/

js统一异常捕获 window.onerror全局异常捕获window.onerror = function (msg, url, line){ // 可以捕获异步函数中的错误信息并进行处理，提示Script error. console.log(msg); // 获取错误信息 console.log(url); // 获取出错的文件路径 console.log(line); // 获取错误出错的行数 }; setTimeout(function() { console.log(obj); // 可以被捕获到，并在onerror中处理 }, 200); try-catch运行时解决方案try{ // 单一作用域try...catch可以捕获错误信息并进行处理 console.log(obj); }catch(e){ console.log(e); //处理异常，ReferenceError: obj is not defined } try{ // 不同作用域不能捕获到错误信息 setTimeout(function() { console.log(obj); // 直接报错，不经过catch处理 }, 200); }catch(e){ console.log(e); } // 同一个作用域下能捕获到错误信息 setTimeout(function() { try{ // 当前作用域try...catch可以捕获错误信息并进行处理 console.log(obj); }catch(e){ console.log(e); //处理异常，ReferenceError: obj is not defined } }, 200); ES6 Class的异常捕获方案/** * 封装React方法的错误处理,改成使用入参的prototype中是否有render生命周期函数来判断 * @param {object} Component 传入组件 * @return {object} 返回包裹后的组件 */ function _defineReact(Component) { var proto = Component.prototype; var key; // 封装本身constructor中的构造方法，React组件编译为ES5后是一个构造函数，ES6下面为class if (_isTrueFunction(Component)) { Component = wrapFunction(Component); } var componnetKeys = Object.getOwnPropertyNames(proto); // 支持ES6类的属性方法错误捕获 for (var i = 0, len = componnetKeys.length; i < len; i++) { key = componnetKeys[i]; proto[key] = wrapFunction(proto[key]) } // 支持ES5下的属性方法错误捕获 for (key in proto) { if (typeof proto[key] === 'function') { proto[key] = wrapFunction(proto[key]); } } return Component; } /** * 判断是否为真实的函数，而不是class * @param {Function} fn [description] * @return {Boolean} [description] */ function _isTrueFunction(fn) { var isTrueFunction = false; try { isTrueFunction = fn.prototype.constructor.arguments === null; } catch (e) { isTrueFunction = false; } for (var key in fn.prototype) { return false; } return isTrueFunction; } class component extends React.Component { componentDidMount(){ var a = {}; console.log(a.b.c); } render() { return <div>hello world</div>; } } export default _defineReact(component); Promise内的错误捕获// 如果浏览支持Promise，捕获promise里面then的报错，因为promise里面的错误onerror和try-catch都无法捕获 if (Promise && Promise.prototype.then) { var promiseThen = Promise.prototype.then; Promise.prototype.then = function(resolve, reject) { return promiseThen.call(this, _wrapPromiseFunction(resolve), _wrapPromiseFunction(reject)); } } /** * 输入一个函数，将函数内代码包裹进try-catch执行，then的resolve、reject和普通函数不一样 * * @param {any} fn * @returns 一个新的函数 */ function _wrapPromiseFunction(fn) { // 如果fn是个函数，则直接放到try-catch中运行，否则要将类的方法包裹起来，promise中的fn要返回null，不能返回空函数 if (typeof fn !== 'function') { return null; } return function () { try { return fn.apply(this, arguments); } catch (e) { _errorProcess(e); throw e; } }; }

nodejs动态加载文件夹内模块 定义 ./modules/index.jsconst fs = require("fs"); const colors = require("colors"); module.exports = { controller: null, path: '', init: function(path, controller) { if (!controller) { console.error("参数controller未设置"); return false; } this.controller = controller; this.path = path ? path : this.path; this.listDir(this.path); }, listDir: function(dir) { var fileList = fs.readdirSync(dir, 'utf-8'); for (var i = 0; i < fileList.length; i++) { if (fileList[i] == 'index.js') continue; var stat = fs.lstatSync(dir + fileList[i]); if (stat.isDirectory()) { this.listDir(dir + fileList[i] + '/'); } else { this.loadRoute(dir + fileList[i]); } } }, loadRoute: function(routeFile) { let filename = routeFile.substring(routeFile.lastIndexOf('/') + 1); let current_filename = './' + filename.substring(0, filename.lastIndexOf('.')); require(current_filename)(this.controller); console.log(`module [${filename.substring(0, filename.lastIndexOf('.'))}] load success.`.green); }, }; 调用modules.init('./modules/', controller);

nodejs控制台彩色文字输出 console.log('\x1B[36m%s\x1B[0m', info); //cyanconsole.log('\x1B[33m%s\x1b[0m:', path); //yellow var styles = { 'bold' : ['\x1B[1m', '\x1B[22m'], 'italic' : ['\x1B[3m', '\x1B[23m'], 'underline' : ['\x1B[4m', '\x1B[24m'], 'inverse' : ['\x1B[7m', '\x1B[27m'], 'strikethrough' : ['\x1B[9m', '\x1B[29m'], 'white' : ['\x1B[37m', '\x1B[39m'], 'grey' : ['\x1B[90m', '\x1B[39m'], 'black' : ['\x1B[30m', '\x1B[39m'], 'blue' : ['\x1B[34m', '\x1B[39m'], 'cyan' : ['\x1B[36m', '\x1B[39m'], 'green' : ['\x1B[32m', '\x1B[39m'], 'magenta' : ['\x1B[35m', '\x1B[39m'], 'red' : ['\x1B[31m', '\x1B[39m'], 'yellow' : ['\x1B[33m', '\x1B[39m'], 'whiteBG' : ['\x1B[47m', '\x1B[49m'], 'greyBG' : ['\x1B[49;5;8m', '\x1B[49m'], 'blackBG' : ['\x1B[40m', '\x1B[49m'], 'blueBG' : ['\x1B[44m', '\x1B[49m'], 'cyanBG' : ['\x1B[46m', '\x1B[49m'], 'greenBG' : ['\x1B[42m', '\x1B[49m'], 'magentaBG' : ['\x1B[45m', '\x1B[49m'], 'redBG' : ['\x1B[41m', '\x1B[49m'], 'yellowBG' : ['\x1B[43m', '\x1B[49m'] };

鼠标高亮div边框并读取xpath 插入style节点方法function addCssByStyle(cssString) { var doc = document; var style = doc.createElement("style"); style.setAttribute("type", "text/css"); if (style.styleSheet) { // IE style.styleSheet.cssText = cssString; } else { // w3c var cssText = doc.createTextNode(cssString); style.appendChild(cssText); } var heads = doc.getElementsByTagName("head"); if (heads.length) heads[0].appendChild(style); else doc.documentElement.appendChild(style); } 插入节点addCssByStyle(".hover-red:hover {outline: 1px solid red;}") 读取xpath方法function readXPath(element) { if (element.id !== "") { //判断id属性，如果这个元素有id，则显 示//*[@id="xPath"] 形式内容 return '//*[@id=\"' + element.id + '\"]'; } //这里需要需要主要字符串转译问题，可参考js 动态生成html时字符串和变量转译（注意引号的作用） if (element == document.body) { //递归到body处，结束递归 return '/html/' + element.tagName.toLowerCase(); } var ix = 1, //在nodelist中的位置，且每次点击初始化 siblings = element.parentNode.childNodes; //同级的子元素 for (var i = 0, l = siblings.length; i < l; i++) { var sibling = siblings[i]; //如果这个元素是siblings数组中的元素，则执行递归操作 if (sibling == element) { return arguments.callee(element.parentNode) + '/' + element.tagName.toLowerCase() + '[' + (ix) + ']'; //如果不符合，判断是否是element元素，并且是否是相同元素，如果是相同的就开始累加 } else if (sibling.nodeType == 1 && sibling.tagName == element.tagName) { ix++; } } }; 鼠标事件$('*').mouseover(function(e) { $(this).addClass("hover-red"); e.stopPropagation(); alert(readXPath(this)); })

js权重计算代码 计算权重值// 设3个项目人数比例为 15：50：72 var nums = [15, 50, 72]; // 求最小项目组人数 var min = Math.min.apply(Math, nums); // 求权重 var weight = nums.map(function(n) { return min / n; }); 得到weight = [1, 0.3, 0.20833333333333334] A组一票权重为1，B组一票权重为0.3，C组一票权重为0.2083 代码/** * js数组实现权重概率分配，支持数字比模式(支持2位小数)和百分比模式(不支持小数，最后一个元素多退少补) * @param Array arr js数组，参数类型[Object,Object,Object……] * @return Array 返回一个随机元素，概率为其weight/所有weight之和，参数类型Object */ function weight_rand(arr){ //参数arr元素必须含有weight属性，参考如下所示 //var arr=[{name:'1',weight:1.5},{name:'2',weight:2.5},{name:'3',weight:3.5}]; //var arr=[{name:'1',weight:'15%'},{name:'2',weight:'25%'},{name:'3',weight:'35%'}]; //求出最大公约数以计算缩小倍数，perMode为百分比模式 var per; var maxNum = 0; var perMode = false; //自定义Math求最小公约数方法 Math.gcd = function(a,b){ var min = Math.min(a,b); var max = Math.max(a,b); var result = 1; if(a === 0 || b===0){ return max; } for(var i=min; i>=1; i--){ if(min % i === 0 && max % i === 0){ result = i; break; } } return result; }; //使用clone元素对象拷贝仍然会造成浪费，但是使用权重数组对应关系更省内存 var weight_arr = new Array(); for (i = 0; i < arr.length; i++) { if('undefined' != typeof(arr[i].weight)) { if(arr[i].weight.toString().indexOf('%') !== -1) { per = Math.floor(arr[i].weight.toString().replace('%','')); perMode = true; }else{ per = Math.floor(arr[i].weight*100); } }else{ per = 0; } weight_arr[i] = per; maxNum = Math.gcd(maxNum, per); } //数字比模式，3:5:7，其组成[0, 0, 0, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2] //百分比模式，元素所占百分比为15%，25%，35% var index = new Array(); var total = 0; var len = 0; if(perMode){ for (i = 0; i < arr.length; i++) { //len表示存储arr下标的数据块长度，已优化至最小整数形式减小索引数组的长度 len = weight_arr[i]; for (j = 0; j < len; j++){ //超过100%跳出，后面的舍弃 if(total >= 100){ break; } index.push(i); total++; } } //使用最后一个元素补齐100% while(total < 100){ index.push(arr.length-1); total++; } }else{ for (i = 0; i < arr.length; i++) { //len表示存储arr下标的数据块长度，已优化至最小整数形式减小索引数组的长度 len = weight_arr[i]/maxNum; for (j = 0; j < len; j++){ index.push(i); } total += len; } } //随机数值，其值为0-11的整数，数据块根据权重分块 var rand = Math.floor(Math.random()*total); //console.log(index); return arr[index[rand]]; } 测试var arr=[{name:'1',weight:1.5},{name:'2',weight:2.5},{name:'3',weight:3.5}]; console.log(weight_rand(arr)); var arr=[{name:'1',weight:'15%'},{name:'2',weight:'25%'},{name:'3',weight:'35%'}]; console.log(weight_rand(arr));

ES6:for-in和for-of for-in循环用来遍历对象属性。for-of循环用来遍历数据—例如数组中的值，它可以正确响应break、continue和return语句，同样支持String,Map和Set对象遍历。。

一个经典的JS事件监听触发，进程通信例子 master.jsvar childprocess = require('child_process'); var worker = childprocess.fork('./worker.js'); console.log('pid in master:', process.pid); //监听事件 worker.on('message', function(msg) { console.log('1:', msg); }) process.on('message', function(msg) { console.log('2:', msg); }) worker.send('---'); //触发事件 message process.emit('message', '------'); worker.jsconsole.log('pid in worker:', process.pid); process.on('message', function(msg) { console.log('3:', msg); }); process.send('==='); process.emit('message', '======'); result:$ node master.js pid in master: 22229 // 主进程创建后打印其 pid 2: ------ // 主进程收到给自己发的消息 pid in worker: 22230 // 子进程创建后打印其 pid 3: ====== // 子进程收到给自己发的消息 1: === // 主进程收到来自子进程的消息 3: --- // 子进程收到来自主进程的消息

JS差距时间代码 经常看到一些时间提示是 1小时前,2分钟前,3天前等等的差距时间，这些是怎么实现的呢？看下面的方法！代码实现function timeDifference(tmpTime) { var mm = 1000; var minute = mm * 60; var hour = minute * 60; var day = hour * 24; var month = day * 30; var ansTimeDifference = 0; var tmpTimeStamp = tmpTime ? Date.parse(tmpTime.replace(/-/gi, "/")) : new Date().getTime(); var nowTime = new Date().getTime(); var tmpTimeDifference = nowTime - tmpTimeStamp; if (tmpTimeDifference < 0) { console.warn("开始日期大于结束日期，计算失败！"); return 0; } var DifferebceMonth = tmpTimeDifference / month; var DifferebceWeek = tmpTimeDifference / (7 * day); var DifferebceDay = tmpTimeDifference / day; var DifferebceHour = tmpTimeDifference / hour; var DifferebceMinute = tmpTimeDifference / minute; if (DifferebceMonth >= 1) { return tmpTime; } else if (DifferebceWeek >= 1) { ansTimeDifference = parseInt(DifferebceWeek) + "个星期前"; } else if (DifferebceDay >= 1) { ansTimeDifference = parseInt(DifferebceDay) + "天前"; } else if (DifferebceHour >= 1) { ansTimeDifference = parseInt(DifferebceHour) + "个小时前"; } else if (DifferebceMinute >= 1) { ansTimeDifference = parseInt(DifferebceMinute) + "分钟前"; } else { ansTimeDifference = "刚刚"; } return ansTimeDifference; };

axios异步转同步请求模式 axios是一个优秀的http异步请求库，但是很多时候需要做一些同步请求，于是我封装了下同步的方法axiosPro 函数代码const axios = require('axios') function axiosPro(axiosArgs) { const { method, url, data, params, headers, responseType } = axiosArgs return new Promise(function (resolve, reject) { axios({ method: method, url: url, data: data, params: params, headers: headers, responseType: responseType }).then(function (ret) { resolve(ret); }).catch(function (err) { reject(err); }) }) }; 使用module.exports = async ctx => { const ret = await axiosPro(ctx.request.body) console.log(ret.data)//同步输出结果 ctx.body = ret.data }

JS函数节流（throttle）与函数去抖（debounce） 在浏览器中，往往由于事件频繁被触发，因而频繁执行DOM操作、资源加载等重行为，导致UI停顿甚至浏览器崩溃。相关事件如 resize , scroll , mousemove 等。在实际场景中，需求大多为停止改变大小n毫秒后执行后续处理或者是以一定的频率执行后续处理。针对这两种需求就出现了 debounce 和 throttle 两种解决办法。throttle 节流如果将水龙头拧紧直到水是以水滴的形式流出，那你会发现每隔一段时间，就会有一滴水流出。也就是会说预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。实现代码function(func, wait, options) { var timeout, context, args, result; var previous = 0; if (!options) options = {}; var later = function() { previous = options.leading === false ? 0 : new Date().getTime(); timeout = null; result = func.apply(context, args); if (!timeout) context = args = null; }; var throttled = function() { var now = new Date().getTime(); if (!previous && options.leading === false) previous = now; var remaining = wait - (now - previous); context = this; args = arguments; if (remaining <= 0 || remaining > wait) { if (timeout) { clearTimeout(timeout); timeout = null; } previous = now; result = func.apply(context, args); if (!timeout) context = args = null; } else if (!timeout && options.trailing !== false) { timeout = setTimeout(later, remaining); } return result; }; throttled.cancel = function() { clearTimeout(timeout); previous = 0; timeout = context = args = null; }; return throttled; } 使用代码tag.onmousemoveApplet = app.throttle(function() { console.log('1s内响应一次！'); }, 1000); debounce 去抖如果用手指一直按住一个弹簧，它将不会弹起直到你松手为止。也就是说当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。实现代码function(func, wait, immediate) { var timeout, result; var later = function(context, args) { timeout = null; if (args) result = func.apply(context, args); }; var debounced = restArgs(function(args) { if (timeout) clearTimeout(timeout); if (immediate) { var callNow = !timeout; timeout = setTimeout(later, wait); if (callNow) result = func.apply(this, args); } else { timeout = _.delay(later, wait, this, args); } return result; }); debounced.cancel = function() { clearTimeout(timeout); timeout = null; }; return debounced; } 使用代码tag.onmousemoveApplet = app.throttle(function() { console.log('停下1s后响应一次！'); }, 1000);

js多定时器方法封装 创建多个定时器(setInterval)，包含了开始、停止方法。var timer = { setTimeout: { start: function(_timerName, _func, _interval) { if (timer.setTimeout[_timerName]) { timer.setTimeout.stop(_timerName); } timer.setTimeout[_timerName] = setTimeout(_func, _interval || 1000); }, stop: function(_timerName) { clearTimeout(timer.setTimeout[_timerName]); timer.setTimeout[_timerName] = null; } }, setInterval: { start: function(_timerName, _func, _interval) { if (timer.setInterval[_timerName]) { timer.setInterval.stop(_timerName); } timer.setInterval[_timerName] = setInterval(_func, _interval || 1000); }, stop: function(_timerName) { clearInterval(timer.setInterval[_timerName]); timer.setInterval[_timerName] = null; } } }; 使用function recordStatus1() { console.log('recordStatus1'); } function recordStatus2() { console.log('recordStatus2'); } ------- 开始 ------ timer.setTimeout.start('RecordTimer1', recordStatus1,1000); timer.setInterval.start('RecordTimer2', recordStatus2,1000); ------- 停止 ------ timer.setTimeout.stop('RecordTimer1'); timer.setInterval.stop('RecordTimer2');

JS插件的几种写法 做JS插件非常考验自己对代码封装以及整体控制和编程思想的理解，下面我们看下JS插件的几种通用写法面向对象思想，类方式//自定义类 function plugin(){} //提供默认参数 plugin.prototype.str = "default param"; //提供方法(如果不传参,则使用默认参数) plugin.prototype.firstFunc = function(str = this.str){ alert(str); } //创建"对象" var p = new plugin(); //调用方法 p.firstFunc("Hello ! I am firstFunc");//Hello ! I am firstFunc p.firstFunc();//default param 闭包方式var plugin =(function(){ function _firstFunc(str){ alert(str); }; return{ firstFunc: _firstFunc, }; })(); 闭包方式2(function(){ //定义一些默认参数 var _options={ default_word:"default hello" } //定义一些api var _plugin_api = { function _config(opts) { if (!opts) return options; for (var key in opts) { options[key] = opts[key]; } return this; }, firstFunc:function(str = _options.default_word){ alert(str); return this;//返回当前方法 }, secondFunc:function(){ alert("secondFunc"); return this;//返回当前方法 } } //这里确定了插件的名称 this.CJPlugin = _plugin_api; })(); CJPlugin.firstFunc("hello");//hello CJPlugin.firstFunc();//default hello CJPlugin.secondFunc();//secondFunc 模块化; !function (factory) { "use strict"; if (typeof require === 'function' && typeof exports === 'object' && typeof module === 'object') { var target = module['exports'] || exports; factory(target); } else if (typeof define === 'function' && define['amd']) { define(['exports'], factory); } else { factory(window['myjssdk'] = {}); } }(function (HExports) { var exports = typeof HExports !== 'undefined' ? HExports : {}; exports.v = "2.0.0 alpha"; // 基础方法 exports.timeDifference = function (tmpTime) { var mm = 1000; var minute = mm * 60; var hour = minute * 60; var day = hour * 24; var month = day * 30; var ansTimeDifference = 0; var tmpTimeStamp = tmpTime ? Date.parse(tmpTime.replace(/-/gi, "/")) : new Date().getTime(); var nowTime = new Date().getTime(); var tmpTimeDifference = nowTime - tmpTimeStamp; if (tmpTimeDifference < 0) { console.warn("开始日期大于结束日期，计算失败！"); return 0; } var DifferebceMonth = tmpTimeDifference / month; var DifferebceWeek = tmpTimeDifference / (7 * day); var DifferebceDay = tmpTimeDifference / day; var DifferebceHour = tmpTimeDifference / hour; var DifferebceMinute = tmpTimeDifference / minute; if (DifferebceMonth >= 1) { return tmpTime; } else if (DifferebceWeek >= 1) { ansTimeDifference = parseInt(DifferebceWeek) + "个星期前"; } else if (DifferebceDay >= 1) { ansTimeDifference = parseInt(DifferebceDay) + "天前"; } else if (DifferebceHour >= 1) { ansTimeDifference = parseInt(DifferebceHour) + "个小时前"; } else if (DifferebceMinute >= 1) { ansTimeDifference = parseInt(DifferebceMinute) + "分钟前"; } else { ansTimeDifference = "刚刚"; } return ansTimeDifference; }; });