李思岐-CSDN博客

原创 Sass-常用功能

sass是什么sass 是一种成熟的 css 拓展语言。兼容 css 语法，较为灵活，可以显著减少代码编写行数常见的 sass 文件有两种后缀：.sass 或.scss。.sass 采用缩进格式，且不需要分号。.scss 写法采用经典的大括号类似的代码块的写法.sass写法.hello width: 100px height: 100px border: 1px solid black.scss写法.hello { color: red;}sass 常用功能案例

2022-04-29 12:29:09 632

原创 vue3 组件规划方案

模板可以复用。模板通常伴随着业务。如果当前页面代码量过多，出现巨型组件。最好按块去拆下。目的是减少当前组件的代码行数，但是作为代价，需要多次设计组件的通信和多出 props（不提 emit 时间，是因为 props和 emit 是对等的。可以:on-click 传递一个回调函数，跟 react 那样，在子组件里调用父组件传进来的回调函数）业务逻辑业务逻辑可以借用 setup，将逻辑进行组合。把单独的逻辑放进单独的文件里组成逻辑的各个功能功能可以在上一步的业务逻辑文件里去实现对于可复用的逻

2021-11-23 10:48:04 706

原创 typescript 中使用库的方法

全局库-如JQuery检查库中有没有.d.ts 文件-true: 什么都不做-false: 编写.d.ts。放在目录中，如果可能，发布至@types因为是全局库，所以不需要 Exportnpm 安装的检查库中有没有自带的.d.ts-true : 什么也不做-false: 编写全局库，然后export 出来。...

2021-11-23 10:13:31 781

转载代码覆盖率工具 Istanbul

代码覆盖率工具 Istanbul 入门教程代码覆盖率的 4 个纬度行覆盖率：是否每一行都执行了？函数覆盖率：是否每个函数都调用了？分支覆盖率: 是否每个代码块都执行了？语句覆盖率：是否每个语句都执行了使用npm install istanbul 使用istanbul cover命令，就能得到覆盖率$ istanbul cover simple.js===== Coverage summary =====Statements : 75% ( 3/4 )Branches

2021-09-29 14:46:33 620

转载 Mocha

MochaMocha是现在最流行的 Javascript 测试框架之一。在 Node 和浏览器环境都可以使用使用npm install mocha --global测试脚本的写法所谓"测试脚本"，就是用来测试源码的脚本。// add.jsfunction add(x, y) { return x + y;}module.exports = add;// add.test.js// add.test.jsvar add = require('./add.js');var

2021-09-29 14:37:31 396

原创 rollup

概述Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码。Rollup 对代码模块使用 ES6 模块系统，ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码(tree-shaking)。ES6 模块最终还是要由浏览器原生实现(浏览器ESM)，但当前 Rollup 可以使你提前体验。Tree-shaking除了使用 ES6 模块之外，Rollup 还静态分析代码中的 import，并将排除任何未实

2021-09-29 11:37:56 219

原创在nodeJS 模块中写ESM模块

升级 node 版本至>=14.0配置 package.json"type": "module",

2021-09-29 10:33:11 511

原创 webpack_step7_chunk如何输出成具体文件

同步加载模块 JSfunction show(content) { window.document.getElementById("app").innerText = "Hello," + content;}// 通过 CommonJS 规范导出 show 函数module.exports = show;main.js 中引入import show from "./show";show("webpack");bundle.js(function (modules) { .

2021-09-28 15:34:22 122

原创 webpack_step6_编写一个loader

编写一个 loaderloader 是一个导出为一个函数的 node 模块本地测试方法可以通过简单的 rule 对象设置 path.resolve 指向这个本地文件module.exports = { //... module: { rules: [ { test: /\.js$/, use: [ { loader: path.resolve('path/to/loader.js'),

2021-09-27 16:11:53 64

原创 webpack_step5_loaderAPI

loader API所为 loader 只是一个到处为函数的 Javascript模块。webpack 内部会调用这个函数，然后把上一个 loader 产生的结果或者资源传进去。函数的 this 上下文将由 webpack 填充，并且 loader runner 具有一些有用方法，可以使 loader 改变为异步调用方式，或者获取 query 参数。第一个 loader 传入的参数只有一个，资源文件的内容。compiler 需要得到最后一个 loader 产生的处理结果。这个处理结果应该是 String

2021-09-27 15:48:02 130

原创 webpack_step4_创建一个插件

插件的构成一个插件由以下几个部分构成一个具名的 Javascript 函数在原型上定义 apply 方法指定一个触及到 webpack 本身的事件钩子操作 webpack 内部实例特定数据在实现功能之后调用webpack 提供的 Callbackapply 方法插件是由一个构造函数（此构造函数的 prototype 对象具有 apply 方法)所实例化出来的。这个 apply 方法在安装插件时，会被 webpack compilier 调用一次。apply 方法可以接收一个 webpck

