持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第30天，点击查看活动详情
前端模块化
模块化就是单独的一个功能封装到一个模块(文件)中,模块之间相互隔离,但是可以通过特定的接口公开内部成员.也可以依赖别的模块
浏览器模块化规范 AMD Require.js CMD Sea.js
服务器模块化规范 CommonJS module.exports
ES6 模块化定义规范
每个 js 文件都是一个独立模块
导入模块成员使用 import 关键字
暴露模块成员使用 export 关键字
webpack 前端项目构建工具
webpack-dev-server 自动打包 生成 bundle.js 默认看不见访问 /bundle.js
html-webpack-plugin 生成预览页面
plugins 数组是 webpack 打包期间会用到的插件列表
配置自动打包相关的参数
postCSS 自动添加 css 的兼容前缀
babel-loader 打包处理 js 文件中的高级语法
$nextTick()方法的作用
页面上元素被重新渲染之后,才会执行回调函数中的代码
es2017 新增字符串方法
padStart()方法,padEnd()方法
padStart(5, 'ab')用于头部补全
padEnd(5,'ab')用于尾部补全
lodash 模块
_.cloneDeep(this.addForm) 对象深拷贝 解决页面与逻辑冲突
_merge();合并两个对象
vue中项目优化策略
生成打包报告
启用 CDN
Element-UI 组件按需加载
路由懒加载
首页内容定制
vue 生成打包报告
vue-cli-server build --report
拷贝方式
直接赋值
- 基本数据类型的拷贝
2).Object.assign()方法
3).ES6中的扩展运算(...) let obj2 = {...obj1}
4).jquery中的.extend(deep,target,object1,objectN)**
5).递归方式
6).JSON.parse(JSON.stringify()) 深拷贝
总结:
1.直接复制实现的是浅拷贝,只拷贝对象的基本类型的数据
2.使用JS原生的怄函数式递归方法是做复杂深拷贝的好方法,兼容性好
3.使用JSON的两种方法深拷贝中只能是对象中没有函数时才能使用
