ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

大前端进阶知识要点

2021-01-29 10:02:21  阅读：110  来源： 互联网

标签：npm console 进阶 前端 js var 模块 要点 log


大前端进阶知识要点

大前端进阶

Node.js

Node.js 就是运行在服务端的 JavaScript。

安装

官方下载，无脑安装

# 测试是否安装成功
node -v
# 测试自带的npm是否正常
npm -v

# 例如出现下列版本号，则安装成功
C:\Users\MyPingPing>node -v
v14.3.0
C:\Users\MyPingPing>npm -v
6.14.5

运行

//类似于Java的System.out.println("hello,world!");
console.log("hello,world!");
//NodeJs是一门计算机语言，运行在v8引擎内部，后缀名为js的文件可以直接使用： node 文件名.js 运行

# node 文件名.js
node helloworld.js
# 打印
hello,world!

运行在服务端

// 导入模块是require
const http = require("http");

//1.创建一个httpserver服务
//2.监听一个端口:8080
//3.启动运行服务:ndoe server.js
//4.在浏览器访问:http://127.0.0.1:8080

http.createServer(function (request, response) {
    //浏览器识别hello，server
    response.writeHead(200, { "content-type": "text/html" });
    //输出内容给浏览器
    response.end("<h1>hello,server!</h1>");
}).listen(8080);

console.log("服务启动成功 http://127.0.0.1:8080");

# 终端运行
PS D:\web\NodeJs> node .\server.js
服务启动成功 http://127.0.0.1:8080

访问监听的8080端口

image-20210127112339240

NodeJs操作数据库

//1.导入依赖
var mysql = require("mysql");

//2.创建连接对象：connection
//3.配置数据库连接的信息
//4.执行crud
//5.关闭连接

var connection = mysql.createConnection({
  host: "127.0.0.1",
  port: 3306,
  user: "root",
  password: "root",
  database: "test",
});

connection.connect();

connection.query("select * from car", function (error, res, fields) {
  //如果Error,直接抛出
  if (error) throw error;

  //查询成功
  console.log("results=", res);
});

connection.end();

打印部分结果

在这里插入图片描述

ES6

​ ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

ES6新语法：let和const

// let 和 const 解决：
//1.var的变量穿透问题
//2.常量的修改问题

for(var i=0;i<5;i++){
    console.log(i);
}

  console.log(i);//会打印出5

//而使用let则不会出现这样的问题
//使用const修饰的常量无法对其进行修改

//在实际的开发和生产中，如果是小程序、uniapp或者一些脚手架中，可以大胆的使用let和const
//如果是普通的web开发，建议还是使用var，因为在一些低版本的浏览器中不支持let和const

ES6新语法 模板字符串

  //字符串会牵涉到动态部分
      var person = {
        name: "cds",
        address: "四川",
      };
      // 传统拼接
      let address = "我现在的位置是在：" + person.address;
      // ES6新语法,就像JSP中的EL表达式
      let address2 = `我现在的位置还是在：${person.address}`;

      console.log(address);
      console.log(address2);

两种拼接的效果是一样的！

ES6新语法：函数默认参数与箭头函数

//函数默认参数
function sum(a=100, b=100) {
    return a + b;
}

var result = sum();
console.log("result=", result);

//箭头函数 （重点，在很多项目开发中，小程序，uniapp，一些常见的脚手架都有大量使用）
var sum = function (a, b) {
    return a + b;
};
//箭头函数-改进1
var sum = (a, b) => {
    return a + b;
};
//箭头函数-改进2(仅限于大括号中的逻辑代码只有return 语句)
var sum = (a, b) => a + b;

//规律
//1.去掉function
//2.在括号后面加箭头
//3.如果大括号中的逻辑代码只有return 语句，可以省略大括号和return
//4.如果参数只有一个，可以把括号也省去

ES6新语法：对象初始化简写

 var info = {
     title: "美女写真",
     img: "http://cdn.jcds.site/5.jpg",
     go: function () {
         console.log("美女写真");
     },
 };

//es6简写
//因为对象是key:value存在
//1.如果key和变量的名字一致，可以只定义一次即可
//2.如果value是一个函数，可以把`:function`去掉，之剩下()即可
var title = "美女写真";
var img = "http://cdn.jcds.site/5.jpg";
var info2 = {
    title,
    img,
    go() {
        console.log("美女写真");
    }
};
console.log(info2.title);
console.log(info2.img);
info2.go();

ES6新语法：对象的解构

var title = "美女写真";
var img = "http://cdn.jcds.site/5.jpg";
var info2 = {
    title,
    img,
    go() {
        console.log("美女写真");
    },
};
//对象解构
//对象是key:value的形式存在，获取对象属性和方法的方式有两种

//1.通过.的方式
console.log(info2.title);
//2.通过中括号的方式
console.log(info2["title"]);

//es6新语法
var { title, img, go } = info2;
//还原代码
//var title=info2.title;
//var img=info2.img;
console.log(title, img);
go();

ES6新语法：传播操作符

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

 //对象传播操作符 ...

var person = {
    name: "cds",
    address: "四川",
    url: "https://minghui_dada.gitee.io",
    phone: 15089032091,
    go() {
        console.log("开始学习了");
    },
};

//解构出来
var { name, address, ...person2 } = person;
console.log(name);
console.log(address);
console.log(person2);

//因为name和address已经被取走了，所以使用传播操作符之后只能取剩下的属性和方法
var { ...person3 } = person;
console.log(person3);

打印结果

