JavaScript简介与语法规范

开课吧开课吧锤锤2021-06-15 15:18

    “1994年,网景公司(Netscape)发布了Navigator浏览器0.9版。这是历史上第一个比较成熟的网络浏览器,轰动一时。但是,这个版本的浏览器只能用来浏览,不具备与访问者互动的能力。……网景公司急需一种网页脚本语言,使得浏览器可以与网页互动。”

web

    JavaScript历史

    1995.2月Netscape公司发布LiveScript,后临时改为JavaScript,为了赶上Java的热浪。

    1997年,以JavaScript1.1为基础。由来自Netscape、Sun、微软、Borland和其他一些对脚本编程感兴趣的公司的程序员组成的TC39(ECMA的小组)锤炼出了ECMA-262,也就是ECMAScript1.0。

    1998年6月,ECMAScript2.0版发布。

    1999年12月,ECMAScript3.0版发布,成为JavaScript的通行标准,得到了广泛支持。

    2007年10月,ECMAScript4.0版草案发布:分歧太大,失败告终。

    2009年12月,ECMAScript5.0版正式发布

    2015年6月17日,ECMAScript6发布正式版本,即ECMAScript2015。

    Javascript概念介绍

    JavaScript是一种网页编程技术,其功能强大,实现简单方便,入门简单,即使是程序设计新手也可以非常快速容易地使用JavaScript进行简单的编程。

    JavaScript就是一种基于对象和事件驱动,并具有安全性能的脚本语言,脚本语言简单理解就是在客户端的浏览器就可以互动响应处理程序的语言,而不需要服务器的处理和响应,当然JavaScript也可以做到与服务器的交互响应,而相对的服务器语言像aspphpjsp等需要将命令上传服务器,由服务器处理后回传处理结果。

    JavaScript可以被嵌入到HTML文件中,不需要经过Web服务器就可以对用户操作作出响应,使网页更好地与用户交互;在利用客户端个人电脑性能资源的同时,适当减小服务器端的压力,并减少用户等待时间。

    JavaScript的组成

    ECMAScript:JavaScript的语法标准。

    DOM:JavaScript操作网页上的元素的API

    BOM:JavaScript操作浏览器的部分功能的API

    如图:

Java

    Javascript特点

    1.简单易用

    可以使用任何文本编辑工具编写

    只需要浏览器就可以执行程序

    2.解释执行(解释语言)

    事先不编译

    逐行执行

    无需进行严格的变量声明

    3.基于对象

    内置大量现成对象,编写少量程序可以完成目标

    Javascript使用场景

    客户端数据计算

    客户端表单合法性验证

    浏览器对象的调用

    浏览器事件的触发

    网页特殊显示效果制作

    Javascript与html之间的关系

    Html:是用来制作网页,简单来说就是编写网页结构。

    Javascript:实现网页与客户之间互动的桥梁,让网页具有丰富的生命力

    2JavaScript语法规范

    1.Javascript书写位置

    (1)与css类似,直接嵌入到html页面中

      <head>

        <meta charset="UTF-8">

        <script>

        </script>

       </head>

    (2)文件调用:JavaScript代码写到另一个文件当中(其后缀通常为“.js”),然后用格式为“<scriptsrc="javascript.js"></script>”的标记把它嵌入到文档中

    <head>

       <meta charset="UTF-8">

       <script src="1.js"></script>

      </head>

    2.编写Javascript注意语法规范,一行代码结束后必须在代码最后加上;

    3.javascript中注释语法。

    单行注释://

    多行注释:/**/

    4.JavaScript简单例子

    输出一句话

<script>

  alert("hello word");

</script>

    效果图如下:

Java

    补充:其它输出方式:

    console.log("")

    在控制台输出消息,一般用来调试程序

    代码和效果图:

<script>

console.log("hello world");

</script>

Java

    prompt("")

    在网页中弹出输入框,一般用来接收用户输入信息

    代码和效果图:

<script>

prompt("请输入你的问题");

</script>

Java

    confirm("")

    在网页中弹出提示框,显示信息,该方法一般与if判断语句结合使用

    代码和效果图:

