摘录

我见过春日夏风,秋月冬雪,也曾踏遍南水北山,东麓西岭,可这四季春秋,苍山央水,都不及你瞅我展眉一笑

阅读全文
前端小知识
  • 1em=16px(浏览器默认值)

  • 在 before 或 after 伪类中使用字体图标时,记得设置 font-weight,否则显示不出来

  • oncontextmenu=”return false” 在

    标签中用来取消鼠标右键

  • 使用数学运算的时候,可以先查看 Math 对象。运行速度比用 js 算快。

  • 使用缓存机制来提升页面回访效率。

  • jquery 在 1.9 开始的版本都不支持 live()和 bind()方法了,全部都改成 on()方法

阅读全文
小程序开发记录

小程序开发中碰到的问题记录

  • 在json中配置usingComponents来引用组件需要使用相对路径
  • 引入本地数据需要使用相对路径
  • 引用图片需要使用绝对路径
  • 组件中使用properties来接收数据,需要定义接收数据的类型
  • catchtap会阻止冒泡事件,bindtap 不会阻止冒泡事件。点击事件需要获取到变量值,如当前的索引,可通过 data-index 传递数据,随后在 js 中通过 e.target.dataset.index 获取到
  • cover-image 和 cover-view 最好放到 camera,map 等标签内部,否则在真机上面有可能不显示
  • textarea 标签会覆盖在其他标签之上
  • 使用 button::after{ border: none; } 来去除边框
  • setData()为数组时,不能传入 i 为变量,只能写死i的值
    如果需要动态的设置数组中的某个值:
    1
    2
    3
    4
    this.data.arr[i] = xxx;
    this.setData({
    arr: this.data.arr
    })
阅读全文
渲染机制

页面加载过程

  • 浏览器根据 DNS 服务器查询得到域名对应的 IP 地址
  • 向这个 IP 机器发送 HTTP 请求
  • 服务器收到、处理并返回 HTTP 请求
  • 浏览器得到返回的内容

例如访问 GitHub,会解析得到 IP 地址为 52.74.223.119,浏览器会向这个地址发送 HTTP 请求。
GitHub访问

阅读全文
HTML、CSS、JavaScript

HtmlCssJs1

AMD 支持

AMD 定义了 define 函数,可以用 define 探测该函数是否定义,或进一步用 define.amd 是否有定义(用于检测是否在 AMI)环境,如果是,就用 define 定义模块,如果不是,继续检测是否运行于 CommonJS 中,比如 NodeJS,如果是,则将 my 复制给 module.exports。

1
2
3
4
5
6
7
8
9
var MODULE = function() {
var my = {};
// 代码……
if (typeof define == "function") {
define(function() {
return my;
});
}
};
阅读全文
HTML、CSS优化

能用 HTML/CSS 解决的问题就不要用 JS

导航高亮

可以用 class 来标识菜单是否选中,选中的 class 增加特殊样式,:hover 选择器可以用来表示鼠标悬浮的样式

鼠标悬浮时显示

使用 :hover 选择器实现

自定义 radio/checkbox 的样式

input 始终隐藏,通过设置 span.checkbox 的样式来实现自定义样式,通过 :checked 伪类更改选中状态的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
input[type=checkbox]{
display: none;
}
/* 未选中的 checkbox 的样式 */
.checkbox{
/* 具体实现 */
}
input[type=checkbox]:checked + .checkbox{
/* 具体实现 */
}
</style>
<label>
<input type="checkbox">
<span class="checkbox"></span>
</label>

阅读全文
前端性能优化方法
  1. 减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。

  2. 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数

  3. 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。

  4. 当需要设置的样式很多时设置className而不是直接操作style。

  5. 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

  6. 避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。

  7. 图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。

  8. 避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢。

    对普通的网站有一个统一的思路,就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是,在不影响功能和体验的情况下,能在浏览器执行的不要在服务端执行,能在缓存服务器上直接返回的不要到应用服务器,程序能直接取得的结果不要到外部取得,本机内能取得的数据不要到远程取,内存能取到的不要到磁盘取,缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成(例如join查询),减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分,换语言是无法“优化”的。

阅读全文
阿里云 OSS 部署前端静态页面

OSS 前端自动化部署:

使用 node.js 或 python。

阿里云官方文档(使用 nodejs)

快速入门

OSS(options)中的各个配置项说明如下:

  • [accessKeyId] {String}:通过阿里云控制台创建的AccessKey。
  • [accessKeySecret] {String}:通过阿里云控制台创建的AccessSecret。
  • [stsToken] {String}:使用临时授权方式,详情请参见使用 STS 进行临时授权。
  • [bucket] {String}:通过控制台或PutBucket创建的bucket。
  • [endpoint] {String}:OSS域名。
  • [region] {String}:bucket所在的区域, 默认oss-cn-hangzhou。
  • [internal] {Boolean}:是否使用阿里云内网访问,默认false。比如通过ECS访问OSS,则设置为true,采用internal的endpoint可节约费用。
  • [cname] {Boolean}:是否支持上传自定义域名,默认false。如果cname为true,endpoint传入自定义域名时,自定义域名需要先同bucket进行绑定。
  • [isRequestPay] {Boolean}:bucket是否开启请求者付费模式,默认false。具体可查看请求者付费模式。
  • [secure] {Boolean}:(secure: true)则使用HTTPS,(secure: false)则使用HTTP,详情请查看常见问题。
  • [timeout] {String|Number}:超时时间,默认60s。
阅读全文
Vue使用中碰到的问题记录

事件分发

  • 事件分发 vm.$emit 和监听 vm.$on 必须绑定在同一个 vm 上
  • 创建一个 eventHub.js 文件如下:

    1
    2
    3
    4
    5
    import Vue from "vue";
    // 用来存放分发的事件$emit,$on
    export default new Vue();
    // export let eventHub = new Vue();
    // 使用上面这种写法在import时需要加{}:import { eventHub } from '@/common/js/eventHub.js';
  • 使用 eventHub.$emit(‘fun1’,e)来分发事件,使用 eventHub.$on(‘fun1’,fun2)来监听事件

阅读全文
.sync 修饰符的用法

子组件代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
<input v-model="value">
</template>

<script>
export default {
props: {
title: {
type: String,
default: ''
}
},
data() {
return {
value: ''
}
},
watch: {
value(newValue, oldValue) {
this.$emit('update:title', newValue)
}
}
}
</script>

父组件代码

  1. 某些情况下,我们需要子组件改变某个值的时候,父组件的值也更改,常规的实现方法如下:

    1
    2
    3
    4
    5
    // 父组件中有个 title 的值传递到子组件中
    <text-document
    :title="title"
    @update:title="title = $event"
    ></text-document>
  2. 通过 .sync 修饰符,可以简写父组件,子组件中增加的方法不变:

    1
    2
    // 父组件写法
    <text-document :title.sync="title"></text-document>
阅读全文
Algolia