导航

• 博客园
• 首页
• 新随笔
• 新文章
• 联系
• 订阅
• 管理

03 2021 档案

• Vue
  摘要：Vue响应式原理模拟 1、数据驱动 （1）数据响应式 数据模型仅仅是普通的JavaScript对象，而当我们修改数据时，视图会进行更新，避免了繁琐的DOM操作，提高开发效率 （2）双项绑定 数据改变，视图改变；视图概念，数据也随之改变 我们可以使用V-model在表单元素上创建双向数据绑定 （3）数 阅读全文
  posted @ 2021-03-31 17:46 phantom_yy 阅读(92) 评论(0) 推荐(0)
• Vue Router
  摘要：Vue Router实现原理 Vue前置知识 1、插件 2、混入 3、Vue.obsercable() 4、插槽 5、render函数 6、运行时和完整版的Vue Vue Router是前端路由，当路径切换的时候，在浏览器端判断当前路径并加载当前路径对应的组件 hash模式 1、URL中#后面的内容 阅读全文
  posted @ 2021-03-30 17:20 phantom_yy 阅读(55) 评论(0) 推荐(0)
• Vue Router
  摘要：Vue Router基础回顾 1、配置 （1）在index.js中Vue.use用来注册插件，他会调用传入对象的install方法 （2）路由规则，存一些数组，创建路由对象 2、使用步骤 （1）创建路由组件（视频） （2）创建路由插件 （3）创建router对象，配置路由规则 （4）通过router 阅读全文
  posted @ 2021-03-29 16:44 phantom_yy 阅读(59) 评论(0) 推荐(0)
• Vue.js框架基础回顾
  摘要：Vue.js生命周期 初始化（事件&生命周期） 》beforeCreate钩子函数 》初始化（注入&校验） 》created钩子函数 Vue.js语法和概念 1、差值表达式 2、指令 3.计算属性和侦听器 4、Class和Style绑定 5、条件渲染/列表渲染 6、表单输入绑定 7、组件 8、插槽 阅读全文
  posted @ 2021-03-29 10:06 phantom_yy 阅读(57) 评论(0) 推荐(0)
• ESLint
  摘要：规范化标准 规范化是我们践行前端工程化中重要的一部分 常见的规范化实现方式： 1、ESLint工具使用 2、定制ESLint校验规则 3、ESLint对TypeScript的支持 4、ESLint结合自动化工具或者Webpack 5、基于ESLint的衍生工具 6、Stylelint工具的使用 Es 阅读全文
  posted @ 2021-03-26 16:10 phantom_yy 阅读(96) 评论(0) 推荐(0)