<script>

confirm("请确认手机号");

</script>

web

    document.write

    直接在页面中输出信息

    变量Variables

    1.总是使用const或let来声明变量。不这样做会导致产生全局变量。我们希望避免污染全局命名空间。

    eslint:no-undefprefer-const

// bad
superPower = new SuperPower();
// good
const superPower = new SuperPower();

    2.将所有的const和let分组。

    当你需要把已分配的变量分配给一个变量时非常有用

// bad
let i, len, dragonball,
items = getItems(),
goSportsTeam = true;
// bad
let i;
const items = getItems();
let dragonball;
const goSportsTeam = true;
let len;
// good
const goSportsTeam = true;
const items = getItems();
let dragonball;
let i;
let length;

    3.变量不要链式赋值。

    eslint:no-multi-assign

// bad
(function example() {
// JavaScript 将其解析为
// let a = ( b = ( c = 1 ) );
// let关键字只适用于变量a;
// 变量b和c变成了全局变量。
let a = b = c = 1;
}());
console.log(a); // 抛出 ReferenceError(引用错误)
console.log(b); // 1
console.log(c); // 1
// good
(function example() {
    let a = 1;
    let b = a;
    let c = a;
}());
console.log(a); // 抛出 ReferenceError(引用错误)
console.log(b); // 抛出 ReferenceError(引用错误)
console.log(c); // 抛出 ReferenceError(引用错误)
// 同样适用于 `const`

    4.避免使用一元递增和递减运算符(++,-–)。

    根据eslint文档,一元递增和递减语句会受到自动插入分号的影响,并可能导致应用程序中的值递增或递减,从而导致无提示错误。使用像num+=1而不是num++或num++这样的语句来改变你的值也更具有表现力。不允许一元递增和递减语句也会阻止您无意中预先递增/递减值,这也会导致程序中的意外行为。

// bad
const array = [1, 2, 3];
let num = 1;
num++;
--num;
let sum = 0;
let truthyCount = 0;
for (let i = 0; i < array.length; i++) { 
  let value = array[i]; 
  sum += value;
   if (value) {
      truthyCount++; 
    } 
 }
// good 
const array = [1, 2, 3]; 
let num = 1; num += 1; num -= 1; 
const sum = array.reduce((a, b) => a + b, 0);
const truthyCount = array.filter(Boolean).length;

    比较运算符ComparisonOperators和等号Equality

    1.使用===和!==优先于==和!=。

    eslint:eqeqeq

    2.对于布尔值使用简写,但对于字符串和数字使用显式比较。

// bad
if (isValid === true) {
// ...
}
// good
if (isValid) {
// ...
}
// bad
if (name) {
// ...
}
// good
if (name !== '') {
// ...
}
// bad
if (collection.length) {
// ...
}
// good
if (collection.length > 0) {
// ...
}

    3.在case和default子句中,使用大括号来创建包含词法声明的语句块(例如let,const,function,和class).

    eslint:no-case-declarations

// bad
switch (foo) {
  case 1:
    let x = 1;
  break;
  case 2:
    const y = 2;
  break;
  case 3:
    function f() {
      // ...
    }
  break;
default:
  class C {}
}
// good
switch (foo) {
  case 1: {
    let x = 1;
    break;
  }
  case 2: {
    const y = 2;
    break;
  }
  case 3: {
    function f() {
      // ...
    }
    break;
  }
  case 4:
    bar();
    break;
  default: {
    class C {}
  }
}

    4.三元表达式不应该嵌套,通常写成单行表达式。

    eslint:no-nested-ternary

// bad
const foo = maybe1 > maybe2
? "bar"
: value1 > value2 ? "baz" : null;
// 拆分成2个分离的三元表达式
const maybeNull = value1 > value2 ? 'baz' : null;
// better
const foo = maybe1 > maybe2
? 'bar'
: maybeNull;
// best
const foo = maybe1 > maybe2 ? 'bar' : maybeNull;

    5.避免不必要的三元表达式语句。

    eslint:no-unneeded-ternary

