很多朋友对于仿58网站源码分享和仿站网站不太懂，今天就由小编来为大家分享，希望可以帮助到大家，下面一起来看看吧！
作者：寒水寺一禅
转发链接：https://segmentfault.com/a/1190000023111128
目录
那些不常见，但却非常实用的JS知识点（上）
那些不常见，但却非常实用的JS知识点（下）本篇
二、element（DOM对象）
1、element属性和方法
1.1、clientHeight/clientWidth属性
clientHeight:元素内部的高度，包含内边距，但不包括水平滚动条、边框和外边距。
clientWidth:元素内部的宽度，包含内边距，但不包括垂直滚动条、边框和外边距。
此属性会将获取的值四舍五入取整数。
document.querySelector(&34;).clientWidth
clientHeight和clientWidth支持性一致
1.2、scrollHeight/scrollWidth属性
类似于上方的clientHeight/clientWidth，不同在于clientHeight/clientWidth在元素设置overflow后，不包含隐藏不可见的高度部分。而scrollHeight/scrollWidth却包含隐藏的那部分高度。
我觉得利用这个特性来判断是否超长，如果scrollWidth大于clientWidth，则表示超长，此时可以对于那些超长后显示…的元素在浮上去后展示一个自定义的toolip.
scrollHeight和scrollWidth支持性一致
1.3、getBoundingClientRect()方法
返回元素的大小及其相对于视口的位置(眼睛看得见的文档区域)。
这个方法超级好用。不管你的元素在什么位置，它都会计算出来当前元素相当于视口的边缘的位置，和滚动条无关。
返回值为
{\nbottom:xx,//元素底部离视口顶部的距离\nheight:xx,//元素高度，和元素的clientHeight属性一致，但比它精确，会保留小数\nleft:xx,//元素左边离视口左侧的距离\nright:xx,//元素右边离视口左侧的距离\ntop:xx,//元素上部离视口顶部的距离\nwidth:xx,//元素宽度，和元素的clientWidth属性一致，但比它精确，会保留小数\n}
这个方法的支持性为100%，良心啊，为什么我才知道这个方法?
1.4、scrollIntoView()方法
如果父元素定义了overflow，并产生了滚动条，里面有个子元素，在滚动条滑动后，看不到了。那么可以让这个子元素执行这个方法，让元素滚动到父元素可视区域内。
可以定义滚动条可视区域的顶部，底部，还是左边，右边。
也可以定义平滑的滚动过来，还是一瞬间滚动过来。
这个方法的好处是自动计算里面的元素距离可见区域多少，不需要给数值进行人为干涉，而scroll()或scrollTo()方法，必须人为计算滚动条的距离，然后给个数值，才能滚动到某个位置。
首先看个例子，
div1超过屏幕的区域有个div2，超过div2的区域有个span1，此时我们可以通过调用span1元素的scrollIntoView方法，让span1，滚动到div2的可见区域，也就是向左边滚动，但是有个坏处，就是div1也会向上滚动，直到div2能被用户看到。
而scroll()或scrollTo()方法在span1滚动到div2的可见区域时，div1不动。不会产生其他附加作用，直到你慢慢滑屏，才会看到span1，已经停留在div2的可视范围了。
1.5、scroll()/scrollTo()/scrollBy()方法
scrollTo方法可以使界面滚动到给定元素的指定坐标位置。
以产生滚动条的那个父元素为基准，
scroll()scrollBy()scrollTo()合称为scrollOptionsAPI
2、element事件
2.1、contextmenu事件
contextmenu事件会在用户尝试打开上下文菜单时被触发。该事件通常在鼠标点击右键或者按下键盘上的菜单键时被触
<pid=&34;>这个段落右键菜单已被禁用。</p>\nnoContext=document.getElementById(&39;);\nnoContext.addEventListener(&39;,e=>{\ne.preventDefault();\n});
单击右键，不会出现标准的右键菜单项目
2.2、copy事件/cut事件/paste事件
dom的复制/剪切，粘贴事件。
<divclass=&34;>\nTrycopyingtextfromthisbox…\n</div>\n<divclass=&34;contenteditable=&34;>\n…andpastingitintothisone\n</div>\nletsourceDom=document.querySelector(&34;);\nsourceDom.addEventListener(&34;,function(e){\n//将数据存入剪切板\ne.clipboardData.setData(&34;,&34;);\ne.preventDefault();\n});\nlettargetDom=document.querySelector(&34;);\ntargetDom.addEventListener(&34;,function(e){\n//从剪切板取出来\nletdata=e.clipboardData.getData(&34;);\n//自定义转化数据\ndata=data.toUpperCase();\n//获取光标位置\nconstselection=window.getSelection();\nif(!selection.rangeCount)returnfalse;\nselection.deleteFromDocument();\n//将转换后的数据插入到光标位置\nselection.getRangeAt(0).insertNode(document.createTextNode(data));\ne.preventDefault();\n});
这三个事件支持性一致
2.3、focusin事件/focusout事件
当元素获得焦点时，focusin事件被触发。
focusin事件和focus事件之间的主要区别在于focus不会冒泡。
当元素即将失去焦点时，focusout事件被触发。
focusout事件和blur事件之间的主要区别在于blur不会冒泡。
2.4、onscroll/onwheel
类似于window的onscroll和onwheel。只不过绑定对象为element
letsourceDom=document.querySelector(&34;);\nsourceDom.addEventListener(&34;,function(e){\nconsole.log(&34;);\n});\nsourceDom.addEventListener(&34;,function(e){\nconsole.log(&34;);\n});
三、document（文档对象）
1、document属性和方法
1.1、characterSet
返回当前文档的字符编码，但有相当一部分浏览器未实现，可使用原始的charset代替
document.characterSet||document.charset
1.2、compatMode
表明当前文档的渲染模式是怪异模式/混杂模式还是标准模式。
document.compatMode//BackCompat怪异模式，CSS1Compat标准模式
1.3、defaultView
返回当前document对象所关联的window对象，如果没有，会返回null。
document.defaultView//返回还是window，我为什么不直接使用window呢？
上面的代码很平淡，不足为奇，可是下面的就不一定了
<divclass=&34;style=&34;>\n<objecttype=&34;style=&34;></object>\n</div>\nletdoc=document.querySelector(&34;).contentDocument;//得到一个document对象\ndoc.defaultView;//接着得到一个window
得到这个window后，有什么用呢？
我们可以想象一个场景，当我们缩放window窗口时，会触发window的onresize事件，但是缩放div，却不会触发onresize事件，因为dom没有onresize，那么如何监听一个div的resize呢？
就是上述的方式，在div中套一个object。我不监听div，我监听div中的object，一旦div变了，object不也就变了吗？
然后通过object返回的一个window对象，就自然可以绑定onresize事件了
document.querySelector(&34;).contentDocument.defaultView.addEventListener(&34;,()=>{\n//只要div尺寸变化，object尺寸就变化，resize就能监听到。不管何种原因导致的尺寸变化。都会监听到。\n});
除此之外，我有一遍专门介绍如何彻底解决div尺寸变化问题的文章，有兴趣的伙伴可以阅读
1.4、designMode
控制整个文档是否可编辑。有效值为&34;和&34;。
默认值为&34;。如果设置为&34;，则好比给html所有的元素都添加了contenteditable属性。
1.5、documentElement
会返回文档对象（document）的根元素。
可以通过document.documentElement.clientHeight来获取浏览器的可用高度，这个高度和html或者body的style上的height无关，只与浏览器的上方地址栏，下方工具栏等有关，和window.innerHeight相等。
2、document事件
2.1、onscroll/onwheel
类似于window的onscroll和onwheel。只不过绑定对象为document
document.addEventListener(&34;,function(e){\nconsole.log(&34;);\n});\ndocument.addEventListener(&34;,function(e){\nconsole.log(&34;);\n});
本篇文章已完结
推荐JavaScript学习相关文章
《如何为团队定制自己的Node.js框架？》
《细品原生JS从初级到高级知识点汇总（一）》
《细品原生JS从初级到高级知识点汇总（二）》
《细品原生JS从初级到高级知识点汇总（三）》
《细品原生JS从初级到高级知识点汇总（四）》
《学习jQuery源码整体架构，打造属于自己的js类库》
《细说RTSP实现前端直播流探索记「干货」》
《一文带你搞懂前端登陆设计》
《使用Node.js将图片中的苹果变成橘子「实践」》
《基于Canvas实现的高斯模糊（上）「JS篇」》
《基于Canvas实现的高斯模糊（下）「JS篇」》
《由浅入深，66条JavaScript面试知识点（一）》
《由浅入深，66条JavaScript面试知识点（二）》
《由浅入深，66条JavaScript面试知识点（三）》
《由浅入深，66条JavaScript面试知识点（四）》
《由浅入深，66条JavaScript面试知识点（五）》
《由浅入深，66条JavaScript面试知识点（六）》
《由浅入深，66条JavaScript面试知识点（七）》
《为什么setTimeout有最小时延4ms?》
《如何处理Node.js中出现的未捕获异常？》
《Angularv10.0.0正式发布，不再支持IE9/10》
《基于Docker的SSR持续开发集成环境实践》
《细聊图解webpack指南手册》
《一文带你彻底搞懂NPM知识点「进阶篇」》
《细聊webpack性能优化面面观》
《JS实现各种日期操作方法汇总》
《「实践」细聊前端性能优化总结》
《「实践」浏览器中的画中画（Picture-in-Picture）模式及其API》
《「多图」一文带你彻底搞懂WebWorkers（上）》
《「多图」一文带你彻底搞懂WebWorkers（中）》
《深入细聊前端下载总结「干货」》
《细品西瓜播放器功能分析（上）「实践」》
《细品西瓜播放器功能分析（下）「实践」》
《细聊50道JavaScript基础面试题「附答案」》
《webpack4主流程源码解说以及动手实现一个简单的webpack（上）》
《webpack4主流程源码解说以及动手实现一个简单的webpack（下）》
《细聊前端架构师的视野》
《细聊应用场景再谈防抖和节流「进阶篇」》
《前端埋点统一接入方案实践》
《细聊微内核架构在前端的应用「干货」》
《一种高性能的Tree组件实现方案「干货」》
《进击的JAMStack》
《前后端全部用JS开发是什么体验（Hybrid+Egg.js经验分享）上》
《前后端全部用JS开发是什么体验（Hybrid+Egg.js经验分享）中》
《前后端全部用JS开发是什么体验（Hybrid+Egg.js经验分享）下》
《一文带你搞懂babel-plugin-import插件（上）「源码解析」》
《一文带你搞懂babel-plugin-import插件（下）「源码解析」》
《JavaScript常用API合集汇总「值得收藏」》
《推荐10个常用的图片处理小帮手（上）「值得收藏」》
《推荐10个常用的图片处理小帮手（下）「值得收藏」》
《JavaScript中ES6代理的实际用例》
《12个实用的前端开发技巧总结》
《一文带你搞懂搭建企业级的npm私有仓库》
《教你如何使用内联框架元素IFrames的沙箱属性提高安全性？》
《细说前端开发UI公共组件的新认识「实践」》
《细说DOMAPI中append和appendChild的三个不同点》
《细品淘系大佬讲前端新人如何上王者「干货」》
《一文带你彻底解决背景跟随弹窗滚动问题「干货」》
《推荐常用的5款代码比较工具「值得收藏」》
《Node.js实现将文字与图片合成技巧》
《爱奇艺云剪辑Web端的技术实现》
《我再也不敢说我会写前端Button组件「实践」》
《NodeXComponent-滴滴集团Node.js生态组件体系「实践」》
《NodeBuffers完整指南》
《推荐18个webpack精美插件「干货」》
《前端开发需要了解常用7种JavaScript设计模式》
《浅谈浏览器架构、单线程js、事件循环、消息队列、宏任务和微任务》
《了不起的WebpackHMR学习指南（上）「含源码讲解」》
《了不起的WebpackHMR学习指南（下）「含源码讲解」》
《10个打开了我新世界大门的WebAPI（上）「实践」》
《10个打开了我新世界大门的WebAPI（中）「实践」》
《10个打开了我新世界大门的WebAPI（下）「实践」》
《「图文」ESLint在中大型团队的应用实践》
《Deno是代码的浏览器，你认同吗？》
《前端存储除了localStorage还有啥？》
《Javascript多线程编程?的前世今生》
《微前端方案qiankun（实践及总结）》
《「图文」V8垃圾回收原来这么简单？》
《Webpack5模块联邦引发微前端的革命？》
《基于Web端的人脸识别身份验证「实践」》
《「前端进阶」高性能渲染十万条数据(时间分片)》
《「前端进阶」高性能渲染十万条数据(虚拟列表)》
《图解Promise实现原理（一）：基础实现》
《图解Promise实现原理（二）：Promise链式调用》
《图解Promise实现原理（三）：Promise原型方法实现》
《图解Promise实现原理（四）：Promise静态方法实现》
《实践教你从零构建前端Lint工作流「干货」》
《高性能多级多选级联组件开发「JS篇」》
《深入浅出讲解Node.jsCLI工具最佳实战》
《延迟加载图像以提高Web网站性能的五种方法「实践」》
《比较JavaScript对象的四种方式「实践」》
《使用ServiceWorker让你的Web应用如虎添翼（上）「干货」》
《使用ServiceWorker让你的Web应用如虎添翼（中）「干货」》
《使用ServiceWorker让你的Web应用如虎添翼（下）「干货」》
《前端如何一次性处理10万条数据「进阶篇」》
《推荐三款正则可视化工具「JS篇」》
《如何让用户选择是否离开当前页面？「JS篇」》
《JavaScript开发人员更喜欢Deno的五大原因》
《仅用18行JavaScript实现一个倒数计时器》
《图文细说JavaScript的运行机制》
《一个轻量级JavaScript全文搜索库，轻松实现站内离线搜索》
《推荐Web程序员常用的15个源代码编辑器》
《10个实用的JS技巧「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（一）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（二）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（三）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（四）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（五）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（六）「值得收藏」》
《深入JavaScript教你内存泄漏如何防范》
《手把手教你7个有趣的JavaScript项目-上「附源码」》
《手把手教你7个有趣的JavaScript项目-下「附源码」》
《JavaScript使用mediaDevicesAPI访问摄像头自拍》
《手把手教你前端代码如何做错误上报「JS篇」》
《一文让你彻底搞懂移动前端和Web前端区别在哪里》
《63个JavaScript正则大礼包「值得收藏」》
《提高你的JavaScript技能10个问答题》
《JavaScript图表库的5个首选》
《一文彻底搞懂JavaScript中Object.freeze与Object.seal的用法》
《可视化的JS：动态图演示-事件循环EventLoop的过程》
《教你如何用动态规划和贪心算法实现前端瀑布流布局「实践」》
《可视化的js：动态图演示Promises&Async/Await的过程》
《原生JS封装拖动验证滑块你会吗？「实践」》
《如何实现高性能的在线PDF预览》
《细说使用字体库加密数据-仿58同城》
《Node.js要完了吗？》
《Pug3.0.0正式发布，不再支持Node.js6/8》
《纯JS手写轮播图（代码逻辑清晰，通俗易懂）》
《JavaScript20年中文版之创立标准》
《值得收藏的前端常用60余种工具方法「JS篇」》
《箭头函数和常规函数之间的5个区别》
《通过发布/订阅的设计模式搞懂Node.js核心模块Events》
《「前端篇」不再为正则烦恼》
《「速围」Node.jsV14.3.0发布支持顶级Await和REPL增强功能》
《深入细品浏览器原理「流程图」》
《JavaScript已进入第三个时代，未来将何去何从？》
《前端上传前预览文件image、text、json、video、audio「实践」》
《深入细品EventLoop和浏览器渲染、帧动画、空闲回调的关系》
《推荐13个有用的JavaScript数组技巧「值得收藏」》
《前端必备基础知识：window.location详解》
《不要再依赖CommonJS了》
《犀牛书作者：最该忘记的JavaScript特性》
《36个工作中常用的JavaScript函数片段「值得收藏」》
《Node+H5实现大文件分片上传、断点续传》
《一文了解文件上传全过程（1.8w字深度解析）「前端进阶必备」》
《【实践总结】关于小程序挣脱枷锁实现批量上传》
《手把手教你前端的各种文件上传攻略和大文件断点续传》
《字节跳动面试官：请你实现一个大文件上传和断点续传》
《谈谈前端关于文件上传下载那些事【实践】》
《手把手教你如何编写一个前端图片压缩、方向纠正、预览、上传插件》
《最全的JavaScript模块化方案和工具》
《「前端进阶」JS中的内存管理》
《JavaScript正则深入以及10个非常有意思的正则实战》
《前端面试者经常忽视的一道JavaScript面试题》
《一行JS代码实现一个简单的模板字符串替换「实践」》
《JS代码是如何被压缩的「前端高级进阶」》
《前端开发规范：命名规范、html规范、css规范、js规范》
《【规范篇】前端团队代码规范最佳实践》
《100个原生JavaScript代码片段知识点详细汇总【实践】》
《关于前端174道JavaScript知识点汇总（一）》
《关于前端174道JavaScript知识点汇总（二）》
《关于前端174道JavaScript知识点汇总（三）》
《几个非常有意思的javascript知识点总结【实践】》
《都2020年了，你还不会JavaScript装饰器？》
《JavaScript实现图片合成下载》
《70个JavaScript知识点详细总结（上）【实践】》
《70个JavaScript知识点详细总结（下）【实践】》
《开源了一个JavaScript版敏感词过滤库》
《送你43道JavaScript面试题》
《3个很棒的小众JavaScript库，你值得拥有》
《手把手教你深入巩固JavaScript知识体系【思维导图】》
《推荐7个很棒的JavaScript产品步骤引导库》
《Echa哥教你彻底弄懂JavaScript执行机制》
《一个合格的中级前端工程师需要掌握的28个JavaScript技巧》
《深入解析高频项目中运用到的知识点汇总【JS篇】》
《JavaScript工具函数大全【新】》
《从JavaScript中看设计模式(总结)》
《身份证号码的正则表达式及验证详解(JavaScript，Regex)》
《浏览器中实现JavaScript计时器的4种创新方式》
《Three.js动效方案》
《手把手教你常用的59个JS类方法》
《127个常用的JS代码片段，每段代码花30秒就能看懂-【上】》
《深入浅出讲解js深拷贝vs浅拷贝》
《手把手教你JS开发H5游戏【消灭星星】》
《深入浅出讲解JS中this/apply/call/bind巧妙用法【实践】》
《手把手教你全方位解读JS中this真正含义【实践】》
《书到用时方恨少，一大波JS开发工具函数来了》
《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》
《手把手教你JS异步编程六种方案【实践】》
《让你减少加班的15条高效JS技巧知识点汇总【实践】》
《手把手教你JS开发H5游戏【黄金矿工】》
《手把手教你JS实现监控浏览器上下左右滚动》
《JS经典实例知识点整理汇总【实践】》
《2.6万字JS干货分享，带你领略前端魅力【基础篇】》
《2.6万字JS干货分享，带你领略前端魅力【实践篇】》
《简单几步让你的JS写得更漂亮》
《恭喜你获得治疗JSthis的详细药方》
《谈谈前端关于文件上传下载那些事【实践】》
《面试中教你绕过关于JavaScript作用域的5个坑》
《Jquery插件（常用的插件库）》
《【JS】如何防止重复发送ajax请求》
《JavaScript+Canvas实现自定义画板》
《Continuation在JS中的应用「前端篇」》
作者：寒水寺一禅
转发链接：https://segmentfault.com/a/1190000023111128
OK，关于仿58网站源码分享和仿站网站的内容到此结束了，希望对大家有所帮助。