封装getScroll函数
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
};
}
//浏览器的滚动事件
window.onscroll = function () {
console.log(getScroll().top);
};
案例：固定导航栏
获取scrollTop值后判断高度大于导航栏的高，就设置样式固定住，同时，主页部分的marginTop值，为防止浮动/脱标造成的影响，这个值设置为导航栏的高
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}
img {
vertical-align: top;
}
.main {
margin: 0 auto;
width: 1000px;
margin-top: 10px;
}
.fixed {
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="top" id="topPart">
<img src="images/top.png" alt="" />
</div>
<div class="nav" id="navBar">
<img src="images/nav.png" alt="" />
</div>
<div class="main" id="mainPart">
<img src="images/main.png" alt="" />
</div>
<script src="common.js"></script>
<script>
//获取页面向上或者向左卷曲出去的距离的值
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
top: window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
};
}
//滑动事件
window.onscroll = function () {
if (getScroll().top >= my$("topPart").offsetHeight) {
//设置第二个div的类样式
my$("navBar").className = "nav fixed";
//设置第三个div的mainTop值
my$("mainPart").style.marginTop = my$("navBar").offsetHeight + "px";
} else {
my$("navBar").className = "nav";
my$("mainPart").style.marginTop = "10px";
}
};
</script>
</body>
</html>
原生js实现ajax请求封装，类似于jquery的操作
ajax可以实现不阻塞用户，达到无刷新更新部分页面的效果，它的异步请求都会首先考虑的是jquery，但是前提得加载它那核心包，如何使用原生的js来实现这一功能呢？
通过2行js代码实现DOM属性的封装以及交换两个变量的值
JavaScript两行代码实现DOM属性的封装以及交换两个变量的值。编程的时候不要忘记思考，否则你就只是一个完成工作的机器。所以，如果你现在的工作只是让你疯狂做业务而不给你思考和学习的时间，别犹豫，换一个。
浅谈Vue v-model实现原理，如何封装，以及封装方法
vue的v-model是一个十分强大的指令,它可以自动让input里的值自动和你设定的值进行绑定,它是如何实现的呢?其实v-model只不过是一个语法糖而已,真正的实现靠的还是：(1) v-bind:绑定响应式数据，(2) 触发 input 事件 并传递数据 (重点)
如何去设计一个组件封装_前端组件化设计思路
目前前端三大框架（Vue.js, Angular.js, React.js）都在引领着前端的组件化开发方向，组件化的前端开发方式的确为业务实现带来了前所未有的方便，其实组件化开发早已经具有（YUI），但如何封装一个优秀的组件，可能并不是每位前端开发者都能够做好的。
fetch请求二次封装
JS 中使用 fetch 更加高效地进行网络请求，由于fetch 的请求方式同 $ajax 和 axios 都不太一样，为了方便请求过程，进行Fetch网络封装类：方式一传统使用回调函数的方式、方式二借助ES6中的promise的方式封装。
关于那些变化万千，开箱即用的 Promise 高度封装方法
在日常开发中，我们少不了使用 Promise，而透过封装抽象方法，可以避免造轮子，写出更加优雅的代码。例如：将任意函数，化为具有异步能力的函数、改装成具有并发上千万请求的函数、使用 Web Worker 来使用不同线程、暂停若干秒再继续
微信和支付宝中的一些常用方法封装
最近做了同一个样子的小程序的支付宝版本，现在如果想想是开发两次的话心里应该是很难受的。去年11月12月份左右开发了两个微信小程序是一个在超市买商品的，一个用户版本，一个商户版本的。我们团队看到了uniapp这个东西
JS防抖函数、节流函数工具类封装
当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次， 如果设定时间到来之前，又触发了事件，就重新开始延时。也就是说当一个用户一直触发这个函数，且每次触发函数的间隔小于既定时间
JQuery组件封装之return this.each(function () {});
这个时候就要说each了，还是之前的，倘若页面上有N个class为div的元素呢，即：this.length>1，这里each就必然要上场了，且每个对象都要返回，所以此段代码无疑是最方便的写法了
原生js实现ajax的封装
ajax 的全称是Asynchronous JavaScript and XML，简单理解下:ajax就是异步的js和服务端的数据；GET请求的数据会附在URL之后， 以 ? 分割URL和传输数据， 参数之间以 & 相连
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!