web 大前端

web 大前端

web 大前端

• 一级目录
• • 二级目录
  • • 三级目录
• 大前端
• • Node 快速入门
  • ES 6 新语法
  • • 一、let 和 const
    • 二、模板字符串
    • 三、 函数可以有默认参数
    • 四、 箭头函数
    • 五、 对象初始化简写
    • 六、 对象结构
    • 七、 对象传播 *** 作符
    • 八、 数组的 map 和 reduce 方法使用
    • 九、reduce（）
  • 模块化开发
  • • 一、conmmonjs
    • 二、ES6 模块化规范
  • webpack

一级目录 二级目录 三级目录 大前端

• ES6 新的语法糖
• Npm 包管理工具 ： 包管理器
• Babel 的安装作用 ：有些浏览器不支持 ES6 的语法，使用Babel 可以使ES 6的语法编译为更低版本的语法
• 模块化管理 ：import 导入导出等 *** 作，使得模块可以复用
• Webpack 打包和编译：例如可以将多个css文件打包为一个资源文件，这样效率会高一些。这样的 *** 作都会由Webpack 来做

Node 快速入门

• Nodejs基于chrome V8引擎，v8引擎执行js代码的速度非常快，性能非常好。

• v8引擎和jvm的作用比较类似

  • 我们写好的java文件编译成class 文件后，由jvm翻译给 *** 作系统去执行；
  • 我们写好的js文件由v8引擎解释给 *** 作系统去执行。js是解释型语言，不需要去编译
  • 需要注意的是这个引擎是安装nodejs的时候已经内知道 *** 作系统之上了，我们在本地执行nodejs文件的时候就是通过 *** 作系统之上的v8引擎去解析的。这个引擎是chrome浏览器也在使用的，chrome浏览器内部也有这个js引擎。
  • 浏览器的内核包括两大部分：
    • DOM 渲染引擎
    • js 解析器（js引擎）
  • js 是运行在浏览器内核中的 js 引擎内部
  • 而Node.js是脱离于浏览器环境运行的Javascript程序，基于v8引擎。

• 创建一个http 服务响应请求步骤

  1. 导入http模块：const http = require(‘http’); 这个于 Java 中的 import 是一样的。
  2. 创建一个 httpserver 服务
  3. 监听一个端口
  4. 启动运行服务 ： node httpserver.js
  5. 在浏览器访问 localhost：端口号

  const http = require('http');
  http.createServer(function(request,response) {
      // 告诉浏览器以什么样的方式去解析hello serve，这里是以plain，文本的方式去解析。
      // 可以设置为text/html，这样浏览器会议html 的格式去解析
      response.writeHead(200,{'Content-type':'text/plain'});
      // 浏览器输出的内容
      response.end("hello,serve");
  }).listen(8888);
  
  
  //node 文件名.js
  //访问浏览器的http://localhost:8888 内容因改为hello，serve
  

• 使用 Node.js *** 作Mysql 数据库

  • Mysql 是一个第三方模块，需要通过 npm install 后才可以使用 npm install mysql

  • 步骤：

    1. 创建一个 mysql 的 connection 对象
    2. 配置数据连接信息
    3. 开辟连接
    4. 执行 curd
    5. 关闭连接

  • const mysql = require('mysql');
    let connection = mysql.createConnection({
        host:"127.0.0.1",
        port:3306,
        user:"",
        password:"",
        database:""
    });
    connection.connect();
    connection.query("select * from kss_user",function(error,results,fields) {
        if(error) throw error;
        console.log(results);
    });
    
    connection.end();
    //使用node db.js 验证结果
    

ES 6 新语法 一、let 和 const

• const 和 let 解决了 var 的变量穿透问题和常量修改的问题
  • 变量穿透：在 for 循环中定义的变量 i ，除了 for 循环依然可以使用，这种情况下使用 let 可以解决
• 需要注意的是有些低版本的浏览器可能不支持ES6。

二、模板字符串

• `` ’ ’ " "

