Vue 3 中令人兴奋的新功能

如你所料,Vue 3 带来了许多令人兴奋的新功能。值得庆幸的是,Vue 团队主要介绍了对当前 API 的添加和改进,而不是重大更改,所以已经了解 Vue 2 的人们应该很快就会对新语法感到满意。

Let’s start with the API that most of you probably heard about…
让我们从大多数人可能听说过的API开始…

组件 API(Composition API)

组件 API 是 Vue 的下一个主要版本中最常用的讨论和特色语法。这是一种全新的逻辑重用和代码组织方法。

当前,我们使用所谓的 Options API 构建组件。为了向 Vue 组件添加逻辑,我们填充(可选)属性,例如 datamethodscomputed等。这种方法的最大缺点是其本身并不是有效的 JavaScript 代码。你需要确切地知道模板中可以访问哪些属性以及 this 关键字的行为。在后台,Vue 编译器需要将此属性转换为工作代码。因此我们无法从自动建议或类型检查中受益。

组件 API 旨在通过将组件属性中当前可用的机制公开为 JavaScript 函数来解决这个问题。 Vue 核心团队将组件 API 描述为 “一组基于函数的附加 API,可以灵活地组合组件逻辑。” 用组件 API 编写的代码更具有可读性,并且其背后没有任何魔力,因此更易于阅读和学习。

让我们通过一个用了新的组件 API 的组件的简单示例,来了解其工作原理。

<template>
  <button @click="increment">
    Count is: {{ count }}, double is {{ double }}, click to increment.
  </button>
</template>

<script>
import { ref, computed, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const double = computed(() => count.value * 2)

    function increment() {
      count.value++
    }

    onMounted(() => console.log('component mounted!'))

    return {
      count,
      double,
      increment
    }
  }
}
</script>

现在,让我们把代码分解为几部分,来了解发生了些什么:

import { ref, computed, onMounted } from 'vue'

继续阅读Vue 3 中令人兴奋的新功能

用jest对Vue组件单元测试

项目设置

设置我们的测试环境很容易。在以前的Vue.js CLI版本中,我们必须手动执行此操作,但现在它已成为项目生成的标准配置。

通过执行以下操作,确保在计算机上安装了Vue.js CLI

$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli

# Ensure you have the appropriate version (3.x.x>) with
$ vue --version

继续阅读用jest对Vue组件单元测试

JSON.parse()和JSON.stringify()用法详解

在所有现代浏览器中都可用的JSON对象具有两种非常有用的方法来处理JSON格式的内容:parsestringifyJSON.parse()接收JSON字符串并将其转换为JavaScript对象。JSON.stringify()接受一个JavaScript对象,并将其转换为JSON字符串。

一个例子:

const myObj = {
  name: 'Skip',
  age: 2,
  favoriteFood: 'Steak'
};

const myObjStr = JSON.stringify(myObj);

console.log(myObjStr);
// "{"name":"Skip","age":2,"favoriteFood":"Steak"}"

console.log(JSON.parse(myObjStr));
// Object {name:"Skip",age:2,favoriteFood:"Steak"}

尽管这些方法通常用于对象,但它们也可以用于数组:

const myArr = ['bacon', 'letuce', 'tomatoes'];

const myArrStr = JSON.stringify(myArr);

console.log(myArrStr);
// "["bacon","letuce","tomatoes"]"

console.log(JSON.parse(myArrStr));
// ["bacon","letuce","tomatoes"]

JSON.parse()

JSON.parse()可以为reviver函数使用第二个参数,该函数可以在返回对象值之前对其进行转换。此处,对象的值在parse方法的返回对象中大写:

const user = {
  name: 'John',
  email: 'john@awesome.com',
  plan: 'Pro'
};

const userStr = JSON.stringify(user);

JSON.parse(userStr, (key, value) => {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return value;
});

尾部逗号在JSON中无效,因此,如果传递给它的字符串具有尾部逗号,则JSON.parse()抛出。

JSON.stringify()

JSON.stringify()可以采取两个附加参数,第一个是代用品函数和第二作为使用字符串或数字值空间返回字符串英寸

replacer函数可用于滤除值,因为任何以undefined返回的值都将不在返回的字符串中:

const user = {
  id: 229,
  name: 'John',
  email: 'john@awesome.com'
};

function replacer(key, value) {
  console.log(typeof value);
  if (key === 'email') {
    return undefined;
  }
  return value;
}

const userStr = JSON.stringify(user, replacer);
// "{"id":229,"name":"John"}"

并传入一个带有空格参数的示例:

const user = {
  name: 'John',
  email: 'john@awesome.com',
  plan: 'Pro'
};

