JS 分类

性能优化笔记 网络篇

By hiluluke on

嗯，搞点大事情

记录一些大公司，高级前端工程师的前端优化经验总结，并尝试着做些实验，以后肯定用的上，当看到新的技能时，实时更新在这篇文章。

DNS预解析

我们请求资源时，通常都是一个URL，拿到正确的ip地址必须经过一步DNS解析。DNS预解析的作用是在到某个页面是提前解析了DNS。用法都是这样：

1
<link rel="dns-prefetch" href="hiluluke.cn">

在很多大厂，比如jd.com、taobao.com等的head部分你就能看见很多上面这样的link标签。
然而其使用方法，并不是像上面这样简单，具体的看这篇文章，本文不多做解释。

阅读全文

使用Vue快速开发单页应用 登录页面

By hiluluke on

本文所涉及代码全在vue-cnode

前面两篇都是介绍组织结构和vue-router，从本文开始我们将讲一些如何优雅的用vue编写单页应用。首先我们从登录页面以及开始，因为后续很多其它的页面都需要登录信息。

路由，文件组织

首先我们第一步肯定是指定一条路由啦，在src/config_router.js里面增加一条路由

1
2
3
4
5
6
7
8
9
10
11
export function configRouter (router) {
  router.map({
    '/login': {
      name: 'login',
      title: '登录',
      // es6箭头函数
      component: (resolve) => require(['./components/login/login.vue'], resolve)
    }
  })

}

阅读全文

使用Vue快速开发单页应用 vue-router

By hiluluke on

本文所涉及代码全在vue-cnode

vue-router主要作用是将路由控制，转移到前端。我们将会在vue-router里面保存一个路由表，在vue中具体通过调用提供的指令或则方法进行跳转。

其实吧，vue-router说白了就是一个插件，对外暴露的也就是指令和方法。如果只要求灵活用起来，我们需要学习的也就3个地方：

  • 配置路由
  • 指令
  • 方法
阅读全文

使用Vue快速开发单页应用 主体结构

By hiluluke on

本文所涉及代码全在vue-cnode

单页应用，即在一个页面集成系统中所有功能，整个应用只有一个页面。因为路由的控制在前端，单页面应用在页面切换时比传统页面更快，从而在前端体验更好。

将逻辑从后端转移到前端，提升了性能减少了页面加载时间，前后逻辑更扁平。但是当页面复杂度变高时，你会发现，数据处理，UI交互将变得难以维护，所以应运而生，出现了很多MV框架和类库。Vue就是其中之一，个人觉得（非喜勿喷）Vue类库相对于其他MV框架上整体的api更为简洁，提供的api很平衡，解决了问题的同时，没有增加复杂度。另外个人觉得vue在大型应用，开发中使用vue-loader将组件分成template,style,script结构更为清晰。

本文以及后面相应文章，主要是vue相关技术栈来快速的实现单页应用开发。系列文章将以一个实际项目进行讲解，项目的github地址为：

vue-cnode demo

这是一个以cnodejs.org提供的api来开发的单页，主要使用的modules有vue、vue-router、vuex、vue-resource。为了快速开发，我们还使用了vue-cli脚手架工具，下文会做介绍。

阅读全文

zepto源码学习 插件方法

By hiluluke on

$.extend

  • 用途
    扩展对象属性。
    第一个参数如果是true就递归的将source给target。

    1
    2
    $.extend(target, [source, [source2, ...]])  ⇒ target
    $.extend(true, target, [source, ...])  ⇒ target v1.0+

  • 相关代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    function extend(target, source, deep) {
      for (key in source)
        if (deep && (isPlainObject(source[key]) || isArray(source[key]))) {
          if (isPlainObject(source[key]) && !isPlainObject(target[key]))
            target[key] = {}
          if (isArray(source[key]) && !isArray(target[key]))
            target[key] = []
          extend(target[key], source[key], deep)
        }
        else if (source[key] !== undefined) target[key] = source[key]
    }

    // Copy all but undefined properties from one or more
    // objects to the `target` object.
    $.extend = function(target){
      var deep, args = slice.call(arguments, 1)
      if (typeof target == 'boolean') {
        deep = target
        target = args.shift()
      }
      args.forEach(function(arg){ extend(target, arg, deep) })
      return target
    }
阅读全文