Skip to main content

3 posts tagged with "javascript"

View All Tags

· 4 min read
Jeffrey

1 介绍​

  • Svelte 是一种构建用户界面的全新方法。传统框架（如 React 和 Vue）在浏览器中完成大部分工作，而 Svelte 将这些工作转移到编译步骤中，在您构建应用程序时发生。
  • Svelte 没有使用虚拟 DOM diffing 之类的技术，而是编写了在应用程序状态发生变化时以手术方式更新 DOM 的代码。
  • 少写代码 | 虚拟 DOM 是纯粹的开销 | 真正的反应
npm create vite@latest myapp -- --template svelte
cd myapp
npm install
npm run dev

2 单文件结构​

  • 单页面的创建是 文件名.svelte 后缀名为 svelte, 所以需要学习一些 svelte 语法
  • svelte 页面的结构由三部分组成，script element style 如下代码所示
index.svelte
<!-- 支持ts语法 -->
<script lang="ts">
  let msg: string = 'welcome to svelte'
</script>
<div>{msg}</div>
<style></style>

3 语法​

3.1 数据渲染​

<script lang="ts">
  let msg:string = "welcome to svelte"
</script>
<div>
  {msg}
</div>

3.2 数据依赖​

<script>
  let count = 0
  $: doubled = count * 2
</script>
<div class="card">
  <p>{count}</p>
  <p>{count} doubled is {doubled}</p>
</div>

3.3 条件渲染​

<script lang="ts">
  let msg:string = "welcome to svelte"
  let num:number =1
</script>
{#if num == 1}
  <h1>{msg}</h1>
{:else if num == 2}
  <h1>defualt</h1>
{:else}
  <h1>{msg}</h1>
{/if}

3.4 循环渲染​

<script lang="ts">
  let array:array = [{name: "jack", id: 1}, {name: "tom", id: 2}]
  let num:number =1
</script>
// item 迭代每一项 index 下标 (item.id) 更新标识，提高性能
// 支持解构 如{#each array as {id, name}, index}
{#each array as item, index (item.id)}
  <h2>{item.name}</h2>
{/each}

3.4 异步 Promise​

{#await promise()}
  <p>...waiting</p>
{:then number}
  <p>The number is {number}</p>
{:catch error}
  <p style="color: red">{error.message}</p>
{/await}

3.5 事件绑定​

<script>
  let count = 0
  function incrementCount() {
    count += 1
  }
</script>
<!-- 添加修饰符 只调用一次 -->
<button on:click|once="{incrementCount}">Clicked {count}</button>
  • 支持修饰符如 once | preventDefault | stopPropagation | passive | nonpassive | self | trusted
  • 支持 on:click|once|capture={...}

3.6 组件部分​

  • 组件命名需首字母大写
Card.svelte
<script>
  // 接收参数
  export let msg: string
  // 默认参数 只需对变量赋值
  export let msg: string = 'default'
</script>

<div class="card">
  <h2>{msg}</h2>
</div>
index.svelte
<script>
  // 引入组件
  import Card from './Card.svelte'
</script>

<div class="card">
  <!-- 使用组件 传递参数 -->
  <Card msg="hello card" />
</div>

3.7 表单元素绑定值​

  • 切记是 bind:value={变量} 不是 value={变量}
<script>
  let name = 'world'
</script>
<input bind:value="{name}" />

<h1>Hello {name}!</h1>

3.8 元素绑定属性​

  • bind:innerHTML = {html}
  • bind:clientWidth={w}
  • bind:clientHeight={h}

3.9 生命周期​

  • 生命周期函数是从中 svelte 获取例如
import { onMount, afterUpdate } from 'svelte'
  • onMount 组件挂载
  • onDestroy 组件销毁
  • onDestroy 组件销毁
  • beforeUpdate afterUpdate 组件更新前后 参考
  • tick 它返回一个 promise，该 promise 将在任何挂起的状态更改应用于 DOM 后立即进行解析（如果没有挂起状态更改，则立即进行解析）

· 2 min read
Jeffrey

一个基于 ssh2 的纯 javascript 安全拷贝程序。

安装​

pnpm install scp2 -g

高级 API​

var client = require('scp2')

// 将文件复制到服务器：

client.scp(
  'file.txt',
  'admin:[email protected]:/home/admin/',
  function (err) {}
)

// 将文件复制到服务器，将目标指定为对象：
client.scp(
  'file.txt',
  {
    host: 'example.com',
    username: 'admin',
    password: 'password',
    path: '/home/admin/',
  },
  function (err) {}
)

// 将文件复制到服务器并重命名：
client.scp(
  'file.txt',
  'admin:[email protected]:/home/admin/rename.txt',
  function (err) {}
)

// 将目录复制到服务器：
client.scp(
  'data/',
  'admin:[email protected]:/home/admin/data/',
  function (err) {}
)

// 从服务器下载文件：
client.scp(
  'admin:[email protected]:/home/admin/file.txt',
  './',
  function (err) {}
)

// 从服务器下载文件，将目标指定为对象：
client.scp(
  {
    host: 'example.com',
    username: 'admin',
    password: 'password',
    path: '/home/admin/file.txt',
  },
  './',
  function (err) {}
)

// 使用私钥登录：
client.scp(
  'file.txt',
  {
    host: 'example.com',
    username: 'admin',
    privateKey: require('fs').readFileSync('path/to/private/key'),
    passphrase: 'private_key_password',
    path: '/home/admin/',
  },
  function (err) {}
)

使用 scp2 实现自动部署前端项目​

  • 创建 deploy.js 文件
deploy.js
'use strict'
var client = require('scp2')
let start = +new Date()
const ora = require('ora') //美化控制台
const chalk = require('chalk')
const spinner = ora(chalk.green('正在发布到服务器...'))
spinner.start()
/**
 * 输入服务器信息
 */
client.scp(
  'dist', // 本地项目路径
  {
    host: '101.200.0.0',
    username: 'root',
    password: 123456,
    path: '/usr/local/nginx/html',
  },
  (err) => {
    spinner.stop()
    if (!err) {
      console.log(+new Date() - start + 'ms')
      console.log(chalk.green('项目发布完毕!'))
    } else {
      console.log('发布失败！', err)
    }
  }
)
  • package.json 添加自动脚本
{
  "scripts": {
    "deploy": "build && node ./deploy"
  }
}
  1. 发送文件之前需要先 build
  2. 终端输入 npm run deploy 即可发布到服务器

· 2 min read
Jeffrey

快速入门​

使用  yarn  安装 Jest：

yarn add --dev jest

或使用  npm  安装：

npm install --save-dev jest

注：Jest 的文档统一使用  yarn  指令，但使用  npm  同样可行。可以通过 yarn 官方文档进行  yarn  和  npm  的对比。

下面我们开始给一个假定的函数写测试，这个函数的功能是两数相加。首先创建  sum.js  文件：

function sum(a, b) {
  return a + b
}
module.exports = sum

接下来，创建名为  sum.test.js  的文件。这个文件包含了实际测试内容：

const sum = require('./sum')

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3)
})

将如下代码添加到  package.json  中：

{
  "scripts": {
    "test": "jest"
  }
}

最后，运行  yarn test  或者  npm run test ，Jest 将输出如下信息：

PASS  ./sum.test.js
✓ adds 1 + 2 to equal 3 (5ms)