//判断Object类型

functionisObject (obj) {return obj !== null && typeof obj === 'object'}

//判断各种类型

var _toString =Object.prototype.toString;functiontoRawType (value) {return _toString.call(value).slice(8, -1)
}

eg:toRawType(123)"Number"toRawType('assasa')"String"toRawType({a:1})"Object"toRawType([1,2,3])"Array"

序列化:

functiontoString (val) {return val == null? '':typeof val === 'object'? JSON.stringify(val, null, 2): String(val)
}

//群组判断(重要)

functionmakeMap (str,expectsLowerCase
) {var map = Object.create(null);var list = str.split(',');for (var i = 0; i < list.length; i++) {map[list[i]]= true;}returnexpectsLowerCase? function (val) { returnmap[val.toLowerCase()]; }:function (val) { returnmap[val]; }
}

eg1:是否是html标签  svg标签

var isHTMLTag =makeMap('html,body,base,head,link,meta,style,title,' +'address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,' +'div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,' +'a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby,' +'s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,' +'embed,object,param,source,canvas,script,noscript,del,ins,' +'caption,col,colgroup,table,thead,tbody,td,th,tr,' +'button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,' +'output,progress,select,textarea,' +'details,dialog,menu,menuitem,summary,' +'content,element,shadow,template,blockquote,iframe,tfoot');var isSVG =makeMap('svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font-face,' +'foreignObject,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,' +'polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view',true);var isReservedTag = function(tag) {return isHTMLTag(tag) ||isSVG(tag)
};

eg2:这里定义了必须使用属性的判断的函数:  value这个属性的tag有:input,textarea,option,select,progress  这些标签    归属的判断

var acceptValue = makeMap('input,textarea,option,select,progress');var mustUseProp = function(tag, type, attr) {return((attr=== 'value' && acceptValue(tag)) && type !== 'button' ||(attr=== 'selected' && tag === 'option') ||(attr=== 'checked' && tag === 'input') ||(attr=== 'muted' && tag === 'video'))
};

eg3:布尔值的属性的词

