站内搜索

本次搜索找到结果 13 条

一、前言

模式是一种规律或者说有效的方法,所以掌握某一种实践总结出来的模式是快速学习和积累的较好方法,模式的对错需要自己去把握,但是只有量的积累才会发生质的改变,多思考总是好的。(下面的代码实例更多是 React 类似的伪代码,不一定能够执行,函数类似的玩意更容易简单描述问题)

二、前端的关注点迁移

这篇文章主要介绍现在组件化的一些模式,以及设计组件的一些思考,那么为什么是思考组件呢?因为现在前端开发过程是以组件为基本单位来开发。在组件化被普及(因为提及的时间是很早的或者说有些厂实现了自己的一套但是在整个前端还未是一种流行编写页面的单元)前,我们的大多数聚焦点是资源的分离,也就是 HTML、CSS、JavaScript,分别负责页面信息、页面样式、页面行为,现在我们编程上的聚焦点更多的是聚焦在数据组件

以下的测试例子都可以在 github 找到,但是最近好像不太稳定。 其实 ng2 在这方面做得挺好的,用起来也很简单,所以看完基本就可以动手写一写。强大并不止是这一方面,在写这些的过程中,通过一些配置,让开发很纯粹,有时间再录一个新手入门的开发教程。

(1) 父组件向子组件流入数据

这种方式是最简单的,在 ng2 中处理得非常完美,通过在子组件中标记 @Input() 输入接口的方式进行接收父组件的值,我下面的 demo 主要分了几种场景,尽可能的多覆盖不同情况吧。

基本上例子中覆盖了常见的情况:

  • 直接传入一个字符串的情况,不需要绑定父组件的一个变量
  • 绑定父组件变量的情况,然后可以在父组件中不断修改
  • 输入别名的情况,可以在子组件中对输入的变量名进行重新设置
  • ngOnChanges() 在子组件中监听属性的修改
  • 特殊情况下,我们需要对父组件传入的数据进行过滤
  • @ViewChild() 注解的跨多层子组件的观察方式

看到个好玩的~哈哈,小志前辈写的,原文地址

