JS书写,优化,以及文件命名规范

书写

书写过程中,每行代码结束必须有分号; 原则上所有功能均根据XXX项目需求原生开发, 以避免网上down下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 ||…);

变量命名格式

变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun;jQuery变量要求首字符为'_', 其他与原生JavaScript规则相同, 如: _iTaoLun; 另,要求变量集中声明,避免全局变量.

函数命名:

首字母小写驼峰式命名. 如iTaoLun();

其他

  • 代码结构明了,加适量注释.提高函数重用率;
  • 注重与html分离,减小reflow, 注重性能

JavaScript文件

JavaScript程序应独立保存在后缀名为.js的文件中。应尽量减少在HTML 中的JavaScript代码,因为存在与HTML中的JavaScript代码会明显增加文件大小,且不能对其进行缓存和压缩。
filename.js或JavaScript的代码应尽量放到body的后面。 这样可以减少因为载入脚本而造成其他页面内容载入也被延迟的问题。

缩进

缩进的单位为四个空格。避免使用Tab键来缩进。 因为始终没有个统一的Tab长短标准。虽然使用空格会增加文件的大小, 但在局域网中几乎可以忽略,且在最小化过程中也可被消除掉。

每行长度

避免每行超过80个字符。当一条语句一行写不下时,请考虑折行。 在运算符号,最好是逗号后换行。 在运算符后换行可以减少因为复制粘贴产生的错误被分号掩盖的几率。

变量声明

所有的变量必须在使用前通过var进行声明。JavaScript并不强制必须这么做, 但这么做可以让程序易于阅读,且也容易发现那些没声明的变量(它们会被编译成全局变量)。 将var语句放在函数的首部。最好把每个变量的声明语句单独放到一行,并加上注释说明。

var currentEntry;//当前选择项        var level;//缩进程度  var size; // 表格大小

尽量减少全局变量的使用。不要让局部变量覆盖全局变量。

函数声明

注释:函数名与“(”(左括号)之间不应该有空格。“)”(右括号)与开始程序体的“{”(左大括号)应在同一行。函数程序体应缩进四个空格。“}”(右大括号)与声明函数的那一行代码头部对齐。

function outer(c,d){
var e = c * d;
function inner(a, b){
return (e * a) + b;
}
return inner(01);
}

下面这种书写方式可以在 JavaScript 中正常使用,因为在 JavaScript 中,函数和对象的声明可以放到任何表达式允许的地方。且它让内联函数和混合结构具有最好的可读性。

function getElementsByClassName(className) {
var results = [];
walkTheDOM(document.body, function(node) {
var a; // array of class names
var c = node.className; // the node's classname
var i; // loop counter
// If the node has a class name, then split it into a list of simple names.
// If any of them match the requested name, then append the node to the set of results.
if(c){
a = c.split(' ');
for(i = 0; i < a.length; i += 1){
if (a[i] === className){
results.push(node);
break;
}
}
}
});
return results;
}