2021-09-27 13:09:18 121

原创 webpack_step3_compiler 钩子

Compilier 模块是 webpack 的支柱引擎。通过 cli 或者 NodeAPI 传递的所有选项，创建出一个 compikation 实例。扩展自 Tapable 类。大部分钩子可以通过类似的方法访问compiler.hooks.someHook.tap(/* ... */);watchingCompiler 支持可以监控文件系统的监听(watching)机制，并且在文件修改时重新编译。entryOption在 webpack 选项中的 entry 配置项处理过之后，执行插件

2021-09-27 11:18:54 270

原创 webpack_step3_插件 API

Plugin API插件通过Tapable类来提供插件接口。这个类保留 tap,tabAsync 和 tabPromise 方法，可以使用这些方法注入自定义构建步骤。而这些步骤将在整个编译过程中的不同时机触发，通常需要结合compiler hooks和插件内部暴露出来的钩子使用tap 用于触发同步钩子，例如进入一次新的构建 - compile 阶段tabAsync和tabPromise用来触发异步钩子。如启动编译钩子 - run自定义钩子可以为其他插件的编译添加一个新的钩子，来触及到这些插件

2021-09-27 11:00:45 89

原创 webpack_step2_工作原理

流程初始化：从配置文件或是shell读取与合并参数，得到最终参数，实例化插件new Plugin()开始编译：通过上一步初始化得到的最终参数，初始化一个Compiler对象，加载插件（依次调用插件中的apply方法），通过执行Compiler.run开始编译确定入口：根据配置中entry找出所有入口文件编译模块：从entry出发，调用配置的loader，对模块进行转换，同时找出模块依赖的模块（如何找？见下文），依次递归，直到所有依赖模块完成本步骤处理完成模块编译：这一步已经使用loader对所有

2021-09-26 18:47:53 61

原创 webpack_step1_概念

webpack版本v_5.54核心概念入口(entry)输出loader插件模式浏览器兼容性webpack 应该使用哪个模块作为构建依赖图的开始output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务,如打包优化，注入文件通过选择

2021-09-26 15:57:10 73

原创 flex 布局

flex每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系。注意：水平的不一定就是主轴。每根轴都有起点和终点，这对于元素的对齐非常重要。弹性容器中的所有子元素称为<弹性元素>，弹性元素永远沿主轴排列。容器属性flex-direction默认值： rowdiv { display: flex; flex-direction: row | coloum | row-reverse | column-reverse}flex-wrap默认值：no-wrap

2021-09-17 14:25:29 92

原创 Mock.js

Mock.jsmock.js 是一款数据模拟生成器。可以独立于后端，自行构建返回数据。可用于前后端分离的开发模式和单元测试使用方式// 安装npm install mockjs// 使用var Mock = require('mockjs');var data = Mock.mock({ 'list|1-10': [{ 'id|+1': 1 }]});语法规范mock.js 的语法规范分为两部分：数据模板定义数据占位符定义数据模板定义

2021-09-12 17:45:52 139

原创安全方案-验证码

一、验证码的作用网络平台防止恶意注册(代码代替人去完成注册)提出的解决方案。攻击者可以自行构造客户端，短时间内发送多个注册成功的请求。二、仅靠前端实现的验证码是否安全?如果验证码仅仅由前端实现，这种场景下攻击者依然能绕过正规的客户端（浏览器），自行构造客户端去进行恶意注册。只是在构造请求时，多加一个验证码校验成功的参数而已。依然解决不了恶意注册的问题。三、正确解决方案用户输入完验证码之后，将输入传递给服务端，服务端去校验验证码是否正确（校验从单独的前端校验，转移到了后端的校验）这样就算攻击者绕过了

