javascript笔记

 

  • 字符串:字符串内容不可变,多行字符串(反引号`)、模板字符串($(variable));方法返回一个新字符串toUpperCase()、toLowerCase()、indexOf()、substring(start, end);
  • 数组:长度可以通过arr.length改变;方法有indexOf()、slice()(与String的substring方法不同,该方法可以不传入参数,表示数组的复制,而str.substring()会报错)、push()和pop()(pop为空时返回undefined)、shift()和unshift()(头部删除/添加)、sort()、reverse()、splice()(splice(index, num, ' elements to be added')删除index开始的num个数,然后添加若干元素)、concat()(arr.concat()返回一个新数组,不改变arr)、join()(使用指定字符连接数组的每个元素,不影响arr);
  • 对象:无序键值对,j键必须为字符串,动态增删属性;方法有判断属性是否存在的in方法、hasOwnProperty()方法及两者区别;
  • Map和Set:解决JS对象缺陷(key必须为字符串),Map以多维数组形式传递键值对,如var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);具有get()/set()/has()/delete()方法;Set只保存key,如var s2 = new Set([1, 2, 3]);具有add(key)、delete(key)方法
  • 具有iterable类型的集合,包括Array,Map,Set,可以使用for...of...遍历,具有内置的forEach()方法;
  • iterable内置的forEach()方法:arr.forEach(function(element,index,array){//element指向当前元素的值 //index指向当前索引  //指向Array对象本身});set.forEach(function(element,sameElement,set){}) ;m.forEach(function (value, key, map) {})
  • 函数内部关键字arguments,它只在函数内部起作用,并且永远指向当前函数的调用者传入的所有参数,arguments类似于array但不是array,它可以获取所有参数及长度;rest参数用于接收剩余的多个参数,以便于创建多个函数参数的函数,并便于参数传递;
  • javascript函数作用域:变量提升(函数定义会把所有变量申明‘提升’到函数顶部,但是并不会提升其赋值)
  • 名字空间:可以自己定义一个全局变量中(名字空间),然后把所有的变量和函数都绑定到这个全局变量中,解决命名冲突问题;变量作用域在函数内部,ES6中引入了let关键字代替var申明一个块级作用域的变量,比如在for循环中。
  • ES6标准引入项:ES6引入关键字const、let、;
  • 函数的apply()和call()方法类似,第一个参数都是需要绑定的this变量,区别是参数传递的方式不一样:apply是把函数参数打包为Array再传递,call()是将函数参数按顺序传递;eg:比如调用Math.max(3, 5, 4),分别用apply()和call()实现如下Math.max.apply(null,[3,5,4])、Math.max.call(null,3,5,4),普通函数调用通常把this绑定为null;bind()函数可以传入多个参数,而且可以在调用的时候添加参数(bind与currying),其返回值不会直接打印。bind与new:使用new时,function如果return的不是对象,那么会忽略return并return this指针。
    function foo(){
        this.b = 100;
        return this.a;
    }
    
    var func = foo.bind({a:1});
    
    func(); //1
    new func(); //{b:100}
  • Array的高阶函数map()和reduce()方法:map()方法传入参数时一个函数名,该函数分别作用于数组的每个元素,比如arr.map(pow);reduce()方法也传递一个函数名,该函数必须接受两个参数,reduce()结果继续和序列的下一个元素做累计计算;filter()与map()类似,其回调函数可以接受3个参数,分别是element/index/arr(数组本身);sort()的默认排序规则是把元素都转为字符串后再进行排序的;
  • ['1', '2', '3'].map(parseInt); // While one could expect [1, 2, 3] // The actual result is [1, NaN, NaN],原因是:map通常会接受两个参数,第一个是表达式,第二个是基数;该例子可以通过arr.map(Number)实现
  • 字符串:字符串内容不可变,多行字符串(反引号`)、模板字符串($(variable));方法返回一个新字符串toUpperCase()、toLowerCase()、indexOf()、substring(start, end);
  • 数组:长度可以通过arr.length改变;方法有indexOf()、slice()(与String的substring方法不同,该方法可以不传入参数,表示数组的复制,而str.substring()会报错)、push()和pop()(pop为空时返回undefined)、shift()和unshift()(头部删除/添加)、sort()、reverse()、splice()(splice(index, num, ' elements to be added')删除index开始的num个数,然后添加若干元素)、concat()(arr.concat()返回一个新数组,不改变arr)、join()(使用指定字符连接数组的每个元素,不影响arr);
  • 对象:无序键值对,j键必须为字符串,动态增删属性;方法有判断属性是否存在的in方法、hasOwnProperty()方法及两者区别;
  • Map和Set:解决JS对象缺陷(key必须为字符串),Map以多维数组形式传递键值对,如var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);具有get()/set()/has()/delete()方法;Set只保存key,如var s2 = new Set([1, 2, 3]);具有add(key)、delete(key)方法
  • 具有iterable类型的集合,包括Array,Map,Set,可以使用for...of...遍历,具有内置的forEach()方法;
  • iterable内置的forEach()方法:arr.forEach(function(element,index,array){//element指向当前元素的值 //index指向当前索引  //指向Array对象本身});set.forEach(function(element,sameElement,set){}) ;m.forEach(function (value, key, map) {})
  • 函数内部关键字arguments,它只在函数内部起作用,并且永远指向当前函数的调用者传入的所有参数,arguments类似于array但不是array,它可以获取所有参数及长度;rest参数用于接收剩余的多个参数,以便于创建多个函数参数的函数,并便于参数传递;
  • javascript函数作用域:变量提升(函数定义会把所有变量申明‘提升’到函数顶部,但是并不会提升其赋值)
  • 名字空间:可以自己定义一个全局变量中(名字空间),然后把所有的变量和函数都绑定到这个全局变量中,解决命名冲突问题;变量作用域在函数内部,ES6中引入了let关键字代替var申明一个块级作用域的变量,比如在for循环中。
  • ES6标准引入项:ES6引入关键字const、let、箭头函数、generator、class关键字;
  • 函数的apply()和call()方法类似,第一个参数都是需要绑定的this变量,区别是参数传递的方式不一样:apply是把函数参数打包为Array再传递,call()是将函数参数按顺序传递;eg:比如调用Math.max(3, 5, 4),分别用apply()和call()实现如下Math.max.apply(null,[3,5,4])、Math.max.call(null,3,5,4),普通函数调用通常把this绑定为null;ES6新增let和const两个变量声明命令,具有共同点:块级作用域;不存在变量提升,必须声明后才可以使用;相同作用域范围内不允许重复声明;二者也有一些区别:const声明的变量为简单的变量时,不可以改变其值;但如果是复合型的变量,则只能保证变量地址不变,内容可以改变;
  • Array的map()和reduce()方法:map()方法传入参数时一个函数名,该函数分别作用于数组的每个元素,比如arr.map(pow);reduce()方法也传递一个函数名,该函数必须接受两个参数,reduce()结果继续和序列的下一个元素做累计计算;
  • ['1', '2', '3'].map(parseInt); // While one could expect [1, 2, 3] // The actual result is [1, NaN, NaN],原因是:map通常会接受两个参数,第一个是表达式,第二个是基数;该例子可以通过arr.map(Number)实现
  • 全局、函数、eval作用域与执行上下文(是一个栈类型结构):变量对象VO(保存变量、函数申明、函数形参),VO填充顺序:函数参数、函数声明(命名冲突会覆盖)、变量声明(命名冲突会忽略),函数表达式不会计入VO;激活函数AO,
  • 闭包:定义是函数可以使用函数之外定义的变量;返回闭包时牢记的一点就是:返回函数不要引用任何循环变量,或者后续会发生变化的变量,可以使用立即执行函数!function(i){}(i);。
  • this指针:情况1:如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window,这里需要说明的是在js的严格版中this指向的不是window,但是我们这里不探讨严格版的问题,你想了解可以自行上网查找。    情况2:如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象。    情况3:如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象;需要注意的是,this指针一定是在函数执行时才能确定的。
  • null 和undefined没有toString()方法,数字直接调用toString()方法可以用123..toString()或者(123).toString()
  • RegExp:re.test()和re.split()/re.exec()(分组,执行成功会返回一个array,其第一个元素是整个字符串,后边的元素是匹配成功的子串),贪婪匹配(?)和全局搜索(g,i,m)
  • JSON中字符串及键值必须用双引号,编码格式必为utf-8,定义de数据类型包括number/string/boolean/null/array/object(注意与JS的区别),序列化(JSON.stringify(obj))和反序列化(JSON.parse()),stringify(obj,selector,' ')可以输出一个更好看的object,第二个参数可以进行传入字符串数组键值筛选或者传入一个键值处理函数;toJSON()函数控制返回JSON序列化的数据
  • __proto__、prototype、constructor属性:对象分为普通对象和函数对象,函数对象具有prototype属性,代表了函数原型(Function.prototype是一个对象,具有__proto__和constructor属性,constructor指向构造函数本身,__proto__指向对应的原型对象)而普通函数没有该属性;每个对象都有__proto__属性;原型链是基于__proto__才得以实现的;区分__proto__和prototype的关键是分清原型对象和对象的原型
    var a ={x:1,y:2};
    var b = function(){var z=3;return z;}
    var c = new b();
    console.log(b.prototype); //Object{...}
    c.constructor === b;  //true
    c.__proto__ === b.prototype;  //true
    b.__proto__ === Function.prototype   //true
    b.prototype.__proto__ === Object.prototype
    <span style="color:#222222">Object.prototype.__proto__ === null  //true</span>
    
    
    <span style="color:#222222">Function.prototype === Object.__proto__  //true
    </span>
    <span style="color:#222222">Function.__proto__===Object.__proto__  	//true
    </span>
    <span style="color:#222222">Array.prototype===Object.__proto__	//false</span>
    
    
    <span style="color:#222222">Array.__proto__===Object.__proto__	//true
    </span>
    typeof Object  //function
    
    
    
    typeof Function //function
     
    typeof Object.prototype  //object
    typeof Function.prototype //function
  • prototype属性:每个函数都包含一个prototype属性,该属性指向一个对象的引用,这个对象称作“原型对象”;通过对象直接量或者Object.create()创建的对象包含constructor属性,该属性指代Object()构造函数;
  • 对象的三种属性:prototype属性、class属性、可扩展性;
  • 面向对象:(创建对象、原型继承、class继承)创建对象:构造函数、constructor属性(指向构造函数本身)、;class继承通过extends关键字实现,使用super关键字调用父类的构造方法(eg:直接用super(name)),由于不是主流的浏览器都支持class,因此如果要使用class,需要使用Babel工具将class代码转为prototype代码
  • 类型检测:typeof/ instanceof/ Object.prototype.toString / constructor / duck type;typeof适合函数对象和基本类型的判断;obj instanceof Object判断左操作数(对象)的原型链上是否有右边构造函数的prototype属性;Object.prototype.toString.apply([])/Object.prototype.toString.apply(Number)//[object Function]
  • 严格模式:修复部分语言上的不足,提供更强的错误检查,并增强安全性;严格模式下,不允许使用with,不允许未申明的变量(ReferenceError),arguments变为参数的静态副本(但参数为对象时仍然可以赋值改变),delete参数/函数名会报错,delete不可配置的属性报错,对象字面量重复属性名报错,禁止八进制字面量,eval/arguments变为关键字不能作为函数名或关键字,evaluate独立作用域,一般函数调用时this指向null而不是全局对象,使用apply/call传入null或者undefined时this指向null或undefined而不是全局对象,arguments.caller和arguments.callee被禁用;
  • 对象标签:extensible/__proto__/class,Object.isExtensible(obj), Object.preventExtensions(obj), Object.getOwnPropertyDescriptor(obj, 'attri'), Object.defineProperty(obj,'attri',{writable:true, value: 2}, Object.seal(obj)(防止extension的同时修改configurable为false),Object.isSealed(obj), Object.freeze(obj)(所有属性标签变为false), Object.isFrozen(obj),
  • 对象序列化:JSON.stringify(obj), 可以使用toJSON返回特定的JSON对象,JSON.parse(obj),
  • 浏览器对象:window、navigator、screen(width、height、colorDepth)、location(当前页面的URL信息,包含protocol、host、port、path、search、hash属性,location.assign()加载新页面,location.reload()重新加载)、document(与DOM相关,表示当前页面,document.getElementById, document.getElementsByTagName,  document.getElementsByClassName, document.cookie)、history(包括back()和forward()方法)
  • Array.from():将NodeList转换为Array,将arguments转换为array,将String转换为array(类似于arr.split(','))
  • HTML5控件:date/ datetime/ datetime-local/ color/email/url/range/number/search/input标签的placehoder属性和pattern属性/
  • HTML5新特性:CORS(Cross-Origin Resource Sharing),
  • HTML中被废弃的标签:<acronym> <applet> <basefont> <big> <center> <dir> <font> <noframes> <tt> <u>
  • CSS3模块:选择器、框模型、背景和边框、文本效果、2D/3D转换、过渡、动画、多列布局、用户界面;transform属性方法:scale()/ translate()/ rotate() / skew()/ matrix()(共有6个参数:);transition:prop time(动画过渡);动画:@keyframes规则及animation属性;多行布局:column-count、column-gap、column-rule;
  • OOP: 模拟重载、链式调用、抽象类、模块化
  • AJAX:  XMLHttpRequest、浏览器同源策略(出于安全考虑;AJAX发送JS请求时的URL必须与当前页面完全一致,即协议/域名/端口号均一致),如果请求外域的URL,可以使用以下方法:1.使用Flash插件发送HTTP请求,可以绕过浏览器安全限制;2.同源域名下架设一个代理服务器转发请求并接收结果;3.使用JSONP(JSON with Padding,它只能使用GET请求,该方式跨域实际上是利用了浏览器允许跨域引用JavaScript资源;)
    var request;
    if (window.XMLHttpRequest) {
        request = new XMLHttpRequest();
    } else { //IE浏览器兼容性
        request = new ActiveXObject('Microsoft.XMLHTTP');
    }
    if (window.XMLHttpRequest) {
        request = new XMLHttpRequest();
    } else { //IE浏览器兼容性
        request = new ActiveXObject('Microsoft.XMLHTTP');
    }
  • Promise:promise优势在于在异步执行的流程中,把执行代码和结果处理的代码进行分离,执行若干异步任务promise_obj.then(obj2).then(obj3).catch(),并行执行异步任务Promise.all([obj1,obj2].then()),Promise.rice([obj1,obj2].then())容错POST的Content-Type:共三种模式,分别为apllication/x-www-form-urlencoded 、multipart/form-data、text/plain;
  • jQuery:noConflict()方法可以让变量$让出对jQuery的控制权,此时$为undefined;层级选择器:find()和filter()、parent()/ next() /prev()/ map()(把一个jQuery对象包含的若干DOM节点转化为其他对象)/ first()/ last()/ slice();操作DOM:text()、 html()、attr()/removeAttr()、prop()、is()、append();after()、before()添加DOM,操作表单的val()获取和设置;事件绑定on()和off()、$(document).ready()简化$(function(){});
  • underscore库:完整的函数式编程库;Collections集合类,包括Array和Object:map()/filter()、every()/some()、max()/min()(集合为对象时只作用于value)、groupBy()把集合的元素按照key进行分类,key由传入的参数返回、shuffle()用洗牌算法打乱集合、sample()随机选择一个或多个元素;Arrays:first()、last()、flatten()将数组展开为一维、zip()/unzip()把两个或多个数组按照索引对齐并合并、object()与zip()类似,但返回值为对象、range(start,end,step)生成序列;Functions:
  • HTTP请求的三种方法:GET、POST、HEAD;GET请求指定的页面信息,并返回实体主体;POST常用于表单提交,请求服务器接受所指定的文档作为所标识的URI的新的从属实体;HEAD方法只请求页面的首部,不请求Body部分,用于获取资源的基本信息,即检查链接的可访问性及资源是否修改;GET请求适用于大多数请求,而POST仅用于更新站点;GET方法是安全且幂等的;GET请求请提交的数据放置在HTTP请求协议头中,而POST提交的数据则放在实体数据中;GET方式提交的数据最多只能有2048字节,而POST则没有此限制;
  • 主流浏览器的内核:IE -- Trident;Firefox -- Gecko;Opera -- Presto;Chrome/Safari -- Webkit;
  • Node.js:使用严格模式;node中每个js文件就是一个模块,模块化的好处:提高了代码的可维护性,提高了代码利用率;有效避免命名冲突;模块加载机制:自定义模块如果只写模块名,那么Node将先后在内置模块/全局模块和当前模块下查找,这种机制成为commonJS规范;Node利用了JS的函数式编程实现了模块的隔离,避免了命名冲突,同时使用闭包特性实现模块的输出;内置模块:fs/stream/ http/ crypto
  • HTTP协议:HTTP 1.1是HTTP协议的1.1版本,其特点是允许多个HTTP请求复用一个TCP连接;HTTP请求和响应遵循相同的格式,分为Header和body(body可选)两部分;一个HTTP请求只处理一个资源;HTTP协议具有极强的扩展性,一个请求页面中可以链入其他服务器的资源,这样可以将请求压力分散到各个服务器,并且一个站点可以链接到其他站点,形成所谓的World Wide Web(www)。
  • koa middleware: 每收到一个http请求,koa就会调用通过app.use()注册的async函数,并传入ctx和next参数。每个async函数称为一个中间件;koa把许多async函数连成一个处理链,然后让await next()调用下一个async函数;koa文件就是多个middleware组合起来可以完成很多功能,中间体都要绑定到app(koa = require('koa');app=new koa())但是middleware的顺序很重要;如何前一个async函数没有调用await next(),那么接下来的所有middleware都不会被执行;注意ctx对象封装了request和response对象,需要注意其简写形式:ctx.ur 相当于ctx.request.url,其他的还有一些;自带的koa-router中间件进行URL处理;如下,通过引入koa-router模块并实例化一个对象, 使用其get方法处理不同的URL请求;由于node.js自身的request对象不能提供解析request的body的功能,即不能直接处理post请求,因此需要引入另一个koa-bodyparser的middleware;需要注意的是,由于middleware的顺序很重要,这个koa-bodyparser必须在router之前被注册到app对象上。解析POST请求表单中的用户输入时,可以使用ctx.request.body.name 获得,其中name是input中name属性的值
    app.use(async (ctx, next) => {
        await next();
        ctx.response.type = 'text/html';
        ctx.response.body = '<h1>Hello, koa2!</h1>';
    });
  •  
      
    const  router  =  require( 'koa-router')();
    router. get( '/hello/:name'async ( ctxnext=>{
         var  name   =  ctx. params. name;
         ctx. response. type  =  'txt/html';
         ctx. response. body  =  `<h1>Hello, ${ name }</h1>`;
    });
  • 轮询是指浏览器通过JavaScript启动一个定时器,然后以固定的间隔给服务器发请求,询问服务器有没有新消息。这个机制的缺点一是实时性不够,二是频繁的请求会给服务器带来极大的压力。
    
  • WebSocket是HTML5新增的协议,它的目的是在浏览器和服务器之间建立一个不受限的双向通信的通道,比如说,服务器可以在任意时刻发送消息给浏览器
    
  • MySQL数据库,是一种关系型数据库,使用SQL语句;
  • XHTML与HTML的区别:XHTML是对XML的规则进行扩展得到的,XHTML 是以 XML 应用的方式定义的 HTML,是为了实现HTML到XML的过渡而产生的,是一种置标语言(标记语言);相比HTML,其语言更加严谨更加纯净;区别:文档结构(XHTML DOCTYPE是强制的、)、元素语法(XHTML元素必须正确嵌套、必须关闭、必须小写、必须有一个根元素)、属性语法(属性必须小写、必须用引号、属性最小化是禁止的)的差异;
  • HTML行内标签和块级标签:行内标签(input\ select\ a\ span\ img\ label\ textarea\),块级标签(div\ form\ h1\ h2\ hr\ p\ ol\ ul\ li\ dt\ dd)
  • HTML语义化:语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解. 语义化的(X)HTML文档有助于提升你的网站对访客的易用性,对于搜索引擎或者爬虫软件来说,则有助于它们建立索引,并可能给予一个较高的权值。语义化的目的:在无CSS情况下仍然可以很好地呈现内容结构和代码结构,增强可读性;提高用户体验(title、alt等);有利于SEO;方便其他设备解析;便于团队开发和维护;实现HTML语义化的代码要求:少用无意义的div/ span;可以选择使用p时不要用div;可以使用CSS代替的不要用纯样式标签;为每个input设置label;
  • CSS中的link和@import的区别:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务,而@import属于CSS范畴,只能加载CSS;link引用CSS时,在页面载入时同时加载,而@import需要页面网页完全载入以后加载;link是XHTML标签,无兼容问题,而@import是在CSS2.1提出的,低版本的浏览器不支持;link支持使用Javascript控制DOM去改变样式,而@import不支持;
  • 清除浮动的几种方式:1.在具有浮动的标签后添加空标签并应用clear:both清除浮动(理论上可以清除任何标签,但是增加了无意义的标签);2.给父级元素添加overflow:auto(hidden也可以)属性,如.over-flow{     overflow: auto; //也可以设置hidden     zoom: 1; //zoom: 1; 处理兼容性问题 };3.after方法,作用于浮动元素的父级元素,设置parent:after{height: 0;visibility:hidden;};兄弟标签清除浮动时只需加入clear:both就可以实现
    .outer {zoom:1;}    /*==for IE6/7 Maxthon2==*/ .outer :after {clear:both;content:'';display:block;width: 0;height: 0;visibility:hidden;}   /*==for FF/chrome/opera/IE8==*/
  •  
  • AJAX请求中解析JSON数据的两种方法:第一种是使用eval()函数;第二种是使用JSON.parse()函数;鉴于安全性的考虑,推荐使用parse();eval()方法解析的时候不会去判断字符串是否合法,并且json对象中的js方法也会被执行,引起安全问题;
  • 如何对网站的文件和资源进行优化:文件合并、文件最小化/文件压缩、使用CDN托管、缓存的使用;
  • 加快网页加载速度的方式:减少HTTP请求;优化CSS文件;合适的图片格式(GIF);减少DNS查找;使用外链接;避免重定向;
  • CDN的全称是Content Delivery Network,即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络,CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度。
    
  • 浏览器事件模型:原始事件模型、DOM 2事件模型、IE事件模型;事件顺序有两种,包括事件捕获和事件冒泡。DOM标准同时支持以上两种事件模型;DOM标准事件模型最独特的性质是文本节点也会出发事件(IE不会)。时间转送的三个阶段:Phase-Capturing、target(目标阶段)、Phase-Bubbling;所有事件都会经过捕获阶段和目标阶段,但并不一定经过冒泡阶段;事件句柄又称为事件处理函数;与事件句柄不同,事件监听器可以一次可以一次绑定多个事件句柄而不是一个;

  • IE下的事件监听器:在IE中,每个元素和window对象都有两个方法:attachEvent()(IE下 利用attachEvent注册的处理函数调用时this指向不再是先前注册事件的元素,这时的this为window对象。还有一点是此方法的事件类型名称必须加上一个”on”的前缀(如onclick))和detachEvent();
  • DOM标准下的事件监听器:
    
     
  • XSS:跨站脚本攻击。
  • 浏览器同源策略:同源策略,它是由Netscape提出的一个著名的安全策略。所有支持JS的浏览器都会使用该策略。所谓同源指的是协议、域名和端口号都一致。同源的目的是为了防止恶意网站窃取数据,因为浏览器还规定提交表单并不受同源策略的限制,因此不同源可能会造成用户数据泄露。非同源的限制范围有三种:Cookie/LocalStorage及IndexDB无法读取;DOM无法获取;AJAX请求不能发送;AJAX请求规避同源策略的方法:使用代理服务器;JSONP(JSONP是服务器与客户端跨源通信的常用方法,简单实用,老式浏览器均支持。其基本思想是动态的创建一个script标签,向服务器请求JSON数据,该做法不受同源策略限制(只能使用GET请求);服务器收到请求后将数据放在指定名字的回调函数里传回来);WebSocket:WebSocket是一种通信协议,该协议不实行同源策略,只要服务器支持,就可以进行跨域通信,协议前缀为ws://和加密的wss:// ;CORS是Cross-Origin Resource Sharing,即跨源资源分享。它是W3C标准,是跨源AJAX请求的根本解决方案。相比JSONP只能发送GET请求,CORS允许任何类型的请求。(来源:浏览器同源政策及其规避方法 - 阮一峰的网络日志
  • 阻止事件冒泡:DOM中提供stopPropagation()方法,但是IE不支持,IE可以使用cancelBubble属性,默认为false;阻止默认行为:网页元素均有自己的默认行为。DOM中提供preventDefault()方法取消事件的默认行为,前提是cancelable属性设置为true; IE中提供returnValue属性,默认为true,修改其为false可以取消事件默认行为(使用document.all判断是否为IE浏览器);jQuery提供了preventDefault()方法;
  • javascript的本地对象、内置对象和宿主对象:本地对象是指Array、Number、String等可以使用new实例化的对象;内置对象是如global、Math等不可以实例化;宿主对象是浏览器自带的window、document;
  • JS数组去重:使用indexOf方法(if(arr.indexOf() == -1)或者if(arr.indexOf(arr[i] == i))等方法);还可以是使用hash表;hash表速度比较快,是以空间为代价换取时间;
  • JS继承:(参考:JS实现继承的几种方式 - 幻天芒 - 博客园) 原型继承(简单易实现;无法向父类传参;不支持多继承;)、构造继承(使用call方法,可以多继承,只能继承父类实例的属性和方法,不能继承原型的属性和方法;可以向父类传参;子类实例共享父类引用属性;实例不是父类的实例,只是子类的实例;)、实例继承(实例是父类的实例,不是子类的实例;不支持多继承;)、拷贝继承、组合继承(原型继承与构造继承)、寄生组合继承。
  • JS数组方法中修改原数组的方法:sort()\ reverse()\ splice()
    
  • vue.js:关键字:el/ data/ methods/ filters/ computed (依赖于缓存的,注意与watch的区别)/;使用v-html输出HTML代码;html属性中的值响应更新使用v-bind指令(v-bind:属性名=属性值);提供完全的JS表达式支持;v-if可以根据表达式的值决定是否插入DOM元素;v-on监听DOM事件;v-show根据条件展示元素;注意v-on和v-bind的缩写;input输入框可以使用v-model进行双向数据绑定;过滤器,使用方式{{message | uppercase | reverse}}或者在v-bind指令中使用<div v-bind:id="rawId | formatId"></div>; Vue实例:new vue({ ...  });vs.bind:class和vs.bind:style;
  • vue.js: 1.安装:独立构建和运行时构建(在于template的区别),默认NPM包导出的是运行时构建Vue 2.x 中,过滤器只能在 mustache 绑定和 v-bind 表达式(从 2.1.0 开始支持)中使用;计算属性是依赖于缓存的,这与watch有别,计算属性默认只有getter属性,有需要时可以提供setter属性;当你想要在数据变化响应时,执行异步操作或开销较大的操作,使用是很有用的。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Neil-

你们的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值