Javascript
前端小兔子
好好学习,天天向上!
展开
-
JS设计原则
1. 何为设计?设计即按照哪一种思路或者标准来实现功能功能相同,可以有不同设计方案来实现伴随着需求增加,设计到作用才能体现出来《UNIX / LINUX 设计哲学》准则1:小即是美准则2:让每个程序只做好一件事准则3:快速建立原型准则4:舍弃高效率而取可移植性准则5:采用纯文本来存储数据准则6:充分利用软件的杠杆效应(软件复用)准则7:使用shell脚本来提高杠杆效应和...原创 2020-03-05 19:16:39 · 799 阅读 · 1 评论 -
virtual dom 虚拟DOM
vdom是vue和React的核心,先讲哪个都绕不开它vdom比较独立,使用也比较简单如果面试闻到vue和React和实现,免不了问vdomvdom是什么?为何会存在vdom?virtual dom,虚拟DOM用JS模拟DOM结构将DOM对比操作放在JS层来做,提高效率提高重绘性能为何会存在:DOM操作是“昂贵”的,js运行效率高尽量减少DOM操作,而不是“推倒重来”...原创 2020-01-10 22:17:27 · 121 阅读 · 0 评论 -
cookie, localStorage, sessionStorage的区别
基本概念cookiecookie英文饼干,顾名思义,大小应该非常小,cookie非常小,它的大小限制在4kb左右,它的主要用于保存登陆信息,比如你登陆某个网站市场可以看到’记住密码’,这就是通过在cookie中存入一段辨别用户身份的数据来实现的。localStoragelocalStorage是HTML5标准中新加入的技术。sessionStoragesessionStorage与lo...转载 2020-01-04 19:11:14 · 271 阅读 · 0 评论 -
Ajax
1. 创建Ajaxlet xhr = null;if(window.XMLHttpRequest){ //大多数浏览器 xhr = new XMLHttpRequest();}else{ //古董级浏览器 xhr = new ActiveXObject("Microsoft.XMLHTTP");}if(xhr != null){ xhr.open('GE...原创 2020-01-04 18:10:57 · 157 阅读 · 0 评论 -
点击ul的li,弹出处于ul中的第几条
<ul id="container"> <li>只是第一条</li> <li>只是第二条</li> <li>只是第三条</li></ul>// 事件代理方式const ul = document.getElementById('container');const li ...原创 2020-01-04 14:15:45 · 500 阅读 · 0 评论 -
事件
事件冒泡流程基于DOM树形结构事件会顺着触发元素往上冒泡应用场景:代理手写通用事件绑定函数function bindEvent(elem, type, selector, fn){ if(fn == null){ fn = selector; selector = null; } elem.addEventListener(type, event => { c...原创 2020-01-04 13:28:17 · 83 阅读 · 0 评论 -
BOM操作
1. BOM名称Browser Object Model2. BOM名的核心对象windowBOM的核心对象是window,它表示浏览器的一个实例。在浏览器中,window对象有双重角色,它既是通过javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。 3. navigator对象const ua = navigator.userAgentc...原创 2020-01-04 13:12:39 · 102 阅读 · 0 评论 -
DOM操作
1. DOM名称?Document Object Model2. DOM是哪种数据结构?树(DOM树)3. property和attribute的区别property修改对象属性,不会体现到html结构中attribute修改html属性,会改变html结构两者都有可能引起DOM重新渲染4. DOM操作const div1 = document.getElementById(...原创 2020-01-04 12:04:20 · 116 阅读 · 0 评论 -
闭包的应用 - 隐藏数据
闭包隐藏数据,不被外界访问,只提供APIfunction createCache(){ const data = {} return { get: function(key){ return data[key]; }, set: function(key, value){ data[k...原创 2020-01-03 21:23:42 · 211 阅读 · 0 评论 -
手写bind函数
Function.prototype.bind1 = function() { // 将参数拆解为数组 let args = Array.prototype.slice.call(arguments); // 获取this,数组第一项 let t = args.shift(); // fn1.bind(...)中的fn1 let self = thi...原创 2020-01-03 21:14:15 · 108 阅读 · 0 评论 -
<a>标签,点击时弹出对应的序号相关
1. 创建10个a标签,点击时弹出对应的序号let a2;for(let i = 0; i < 10; i++){ a2 = document.createElement('a'); a2.text= i + '测试'; a2.addEventListener('click',function(e){ e.preventDefault(); ...原创 2020-01-03 20:46:43 · 197 阅读 · 0 评论 -
js输出结果题汇总
1. var a = 1; function Fn1(){ var a = 2; console.log(this.a + a); } function Fn2(){ var a = 10; Fn1(); } Fn2(); var Fn3 = function(){ ...原创 2020-01-03 19:24:33 · 1525 阅读 · 0 评论 -
手写简易jQuery,考虑插件和扩展性
html<body> <p>这是一段文字1</p> <p>这是一段文字2</p> <p>这是一段文字3</p> <p>这是一段文字4</p></body>js<script> class jQuery{ constructor...原创 2020-01-03 18:34:05 · 435 阅读 · 0 评论 -
手写深拷贝
<script> let obj1 = { age: 20, name: 'xxx', address: { city: 'beijing' }, arr: ['a', 'b', 'c'] } let obj2 = deepClone(obj1); ...原创 2020-01-03 17:44:27 · 196 阅读 · 0 评论 -
继承
ES6代码<script> // 父类 class People { constructor(name){ this.name = name; } eat(){ console.log(`${this.name} eat something.`); } ...原创 2020-01-03 17:05:01 · 160 阅读 · 0 评论