无标题

[megabinge-blog]

web前端兼容性问题总结

web前端兼容性问题总结 1.   HTML对象获取问题

FireFox：document.getElementById(“idName”); ie:document.idname或者document.getElementById(“idName”). 解决办法：统一使用document.getElementById(“idName”);

2.    const问题

说明:Firefox下,可以使用const关键字或var关键字来定义常量; IE下,只能使用var关键字来定义常量. 解决方法：统一使用var关键字来定义常量.

3. event.x与event.y问题

说明:IE下,event对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性. 解决方法：使用mX(mX  =   event.x  …

View On WordPress

[megabinge-blog]

一些零散的前端总结-九（设计模式）

一、观察者模式：

在软件开发设计中是一个对象(subject)，维护一系列依赖他的对象（observer），当任何状态发生改变自动通知他们。强依赖关系 简单理解：数据发生改变时，对应的处理函数就会自动执行。一个Subjet,用来维护Observers,为某些event来通知（notify）观察者

二、发布-订阅者 有一个信息中介，过滤 耦合性低 它定义了一种一对多的关系，可以使多个观察者对象对一个主题对象进行监听，当这个主题对象发生改变时，依赖的所有对象都会被通知到。

两者的区别： 1.观察者模式中，观察者知道Subject ,两者是相关联的，而发发布订阅者只有通过信息代理进行通信 2.在发布订阅模式中，组件式松散耦合的。正好和观察者模式相反。 3.观察者大部分是同步的，比如事件的触发。Subject就会调用观察者的方法。而发布订阅者大多数是异步的（） 4.观察者模式需要在单个应用程序地址…

View On WordPress

[megabinge-blog]

一些零散的前端总结-九（手写代码）

一、动手实现一个bind（原理通过apply，call） 一句话概括：1.bind()返回一个新函数，并不会立即执行。 2.bind的第一个参数将作为他运行时的this，之后的一系列参数将会在传递的实参前传入作为他的参数 3.bind返回函数作为构造函数，就是可以new的，bind时指定的this值就会消失，但传入的参数依然生效 Function.prototype.bind = function (obj, arg) { var arg = Array.prototype.slice.call(arguments, 1); var context = this; var bound = function (newArg) { arg = arg.concat(Array.prototype.slice.call(newArg); return context.apply(obj, arg)

View On WordPress

[megabinge-blog]

一些零散的前端总结-八（服务器端）

一、状态码：

2XX（成功处理了请求状态） 200 服务器已经成功处理请求，并提供了请求的网页 201 用户新建或修改数据成功 202 一个请求已经进入后台 204 用户删除成功 3XX（每次请求使用的重定向不要超过5次） 304 网页上次请求没有更新，节省带宽和开销 4XX（表示请求可能出错，妨碍了服务器的处理） 400 服务器不理解请求的语法 401 用户没有权限（用户名，密码输入错误） 403 用户得到授权（401相反），但是访问被禁止 404 服务器找不到请求的网页， 5XX（表示服务器在处理请求的时候发生内部错误） 500 服务器遇到错误，无法完成请求 503 服务器目前无法使用（超载或停机维护）

二、304的缓存原理

（添加Etag标签.last-modified） 304 网页上次请求没有更新，节省带宽和开销 1.服务器首先产生Etag,服务器可在稍后使用它来判断页面是否被修…

View On WordPress

[megabinge-blog]

一些零散的前端总结-七（性能优化）

一、webpack打包文件体积过大？（最终打包为一个js文件） 1.异步加载模块 2.提取第三库 3.代码压缩 4.去除不必要的插件

如何优化webpack构建的性能 一、减少代码体积 1.使用CommonsChunksPlugin 提取多个chunk之间的通用模块，减少总体代码体积 2.把部分依赖转移到CDN上，避免每次编译过程都由Webpack处理 3.对一些组件库采用按需加载，避免无用的代码 二、减少目录检索范围 ·在使用loader的时候，通过制定exclude和include选项，减少loader遍历的目录范围，从而加快webpack编译速度

三、减少检索路经：resolve.alias可以配置webpack模块解析的别名，对于比较深的解析路经，可以对其配置alias

二、我们把开发中的所有资源（图片，js、css文件）都看成模块，通过loader和plugins来对资源进行处…

View On WordPress

[megabinge-blog]

一些零散的前端总结-六（React）

一、react和vue的区别 => 相同点： 1.数据驱动页面，提供响应式的试图组件 2.都有virtual DOM,组件化的开发，通过props参数进行父子之间组件传递数据，都实现了webComponents规范 3.数据流动单向，都支持服务器的渲染SSR 4.都有支持native的方法，react有React native， vue有wexx => 不同点： 1.数据绑定：Vue实现了双向的数据绑定，react数据流动是单向的 2.数据渲染：大规模的数据渲染，react更快 3.使用场景：React配合Redux架构适合大规模多人协作复杂项目，Vue适合小快的项目 4.开发风格：react推荐做法jsx + inline style把html和css都写在js了 vue是采用webpack + vue-loader单文件组件格式，html, js, css同一个文件

二、redux中…

View On WordPress

[megabinge-blog]

一些零散的前端总结-五（vue）

一、介绍下MVVM(数据的双向绑定） M: model数据模型 V: view 界面 MV:作为桥梁负责沟通view跟model 只关心数据的流传，减少强耦合性。最关键的就是数据的双向绑定 关键步骤：1.实现数据监听器Observer，用object.defineProperty()重写数据的get/set。值更新就在set中通知订阅者更新数据 2.实现模板编译compile，深度遍历dom树，对每个元素节点的指令模板替换数据以及订阅数据 3.实现watch用于连接Observer和compile，能够订阅并接受每一个属性的变动的通知，执行指令绑定的相应的回调函数，从而更新数据

mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低， 加载速度变慢，影响用户体…

View On WordPress

[megabinge-blog]

一些零散的前端总结（四）

一、koa中间件执行机制 1.添加中间件的方式是使用Koa实例的use方法，并传入一个generator函数，这个generator函数接受一个next参数 2.use的原理：function Application () {this.middleware = [] // 这个数组就是用来装一个个中间间的} 3.每次执行use方法，就把外面传进来的generator函数push到middleware数组中 app.use = function (fn) {this.middleware.push(fn)} 4.koa中是预先通过use方法，将请求可能会经过的中间间装在一个数组中。 5.callback函数就是请求到来的时候执行的回调。把装着中间件middleware的数组作为参数传递为compose这个方法。 6.componse把毫无关系的一个个中间件给收尾串起来了，就好比我们平常的烤面筋

View On WordPress

[megabinge-blog]

一些零散的前端总结（三）

一、 this的指向 1.当函数作为对象的方法被调用时，this就会指向该对象。 2.作为普通函数，this指向window。 3.构造器调用，this指向返回的这个对象。 4.this的隐式丢失 5.箭头函数 箭头函数的this绑定看的是this所在函数定义在哪个对象下，就绑定哪个对象 如果有嵌套的情况，则this绑定到最近的一层对象上

this指向的固定化，并不是因为箭头函数内部有绑定this的 机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外 层代码块的this。正是因为它没有this，所以也就不能用作构造函数。

怎么改变this的指向呢？ 1.使用es6的箭头函数；2.在函数内部使用that = this；3.使用apply，call，bind； 4.new实例化一个对象

二、什么是闭包和原型链 内部函数可以访问定义他们外部函数的参数和变量。（作用域链的向上…

View On WordPress

[megabinge-blog]

一些零散的前端总结（二）

一、flex弹性布局， 可以简单的使一个元素居中（包括水平和垂直居中） 栅格式系统布局，bootstrap grid

二、圣杯和双飞翼布局 三栏是布局（两边两栏宽度固定，中间栏宽度自适应） 方案一：position（绝对定位法） center的div需要放在最后面 绝对定位法原理将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的center会自然流动到他们的上卖弄，然后margin属性，留出左右两边的宽度。就可以自适应了。 方案二：float 自身浮动法 center的div需要放到后面 自身浮动法的原理就是对左右使用float:left和float：right，float使左右两个元素脱离文档流，中间的正常文档流中，使用margin指定左右外边距对其进行一个定位。 圣杯布局：原理就是margin负值法。使用圣杯布局首先需要在center元素外部包含一个div,包含的d…

View On WordPress

[megabinge-blog]

一些零散的前端总结

一、css盒模型 css中的盒子模型包括IE盒子模型和标准的W3C盒子模型。 border-sizing: border-box, inherit, content-box 标准盒子模型： 左右border+左右padding+contentwidth IE盒子模型border-box: width = content+padding+border 元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制 inherit: 从父类继承box-sizing的值

二、前端一像素问题（画一条0.5px的线） * transform: scaleY（0.5） 使用伪元素设置1px的边框，然后对边框进行缩放(s caleY) 实现思路： 1、设定目标元素的参考位置 2、给目标元素添加一个伪元素before或者after，并设置绝对定位 3、给伪元素添加1px的边框 4、用box-sizing:…

View On WordPress

[megabinge-blog]

每个程序员都会的35个jQuery小技巧！

禁止右键点击 $(document).ready(function(){ $(document).bind(“contextmenu”,function(e){ return false; }); });

隐藏搜索文本框文字 Hide when clicked in the search field, the value.(example can be found below in the comment fields) $(document).ready(function() { $(“input.text1”).val(“Enter your search text here”); textFill($(‘input.text1’)); }); function textFill(input){ //input focus text function var…

View On WordPress

[megabinge-blog]

Editplus下载与应用

软件介绍

       可处理文本、HTML和程序语言的32位编辑器。可以通过设置用户工具将其作为C Java Php等等语言的一个简单的IDE，拥有无限制的Undo Redo功能、英文拼字检查、自动换行、列数标记、搜寻取代、同时编辑多文件、全屏幕浏览功能。它的监视剪贴板的功能，能同步于剪贴板自动将文字贴进EditPlus的编辑窗口中，让你省去粘贴的步骤。使用EditPlus所提供的工具就可以直接进行网页的编辑与创作，还可以设置工程并进行多文件查找；代码片断；自动完成；设置标记方便跳转。

EditPlus5.0注册码

注册名 Vovan

注册码 3AG46-JJ48E-CEACC-8E6EW-ECUAW

EditPlus3.x注册码

EditPlus注册码生成器链接

http://www.jb51.net/tools/editplus/ 下载地址：

View On WordPress

[megabinge-blog]

程序员跟产品经理打起来了

产品经理：这有个方案，老板已经拍板了，马上要做，就是App的主题啊，可以根据手机壳颜色来改变。

程序员：可以，那你给我个手机壳颜色的接口吧。

产品经理：什么接口？

程序员：你不给接口我怎么知道你现在是什么手机壳颜色？

产品经理：你不能自动识别吗？？

程序员：怎么识别，你告诉我。

产品经理：那我怎么知道，这是你们开发的事情，我现在要说的是这个功能……

程序员：等一下，这个手机壳，就是市面上随便都能买的手机壳？

产品经理：是啊，不然呢？

程序员：不是什么官方开发的新型手机壳？系统能识别的那种？

产品经理：哪有那玩意啊。

程序员：那这做不了。

产品经理：怎么又做不了了？我还没说完功能你就做不了？

程序员：我要怎样才能让系统识别你TM现在手机壳的颜色？MD有没有装手机壳都识别不了好吗？

产品经理：都说了识别是你们开发的事，识别不了就开发一…

View On WordPress

[megabinge-blog]

有没有那么一个bug，会让你开始怀疑人生

你敢不敢收下测试发现的bug？

在找bug的你

找到bug的你

bug此起彼伏

相信自己，以后还会有更多bug出现。

坚持不懈修bug，不崩溃不罢休……

努力没有白费，终于……

该发表获奖感言了：我改了500个bug，但是！！

View On WordPress

[megabinge-blog]

Web前端页面浏览器兼容

什么是兼容问题，那么：

不正常的原因是什么？（不支持标签属性or存在bug）

该如何让其显示正常？

为什么浏览器会存在兼容问题？

同一浏览器，版本越老，存在bug越多，相对于版本越新的浏览器，对新属性和标签、新特性支持越少。

不同浏览器，核心技术不同，标准不同，实现方式也有差异，最终呈现出来在大众面前的效果也是会有差异。

处理兼容问题的思路：

1、要不要做？

产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）。

成本的角度 (有无必要做某件事)。

2、做到什么程度？

让哪些浏览器支持哪些效果。

3、如何做？

根据兼容需求选择技术框架/库(如jquery 1.x.x)。

根据兼容需求选择兼容工具：html5shiv、Respond.js、CSS Reset、normalize.css、Modernizr.js、 postcss。

View On WordPress

[megabinge-blog]

跨域？小意思

什么是跨域

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。

同源策略限制了一下行为：

Cookie、LocalStorage 和 IndexDB 无法读取

DOM 和 JS 对象无法获取

Ajax请求发送不出去

常见的跨域场景

所谓的同源是指，域名、协议、端口均为相同。

http://www.nealyang.cn/index.html 调用 http://www.nealyang.cn/server.php 非跨域

http://www.nealyang.cn/index.html 调用 http://www.neal.cn/server.php 跨域,主域不同

http://abc.nealyang.cn/index.html 调用 http://def.neal.cn/server.php 跨域,子域名不同

h…

View On WordPress