/ bad
const foo = a ? a : b;
const bar = c ? true : false;
const baz = c ? false : true;
// good
const foo = a || b;
const bar = !!c;
const baz = !c;

    6.当运算符混合在一个语句中时,请将其放在括号内。混合算术运算符时,不要将*和%与+,-,,/混合在一起。

    eslint:no-mixed-operators

    这可以提高可读性,并清晰展现开发者的意图。

/ bad
const foo = a && b < 0 || c > 0 || d + 1 === 0;
// bad
const bar = a ** b - 5 % d;
// bad
if (a || b && c) {
return d;
}
// good
const foo = (a && b < 0) || c > 0 || (d + 1 === 0);
// good
const bar = (a ** b) - (5 % d);
// good
if ((a || b) && c) {
return d;
}
// good
const bar = a + b / c * d;

    代码块Blocks

    1.使用大括号包裹所有的多行代码块

    eslint:nonblock-statement-body-position

// bad
if (test)
  return false;
// good
if (test) return false;
// good
if (test) {
  return false;
}
// bad
function foo() { return false; }
// good
function bar() {
  return false;
}

    2.如果通过if和else使用多行代码块,把else放在if代码块闭合括号的同一行。

    eslint:brace-style

// bad
if (test) {
  thing1();
  thing2();
}
else {
  thing3();
}
// good
if (test) {
  thing1();
  thing2();
} else {
  thing3();
}

    3.如果一个if块总是执行一个return语句,后面的else块是不必要的。在elseif块中的return,可以分成多个if块来return。

    eslint:no-else-return

// bad
function foo() {
  if (x) {
    return x;
  } else {
    return y;
  }
}
// bad
function cats() {
  if (x) {
    return x;
  } else if (y) {
    return y;
  }
}
// bad
function dogs() {
  if (x) {
    return x;
  } else {
  if (y) {
    return y;
  }
}
}
// good
function foo() {
  if (x) {
    return x;
  }
return y;
}
// good
function cats() {
  if (x) {
    return x;
  }
  if (y) {
    return y;
  }
}
//good
function dogs(x) {
  if (x) {
    if (z) {
      return y;
  }
} else {
  return z;
  }
}

    控制语句ControlStatements

    1.如果您的控制语句(if,while的)太长或超过最大行长度,那么每个(分组)条件可以放单独一行。逻辑运算符应该放在每行起始处。

// bad
if ((foo === 123 || bar === 'abc') && doesItLookGoodWhenItBecomesThatLong() && isThisReallyHappening()) {
 thing1();
}
// bad
if (foo === 123 &&
  bar === 'abc') {
  thing1();
}
// bad
if (foo === 123
  && bar === 'abc') {
  thing1();
}
// bad
if (
  foo === 123 &&
  bar === 'abc'
) {
  thing1();
}
// good
if (
  foo === 123
  && bar === 'abc'
) {
  thing1();
}
// good
if (
  (foo === 123 || bar === "abc")
  && doesItLookGoodWhenItBecomesThatLong()
  && isThisReallyHappening()
) {
  thing1();
}
// good
if (foo === 123 && bar === 'abc') {
  thing1();
}

    注释Comments

    1.多行注释使用/…/。

/**
* @param {Grid} grid 需要合并的Grid
* @param {Array} cols 需要合并列的Index(序号)数组;从0开始计数,序号也包含。
* @param {Boolean} isAllSome 是否2个tr的cols必须完成一样才能进行合并。true:完成一样;false(默认):不完全一样
* @return void
* @author 单志永 2018/11/8
*/
function mergeCells(grid, cols, isAllSome) {
    // Do Something
}

    2.单行注释使用//。将单行注释放在需注释的语句上方。在注释之前放置一个空行,除非它位于代码块的第一行。

// bad
const active = true;  // is current tab
// good
// is current tab
const active = true;
// bad
function getType() {
  console.log('fetching type...');
  // set the default type to 'no type'
  const type = this.type || 'no type';
  return type;
}
// good
function getType() {
  console.log('fetching type...');
  // set the default type to 'no type'
  const type = this.type || 'no type';
  return type;
}
// also good
function getType() {
  // set the default type to 'no type'
  const type = this.type || 'no type';
  return type;
}

    3.所有注释符和注释内容用一个空格隔开,让它更容易阅读。

    eslint:spaced-comment

