今天来记录下js来自定义鼠标右键，同样先来分解下它的实现原理： 1、屏蔽右键默认事件；（一度我以为修改的就是默认事件） 2、对一个ul的隐藏；（这个我也曾迂腐的认为值得这样操作的都是div，汗） 3、对鼠标点击右键做出的响应，显示隐藏的ul； 4、鼠标重新点击后，ul重新被隐藏 这样来看的话，我们需要做的事情是不是就简单了很多，先上代码： html部分开始 暂停 拜拜 javascript部分：window.onload=function(){ var forRigh...
截取指定长度字符串操作在网站建设中大量使用，尤其是在新闻列表这种类型的操作中大量应用。 下面就是一个截取字符串代码实例:jQuery截取字符串操作 * { margin:0; padding:0; font-family:"宋体", Arial, Helvetica, sans-serif; } #best { width:300px; height:200px; border:1px solid #ccc; margin:60px auto 0; line-height:1.6; font-size:14px; padding:10px 0 0 10px } .blank { font-size:18px; font-...
刚接触到RPC（远程过程调用），就是可以在本地调用远程机子上的程序的方法，看到一个简单的nodejs实现，用来学习RPC的原理很不错：nodejs light_rpc 使用示例：代码如下: //服务端 var light_rpc = require(./index.js); var port = 5556; var rpc = new light_rpc({combine: function(a, b, callback){callback(a + b);},multiply: function(t, cb){cb(t*2);} }).listen(port);Sample client:代码如下: //客户端 rpc.connect(5556...
jQuery中，noconflict是用来防止变量冲突，用来释放变量控制权的一个重要方法。我们知道，jQuery中对外提供有两个全局变量，$和jQuery，虽然jQuery只产生了两个全局变量，极少情况下才会出现冲突，但是如果网页中如果包涵较多的类库,有自定义$或jQuery全局变量的存在时，就产生冲突。 jQuery提供的noconflict函数很好的解决了变量冲突问题，无论是$或者jQuery冲突都可以解决，接下来我们就来分析一下jQuery的冲突处理。 先来看一下...
pushStack是jQuery内核中一个非常重要的函数，它是如此重要，以至于许多jQuery内部函数中都频繁用到它。平常情况下，虽然很少用到它, 但是掌握这个函数，不仅有利于理解jQuery的运行原理，还方便我们做更加高级的jQuery操作。 顾名思义，pushStack是入栈, 栈作为一种数据结构，是一种只能在一端进行插入和删除操作的特殊线性表。数据入栈时，类似与我们进电梯，后进而先出, 如下图:jQuery中的栈其实并不是真正的栈，而是给jQuery对...
extend()是jQuery中一个重要的函数，作用是实现对对象的扩展, 它经常用于jQuery插件的开发，jQuery内部也使用它来扩展属性方法，如上篇文章中讲到的noConflict方法，就是用extend方法来扩展的。在jQuery的API手册中，我们看到，extend实际上是挂载在jQuery和jQuery.fn上的两个不同方法，尽管在jQuery内部jQuery.extend()和jQuery.fn.extend()是用相同的代码实现的，但是它们的功能却不太一样。来看一下官方API对extend的解释: 代码...
随着 web 发展，前端应用变得越来越复杂，基于后端的 javascript(Node.js) 也开始崭露头角，此时 javascript 被寄予了更大的期望，与此同时 javascript MVC 思想也开始流行起来。javascript 模板引擎作为数据与界面分离工作中最重要一环，越来越受开发者关注，近一年来在开源社区中更是百花齐放，在 Twitter、淘宝网、新浪微博、腾讯QQ空间、腾讯微博等大型网站中均能看到它们的身影。 本文将用最简单的示例代码描述现有的 javascr...
假设有这样一个动画功能需求：把一个div的宽度从100px变化到200px。写出来的代码可能是这样的：代码如下:function animate1(element, endValue, duration) {var startTime = new Date(),startValue = parseInt(element.style.width),step = 1;var timerId = setInterval(function() {var nextValue = parseInt(element.style.width) + step;element.style.width = nextValue + px;if (nextValue >= endValue) {clearInterval(timer...
如今网站开发越来越提倡用户体验，为用户提供便利的工具也越来越多，而在线的HTML内容编辑器应该算是其中比较“古老”的一个了。功能简单的可以为用户提供文本的样式控制，例如文字的颜色、字体大小等；而功能复杂的甚至可以提供类似Word一样的强大功能。虽然现在各种开源的编辑器非常多，但是真正好用的并不多，所以它们改进工作也一直在进行中。 如今网上多数的编辑器都有很强大的功能，相对而言，在使用中也需要很多的配置，当然...
本文主要通过以下几方面来说明懒加载技术的原理，个人前端小菜，有错误请多多指出 一、什么是图片滚动加载？通俗的讲就是：当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。 二、为什要使用这个技术？比如一个页面中有很多图片，如淘宝、京东首页等等，如果...
本文实例讲述了js图片轮播效果实现原理，分享给大家供大家参考，具体内容如下Insert title herevar timeID;var image;var current = 0;var images = new Array(5);function init(){for (var i=1;i= 5){alert('已经是最后一张了');}else{current++;setSrc(current);}}function play(){if (current >= 5){current = 0;}setSrc(++current);}原理在这呐 首先init()函数用于初始化images数组和image的值，本例中主要是利用setSrc()设置图...
面向对象的三大特性封装 所谓封装，也就是把客观事物封装成抽象的类，并且类可以把自己的数据和方法只让可信的类或者对象操作，对不可信的进行信息隐藏。封装是面向对象的特征之一，是对象和类概念的主要特性。 简单的说，一个类就是一个封装了数据以及操作这些数据的代码的逻辑实体。在一个对象内部，某些代码或某些数据可以是私有的，不能被外界访问。通过这种方式，对象对内部数据提供了不同级别的保护，以防止程序中无关的部分...
本文为大家讲解了Vue分页器实现原理，供大家参考，具体内容如下 网上搜的分页器大多是jQuery实现的，而且也不太完善，于是自己写了个分页器组件，以后再用也不慌，直接复制过去就ok，下面说说具体实现的代码和原理吧。 新闻组件template： <template><div v-if="news"><div v-for="(item, index) in newList" v-if="(index <= (newListPageIndex * 4)-1) && (index >= (newListPageIndex-1) * 4)" class="new-show-left"><div clas...
深入Vue-Router源码分析路由实现原理 使用Vue开发SPA应用，离不开vue-router，那么vue和vue-router是如何协作运行的呢，下面从使用的角度，大白话帮大家一步步梳理下vue-router的整个实现流程。 到发文时使用的版本是： - vue (v2.5.0) - vue-router (v3.0.1)一、vue-router 源码结构 github 地址：https://github.com/vuejs/vue-routercomponents下是两个组件<router-view> 和 <router-link> history是路由方式的封装，提供三种...
一、前言 数据双向绑定作为 Vue 核心功能之一，其实现原理主要分为两部分： 数据劫持发布订阅模式本篇文章主要介绍 Vue 实现数据劫持的思路，下一篇则会介绍发布订阅模式的设计。 二、针对 Object 类型的劫持 对于 Object 类型，主要劫持其属性的读取与设置操作。在 JavaScript 中对象的属性主要由一个字符串类型的“名称”以及一个“属性描述符”组成，属性描述符包括以下选项： value： 该属性的值；writable： 仅当值为 true 时...