- 博客(66)
- 收藏
- 关注
RSS订阅原创 移动端 window.history.go(-1)不刷新的问题
移动端的h5开发，总是会有各种各样的问题，世间本没有bug，写着写着就有了。近期开发遇到这样一个功能：A页面上有一段链接，通过window.location.href = 'xxx'， 跳转到另一个页面B，完成一系列操作后，又要跳回来之前的A，但这个时候A页面应该是需要重新刷新的，数据要重新请求，下面贴出A 页面部分代码：但测试华为及小米低端版本的时候，并没有刷新，抓包并没有抓到请求，但是奇怪的是，代码确实运行到请求接口的数据了，可能的原因应该是缓存了，于是搜索了一下，加上了一个方法：这个方
2020-05-20 17:38:34
2985
原创 一次白屏经历
立案标题：公司的app嵌入的H5页面出现白屏案发场景：该页面仅仅显示出标题，因其他原因没有抓包处理，设备 android 6.0.1 具体机型由图片可知（此处给大家介绍一个方便好用的调试移动端的组件 vconsole，直接install即可，原谅我移动端开发经验少，真的第一次用啊！）开始分析：DOM是空的，第一反应就是去看一下DOM，但是根本就没有给我这个机会，我的vconsole根本就没有显示出来，难道是react代码没解析成功？在js中加入log，也都没有任何反应，就像没有执行js一样。
2020-05-13 20:00:22
199
原创 js之hook
JS中的钩子：钩子是将需要执行的函数或者其他一系列动作注册到一个统一的入口，程序通过调用这个钩子来执行这些已经注册的函数，还有就是提供一个可以响应默认流程的机制的时机，像react中生命周期的componentWillMount,componentDidMount等，这些都是钩子函数。有的时候，在相同的页，或者不同的页中我们会写很多重复的代码，比如一些初始化的条件，那最近写过的栗子来说：在
2017-03-06 16:42:50
3613
原创 关于前端开发中的模块化理解
作为一个前端开发者，掌握必要的专业知识是必要的，css,js,html,frame等，但对于规范还是要有一定的掌握，如开发规范，前端越来越复杂，其中模块化的问题引起重视，工程的模块化究竟是什么？首先来了解下各种概念：（1）CommonJS 它就是为了JS的表现来制定规范，因为js中没有模块的功能，CommonJS应运而生，它定义的模块分为：模块引用require 、模块定义export
2017-02-10 14:55:36
2761
原创 初识MVVM的心得
师傅给我耐心的讲了很久，之前的基于jquery + mvc思想久了，换成MVVM一时还不好适应，还是要多练习，总结下目前为止，对于MVVM的认识（以knockout为例子）（1）在viewModel中，主要定义数据的属性和方法，一些事件通过data-bind等绑定到标签上，而不再是直接操作DOM属性。（2）写代码之前，实现功能已经不是最重要的了，致命的是你的架构和设计，好坏直接影响到你代码
2017-01-19 15:16:00
341
转载 关于sammy的初理解
1.概要首先，Sammy.js是一个微型的js框架，用来简化javascript应用程序的编写，这个内核包含一个简单的API，用于定义其定义的路由和事件之间的绑定关系。2.它到底干了什么（以用户首次请求页面的过程）（1）用户输入网址地址，服务器端处理该请求，将index.html页面，以及该页面中所引用的css,js等资源文件（2）浏览器在渲染页面的过程中，由于sammy通过js捕
2017-01-13 19:05:37
2599
原创 可枚举属性和不可枚举属性
在js中，对象的属性分为可枚举和不可枚举，它们是由属性的enumerable值决定的，不可枚举属性，用for...in是遍历不到的，js中基本包装类型的原型属性是不可枚举的，但是非基本包装类型的原型属性是可以枚举的。其中，定义Object对象的prototypeIsEnumerable()方法可以判断此对象是否包含某个属性，并且这个属性是否可枚举。再次，Object。defineProtp
2017-01-12 17:50:18
7122
2
原创 你不知道的js（中）之基本类型
基于你不知道的js中，里面的内容都是基于es6的引擎环境，所以增加了一种内置类型：一共是：（1）null（2）undefined（3）boolean（4）number（5）string（6）object（7）symbol当你使用typeof 来查看类型的时候，返回的是类型的字符串，其中，对于null的判断，我们采用复合条件来检测null值的类型：var a =
2017-01-10 11:36:23
449
原创 line-height
line-height---行高（两个baseline之间的距离，基线）一、属性值（1）normal:默认 字体大小/100（2）number 由当前元素的font-size大小决定如：if(line-height=1.5) than line-height = 1.5 * 20px = 30px;（3）使用具体值（4）使用百分值如if(line-height=15
2017-01-01 18:46:30
320
原创 overflow
一、overflow基本属性（1）visible默认 超出部分表现出来（2）hidden 超出部分隐藏（3）scroll 滚动条（4）auto 哪侧溢出 那边出现滚动条（5）inherit二、作用的前提（1）非display:inline（2）对应方位的尺寸限制 width/height/max-width/max-height/absolute拉伸三、ove
2017-01-01 18:14:23
938
原创 margin
一、元素尺寸我们看下标准盒模型最里面的黑色实现框内宽为可视尺寸：clientWidth（标准）之外的一层虚线内宽为占据尺寸：outerWidth（包含margin）二、margin 与可视尺寸（1）是用于没有设定width/height的普通block水平元素不包括float absolute/fixed inline table-cell（2）只适用于水平方向
2017-01-01 15:13:23
345
原创 relative
一、relative and absolutrelative对于absolute的限制：（1）限制定位当absolute使用top/left/bottom/right进行定位时，是相对最近已定位的父元素而言的（2）限制层级与最近已定位父元素的层级相同（3）限制超越overflowabsolute可以不管overflow:hidden（或者overflow:scroll等
2017-01-01 12:49:55
593
原创 padding
一、对于block水平元素（1）当padding的值 突然增大（很大，大于元素宽高），一定会影响尺寸（2）当width:非auto,不会影响尺寸（3）当width:auto或者box-sizing为border-box,而且padding值没有暴走，不会已经尺寸二、对于inline元素水平padding影响尺寸，垂直padding不影响尺寸，但是会影响背景色（占据空间）实现
2017-01-01 12:19:21
996
原创 border
一、border-width不支持百分比边框不会因为设备大就增大，css中类似的还有：outline,box-shadow,text-shadow,...二、支持关键字thin:1pxmedium:默认值 , 3px （border-style:double 至少3px才有效果）thick:5px三、类型border-style:solid 实线border-st
2016-12-31 23:55:28
393
原创 absolute
一、absolute and float 是兄弟关系，因为二者有两个共性：包裹性破坏性二、有时我们在做定位的时候，经常这样：.father{position:relative;}.child{ position:absolute;top:10px;left:10px}但是实际上，relative and absolute根本没有多大关系，当独立使用absolute的时候，你
2016-12-31 23:07:51
434
原创 float
CSS中浮动的出现已经有很长时间的历史了，但是它的初衷是为了解决和Word中文字环绕效果类似的图文环绕效果，而不是图片一行，文字一行。所以它的特有的行为表现就和这个功能紧密联系在一起。1.浮动的特性：包裹性（宽高还在）具有包裹性的其他小伙伴有：display：inline-block/table-cell/...position：absolute/fixed/stickyove
2016-12-31 14:56:04
378
原创 c3&h5权威指南（1）
HTML5是继HTML4后的一股强大力量，它封装了很多API，我们可以不用再写好几行javascript来实现一个简单的功能了，而一个标签就可以解决问题，它有很强大的语义化标签，让布局简明易懂，利于维护，最最重要的是它兼容性特别厉害，好像就是为了解决兼容性而生的一样，虽然语法不一样了，但也同时兼容HTML4的写法，是不是很强大。一、新增的结构元素1）section表示页面中的一个内容区
2016-12-27 22:48:47
500
原创 Flex
Flex：Flexible Box 江湖人称“弹性布局”，对于网页布局，Flex以其简便、完整、响应式获得所有浏览器的信赖。一、基本概念1.任意一个容器都可以指定为Flex布局：display: flex;2.行内元素：display: inline-flex;3.Webkit内核的浏览器： display: -webkit-flex; /* Safari */ display
2016-12-23 21:52:44
297
原创 链式调用
function Foo(name){this.name = name}Foo.prototype.read = function(){console.log(this.name+'read');return this;}Foo.prototype.listen = function(){console.log(this.name + 'listen');}
2016-12-16 20:35:46
347
原创 你不知道的javascript（六）
原型JavaScript中的对象有个特殊的内置属性叫：Prototype，其实就是对于其他对象的引用，几乎所有对象都会被赋予一个非空的prototype的属性值，当你试图引用对象的属性时会触发get操作，这个操作第一步就是检查对象自身是否有这个属性，有的话就使用它，没有的话，就会继续访问对象的原型链，直到找到，或者没找到返回undefined。最顶端的原型是Object.prototype。使
2016-12-15 16:16:05
409
原创 layout
布局是常见的网页设计，下面介绍下两种布局方式：两列布局 and 三列布局一、两列布局1）左侧宽高固定，右侧自适应但是不浮动 #left{ height: 300px; width: 100px； background: red; float: left; } #right{ height: 300px; background: yellow
2016-12-11 13:18:33
311
原创 http的坑
http填坑：http客户端发起请求，创建端口->http服务器在端口监听客户端请求->http服务器向客户端返回状态和内容当输入一个url的时候发生了什么：1.chrome搜索自身的DNS缓存输入chrome://net-internals/#dns2.搜索操作系统自身的DNS缓存（如果此时没有找到缓存或是浏览器的缓存失效了）3.系统中也没有找到缓存，读取本地
2016-12-11 11:48:38
313
原创 position
关于定位：static:没有定位（默认值，正常它是在文本流中应该出现的位置）relative:相对定位（相对自己的初始位置），占有的空间不释放absolute:绝对定位（相对于最近已定位的父元素），占有的空间释放fixed:固定定位（相对于浏览器），占有的空间释放（IE6不支持）
2016-12-11 11:28:46
265
原创 你不知道的javascript（四）
提升之前我们讲过var a = 2;后发生了什么，它回进行两个部分，第一部分是编译，而第二部分是执行。故应该是声明在前，赋值在后a =2;var a;console.log(a);//2上面三行代码被这样执行：var a ;a = 2;console.log(a);but ...console.log(a);//undefinedvar a = 2;
2016-12-09 16:07:46
310
原创 你不知道的javascript（三）
函数作用域和块作用域作用域包含了一系列的“气泡”，每一个都可以作为容器，其中包含 了标识符（变量、函数）的定义。这些气泡互相嵌套并且整齐地排列成蜂窝型，排列的结构是在写代 码时定义的。 1.函数中的作用域javascript具有基于函数的作用域，每声明一个函数都会为其自身创建一个气泡，事实上这不完全正确function foo(a){ var b = 2;
2016-12-09 11:13:56
290
原创 你不知道的javascript（二）
1.词法作用域 就是定义在词法阶段的作用域，作用域查找会在找到第一个匹配的标识符时停止。在多层的嵌套作用域中可以定义同名的标识 符，这叫作“遮蔽效应”（内部的标识符“遮蔽”了外部的标识符）。抛开遮蔽效应，作用域查找始终从 运行时所处的最内部作用域开始，逐级向外或者说向上进行，直到遇见第一个匹配的标识符为止。全局变量会自动成为全局对象（比如浏览器中的window对象）的属性，因
2016-12-08 20:47:12
323
原创 你不知道的javascript（一）
1.引擎从头到尾负责整个javascript程序的编译及执行的过程。它可以根据需要创建并储存变量。编译负责语法分析及代码生成等。作用域负责收集并维护由所有声明的标识符（变量）组成的一系列查询，并实施一套非常严格的规则，确定当前执行的代码对这些标识符的访问权限。先看看他们三兄弟的大概关系：对于声明一个变量并赋值的过程。1） 首先，vara在其作用域中声明新变量。这
2016-12-08 18:26:09
262
原创 javascript 中的各路for循环
一、for 看下最简单也是我们最普遍使用的 const arr = [1,2,3]; for(let i=0;i<arr.length;i++){ console.log(arr[i]); } for(let i=0;len=arr.length,i<len;i++){ console.log(arr[i]); console.lo
2016-12-07 10:55:59
249
原创 javascript的设计模式
一、单例模式var a ={ attr:'1', func:function(){ console.log(haha); }}二、实例化function A(param){ this.attr = param; this.func= function(){ console.log(this.attr); }
2016-11-30 20:32:53
223
原创 JS对象（1）
1.对象的语法对象来自于两种形式：声明形式 and 构造形式一个对象的字面语法是这样：var obj = { key:value}构造形式是这样：var obj = new Object();obj.key = value;在JavaScript中的六种主要的类型有：string number boolean null undefine objec
2016-11-17 19:23:36
300
原创 hasOwnProperty() and isPrototypeOf()
南来的，北往的，注意注意，请注意，hasOwnProperty() and isPrototypeOf()都是Object.prototype下面的两个方法，二者的区别：一、hasOwnProperty() 用来判断某个对象是否含有指定的自身属性obj.hasOwnProperty('a')//实例obj是否含有属性a,有->true,else->false,但是这个方法会忽略从原型继
2016-11-01 11:08:11
350
原创 arguments
1.什么是arguments:它是一个类数组对象，代表传给一个function的参数列表。它的内容表示了函数执行时传入函数的所有参数，可以用arguments[0],arguments[1]...来获取单个参数。可以用arguments.length来获取参数个数 function test(){ console.log(arguments); } test
2016-11-01 09:14:57
255
原创 bind , call and apply
之前记录过神奇的this，我们要想随着自己的意愿掌控this,那就需要这三个小帮手，哈哈，bind call and apply.look a example please:var a = { user:"路飞", fn:function(){ console.log(this.user); //路飞 }}var b = a.fn;b.call
2016-10-31 18:28:02
220
原创 神奇的this
有一点很重要，this是个变色龙，它指向谁是不定的，也不是在函数定义的时候确定的栗子1：function a(){ var user = "追梦子"; console.log(this.user); //undefined console.log(this); //Window}a();window.a();栗子中的函数a 是window的
2016-10-31 15:52:52
219
原创 关于原生事件绑定和jquery的On
先简单说明下addEventListener这个函数，代码如下：1.window.onload = function(){ var a = document.getElementById("a"); a.addEventListener("click",function(){ console.log("a1"); }) a.add
2016-10-28 19:34:33
409
原创 know工厂函数and构造函数
工厂函数涉及到了设计模式级别的概念，无论是面向对象的编程还是面向过程的，都适用，而构造函数是语法级别的概念，需要面向对象的语法特性来支持，例子如下：1.工厂函数function person_fatory(name,age,sex){ var person={}; person.name = name; person.age = age; person.sex =
2016-10-08 11:16:53
248
原创 深入AngularJs(2)
1.AngularJS默认在一个html界面中只启动一个 ng-app 模块，而且是界面中第一次出现的那个使用 ng-app 声明的模块.且使用ng-app，页面加载时会这样处理：angular找到ng-app标记后，首先加载与module相关的directive创建应用相关的injector（依赖管理器）开始对ng-app为根节点的DOM“编译”2
2016-10-08 10:15:30
260
原创 深入AngularJs(1)
angularJS被称为前端的MVC可以这样理解：View(视图), 即 HTML。Model(模型), 当前视图中可用的数据。Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。1.解释：【这里面是对实例的解释】AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。
2016-10-07 18:41:30
266
原创 form表单与ajax提交
当使用ajax提交数据的时候，都是不刷新页面的，但是当你将一些input中的数据敲出来时，运行还是会刷新，这个时候就不要写submit了，它默认就是刷新页面的，改过来之后还是不好用，再次检查下，是不是放在了form中,有的时候即使就写了这么干净的外衣，浏览器也会刷新页面，最保险的做法就是去掉，什么也不写。（仅限参考）
2016-09-18 19:32:35
444
原创 500 error
关于使用ajax（get）异步提交的时候，服务器报了一个错误，显示的是500 internet server error,网络上并没有详细的案列，一点点测试的时候，发现原来是数据库采集数据的问题，没有匹配到合理的字段，可能报500错误的原因不止一点，仅作为参考。
2016-09-16 10:02:02
366
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人