2021-09-12 17:15:31 301

原创解决移动端 iphoneX 下吸底按钮被屏幕遮挡

2021-09-07 18:51:23 753

原创安卓下软件盘弹起使得底部按钮遮挡输入框

解决办法：软件盘弹起，隐藏按钮。收起时，再展示按钮<template><button v-show="isOriginHei">按钮</button><template><script>export default { name: 'Vue', data() { return { isOriginHei: true, // 按钮是否展示 screenHeight: document.documentE

2021-09-07 18:48:39 110

原创数组排序方式

/* * @Author: 李灿 * @Date: 2021-07-04 12:18:54 * @LastEditTime: 2021-07-18 17:05:34 * @Description: 数组排序算法 * @FilePath: /demo/bubble.js *//** * @description: 冒泡排序 * @param {*} * @return {*} */function bubble() { let arr = [63, 4, 24, 1, 3, 15]

2021-07-18 17:06:48 64

原创跨平台解决方案

CordovaCordova是一个apache 开源的跨平台框架，可以使用前端语言来实现跨平台 app。- 属于第一代跨平台方案，现在用纯 Cordova 做 app 的很少，Hibird 中出现的较多- 页面渲染使用的是 webView，与原生交互的时候需要借助原生注入在 webView 的方法来交互。- H5 与原生的交互还可以使用原生拦截 webview 发出的请求（链接）来实现react-native，weex页面渲染调用原生的组件，组件标签会被编译为原生组件去渲染。但是发布，环境安装收

2021-04-10 20:57:53 482 2

原创 requireJS

文件路径的书写方式require方法里的字符串数组参数允许不同的值，当字符串是以.js结尾，或以/ 开头，或是一个url时，RequireJS会认为用户是在直接加载一个JS文件；否则，当字符串是类似my/modyle时，他会认为这是一个模块，并且会以用户配置的baseUrl和paths来加载相应的模块所在的JS文件。...

2021-03-14 22:26:21 283

原创 Chrom Debugger

解决的问题有时候接到一个代码量非常多的项目，如果看看页面，看看交互，再看着繁冗并且在不同文件中跳来跳去的代码仍然没有办法理清代码的执行过程。这时候在某个地方打一个断点，结合 Chrom Source 面板，可能会很清晰看到代码的执行步骤以及函数的执行过程主要用到的功能保存 log有时候因为页面跳转，log 自动清空刷新。可以点击右上角设置按钮，选择 preserve-log。console 和 network 面板都是一样的用法...

2021-03-14 22:24:41 75

原创前端自动化部署

名词解释集成：在推送或者 merge 代码后自动进行构建打包交付：将上一步生成的代码包发布至测试、生产等环境需求在 git 代码仓库发生变化后，自动执行打包脚本，并且发布至服务器。解决的问题在之前每次开发完毕需要上线之前，需要手动执行 bash 命令打包，并且将打包后的代码人为的拖动至上传应用（FlileZilla Pro）。手动执行构建脚本消耗时间人力而拖动代码文件会存在拖拽错误，覆盖之前的其他项目代码等难以预料的问题工具选择gitlab/github/giteeJenki

2021-03-08 16:42:37 3100

原创 vue 组件通信的另一种方式

vue 通信方式（一般）props传递-父到子$emit - 子到父vuex - 全局共享设置到 this 原型上共享，或者其他全局方式共享子组件更新父组件的另一种方式方法是类似于 react 那样，往子组件里传递一个回调函数。在子组件里调用，函数在父组件里执行父组件<template> <receiveFunctionComponent :f="receiveFunctionComponenMethod" /> <h3> {{rec

2021-03-07 23:12:55 53

原创 H5 定位

navigator通过对宿主环境的navigator属性进行检测，是否存在geolocation属性，判断是否支持 H5 定位MDN 文档指出，Navigator.geolocation 只读属性返回一个 Geolocation 对象，通过这个对象可以访问到设备的位置信息Navigator.geolocationAPI 只支持 HTTPS 协议和一部分浏览器，如果不支持，需要用其他方式去兼容获取方法：navigator.geolocation.getCurrentPosition(success,

2021-03-07 22:53:21 683

空空如也

空空如也