随笔分类 - js
摘要：浏览器对js的运行时间进行了限制1、调用栈尺寸限制 目前大部分的主流浏览器的调用栈尺寸都在10000以上。超过这个尺寸就会报栈溢出的错误2、长时间脚本限制 浏览器记录一个脚本的运行时间，一旦达到这个时间就终止它，并向用户展示一个提示框。 两种方法测量脚本的运行时间： a)语句数量 IE 500万条 b)脚本的总运行时间 FF 10s，safari 5s，chrome 通用崩溃检测系统但实际当中超过100ms的脚本，就会对用户体验产生不良影响。
阅读全文
摘要：1、当页面中的图片很多时，图片的加载可能会影响一些重要数据的加载。 图片按需加载的实现思路： 1、去掉img的src属性，代替以其它自定义属性存放图片的url。 2、判断该图片是否在首屏，如果在首屏，为图片添加src属性，并将自定义属性中的图片url赋值给src。 3、当滚动滚轮时，判断图片是否进入屏幕显示区，如果进入，为图片添加src属性，并将自定义属性中的图片url赋值给src。2、非当前显示的部分，比如当用户点击之后才显示的内容，无需事先浪费性能进行相应的解析和渲染。因为用户可能不会去点击。 内容按需加载的实现思路： 1、将非当前显示的部分放入到textarea标签中，并隐藏...
阅读全文
摘要：需要了解的概念 Content-Type：用于定义用户的浏览器或相关设备如何显示将要加载的数据，或者如何处理将要加载的数据 MIME：MIME类型就是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名，以及一些媒体文件打开方式。text/html的意思是将文件的content-type设置为text/html的形式，浏览器在获取到这种文件时会自动调用html的解析器对文件进行相应的处理。text/plain的意思是将文件设置为纯文本的形式，浏览器在获取到这种文件时并不会对其进行处理。
阅读全文
摘要：1、项目中，接触到gzip。未压缩的文件和压缩后的文件的比例可能达到：3:1。所以，gzip是网络中文件高速传输的很好方法。2、一般js、css、html文件都会在后端进行gzip。当浏览器请求这些数据时，直接传回gzip之后的文件。3、后端可以通过一定的设置（具体不了解）来开启对哪些文件进行gizp。4、项目中对Content-Type为"text/javascript", "text/xml", "text/plain"的文件默认进行压缩。5、但遇到的需求是对json文件也进行压缩。 方法为：后端将需要压缩的json文件的Cont
阅读全文
摘要：Object.create方法是ES5才引入的方法，目前尚不能在开发中应用。使用方法示例：var person = { name : "chen", sayName : function(){ alert(this.name); }}1.var myPerson = Object.create(person);myPerson.sayName() //chen2.var myPerson = Object.create(person, { name:{ value : "liang" }});myPerson.sayName(); //liang
阅读全文
摘要：在别人那里看到的，兼容IE8-的console.log的实现，以前没想过。if(typeof console == "undefinde"){ this.console = {log: function(msg){alert(msg);}}}这种方法在IE8-未开启调试模式的时候同样可以输出信息。不过IE8中开启调试模式是可以在控制台输出console.log信息的，所以这种方法的必要性有待验证。
阅读全文
摘要：在项目中，经常会看到为String、Array等对象添加方法的例子，这确实方面了使用。不过却存在潜在的危险。因为在现有的ES标准中没有的方法，可能会在之后的ES标准中出现。因此，如果之后在ES标准中出现了现在定义的方法，但实现方式或效果不同的话，将会陷入混乱。有一种防守型的用户，以定义getElementByClassName为例：if（！documnet.getElementByClassName）{ document.getElementByClassName = function(classes){ }}
阅读全文
摘要：今天第一次看到closest方法，以前也从来没用过。该方法从元素本身开始往上查找，返回最近的匹配的祖先元素。1、closest查找开始于自身，parents开始于元素父级2、closest向上查找，知道找到一个匹配就停止查找，parents一直查找到根元素，并将匹配的元素加入集合3、closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象
阅读全文
摘要：typeof可以检测的类型有：string、number、boolean、undefined。不可以用typeof检测nulltypeof也可以用来检测function，但是在IE8及跟早的浏览器中使用typeof检测DOM节点中的方法时，返回的是object。instanceof可以检测对象是哪种类型，但是不能跨frame一种跨frame检测数组的方法是：return Object.prototype.toString.caa() === “[object Array]”，该方法在ES5引入js成为原生方法。in和hasOwnProperty都可以用来检测对象时候具有某个属性或方法。区别在于
阅读全文
摘要：项目中经常会涉及到在cms中配置数据，在js中进行操作的问题。但是什么样的数据需要抽离出来，原则是什么？以下是需要抽离的数据的例子：URL需要展现给用户的字符串重复的值设置，比如显示的数量任何可能发生变更的值
阅读全文
摘要：1、 全局变量带来的问题a) 命名冲突b) 代码脆弱c) 难以测试2、 意外的全局变量a) 当为没有定义的变量赋值时，该变量为全局变量var count = 10; name = “chen”;此时的nane为全局变量b) 使用jsLint或者JSHint进行代码检查使用严格模式进行代码编写”use strict”3、 使用单全局变量a) 为window添加一个代表整个页面或者整个模块的全局变量，并将变量和函数都绑定在该对象内。b) 将上面的单全局变量拆分为多个命名空间。
阅读全文
摘要：1、 没有很好的将事件处理程序和应用逻辑程序相分离。应当将事件的处理和逻辑过程分解成两个不同的部分。2、 对事件对象的分发传递。当事件对象传入事件处理函数之后，简单的将事件对象传入了应用逻辑处理函数。这样做的坏处是：很难让别人一眼就看出逻辑处理函数中具体需要什么。Var myapp = { handleClick : function( event ){ event.preventDefault(); event.stopPropagation(); this.showPopup( event.clientX, event.clientY );},showPopup : function( x
阅读全文
摘要：UI层的松耦合主要是指html、css、js的松耦合1、 将js代码从css中分离，即不使用expression2、 将css从js中分离，尽量不要在js中直接操作css。如果需要操作，可以使用添加或删除class的方法（class在css中定义好），避免在出现bug时，定位不到出错位置3、 将js从html中抽离4、 将html从js中抽离，当遇到需要在js中使用html模板时a) 从服务器加载b) 将模板储存于客户端，即html文档当中，以无法渲染的方式存储 i. 以注释的形式 ii. 以script的形式，将script的type设置为浏览器无法解读的形式，如：type=“text/my
阅读全文
摘要：分号结尾一定要加行长度最好不超过80个字符换行：a) 运算符后换行，防止分析器自动分号加入机制误加分号b) 长度达到单行最大限制换行时，运算符后换行并加入两个层级的缩进c) 赋值时，如果需要换行，第二行之后对其到“=”空行方法之间方法中的局部变量和第一条语句之间在多行或多行注释之前方法内的逻辑片段之间变量和函数驼峰命名，尽量简短，变量名词词义，函数动词词义，如can、has、is、get、set构造函数使用大驼峰表示，即从首字母就开始大写不要用null来检测一个未初始化的变量采用对象、数组直接量的方式创建对象或数组，而尽量不要使用new操作符创建。注释：a) 注释前加空行b) 可能会被认为是错
阅读全文
摘要：很多时候我们会通过记录cookie的方式来记录用户的最后一次行为，但是对cookie的处理是在js中进行的。但通常情况下，html、css都要早于js加载完成，并且可能在js生效之前就已经渲染完成了内容。可渲染完成的内容并不一定就是cookie中所记录的需要展现的内容，就会造成从一种内容跳转到另外一种内容的状况。解决方案： 1、在该模块解析之前发送一条同步请求，请求返回之后根据js中的cookie记录进行展示。 同步请求会阻塞页面的解析 2、将该模块的内容方式textarea，等待js加载之后判断展示textarea中的内容还是重新发异步请求去加载cookie中记录的相应数据。 不会阻...
阅读全文
摘要：1、缓存的处理方法： 为请求添加定时改变的时间戳2、快速请求到非实时数据的方法 数据静态化，而不是读接口，可以节省后端处理数据的时间。3、防止不同请求错乱的方法 为每个请求添加不同的ID4、css书写清晰化，减小维护的成本。5、js需要根据规范形成特定的团队风格，减少维护成本。如果大家都用统一的规范书写代码，别人理解自己代码的成本就会降低。
阅读全文
摘要：在使用a标签做切换tab或者其他功能时，经常使用javascript:;来作为a标签的href来使用。缺点： 1、在js尚未加载的情况下，点击该a标签会弹出新窗口。 2、会使gif动画失效（没经历过） 3、会使请求禁止（没经历过）改进： 1、增加onclick属性 onclick=“return false;” 2、href传入#和任意字符，这样会被默认成锚点。并且为该a标签设置target=“_self”，解决打开新窗口的问题。
阅读全文
摘要：在项目中发现，当设置 通过设置img的width属性和height属性在img未请求回来之前为其预留位置。浏览器在渲染时会为这张图片预留出100px*100px的的位置，等待图片的加载。这种方式可以避免图片错乱的问题，同时避免因为图片而造成的页面重排。但问题是在chrome浏览器中，这种策略并没有生效。其它主流浏览器均正常。解决hack方案是：为该图片包裹一层span并设置为inline-block。但这种方式增加了代码，并且破坏了html的结构化。
阅读全文
摘要：项目中，经常会用到line-height和vertical-algin来解决垂直居中的问题，但对其原理和应用限制却很少了解。因此做了一下总结： line-height具有继承性，对inline元素、textnode节点、inline-block、block都起作用。和很多网上的描述并不一致（已验证），当设置了line-height但是没有设置高度的情况下，高度由line-height决定。 vertical-algin不具有继承性。vertical-algin的实现基本上每个浏览器都不相同，但是它的middle值得实现却基本相同，因此用来实现垂直居中是可以的。默认是baseline居中。只..
阅读全文
摘要：背景：三个inline-block元素，其中两个内容为空，另外一个包含文字，设置文字的font-size之后，原本垂直居中的三个inline-block的元素，会变的不再垂直居中。原因： 当设置了font-size之后，改变了元素排列的基线。垂直方向的默认基线是是baseline。当文字设置font-size之后，会将inline-block元素的默认基线设置为文字的base-line，从而导致排列的问题。
阅读全文