cds
四川
{url: 'https://minghui_dada.gitee.io', phone: 15089032091, go: ƒ}
{name: 'cds', address: '四川', url: 'https://minghui_dada.gitee.io', phone: 15089032091, go: ƒ}

NPM包管理器

类似于Java中的maven，它是一个前端的node包管理器，也有自己的仓库。官方地址

作用一：快速构建nodjs工程

# 初始化工程
npm init # 得到一个package.json的文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ajCNr8yV-1611883828972)(http://cdn.jcds.site/image-20210128092337036.png)]

{
  "name": "npmtest", //工程名
  "version": "1.0.0", //项目版本
  "description": "npm测试工程", //描述
  "main": "index.js", //入口js文件
  "scripts": { //运行脚本
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "cds", //开发者
  "license": "ISC" //授权协议
}

上面就是执行npm init后，得到一个package.json的文件，有点类似于：pom.xml文件

作用二：快速安装第三方模块

# 1.快速安装第三方模块
npm install 模块名 
# 或者
npm i 模块名

# 2.安装在什么地方？
安装的模块会放入到项目中的一个叫node_moudles文件夹中

// 3.如何导入？
//导入模块redis
const redis = require("redis");

//创建客户端连接
const client = redis.createClient();
 
client.on("error", function(error) {
  console.error(error);
});
 
client.set("key", "value", redis.print);
client.get("key", redis.print);

# 4.npm下载慢怎么办？
# 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 安装成功后下载依赖就可以使用以下命令
cnpm install 依赖名

# 5.模块和package.json到底有什么关系？
# 执行npm install 可以把package.json中记录的所有依赖下载下来
{
  "name": "npmtest",
  "version": "1.0.0",
  "description": "npm测试工程",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "cds",
  "license": "ISC",
  "dependencies": { # 类似于pom.xml文件中的依赖坐标
    "mysql": "^2.18.1",
    "redis": "^3.0.2"
  }
}

# 6.如何卸载？
npm uninstall 依赖名

Babel

​ 主要用于将ES6版本的JavaScript代码转为ES5等向后兼容的JS代码，从而可以运行在低版本浏览器或其它环境中。

Babel的安装

npm install -g babel-cli
# 或者
cnpm install -g babel-cli

# 验证安装
babel --version

# 6.26.0 (babel-core 6.26.3)

Babel的使用

  • 1、创建babel文件夹

  • 2、初始化项目

    npm init -y

  • 3、创建文件src/example.js，下面是一段ES6的代码：

    //转码前
//定义数据
let input=[1,2,3]
//将数组的每个元素+1
input=input.map(item=>item+1)
console.log(input)

  • 4、配置.babelrc

Babel 的配置文件是babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件，基本格式如下：

{
	"presets":[],
	"plugins":[]
}

presets字段设置转码规则，将es2015规则加入.babelrc:

{
	"presets":["es2015"],
	"plugins":[]
}
  • 5、安装转码器，在项目中安装
npm install --save-dev babel-preset-es2015
  • 6、转码
# npm install --save-dev csv-loader xml-loader
# 转码结果写入一个文件
mkdir dist

自定义脚本

1、改写package.json

{
    //....
    "scripts":{
        //....
        "build":"babel src\\example.js -o dist\\compiled.js"
    },
}

2、转码的时候执行以下命令：

mkdir dist
npm run build

模块化

CommonJS规范

​ CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。require方法用于加载模块。

一个直观的例子：

// moduleA.js
module.exports = function( value ){
    return value * 2;
}

// moduleB.js
var multiplyBy2 = require('./moduleA');
var result = multiplyBy2(4);

CommonJS 是同步加载模块，但其实也有浏览器端的实现，其原理是现将所有模块都定义好并通过 id 索引，这样就可以方便的在浏览器环境中解析了

ES6规范

​ ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export {firstName, lastName, year};

// main.js
import {firstName, lastName, year} from './profile';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

webpack

安装

cnpm install -g webpack webpack-cli
# 验证安装，如果出现版本号则安装成功
webpack -v

基本使用：合并JS

1、创建一个node.js项目

npm init -y

2、创建一个src目录

3、在src存放两个需要合并的util.js和common.js

image-20210128180358927

4、准备一个入口文件main.js,其实就是模块集中进行引入

image-20210128180711082

5、在根目录下定义一个webpack.config.js文件配置打包的规则

//webpack.config.js
//导入path模块
const path = require("path");

//定义JS打包的规则
module.exports = {
    //入口函数从哪里开始进行编译打包
    entry: "./main.js",
    //编译成以后把内容输出到哪里去
    output: {
        //定义输出的指定的目录__dirname当前项目根目录，生产一个dist文件夹
        path: path.resolve(__dirname, "./dist"),
        //合并的js文件存储在dist/bundle.js中
        filename: "bundle.js"
    }
}

6、执行查看结果

webpack

image-20210128181920969

Vue-element-admin

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。

官网地址：https://panjiachen.github.io/vue-element-admin-site/zh/

运行工程和编译工程

# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git
# 进入项目目录
cd vue-element-admin
# 安装依赖
npm install
# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
# 本地开发 启动项目
npm run dev

注意如果老是安装失败：

  • 请删除 node-modules 然后执行npm install
  • 或者换个网络

启动完成后会自动打开浏览器访问 http://localhost:9527， 你看到下面的页面就代表操作成功了。

在这里插入图片描述

标签：npm,console,进阶,前端,js,var,模块,要点,log
来源： https://blog.csdn.net/CSDN__CPP/article/details/113365001

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有