var isBooleanAttr =makeMap('allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,' +'default,defaultchecked,defaultmuted,defaultselected,defer,disabled,' +'enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,' +'muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,' +'required,reversed,scoped,seamless,selected,sortable,translate,' +'truespeed,typemustmatch,visible');functionsetAttr (el, key, value) {if(isBooleanAttr(key)) {//set attribute for blank value//e.g. <option disabled>Select one</option>if(isFalsyAttrValue(value)) {el.removeAttribute(key);}else{//technically allowfullscreen is a boolean attribute for <iframe>,//but Flash expects a value of "true" when used on <embed> tagvalue = key === 'allowfullscreen' && el.tagName === 'EMBED'? 'true': key;el.setAttribute(key, value);}}else if(isEnumeratedAttr(key)) {el.setAttribute(key, isFalsyAttrValue(value)|| value === 'false' ? 'false' : 'true');}else if(isXlink(key)) {if(isFalsyAttrValue(value)) {el.removeAttributeNS(xlinkNS, getXlinkProp(key));}else{el.setAttributeNS(xlinkNS, key, value);}}else{if(isFalsyAttrValue(value)) {el.removeAttribute(key);}else{el.setAttribute(key, value);}}
}

functiongetPathCharType(ch) {if (ch ===undefined) {return 'eof';}var code = ch.charCodeAt(0);switch(code) {case 0x5B: //[case 0x5D: //]case 0x2E: //.case 0x22: //"case 0x27: //'case 0x30://0returnch;case 0x5F: //_case 0x24://$return 'ident';case 0x20: //Spacecase 0x09: //Tabcase 0x0A: //Newlinecase 0x0D: //Returncase 0xA0: //No-break spacecase 0xFEFF: //Byte Order Markcase 0x2028: //Line Separatorcase 0x2029://Paragraph Separatorreturn 'ws';}//a-z, A-Zif (code >= 0x61 && code <= 0x7A || code >= 0x41 && code <= 0x5A) {return 'ident';}//1-9if (code >= 0x31 && code <= 0x39) {return 'number';}return 'else';
}

var hasOwnProperty =Object.prototype.hasOwnProperty;functionhasOwn (obj, key) {returnhasOwnProperty.call(obj, key)
}hasOwn({aaa:1},'aaa')//true

    functioncached (fn) {var cache = Object.create(null);return (functioncachedFn (str) {var hit =cache[str];return hit || (cache[str] =fn(str))})}/*** Camelize a hyphen-delimited string.*/var camelizeRE = /-(\w)/g;var camelize = cached(function(str) {returnstr.replace(camelizeRE,function (_, c) { return c ? c.toUpperCase() : ''; })});console.log(camelize('as-as'));   //asAs

bind函数

functionbind (fn, ctx) {functionboundFn (a) {var l =arguments.length;returnl? l > 1?fn.apply(ctx, arguments): fn.call(ctx, a): fn.call(ctx)}//record original fn lengthboundFn._length =fn.length;returnboundFn
}

toArray

functiontoArray (list, start) {start= start || 0;var i = list.length -start;var ret = newArray(i);while (i--) {ret[i]= list[i +start];}returnret
}
toArray('qwwqwq')//["q", "w", "w", "q", "w", "q"]

extend 浅拷贝

functionextend (to, _from) {for (var key in_from) {to[key]=_from[key];}returnto
}

extend ({aaa:1},{bbb:1})
//{aaa: 1, bbb: 1}

浏览器判断

var inBrowser = typeof window !== 'undefined';var UA = inBrowser &&window.navigator.userAgent.toLowerCase();var isIE = UA && /msie|trident/.test(UA);var isIE9 = UA && UA.indexOf('msie 9.0') > 0;var isEdge = UA && UA.indexOf('edge/') > 0;var isAndroid = UA && UA.indexOf('android') > 0;var isIOS = UA && /iphone|ipad|ipod|ios/.test(UA);var isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge;

设置

  _Set = (function() {functionSet () {this.set = Object.create(null);}Set.prototype.has= functionhas (key) {return this.set[key] === true};Set.prototype.add= functionadd (key) {this.set[key] = true;};Set.prototype.clear= functionclear () {this.set = Object.create(null);};returnSet;}());

转载于:https://www.cnblogs.com/heyinwangchuan/p/8059342.html

摘录 vue.js代码片段的理解相关推荐

  1. 前端:分享一些实用的JS代码片段

    今天给大家分享一些实用的JS代码片段,有需要的朋友欢迎收藏! 1.获取浏览器的版本 function getBrowser() {var UserAgent = navigator.userAgent ...

  2. 理解Babel是如何编译JS代码的及理解抽象语法树(AST)

    Babel是如何编译JS代码的及理解抽象语法树(AST) 1. Babel的作用是?    很多浏览器目前还不支持ES6的代码,但是我们可以通过Babel将ES6的代码转译成ES5代码,让所有的浏览器 ...

  3. 设置VSCode快捷键vue生成代码片段

    Ctrl+Shift+P 复制下面的代码片段 {"vue-template": {"prefix": "vue-强哥的模板", //这个是模 ...

  4. Vue.js入门实战项目(五)--编写Vue.js代码实现前端功能

    前端页面通常由前端开发人员编写好,作为后端开发,只要能定位到自己需要写代码的地方,实现相应的需求即可. 完整项目我已经上传到了码云上,供大家学习参考. vuejsdemo 定位 HTML 1.找到 V ...

  5. js倒计时代码最简单的_10个简单的技巧让你的 vue.js 代码更优雅

    作为深度代码洁癖,我们都希望能写出简单高效的代码,让我们的代码看起来更加优雅,让我们抛弃繁杂的代码,一起开启简单的旅程~~ slots 新语法向 3.0 看齐 ❝使用带有"#"的新 ...

  6. 那些优雅灵性的JS代码片段

    我的个人网站:拓跋的前端客栈~了解一哈.这里是原文地址,如果您发现我文章中存在错误,请尽情向我吐槽,大家一起学习一起进步φ(>ω<*) 引子 如果您甘于平凡,写代码对您来说可以就是Ctrl ...

  7. 127个常用的JS代码片段,每段代码花30秒就能看懂(六)

    大家好,今天我继续给大家分享本系列文章的最后一部分,感谢你对本系列文章的持续关注,希望对你的日常工作有所帮助. 106.shuffle 使用 Fisher–Yates shuffle 洗牌算法对数组的 ...

  8. 3 个简单的技巧让你的 vue.js 代码更优雅!

    关注 逆锋起笔,回复"加群" 加入我们一起学习,天天进步 作者:红尘炼心 https://juejin.cn/post/7005751368937897991 前言 近来入坑了一个 ...

  9. AJAX相关JS代码片段和部分浏览器模型

    在.net开发中,充分利用免费控件是好事情,同样的,在php的开放中,能使用ajax的类库是可以,但是如果不能修改控件或者类库达到自己的需求,就要动用JS大法了,前提是研究好浏览器模型 的各种对象的方 ...

  10. 100个常用的 JS 代码片段分享,值得你收藏

    实现字符串长度截 function cutstr(str, len) {         var temp;         var icount = 0;         var patrn = / ...

最新文章

  1. Github 开源:使用控制器操作 WinForm/WPF 控件( Sheng.Winform.Controls.Controller)
  2. 跳转控制语句 break || continue || goto
  3. Android显示系统之View与SurfaceView更新屏幕的区别
  4. 俄罗斯无人机公司Hoversrf紧随Volocopter步伐,酷炫“方程式”飞行汽车来袭
  5. 2008铁路旅客列车时刻表_天津到新沂汽车卧铺大巴车长途汽车发车时刻表
  6. Python开发-- Lesson 2--Python数据类型(2016/07/30)
  7. GitHub标星3.6k | 给AI一张高清照片,分分钟还你3D人体模型
  8. Node-ES6模块化
  9. 美团多渠道打包方案详解,速度快到白驹过隙 1
  10. 【小插件】文字镂空“LSP”制作空心文字CAD
  11. CSPs-2020 T2 动物园
  12. 【技法操作】UI界面设计教程,用PS绘制计算器页面
  13. mysql 触发器 同步表数据 统计表数据
  14. unity 3d原创制作射击游戏(全完整版+安卓apk编译)
  15. 个人所得税的计算表格
  16. 关于猜数字游戏以及关机指令
  17. 【STM32F429的DSP教程】第6章 ARM DSP源码和库移植方法(MDK5的AC5和AC6)
  18. Java项目:流浪猫狗救助管理系统(java+SSM+JSP+bootstrap+jQuery+mysql)
  19. 论文翻译:2021_DeepFilterNet: A Low Complexity Speech Enhancement Framework for Full-Band Audio based on
  20. 哪怕荆棘满路,我们仍无畏前行

热门文章

  1. Python - SimpleHTTPServer and CGIHTTPServer
  2. 深入浅出SharePoint——站点的部署
  3. WINDOWS 2008的trustedinstallerexe占用过多CPU导致服务器性能下降的问题处理
  4. 北京大学联合复旦大学发布中文空间语义理解评测SpaCE2021
  5. 详解机器学习之the Learning Problem
  6. AttributeError: ‘_thread._local‘ object has no attribute ‘value‘
  7. word2vec词向量建立
  8. 论文赏析【EMNLP19】语言模型效果不好?也许你可以给它添加一点句法信息
  9. NLP学习—9.Resent网络详解
  10. 深度学习8-常用评估函数与自定义评估函数