2021 年 9月随笔档案 - aisowe

解析 JSX 语法

摘要：npx npm i -D @babel/preset-react webpack.config.js { "presets": [ [ "@babel/preset-env", { "targets": { "chrome": "90" }, "useBuiltIns": "usage" } ], 阅读全文

posted @ 2021-09-10 10:44 aisowe 阅读(91) 评论(0) 推荐(0) 编辑

进行打包分析

摘要：webpack.analysis.js const { merge } = require('webpack-merge') const commonConfig = require('./webpack.common') const { BundleAnalyzerPlugin } = requi 阅读全文

posted @ 2021-09-10 10:44 aisowe 阅读(80) 评论(0) 推荐(0) 编辑

解决在 .scss 中 @import 其他 .scss 文件时可能出现的打包顺序执行异常

摘要：webpack.config.js module.exports = { module: { rules: [ { test: /\.(css|scss)$/, use: [ 'style-loader', { loader: 'css-loader', options: { importLoade 阅读全文

posted @ 2021-09-10 10:43 aisowe 阅读(565) 评论(0) 推荐(0) 编辑

解决中文在 html 文件中乱码

摘要：index.html <!DOCTYPE html> <html> <head>  <meta charset="UTF-8" /> </head> <body> <script> alert("右究"); </script> </body> </html> 阅读全文

posted @ 2021-09-10 10:43 aisowe 阅读(97) 评论(0) 推荐(0) 编辑

解决懒加载的副作用

摘要：index.js document.addEventListener('click', () => { import(/* webpackPrefetch: true */ 'lodash').then(({ default: { join } }) => { console.log(join([1 阅读全文

posted @ 2021-09-10 10:42 aisowe 阅读(103) 评论(0) 推荐(0) 编辑

解决因`script`前置而造成的操作 DOM 报错

摘要：index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <script> document.addEventListener("DOMContentLoaded", function () { console.log(doc 阅读全文

posted @ 2021-09-10 10:42 aisowe 阅读(77) 评论(0) 推荐(0) 编辑

解决构造函数的缺陷

摘要：index.js function Animal(race) { this.race = race; } Animal.prototype.eat = function () { console.log(`${this.race} is eatting.`); }; const bird = new 阅读全文

posted @ 2021-09-10 10:40 aisowe 阅读(60) 评论(0) 推荐(0) 编辑

解决打包时 “TypeError this.getOptions is not a function” 报错

摘要：operate install lower version of target loader. 阅读全文

posted @ 2021-09-10 10:38 aisowe 阅读(341) 评论(0) 推荐(0) 编辑

解决 Error Cannot find module 'webpack-clibinconfig-yargs' 报错

摘要：operate 保证 webpack-cli 和 webpack-dev-server 大版本号相同阅读全文

posted @ 2021-09-10 10:37 aisowe 阅读(87) 评论(0) 推荐(0) 编辑

解除 Tree Shaking 的副作用

摘要：// sideEffects 的用法阅读全文

posted @ 2021-09-10 10:17 aisowe 阅读(136) 评论(0) 推荐(0) 编辑

将一个元素数组渲染进 DOM

摘要：index.js import React, { Component } from 'react' import ReactDOM from 'react-dom' class Bar extends Component { constructor() { super() this.state = 阅读全文

posted @ 2021-09-10 10:16 aisowe 阅读(110) 评论(0) 推荐(0) 编辑

将暂存区中的变动撤回到工作区

摘要：在 git status 时提示的是使用以下命令： git restore --staged file_name 也可以用老式的方法： git reset HEAD file_name 阅读全文

posted @ 2021-09-10 10:16 aisowe 阅读(336) 评论(0) 推荐(0) 编辑

将一个函数作为 props 传递给子组件

摘要：index.js import React from 'react' import ReactDOM from 'react-dom' const UserNameInput = ({ getName }) => { return ( <input onInput={function (e) { g 阅读全文

posted @ 2021-09-10 10:15 aisowe 阅读(123) 评论(0) 推荐(0) 编辑

将一个新的语法从提案到变成正式标准

摘要：progress 阶段0：展示阶段1：征集阶段2：草案阶段3：候选阶段4：定案阅读全文

posted @ 2021-09-10 10:15 aisowe 阅读(15) 评论(0) 推荐(0) 编辑

将一个 React 元素渲染进 DOM

摘要：index.js import React from 'react' import ReactDOM from 'react-dom' const element = <h1>hello</h1> // 这是一个 React 元素 ReactDOM.render(element, document. 阅读全文

posted @ 2021-09-10 10:14 aisowe 阅读(58) 评论(0) 推荐(0) 编辑

将 iconfont 图标添加至项目

摘要：https://www.iconfont.cn/ 资源管理 -> 我的项目 https://www.iconfont.cn/manage/index 新建项目 https://www.iconfont.cn/collections/index 搜索选择图标并添加至购物车 -> 添加至项目 -> 确定阅读全文

posted @ 2021-09-10 10:13 aisowe 阅读(223) 评论(0) 推荐(0) 编辑

将图片打包到专门存放图片的 images 目录下

摘要：webpack.config.js const { resolve } = require('path') module.exports = { module: { rules: [ { test: /\.png$/, use: { loader: 'file-loader', options: { 阅读全文

posted @ 2021-09-10 10:13 aisowe 阅读(74) 评论(0) 推荐(0) 编辑

将图片文件打包成 Base64

摘要：npm npm i -D url-loader webpack.config.js module.exports = { // ... module: { rules: [ { test: /\.png$/, use: 'url-loader', }, ], }, } 阅读全文

posted @ 2021-09-10 10:13 aisowe 阅读(159) 评论(0) 推荐(0) 编辑

将同一个应用程序同时作为 http 和 https

摘要：app.js const http = require('http') const https = require('https') const Koa = require('koa') const app = new Koa() app.use(ctx => { ctx.body = 'Hello 阅读全文

posted @ 2021-09-10 10:12 aisowe 阅读(87) 评论(0) 推荐(0) 编辑

将数组元素划分为等长的块（二维数组）

摘要：index.ts import * as _ from "lodash"; const list = [1, 2, 3, 4, 5]; const arr = _.chunk(list, 2); console.log(arr); // [[1, 2], [3, 4], [5]] 阅读全文

posted @ 2021-09-10 10:11 aisowe 阅读(49) 评论(0) 推荐(0) 编辑

将数组中的空元素转为 undefined

摘要：index.js const list = [1, , 3]; Array.apply(null, list); // [1, undefined, 3] [...list]; // [1, undefined, 3] 阅读全文

posted @ 2021-09-10 10:11 aisowe 阅读(153) 评论(0) 推荐(0) 编辑

将某个类型断言为另一个与之毫无关系的类型

摘要：rule as any as Foo // 双重断言阅读全文

posted @ 2021-09-10 10:10 aisowe 阅读(19) 评论(0) 推荐(0) 编辑

将前端代码放入 Egg 项目中

摘要：./app/public app/public └── index.html browser http://localhost:7001/public/index.html 阅读全文

posted @ 2021-09-10 10:10 aisowe 阅读(72) 评论(0) 推荐(0) 编辑

将根组件挂载到 DOM 节点上

摘要：App.jsx import React from 'react' class App extends React.Component { render() { return <h3>Hello</h3> } } export default App index.js import React fr 阅读全文

posted @ 2021-09-10 10:09 aisowe 阅读(335) 评论(0) 推荐(0) 编辑

将类数组对象转换成数组

摘要：index.js const arrayLikeObj = { 0: 1, length: 2 }; [].slice.apply(arrayLikeObj); // [1, empty] Array.prototype.slice.apply(arrayLikeObj); // [1, empty 阅读全文

posted @ 2021-09-10 10:09 aisowe 阅读(56) 评论(0) 推荐(0) 编辑

将 ts 代码转成 js 代码

摘要：index.ts function foo(bar: string, baz: number): (string | number)[] { return [bar, baz]; } bash tsc index.ts 阅读全文

posted @ 2021-09-10 10:08 aisowe 阅读(2266) 评论(0) 推荐(0) 编辑

将代码推迟到系统资源空闲时执行

摘要：index.js requestIdleCallback(myNonEssentialWork); function myNonEssentialWork(deadline) { while (deadline.timeRemaining() > 0) { doWorkIfNeeded(); } } 阅读全文

posted @ 2021-09-10 10:08 aisowe 阅读(32) 评论(0) 推荐(0) 编辑

React 将 state 传给子组件用

摘要：index.js import React from 'react' import ReactDOM from 'react-dom' function Name({ name }) { return <span style={{ color: 'tomato' }}>{name}</span> } 阅读全文

posted @ 2021-09-10 10:07 aisowe 阅读(241) 评论(0) 推荐(0) 编辑

将 symbol 和 bigInt 转为其对应的包装对象

摘要：index.js const a = Symbol("a"); const symbolWrapperObj = Object(a); const b = 11n; const bigIntWrapperObj = Object(b); 阅读全文

posted @ 2021-09-10 10:07 aisowe 阅读(35) 评论(0) 推荐(0) 编辑

将 DOMString 转换为 DOM 节点并插入 DOM

摘要：index.js const root = document.getElementById('root') root.innerHTML = ` <h1>hello</h1> <strong> <span>world</span> </strong> ` 阅读全文

posted @ 2021-09-10 10:06 aisowe 阅读(365) 评论(0) 推荐(0) 编辑

检查脚本打开的窗口是否关闭

摘要：index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <button id="btn1">打开窗口</button> <button id="btn2">检测</button> <script 阅读全文

posted @ 2021-09-10 10:05 aisowe 阅读(45) 评论(0) 推荐(0) 编辑

检查某个对象是否为另一个对象的原型

摘要：index.js function Foo() {} const foo = new Foo(); console.log(foo instanceof Foo); // true // 等价于 console.log(Foo.prototype.isPrototypeOf(foo)); // tr 阅读全文

posted @ 2021-09-10 10:05 aisowe 阅读(28) 评论(0) 推荐(0) 编辑

监听子窗口的聚焦与失焦

摘要：index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <button onclick="clickHandler()">open: sub.html</button> <script> // 阅读全文

posted @ 2021-09-10 10:04 aisowe 阅读(216) 评论(0) 推荐(0) 编辑

减轻被恶意网站修改父窗口 URL 的风险

摘要：方法1：给 a 标签添加 rel 属性 <a href="https://an.evil.site" target="_blank" rel="noopener">恶意网站</a> 方法2：打开子窗口时将子窗口的 opener 设置为 null const newWin = window.open( 阅读全文

posted @ 2021-09-10 10:04 aisowe 阅读(42) 评论(0) 推荐(0) 编辑

监听同一文档的浏览历史变动

摘要：window.onpopstate = function(res) { console.log(res) } 注意： pushState()或replaceState()不能触发该事件；用户点击前进、后退，或 History.back()、History.forward()、History.go( 阅读全文

posted @ 2021-09-10 10:03 aisowe 阅读(31) 评论(0) 推荐(0) 编辑

类型转换总结

摘要：Boolean null, undefined, false, NaN, '', +0, -0, 0n --> false，其它均为 true Number 能转则转，不能则 NaN(undefined)，特例 Symbol 会报错。 String "true", "0", "1,2", "[obj 阅读全文

posted @ 2021-09-10 10:01 aisowe 阅读(12) 评论(0) 推荐(0) 编辑

主流浏览器使用的 JS 引擎（虚拟机）

摘要：浏览器 JS 引擎 Firefox SpiderMonkey Safari Nitro/JavaScript Core Chrome V8 IE Chakra Edge ChakraCore 狐猴、V8、查克拉阅读全文

posted @ 2021-09-10 10:01 aisowe 阅读(277) 评论(0) 推荐(0) 编辑

监听 hash 值变化

摘要：window.onhashchange = function (e) { console.log(e) } 如果pushState的 URL 参数设置了一个新的锚点值（即hash），并不会触发hashchange事件。反过来，如果 URL 的锚点值变了，则会在 History 对象创建一条浏览记录阅读全文

posted @ 2021-09-10 10:01 aisowe 阅读(272) 评论(0) 推荐(0) 编辑

主流浏览器使用的渲染引擎

摘要：浏览器渲染引擎 Firefox Gecko Safari WebKit Chrome Blink IE Trident Edge EdgeHTML FG - > SW → CB → IT → EE 阅读全文

posted @ 2021-09-10 09:59 aisowe 阅读(68) 评论(0) 推荐(0) 编辑

即时编译、运行 typescript 代码

摘要：bash npm i ts-node -g npm i nodemon -g index.ts const foo: string = 'Hello' console.log(foo) bash nodemon index.ts 阅读全文

posted @ 2021-09-10 09:58 aisowe 阅读(118) 评论(0) 推荐(0) 编辑

获取在父窗口“联系”用 window.open 打开的子窗口

摘要：index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <button onclick="clickHandler()">打开窗口</button> <script> function clic 阅读全文

posted @ 2021-09-10 09:57 aisowe 阅读(143) 评论(0) 推荐(0) 编辑

获取指定元素的最终样式信息

摘要：index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <h3>Hello, World!</h3> <script> const finalStyleObject = window.getCo 阅读全文

posted @ 2021-09-10 09:57 aisowe 阅读(10) 评论(0) 推荐(0) 编辑

获取网页加载到现在的毫秒数.md

摘要：index.js performance.now() 阅读全文

posted @ 2021-09-10 09:55 aisowe 阅读(28) 评论(0) 推荐(0) 编辑

获取选中的文本

摘要：index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <div>Hello, World!</div> <script> window.onmouseup = function () { co 阅读全文

posted @ 2021-09-10 09:55 aisowe 阅读(20) 评论(0) 推荐(0) 编辑

获取页面滚动距离

摘要：index.js window.scrollX window.scrollY window.pageXOffset // window.scrollX 别名 window.pageYOffset // window.scrollY 别名注意：只读、初始为 0,0 阅读全文

posted @ 2021-09-10 09:55 aisowe 阅读(337) 评论(0) 推荐(0) 编辑

获取实例对象的原型对象

摘要：index.js const instance = {}; console.log(instance.__proto__ Object.prototype); // true, 浏览器才需要部署 console.log(instance.constructor.prototype Object.pr 阅读全文

posted @ 2021-09-10 09:54 aisowe 阅读(99) 评论(0) 推荐(0) 编辑

获取浏览器当前位置

摘要：index.js window.screenX window.screenY 阅读全文

posted @ 2021-09-10 09:53 aisowe 阅读(129) 评论(0) 推荐(0) 编辑

获取浏览器组件属性对象

摘要：组件属性返回浏览器的组件对象，只读，只有 visible 属性，表示这些组件是否可见。 index.js window.locationbar.visible // 地址栏是否可见 window.menubar.visible // 菜单栏是否可见 window.scrollbars.visible 阅读全文

posted @ 2021-09-10 09:53 aisowe 阅读(85) 评论(0) 推荐(0) 编辑

获取某个对象的原型对象

摘要：index.js function Person() {} Person.prototype.sayHello = function () {}; console.log(Object.getPrototypeOf(new Person())); // {sayHello: ƒ, construct 阅读全文

posted @ 2021-09-10 09:53 aisowe 阅读(55) 评论(0) 推荐(0) 编辑

获取构造函数的名称

摘要：index.js // 构造函数和一般函数没有区别，都可以通过 name 属性获取函数名 function Person() {} const lilei = new Person(); console.log(lilei.constructor.name); // 'Person' console 阅读全文

posted @ 2021-09-10 09:52 aisowe 阅读(70) 评论(0) 推荐(0) 编辑

获取浏览器当前宽高

摘要：index.js window.outerHeight window.outerWidth 注意：包含浏览器菜单、边框、只读阅读全文

posted @ 2021-09-10 09:52 aisowe 阅读(43) 评论(0) 推荐(0) 编辑

获取当前页面一个 CSS 像素与一个物理像素之间的比率

摘要：index.js window.devicePixelRatio // 比例越大，表示诠释一个 CSS 像素所有的物理像素就越多，屏幕也就越高清阅读全文

posted @ 2021-09-10 09:51 aisowe 阅读(84) 评论(0) 推荐(0) 编辑

获取对象的所有属性，不管是否可遍历，不管是自身的还是原型链上的

摘要：index.js function Person() { this.race = "human being"; // 实例属性 } Person.prototype.color = "yellow"; // 公共属性/原型属性 const instance = new Person(); insta 阅读全文

posted @ 2021-09-10 09:51 aisowe 阅读(72) 评论(0) 推荐(0) 编辑

获取当前页面内所有框架窗口

摘要：index.js window.frames; // 返回类数组对象，元素包括 <frame> 和 <iframe> 阅读全文

posted @ 2021-09-10 09:50 aisowe 阅读(52) 评论(0) 推荐(0) 编辑

获取当前页面视口（viewport）宽高

摘要：index.js window.innerHeight window.innerWidth 注意：返回当前页面可视区域宽高（不包含书签栏、搜索栏等）、页面放大时这对属性会变小、只读、包含滚动条宽高、对应 vw 和 vh 单位；阅读全文

posted @ 2021-09-10 09:50 aisowe 阅读(537) 评论(0) 推荐(0) 编辑

获取当前嵌入窗口所在的那个元素节点

摘要：index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <h1> <iframe src="./sub.html" frameborder="0"></iframe> </h1> </body> 阅读全文

posted @ 2021-09-10 09:49 aisowe 阅读(17) 评论(0) 推荐(0) 编辑

获取当前页面内框架窗口的数量

摘要：index.js window.frames.length window.length // true 阅读全文

posted @ 2021-09-10 09:49 aisowe 阅读(135) 评论(0) 推荐(0) 编辑

获取窗口顶层对象

摘要：index.js window; // 最常用 window.self; // 别名 window.frames; // 别名 window.window; // 只读属性 window.parent; // 框架窗口中使用 window.top; // 框架窗口中使用阅读全文

posted @ 2021-09-10 09:48 aisowe 阅读(37) 评论(0) 推荐(0) 编辑

获取当前窗口访问过的页面的数量

摘要：history.length 阅读全文

posted @ 2021-09-10 09:48 aisowe 阅读(31) 评论(0) 推荐(0) 编辑

获取`script`标签中的代码内容

摘要：index.html <script id="script"> // .text || .innerText || .innerHTML alert(document.getElementById("script").text); </script> 阅读全文

posted @ 2021-09-10 09:47 aisowe 阅读(630) 评论(0) 推荐(0) 编辑

获取参数对象本身的所有属性的键名数组

摘要：index.js const instance = { name: "lilei", age: 13, }; Object.defineProperty(instance, "gender", { value: 1, enumerable: false, }); Object.getOwnPrope 阅读全文

posted @ 2021-09-10 09:47 aisowe 阅读(56) 评论(0) 推荐(0) 编辑

Git 回退到某个历史版本

摘要：回退到某个历史版本 git-bash git reset --hard commit_id 如果是回退到上一个版本，可以用便捷写法：git reset --hard HEAD^ 阅读全文

posted @ 2021-09-10 09:46 aisowe 阅读(193) 评论(0) 推荐(0) 编辑

获取 Object.prototype 的原型对象

摘要：index.js const objProto = {}.__proto__ || Object.getPrototypeOf({}) || Object.prototype; console.log(Object.getPrototypeOf(objProto) || objProto.__pro 阅读全文

posted @ 2021-09-10 09:46 aisowe 阅读(91) 评论(0) 推荐(0) 编辑

和 Cookie 有关的网络攻击有哪些

摘要：会话固定, 会话劫持, 中间人, 跨站脚本, 跨站请求伪造攻击. 阅读全文

posted @ 2021-09-10 09:45 aisowe 阅读(124) 评论(0) 推荐(0) 编辑

Git 回到最新的版本

摘要：回到最新的版本 git-bash # 查看切换记录 git reflog # 找到最新提交的 commit_id 并转至最新 git reset --hard commit_id 阅读全文

posted @ 2021-09-10 09:45 aisowe 阅读(1046) 评论(0) 推荐(0) 编辑

滚动到页面的指定位置

摘要：index.js window.scrollTo(x, y); // 绝对值滚动 window.scrollBy(x, y); // 相对值滚动注意：如果不是要滚动整个文档，而是要滚动某个元素，可以使用：Element.scrollTop()、Element.scrollLeft()、Elemen 阅读全文

posted @ 2021-09-10 09:44 aisowe 阅读(54) 评论(0) 推荐(0) 编辑

Lodash 过滤掉数组中的 falsy（假值）值

摘要：index.ts import * as _ from "lodash"; const list: Array<any> = ["", false, 0, NaN, undefined, null, 1]; const arr = _.compact(list); console.log(arr); 阅读全文

posted @ 2021-09-10 09:44 aisowe 阅读(560) 评论(0) 推荐(0) 编辑

怎样理解数组的空元素empty与undefined的区别

摘要：有三种方法: 1. Function.prototype.call(); 2. Function.prototype.apply(); 3. Function.prototype.bind(); 一、Function.prototype.call() 可以指定函数在参数对象环境下执行; var ob 阅读全文

posted @ 2021-09-10 09:43 aisowe 阅读(132) 评论(0) 推荐(0) 编辑

怎样绑定/固定/切换this的指向

摘要：有三种方法: 1. Function.prototype.call(); 2. Function.prototype.apply(); 3. Function.prototype.bind(); 一、Function.prototype.call() 可以指定函数在参数对象环境下执行; var ob 阅读全文

posted @ 2021-09-10 09:43 aisowe 阅读(54) 评论(0) 推荐(0) 编辑

关闭`window.open()`打开的窗口

摘要：index.js function clickHandler() { const newWindow = window.open( "./sub.html", "_blank", "left=100,top=100,height=500,width=800" ); setTimeout(functi 阅读全文

posted @ 2021-09-10 09:42 aisowe 阅读(575) 评论(0) 推荐(0) 编辑

关闭浏览器会话期 Cookie 一定会被删除吗

摘要：不一定, 某些浏览器具有会话恢复功能. 阅读全文

posted @ 2021-09-10 09:42 aisowe 阅读(336) 评论(0) 推荐(0) 编辑

React 固定事件监听函数的 this 指向

摘要：事件监听函数内部使用 this 会报错，原因是 this 的指向变成了事件触发对应的 DOM 节点，因此需要固定 this，方法有三种： index.js import React from 'react' import ReactDOM from 'react-dom' class Counter 阅读全文

posted @ 2021-09-10 09:41 aisowe 阅读(99) 评论(0) 推荐(0) 编辑

固定内层函数的 this

摘要：index.js const obj = { foo() { console.log(this); // obj const self = this; const bar = (function () { console.log(self); // obj })(); }, }; obj.foo() 阅读全文

posted @ 2021-09-10 09:40 aisowe 阅读(18) 评论(0) 推荐(0) 编辑

React 更新一个已渲染的元素

摘要：index.js import React from 'react' import ReactDOM from 'react-dom' function render() { const element = <h1>{new Date().toLocaleTimeString()}</h1> Rea 阅读全文

posted @ 2021-09-10 09:39 aisowe 阅读(95) 评论(0) 推荐(0) 编辑

更新已安装的 npm 包，比如更新：Vue-Cli

摘要：npm npm update -g @vue/cli 阅读全文

posted @ 2021-09-10 09:39 aisowe 阅读(305) 评论(0) 推荐(0) 编辑

根据页面本身的协议来决定加载脚本时使用的协议

摘要：index.html <sript src="//example.js"></sript> 阅读全文

posted @ 2021-09-10 09:38 aisowe 阅读(28) 评论(0) 推荐(0) 编辑

React 更新 state

摘要：index.js import React from 'react' import ReactDOM from 'react-dom' class Clock extends React.Component { constructor() { super() this.state = { time: 阅读全文

posted @ 2021-09-10 09:38 aisowe 阅读(124) 评论(0) 推荐(0) 编辑

Vuex 改变 state

摘要：./store/state.js export default { count: 3, name: '李雷', } ./store/mutations.js export default { INCREMENT(state) { state.count++ }, } ./App.vue <templ 阅读全文

posted @ 2021-09-10 09:37 aisowe 阅读(279) 评论(0) 推荐(0) 编辑

React 给事件监听函数添加参数

摘要：index.js import React, { Component } from 'react' import ReactDOM from 'react-dom' class App extends Component { clickHandler = name => { alert(name) 阅读全文

posted @ 2021-09-10 09:37 aisowe 阅读(308) 评论(0) 推荐(0) 编辑

防止漏写 new 而造成的构造函数执行异常

摘要：index.js // 方法1：严格模式 function Person(name) { "use strict"; this.name = name; } const lilei = Person("李雷"); // Error console.log(lilei.name); index.js 阅读全文

posted @ 2021-09-10 09:36 aisowe 阅读(41) 评论(0) 推荐(0) 编辑

访问联合类型中某个类型特有的属性或方法

摘要：index.ts interface Cat { name: string run(): void } interface Fish { name: string swim(): void } function isCat(animal: Cat | Fish): boolean { return 阅读全文

posted @ 2021-09-10 09:36 aisowe 阅读(112) 评论(0) 推荐(0) 编辑

防止攻击者篡改外部脚本

摘要：index.html  <script src="./xxx.js" integrity="****"></script> 阅读全文

posted @ 2021-09-10 09:35 aisowe 阅读(35) 评论(0) 推荐(0) 编辑

对 state 中的数组使用 v-model

摘要：./store/state.js export default { userInfo: { name: '' }, } ./store/mutations.js export default { UPDATE_NAME(state, payload = {}) { state.userInfo.na 阅读全文

posted @ 2021-09-09 10:53 aisowe 阅读(147) 评论(0) 推荐(0) 编辑

TS 定义一个最简单的字符串数组类型

摘要：index.ts const foo: string[] = ["foo", "bar"] 阅读全文

posted @ 2021-09-09 10:52 aisowe 阅读(2087) 评论(0) 推荐(0) 编辑

webpack 对 development 和 production 进行区分打包

摘要：./build - build - webpack.common.js - webpack.dev.js - webpack.prod.js webpack.common.js module.exports = { entry: output: plugins: module: ... } webp 阅读全文

posted @ 2021-09-09 10:52 aisowe 阅读(34) 评论(0) 推荐(0) 编辑

TS 定义一个抽象类（不允许被实例化）

摘要：index.ts abstract class Foo { constructor() {} className = "Foo"; } class FooChild extends Foo { constructor() { super(); } } // const foo = new Foo() 阅读全文

posted @ 2021-09-09 10:51 aisowe 阅读(193) 评论(0) 推荐(0) 编辑

TS 定义一个最简单的元组

摘要：index.ts const lilei: [string, number] = ["Lilei", 23] 阅读全文

posted @ 2021-09-09 10:51 aisowe 阅读(243) 评论(0) 推荐(0) 编辑

TS 定义数值类型

摘要：index.ts let decLiteral: number = 6 // 10 let hexLiteral: number = 0xf00d // 16 let binaryLiteral: number = 0b1010 // 2 let octalLiteral: number = 0o7 阅读全文

posted @ 2021-09-09 10:50 aisowe 阅读(690) 评论(0) 推荐(0) 编辑

TS 定义函数的可选参数类型

摘要：index.ts function foo(name: string, age?: number) { console.log(name + age); } foo("a"); // "aundefined" 阅读全文

posted @ 2021-09-09 10:49 aisowe 阅读(4247) 评论(0) 推荐(0) 编辑

TS 定义接口的可选属性

摘要：index.ts interface IPerson { name: string age: number gender?: number } const lilei: IPerson = { name: "Lilei", age: 23, } 阅读全文

posted @ 2021-09-09 10:49 aisowe 阅读(1018) 评论(0) 推荐(0) 编辑

TS 定义接口的任意一个属性

摘要：index.ts interface IPerson { name: string age: number family?: any[] // Error，因为不是任意类型的子集 [propName: string]: string | number // 一般设置 any，因为其他类型必需是任意类阅读全文

posted @ 2021-09-09 10:49 aisowe 阅读(2571) 评论(0) 推荐(0) 编辑

TS 定义函参剩余参数

摘要：index.ts function foo(...rest: any[]) { console.log(rest) } foo(1, 2, 3) // [1, 2, 3] 阅读全文

posted @ 2021-09-09 10:48 aisowe 阅读(290) 评论(0) 推荐(0) 编辑

JS 弹出阻塞性简单对话框

摘要：index.js window.alert('Hello! \n Lilei!') 阅读全文

posted @ 2021-09-09 10:47 aisowe 阅读(316) 评论(0) 推荐(0) 编辑

js 弹出需要用户输入文本的对话框

摘要：index.js const res = window.prompt("What's your name?"); alert(`Your name is ${res}`); 阅读全文

posted @ 2021-09-09 10:40 aisowe 阅读(691) 评论(0) 推荐(0) 编辑

打开 vscode 并加载项目目录

摘要：index.sh code D:/projFolder && git pull && npm run serve 阅读全文

posted @ 2021-09-09 10:39 aisowe 阅读(394) 评论(0) 推荐(0) 编辑

js 弹出带有确认和取消的问询对话框

摘要：index.js const res = window.confirm("Are you a programmer?"); alert(`Your answer is ${res}`); 阅读全文

posted @ 2021-09-09 10:39 aisowe 阅读(150) 评论(0) 推荐(0) 编辑

webpack 打包 .scss 样式文件

摘要：npm npm i -D sass-loader node-sass webpack.config.js module.exports = { // ... module: { rules: [ { test: /\.(css|scss)$/, use: ['style-loader', 'css- 阅读全文

posted @ 2021-09-09 10:38 aisowe 阅读(158) 评论(0) 推荐(0) 编辑

webpack 打包图片文件

摘要：npm npm i -D file-loader webpack.config.js module.exports = { module: { rules: [ { test: /\.(png|jpg|gif|jpeg)$/, use: { loader: 'file-loader', }, }, 阅读全文

posted @ 2021-09-09 10:38 aisowe 阅读(36) 评论(0) 推荐(0) 编辑

创建一个原型对象为 null 的对象

摘要：index.js const foo = Object(null); const bar = Object.create(null); console.log(foo instanceof Object); // true console.log(bar instanceof Object); // 阅读全文

posted @ 2021-09-09 10:37 aisowe 阅读(116) 评论(0) 推荐(0) 编辑

webpack 打包 css 文件

摘要：npm npm i -D style-loader css.loader webpack.config.js module.exports = { // ... module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loade 阅读全文

posted @ 2021-09-09 10:37 aisowe 阅读(23) 评论(0) 推荐(0) 编辑

@vue/cli 创建一个新的 Vue 项目.md

摘要：@vue/cli vue create xxx 阅读全文

posted @ 2021-09-09 10:36 aisowe 阅读(28) 评论(0) 推荐(0) 编辑

创建一个 uni-app 项目

摘要：browser https://www.dcloud.io/hbuilderx.html https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html HBuilderX 文件 -> 新建 -> 项目 -> uni-a 阅读全文

posted @ 2021-09-09 10:35 aisowe 阅读(48) 评论(0) 推荐(0) 编辑

创建一个不含原型对象的对象

摘要：index.js const specialObj = Object.create(null); console.log(specialObj.__proto__); // undefined 阅读全文

posted @ 2021-09-09 10:35 aisowe 阅读(278) 评论(0) 推荐(0) 编辑

React 创建一个类组件

摘要：index.js import React from "react"; class App extends React.Component { render() { return <h1>Hello, World!</h1>; } } 阅读全文

posted @ 2021-09-09 10:35 aisowe 阅读(95) 评论(0) 推荐(0) 编辑

ES5 创建构造函数的私有属性

摘要：index.js function Foo() { const list = []; this.push = function (val) { list.push(val); }; this.getList = function () { console.log(list); }; } const 阅读全文

posted @ 2021-09-09 10:34 aisowe 阅读(120) 评论(0) 推荐(0) 编辑

js 触发打印操作

摘要：index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <button onclick="clickHandler()">print</button> <script> function cli 阅读全文

posted @ 2021-09-09 10:33 aisowe 阅读(169) 评论(0) 推荐(0) 编辑

创建 React 项目

摘要：yarn yarn create react-app my-app 阅读全文

posted @ 2021-09-09 10:33 aisowe 阅读(12) 评论(0) 推荐(0) 编辑

处理因使用 BigInt 等最新语法时 ts 编译报错

摘要：tsconfig.json { "compilerOptions": { "target": "ESNEXT", "lib": ["DOM", "ESNEXT"], }, } index.ts const a = 11n 阅读全文

posted @ 2021-09-09 10:32 aisowe 阅读(274) 评论(0) 推荐(0) 编辑

TS 查找第三方声明文件

摘要：browser https://www.typescriptlang.org/dt/search?search= 阅读全文

posted @ 2021-09-09 10:31 aisowe 阅读(141) 评论(0) 推荐(0) 编辑

Git 撤销工作区中的变动

摘要：功能类似：撤回，Ctrl + Z。 git-bash git checkout -- file_name 这个命令只能撤回没有保存到暂存区和工作区中的变动，用于对做了修改，没暂存没提交但关闭了（导致无法Ctrl+Z）的文件进行撤销。阅读全文

posted @ 2021-09-09 10:31 aisowe 阅读(78) 评论(0) 推荐(0) 编辑

Git 查看文件修改状态

摘要：查看仓库当前状态 git-bash git status 阅读全文

posted @ 2021-09-09 10:30 aisowe 阅读(97) 评论(0) 推荐(0) 编辑

Git 查看用户名和 Email

摘要：查看全局用户名和 Email git-bash git config --global user.name git config --global user.email 查看当前仓库用户名和 Email git-bash git config user.name git config user.em 阅读全文

posted @ 2021-09-09 10:30 aisowe 阅读(1633) 评论(0) 推荐(0) 编辑

查看某个 npm 包的所有发行版版本号，比如 vue

摘要：bash npm view vue versions 阅读全文

posted @ 2021-09-09 10:29 aisowe 阅读(178) 评论(0) 推荐(0) 编辑

Git 查看文件修改详情

摘要：查看仓库当前状态 git-bash git diff 阅读全文

posted @ 2021-09-09 10:29 aisowe 阅读(449) 评论(0) 推荐(0) 编辑

Git 查看历史提交记录

摘要：查看历史提交记录 git-bash git log 如果觉得比较凌乱，可以用简略版：git log --pretty=oneline 阅读全文

posted @ 2021-09-09 10:28 aisowe 阅读(481) 评论(0) 推荐(0) 编辑

查看某个 npm 包当前最新发行版本的相关信息，比如 vuex

摘要：bash npm view vuex # or npm info vuex 阅读全文

posted @ 2021-09-09 10:28 aisowe 阅读(254) 评论(0) 推荐(0) 编辑

Git 查看版本切换记录

摘要：查看历史提交记录 git-bash git reflog 常配合git reset --hard用于回到未来的某个分支。阅读全文

posted @ 2021-09-09 10:27 aisowe 阅读(207) 评论(0) 推荐(0) 编辑

js 往dom元素中插入类名

摘要：index.js const img = document.createElement('img') // const img = new Image() img.classList.add('avatar') 阅读全文

posted @ 2021-09-09 10:26 aisowe 阅读(304) 评论(0) 推荐(0) 编辑

查看 ECMAScript 内置对象类型清单和声明文件源码

摘要：browser https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects https://github.com/Microsoft/TypeScript/tree/master/src/lib 阅读全文

posted @ 2021-09-09 10:26 aisowe 阅读(44) 评论(0) 推荐(0) 编辑

ts 中表现元组越界后的行为

摘要：index.ts const lilei: [string, number] = ["Lilei", 23]; lilei.push(NaN); // 3 lilei.push("NaN"); // NaN lilei.push(true); // string | number -> Error 阅读全文

posted @ 2021-09-09 10:25 aisowe 阅读(195) 评论(0) 推荐(0) 编辑

不用 devServer 就实现文件发生变动时就重新打包

摘要：webpack.config.js module.exports = { entry: { main: './src/index.js', }, } package.json { "scripts": { "watch": "webpack --watch" }, } 阅读全文

posted @ 2021-09-09 10:25 aisowe 阅读(24) 评论(0) 推荐(0) 编辑

TypeScript class 便捷设置实例属性

摘要：index.ts class Foo { constructor(public name: string, public readonly age: number) {} } const foo = new Foo("foo", 23); console.log(foo.name); console 阅读全文

posted @ 2021-09-09 10:24 aisowe 阅读(157) 评论(0) 推荐(0) 编辑

React 避免 setState 的合并调用特性

摘要：index.js import React from 'react' import ReactDOM from 'react-dom' class ANumber extends React.Component { constructor() { super() this.state = { num 阅读全文

posted @ 2021-09-09 10:23 aisowe 阅读(237) 评论(0) 推荐(0) 编辑

编写一个基本通用的 tsconfig.json 配置文件

摘要：tsconfig.json { "compilerOptions": { "target": "ESNEXT", "lib": ["DOM", "ESNEXT"], "module": "commonjs", "sourceMap": true, "outDir": "./dist", "modul 阅读全文

posted @ 2021-09-09 10:23 aisowe 阅读(103) 评论(0) 推荐(0) 编辑

React 绑定事件监听函数

摘要：index.js import React from 'react' import ReactDOM from 'react-dom' class Btn extends React.Component { render() { return <button onClick={() => alert 阅读全文

posted @ 2021-09-09 10:22 aisowe 阅读(491) 评论(0) 推荐(0) 编辑

保留 a 标签链接样式的同时，让页面不发生跳转

摘要：index.html <a href="javascript:void(0)" onclick="alert('右究')">点击</a> 阅读全文

posted @ 2021-09-09 10:22 aisowe 阅读(30) 评论(0) 推荐(0) 编辑

按条件从左往右移除数组中的元素

摘要：index.ts import * as _ from 'lodash' const list = [ { name: 'a', gender: 1 }, { name: 'b', gender: 0 }, { name: 'c', gender: 1 }, { name: 'd', gender: 阅读全文

posted @ 2021-09-09 10:21 aisowe 阅读(44) 评论(0) 推荐(0) 编辑

按条件从右往左移除数组中的元素

摘要：index.ts import * as _ from 'lodash' const list = [ { name: 'a', gender: 1 }, { name: 'b', gender: 0 }, { name: 'c', gender: 1 }, { name: 'd', gender: 阅读全文

posted @ 2021-09-09 10:20 aisowe 阅读(41) 评论(0) 推荐(0) 编辑

安装、注册 Vuex

摘要：npm npm i -S vuex main.js import Vue from 'vue' import Vuex from 'vuex' import App from './App.vue' Vue.use(Vuex) new Vue({ store: new Vuex.Store({ /* 阅读全文

posted @ 2021-09-09 10:19 aisowe 阅读(64) 评论(0) 推荐(0) 编辑

安装特定版本的 npm 包

摘要：bash npm i -D webpack@4 # npm i -D webpack@4.x.x 阅读全文

posted @ 2021-09-09 10:19 aisowe 阅读(302) 评论(0) 推荐(0) 编辑

安装 lodash

摘要：npm npm i -S lodash npm i -D @types/lodash 阅读全文

posted @ 2021-09-09 10:17 aisowe 阅读(345) 评论(0) 推荐(0) 编辑

怎样在 Vue3 中使用 defineComponent 和 ref 实现一个计数器组件

摘要：Counter.vue <template> <button @click="increment">{{ count }}</button> </template> <script lang="ts"> import { defineComponent, ref } from "vue"; expo 阅读全文

posted @ 2021-09-09 10:15 aisowe 阅读(1327) 评论(0) 推荐(0) 编辑

怎样在 Vue3 中使用 reactive 实现一个计数器组件

摘要：Counter.vue <template> <button @click="increment">{{ count }}</button> </template> <script lang="ts"> import { reactive, toRefs } from "vue"; export d 阅读全文

posted @ 2021-09-09 10:15 aisowe 阅读(107) 评论(0) 推荐(0) 编辑

怎样用一个 sleep 函数演示 async、await 的用法

摘要：index.js function sleep(n = 0) { return new Promise((resolve) => { setTimeout(function () { resolve(); }, n); }); } async function clock() { while (tr 阅读全文

posted @ 2021-09-09 10:14 aisowe 阅读(81) 评论(0) 推荐(0) 编辑

怎样用原生 Koa 实现路由功能

摘要：index.js const Koa = require("koa"); const app = new Koa(); app.use((ctx) => { switch (ctx.url) { case "/": ctx.body = "<h1>index.html</h1>"; break; d 阅读全文

posted @ 2021-09-09 10:14 aisowe 阅读(30) 评论(0) 推荐(0) 编辑

怎样用 koa-router 实现 get 请求

摘要：index.js const Koa = require("koa"); const Router = require("koa-router"); const app = new Koa(); const router = new Router(); router.get("/", (ctx) = 阅读全文

posted @ 2021-09-09 10:13 aisowe 阅读(30) 评论(0) 推荐(0) 编辑

怎样用 koa-bodyparser 获取 POST 请求上下文中的表单数据

摘要：index.js const Koa = require("koa"); const bodyParser = require("koa-bodyparser"); const app = new Koa(); app.use(bodyParser()); app.use(async (ctx) = 阅读全文

posted @ 2021-09-09 10:12 aisowe 阅读(78) 评论(0) 推荐(0) 编辑

怎样用 Koa 搭配 fs 模块返回一个 html 文件给前端

摘要：index.js const fs = require("fs"); const Koa = require("koa"); const app = new Koa(); app.use(async (ctx) => { const html = fs.readFileSync("./index.h 阅读全文

posted @ 2021-09-09 10:11 aisowe 阅读(734) 评论(0) 推荐(0) 编辑

怎样用 koa 解析出 POST 请求上下文中的表单数据

摘要：index.js const Koa = require("koa"); const app = new Koa(); function bodyParser(ctx) { return new Promise((resolve, reject) => { let postData = ""; tr 阅读全文

posted @ 2021-09-09 10:11 aisowe 阅读(156) 评论(0) 推荐(0) 编辑

怎样用 Koa 写 Hello, World!

摘要：index.js const Koa = require("koa"); const app = new Koa(); app.use((ctx) => { ctx.body = "Hello, World!"; }); app.listen(3000); 阅读全文

posted @ 2021-09-09 10:11 aisowe 阅读(27) 评论(0) 推荐(0) 编辑

怎样使用 Vue-CLI 创建 Vue3 项目

摘要：首先，需要安装 Vue-CLI，版本大于 4.5.4，然后使用 vue create <project-name>初始化项目；然后，项目初始化使用选项3：Manually select features，选择这几项，然后回车： Vue CLI v5.0.0-beta.0 ? Please pick 阅读全文

posted @ 2021-09-09 10:10 aisowe 阅读(321) 评论(0) 推荐(0) 编辑

Koa 中怎样获取请求中的 query 参数

摘要：index.js const Koa = require("koa"); const app = new Koa(); app.use((ctx) => { const { request: { query: query1, querystring: queryString1 }, query, q 阅读全文

posted @ 2021-09-09 10:09 aisowe 阅读(426) 评论(0) 推荐(0) 编辑

怎样开发一个最简版 Koa 日志打印中间件

摘要：index.js const Koa = require("koa"); const app = new Koa(); /** * a simple log middleware * @param {object} ctx */ function logger() { return async fu 阅读全文

posted @ 2021-09-09 10:09 aisowe 阅读(92) 评论(0) 推荐(0) 编辑

怎样安装 Koa

摘要：npm i -S koa 阅读全文

posted @ 2021-09-09 10:08 aisowe 阅读(18) 评论(0) 推荐(0) 编辑

辅助理解 this 的一些代码片段

摘要：构造函数式实例化对象、数组和函数 typeof new Object() 'object' // true Array.isArray(new Array()) // true typeof new Function() 'function' // true 字面量写法实例化对象、数组和函数 typ 阅读全文

posted @ 2021-09-09 10:02 aisowe 阅读(25) 评论(0) 推荐(0) 编辑

历史随笔: Array 的一些基础属性方法

摘要：数组对象: Array 1. 前言数组也好, 列表也好, 在不同的编程语言里面叫法虽然不一样, 但其本质是一样的, 作为最常用的对象, 其属性和方法是必须要牢记在心的, 以下是Array对象的完整属性方法示例. 2. 参数情况1: 没参数 var arr = new Array(); // 实例阅读全文

posted @ 2021-09-09 09:47 aisowe 阅读(60) 评论(0) 推荐(0) 编辑

68行代码实现贪吃蛇(Canvas)

摘要：<canvas id="gc" width="400" height="400"></canvas> <script> window.onload=function() { canv = document.getElementById("gc"); ctx = canv.getContext("2d 阅读全文

posted @ 2021-09-09 09:45 aisowe 阅读(49) 评论(0) 推荐(0) 编辑

怎样在 Svelte 中将 store 绑定到表单组件

摘要：正文所谓表单组件就是跟用户有交互的、能取到值的、是 form 的表单项的组件。在 Vue、React 中，store 里面的数据是严格控制其变动方式的，store 中的 state 只能通过 commit 触发改变。而 Svelte 中的 store 的更新是“自带”的，通过 set、update 阅读全文

posted @ 2021-09-09 09:42 aisowe 阅读(82) 评论(0) 推荐(0) 编辑

怎样在 Svelte 中使用 getters: derived

摘要：正文 Svelte 中的 store 不仅有 state，也可以有 getters，不过名字叫：derived，不太好读，但英文意思很直观：衍生的，也就是说，经他生成的数据是由其他 state 衍生的，这其实就是 getters 的定义，而 getters 也可以理解成 store 中的计算属性，也阅读全文

posted @ 2021-09-09 09:41 aisowe 阅读(171) 评论(0) 推荐(0) 编辑

怎样在 Svelte 中自定义 store

摘要：正文我们拿一个计数器举例，count 变量存在 store 中，我们用 count.set() 重置，用 count.subscribe() 订阅，用 count.update() 更新，一切看起来都很 OK，但实际上，如果想要更好的可维护性，这个 count 应该继续定义它的行为逻辑，也就是预定阅读全文

posted @ 2021-09-09 09:41 aisowe 阅读(70) 评论(0) 推荐(0) 编辑

怎样在 svelte/store 中进行状态自动订阅

摘要：正文下面代码中手动订阅与取消订阅的代码其实非常冗余，Svelte 提供了自动订阅的功能，可以自动为我们做订阅和取消订阅的操作。 <script> import { writable } from 'svelte/store' import {onDestroy} from 'svelte' con 阅读全文

posted @ 2021-09-09 09:40 aisowe 阅读(69) 评论(0) 推荐(0) 编辑

怎样使用 svelte/store 中的 readable

摘要：正文存在某些 store-state，它们的变动来源只依赖一个地方，且跟项目业务逻辑无关，这时其他地方都不会去修改它。比如获取当前时间，这时就不需要在特定组件里面去做修改，而是直接在设定 time 的时候，就将变动规则传给他，然后它就自己在那儿触发就行了，不需要管它。 <script> impor 阅读全文

posted @ 2021-09-09 09:40 aisowe 阅读(50) 评论(0) 推荐(0) 编辑

Svelte 中状态管理（store）的简单用法

摘要：正文以简单计数器为例，计数变量放在 store-state 中，它使用 svelte/store 中的 writable 方法，它会返回一个对象，通过调用对象上的 .set(val) 进行重置、调用 .update((val) => ...) 进行更新、调用 .subscribe(val => . 阅读全文

posted @ 2021-09-09 09:39 aisowe 阅读(475) 评论(0) 推荐(0) 编辑

Svelte 生命周期：挂载与卸载

摘要：正文 Svelte 作者是怎么想到的呀，居然把 onMount 和 beforeDestroy 合起来了：当 onMount 返回一个函数时，该函数会在组件销毁时调用，只能说NB.. 下面是子组件 Child.svelte，会发现在 onMount 函数内返回了一个 function： <scrip 阅读全文

posted @ 2021-09-09 09:38 aisowe 阅读(151) 评论(0) 推荐(0) 编辑

Svelte 生命周期函数全例子演示

摘要：正文用一个例子演示 Svelte 中所有生命周期函数的用法（实际上就是记几个单词）。下面是父组件：App.svelte，子组件的挂载、卸载都靠它触发： <script> import Child from "./Child.svelte"; // state let status = false 阅读全文

posted @ 2021-09-09 09:38 aisowe 阅读(161) 评论(0) 推荐(0) 编辑

怎样对 Svelte 组件进行双向数据绑定

摘要：正文 Vue 默认是将组件中一个名为 value 的 props 和一个名为 'input' 的自定义事件作为 v-model 的配置项，从而实现自定义组件的双向绑定功能。而 Svelte 中的双向数据绑定则灵活得多，它被称为“组件绑定”，也就是对子组件暴露出来的 props 直接使用 bind: 阅读全文

posted @ 2021-09-09 09:37 aisowe 阅读(266) 评论(0) 推荐(0) 编辑

Svelte 绑定尺寸属性

摘要：正文类似 clientWidth、clientHeight 这类属性，想要实时获取它们的值需要进行事件监听，但借助 Svelte 强大的数据绑定功能，可以做到对这一类属性的绑定与即时获取。 <script> let clientWidth, clientHeight; </script> <div 阅读全文

posted @ 2021-09-09 09:36 aisowe 阅读(76) 评论(0) 推荐(0) 编辑

怎样在 Svelte 中获取目标元素 DOM 节点

摘要：正文也就是 Vue 和 React 中的 ref 值，但 Svelte 中的获取方法更加符合直觉：把 DOM 节点的 this 赋值给特定变量 <script> import { onMount } from "svelte"; let titleEl; console.log("组件尚未挂载，因阅读全文

posted @ 2021-09-09 09:36 aisowe 阅读(305) 评论(0) 推荐(0) 编辑

在 Svelte each 块中使用双向数据绑定

摘要：正文下面是一个位于 each 块中的一组 input 输入框，可以通过 bind:value 实现数据的双向绑定。 <script> let list = ["eat morning."]; const add = () => { list = [...list, ""]; }; </script 阅读全文

posted @ 2021-09-09 09:35 aisowe 阅读(67) 评论(0) 推荐(0) 编辑

Svelte 绑定下拉框

摘要：正文任何表单控件都可以绑定，只是绑定的属性有所不同而已（大部分是 value）。 <script> let value = 2; // let value = []; // 多选时为数组 const options = [ { name: "apple", value: 0 }, { name: 阅读全文

posted @ 2021-09-09 09:34 aisowe 阅读(124) 评论(0) 推荐(0) 编辑

Svelte 怎样将插入的字符串转换为 html 标签

摘要：正文需要两个属性配合使用才行，他们是：contenteditable 和 innerHTML，如下 <script> let htmlStr = ` <strong>Hello, World!</strong> `; </script>  <div>{htmlStr}</d 阅读全文

posted @ 2021-09-09 09:34 aisowe 阅读(111) 评论(0) 推荐(0) 编辑

怎样使用 Svelte 中的“输入框组绑定”功能

摘要：正文输入框组绑定指定是某些类型的 input 标签的值共同作用于一个变量，比如一个选择男女的单选框，它们的值的变化就应该作用于同一个变量，此时就可以用输入框组绑定功能：bind:group={gender}。 <script> let gender = 1; $: console.log(gend 阅读全文

posted @ 2021-09-09 09:33 aisowe 阅读(112) 评论(0) 推荐(0) 编辑

Svelte 中怎样做双向数据绑定

摘要：正文双向数据绑定是很实用的特性，Vue 中使用指令：v-model，在 Svelte 中使用：bind:value={value}，这里因为属性名和绑定的变量值名称相同，所以可以简写成：bind:value。 <script> let value = ""; </script> <div> <!- 阅读全文

posted @ 2021-09-09 09:32 aisowe 阅读(141) 评论(0) 推荐(0) 编辑

Svelte 中多层组件事件转发

摘要：正文现在组件的层级是：<Father> 内嵌 <Child>，<Child> 内嵌 <GrandChild>，如果此时 Father 组件中定义的一个事件监听函数要在 <GrandChild> 组件中触发执行，则必定会经过中间组件：<Child>，下面是 <Child> 组件内的常规设置： <sc 阅读全文

posted @ 2021-09-09 09:31 aisowe 阅读(65) 评论(0) 推荐(0) 编辑

Svelte 中的事件修饰符

摘要：正文 React 中没有事件修饰符，Vue 用的说 @click.once 语法，Svelte 用的是 on:click|once 语法。 <script> const clickHandler = (foo) => alert(foo + "trigger"); </script> <!-- on 阅读全文

posted @ 2021-09-09 09:30 aisowe 阅读(82) 评论(0) 推荐(0) 编辑

怎样在 Svelte 中设置自定义事件

摘要：正文不同于 React 中以 props 传递，Svelte 中的自定义事件更加类似 Vue，不过需要使用 createEventDispatcher() 构建一个事件派发器，而这一步在 Vue 中是使用 this.$emit() 实现的。下面是子组件Nested.svelte，自定义事件将会在阅读全文

posted @ 2021-09-09 09:30 aisowe 阅读(161) 评论(0) 推荐(0) 编辑

怎样使用 Svelte 中的异步块

摘要：正文因为异步请求的处理逻辑大多相似：请求时 pending、成功请求时展示数据、请求失败时展示异常，所以 Svelte 贴心地在模板中添加了这一模式，方便我们去做处理。 <script> import AppBackup from "./AppBackup.svelte"; let promise 阅读全文

posted @ 2021-09-09 09:29 aisowe 阅读(106) 评论(0) 推荐(0) 编辑

怎样在 Svelte 列表渲染块中指定 key 和引用 index

摘要：key 值也存在于 Svelte 中，它在列表渲染区块中作为最后一个参数存在，使用括号包裹。 <script> let list = [ { name: "lilei", age: 21 }, { name: "hanmeimei", age: 24 }, { name: "lihua", age: 阅读全文

posted @ 2021-09-09 09:28 aisowe 阅读(104) 评论(0) 推荐(0) 编辑

Svelte 模板中条件渲染写法

摘要：1 前言模板写法不同于 JSX，JSX 可以用 JS 的条件控制语句，而模板需要单独设计条件控制语法，比如 Vue 中使用 v-if 2 正文 <script> let counter = 0; const increment = () => { counter++; }; </script> < 阅读全文

posted @ 2021-09-09 09:27 aisowe 阅读(119) 评论(0) 推荐(0) 编辑

Svelte 中的列表渲染用法

摘要：1 前言 Svelte 中条件渲染使用{#if ...} ... {/if} 声明，那列表渲染是不是类似：{#for ...} ... {/for}？ 2 正文 Svelte 中的列表渲染使用跟条件渲染类似的语法，不过关键字换成了 each，item 可以解构，这样看起来比较清晰。 <script> 阅读全文

posted @ 2021-09-09 09:27 aisowe 阅读(131) 评论(0) 推荐(0) 编辑

Svelte 怎样传入 props

摘要：1 前言前端组件化开发，单向数据流，有了 state、props 和状态更新机制，也就能做简单的 web 应用啦~ 2 正文 props 在根组件上以 props 选项的形式声明，在嵌套组件树中，可以自由设置和传递。先写一个子组件 Nested.svelte，该组件会在 App.svelte 中阅读全文

posted @ 2021-09-09 09:25 aisowe 阅读(129) 评论(0) 推荐(0) 编辑

Svelte 自定义组件属性统一设置与全部获取

摘要：1 前言当一个组件具有过多 props 时，就渴望有一种统一设置的方法；当子组件上存在从父组件传过来的非 props 属性时，子组件又该怎样获取呢？ 2 正文首先还是正常书写子组件：Nested.svelte，这里的$$props 可以获取父级传递的所有属性，包括 props 属性和非 prop 阅读全文

posted @ 2021-09-09 09:25 aisowe 阅读(240) 评论(0) 推荐(0) 编辑

Svelte 对数组和对象操作时的响应式

摘要：1 前言 Vue2 中无法监听7个数组方法引发的变化，它们分别是：pop、push、reverse、shfit、unshift、sort 和 splice。 2 正文 Svelte 中同样无法监听以上 7 个数组方法的变动，此外，类似delete obj.a 这种操作也是无法监听的，因为在 Svel 阅读全文

posted @ 2021-09-09 09:24 aisowe 阅读(269) 评论(0) 推荐(0) 编辑

Svelte 中的 watch: 反应性语句

摘要：1 前言 Svelte 中反应性不仅可以作声明用，还可以用在一段语句中，这点类似 Vue 中的 watch，但比 watch 灵活。 2 正文 <script> import { loop_guard } from "svelte/internal"; let count = 3; const in 阅读全文

posted @ 2021-09-09 09:23 aisowe 阅读(141) 评论(0) 推荐(0) 编辑

Svelte 中的计算属性：反应性声明

摘要：1 前言不知道为什么翻译成“反应性”，而不是“响应式”，因为不是选项式 API，计算属性在 Svelte 中的写法会是怎样的呢？ 2 正文 Svelte 中的计算属性使用

: 起 手 作 变 量 声 明 ， 它 会 在 等 号 右 边 依 赖 的 值 变 化 时 自 动 计 算 。 < s c r i p t > l e t c o u n t = 3;

$: 起手作变量声明，它会在等号右边依赖的值变化时自动计算。 <script> let count = 3;$ : dbCou 阅读全文

posted @ 2021-09-09 09:22 aisowe 阅读(204) 评论(0) 推荐(0) 编辑

09 2021 档案