Johnny Liao的博客

在日常开发过程中，如果我们的程序出问题了，要找出是哪里导致的问题的时候，往往会遇到一个变量在10多20多个地方被改变了，然后找不到时哪一次的改变导致的异常；笨的方法也有，就是每一个有可能改到的地方都加上一个console.log，通过log一个数字来判断，它执行到哪了，为什么只跑到那一步。这种方法的缺点也很明显，就是耗时耗力。...

首先，先定义滚动的子组件ScrollContent ， 定义data的属性：data(){ return { isFixed: false, nameTop: '', rect: 0, }}再在父组件中定义：<ScrollContent id="scrollId" :class="{'is-fixed': isFixed}"></ScrollContent>给他一个id是为了接下来的获取这一个组件，我们使用微信小程序的接口wx.createSele

首先, 大家在项目中肯定经常遇到这样的问题, 我一个函数的参数必须得依赖于上一个函数（ajax请求等）得到的结果，这种情况解决方法有几种；第一 肯定是使用 ES6的Promise， 然后在初始化promise的实例调用then方法:第二, 可以使用async await。我们首先要知道，async函数返回的一定是一个promise对象，标有await的函数，必须是一个里面含有promise操作的函数；下面给出代码let promise1 = async function (){ let pro1

原文地址： The definitive guide to XSS什么是XSS，又成为跨站点脚本我们这样定义XSS：它是由于网站没有安全处理好用户输入导致该站点成为攻击自己用户的媒介的一种攻击；通常，黑客可以利用我们网站的漏洞，注入JavaScript；利用这些漏洞， 黑客可以窃取用户的信息；通常，XSS分为三种：1. 持久型XSS2. 反射型XSS3. 基于DOM型XSS为什么...

   (之前的因为编辑器问题，导致资料丢失，大家可以使用右键-&gt;在新标签页中打开图片查看) 而《JavaScript高级编程》中是这样说的： var s = "Nicholas";var b = true;var i = 22;var u;var n = null;var o = new Object();alert(typeof s);...

问题提出往往我们在开发的过程中, 需要在另一个组件控制子组件的变量,那么,这时候,使用子组件的props来传值就可以很好地解决这个问题;需求假如我们需要将弹窗做成一个组件公用,那么在父组件或者另一个组件中,需要控制弹窗的显示与否,那么我们就需要将变量交给父组件来控制。子组件的写法如下:style&gt; .modal-mask { position: fixe

jQuery怎么把一个数组赋值给checkbox而不用两次比较循环呢(网上有些答案就是将数组的值和checkbox的值比较一致才赋值)? 只需要一次循环,既可以将值赋值上 那么循环什么呢? 当然是循环数组就ok拉,哈哈哈那么开始://jsvar arr = [1,2];for(let i = 0,len = arr.length; i&lt;len; i++){ $(...

在爆栈网（stackoverflow）上找到了一个解释： 导致这一现象的原因可能是下面三个：1.The DOM element that caused the request to be made got deleted (i.e. an IMG is being loaded, but before the load happened, you deleted the IMG node)...

const Util = {//判断是否是Object 类型 isObject(o) { //typeof 等于object的也可能是null, 所以要加上 o !== null ; 后面两个条件是防止 new Date()等类型的object, 要判断它的构造函数 return typeof o === 'object' &amp;amp;&amp;amp; o !== null &amp;amp;&amp;am...

首先，我们来实现类的机制，因为JavaScript不存在类的概念， 所以我们就参考别人的写法，写出一个类：（这是拿John Resig的class简单修改了下）var Class = (function() { var _mix = function(r, s){ for (var p in s){ if (s.hasOwnProperty(p)) { r[p] = s[p...

1，使用原生JavaScript将p的值改为abc；&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html&amp;amp;gt;&amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;title&amp;amp;gt;test&amp;amp;lt;/title&amp;amp;gt;&amp;amp;lt;/head&am

最近捣鼓了一下echarts，所以将相关的点记录一下；图标选项legend 图例 legend: { data: [], // 图标数据 left: 'center', //定位 top: '1%', itemWidth: 11,//图例的宽度 ...

在最后一页,要求滚动到最后一页的时候, 再滚一下, 就展示备案消息等, 就需要调整一下.初始化的时候, js:slidesPerView: 'auto',css:swiper-container .swiper-slide{ height:100%;}.swiper-container .swiper-slide:last-child{ height:104px; ...

之前在谷歌找了很多资料,都没有设置成功,之后查到官方文档之后,才成功; 官网文档是这个示例:$http({ url: url, type: type, headers: { }}).then(function(data){}, function(d){})一般来说,如果你前端分离,就必然会遇到cors(资源共享问题), jquery的设置较为简单:$.ajaxSetup(

wx:for主要用于循环输出数组,对象等; const cityList= [{ &quot;id&quot;: &quot;35&quot;, &quot;provincecode&quot;: &quot;150000&quot;, &quot;city&quot;: &quot;广州&quot;, &quot;code&quot;: &quot;152900&

题目：如果一对兔子每月生一对兔子；一对新生兔，从第二个月起就开始生兔子； 假定每对兔子都是一雌一雄，试问一对兔子，第 n 个月能繁殖成多少对兔子？分析一下，可以知道这应该使用函数的callee实现，因为JavaScript中函数不能直接实现自调用，所以使用argument.callee来委婉实现；分析规律，可知，第一个月是1，之后是2,3,5,8….，可以知道下一个月的数量是上两个月的数字之和，有

=> 的作用： 1：将this与当前词法作用域绑定； 2：简化代码； 本来需要 self = this；现在只需要()=>{…} 就可以了； 代码如下：var obj = { id: id, cool：function Fn(){ setTimeout(()=>{ console.log(this.id},100);} }

1，工厂模式function createPerson(name, age){ var o = new Object(); o.name = name; o.age = age; o.sayName = function(){} return o;}//用函数来封装以特定接口创建对象的细节var p1 = createPerson("mike", 25);2，构造函数模式

二话不说，先上代码：function callBySharing(k){ k.push(1);}m = [];callBySharing(m);console.log(m);//猜猜输出什么因为在调用中， m对于函数callBySharing（） 来说是可见的，所以最后会输出[1];这就是分享传值还有一个就是 引用传值，int change(a, *b

注入类似于sql注入，在输入内容上动手脚，然后造成标签闭合的现象，再写入恶意 的js；例如： &lt;input type="text" value="$var"&gt; 输入的内容如果是 " onclick = "javascript_function()" &gt; 在遇到有字符限制的情况下，可以将两个input之间的内容注释掉， 再在之间构建恶意的js&lt;in...

两个节点之间可能存在的关系：parentNode(每个节点)，childNodes,firstChild,lastChild,nextSibling(),previousSibling()节点之间任意移动:节点A放在childNodes末尾： someNode.a(A)节点A放在ch

最近遇到的一个怪事， Number("a")输出是NaN, 但就是不能与NaN这个字符串来比较，后来查了才知道，应该使用isNaN()函数来判断isNaN(Number("a"))他文档规定，就算将Number("a")的值赋值给一个变量，但也无法与任何一个类型的NaN做比较。

//使用setInterval实现渐隐藏function myFadeout(ele){ var target = 1, speed = 1/50; var timer = setInterval(function(){ if(!parseFloat(ele.style.opacity) > 0){ ele.style.opacity = 1; } if(targ

1.减少请求（1）图片分类合并。（2）减少CSS文件请求：a.多个CSS文件合并为一个。b.少量CSS样式内联。c.避免使用import的方式引入CSS文件。2.减少文件大小（1）减少图片大小：a.选择合适的图片格式PNG或者JPG。b.用工具无损或者有损的压缩图片，比如ImageOptim，ImageAlpha，JPEGmini等工具。（2）CSS值缩写，比如margin,paddin

promise被原生JavaScript支持，可以说是前端的一个里程碑。用法（代码参照自https://developers.google.cn）：var promise = new Promise(function(resolve, reject) { // do a thing, possibly async, then… if (/* everything turned o

//去重 //return array unique: function(arr){ return arr.concat.sort().filter((item, index, arr ){ return !index || item != arr[index-1]; }) }, //去重2 unique2: function(arr){ re

/返回最多x位整数，最多y位小数

Slider 使用： div class="banner"> div id="bannerBody">div> div class="m-banner"> ul class="m-cursor"> li class="prev">li> li class="cursor">1li> li class="cursor">2li>

经典冒泡排序 从小到大排序 JavaScript实现function Bubble(array){ for(var i = 0, len = array.length; i< len; i++){ for(var j= i+1, len = array.length; j< len; j++){ if(array[j] > array[i]){ var c = arr

引用一段JavaScript权威指南的代码：function counter(){var n=0;return {counter: function(){ return n++;},reset: function(){ n = 0;} };}var c = counter(), d = counter();c.count();d.count();c.reset();