// 对象简写
return { name, age };
};
// 调用和执行
var json = person(“小花花美美”, 20);
console.log(json.name, json.age);
//========================= 实战应用 =========================
//<button οnclick=“login()”>登录
function login() {
var username = $(“#username”).val();
var password = $(“#password”).val();
// 发送ajax
$.ajax({
type: “post”,
// 对象简写
data: { username, password },
// 原始写法
//data:{username:username,password:password},
success() {
}
});
}
ES6的语法：对象解构
对象解构 —- es6提供一些获取快捷获取对象属性和行为方式
ES6的语法：传播操作符【…】
把一个对象的属性传播到另外一个对象中
ES6的语法：数组map和reduce方法使用(了解)
举例：有一个字符串数组，希望转为int数组
reduce(function(),初始值（可选）) ：
接收一个函数（必须）和一个初始值（可选），该函数接收两个参数：
-
第一个参数是上一次reduce处理的结果
-
第二个参数是数组中要处理的下一个元素
reduce() 会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是 第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数
箭头函数简化函数的定义，可以让我们不用使用function关键字
/*
箭头函数最直观的三个特点。
1不需要function关键字来创建函数
2省略return关键字
3继承当前上下文的 this 关键字
*/
箭头函数深度学习
官方网站：https://www.npmjs.com/
NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于后端的Maven 。
#在命令提示符输入 npm -v 可查看当前npm版本
npm -v
使用npm管理项目
1、创建文件夹npm
2、项目初始化
#建立一个空文件夹，在命令提示符进入该文件夹 执行命令初始化
npm init
#按照提示输入相关信息，如果是用默认值则直接回车即可。
#name: 项目名称
#version: 项目版本号
#description: 项目描述
#keywords: {Array}关键词，便于用户搜索到我们的项目
#最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml
#我们之后也可以根据需要进行修改。
#如果想直接生成 package.json 文件，那么可以使用命令
npm init -y
修改npm镜像
1、修改npm镜像
NPM官方的管理的包都是从 http://npmjs.com下载的，但是这个网站在国内速度很慢。
这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/
淘宝 NPM 镜像是一个完整 npmjs.com 镜像，同步频率目前为 10分钟一次，以保证尽量与官方服务同步。
2、设置镜像地址
#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org
#查看npm配置信息
npm config list
下载
cnpm install jquery vue redis
npm install
#使用 npm install 安装依赖包的最新版，
#模块安装的位置：项目目录\node_modules
#安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本
#同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的
npm install jquery
#如果安装时想指定特定的版本
npm install jquery@2.1.x
#全局安装
#Node.js全局安装的npm包和工具的位置：用户目录\AppData\Roaming\npm\node_modules
#一些命令行工具常使用全局安装的方式
npm install -g webpack
#npm管理的项目在备份和传输的时候一般不携带node_modules文件夹
npm install #根据package.json中的配置下载依赖，初始化项目
其他命令
#更新包（更新到最新版本）
npm update 包名
#全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名
ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行。
这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。
安装命令行转码工具
Babel提供babel-cli工具，用于命令行转码。它的安装命令如下：
#cmd
npm install -g babel-cli
#查看是否安装成功
babel --version
Babel的使用
1、创建babel文件夹
2、cmd 初始化项目
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字段设定转码规则，将es2015规则加入 .babelrc：
{
“presets”: [“es2015”],
“plugins”: []
}
5、安装转码器，(cmd) 在项目中安装
npm install --save-dev babel-preset-es2015
6、转码
整个目录转码
mkdir dist2
–out-dir 或 -d 参数指定输出目录
babel src --out-dir dist2
或者
babel src -d dist2
自定义脚本
1、改写package.json
{
// …
“scripts”: {
// …
“build”: “babel src -d dist2”
},
}
2、转码的时候，执行下面的命令
mkdir dist
npm run build
模块化规范
-
CommonJS模块化规范
-
ES6模块化规范
CommonJS规范
每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。
1、创建“module”文件夹
2、创建 mokuai-common-js/四则运算.js
// 定义成员：
const sum = function(a,b){
return a + b
}
const subtract = function(a,b){
return a - b
}
const multiply = function(a,b){
return a * b
}
const divide = function(a,b){
return a / b
}
3、导出模块中的成员
// 导出成员：
module.exports = {
sum: sum,
subtract: subtract,
multiply: multiply,
divide: divide
}
简写
//简写
module.exports = {
sum,
subtract,
multiply,
divide
}
4、创建 mokuai-common-js/引入模块.js
//引入模块，注意：当前路径必须写 ./
const m = require(‘./四则运算.js’)
console.log(m)
const r1 = m.sum(1,2)
const r2 = m.subtract(1,2)
console.log(r1,r2)
5、运行程序
node 引入模块.js
CommonJS使用 exports 和require 来导出、导入模块
ES6模块化规范
ES6使用 export 和 import 来导出、导入模块。
1、创建 mokuai-es6 文件夹
2、创建 src/userApi.js 文件，导出模块
export function getList() {
console.log(‘获取数据列表’)
}
export function save() {
console.log(‘保存数据’)
}
3、创建 src/userComponent.js文件，导入模块
//只取需要的方法即可，多个方法用逗号分隔
import { getList, save } from ‘./userApi.js’
getList()
save()
注意：这时的程序无法运行的，因为ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行。
4、初始化项目
npm init -y
5、配置 .babelrc
{
“presets”: [“es2015”],
“plugins”: []
}
6、安装转码器，在项目中安装
npm install --save-dev babel-preset-es2015
7、定义运行脚本，package.json中增加”build”
{
// …
“scripts”: {
“build”: “babel src -d dist”
}
}
8、执行命令转码
npm run build
9、运行程序
node dist/userComponent.js
ES6模块化写法2
1、创建 src/userApi2.js ，导出模块
export default {
getList() {
console.log(‘获取数据列表2’)
},
save() {
console.log(‘保存数据2’)
}
}
2、创建 src/userComponent2.js，导入模块
import user from “./userApi2.js”
user.getList()
user.save()
3、执行命令转码
npm run build
4、运行程序
node dist/userComponent2.js
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
Webpack安装
1、全局安装
npm install -g webpack webpack-cli
2、安装后查看版本号
webpack -v
webpack -w 实时监听
初始化项目
1、创建webpack文件夹
npm init -y
2、创建src文件夹
3、src下创建common.js
exports.info = function (str) {
document.write(str);
}
4、src下创建utils.js
exports.add = function (a, b) {
return a + b;
}
5、src下创建main.js
const common = require(‘./common’);
const utils = require(‘./utils’);
common.info(‘Hello world!’ + utils.add(100, 200));
下一步 (JS打包)
1、webpack目录下创建配置文件webpack.config.js
const path = require(“path”); //Node.js内置模块
module.exports = {
entry: ‘./src/main.js’, //配置入口文件
output: {
path: path.resolve(__dirname, ‘./dist’), //输出路径，__dirname：当前文件所在路径
filename: ‘bundle.js’ //输出文件
}
}
以上配置的意思是：读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js
2、命令行执行编译命令
webpack --mode=development
#执行后查看bundle.js 里面包含了上面两个js文件的内容并进行了代码压缩
也可以配置项目的npm运行命令，修改package.json文件
“scripts”: {
//…,
“dev”: “webpack --mode=development”
}
运行npm命令执行打包
npm run dev
3、webpack目录下创建index.html ， 引用bundle.js
最后
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！
如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
ion (a, b) {
return a + b;
}
5、src下创建main.js
const common = require(‘./common’);
const utils = require(‘./utils’);
common.info(‘Hello world!’ + utils.add(100, 200));
下一步 (JS打包)
1、webpack目录下创建配置文件webpack.config.js
const path = require(“path”); //Node.js内置模块
module.exports = {
entry: ‘./src/main.js’, //配置入口文件
output: {
path: path.resolve(__dirname, ‘./dist’), //输出路径，__dirname：当前文件所在路径
filename: ‘bundle.js’ //输出文件
}
}
以上配置的意思是：读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js
2、命令行执行编译命令
webpack --mode=development
#执行后查看bundle.js 里面包含了上面两个js文件的内容并进行了代码压缩
也可以配置项目的npm运行命令，修改package.json文件
“scripts”: {
//…,
“dev”: “webpack --mode=development”
}
运行npm命令执行打包
npm run dev
3、webpack目录下创建index.html ， 引用bundle.js
最后
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
[外链图片转存中…(img-E9hFSvnX-1715188824428)]
[外链图片转存中…(img-dKiiLExZ-1715188824429)]
[外链图片转存中…(img-YEGaFPAD-1715188824429)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！
如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
2899
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