<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="utf-8">
    <title>Roller,✨✨</title>
    <style type="text/css" media="screen">
    div, input {
      margin: 0;
      padding: 0;
    }
    .demo {
        width: 100px;
        height: 20px;
        overflow: hidden;
    }

    .star_ctrl {
        float: left;
    }

    input {
        float: right;
        width: 20px;
        height: 20px;
        -webkit-appearance: none;
        border: 0 none;
        background: url(http://ww3.sinaimg.cn/large/006tNbRwgw1fa10606xkoj300k01fdfl.jpg) no-repeat 0 -32px;
        outline: 0 none;
        -webkit-transition: all 100ms linear;
    }

    input:checked,
    input:checked ~ input {
        background-position: 0 0;
    }

    .demo_2 input {
      float: left;
    }
    </style>
</head>

<body>
    <div class="demo demo_1">
        <div class="star_ctrl">
            <input type="radio" name="demo_1">
            <input type="radio" name="demo_1">
            <input type="radio" name="demo_1">
            <input type="radio" name="demo_1">
            <input type="radio" name="demo_1">
        </div>
    </div>

    <div class="demo demo_2">
        <div class="star_ctrl">
            <input type="radio" name="demo_2">
            <input type="radio" name="demo_2">
            <input type="radio" name="demo_2">
            <input type="radio" name="demo_2">
            <input type="radio" name="demo_2">
        </div>
    </div>
</body>

</html>

左转转,右转转 ^-^

你有没有在一个逐渐膨胀的 CSS 项目中感到混乱呢?保持样式风格统一和 HTML 的影响是比较困难的:尽管修改一个较小的问题,都可能创建更多丑陋的 hack,也可能 CSS 的小改变会影响 JavaScript 的功能。但是这些问题能在我们的项目开始的时候静心规划,就能很大程度上避免这些问题。让我们开始说 CSS 架构吧。

前言

直接开始,简单理解就是微信作为原生层,我们的应用作为网页,是一种 hybird 的开发方式,唯一不同的是,在这个平台上必须遵守微信的一些设计规范、运营规范等东西。

官方资料

https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1474644088899

开发工具

官方已出正版,可直接使用无 appid 进行体验

下载地址

使用的开发元素

  1. JavaScript (交互、数据等脚本)
  2. wxml (页面结构、组件)
  3. wxss(页面样式)

wxmlwxss 是新的文件格式,不用理解,就映射成 htmlcss 即可,但是不同的是,有一套自己的标签和支持的范围(比如 css 部分支持度有限),详情可以看上面的官方资料。

前言

最近大漠前辈在群里发关于PostCSS的系列文章,但是耗子姐姐又说看了有点云里雾里的感觉,所以这篇文章将按一个思考的角度来理解一下 PostCSS 到底是一个什么东西。

配图

一、提出不懂的地方

很多时候第一次在网上查询 PostCSS 概念的时候,大家都解释成一个后处理器的概念,其实个人觉得这些概念不重要,更为重要的有以下几点:

  1. 它本质上是一个什么东西?
  2. 它能解决我们什么问题?
  3. 它是通过什么方式来解决我们的问题?
  4. 它解决我们的问题是为什么?
  5. 怎么实现与 SASSLESSStylus 相同的功能(因为它们被经常拿来比较)
  6. 它由哪些东西组成?
  7. 既然是程序可以用的,那么它的API呢?

其实很多文章都写 React 的代码,代码可能到 Github 上随意下载然后阅读理解,但是有些说词类的东西还是需要看的,这样能够更好的去理解一个东西。好吧,下面大致“翻译”了一下 《Pro React》这本书的 React‘s Benefits 的部分。^0^ 英文不太好,如果有不一样的地方能理解就好,毕竟不是专业翻译~

(1)让响应式的渲染变得简单

在以前的 Web 开发过程中,也就是在单页应用之前,在用户每一次浏览页面的时候(比如点击一个按钮),都将重新请求一次服务端,即使是页面上一个很小的状态的改变。这是一种糟糕的用户体验,但是在这种多页的情况下,开发者很容易掌控用户访问的页面。

在单页应用的交互中,用户是通过不断的从服务端获取新的数据,然后切换 DOM 的状态。但是随着系统的发展,Web 系统将变得越来越复杂,它将更加难以确定当前应用的状态(其实这里是指局部受影响的部分),以及很难准时的去更新当前交互中的 DOM 状态。

在 React 出现之前,有很多 JavaScript 的框架去解决以上说到的这个问题,然而,这些解决方案都有一些缺陷,比如系统的“可维护性”、“可扩展性”以及“性能”。(其实这里也不尽然,Angular 1.x 也是很优秀的,在此之前)

前言

因为 Arial, Verdana, Garamond or Times New Roman 这些字体几乎在所有电脑上都有安装,所以以前每个网站都使用他们来渲染文本。至今,虽然webfonts已经在互联网中得到普遍的使用,但是我们依然不知道如何高效的加载他们。

为了提供更好的用户体验,我写了一些怎么做才能高效加载webfonts的简单解决方法,这个方案的实施并不需要昂贵的硬件支持。

0. 目录

主要从以下方案进行介绍:

(1)使用woff字体格式(PS:可能是EOT和TTF格式默认情况下不会进行压缩,然而WOFF格式具有内建压缩,而且WOFF格式的支持很广泛的原因。);

(2)对于不支持webfonts的浏览器使用“web安全”字体(PS:使用前言中提到的一些几乎所有电脑都安装了的字体作为后备字体,保证用户能够正常浏览网页);

(3)下载字体的“二进制”格式,并且优化它;

(4)使用你自己的字体库;

(5)将字体进行base64编码后,存放于CSS文件中;

(6)如果用户本地没有网页请求的字体,那么就异步加载该字体,并且将该字体存储在localStorage中,以便第二次请求字体直接从localStorage中进行读取,避免字体加载带来的性能问题;

1. 前言

最近看了一本《移动Web手册》的书,奇舞团翻译的,非常不错。个人觉得在进入移动端的时候最先应该了解移动端新的交互模式:触摸。为什么这样说呢?在PC端,我们大多数的交互都是通过鼠标来实现,在开发过程中,对鼠标事件的处理也非常多,通过之前在移动端的开发经验,在移动端的交互也避免不了经常与触摸打交道,所以我们有必要单独学习一下它。

2. 触摸、鼠标交互模式

(1) 连续性

触摸事件是不连续的,鼠标事件是连续的。

连续性

操作顺序:A -> B -> C

在鼠标上:鼠标点击A -> 划过B -> 点击C

在触摸上:手指触摸A -> 跨过B -> 触摸C

前言

我们在浏览网页的时候,经常会看到很相似的几种内容。比如下面这两种样子:

视图1

视图2

看上去是不是比较像呢?其实就是图片的位置不一样,大致上可以认为是一样的吧,那么针对这样子的相似度较高的网页,我们应该怎么样开发呢?

其实这就得谈谈“页面重用机制”了,下面所写的积木式网页构建方式就能够很好的处理页面重用这个问题。

接下来将从以下4个方面对积木式网页开发进行描述:

  1. 分析页面结构
  2. 构建网页的结构
  3. 编写网页基本的样式
  4. 编写不同表现的样式