1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 abstract class Duck { quack(){ console.log('呱呱叫') } swim(){ console.log('游泳') } abstract display() // 各种鸭子的外观不同，此为抽象方法 } class GreenDuck extends Duck { display() { console.log('绿色的头') } } class RedDuck extends Duck { display() { console.log('红色的头') } } // 还有很多其他类型的鸭子继承了Duck class OtherDuck extends Duck { display() { } } 1 2 3 4 5 6 7 8 9 10 11 12 abstract class Duck { quack(){ console. ...
修改NVM下载nodejs的地址，设置环境变量。 命令行是bash 1 2 echo -e "\nexport NVM_NODEJS_ORG_MIRROR=http://npm.taobao.org/mirrors/node" >> ~/.bashrc source ~/.bashrc 命令行是zsh 1 2 echo -e "\nexport NVM_NODEJS_ORG_MIRROR=http://npm.taobao.org/mirrors/node" >> ~/.zshrc source ~/.zshrc
像iPhone一样的毛玻璃效果，让背景里的东西是模糊的。 1 2 3 .x { backdrop-filter: saturate(180%) blur(2px); }
可编辑元素 # 1 2 3 4 <!-- vue --> <p class="content" v-text="item.title" @keydown="onEnter" @dblclick="turnOnEditable" @blur="(e)=>{titleBlur(e, index)}"> {{item.title}} </p> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 // js methods: { // 修改标题，回车时失去焦点 onEnter(e) { if(e.keyCode===13){ e.target.blur(); } }, // 失去焦点时，保存内容，并将元素修改为不可编辑 titleBlur(e, index){ const title = e.target.innerText; this.onTitleChange({title:title,index:index}); e.target.setAttribute('contenteditable', false); }, // 双击元素时，将其变为可编辑状态，并获取焦点。 turnOnEditable(e){ e.target.setAttribute('contenteditable', true) e. ...
上传图片时，怎么拿到图片的src地址？ # input选中图片以后，只是得到了file对象，如果想在img中显示该图片的话，并不知道src，所以想得到src还需要额外的操作。 1 2 3 4 5 6 7 8 9 10 11 function getObjectURL(file) { var url = null; if (window.createObjectURL != undefined) { // basic url = window.createObjectURL(file); } else if (window.URL != undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file); } else if (window.webkitURL != undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file); } return url; } JS操作样式class # 1 2 3 4 5 document.body.classList.add("c"); document. ...
设置npm和yarn使用淘宝仓库，设置sass/electron快速下载地址。
左耳朵耗子 css # 选择器 优先级 伪类 伪元素 盒子 盒子模型 内容、内边距、边框、外边距、box-sizing 背景颜色、背景图片、背景渐变色 outline、box-shadow 外边距合并 布局 浮动和定位在内的传统布局方法 弹性盒（flexbox）布局 书写规范 less JS核心原理 # 了解好的特性和各种坑。 《JS语言精粹》 《JS忍者秘籍》 《Effective JS》的68条精华建议 《深入浅出ES6》 浏览器原理 # How browsers works # 原文的翻译 How browsers works Virtual # 网络协议 # High Performance Browser Networking http2 websocket 前端性能 # 框架 # 实践 # 跨域 AJAX & Fetch & Axios [link1][https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/]
两种的自定义事件的用法的介绍，addEventListener监听事件，event和customevent创建事件，dispatchEvent发送事件。