• 主要解决的问题是字符串的拼接，以往的方式是使用 + 号和多个双引号或单引号。有了模板字符串可以使用 ``键+${person.name}

  let address = "我是"+person.name
  //模板字符串
  let address = `我是${person.name}`
  

三、 函数可以有默认参数 四、 箭头函数 五、 对象初始化简写

• 对象中的 key 和 vallue 如果一样可以简写为一个
• 如果 value 是一个函数，可以将 “ :function ”去掉。

var title = "chushihua";
var link = "www.baidu.com";
let info = {
    title : title,
    link : link,
    go : function() {
        console.log("go to school");
    }
}


let info2 = {
    title,
    link,
    go() {
        console.log("go to school");
    }
}

六、 对象结构

• es 6 提供了快捷获取对象属性和行为的方法
• 对象是通过 key： value 的形式存在，获取对象属性的方式一般有两种
  • 通过. person.name , person.address , person.go(),
  • 通过[] person[“name”] , person[“address”] person"go"
• es 6 对象结构，其实就是快速获取属性和方法的方式
  • var {name,address} = person
  • 还原代码：var name = person.name ; var address = person.address
• 为什么对象取值要提供两种方式？

七、 对象传播 *** 作符

• 把一个对象中的属性传播到另外一个对象中

• var person = {
      name : "",
      address : "",
      link : "",
      phone : "",
      go() {
          
      }
  }
  
  //解构
  var {name,address,...person2} = person;
  
  // 这个person2就具有剩下的三个属性
  

八、 数组的 map 和 reduce 方法使用

• map 和 java 中的流比较类似，都可以自动循环数组中的元素，但是此处的map 需注意逻辑体语句中得有 return

• var newUser = user.map(element -> {
      element.age = element.age +1;
      //也可以给新的对象中增加元素
      element.check = true; //新的对象中会有这个属性，之前对象没有
      return element;
  })
  

九、reduce（）

• reduce(function(a,b),a的初始值（可选）)
  • 接受一个函数（必须）和一个初始值（可选），该函数接收两个参数 ：
    • 第一个参数是上一次reduce 处理的结果
    • 第二个参数是数组中要处理的下一个元素
• ruduce（）会从左到右一次把数组中的元素用reduce 处理，并且把处理结果作为下次reduce的第一个参数。如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数

模块化开发

• 模块化产生的背景：js 代码越来越庞大，急需像 java 一样的类、包的概念。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块，但是 js 不是一种模块化编程语言，它不支持类，包的概念，也不支持模块

• 有两种模块化规范：

  • CommonJs 模块化规范 ， 例如require（http）,Nodejs 主要使用此规范
  • ES 6 模块化规范 ： vue react 等使用

一、conmmonjs

1. 之前在js 中写一些工具方法等，在其他地方使用必须将此代码复制过去，现在有个 export 关键字可以导出供别人使用

   const sum = (a,b)->(a+b);
   const sub = (a,b)->(a-b);
   module.exports = {
       sum:sum,
       sub:sub
   }
   //简写
   module.exports = {
       sum,
       sub
   }
   

   const object = require('文件路径')
   
   object.sum(1,2);
   object.sub(2,1);
   

2. commonjs 使用exports 和require 来导出和导入模块。

二、ES6 模块化规范

• ES6 使用export 和 import 来导出和导入模块

  export function getUserList() {
      console.log("getUserList");
  }
  
  export function save() {
      console.log("save");
  }
  
  //另外一种方法  新版写法
  export default {
      getList() {
          console.log("");
      },
      save() {
          console.log("");
      }
  }
  

  import {getUserList,save} from '文件路径'
  
  getUserList();
  save();
  
  //对应上面的新写法,导出称一个对象，一个整体
  import user from '文件路径'
  
  user.getUserName();
  user.save();
  

webpack

• Webpack 是一个前端资源加载、打包工具，它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源
• Webpack 可以将多种静态资源打包为一个静态文件，减少了页面的请求。将多个js压缩为一个，加快访问速度，同时也更安全，不暴露更多的源码