如果函数是匿名函数,则在function和 “(”(左括号)之间应有一个空格。如果省略了空格,否则会让人感觉函数名叫作function。

var div.onclick = function(e) {
return false;
};
var that = {
method: function() {
return this.datum;
},
datum: 0
};

尽量不使用全局函数,避免函数名重复。

所有的函数在使用前进行声明。内函数的声明跟在var语句的后面. 这样可以帮助判断哪些变量是在函数范围内的。

{} 和[]

使用{}代替new Object()。使用[]代替new Array()。这样便于书写且能提高一点执行效率。
当成员名是一组有序的数字时使用数组来保存数据。当成员名是无规律的字符串或其他时使用对象来保存数据。

event.srcElement问题

问题说明:I.E.下,even对象有srcElement属性,但是没有target属性; Firefox下,even对象有target属性,但是没有srcElement属性。
解决方法:使用

var obj=event.target||window.event.srcElement;

parentElement问题

firefox与I.E.的父元素(parentElement)的区别

  • IE:obj.parentElement
  • firefox:obj.parentNode

解决方法: 因为firefox与I.E.都支持DOM,因此使用obj.parentNode是不错选择.

命名规范

文件命名规范

  • index.html
  • welcome.html
  • newlist.html
  • about.html
  • contacts.html
  • ……

    图片命名规范

  • banner_sohu.gif
  • banner_sina.gif
  • menu_aboutus.png
  • logo_police.jpg
  • title_news.png
  • btn_contact.png
  • ……

    脚本文件命名规范

    实际模块

  • ad.js
  • pop.js

    公共模块

  • common.js
  • basic.js

    外部资源

  • jquery.min.js
  • jquery.date.js
  • jquery.validdate.js
分享到

浏览器兼容问题

什么是浏览器兼容问题

所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析, 造成页面显示效果不统一的情况。

这里, 我一共统计了6种可能会导致浏览器兼容的问题

1. 不同浏览器的标签默认的外边距和内边距不同

问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。

碰到频率:100%

解决方案:CSS里 (初始化)

*{margin:0;padding:0;}

备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

2. 块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大

问题症状:常见症状是IE6中后面的一块被顶到下一行

碰到频率:90%(稍微复杂点的页面都会碰到,float布局最常见的浏览器兼容问题)

解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性

备注:我们最常用的就是div+CSS布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。

3. 设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度

问题症状:IE6、7和遨游里这个标签的高度不受控制,超出自己设置的高度

碰到频率:60%

解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。(也可以设置font-size:1px)

备注:这种情况一般出现在我们设置小圆角背景的标签里。 出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。 即使你的标签是空的,这个标签的高度还是会达到默认的行高。

4. 元素水平居中问题

解决方案

FF: margin:0 auto;

IE: 父级{ text-align:center; }

5. const问题

const char var; //var这个变量现在变成“只读变量”,任何对var修改的语句都被编译器视为错误。

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

6. 模态和非模态窗口问题

说明:IE下,可以通过showModalDialogshowModelessDialog打开模态和非模态窗口;Firefox下则不能.
解决方法:直接使用

window.open(pageURL,name,parameters)

方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口.
例如:

var   parWin   =   window.opener;   parWin.document.getElementById("Aqing").value   =   "Aqing";

7. float的延续性

说明:在i.e.浏览器中,如果使用float设置元素浮动对齐。如果不关闭浮动,将会对后面的元素标签延续浮动。

解决方法:在设置float的元素后面加上clear:both,关闭浮动。

(完)

分享到

浏览器缓存

浏览器缓存使用注意

什么是缓存

缓存就是数据交换的缓冲区(称作Cache),当某一硬件要读取数据时,会首先从缓存中查找需要的数据, 如果找到了则直接执行,找不到的话则从内存中找。由于缓存的运行速度比内存快得多, 故缓存的作用就是帮助硬件更快地运行。

缓存有何意义

可以提高浏览器浏览页面的效率

缓存可能会带来什么后果

  • 对于一些涉及用户重要信息的页面被缓存则很危险
  • 占用大量硬盘资源

    设置网页不被缓存

    解决方案

<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0">

(完)

分享到

解决iPhone手机下输入框或一些元素变大变粗的问题

在iPhone手机下输入框或一些元素变大变粗,是因为iPhone手机分辨率比同尺寸手机分辨率高,所以有些元素大小显示会变粗变大,通过检测是否为视网膜屏,修改放大比例

此代码为淘宝公司解决方案

image

var scale = isRetina ? 0.5:1;(是否是视网膜屏)

(完)

分享到

js高级之this完全解析

第一种, 作为普通函数调用

代码如下

<script>
console.log(window.xx);
function f1() {
this.xx=99;
}
f1();
console.log(window.xx);
// 结果为 undefined 99

// this的第一种调用方式(普通函数调用)
// this的值指向->window

// 准确的说, this为null,但被解释成window
// 在ecmascript5中, 如果this为null, 则解释成undefined

</script>

第二种,作为方法调用

代码如下

例1

<script>
var obj = {xx:999,yy:800,t:function () {
alert(this.xx);
}};
obj.t();

var dog = {xx:'wangwang'};
dog.t=obj.t;
dog.t();

// 作为对象的方法调用
// this指向方法的调用者, 即该对象,结果为 wangwang
</script>

例2

  <script>
var obj = {xx:999,yy:800,t:function () {
alert(this.xx);
}};

var dog = {xx:'wangwang'};
dog.t=obj.t;
show= function () {
alert('show'+this.xx);
}
dog.t=show;
console.log(show);
dog.t();
// 值为show wangwang
// 作为方法调用时, this指向其调用那一刻的调用者.
// 不管是被调用函数,声明时属于方法, 还是函数
</script>

第三种 通过构造函数调用

代码如下

<script>
// js中没有类的概念, 创建对象是用构造函数完成, 或者用json
// new dog() 发生了以下几件事
// 1. 系统创建空对象{} ,(空对象constructor属性指向dog函数)
// 2.把函数的this 指向 该空对象
// 3.执行该函数
// 4.返回该对象

// 结果为 i am huzi !

function dog(name,age) {
this.name=name;
this.age=age;
this.bark=function () {
alert('i am'+this.name +'!');
}
}
var objDog = new dog('huzhi',2);
objDog.bark();



</script>

第四种 通过apply, call调用

apply()是函数对象的一个方法,它的作用是改变函数的调用对象,它的第一个参数就表示改变后的调用这个函数的对象。因此,this指的就是这第一个参数。

代码如下

var x = 0;
  function test(){
    alert(this.x);
  }
  var o={};
  o.x = 1;
  o.m = test;
  o.m.apply(); //0

apply()的参数为空时,默认调用全局对象。因此,这时的运行结果为0,证明this指的是全局对象。
如果把最后一行代码修改为

o.m.apply(o); //1

运行结果就变成了1,证明了这时this代表的是对象o。

分享到

iPhone X 的“刘海儿”和 CSS

本文转载自:众成翻译
译者:myvin
链接:http://www.zcfy.cc/article/4253
原文:https://css-tricks.com/the-notch-and-css

iPhone X 配备一个覆盖整个手机的全面屏,顶部的“刘海”为相机和其他组件留出了空间。然而结果就是会出现一些尴尬的情景:网站被限制在一个“安全区域”,在两侧边缘会出现白条儿。移除这个白条儿也不难,给 body 设置一个 background-color 就可以搞定。或者,可以添加 viewport-fit=cover meta 标签,将整个网站扩展到整个屏幕。

`<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">`

然后就由你来决定被安全区域制约的重叠区了。有一些新的 CSS 可以助你一臂之力。Stephen Radford 文档

为了处理这些需求,iOS 11 的 Safari 引入了一些 constant 来处理 viewport-fit=cover 属性。

  • safe-area-inset-top
  • safe-area-inset-right
  • safe-area-inset-left
  • safe-area-inset-bottom

这些值可以应用到 marginpadding 上,也可以应用到绝对定位的 topleft 上。

在网页的 container 上添加如下代码:

`padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);`

刘海、安全区域和 fixed 定位还会造成其他尴尬的情景。Darryl Pogue 报告

iOS 11 和早期版本的差异性在于 webview 内容遵循安全区域。也就是说,如果你在顶部设置一个 top 为 0 的 fixed 定位的 header,实际位置会出现屏幕顶部以下 20px 处,和状态栏底部是对齐的。当向下滚动的时候,会向上移动到状态栏的后面;当向上滚动时,会再次滑到状态栏的下方(网页内容会在那条尴尬的 20px 的缝隙中显示)。

可以在视频中查看这种情况是多么的糟糕:

可喜可贺的是,添加一个 viewport-fit=cover 标签就可以一键搞定。

如果你打算覆盖 viewport,那么你可能需要耍点小聪明来隐藏网页内容了!

我想我已经修复了 iPhone X 的“刘海”问题了#iphoneX pic.twitter.com/hGytyO3DRV

— Vojta Stavik (@vojtastavik) September 13, 2017

分享到

UC, QQ浏览器私有meta属性【除非特需,一般不推荐使用】

1、QQ浏览器私有

全屏模式

<meta name="x5-fullscreen" content="true">

强制竖屏

<meta name="x5-orientation" content="portrait">

强制横屏

<meta name="x5-orientation" content="landscape">

应用模式

<meta name="x5-page-mode" content="app">

2、UC浏览器私有

全屏模式

<meta name="full-screen" content="yes">

强制竖屏

<meta name="screen-orientation" content="portrait">

强制横屏

<meta name="screen-orientation" content="landscape">

应用模式

<meta name="browsermode" content="application">

3、其它

针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓

<meta name="HandheldFriendly" content="true">

微软的老式浏览器

<meta name="MobileOptimized" content="320">

windows phone 点击无高光

<meta name="msapplication-tap-highlight" content="no">
分享到

js之立即执行匿名函数表达式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 内层表达式 , 返回值是函数 , 包在小括号里 , 当成表达式来执行 . 内层表达式没有起名字, 所以称为(匿名函数) .
(function (window,undefined) {

})

// 立即执行 (立即执行匿名函数表达式)
(function (window,undefined) {

})(window)

// jquery就是为了加快内部查找变量的速度, 直接传window

// (此处传window是为了速度(直接到最外层的window), 不能传undefined , 因为传undefined不安全 , 在IE.FIRFOX低版本中 , undefined竟然可以重新赋值 , 如undefined =2

// 声明undefined局部变量,名字是undefined而已, 同时 ,又不传参 ,值自然是undefined , 也防止了外界对undefined的污染

// )

// 匿名函数立即执行, 不污染全局, 称之为 立即执行匿名函数表达式

</script>
</head>
<body>

</body>
</html>
分享到

js高级之词法分析与作用域链

词法分析,共分析三样东西

  • 第一步:先分析参数
  • 第二步:再分析变量声明
  • 第三步:分析函数声明

一个函数能使用的局部变量,就从上面的3步分析而来

具体步骤:

  1. 函数运行的前一瞬间,生成active object(活动对象) 简称为 AO
  2. 把函数声明的参数(即传入函数的参数),形成AO的属性, 参数的值即为属性的值 , 全是undefined
  3. 分析变量声明(var xx)
  • 如果AO上没有xx属性, 则添加AO属性, 值是undefined
  • 如果有AO上有xx这个属性 ,则不做任何修改
  1. 分析函数声明 , 如 function foo(){} , 则把函数赋给 AO.foo属性, 如果此前已有foo属性已经存在, 则就会被无情的覆盖掉

例如

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function t3() {
var greet = 'hello';
alert(greet);

function greet() {

}
alert(greet);

}

t3(null);
</script>
</head>


<body>

词法分析过程:
0:AO={}
1:
1.1 分析参数 AO={great:undefined}
1.2 分析实参 AO={greet:null}

2:分析greet变量声明 , AO 已经有greet属性 ,因此不做任何修改
3:分析函数声明 ,AO.greet= function(){} , 最后被覆盖成函数

执行过程:
greet ='hello;
alert(greet);

alert(greet);

因此, 最终结果为 两个hello

</body>
</html>

好的, 接下来我们看第二个例子, 如何我们将函数设置为一个函数表达式, 那么结果又会是怎样呢?(匿名函数转成“函数声明的形式”)

function t(age) {
// var age;
console.log(age);
var age=function age () {
console.log(age);
}
age();

}
t(5);

这个结果为 5 , function ..
age 只不过是个赋值过程, 值是右侧表达式的返回结果(即函数)

作用域链就是指, 函数由外到内 , 产生的AO链, 叫做作用域链

先分析, 再执行

词法分析是外到内, 分析AO链, 执行时, 从内到外, 寻找AO链

分享到

js通过不同的方法找对象

JS中寻找对象的5种方法

根据ID查找对象, 返回一个[object HTMLDivElement]对象

console.log(document.getElementById('test'));

根据元素节点找对象, 返回 HTMLCollection 对象集合

var objP1 = document.getElementsByTagName('p')[0];
objP1.style.color='red';

根据类名查找对象,返回 HTMLCollection 对象集合

document.getElementsByClassName('h1')[0].style.color='red';

根据表单name查找对象, 返回 NodeList 节点对象集合, 与对象集合类似(只能是表单)

var ObjInput = document.getElementsByName('username')[0];
alert(ObjInput.value);

还有子节点,父节点, 兄弟节点 ….. 在DOM手册里

childrenNode, parentNode...

注:所有的对象集合,节点集合, 哪怕只找到一个, 也包装成数组返回 . . . 当我们使用childrenNode时, 会把空的东西也计算进去, 使该节点对象比预期的要长,我们可以使用children, 这个属性不会计算那些空的东西,但是children没有childrenNode这么规范,children的兼容性也要比childrenNode的要好

分享到