// bad
//is current tab
const active = true;
// good
// is current tab
const active = true;
// bad
/**
*make() returns a new element
*based on the passed-in tag name
*/
function make(tag) {
// ...
return element;
}
// good
/**
* make() returns a new element
* based on the passed-in tag name
*/
function make(tag) {
// ...
return element;
}

    4.给注释增加FIXME或TODO的前缀,可以帮助其他开发者快速了解这个是否是一个需要重新复查的问题,或是你正在为需要解决的问题提出解决方案。这将有别于常规注释,因为它们是可操作的。使用FIXME–needtofigurethisout或者TODO–needtoimplement。

    使用//FIXME:来标识需要修正的问题。注:如果代码中有该标识,说明标识处代码需要修正,甚至代码是错误的,不能工作,需要修复,如何修正会在说明中简略说明。

lass Calculator extends Abacus {
  constructor() {
    super();
    // FIXME: shouldn’t use a global here
    total = 0;
  }
}

    使用//TODO:来标识需要实现的问题。注:如果代码中有该标识,说明在标识处有功能代码待编写,待实现的功能在说明中会简略说明。

class Calculator extends Abacus {
  constructor() {
    super();
    // TODO: total should be configurable by an options param
    this.total = 0;
  }
}

    空格Whitespace

    1.使用2个空格作为缩进

// bad
function foo() {
∙∙∙∙let name;
}
// bad
function bar() {
∙let name;
}
// good
function baz() {
∙∙let name;
}

    2.在大括号前放置1个空格。

    eslint:space-before-blocksjscs:requireSpaceBeforeBlockStatements

// bad
function test(){
  console.log('test');
}
// good
function test() {
  console.log('test');
}
// bad
dog.set('attr',{
  age: '1 year',
  breed: 'Bernese Mountain Dog',
});
// good
dog.set('attr', {
  age: '1 year',
  breed: 'Bernese Mountain Dog',
});

    3.在控制语句(if、while等)的小括号前放一个空格。在函数调用及声明中,不在函数的参数列表前加空格。

    eslint:keyword-spacingjscs:requireSpaceAfterKeywords

// bad
if(isJedi) {
  fight ();
}
// good
if (isJedi) {
  fight();
}
// bad
function fight () {
  console.log ('Swooosh!');
}
// good
function fight() {
  console.log('Swooosh!');
}

    4.使用空格把运算符隔开。

    eslint:space-infix-opsjscs:requireSpaceBeforeBinaryOperators,requireSpaceAfterBinaryOperators

// bad
const x=y+5;
// good
const x = y + 5;

    5.在文件末尾插入一个空行。

    eslint:eol-last

// bad
import { es6 } from './AirbnbStyleGuide';
// ...
export default es6;

// bad
import { es6 } from './AirbnbStyleGuide';
// ...
export default es6;

// good
import { es6 } from './AirbnbStyleGuide';
// ...
export default es6;

    6.长方法链式调用时使用缩进(2个以上的方法链式调用)。使用一个点.开头,强调该行是一个方法调用,不是一个新的声明。

    eslint:newline-per-chained-callno-whitespace-before-property

// bad
$('#items').find('.selected').highlight().end().find('.open').updateCount();

// bad
$('#items').
find('.selected').
highlight().
end().
find('.open').
updateCount();

// good
$('#items')
.find('.selected')
.highlight()
.end()
.find('.open')
.updateCount();

// bad
const leds = stage.selectAll('.led').data(data).enter().append('svg:svg').classed('led', true)
.attr('width', (radius + margin) * 2).append('svg:g')
.attr('transform', `translate(${radius + margin},${radius + margin})`)
.call(tron.led);
// good
const leds = stage.selectAll('.led')
.data(data)
.enter().append('svg:svg')
.classed('led', true)
.attr('width', (radius + margin) * 2)
.append('svg:g')
.attr('transform', `translate(${radius + margin},${radius + margin})`)
.call(tron.led);

