xiaobing_hope的专栏

当typescript编写代码时出现这个报错怎么办？例如如下代码及声明interface IJobData { generation?: {id: number; name: string; code: string;}[] publishing?: {id: number; name: string; code:string;}[]}const method = ['generation', 'publishing']const originJobData = { g

MutationObserver接口提供了监听对DOM树所做更改的能力。是DOM3 Events规范的一部分。构造函数MutationObserver()创建并返回一个新的MutationObserver，它会在指定DOM发生变化时被调用。方法disconnect()阻止MutationObserver实例继续接收通知，直到再次调用其observe()方法，该观察者对象包含的回调函数都不会被调用observe()配置MutationObserver在Dom更改匹配给定选项时，通过其回调函数

浏览器缓存是前端优化的一个重要手段，缓存可以带来很多好处：减少冗余数据传输，节省带宽减轻服务器的请求负担，有缓存就可以减少向服务器发送请求资源从缓存中读取，无需向服务器发送请求再等待返回，加快了客户端的访问速度但缓存带了了一个问题，就是如果文件更新了，但用户访问时浏览器读取的是缓存资源，则用户就获取不到最新的页面，影响用户使用。这种情况如何解决呢？浏览器缓存主要是指http缓存，其机制是根据http报文的缓存标识进行相应的操作。状态码含义200 from memory c

代码拆分和按需加载的设计决定着工程化构建的结果，将直接影响应用的性能表现，因为合理的加载时机和代码拆封能够使初始代码体积更小，页面加载更快。按需加载和按需打包区别按需加载表示代码模块在交互需要时，动态引入；而按需打包针对第三方依赖库，及业务模块，只打包真正在运行时可能会需要的代码。按需打包的方式使用ES Module支持的Tree Shaking方案，在使用构建工具打包时，完成按需打包使用以babel-plugin-import为主的Babel插件，实现自动按需打包Tree Shaking实

第三方库的常见使用方式主要分为：script标签直接引入npm包引入（npm install 方式）其中npm库的形式又分为：有typescript版本的库，即声明文件和源码放在一起，则不需任何配置，直接使用源码中无声明文件，但@types里有对应的声明文件，可直接安装使用，不需自己手动写声明文件（npm install @types/jQuery）更推荐的是使用 @types 统一管理第三方库的声明文件。@types 的使用方式很简单，直接用 npm 安装对应的声明模块即可，以 jQ

声明语法declare var声明全局变量declare function声明全局方法declare class声明全局类declare enum声明全局枚举类型declare namespace声明全局对象interface和type声明全局类型export导出变量export namespace导出（含子属性的）对象export defaultES6 默认导出export =commonjs 导出模块export as namespaceUMD 库声明全局变量declare g

浏览器原生支持base64编解码在之前的开发过程中，遇到base64的编解码，习惯性的去寻找了开源的base64编解码库，如base64.js使用方式很简单，一般开源的库都会提供对应的使用文档今天才突然发现，原来浏览器原生支持base64编解码，引入外部依赖库，简直是多次一举！！atob和btoa实际上，从IE10+浏览器开始，所有浏览器就原生提供了Base64编码解码方法，不仅可以用于浏览器环境，Service Worker环境也可以使用。方法名就是atob和btoa，具体语法如下：Bas

js中数据类型分为两大类，基础类型和引用数据类型，主要有：基本数据类型NumberStringBooleanNullUndefinedSymbol复杂数据类型ArrayFunctionObject检测js中的数据类型常用的方法有：typeofinstanceofObject.prototype.toString对比一下这三种方法的优缺点：typeof方...

看如下代码：var bar = { myName: 'time.geekbang.com', printName: function() { console.log(myName) }}function foo () { let myName: 'geek' return bar.printName}let myName = 'g...

背景：业务上有这样一个需求：一个列表数据，通过条件查询筛选出目标列表数据，然后将这些目标列表数据导出到本地后端提供了一个post的异步请求接口，并返回了文件（此处后端逻辑应该是接收到查询条件，去数据库中筛选目标数据，并生成一个excel表格，返回给前端）axios发送异步post请求常见方式：axios.request({ url: '/***/getFile', method: ...

理解事件流及事件对象事件流：描述的是从页面中接收事件的顺序，包括事件冒泡流和事件捕获流。       现在大部分浏览器都使用的事件冒泡流。1. HTML事件处理程序在html代码中直接镶嵌js代码，实现事件处理程序。 2. DOM0级事件处理程序先把元素取出来，然后单独在js块中以添加属性的形式添加事件（最为常用）。 3. DOM2级事件处理程序（I

将图片转为base64编码格式function convertImgToBase64(url, callback, outputFormat){ var canvas = document.createElement('CANVAS'), ctx = canvas.getContext('2d'), img = new Image(); img.crossOrigin = '

typescript声明变量类型 // 字符串类型声明var myname: string = 'chris';// 将myname声明为string类型myname = '123'; // 会提示myname为string类型，不能将数字赋给myname// 但是这种报错提示，并不会在编译后的js代码中报错，因为es5没有类型检测var age: number = 13; //

类class Person { name; eat() { console.log('im eating'); }}var p1 = new Person(); // 类的实例化p1.name = 'batman';p1.eat(); // im eating访问控制符： - public(默认): public的属性和方法在类的内部和外部都

本文来自：高爽|Coder，原文地址：http://blog.youkuaiyun.com/ghsau/article/details/17027893，转载请注明。 XSS又称CSS，全称Cross SiteScript，跨站脚本攻击，是Web程序中常见的漏洞，XSS属于被动式且用于客户端的攻击方式，所以容易被忽略其危害性。其原理是攻击者向有XSS漏洞的网站中输入(传入)恶意的HTML代码，当其它用户...

vue.js的双向数据绑定就是通过Object.defineProperty方法实现的，俗称属性拦截器。Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象。“`// 语法:/* * @param: obj:需要定义属性的对象; * prop:需要定义或修改的属性； * ...

数组去重 var arr = [1, 43, 4, 3, 2, 4, 3]; // 去重后 arr = [1, 43, 4, 3, 2]传统方法，for循环实现function dedupe(arr) { var rets = []; for (var i = 0; i < arr.length; i ++) { if (!...

实现链式调用实现 add函数，add(1)(2)(3)(4)输出10，然后考虑拓展性// 解析为add(1)返回函数A，A(2)返回函数B, B(3)返回函数Cfunction add(num) { var sum = 0; sum += num; return function(a) { sum += a; return functi...

数组作为js常用的数据结构，存取元素都非常的方便，但是其内部的实现原理跟其他计算机语言对数组的实现都是一样的。由于数组在内存中的存储是连续的，所以当在数组的开头或者中间插入元素时，内部都需要去移动其他元素的位置，这个移动其他元素的成本很高。而链表存储有序的元素集合，但不同于数组，链表中的元素在内存中的存放并不是连续的，每个元素有一个存储元素自身的节点和一个指向下一个元素引用（也称为指针）的...

Url的编码格式采用的是ASCII码，而不是Unicode，也就是说你不能在Url中包含任何非ASCII字符，例如中文，如若包含特殊字符，都需要进行url编码，否则会导致服务器识别错误。URl 中只允许包含英文字符（a-zA-Z）、数字（0-9）、-_.~4 个特殊字符及所有保留字符保留字符 - URL编码值空格 - %20" - %2...

数据类型ECMAScript标准规定了7中数据类型，这7种数据类型又分为两大类原始类型对象类型原始类型：NullUndefinedNumberStringBooleanSymbol： 一种实例是唯一且不可改变的数据类型对象类型：Object： 包含常用的Array、Function、Object变量的存储在javascript中，每个变量在内存中都需要一些...

大写字母A-Z对应的ASCII码值是65-90 小写字母a-z对应的ASCII码值是97-122将字母转为ascii嘛的方法：var str = "A";str.charCodeAt(); // 65var str1 = 'a';str1.charCodeAt(); // 97将ascii码转为对应字母的方法：var num = 97;String.from...

在工作过程中，经常会遇到按需加载的需求，即在脚本加载完成后，返回一个回调函数，在回调函数中进行相关操作，那如何去判断脚本是否加载完成了呢？可以对加载的js对象使用onload来判断，jsDom.onload // ie6、7不支持js.onload方法，使用js.onreadystatechange来解决 js.onreadystatechange来跟踪每个状态的变化（loading、load

js中，经常需要对数组进行遍历操作，对数组进行遍历操作可以使用Array提供的forEach方法和map方法那两者在使用上有啥区别呢？分别在什么情况下使用呢？forEach()方法对数组的每一个元素都执行一次提供的函数let a = ['a', 'b', 'c'];a.forEach((item) => { console.log(item);});// a// b// c语法： a

移动端html5开发关于用js检测用户设备检测移动设备通过用户代理，检测浏览网页设备为android，iphone，ipad等：用户代理中包含设备的型号，如android，iphone，ipad等用正则去匹配UA，得到设备型号var UA = window.navigator.userAgent, isAndorid = /android/i.test(UA),

关于去掉两头空格，jquery库提供了$.trim()方法，可是JS呢，我写了.trim()，在FF里有效果，但在IE里就没效了。原因：如果浏览器实现了trim()，就有，如果浏览器没实现，只能用正则替换。function trimStr(str){return str.replace(/(^\s*)|(\s*$)/g,"");}用的时候就是直接              

html、js实现facebook、twitter分享分享到facebook:href="http://www.facebook.com/share.php?u=" onclick="fbs_share" target="_blank">class="facebook">分享到twitter：href="javascript:void(window.open('ht

多重视图和路由1.     布局模板要创建一个布局模板，需要修改HTML以告诉AngularJs将模板渲染到何处，通过将ng-view 指令和路由组合到一起，我们可以精确的指定当前路由所对应的模板在DOM中的渲染位置。    headerclass="content">    ng-view>    footerng-view 是由ngRoute模块提供

阻止文档默认点击右键选中功能及获取鼠标按键等1. 阻止文档默认“点击右键出现默认弹窗”功能document.oncontextmenu = function(){return false;}2. 获取鼠标按键$(document).mousedown(function(e){var keyNum = e.which;//keyNum == 1 表示鼠标按下的键为鼠标左键

Velocity.js实现动画序列的三种方法velocity.js该插件兼容IE8和Android 2.3（兼容性非常好）用velocity.js插件实现动画序列所需要用到的js库有：jquery.js 、  velocity.min.js 、 velocity.ui.min.js在利用velocity.js插件制作动画序列时，需要同时引入这三个库文件。

建立模式对话框显示提示文档1. 显示弹出窗口方法一：              模式对话框：a1窗口弹出对话框a2之后，若没有关闭a2窗口，则a1窗口不能获取焦点                                window.showModalDialog(sURL,vArugment,sFeature);                             

js关闭当前页面/窗口（兼容浏览器问题）在js中window.close()函数是关闭当前页面的函数，但是要做到兼容所有浏览器实现关闭当前窗口并不是直接使用window.close()函数就可以解决。Window自带的关闭当前窗口的方法：window.close()一般情况下，直接使用在ie中它会出现一个提示：“您查看的网页正在试图关闭窗口。是否关闭窗口？”，如何才能不弹出

Javascript函数的调用及事件1. 函数在标签中调用2. 函数的参数           demo(arg1,arg2){...};          参数传递时，其顺序必须是一致的3. 返回值：（将函数的值返回给调用它的地方）               通过return语句实现。          注：使用return语句时，函数会停止执行，同时返回值4.

使用FormData对象      利用FormData对象，可以使用一系列的键值对来模拟一个完整的表单，然后使用XMLHttpRequest对象来发送这个“表单”。创建一个FormData对象    我们可以先创建一个空的FormData对象,然后使用append()方法向该对象里添加字段,如下:var formdata = new FormData(); form

e.stopPropagation()阻止事件冒泡border='1'> 冒泡事件测试 冒泡事件测试2 我们先看这段js代码： $('table').on('click', function (e) { alert('table alert!'); }); $('tr').on(

RegExp对象RegExp对象表示正则表达式，在编程过程中经常遇到。 /pattern/attributes // 直接量语法new RegExp(pattern,attributes); // 创建RegExp对象的语法参数说明： pattern：是一个字符串，指定正则表达式的模式或其他正则表达式 attributes：是一个可选的字符串，g(全局匹配)、i

最常见的对数组进行排序，可以用sort()方法，按照数组中元素的首字母或者数字大小进行排序var arr = [2,5,13,7,4,9,1];var arr1 = arr.sort();console.log(arr); // [1, 13, 2, 4, 5, 7, 9]console.log(arr1); // [1, 13, 2, 4, 5, 7, 9]sort()方法会改变原来的

数据类型：Javascript中有5种基本数据类型（简单数据类型），分别为：Undefined, Null, Boolean, Number和String； 同时还含有一种复杂数据类型，即对象（虽然js中一切皆为对象）其中Undefined和Null的区别为： Undefined: 其实是已申明，但是并未赋值的变量，输出的结构就是undefined Null：是一个不存在的对象的结果例如

最近也一直会用JavaScript，然后中间使用的一些组件，如Echarts 会有非常复杂的配置文件，而大部分配置可能都是一样的，所以想着写一份通用配置，然后，其他地方需要使用的时候，用这份配置深拷贝一份配置，然后在上面继续改。就如下：const defaultOpt = { key1: xxx, key2: { dd: ee }, .....

String对象有哪些方法？ String对象的属性有： (1) length (返回字符串的字符长度) (2) prototype (3) constructor String对象的方法： charAt(); charCodeAt(); indexOf(); match(); replace(); search(); slice(); toUpp