• WebPack与ES2015
  摘要：1、因为模块打包需要，webpack可以处理import和export；但是并不能处理es6其他特性 2、babel-loader处理代码新特性 安装模块 yarn add babel-loader @babel/core @babel/preset-env --dev 配置使用 { test:/. 阅读全文
  posted @ 2021-03-17 19:00 phantom_yy 阅读(150) 评论(0) 推荐(0)
• WebPack URL加载器
  摘要：1、安装url-loader yarn add url-loader --dev 2、使用 { test:/.png$/, use:'url-loader' } 3、总结 （1）小文件使用Data URLs，减少请求次数； （2）大文件淡出提取存放，提高加载速度； 优化： 超出10KB文件单独提取存 阅读全文
  posted @ 2021-03-17 17:44 phantom_yy 阅读(82) 评论(0) 推荐(0)
• webpack文件资源加载器
  摘要：1、导入图片 import icon from './icon.png' 2、安装file-loader yarn add file-loader --dev 3、使用 main.js const img = new Image(); img.src = icon; document.body.ap 阅读全文
  posted @ 2021-03-17 16:01 phantom_yy 阅读(89) 评论(0) 推荐(0)
• WebPack资源模块加载
  摘要：WebPack常用加载器分类 1、编译转换类 2、文件操作类 3、代码检查类 webpack默认打包javascript文件 1、为其他资源安装loader 安装css-loader yarn add css-loader --dev 2、添加style-loader yarn add style- 阅读全文
  posted @ 2021-03-17 12:05 phantom_yy 阅读(76) 评论(0) 推荐(0)
• ES Modules
  摘要：ES Modules浏览器环境Polyfill Polyfill支持大多数的ES Module正常加载 1、页面引入loader脚本文件 2、页面引入promise文件（浏览器未找到定义promise的情况下） 3、在使用Polyfill时，一些支持ES Module的浏览器会重复加载，所以在引用的 阅读全文
  posted @ 2021-03-15 18:54 phantom_yy 阅读(58) 评论(0) 推荐(0)
• ES Modules
  摘要：ES Modules特性 1、ESM自动采用严格模式，忽略'use strict' 2、每个ES Module 都是运行在单独的私有作用域 3、ESM是通过CORE的方式请求外部JS模块的 4、ESM的script标签会延迟执行脚本 ES Modules导入与导出 export模块内向模块外暴露接口 阅读全文
  posted @ 2021-03-15 16:56 phantom_yy 阅读(117) 评论(0) 推荐(0)
• FIS编译与压缩
  摘要：1、配置文件中添加配置 //转换sass //match第一个参数选择器 //rExt:扩展名 //optimizer：压缩 fis.match('**/*.scss',{ rExt:'.css', parse:fis.plugin('node-sass'), optimizer:fis.plugi 阅读全文
  posted @ 2021-03-11 18:15 phantom_yy 阅读(107) 评论(0) 推荐(0)
• FIS的基本使用
  摘要：FIS的核心特点：高度集成，它将前端开发常见的构建任务和调试都集中在内部，开发者可以通过简单的配置完成开发工作。 1、全局安装fis3模块 yarn global add fis3 2、构建任务 fis3 release 3、指定输出目录(output)，实现资源定位 fis3 release -d 阅读全文
  posted @ 2021-03-11 17:53 phantom_yy 阅读(191) 评论(0) 推荐(0)
• Gulp自动化构建案例---重新规划构建过程
  摘要：//clean任务 const clean = () =>{ return del(['dist','temp']) } 将style、script、page放到temp临时目录中 例如： const style = () =>{ return src('src/assets/styles/*scs 阅读全文
  posted @ 2021-03-08 19:24 phantom_yy 阅读(84) 评论(0) 推荐(0)
• Gulp自动化构建案例---文件压缩
  摘要：1、安装压缩插件 yarn add gulp-htmlmin gulp-uglify gulp-clean-css --dev 2、安装判断读取流类型的插件 yarn add gulp-if --dev 3、使用 const useref = () => { return src('dist/*.h 阅读全文
  posted @ 2021-03-08 18:49 phantom_yy 阅读(81) 评论(0) 推荐(0)
• Gulp自动化构建案例---useref文件引用处理
  摘要：1、安装useref插件 yarn add gulp-useref --dev 2、使用 const useref = () => { return src('dist/*.html',{base:'dist'}) .pipe(plugins.useref({searchPath:['dist',' 阅读全文
  posted @ 2021-03-08 18:18 phantom_yy 阅读(126) 评论(0) 推荐(0)
• Gulp自动化构建案例---监视变化以及构建优化
  摘要：1、使用watch监视开发过程中的变化 const {src,dest,parallel,series,watch} = require('gulp'); 2、在serve任务中使用 //serve任务 //notify：页面右上角browserSync的小提示，开着有时候会影响页面调试 //por 阅读全文
  posted @ 2021-03-08 17:45 phantom_yy 阅读(115) 评论(0) 推荐(0)
• Gulp自动化构建案例---开发服务器
  摘要：用于在开发阶段调试应用。 1、安装browser-sync模块，提供给我们一个开发服务器 yarn add browser-sync --dev 2、在gulp中使用这个模块 //serve任务 //notify：页面右上角browserSync的小提示，开着有时候会影响页面调试 //port：端口 阅读全文
  posted @ 2021-03-08 16:38 phantom_yy 阅读(71) 评论(0) 推荐(0)
• Gulp自动化构建案例---自动加载插件
  摘要：1、安装插件 yarn add gulp-load-plugins --dev 2、加载插件 //载入自动加载插件 const loadPlugins = require('gulp-load-plugins'); const plugins = loadPlugins(); 3、使用 将代码中的任 阅读全文
  posted @ 2021-03-05 19:59 phantom_yy 阅读(94) 评论(0) 推荐(0)
• Gulp自动化构建案例---其他文件及文件清除
  摘要：1、将public目录下的文件拷贝到dist目录下 //额外的任务 //将public目录下的文件放到dist目录下 const extra = () => { return src('public/**',{base:'public'}) .pipe(dest('dist')) } 2、将额外任务 阅读全文
  posted @ 2021-03-05 19:45 phantom_yy 阅读(177) 评论(0) 推荐(0)
• Gulp自动化构建案例---图片和字体文件转换
  摘要：1、安装插件 yarn add gulp-imagemin --dev 2、加载插件 //载入imagemin文件 const imagemin = require('gulp-imagemin'); 3、图片压缩任务 //图片转换任务 const img = () => { return src( 阅读全文
  posted @ 2021-03-05 19:27 phantom_yy 阅读(179) 评论(0) 推荐(0)
• Gulp自动化构建案例---页面模板编译
  摘要：1、安装模板引擎 yarn add gulp-swig --dev 2、载入插件 const swig = require('gulp-swig'); 3、使用 .pipe(swig(data))是.pipe(swig(data:data))的简写 const {src,dest} = requir 阅读全文
  posted @ 2021-03-05 18:56 phantom_yy 阅读(218) 评论(0) 推荐(0)
• Gulp自动化构建案例---脚本编译
  摘要：1、安装gulp 2、在根目录下新建gulpfile文件，作为gulp入口 3、安装转换流插件 yarn add gulp-babel --dev 4、安装babel的核心模块 yarn add @babel/core @babel/preset-env --dev 5、使用 const {src, 阅读全文
  posted @ 2021-03-05 17:38 phantom_yy 阅读(90) 评论(0) 推荐(0)
• Gulp自动化构建案例---样式编译
  摘要：1、安装gulp yarn add gulp 2、在根目录下新建gulpfile文件，作为gulp入口 3、安装转换插件 yarn add gulp-sass --dev//sass只转换主文件，带有下划线的文件会被认为是主文件的依赖文件，不会去转换 4、基本使用 const {src,dest} 阅读全文
  posted @ 2021-03-05 16:38 phantom_yy 阅读(98) 评论(0) 推荐(0)
• Gulp文件操作APi
  摘要：1、基本用法 //载入src和dist方法 const { src,dest } = require('gulp'); //通过src创建读取流 //pipe:导出 //dist：写入流 //读取流路径：src/*.css //写入流路径：dist exports.default = () => { 阅读全文
  posted @ 2021-03-05 14:00 phantom_yy 阅读(167) 评论(0) 推荐(0)
• Gulp构建过程核心工作原理
  摘要：构建过程：读取文件，将文件转换，再写入到另外一个位置 三个核心概念：读取流（输入） 转换流（加工） 写入流（输出） const fs = require('fs'); const { Transform } = require('stream'); exports.default = () =>{ 阅读全文
  posted @ 2021-03-04 15:14 phantom_yy 阅读(128) 评论(0) 推荐(0)
• Gulp的异步任务
  摘要：异步任务的三种方式 通常情况下我们没有办法明确知道这个调用是否完成的，都是通过在函数内部通过回调或者是事件的方式去通知外部，这个函数调用已经完成。 在gulp的异步中也会存在这个问题。 1、使用回调函数 exports.callback = done => { console.log('callba 阅读全文
  posted @ 2021-03-04 14:02 phantom_yy 阅读(209) 评论(0) 推荐(0)
• grunt标记任务失败
  摘要：（1）同步标记任务失败 //标记失败任务 module.exports = grunt => { grunt.registerTask('bad',()=>{ console.log('bad working~'); return false; }); grunt.registerTask('foo 阅读全文
  posted @ 2021-03-03 18:11 phantom_yy 阅读(214) 评论(0) 推荐(0)
• grunt的基本使用
  摘要：（1）创建一个 package.json yarn init --yes // --yes 跳过会话，直接通过默认值生成 package.json // yarn init --yes # 简写 -y （2）添加Grunt模块 yarn add grunt （3）添加gruntfile文件 code 阅读全文
  posted @ 2021-03-03 18:09 phantom_yy 阅读(258) 评论(0) 推荐(0)
• Gulp的组合任务
  摘要：1、通过serise、parallel这两个API组合任务 serise:串行任务 parallel：并行任务 const {series,parallel} = require('gulp'); const task1 = done =>{ setTimeout(()=>{ console.log 阅读全文
  posted @ 2021-03-03 18:04 phantom_yy 阅读(95) 评论(0) 推荐(0)
• Gulp的基本使用
  摘要：gulp默认异步任务，没有同步任务 1、构建package.json yarn init --yes 2、安装gulp模块,安装gulp的同时会自动安装cli模块 yarn add gulp --dev 3、创建gulpfile.js文件，gulp的入口文件 code gulpfile.js 4、构 阅读全文
  posted @ 2021-03-03 17:31 phantom_yy 阅读(116) 评论(0) 推荐(0)
• Grunt的使用
  摘要：1、grunt的基本使用 （1）创建一个 package.json yarn init --yes // --yes 跳过会话，直接通过默认值生成 package.json // yarn init --yes # 简写 -y （2）添加Grunt模块 yarn add grunt （3）添加gru 阅读全文
  posted @ 2021-03-03 16:19 phantom_yy 阅读(217) 评论(0) 推荐(0)
• 7大优秀项目管理工具
  摘要：转自微信公众号软考集中营 工具1：PDCA循环 Plan（计划）：制定目标与计划 Do（执行）：任务展开，组织实施 Check（检查）：对过程中的关键点和最终结果进行检查 Action（处理）：纠正偏差，对成功过进行标准化，并确定新的目标，制定下一轮计划 工具2：SWOT分析法 Strengths（ 阅读全文
  posted @ 2021-03-03 14:30 phantom_yy 阅读(400) 评论(0) 推荐(0)