js
文章平均质量分 61
手艺人123
知识改变命运
展开
-
VUE中CSS样式穿透
VUE中CSS样式穿透1. 问题由来在做两款H5的APP项目,前期采用微信官方推荐的weui组件库。后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库。同时将webpack顺利从3升级到4(项目结构 webpack+vue+vuex+vue-router+vant+less)。相信好多做TOB的开发朋友都会选择顺手组件库。组件库内置了很多样式,方便了我...转载 2020-03-11 21:05:45 · 508 阅读 · 0 评论 -
鼠标事件以及clientX、offsetX、screenX、pageX、x的区别
鼠标事件鼠标事件有下面这几种:1. onclick鼠标点击事件box.onclick = function(e){ console.log(e)}1232. onmousedown鼠标按下事件box.onmousedown = function(e){ console.log(e)}1233. onmouseup鼠标松开事件box.onm...转载 2019-11-19 15:17:38 · 239 阅读 · 0 评论 -
研究首屏时间?你先要知道这几点细节
做移动web页面,受移动网络网速和终端性能影响,我们经常要关注首屏内容展示时间(以下简称首屏时间)这个指标,它衡量着我们的页面是否能在用户耐心消磨完之前展示出来,很大程度影响着用户的使用满意度。怎么获取首屏时间呢?我们经常要先问自己:页面是怎么加载数据?A:加载完静态资源后通过ajax请求去后台获取数据,数据回来后渲染内容转载 2016-03-03 09:11:04 · 407 阅读 · 0 评论 -
主流浏览器内核介绍(前端开发值得了解的浏览器内核历史)
最近 “个人恶趣味” 持续发酵,突然想了解下浏览器内核的发展历史。内核首先得搞懂浏览器内核究竟指的是什么。浏览器内核又可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式转载 2016-03-03 09:10:13 · 1592 阅读 · 1 评论 -
JS 一定要放在 Body 的最底部么?聊聊浏览器的渲染机制
一、从一个面试题说起面试前端的时候我喜欢问一些看上去是常识的问题。比如:为什么大家普遍把这样的代码放在body最底部?(为了沟通效率,我会提前和对方约定所有的讨论都以chrome为例)应聘者一般会回答:因为浏览器生成Dom树的时候是一行一行读HTML代码的,script标签放在最后面就不会影响前面的页面的渲染。我很鸡贼地接着问:既然Dom转载 2016-03-03 09:09:18 · 328 阅读 · 0 评论 -
JavaScript Promise API
http://wwsun.github.io/posts/javascript-promise-api.htmlJavaScript Promise APIFeb 24, 2016Promise是抽象异步处理对象以及对其进行各种操作的组件。 本文将会详细的向你介绍如何在JavaScript中借助Promise来简化异步代码流。Statement作者: 景庄,We转载 2016-03-01 16:04:42 · 571 阅读 · 0 评论 -
jQuery的deferred对象详解
jQuery的deferred对象详解作者:阮一峰一、什么是deferred对象?开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们都不是立即能得到结果的。通常的做法是,为它们指定回调函数(callback)。即事先规定,一旦它们运行结束,应该转载 2016-03-01 14:41:12 · 285 阅读 · 0 评论 -
JS一定要放在Body的最底部么?聊聊浏览器的渲染机制
https://www.91ri.org/15105.html说明: 1. 本文提到的浏览器均是指Chrome。 2. “script标签“指的都是普通的不带其他属性的外联javascript。 3. web性能优化的手段并不是非黑即白的,有些手段过头了反而降低性能,所以在讨论条件和结论的时候,虽然很多条件本身会带来其他细微的负面或正面影响,为了不使论述失去重点,不会扩展太开。转载 2016-01-27 09:33:41 · 400 阅读 · 0 评论 -
js 激活/代码执行阶段 执行顺序!
function hello(){console.log('aaa');}hello();function hello(){console.log('aaasdfasda');}hello();两次均打印aaasdfasda按我理解 ,js在 激活/代码执行阶段 定义式的函数语句会被提取出来优先执行。函数定义执行完后,才会按顺序执行其他代码也解释了为什么原创 2015-12-02 15:24:36 · 409 阅读 · 0 评论 -
大部分人都会做错的经典 JS 闭包面试题
http://www.cnblogs.com/xxcanghai/p/4991870.html目录由工作中演变而来的面试题JS中有几种函数创建函数的几种方式三个fun函数的关系是什么?函数作用域链的问题到底在调用哪个函数?后话由工作中演变而来的面试转载 2015-12-15 08:45:43 · 474 阅读 · 1 评论 -
Javascript 操作 DOM 常用 API 总结
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识。基本概念在讲解操作DOM的api之前,首先我们来复习一下一些基本概念,这些概念是掌握api的关键,必须理解它们。Node类型DOM1级定义了一个Node接口,转载 2016-03-03 09:13:27 · 343 阅读 · 0 评论 -
用 JavaScript 对抗 DDOS 攻击
继续趣事分享。上回聊到了大学里用一根网线发起攻击,今天接着往后讲。不过这次讲的正好相反 —— 不是攻击,而是防御。一个奇葩防火墙的开发经历。第二学期大家都带了电脑,于是可以用更高端的方法断网了。但设备先进反而没有了 GEEK 的感觉。于是,决定做些其他更有意义的事。一天,几个好友在吐槽,他们的游戏服务器又被打垮了,接着讨论起各种防护方案。在过去,每当听到转载 2016-04-09 09:11:58 · 500 阅读 · 0 评论 -
深入理解css3中的flex-grow、flex-shrink、flex-basis (转)
flex为css的布局带来了新的时代,作为一个重构工程师,我们再也不用局限于float和position,特别是在移动端,我们可以利用flex轻松实现以往float和psition很难实现甚至是无法实现的布局。 本文主要讲解flex的三个子属性:flex-grow、flex-shrink、flex-basis。他们只是博大精深的flex中的一部分,本文默认你对flex已经有初步的了解,如果不了解,...转载 2019-04-03 21:29:49 · 199 阅读 · 0 评论 -
为什么设计稿是750px
前一阵子,在研究了物理像素、设备独立像素和css像素以及viewport后,我产生了一个问题,就是为什么我们的UI所给的设计稿是750px。 这里所说的750px并不是绝对的,750px是iphone6的物理像素,也叫屏幕分辨率。所以这里只是泛指移动端设计稿是按照设备的物理像素所给。那先来说一下这几个像素吧。物理像素: 顾名思义,就是设备屏幕上的实际像素。也就是说这个手机被出厂...转载 2019-03-21 14:11:07 · 2557 阅读 · 0 评论 -
在JavaScript中,如何判断数组是数组?
http://developer.51cto.com/art/201608/515537.htmJavaScript有五种方法可以确定一个值到底是什么类型,分别是typeof运算符,constructor法,instanceof运算符,Object.prototype.toString方法以及Array.isArray法.如果你没有注意过这个问题,那么这原创 2016-08-06 09:53:38 · 448 阅读 · 0 评论 -
谈谈angularjs中$watch,$apply,$digest
http://my.oschina.net/Nealyang/blog/552069摘要angularJs中$watch,$apply和$digest的使用和原理大家都是到angularJS中非常屌的一个性能,数据双向绑定,这就意味着view中的数据发生任何变化的时候,这个变化也会相应的反映到scope上,也就是说scope的模型会动态更新。所以有时候我们的需求可能是要转载 2016-07-04 15:24:19 · 332 阅读 · 0 评论 -
js监听输入框值的即时变化onpropertychange、oninput
http://www.jb51.net/article/27684.htm很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感。要达到的效果 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感。比如即时显示输入框已经被输入的字节数,或者即时读取输入的值来进行搜索引导,也就是google转载 2016-07-02 10:30:41 · 3072 阅读 · 0 评论 -
Javascript 多线程?
http://www.cnblogs.com/o--ok/archive/2012/11/04/JS.html最近在遇到一个问题:HTML页面中的页面无法刷新,只能在底层全部处理完成后才能进行页面刷新。在里面已经采用SetTimeout进行了处理,但是明显没有达到预期的效果。 主要的原因是对SetTimeout这个函数并未清楚,对Javascript单线程也没有清晰的转载 2016-07-22 17:24:38 · 393 阅读 · 1 评论 -
Javascript模拟多线程
http://www.cnblogs.com/fumj/archive/2012/12/05/2802479.html两个问题:1、Node编程中所有通信都是异步执行的,如果某个事件的响应函数需要操作全局变量,则多个回调同时运行时怎么实现同步?2、群里里面的兄弟“老狗”发现了一个项目:multi-node,即使用可以用其编写多线程的网络服务。 但是node本来就是异步的,为什么还需转载 2016-07-22 17:18:51 · 384 阅读 · 0 评论 -
怎样写一个模板引擎
模板引擎是Web开发中通常用于动态生成网页的工具,例如PHP常用的Smarty、Python的Jinja、Node的Jade等。本文通过Python(Approach: Building a toy template engine in Python)和Js(JavaScript Micro-Templating)的两个简单模板引擎项目学习怎样写一个模板引擎。一般模板由下面三部分组成:转载 2016-05-12 08:33:42 · 388 阅读 · 0 评论 -
图解javascript this指向什么?
http://www.cnblogs.com/isaboy/p/javascript_this.html JavaScript 是一种脚本语言,支持函数式编程、闭包、基于原型的继承等高级功能。JavaScript一开始看起来感觉会很容易入门,但是随着使用的深入,你会发现JavaScript其实很难掌握,有些基本概念让人匪夷所思。其中JavaScript 中的 this 关键字,就是一个转载 2015-11-26 09:19:30 · 423 阅读 · 0 评论 -
JavaScript的执行上下文
网址:http://www.cnblogs.com/wilber2013/p/4909430.html在JavaScript的运行过程中,经常会遇到一些"奇怪"的行为,不理解为什么JavaScript会这么工作。这时候可能就需要了解一下JavaScript执行过程中的相关内容了。执行上下文在JavaScript中有三种代码运行环境:Global Co转载 2015-11-13 09:33:51 · 596 阅读 · 0 评论 -
Function构造函数
Function()构造函数 函数实际上是功能完整的对象 。Function类可以表示开发者定义的任何函数。用Function类直接创建函数的语法如下: var function_name = new function(arg1, arg2, ..., argN, function_body) 在上面的形式中,每个 arg 都是一个参数,最后一个参数是函数主体(要执行的代码)。这些参数原创 2015-08-04 11:05:24 · 460 阅读 · 0 评论 -
js 对象深复制,创建对象和继承
转载地址:http://www.cnblogs.com/codetker/p/4672135.html js 对象深复制,创建对象和继承。主要参考高级编程第三版,总结网上部分资料和自己的代码测试心得。每走一小步,就做一个小结。1.对象/数组深复制 一般的=号传递的都是对象/数组的引用,如在控制台输入var a=[1,2,3], b=a;b[0]=0;a转载 2015-07-30 10:47:56 · 532 阅读 · 0 评论 -
Javascript中调用一个函数(对象),使用new或者直接调用有什么区别?
这个问题绕了一下,网上搜了一下感觉这个解释最好,然后加上自己调试的页面,希望对大家有用。如果是最典型的构造函数模式,必须加上new:function Man(age){ this.sex="male"; this.age=age;}m1=Man(20);m2=new Man(21);console.log(m1);console.log(m2);m1就转载 2015-07-29 16:46:55 · 1119 阅读 · 0 评论 -
js callee和call写递归
window.onload = function(){function flexisum(a){if(a==0){return 0;}else{return a +arguments.callee(a-1);}} console.log(flexisum(4));}window.onload = function(){function flex原创 2015-07-28 21:08:45 · 837 阅读 · 0 评论 -
html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offs转载 2015-01-22 21:29:33 · 430 阅读 · 0 评论 -
JS - caller,callee,call,apply 概念[转载]
js的arguments,callee,caller,length,prototype属性 我用几个例子简单的介绍下这几个函数 [html] view plaincopy> html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Conte转载 2015-01-16 14:31:46 · 391 阅读 · 0 评论 -
js类,静态类,方法属性继承!
转载 2015-01-14 20:06:23 · 578 阅读 · 0 评论 -
canvas transform用法!
转载 2015-01-14 23:02:39 · 888 阅读 · 0 评论 -
js constructor问题!
function Oa(){ this.gender = '男'; //注意这里}Oa.prototype={ fn1:function(){}, fun2:function(){}}function Ob(name,age){ this.name=name; this.age=age;}var c原创 2015-07-30 21:56:42 · 618 阅读 · 0 评论 -
js 重载问题
针对原型和构造器的重写,会影响到重写前所创建实例的一些重要特性-例如继承性的识别。因此这种重写通常被要求在引擎最先装入的代码中进行。令人遗憾的是,开发人员通常无法保证这一点。所以在多个JavaScript扩展框架复合使用的情况下,经常会因此而出现不可控制的局面。function MyObject() { } var obj1 = new MyObject();转载 2015-08-03 21:30:23 · 393 阅读 · 0 评论 -
Array.prototype.slice.call(arguments)
我们知道,Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组,除了IE下的节点集合(因为ie下的dom对象是以com对象的形式实现的,js对象与com对象不能进行转换)如:1 var a={length:2,0:'first',1:'second'};2 Array.prototype.slice.call(a);转载 2015-08-04 09:40:18 · 343 阅读 · 0 评论 -
JavaScript中的this
转载网址:http://www.cnblogs.com/wilber2013/p/4909505.html前面两篇文章介绍了JavaScript执行上下文中两个重要属性:VO/AO和scope chain。本文就来看看执行上下文中的this。首先看看下面两个对this的概括:this是执行上下文(Execution Context)的一个重要属性,是一个与执行上下文相关转载 2015-11-13 10:44:23 · 375 阅读 · 0 评论 -
理解JavaScript的作用域链
转载地址:http://www.cnblogs.com/wilber2013/p/4909459.html上一篇文章中介绍了Execution Context中的三个重要部分:VO/AO,scope chain和this,并详细的介绍了VO/AO在JavaScript代码执行中的表现。本文就看看Execution Context中的scope chain。作用域转载 2015-11-13 10:45:39 · 544 阅读 · 0 评论 -
动态加载js并且判断是否加载完成!
function include_js(file) { var _doc = document.getElementsByTagName('head')[0]; var js = document.createElement('script'); js.setAttribute('type', 'text/javascript'); js.setAttrib原创 2015-10-22 20:47:32 · 6962 阅读 · 0 评论 -
dom doucument bom window解释!
转载地址:http://www.zhihu.com/question/33453164先说 DOM:DOM 全称是 Document Object Model,也就是文档对象模型。DOM 就是针对 HTML 和 XML 提供的一个API。什么意思?就是说为了能以编程的方法操作这个 HTML 的内容(比如添加某些元素、修改元素的内容、删除某些元素),我们把这个 HTML转载 2015-10-23 10:20:51 · 464 阅读 · 0 评论 -
Js作用域与作用域链详解
转载地址:http://blog.csdn.net/yueguanghaidao/article/details/9568071一直对Js的作用域有点迷糊,今天偶然读到Javascript权威指南,立马被吸引住了,写的真不错。我看的是第六版本,相当的厚,大概1000多页,Js博大精深,要熟悉精通需要大毅力大功夫。一:函数作用域 先看一小段代码:[ja转载 2015-10-21 17:25:35 · 310 阅读 · 0 评论 -
js MD5加密 和 base64编码实现!
网络上不可以传输明文密码...今天我去网上找了一个例子,有关于JS md5加密:下载包:md5.jsmd4.jssha1.js使用MD5加密的方法:下载md5.js文件,在网页中引用该文件:在你需要使用MD5加密的地方如此调用:hash = hex_md5("input string");其他原创 2015-10-19 10:53:35 · 3068 阅读 · 0 评论 -
js 关于在子类构造函数中加入call(this)的用意!
先上例子:function Animal(a,b){ this.a = a; this.b = b; }function Dog(c){ //Animal.call(this);//注释}Dog.prototype = new Animal();Dog.prototype.constructor = Dog;var dog1 = new Dog('tom');co原创 2015-08-07 10:01:28 · 2157 阅读 · 0 评论