// good
const leds = stage.selectAll('.led').data(data);

    7.不要在圆括号内加空格。

// bad
function bar( foo ) {
  return foo;
}
// good
function bar(foo) {
  return foo;
}
// bad
if ( foo ) {
  console.log(foo);
}
// good
if (foo) {
  console.log(foo);
}

    8.不要在中括号内添加空格。

    eslint:array-bracket-spacingjscs:disallowSpacesInsideArrayBrackets

// bad
const foo = [ 1, 2, 3 ];
console.log(foo[ 0 ]);
// good
const foo = [1, 2, 3];
console.log(foo[0]);

    *9.在大括号内添加空格

// bad
const foo = {clark: 'kent'};
// good
const foo = { clark: 'kent' };

    类型转换TypeCasting&Coercion

    1.在声明语句的开始处就执行强制类型转换.

    字符串:

    eslint:no-new-wrappers

// => this.reviewScore = 9;
// bad
const totalScore = new String(this.reviewScore); // typeof totalScore 是 "object" 而不是 "string"
// bad
const totalScore = this.reviewScore + ''; // 调用 this.reviewScore.valueOf()
// bad
const totalScore = this.reviewScore.toString(); // 不能保证返回一个字符串
// good
const totalScore = String(this.reviewScore);

    数字:使用Number进行转换,而parseInt则始终以基数解析字串。

    eslint:radixno-new-wrappers

const inputValue = '4';
// bad
const val = new Number(inputValue);
// bad
const val = +inputValue;
// bad
const val = inputValue >> 0;
// bad
const val = parseInt(inputValue);
// good
const val = Number(inputValue);
// good
const val = parseInt(inputValue, 10);

    布尔值:

    eslint:no-new-wrappers

const age = 0;
// bad
const hasAge = new Boolean(age);
// good
const hasAge = Boolean(age);
// best
const hasAge = !!age;

    命名规则NamingConventions

    1.避免使用单字母名称。使你的命名具有描述性。

    eslint:id-length

// bad
function q() {
// ...
}
// good
function query() {
// ...
}

    2.当命名对象,函数和实例时使用驼峰式命名。

    eslint:camelcasejscs:requireCamelCaseOrUpperCaseIdentifiers

// bad
const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}
// good
const thisIsMyObject = {};
function thisIsMyFunction() {}

    3.当命名构造函数或类的时候使用PascalCase式命名,(注:即单词首字母大写)。

    eslint:new-cap

// bad
function user(options) {
  this.name = options.name;
}
const bad = new user({
  name: 'nope',
});
// good
class User {
  constructor(options) {
    this.name = options.name;
  }
}
const good = new User({
  name: 'yup',
});

    4.当导出(export)一个默认函数时使用驼峰式命名。你的文件名应该和你的函数的名字一致。

function makeStyleGuide() {
// ...
}
export default makeStyleGuide;

    5.当导出一个构造函数/类/单例/函数库/纯对象时使用PascalCase式命名。

const AirbnbStyleGuide = {
  es6: {
    },
};
export default AirbnbStyleGuide;

    存取器Accessors

    属性的存取器函数不是必须的。

    1.別使用JavaScript的getters/setters,因为它们会导致意想不到的副作用,而且很难测试,维护和理解。相反,如果要使用存取器函数,使用getVal()及setVal(‘hello’)。

// bad
class Dragon {
  get age() {
    // ...
  }
  set age(value) {
    // ...
  }
}
// good
class Dragon {
  getAge() {
    // ...
  }
  setAge(value) {
    // ...
  }
}

    2.如果属性/方法是一个boolean,使用isVal()或hasVal()方法。

// bad
if (!dragon.age()) {
  return false;
}
// good
if (!dragon.hasAge()) {
  return false;
}

    以上就是小编为大家整理的“JavaScript简介与语法规范”一文,更多Web教程尽在开课吧广场Web教程频道。

免责声明:本站所提供的内容均来源于网友提供或网络搜集,由本站编辑整理,仅供个人研究、交流学习使用。如涉及版权问题,请联系本站管理员予以更改或删除。
有用
分享