- 博客(14)
- 收藏
- 关注
RSS订阅原创 vue(一)
VUE-RouterVUE-Router 主要和Vue搭配创建单页应用使用的，用vuer-router要将components映射到routes,并告知在哪里渲染组件动态路由传参const routes = [ { name: 'detail', // 路径中携带参数 path: '/detail/:id', component: detail }] // detail 组件中接收路由参数$route.params.idconst route
2021-05-31 08:46:52
107
原创 webpack构建流程
webpack模块打包模块加载器（Loader）---- 编译转化代码拆分资源模块 （Asset Module）简单使用安装yarn add webpack webpack-cli --dev配置文件 webpack.config.js运行在node.js中工作模式：默认production (自动压缩)development (调试优化)none```jsmodule.exports{ mode: 'development '
2021-05-22 16:47:12
105
原创 parcel打包工具
Parcel零配置的前端应用打包器；多进程工作，同体量比webpack快； 2017年发布webpack生态完善，越来越好用，所以大家还是选择它比较多html文件作为打包入口自带热替换和服务器自动安装依赖支持动态导入yarn add parcel-bundler --dev 安装yarn parcel src/index.html 打包命令yarn parcel build src/index.html 生产模式打包命令...
2021-05-22 16:37:26
119
原创 Rollup打包工具
Rollup打包工具小巧仅仅是ESM打包器优点：输出结果更加扁平自动移除未引用代码打包结果依然可以完全可读很多知名框架/ 库都在使用Rollup缺点：加载非ESM的第三方模块比较复杂模块最终都被打包到一个函数中，无法实现HMR浏览器环境中，代码拆分功能依赖AMD库配置文件rollup.config.jsexport default { input: 'src/index.js', output: { file: 'dist/bundl
2021-05-22 16:36:43
95
原创 webpack构建流程
webpack模块打包模块加载器（Loader）---- 编译转化代码拆分资源模块 （Asset Module）简单使用安装yarn add webpack webpack-cli --dev配置文件 webpack.config.js运行在node.js中工作模式：默认production (自动压缩)development (调试优化)none```jsmodule.exports{ mode: 'development '
2021-05-22 16:35:33
97
原创 gulp构建工作流
Gulp构建工作流构建流程public --------- 不需加工，直接拷贝的文件夹Src ------------- 源码文件夹，所有文件需要被构建安装 gulp 依赖yarn add gulp --devgulpfile.js文件//gulpfile.js 构建文件入口gulp-sass插件 样式编译, 下划线开头的scss文件被默认为依赖，不被编译放入目标文件中yarn add gulp-sass --devconst style = () =
2021-05-15 15:52:03
125
原创 gulp使用
Gulp基于内存，读写速度快,默认同时执行多个任务，高效易用，使用方式直观易懂约定每个任务是异步任务，需标记任务完成简单使用：yarn add gulp --devcode gulpfile.js 入口文件yarn gulp xxx 运行导出函数 标识任务完成/ // 导出的函数都会作为 gulp 任务// exports.foo = () => {// console.log('foo task working~')// }// gulp
2021-05-15 15:50:33
108
原创 yeoman及其自定义脚手架工具
Yeoman:过于通用，不够专注搭配特定的Generator可以创建自己的脚手架简单使用在全局范围安装yonpm install yo --global 或yarn global add yo安装对应的generator:npm install generator-node --global或yarn global add generator-node通过yo 运行 generatoryo nodeSub Generator:子集生成器，需要先
2021-05-15 15:45:42
195
原创 grunt使用
Grunt工作基于临时文件，磁盘读写，构建速度慢，插件生态完善默认同步执行任务，异步任务需应用回调函数标识任务完成鼻祖，但不咋用啦！！！！！！！！！！yarn add gruntcode gruntfile.js基本使用gruntfile.js// Grunt 的入口文件// 用于定义一些需要 Grunt 自动执行的任务// 需要导出一个函数// 此函数接收一个 grunt 的对象类型的形参// grunt 对象中提供一些创建任务时会用到的 APImodule.export
2021-05-15 15:43:14
58
原创 性能优化
·垃圾回收与常见GC算法引用计数算法 应用引用计数器设置引用数，判断当前引用数是否为0，引用关系改变时修改引用数字，当引用数字为0时立即回收优点：发现垃圾时立即回收最大限度减少程序暂停，减少程序卡顿时间缺点：无法回收循环引用的对象时间开销大，资源消耗较大标记清除算法核心：分标记和清除两个阶段完成遍历所有对象找标记活动对象遍历所有对象清除没有标记对象回收相应的的空间优点：可回收循环引用的对象缺点：容易产生碎片化空间，浪费空间不会立即回收垃圾对象
2021-04-16 00:10:56
67
原创 typescript应用
typescript 使用ts常用命令：yarn init --yes 默认初始化项目yarn add typescript --dev 本地安装tsyarn tsc xxx 编译文件 （检查语法错误，去除注释，转化为es5）yarn tsc --init tsconfig.json文件配置yarn tsc --locale zh-CN 中文显示错误消息tsconfig.json文件配置 "sourceMap": true,
2021-04-16 00:07:53
94
原创 1-03函子Functor
函数式编程-函子在函数式编程中把副作用控制在可控的范围内、异常处理、异步操作等Functor容器：包含值和值的变形关系(这个变形关系就是函数)函子：是一个特殊的容器，通过一个普通的对象来实现，该对象具有 map 方法，map 方法可以运行一个函数对值进行处理(变形关系)// 一个容器，包裹一个值class Container { // of 静态方法，可以省略 new 关键字创建对象 static of(value) { return new Container(value
2021-01-03 17:41:58
69
原创 1-02函数组合
函数组合 compose函数组合可以让我们把细粒度的函数重新组合生成一个新的函数函数组合函数组合 (compose)：如果一个函数要经过多个函数处理才能得到最终值，这个时候可以把中间过程的函数合并成一个函数函数就像是数据的管道，函数组合就是把这些管道连接起来，让数据穿过多个管道形成最终结果函数组合默认是从右到左执行//函数组合演示function compose(f, g){ return function (value){ return f(g(value))
2021-01-03 17:41:18
70
原创 1-01函数式编程
函数式编程定义：数据映射关系：y = f(x)无歧义；唯一确定性；函数是一等公民函数： 普通对象存储在变量/数组中作为参数和返回值//相同功能函数，可通过赋值方法本身优化代,不加括号const BlogController = { index: View.index, show: View.show, create: Pg.create,}高阶函数可把函数作为参数传递给另一个函数//高阶函数-函数作为参数// 模拟实现forEach 和 fil
2021-01-03 17:40:10
118
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人