const userStr = JSON.stringify(user, null, '...');
// "{
// ..."name": "John",
// ..."email": "john@awesome.com",
// ..."plan": "Pro"
// }"

flex盒模型基础介绍

网页布局(layout)是 CSS 的一个重点应用。

布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。

2009年,W3C 提出了一种新的方案—-Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。
继续阅读flex盒模型基础介绍

node-canvas 绘制文字,自定义字体,最新文档更新

发现网上很多人都在提供一个错误都思路,因为node-canvas已经更新了,所以自定义字体只需要如下写法
请注意,注册registerFont字体方法的位置,一定要在createCanvas之前


const { registerFont, createCanvas } = require('canvas')
registerFont('comicsans.ttf', { family: 'Comic Sans' })

const canvas = createCanvas(500, 500)
const ctx = canvas.getContext('2d')

ctx.font = '12px "Comic Sans"'
ctx.fillText('Everyone hates this font :(', 250, 10)

前端规范第一版

以下为前端规范第一版,大家有啥想法及时交流一起完善

HTML 基本规范 【强制】

  • 标签全部小写且闭合
  • 代码中的引号全部使用双引号(区别js)
  • 合理使用语义化html标签
  • 使用utf-8编码

css 基本规范 【强制】

  • pc端默认字号16px;
  • 使用外链css文件
  • html标签中不使用style样式
  • css文件中样式按块写,公共样式要提取,同一属性要合并,注释要清楚
  • 尽量不使用html标签选择器来声明样式
  • 样式的小图片使用sprite图片
  • h5页面使用rem适配,html的font-size:50px;

CSS选择器命名规范 【强制】

  • 类和id命名,一律小写,使用中杠连接
  • 类和id命名,尽量不缩写,除非一看就明白的单词
  • 不要轻易使用id

CSS书写顺序 【建议】

  • 位置属性(position, top, right, z-index, display, float等)
  • 大小(width, height, padding, margin)
  • 文字系列(font, line-height, letter-spacing, color- text-align等)
  • 背景(background, border等)
  • 其他(animation, transition等)

公共组件的css 【强制】

继续阅读前端规范第一版

微信小程序swiper之巨坑

今天突然发现自己的小程序出现问题,多页滑动到第二页有问题,出现空白,元素不展示,奇怪从来没动过呢,后来发现自己手机微信版本更新了 版本号为:7.08

是不是新版本导致swiper组件出现问题呢,特意找了一个代码片段,没问题,那就是自己代码的问题了!

把所有代码从头到尾删了个遍,最后发现是swiper-item 内定义了宽高所致,记录一下

最后亮出我的小程序,一起学习交流

 

微信小程序自定义组件编写指南之我见一

微信小程序自定义组件(以下组件特指自定义组件)在开发过程中有着不可替代的作用,在我看来,小程序的编写就是大部分工作量在组件的开发,在前期规划好组件功能,在小程序不断迭代会有非常好的编程体验

实际上,组件开发也体现出了前端在开发过程中封装的思想,这里就谈一下我在开发过程中的一些感悟,记录总结一下,供大家参考填坑

以下为文章导航,不一定按顺序写,有些文章也不一定会一次写完,有时间就写点补充,包括这里的目录也会修改补充,都会在这里列出来最新更新时间和链接,大家关注下吧

  • 先介绍一下组件的基本功能特性
    1. 写法规则,样式(8月23日更新)
    2. 通信规则
    3. 生命周期
    4. 组件之间关系
    5. 数据监听
    6. 单元测试
  • 什么时候我们应该使用组件
    1. 为什么要用组件 (8月23日更新)
    2. 什么时候要封装成组件
  • 新建组件规划
    1. 组件properties变量规划
    2. 组件私有数据规划
    3. 组件方法规划
    4. 组件通信事件规划
    5. 组件生命周期规划

组件模板和样式 

组件模板和样式

类似于页面,自定义组件拥有自己的 wxml 模板和 wxss 样式。

组件模板

组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树,将被插入到组件的引用位置上。

在组件模板中可以提供一个 <slot> 节点,用于承载组件引用时提供的子节点。

代码示例:

在开发者工具中预览效果

<!-- 组件模板 -->
<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <slot></slot>
</view>
<!-- 引用组件的页面模板 -->
<view>
  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
    <view>这里是插入到组件slot中的内容</view>
  </component-tag-name>
</view>

注意,在模板中引用到的自定义组件及其对应的节点名需要在 json 文件中显式定义,否则会被当作一个无意义的节点。除此以外,节点名也可以被声明为抽象节点

模板数据绑定

与普通的 WXML 模板类似,可以使用数据绑定,这样就可以向子组件的属性传递动态数据。
继续阅读组件模板和样式