JavaScript基础进阶

JavaScript基础进阶

开篇需要理解的你可能不知道的JS系列... ...

本文主要总结归纳一些不太常见或者重要的知识点，理解它们能帮助我们更好地学习JavaScript。

• web中涉及到三大交互的细节

  这三个交互是：行为交互、数据交互、逻辑交互。

  行为交互：用户行为操作，如：点击按钮，缩放页面。

  数据交互：用于显示页面展示的数据信息，如：图片，文字等。

  逻辑交互：对用户行为和数据进行相关的处理，比如：点击按钮时JS代码要干什么？

• JS的三种引入方式

  这三种引入方式分别为：行间、内部和外部。

  行间：直接在div元素上做相关处理，如：onclick="alert('hello world')"。

  内部：在<script>标签中直接编写JS代码。

  外部：通过<script>标签的src属性引入外部文件的代码。

  在通过外部引入JS文件时，需要额外注意的主要有两点：加载JS文件的性能问题和安全性问题

  1. 性能问题

     HTML是按顺序运行页面脚本，所以如果将script标签放在head里面，会阻塞页面的渲染（JS是单线程异步的逻辑处理，详见阮一峰的JS运行机制），所以常规的处理办法是将script放到DOM加载完成后，也就是body最后面，也可以通过defer或者async属性将scirpt代码延迟执行或加载（这里有一个问题就是script不一定在DOM的内容加载完成后执行）

  2. 安全问题

     通过JS的src属性可以进行跨域操作，因为src可以引入不同域名的代码，所以它超出了浏览器的同源策略限制，当外部JS代码不安全时，可能会对页面造成不可避免的安全性问题。

• JS的注释方式

  只要有两种：单行注释和多行注释

  // 这里是单行注释
  /*这里是多行注释*/
  let commtents = '注释';

  在项目中推荐使用多行注释

  /*  test方法   用于实现XXXXX
   *  params： a： 第一个参数，用于表示XXXX
   *           b： 第二个参数，用于表示
   *           ... ...
   *  return:  返回XXXX
  */
  function test(a, b, c){
      //...
  }
  ​
  // 你也可以写的更花哨一点
  /*------------------XXXXX模块1---------------------------
   * ....
   * ....
  */
  function a(){ //... };
  /*------------------XXXXX模块2---------------------------
   * ....
   * ....
  */
  function b(){ //... }

   

• 项目中的JS命名规则

  1. 变量

     变量的命名规则：遵循ECMAScript规范来就行。

     常量的命名规则：建议全部大写，语义单词间用_分开；

     构造函数是特殊情况，建议用大驼峰方式命名

     let _dollar = '155美元';
     const INITED_VALUE = 100;
     var getName = function(){......};
     // 构造函数
     function Util(){};
     let util_1 = new Util();    

  2. 文件、文件夹或者图片

     小写是最普遍的命名方式：index.css，nav_bar.js，icon_1.png；

     也有小驼峰命名的方式：navBar.js,

• 三目运算符

  多级三目运算符能简化一些代码:

  let test = typeof mm === 'undefined' ? '1' : null == undefined ? '2' : '3'

  虽然它能简化通过if (), else()之类的逻辑判断，但是其语义不太明确，可读性较低，在实际项目中根据实际情况采用就行了。

• 获取对象的属性

  两种方法：点操作符与方括号操作符

  let obj = {
      a: 1,
      b: 2
  };
  obj.a         // 1
  obj['a']        // 1

  建议通过方括号操作符获取属性值，因为它可以传入变量，灵活性更好，而且利于后期代码维护或者新增一些功能。

• 你可能记不全的console

  可能大多数前端开发人员用的最多的就是console.log()方法了，但是console还有一些其他实用的方法，对我们的代码调试非常有用的

  console.assert();          // 在不知道第一个参数是否存在，可以用它试试
  console.clear();           // 一不小心写了很多BUG? 控制台清空的功能
  console.time(); conole.timeEnd();     // 看一下方法运行了多久吧，太久了可不好哦！

  其它的详见MDN CONSOLE方法

  小扩展：重写console.log()；返回你想要显示的信息

  var logs = console.log;
  console.log = function(text){
    logs.call(console,"结果为："+text);
    }
  console.log("真的")

   

• 字符串拼接

  在ES6模板字符串没出来之前，字符串拼接最常用的就是“+”了（可是换行咋个搞），它是非常有用的方法，至今还在被广泛使用。但是，千万别写成下面这样子哦！

  let last_Value = '1' + 2 + ' test value of '
                    + 5;                         // 它的结果没有换行！！