csdoker

csdoker 查看完整档案

成都编辑成都东软学院  |  软件工程 编辑成都网思科平有限公司  |  前端工程师 编辑 csdoker.com 编辑
编辑

一位有灵魂的前端工程师

个人动态

csdoker 收藏了文章 · 9月15日

清新UI组件库——开发组件库准备

开发组件库准备

清新组件库:http://ifresh-ui.yating.online/

源码地址:https://github.com/Chenyating...

image.png

准备

  1. vscode
  2. 语言框架:vue,vuepress,vue-cli3,less
  3. 参考框架: iview-ui,element-ui

开发定位

  1. 风格:小清醒,简洁
  2. 颜色:主打绿,底白色
  3. 字体:oppo字体免费商用

新建项目

  1. 全局安装
npm install -g @vue/cli 或 yarn global add @vue/cli
  1. 创建项目
vue create fresh-project

改变目录结构

  1. src 改为packages:存放组件。index.js内容如下
import '../public/assets/style/base/fontFamly.css' //全局导入字体
import Button from './Button'

// 组件列表
const components = [
    Button
]

// 定义 install 方法,接收 Vue 作为参数。如果使用 use 注册插件,那么所有的组件都会被注册
const install = function(Vue) {
    // 判断是否安装
    if (install.installed) return
        // 遍历注册全局组件
    components.map(component => Vue.component(component.name, component))
}

// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}

export default {
    // 导出的对象必须具有 install,才能被 Vue.use() 方法安装
    install,
    // 以下是具体的组件列表
    Button
}
  1. 新建vue.config.js,内容如下
const path = require('path');
module.exports = {
    pages: {
        index: {
            entry: 'examples/main.js',
            template: 'public/index.html',
            filename: 'index.html'
        }
    },

    // 扩展 webpack 配置,使 packages 加入编译
    chainWebpack: config => {
        config.module
            .rule('js')
            .include
            .add('/packages')
            .end()
            .use('babel')
            .loader('babel-loader')
            .end()
    },
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [path.resolve(__dirname, "./public/assets/style/index.less")] // 引入全局样式变量
        }
    }
}
  1. 新建examples以vuepress目录结构创建:展示组件

.vuepress目录下新建enhanceApp.js,引入开发的组件库

import ifresh from '../../packages/index.js'
// 注册组件库

export default ({
    Vue, // VuePress 正在使用的 Vue 构造函数
    options, // 附加到根实例的一些选项
    router, // 当前应用的路由实例
    siteData // 站点元数据
}) => {
    Vue.use(ifresh)
}

单个组件demo

.vue文件要去name名字!

js导出

// 导入组件,组件必须声明 name
import btn from './src'

// 为组件提供 install 安装方法,供按需引入
btn.install = function(Vue) {
    Vue.component(btn.name, btn)
}

// 导出组件
export var Button = btn;
查看原文

csdoker 赞了文章 · 9月15日

清新UI组件库——开发组件库准备

开发组件库准备

清新组件库:http://ifresh-ui.yating.online/

源码地址:https://github.com/Chenyating...

image.png

准备

  1. vscode
  2. 语言框架:vue,vuepress,vue-cli3,less
  3. 参考框架: iview-ui,element-ui

开发定位

  1. 风格:小清醒,简洁
  2. 颜色:主打绿,底白色
  3. 字体:oppo字体免费商用

新建项目

  1. 全局安装
npm install -g @vue/cli 或 yarn global add @vue/cli
  1. 创建项目
vue create fresh-project

改变目录结构

  1. src 改为packages:存放组件。index.js内容如下
import '../public/assets/style/base/fontFamly.css' //全局导入字体
import Button from './Button'

// 组件列表
const components = [
    Button
]

// 定义 install 方法,接收 Vue 作为参数。如果使用 use 注册插件,那么所有的组件都会被注册
const install = function(Vue) {
    // 判断是否安装
    if (install.installed) return
        // 遍历注册全局组件
    components.map(component => Vue.component(component.name, component))
}

// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}

export default {
    // 导出的对象必须具有 install,才能被 Vue.use() 方法安装
    install,
    // 以下是具体的组件列表
    Button
}
  1. 新建vue.config.js,内容如下
const path = require('path');
module.exports = {
    pages: {
        index: {
            entry: 'examples/main.js',
            template: 'public/index.html',
            filename: 'index.html'
        }
    },

    // 扩展 webpack 配置,使 packages 加入编译
    chainWebpack: config => {
        config.module
            .rule('js')
            .include
            .add('/packages')
            .end()
            .use('babel')
            .loader('babel-loader')
            .end()
    },
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [path.resolve(__dirname, "./public/assets/style/index.less")] // 引入全局样式变量
        }
    }
}
  1. 新建examples以vuepress目录结构创建:展示组件

.vuepress目录下新建enhanceApp.js,引入开发的组件库

import ifresh from '../../packages/index.js'
// 注册组件库

export default ({
    Vue, // VuePress 正在使用的 Vue 构造函数
    options, // 附加到根实例的一些选项
    router, // 当前应用的路由实例
    siteData // 站点元数据
}) => {
    Vue.use(ifresh)
}

单个组件demo

.vue文件要去name名字!

js导出

// 导入组件,组件必须声明 name
import btn from './src'

// 为组件提供 install 安装方法,供按需引入
btn.install = function(Vue) {
    Vue.component(btn.name, btn)
}

// 导出组件
export var Button = btn;
查看原文

赞 1 收藏 1 评论 2

csdoker 赞了回答 · 9月14日

解决vue-cli4搭建的组件库项目,怎么实现按需加载(按需引入)?

export 组件

关注 3 回答 2

csdoker 赞了回答 · 9月14日

解决vue-cli4搭建的组件库项目,怎么实现按需加载(按需引入)?

看着没啥问题;参考下
https://juejin.im/post/685557...

关注 3 回答 2

csdoker 提出了问题 · 9月14日

解决vue-cli4搭建的组件库项目,怎么实现按需加载(按需引入)?

目前我用vue-cli4搭建的组件库项目结构是这样的:
image
单个组件和组件库的导出配置如下:
image
image

现在可以实现组件库的全部引入:
image

但我还想实现下面这样的按需引入,应该怎么配置呢?
image

关注 3 回答 2

csdoker 收藏了文章 · 8月28日

H5下拉刷新和上拉加载实现原理浅析

原文链接:justrockit.top

前言

在移动端H5网页中,下拉刷新和上拉加载更多数据的交互方式出现频率很高,开源社区也有很多类似的解决方案,如iscroll,pulltorefresh.js库等。下面是对这两种常见交互基本实现原理的阐述。

实现原理

下拉刷新

实现下拉刷新主要分为三步:

  • 监听原生touchstart事件,记录其初始位置的值,e.touches[0].pageY
  • 监听原生touchmove事件,记录并计算当前滑动的位置值与初始位置值的差值,大于0表示向下拉动,并借助CSS3的translateY属性使元素跟随手势向下滑动对应的差值,同时也应设置一个允许滑动的最大值;
  • 监听原生touchend事件,若此时元素滑动达到最大值,则触发callback,同时将translateY重设为0,元素回到初始位置。

示例。查看链接:下拉刷新demo(PC浏览器需调成手机模拟器模式查看)

html

<main>
    <p class="refreshText"></p>
    <ul id="refreshContainer">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
        ...
    </ul>
</main>

javascript

(function(window) {
    var _element = document.getElementById('refreshContainer'),
      _refreshText = document.querySelector('.refreshText'),
      _startPos = 0,
      _transitionHeight = 0;

    _element.addEventListener('touchstart', function(e) {
        console.log('初始位置:', e.touches[0].pageY);
        _startPos = e.touches[0].pageY;
        _element.style.position = 'relative';
        _element.style.transition = 'transform 0s';
    }, false);
    
    _element.addEventListener('touchmove', function(e) {
        console.log('当前位置:', e.touches[0].pageY);
        _transitionHeight = e.touches[0].pageY - _startPos;
        
        if (_transitionHeight > 0 && _transitionHeight < 60) {
            _refreshText.innerText = '下拉刷新';
            _element.style.transform = 'translateY('+_transitionHeight+'px)';

            if (_transitionHeight > 55) {
              _refreshText.innerText = '释放更新';
            }
        }                
    }, false);

    _element.addEventListener('touchend', function(e) {
        _element.style.transition = 'transform 0.5s ease 1s';
        _element.style.transform = 'translateY(0px)';
        _refreshText.innerText = '更新中...';

        // todo...

    }, false);
})(window);

在下拉到松手的过程中,经历了三个状态:

  • 当前手势滑动位置与初始位置差值大于零时,提示正在进行下拉刷新操作;
  • 下拉到一定值时,显示松手释放后的操作提示;
  • 下拉到达设定最大值松手时,执行回调,提示正在进行更新操作。

上拉加载

上拉加载更多数据是在页面滚动时触发的动作,一般是页面滚动到底部时触发,也可以选择在滚动到一定位置的时候触发。

以滚动到页面底部为例。实现原理是分别获得当前滚动条的scrollTop值、当前可视范围的高度值clientHeight以及文档的总高度scrollHeight。当scrollTopclientHeight的值之和大于等于scrollHeight时,触发callback

示例。查看链接:上拉加载demo

html

<main>
    <ul id="refreshContainer">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
        ...
    </ul>
    <p class="refreshText"></p>
</main>
(function(window) {
    // 获取当前滚动条的位置 
    function getScrollTop() { 
        var scrollTop = 0; 
        if (document.documentElement && document.documentElement.scrollTop) { 
            scrollTop = document.documentElement.scrollTop; 
        } else if (document.body) { 
            scrollTop = document.body.scrollTop; 
        } 
        return scrollTop; 
    } 
    
    // 获取当前可视范围的高度 
    function getClientHeight() { 
        var clientHeight = 0; 
        if (document.body.clientHeight && document.documentElement.clientHeight) { 
            clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight); 
        } 
        else { 
            clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight); 
        } 
        return clientHeight; 
    } 
    
    // 获取文档完整的高度 
    function getScrollHeight() { 
        return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); 
    }
    
    var _text = document.querySelector('.refreshText'),
      _container = document.getElementById('refreshContainer');
    
    // 节流函数
    var throttle = function(method, context){
      clearTimeout(method.tId);
      method.tId = setTimeout(function(){
        method.call(context);
      }, 300);
    }
    
    function fetchData() {
        setTimeout(function() {
            _container.insertAdjacentHTML('beforeend', '<li>new add...</li>');
        }, 1000);
    }
    
    window.onscroll = function() {
      if (getScrollTop() + getClientHeight() == getScrollHeight()) {
          _text.innerText = '加载中...';
          throttle(fetchData);
      }
    };

})(window);

页面绑定onscroll事件时加入了节流函数,其作用就是忽略滚动条300毫秒内的连续多次触发。

小结

上拉刷新的实现主要依靠的是touch事件的三个阶段,以及借助CSS3动画效果;下拉加载主要依靠页面的onscroll事件,需要注意的是页面滚动时可能要考虑函数节流。

查看原文

csdoker 赞了文章 · 8月28日

H5下拉刷新和上拉加载实现原理浅析

原文链接:justrockit.top

前言

在移动端H5网页中,下拉刷新和上拉加载更多数据的交互方式出现频率很高,开源社区也有很多类似的解决方案,如iscroll,pulltorefresh.js库等。下面是对这两种常见交互基本实现原理的阐述。

实现原理

下拉刷新

实现下拉刷新主要分为三步:

  • 监听原生touchstart事件,记录其初始位置的值,e.touches[0].pageY
  • 监听原生touchmove事件,记录并计算当前滑动的位置值与初始位置值的差值,大于0表示向下拉动,并借助CSS3的translateY属性使元素跟随手势向下滑动对应的差值,同时也应设置一个允许滑动的最大值;
  • 监听原生touchend事件,若此时元素滑动达到最大值,则触发callback,同时将translateY重设为0,元素回到初始位置。

示例。查看链接:下拉刷新demo(PC浏览器需调成手机模拟器模式查看)

html

<main>
    <p class="refreshText"></p>
    <ul id="refreshContainer">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
        ...
    </ul>
</main>

javascript

(function(window) {
    var _element = document.getElementById('refreshContainer'),
      _refreshText = document.querySelector('.refreshText'),
      _startPos = 0,
      _transitionHeight = 0;

    _element.addEventListener('touchstart', function(e) {
        console.log('初始位置:', e.touches[0].pageY);
        _startPos = e.touches[0].pageY;
        _element.style.position = 'relative';
        _element.style.transition = 'transform 0s';
    }, false);
    
    _element.addEventListener('touchmove', function(e) {
        console.log('当前位置:', e.touches[0].pageY);
        _transitionHeight = e.touches[0].pageY - _startPos;
        
        if (_transitionHeight > 0 && _transitionHeight < 60) {
            _refreshText.innerText = '下拉刷新';
            _element.style.transform = 'translateY('+_transitionHeight+'px)';

            if (_transitionHeight > 55) {
              _refreshText.innerText = '释放更新';
            }
        }                
    }, false);

    _element.addEventListener('touchend', function(e) {
        _element.style.transition = 'transform 0.5s ease 1s';
        _element.style.transform = 'translateY(0px)';
        _refreshText.innerText = '更新中...';

        // todo...

    }, false);
})(window);

在下拉到松手的过程中,经历了三个状态:

  • 当前手势滑动位置与初始位置差值大于零时,提示正在进行下拉刷新操作;
  • 下拉到一定值时,显示松手释放后的操作提示;
  • 下拉到达设定最大值松手时,执行回调,提示正在进行更新操作。

上拉加载

上拉加载更多数据是在页面滚动时触发的动作,一般是页面滚动到底部时触发,也可以选择在滚动到一定位置的时候触发。

以滚动到页面底部为例。实现原理是分别获得当前滚动条的scrollTop值、当前可视范围的高度值clientHeight以及文档的总高度scrollHeight。当scrollTopclientHeight的值之和大于等于scrollHeight时,触发callback

示例。查看链接:上拉加载demo

html

<main>
    <ul id="refreshContainer">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
        ...
    </ul>
    <p class="refreshText"></p>
</main>
(function(window) {
    // 获取当前滚动条的位置 
    function getScrollTop() { 
        var scrollTop = 0; 
        if (document.documentElement && document.documentElement.scrollTop) { 
            scrollTop = document.documentElement.scrollTop; 
        } else if (document.body) { 
            scrollTop = document.body.scrollTop; 
        } 
        return scrollTop; 
    } 
    
    // 获取当前可视范围的高度 
    function getClientHeight() { 
        var clientHeight = 0; 
        if (document.body.clientHeight && document.documentElement.clientHeight) { 
            clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight); 
        } 
        else { 
            clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight); 
        } 
        return clientHeight; 
    } 
    
    // 获取文档完整的高度 
    function getScrollHeight() { 
        return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); 
    }
    
    var _text = document.querySelector('.refreshText'),
      _container = document.getElementById('refreshContainer');
    
    // 节流函数
    var throttle = function(method, context){
      clearTimeout(method.tId);
      method.tId = setTimeout(function(){
        method.call(context);
      }, 300);
    }
    
    function fetchData() {
        setTimeout(function() {
            _container.insertAdjacentHTML('beforeend', '<li>new add...</li>');
        }, 1000);
    }
    
    window.onscroll = function() {
      if (getScrollTop() + getClientHeight() == getScrollHeight()) {
          _text.innerText = '加载中...';
          throttle(fetchData);
      }
    };

})(window);

页面绑定onscroll事件时加入了节流函数,其作用就是忽略滚动条300毫秒内的连续多次触发。

小结

上拉刷新的实现主要依靠的是touch事件的三个阶段,以及借助CSS3动画效果;下拉加载主要依靠页面的onscroll事件,需要注意的是页面滚动时可能要考虑函数节流。

查看原文

赞 39 收藏 40 评论 4

csdoker 赞了文章 · 8月25日

强烈推介的几个微信小程序开发小技巧,简单又实用

Eu_62tl0bcU

前段时间在下开发了个微信小程序,开发过程中总结了一些我觉得对我有用的小技巧,提炼出来,相当于一个总结复盘,也希望可以帮助到大家。如果对大家确实有帮助,别忘了点赞哦 🌟 ~

  1. 微信开发者工具版本:1.03.2006090(2020-06-19)
  2. 基础库版本: v2.12.1 (2020-08-04)

1. 开发中可能遇到的坑以及 Tips

本来想写个小技巧的,结果我总结了一堆坑,没上手之前完全想象不到微信小程序的开发体验是如此之差、如此之烂,从微信开发者工具到所谓的「全新语言」,都有一种浓浓的半成品的 five 即视感,实在让我 emmm.... 另外我发现网上的小程序文章大部分都是如何使用和如何避坑的实用文,而不是技巧文,这也从侧面反映了小程序的坑多。

在微信小程序原生开发过程中,我不断发出这样的疑问「为什么堂堂技术人才多如牛毛的腾讯,会推出如此 laji」,很多弱智反人类的地方,在两三年前社区就已经提出来,官方回复已经反馈正在修复中,但几年过去了,还是没有音信,官方回复仍然是一句冷冰冰的「已反馈」 😤

  1. 微信开发者工具经常热更新不起作用甚至白屏,重新编译也不行,只能强行退出后再次打开;
  2. 跟上一条类似,有时候一点样式出错,预览整个都白屏,调试器里也不说哪里的问题,直接就给你弃疗不显示,重新编译也无法解决问题,只能强行退出后再次打开;
  3. 跟上一条类似,调试器里报的错经常没什么用,驴头不对马嘴,让人很难定位问题;
  4. Android 端自定义 Tabbar 在下拉刷新的时候,也会跟着屏幕一起往下移,而且是无法绕过的 Bug,自定义 Tabbar 样式都写好了的我又改成自带的 Tabbar 了!
  5. import 的路径不支持绝对路径,比如你希望引用 utils/fetch.js,在不管多深的组件里面你都要慢慢 ../ 点到根目录,同样 .wxss 文件 @import 导入文件时也只能使用相对路径,所以就会出现 ../../../../../../utils/fetch.js 这种东西;
  6. 静态资源路径不能有汉字,有汉字就无法加载;
  7. .wxs 文件不支持 ES6,只能使用蹩脚的 ES5 写法;
  8. .wxml 中只能引入 .wxs 文件不能引入 .js 文件???
  9. 模板 {{}} 中连方法都不能执行,只能处理简单的运算如 + - * /,如果遇到数据需要 filter 的场景,需要在 .js 文件中预先格式化好再一个个 setData,比如经常写的 [2,3,4].includes(type),居然都跑不起来!
  10. .wxs 文件中无法使用 Date 对象,所以不能 new Date(),只能使用蹩脚的 getDate 方法,正则也是一样,生成正则对象需要使用 getRegExp 函数 getRegExp(pattern[, flags])
  11. .wxs 中可以调用其它 .wxs 文件,并且只能 require 调用 .wxs 文件,引入的文件必须使用相对路径;
  12. setData 连一个对象合并都懒得做,如果 data: {a: {b: 1, c: 1}},那么 setData({a: {b: 2}}) 就会丢失 a.c 的值,真是让人火冒三丈啊,还要 setData({['a.b': 2]}) 这样才行;
  13. IOS 上 Date 对象获取任意时间参数比如 getDaygetTime 都为 NaN,是因为 IOS 的 Date 构造函数不支持 2018-04-26 这种格式的日期,必须转换为 2018/04/26 这种格式才会显示正常;
  14. 开发版小程序有时候请求莫名其妙发不出去,右上角三个点 enable debug 打开「开发调试」之后就莫名其妙能发出去请求了,在多部手机上都是这样,不明真相。

2. 微信请求 Promise 化

2.1 使用现成的库

安装 Promise 库 wx-promise-pro,记得一定要带 -s--production,要不然无法构建成功。

npm i -S wx-promise-pro

然后在 app.js 中:

import { promisifyAll } from 'wx-promise-pro'

promisifyAll()  // promisify all wx api

App({ ... })

之后就可以正常使用了:

wx.pro.showLoading({
    title: '加载中',
    mask: true
})
  .then(() => console.log('in promise ~'))

2.2 自己实现

其实我们可以自己来实现一个这样的库,原理很简单,以原生 API 的 wx.request 为例:

// 原生 API 使用方式
wx.request({
    url: '',     // 请求的 url
    data: {},    // 参数
    method: '',  // post、get
    success: res => {
        // 请求成功回调函数,res为回调参数
    },
    fail: res => {
        // 请求失败回调函数,res为回调参数
    }
})

如果我们将其 Promise 化,应该的调用方式希望是:

// Promise 化后的期望使用方式
wx.pro.request({
    url: '',     // 请求的 url
    data: {},    // 参数
    method: ''   // post、get
})
  .then(res => {
      // 请求成功回调函数,res为回调参数
  })
  .catch(res => {
      // 请求失败回调函数,res为回调参数
  })

并且 then 函数返回的是一个 Promise 对象,让这个函数可以不断链式调用下去,所以首先需要 new 出来一个 Promise 对象:

function request(opt) {
    return new Promise((resolve, reject) => {
        wx.request({
            ...opt,
            success: res => { resolve(res)},
            fail: res => {reject(res)}
        })
    })
}

这里代码我们可以进一步改进,由于 successfail 这里传入的参数只是由 resolvereject 方法执行了下,所以可以直接传入 resolvereject 方法即可。

另外,由于其他小程序原生 API 格式一致,所以我们可以使用柯里化方法,来将其他需要进行 Promise 化的 API 进行处理:

function promisify(api) {
    return (opt = {}) => {
        return new Promise((resolve, reject) => {
            api({
                ...opt,
                fail: reject,
                success: resolve
            })
        })
    }
}

然后,将柯里化方法执行的结果作为新的 Promise 化的 API 挂载到 wx.pro 对象上:

// 将指定 API 进行 Promise 化
wx.pro.request = promisify(wx.request)

// 使用
wx.pro.request({...})
    .then(...)

然后为了方便我们使用其他方法,可以循环将 wx 对象上可以被 Promise 化的方法比如 requestscanCodeshowToastgetUserInfo 等一一挂载到 wx.pro 对象上,使用时可以直接 wx.pro.xx,由于这个方法执行返回的是一个 Promise 对象,因此可以像其它 Promise 化的对象那样使用。

事实上,不知不觉,我们就自己实现了 wx-promise-pro 的源码,这个库的核心代码也就是上面那这几行 🥳

2.3 在项目中使用

有了上面的工具后,我们可以将其使用在项目中,为了不在项目中遍布 wx.requestwx.pro.request 这里可以简单进行封装,新建两个文件如下:

// utils/api/fetch.js 封装请求方法、请求拦截器

const app = getApp()

const BaseUrl = 'http://172.0.0.1:7300/mock'

const TokenWhiteList = [
    '/app/user/get-by-code'     // 不需要鉴权的api手动添加到这里
]

/**
 * 设置请求拦截器
 * @param params 请求参数
 */
const fetch = (params = {}) => {
    // 拦截器逻辑
    if (!TokenWhiteList.includes(params.url)) {
        params.header = {
            'content-type': 'application/json',             // 默认值
            'token': app.globalData.token || ''
        }
    }

    if (params.url.startsWith('/')) {    // 拼接完整URL
        params.url = BaseUrl + params.url
    }

    // 返回promise
    return wx.pro.request({ ...params })
      .then(({ data: { code, message, data } }) => {
          // ... 各种异常情况的逻辑处理
          // 与后端约定 code 20000 时正常返回
          if (code === 20000) return Promise.resolve(data)
          return Promise.reject(message)
      })
}

export { fetch }

然后再将所有 API 封装到单独的文件中集中管理:

// utils/api/apis.js 封装所有请求 API

import { fetch } from './fetch'

/* 根据微信code获取用户信息 */
const appUserGetByCode = ({ code } = {}) => fetch({
    url: '/app/user/get-by-code',
    data: { code }
})

/* 扫码登录 */
const appUserQrLogin = ({ qrCode } = {}) => fetch({
    method: 'POST',
    url: '/app/user/qr-login',
    data: { qrCode }
})

/* 个人信息 */
const appUserInfo = () => fetch({
    url: '/app/user/info'
})

/* 系统参数获取,数据字典 */
const appSysParamListByParam = () => fetch({
    url: '/app/sys-param/list-by-param'
})

/* 数据字典所有 */
const appSysParamListAll = () => fetch({
    url: '/app/sys-param/list-all'
})

export {
    appSysParamListAll,   // 数据字典所有
    appSysParamListByParam,   // 系统参数获取,数据字典
    appUserGetByCode,   // 根据微信code获取用户信息
    appUserQrLogin,   // 扫码登录
    appUserInfo   // 个人信息
}

在要使用 API 的地方就可以这样引入:

import * as Api from '../../utils/api/apis.js'   // 相对路径

// 使用方式
Api.appSysParamListAll()
  .then(({ dataList }) => this.upData({ sysParamList: dataList }))
  .then(() => {
      const keyList = this.data.sysParamList.map(T => T.key)
      this.upData({
          keyList,
          formData: { keys: keyList }
      })
  })

使用方式就很舒服,这里使用到了 upData,就是下面我要介绍的内容,是在下非常推介的小程序工具~ 🥳

3. setState 修改 data 中想修改对象的属性

在小程序中,data 是不能直接操作的,需要使用 setData 函数。鉴于微信小程序开发时 setData 的使用体验十分蹩脚,我使用了个库函数 wx-updata,这个库函数在开发的时候对我很有帮助,这里特意推介给大家。

3.1 为什么要使用 wx-updata

你在使用 setData 的时候,是不是有时候觉得很难受,举个简单的例子:

// 你的 data
data: {
    name: '蜡笔小新',
    info: { height: 140, color: '黄色' }
}

如果要修改 info.height 为 155,使用 setData 要怎么做呢:

// 这样会把 info 里其他属性整不见了
this.setData({ info: { height: 155 } })

// 你需要取出 info 对象,修改后整个 setData
const { info } = this.data
info.height = 155
this.setData({ info })

似乎并不太复杂,但如果 data 是个很大的对象,要把比较深且不同的对象、数组项挨个改变:

data: {
    name: '蜡笔小新',
    info: {
        height: 140, color: '黄色',
        desc: [{ age: 8 }, '最喜欢大象之歌', '靓仔', { dog: '小白', color: '白色' }]
    }
}

比如某个需求,需要把 info.height 改为 155,同时改变 info.desc 数组的第 0 项的 age 为 12,第 3 项的 color 为灰色呢?

// 先取出要改变的对象,改变数字后 setData 回去
const { info } = this.data
info.height = 155
info.desc[0].age = 12
info.desc[3].color = '灰色'
this.setData({ info })

// 或者像某些文章里介绍的,这样可读性差,也不太实用
this.setData({
    'info.height': 155,
    'info.desc[0].age': 12,
    'info.desc[3].color': '灰色'
})

上面这两种方法,是我们平常小程序里经常用的,和其他 Web 端的框架相比,就很蹩脚,一种浓浓的半成品感扑面而来,有没有这样一个方法:

this.upData({
    info: {
        height: 155,
        desc: [{ age: 12 }, , , { color: '灰色' }]
    }
})

这个方法会帮我们深度改变嵌套对象里对应的属性值,跳过数组项里不想改变的,只设置我们提供了的属性值、数组项,岂不是省略了一大堆蹩脚的代码,而且可读性也极佳呢。

这就是为什么我在上线的项目中使用 wx-updata,而不是 setData

wx-updata 的原理其实很简单,举个例子:

this.upData({
    info: {
        height: 155,
        desc: [{ age: 12 }]
    }
})

// 会被自动转化为下面这种格式,
// this.setData({
//    'info.height': 155,
//    'info.desc[0].age': 12,
// })

原来这个转化工作是要我们自己手动来做,现在 wx-updata 帮我们做了,岂不美哉!

3.2 wx-updata 使用方式

在一般情况下,我们可以将方法直接挂载到 Page 构造函数上,这样就可以在 Page 实例中像使用 setData 一样使用 upData 了:

// app.js 中挂载
import { updataInit } from './miniprogram_npm/wx-updata/index'  // 你的库文件路径

App({
    onLaunch() {
        Page = updataInit(Page, { debug: true })
    }
})

// 页面代码中使用方式
this.upData({
    info: { height: 155 },
    desc: [{ age: 13 }, '帅哥'],
    family: [, , [, , , { color: '灰色' }]]
})

有的框架可能在 Page 对象上进行了进一步修改,直接替换 Page 的方式可能就不太好了,wx-updata 同样暴露了工具方法,用户可以在页面代码中直接使用工具方法进行处理:

// 页面代码中
import { objToPath } from './miniprogram_npm/wx-updata/index'  // 你的库文件路径

Page({
    data: { a: { b: 2}, c: [3,4,5]},

    // 自己封装一下
    upData(data) {
        return this.setData(objToPath(data))
    },

    // 你的方法中或生命周期函数
    yourMethod() {
        this.upData({ a: { b: 7}, c: [8,,9]})
    }
})

针对修改数组指定项的时候,可能存在的跳过数组空位的情况,wx-updata 提供了 Empty 的 Symbol 类型替位符,还有数组的对象路径方式,感兴趣可以看看 wx-updata 的文档,也可以参考 <开发微信小程序,我为什么放弃 setData,使用 upData> 这篇介绍文章。

另外,使用了 wx-updata 也还可以使用原来的 setData,特别是有时候要清空数组时,灵活使用,可以获得更好的小程序开发体验,祝大家小程序开发愉快 🤣

4. 使用 scss 写样式

4.1 Webstorm 配置方法

关于蹩脚的 .wxss 样式,我使用 webstorm 的 file watcher 工具把 scss 文件监听改动并实时编译成 .wxss 文件,感觉比较好用,这里给大家分享一下我的配置:

然后记得在 .gitignore 文件中加入要忽略的样式:

*.scss
*.wxss.map

这样在上传到 git 的时候,就不会上传 scss 文件了~ 当然如果你的团队成员需要 scss 的话,还是建议 git 上传的时候也加上 scss 文件。

这样设置之后,一个组件在本地的会是下面这样

本地文件

其中我们需要关注的就是 .js.json.scss.wxml 文件,另外的文件 .wxss 会在你改动 .scss 文件之后自动生成并更新,而 .wxss.map 是插件自动生成的映射关系,不用管。

如果不是使用 webstorm,可以直接执行命令 sass --watch index.scss:index.wxss -s expanded,命令行如果关闭,sass 命令就不会监听文件的变动然后编译,所以最好用编辑器的插件。

同理,也可以使用 less、stylus 等预编译语言。

4.2 Visual Studio Code 配置方法

万能的 VSC 当然也可以做到这个功能,搜索并下载插件 easy sass,然后在 setting.json 中修改/增加配置:

"easysass.formats": [
  {
    "format": "expanded",
    "extension": ".wxss"
  },
  {
    "format": "compressed",
    "extension": ".min.wxss"
  }
]

上面 expanded 是编译生成的 .wxss 文件,下面 compressed 是压缩之后的 .wxss 样式文件,下面这个用不到可以把下面这个配置去掉,然后在 .gitignore 文件中加入要忽略的中间样式:

*.scss

当然也可以不添加,如果你的同事也是实用 scss 来开发小程序的话,其他跟上面一样,至此你就可以在小程序开发中快乐使用 scss 了~

5. 使用 iconfont 图标字体

在 Web 开发中 iconfont 可谓是最常用的灵活图标字体工具了,这里介绍一下如何在微信小程序中引入 iconfont 图标。

首先找到你想使用的图标们,点击购物车之后下载到本地。

下载icon

下载到本地是一个压缩包,解压缩之后将 iconfont.css 文件复制到微信小程序的 styles 文件夹中 (在下的习惯,也可以放到你想放的地方比如 fonts),将后缀改为 .wxss

放到本地

app.wxss 中引入样式:

@import "styles/iconfont.wxss";

然后在 .wxml 中就可以使用刚刚你添加的图标了,Web 使用 i 标签,小程序中使用 text 标签:

<text class="iconfont icon-my-edit" style="color: blue"></text>

如果后面要加新的图标,要下载新的 iconfont.css 的文件到本地重命名并覆盖,重新走一遍这个流程。

当然,如果你使用的样式库提供的一些 icon 能满足你的要求,那更好,就不用引入外部图标字体文件了,不过大部分情况下是不满足的 🤣


网上的帖子大多深浅不一,甚至有些前后矛盾,在下的文章都是学习过程中的总结,如果发现错误,欢迎留言指出,如果本文帮助到了你,别忘了点赞支持一下哦(收藏不点赞,都是耍流氓 🤣)~

参考文档:

  1. youngjuning/wx-promise-pro: ✨强大、优雅的微信小程序异步库🚀
  2. 小程序开发坑之-IOS时间显示为NaN - 漠小飞
  3. 【微信小程序】性能优化
  4. 微信小程序使用Promise - 简书
  5. 开发微信小程序,我为什么放弃 setData,使用 upData

PS:本人博客地址 Github - SHERlocked93/blog,也欢迎大家关注我的公众号【前端下午茶】,一起加油吧~

另外可以加入「前端下午茶交流群」微信群,长按识别下面二维码即可加我好友,备注加群,我拉你入群~

查看原文

赞 51 收藏 35 评论 6

csdoker 提出了问题 · 8月24日

小程序怎么动态修改默认的启动页?

目前遇到了一种业务场景:
1、小程序的默认启动页,设置为页面A,当用户没有登录时,进入页面A,因为此时没有token,后端会返回403,前端会自动重定向到登录页
2、用户从登录页登录后,后端会返回当前用户的角色信息,前端会把角色信息存储在小程序的storage缓存里
3、如果是角色a,则跳转到页面A;如果是角色b,则跳转到页面B

如果是上面的正常流程,逻辑是没问题的,但是如果用户当前角色是b,然后进入到页面B后,进行一些操作后,把小程序切换到后台,再此进入时,小程序又会重新打开默认的启动页A,而此时其实用户是没有页面A的权限的,因为只有角色a才能访问页面A

我目前对这个问题的处理方案是在页面A进入时就用缓存里的角色信息进行判断,如果是角色a就不做处理,如果是角色b就重定向到B页面去,可是感觉这样处理很麻烦,也不规范,那么能不能动态的设置小程序的默认启动页呢,可是app.json貌似是不能动态修改的,这种问题有没有比较优雅的解决方案呢?

我能想到的另外一种方案,就是单独做一个空白的启动页C作为默认页,在这个C页面去判断用户角色,然后跳转到对应页面,但是这样也会有一个重定向的过程,体验和第一种办法差不多,有更好的办法吗?

关注 2 回答 1

csdoker 收藏了文章 · 7月31日

Vue2.0 + ElementUI 手写权限管理系统后台模板(一)——简述

挤一下: 一开始以为没有多少人用就没建群,但是加我的人太多了,好多问题都是重复的,所以建个群大家互相沟通交流方便点,但是建的有点晚,错过了好多人所以群里人有点少,QQ群: 157216616

小提示

这个框架权限是由前端控制的,如果不需要这个模式,可以看我另外一个全栈CMS项目,后台使用的是node框架egg.js+mysql,那个的权限是由后台返回有权限的路由,前端拿到路由后和前端路由表做筛选,得出最终的路由表生成菜单,好处是角色和角色所拥有的权限路由是动态的后台可随时编辑配置的,两种模式按需使用
image.png

源码地址:

简介

这个权限管理就是为了方便,跟系统安全真的不沾边,只是根据后台返回的角色信息来生成他可以看见的菜单和按钮,显示菜单的方法是根据权限删除掉路由表里没有权限的路由,然后再动态添加,原本包含没有访问权限的原路由表只要打开页面运行代码就已经不存在了,并且404页面除了过滤掉项目没有的路由外,同时每次的路由跳转都会鉴权。如果你知道了没有权限的路由试着强行跳转会因为没有权限直接会跳转404。
就算通过查看代码或者其他方法获取全部路由,并且绕过404,花了这么大精力,,那你也看不到新世界的大门,因为所有数据都是通过后台请求返回来的,你没权限后台不会给你数据的,也不会让你去操作,,除非后台不验证权限,只要有人请求我就给你所有数据,,,,

最近写了一个基于vue2.0+element-ui权限管理系统的后台模板,包含了正常项目开发所需的框架功能,开发者使用的时候只需要专注于项目的业务逻辑就好。同时接下来会让你拥有一个自己完全掌控的框架。

源码地址:

预览地址:

vue-xuAdmin是基于vue2.0全家桶 + element-ui 开发的一个后台模板,实现了无限级菜单,页面、按钮级别的权限管理,为了减少前后端的沟通成本,页面、按钮级别的权限验证和动态路由表的存储校验,也都由前端完成,这样前端新建页面或者删除页面都不需要告诉后台去增加删除路由表

部分截图

enter description here
enter description here
enter description here
enter description here
enter description here
enter description here

更新日志

v1.2.5

  1. 增加DllPlugin优化构建速度,编译速度更快 yarn startdll
  2. 增加build版本控制
  3. 增加 刷新浏览器会保持继续显示当前组件,不会使系统跳转到首页

v1.2.1

  1. 升级webpack 4.0, 做了一些性能优化,编译时间从13秒优化到2-3秒,速度最高提升90%(第一次启动时间是正常时间,启动后Ctrl+c 关闭项目重新启动速度会变快)
  2. 封装了axios 请求
  3. 增加了一些全局公共方法/utils/global,和一些工具函数/utils/index,封装了表单验证/utils/rules
  4. 项目结构做了一些调整
  5. 重做了404页面
  6. 修复了几个小bug
  7. 增加build打包结果分析 yarn analyz

2. 准备工作

-开发环境

  • node.js v8.0+
  • webpack v4
  • git

-技术栈

  • ES6+
  • vue2.0+
  • vue-router
  • vuex
  • axios
  • scss
  • element-ui v2.4+

3. 基础框架功能

- 登录、退出
+ 基于token
    - 状态拦截、404页面
    - 动态加载路由
    - 页面、按钮指令权限管理
    - 无限级菜单
- 封装vue-i18n@8.x国际化组件
- 系统全屏化
- 菜单收缩
- icon 图标
+ tab标签导航
    - 右击快捷功能
- 表格拖拽排序
- 封装了 axios
- 封装了全局方法,和一些工具函数
- 编辑器
    - markdown(编辑器目前只封装了这一个组件,重写了markdown编辑和预览的皮肤,实时获取:markdown,html,json 三种格式文本)
- Echarts 组件封装

封装了一些element-ui没有但是常用的组件,正常需要的功能element-ui里面都有,可以直接复制,如果element-ui不能满足你的需求只有自己写了

4. 开发

登录

登录页面只有输入账号密码,需要验证码的可以自行去搜第三方验证插件,有收费有免费。这里仅为了测试,就把输入的账号当做 token 来存储,完成整个系统的会话,实际开发以登录成功后后台返回的 token 为准

// 登录页面
submitForm () {
      let that = this
      if (this.loginForm.username === "" || this.loginForm.password === "") {
        this.$message({
          showClose: true,
          message: "账号或密码不能为空",
          type: "error"
        })
        return false
      } else {
        // 真实请求参考
        // fetchLogin 是封装的登录接口,所有请求都被封装在 src/api/ 文件夹下
        this.$request.fetchLogin({
          username: that.loginForm.username,
          password: that.loginForm.password
        }).then(res => {
        // $restBack 是封装的全局返回方法,全局方法和工具函数在 src/utils 文件夹下
          that.$restBack(res.data, () => {
            that.$store.dispatch("setToken", res.data.data.access_token).then(res => {
              that.$router.push({path: "/"})
            })
          }, "登录成功")
        }).catch((err) => {
          console.log(err)
        })
      }
    },
// vuex 
  state: {
    token: Cookies.get('token') // 刷新页面或者在新标签页打开,从cookie获取初始token
  },
  mutations: {
    setToken (state, token) {
      state.token = token
      Cookies.set('token', token ,{ expires: 1/24 }) // 引用‘js-cookie’模块,存储 token 到cookie
    }
  },
  actions: {
    setToken ({commit}, token) {
      return new Promise((resolve, reject) => {
        commit('setToken', token)
        resolve()
      })
    }
  },

系列文章

Vue2.0 + ElementUI 手写权限管理系统后台模板(一)——简述

Vue2.0 + ElementUI 手写权限管理系统后台模板(二)——权限管理

Vue2.0 + ElementUI 手写权限管理系统后台模板(三)——页面搭建

Vue2.0 + ElementUI 手写权限管理系统后台模板(四)——组件结尾

查看原文

csdoker 赞了文章 · 7月31日

Vue2.0 + ElementUI 手写权限管理系统后台模板(一)——简述

挤一下: 一开始以为没有多少人用就没建群,但是加我的人太多了,好多问题都是重复的,所以建个群大家互相沟通交流方便点,但是建的有点晚,错过了好多人所以群里人有点少,QQ群: 157216616

小提示

这个框架权限是由前端控制的,如果不需要这个模式,可以看我另外一个全栈CMS项目,后台使用的是node框架egg.js+mysql,那个的权限是由后台返回有权限的路由,前端拿到路由后和前端路由表做筛选,得出最终的路由表生成菜单,好处是角色和角色所拥有的权限路由是动态的后台可随时编辑配置的,两种模式按需使用
image.png

源码地址:

简介

这个权限管理就是为了方便,跟系统安全真的不沾边,只是根据后台返回的角色信息来生成他可以看见的菜单和按钮,显示菜单的方法是根据权限删除掉路由表里没有权限的路由,然后再动态添加,原本包含没有访问权限的原路由表只要打开页面运行代码就已经不存在了,并且404页面除了过滤掉项目没有的路由外,同时每次的路由跳转都会鉴权。如果你知道了没有权限的路由试着强行跳转会因为没有权限直接会跳转404。
就算通过查看代码或者其他方法获取全部路由,并且绕过404,花了这么大精力,,那你也看不到新世界的大门,因为所有数据都是通过后台请求返回来的,你没权限后台不会给你数据的,也不会让你去操作,,除非后台不验证权限,只要有人请求我就给你所有数据,,,,

最近写了一个基于vue2.0+element-ui权限管理系统的后台模板,包含了正常项目开发所需的框架功能,开发者使用的时候只需要专注于项目的业务逻辑就好。同时接下来会让你拥有一个自己完全掌控的框架。

源码地址:

预览地址:

vue-xuAdmin是基于vue2.0全家桶 + element-ui 开发的一个后台模板,实现了无限级菜单,页面、按钮级别的权限管理,为了减少前后端的沟通成本,页面、按钮级别的权限验证和动态路由表的存储校验,也都由前端完成,这样前端新建页面或者删除页面都不需要告诉后台去增加删除路由表

部分截图

enter description here
enter description here
enter description here
enter description here
enter description here
enter description here

更新日志

v1.2.5

  1. 增加DllPlugin优化构建速度,编译速度更快 yarn startdll
  2. 增加build版本控制
  3. 增加 刷新浏览器会保持继续显示当前组件,不会使系统跳转到首页

v1.2.1

  1. 升级webpack 4.0, 做了一些性能优化,编译时间从13秒优化到2-3秒,速度最高提升90%(第一次启动时间是正常时间,启动后Ctrl+c 关闭项目重新启动速度会变快)
  2. 封装了axios 请求
  3. 增加了一些全局公共方法/utils/global,和一些工具函数/utils/index,封装了表单验证/utils/rules
  4. 项目结构做了一些调整
  5. 重做了404页面
  6. 修复了几个小bug
  7. 增加build打包结果分析 yarn analyz

2. 准备工作

-开发环境

  • node.js v8.0+
  • webpack v4
  • git

-技术栈

  • ES6+
  • vue2.0+
  • vue-router
  • vuex
  • axios
  • scss
  • element-ui v2.4+

3. 基础框架功能

- 登录、退出
+ 基于token
    - 状态拦截、404页面
    - 动态加载路由
    - 页面、按钮指令权限管理
    - 无限级菜单
- 封装vue-i18n@8.x国际化组件
- 系统全屏化
- 菜单收缩
- icon 图标
+ tab标签导航
    - 右击快捷功能
- 表格拖拽排序
- 封装了 axios
- 封装了全局方法,和一些工具函数
- 编辑器
    - markdown(编辑器目前只封装了这一个组件,重写了markdown编辑和预览的皮肤,实时获取:markdown,html,json 三种格式文本)
- Echarts 组件封装

封装了一些element-ui没有但是常用的组件,正常需要的功能element-ui里面都有,可以直接复制,如果element-ui不能满足你的需求只有自己写了

4. 开发

登录

登录页面只有输入账号密码,需要验证码的可以自行去搜第三方验证插件,有收费有免费。这里仅为了测试,就把输入的账号当做 token 来存储,完成整个系统的会话,实际开发以登录成功后后台返回的 token 为准

// 登录页面
submitForm () {
      let that = this
      if (this.loginForm.username === "" || this.loginForm.password === "") {
        this.$message({
          showClose: true,
          message: "账号或密码不能为空",
          type: "error"
        })
        return false
      } else {
        // 真实请求参考
        // fetchLogin 是封装的登录接口,所有请求都被封装在 src/api/ 文件夹下
        this.$request.fetchLogin({
          username: that.loginForm.username,
          password: that.loginForm.password
        }).then(res => {
        // $restBack 是封装的全局返回方法,全局方法和工具函数在 src/utils 文件夹下
          that.$restBack(res.data, () => {
            that.$store.dispatch("setToken", res.data.data.access_token).then(res => {
              that.$router.push({path: "/"})
            })
          }, "登录成功")
        }).catch((err) => {
          console.log(err)
        })
      }
    },
// vuex 
  state: {
    token: Cookies.get('token') // 刷新页面或者在新标签页打开,从cookie获取初始token
  },
  mutations: {
    setToken (state, token) {
      state.token = token
      Cookies.set('token', token ,{ expires: 1/24 }) // 引用‘js-cookie’模块,存储 token 到cookie
    }
  },
  actions: {
    setToken ({commit}, token) {
      return new Promise((resolve, reject) => {
        commit('setToken', token)
        resolve()
      })
    }
  },

系列文章

Vue2.0 + ElementUI 手写权限管理系统后台模板(一)——简述

Vue2.0 + ElementUI 手写权限管理系统后台模板(二)——权限管理

Vue2.0 + ElementUI 手写权限管理系统后台模板(三)——页面搭建

Vue2.0 + ElementUI 手写权限管理系统后台模板(四)——组件结尾

查看原文

赞 14 收藏 12 评论 0

csdoker 收藏了文章 · 7月30日

【译】像高级前端开发人员一样使用Chrome DevTools

原文地址:https://medium.com/javascript...

作者:Dornhoth

如果选择 Chrome 作为开发环境,则必须知道的 11 个技巧。

好的,现在由于某种原因,你最终选择了 Chrome 为开发使用的浏览器。然后,你打开了开发者工具( Developer Tools )并开始调试代码。

有时你可以打开控制台面板( Console panel )来检查程序的输出,或者打开元素面板( Elements panel )来检查 DOM 元素的 CSS 代码。

但是你真的了解 Chrome 开发者工具( DevTools ) 吗?实际上,它提供了许多强大但未知的功能,可以大大提高我们的开发效率。

在这里,我将介绍最有用的功能,希望对你有所帮助。

在开始之前,我想介绍一下命令菜单( Command menu )。命令菜单对于 Chrome 就像 Shell 对于 Linux 一样。命令菜单允许你输入一些命令来操作 Chrome。

首先,我们打开 Chrome 开发工具,然后用以下快捷方式打开命令菜单:

windows:Ctrl + Shift + P
macOS:Cmd + Shift + P

或者我们可以单击下面的按钮将其打开:

然后我们可以到命令面板,在这里我们可以选择各种命令来执行各种强大的功能。

1.gif

强大的屏幕截图

捕捉屏幕的一部分是一个非常常见的需求,并且我确定你当前的计算机上已经具有非常方便的截图软件。但是,你可以完成以下任务吗?

  • 截取网页上所有内容的屏幕快照,包括可视窗口中未出现的所有内容
  • 精确捕获 DOM 元素的内容

这是两个常见的需求,但是使用操作系统附带的截屏工具并不能很容易地解决它们。此时,我们可以使用命令来帮助我们完成这个需求。

对应的命令是:

Screenshot Capture full size screenshot

Screenshot Capture node screenshot

例子

现在打开任何页面,例如,Medium 上的关于 JavaScript 的头条新闻页面。https://medium.com/tag/javascript

然后打开命令菜单并执行 Screenshot Capture full size screenshot

然后,我们可以获得当前页面的完整屏幕截图。

上面的原始图像非常清晰,但这里我上传了一个压缩图像,以节省您的流量。

类似地,如果要截取 DOM 元素的屏幕快照,你可以使用系统自己的屏幕截图工具,但是你不能准确地捕获该元素。此时,您可以使用Capture node screenshot

首先,在元素面板中选择一个元素,然后运行命令。

2.gif

这是准确的截屏结果:

在控制台中引用上一个操作的结果

我们经常需要在控制台中调试代码。假设你想知道如何在 JavaScript 中反转字符串,然后在网上搜索相关信息并找到以下代码。

'abcde'.split('').reverse().join('')

好吧,上面的代码确实反转了字符串。但是你仍然不理解split()reverse() join()方法的作用以及运行这些中间步骤的结果。所以现在你想要一步一步地执行上面的代码,你可以这样写:

好吧,在这些步骤之后,我们确实知道每个方法运行的返回值。

但这是非常多余的。它既容易出错,又难以理解。实际上,在控制台中,我们可以使用神奇的变量$_来引用先前操作的结果。

$_是一个特殊的变量,它的值总是等于控制台中最后一次操作的结果。这种技术是调试代码的简便方法。

重新发送XHR请求

在我们的前端项目中,我们经常需要使用 XHR 向后端发出请求以获取数据。如果你想重新发送一个 XHR 请求,会怎么做呢?

对于新手,他可能会刷新页面,但这可能很麻烦。实际上,我们可以直接在网络面板( Network panel )中进行调试。

  • 打开网络面板
  • 点击 XHR 按钮
  • 选择您要重新发送的 XHR 请求
  • 重发 XHR

这是一个 gif 例子:

2-1.gif

监控页面加载状态

页面从一开始就完全加载可能需要 10 秒以上的时间。我们需要监控页面在不同时期是如何加载的。

在 Chrome 开发者工具中,我们可以在网络面板下,选择 Capture Screenshots 获得页面加载的截图。

单击每个屏幕截图,以显示相应时间的网络请求。这种直观的演示将使你更好地了解每时每刻正在发生的网络请求。

复制变量

你可以将 JavaScript 变量的值复制到其他地方吗?
这似乎是一个不可能完成的任务,但在 Chrome 中,有一个名为 copy 的函数可以帮助你复制一个变量。

4.gif

复制函数不是由 ECMAScript 定义的,而是由 Chrome 提供的。使用此函数,可以将 JavaScript 变量的值复制到剪贴板中。

将图像复制为 data URI

有两种方法可以处理页面上的图像,一种是通过外部资源链接加载,另一种是将图像编码为 data URLs

Data URLs,以 Data: 协议为前缀的url,允许内容创建者将小文件内联嵌入文档中。它们以前被称为“data URIs”,直到 WHATWG 不再使用这个名称。

将这些小图像编码到 Data URLs 中,并将它们直接嵌入到我们的代码里,可以减少页面需要发出的 HTTP 请求数,从而加快页面加载速度。

在 Chrome 中,我们如何将图像转换为 data URL 呢?

这是一个 gif :

5.gif

表格对象数组( Table object array )

假设我们有一个这样的对象数组:

let users = [{{name:'Jon',age:22},
  {name:'bitfish',age:30},
  {name:'Alice',age:33}]

这样的数组不容易在控制台中查看。如果数组更长,元素更复杂,那么就更难理解了。
幸运的是,Chrome 提供了一个表格函数,可以将对象数组制成表格。

在许多情况下,此功能非常有用。

拖放元素面板( Elements panel )

有时我们需要调整页面上某些 DOM 元素的位置来测试 UI。在元素面板,你可以拖放任何 HTML 元素,并更改其在页面中的位置:

在上面的 gif 中,我在元素面板中拖动 div 的位置,它在页面上的位置会同步改变。

在控制台中引用当前选定的元素

$0是另一个魔法变量,它引用元素面板中当前选择的元素。

触发CSS伪类

伪类允许您将样式应用到一个元素时,不仅与文档树的内容有关,还与外部因素有关,例如导航的历史( :visited 等),其内容的状态( 如 :checked 在某些表单元素 ),或鼠标的位置( 如 :hover,它可以让你知道鼠标是否在元素上)。

我们可以为一个元素编写多个伪类,为了方便对这些样式的测试,我们可以直接元素面板中触发这些样式。

示例

这是一个页面:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      font-size: 150px;
    }

    div:hover{
      color: red;
    }
    div:active{
      color: blue;
    }
    div:focus{
      color: brown;
    }
  </style>
</head>
<body>
  <div>hello world</div>
</body>
</html>

然后我们在浏览器中打开它,并通过元素面板调试它的伪类样式。

8.gif

隐藏元素的快捷方式

在调试 CSS 样式时,我们经常需要隐藏一个元素。如果我们选择元素并按下键盘上的 H 键,我们可以快速隐藏元素。

9.gif

这个操作是将visibility: hidden !important;样式添加到相应的元素。

将DOM元素存储在全局临时变量中

如果我们想在控制台中快速获得一个 DOM 元素引用,我们可以这样做:

  • 选择元素
  • 右击鼠标
  • 存储为全局变量

10.gif

查看原文

csdoker 赞了文章 · 7月30日

【译】像高级前端开发人员一样使用Chrome DevTools

原文地址:https://medium.com/javascript...

作者:Dornhoth

如果选择 Chrome 作为开发环境,则必须知道的 11 个技巧。

好的,现在由于某种原因,你最终选择了 Chrome 为开发使用的浏览器。然后,你打开了开发者工具( Developer Tools )并开始调试代码。

有时你可以打开控制台面板( Console panel )来检查程序的输出,或者打开元素面板( Elements panel )来检查 DOM 元素的 CSS 代码。

但是你真的了解 Chrome 开发者工具( DevTools ) 吗?实际上,它提供了许多强大但未知的功能,可以大大提高我们的开发效率。

在这里,我将介绍最有用的功能,希望对你有所帮助。

在开始之前,我想介绍一下命令菜单( Command menu )。命令菜单对于 Chrome 就像 Shell 对于 Linux 一样。命令菜单允许你输入一些命令来操作 Chrome。

首先,我们打开 Chrome 开发工具,然后用以下快捷方式打开命令菜单:

windows:Ctrl + Shift + P
macOS:Cmd + Shift + P

或者我们可以单击下面的按钮将其打开:

然后我们可以到命令面板,在这里我们可以选择各种命令来执行各种强大的功能。

1.gif

强大的屏幕截图

捕捉屏幕的一部分是一个非常常见的需求,并且我确定你当前的计算机上已经具有非常方便的截图软件。但是,你可以完成以下任务吗?

  • 截取网页上所有内容的屏幕快照,包括可视窗口中未出现的所有内容
  • 精确捕获 DOM 元素的内容

这是两个常见的需求,但是使用操作系统附带的截屏工具并不能很容易地解决它们。此时,我们可以使用命令来帮助我们完成这个需求。

对应的命令是:

Screenshot Capture full size screenshot

Screenshot Capture node screenshot

例子

现在打开任何页面,例如,Medium 上的关于 JavaScript 的头条新闻页面。https://medium.com/tag/javascript

然后打开命令菜单并执行 Screenshot Capture full size screenshot

然后,我们可以获得当前页面的完整屏幕截图。

上面的原始图像非常清晰,但这里我上传了一个压缩图像,以节省您的流量。

类似地,如果要截取 DOM 元素的屏幕快照,你可以使用系统自己的屏幕截图工具,但是你不能准确地捕获该元素。此时,您可以使用Capture node screenshot

首先,在元素面板中选择一个元素,然后运行命令。

2.gif

这是准确的截屏结果:

在控制台中引用上一个操作的结果

我们经常需要在控制台中调试代码。假设你想知道如何在 JavaScript 中反转字符串,然后在网上搜索相关信息并找到以下代码。

'abcde'.split('').reverse().join('')

好吧,上面的代码确实反转了字符串。但是你仍然不理解split()reverse() join()方法的作用以及运行这些中间步骤的结果。所以现在你想要一步一步地执行上面的代码,你可以这样写:

好吧,在这些步骤之后,我们确实知道每个方法运行的返回值。

但这是非常多余的。它既容易出错,又难以理解。实际上,在控制台中,我们可以使用神奇的变量$_来引用先前操作的结果。

$_是一个特殊的变量,它的值总是等于控制台中最后一次操作的结果。这种技术是调试代码的简便方法。

重新发送XHR请求

在我们的前端项目中,我们经常需要使用 XHR 向后端发出请求以获取数据。如果你想重新发送一个 XHR 请求,会怎么做呢?

对于新手,他可能会刷新页面,但这可能很麻烦。实际上,我们可以直接在网络面板( Network panel )中进行调试。

  • 打开网络面板
  • 点击 XHR 按钮
  • 选择您要重新发送的 XHR 请求
  • 重发 XHR

这是一个 gif 例子:

2-1.gif

监控页面加载状态

页面从一开始就完全加载可能需要 10 秒以上的时间。我们需要监控页面在不同时期是如何加载的。

在 Chrome 开发者工具中,我们可以在网络面板下,选择 Capture Screenshots 获得页面加载的截图。

单击每个屏幕截图,以显示相应时间的网络请求。这种直观的演示将使你更好地了解每时每刻正在发生的网络请求。

复制变量

你可以将 JavaScript 变量的值复制到其他地方吗?
这似乎是一个不可能完成的任务,但在 Chrome 中,有一个名为 copy 的函数可以帮助你复制一个变量。

4.gif

复制函数不是由 ECMAScript 定义的,而是由 Chrome 提供的。使用此函数,可以将 JavaScript 变量的值复制到剪贴板中。

将图像复制为 data URI

有两种方法可以处理页面上的图像,一种是通过外部资源链接加载,另一种是将图像编码为 data URLs

Data URLs,以 Data: 协议为前缀的url,允许内容创建者将小文件内联嵌入文档中。它们以前被称为“data URIs”,直到 WHATWG 不再使用这个名称。

将这些小图像编码到 Data URLs 中,并将它们直接嵌入到我们的代码里,可以减少页面需要发出的 HTTP 请求数,从而加快页面加载速度。

在 Chrome 中,我们如何将图像转换为 data URL 呢?

这是一个 gif :

5.gif

表格对象数组( Table object array )

假设我们有一个这样的对象数组:

let users = [{{name:'Jon',age:22},
  {name:'bitfish',age:30},
  {name:'Alice',age:33}]

这样的数组不容易在控制台中查看。如果数组更长,元素更复杂,那么就更难理解了。
幸运的是,Chrome 提供了一个表格函数,可以将对象数组制成表格。

在许多情况下,此功能非常有用。

拖放元素面板( Elements panel )

有时我们需要调整页面上某些 DOM 元素的位置来测试 UI。在元素面板,你可以拖放任何 HTML 元素,并更改其在页面中的位置:

在上面的 gif 中,我在元素面板中拖动 div 的位置,它在页面上的位置会同步改变。

在控制台中引用当前选定的元素

$0是另一个魔法变量,它引用元素面板中当前选择的元素。

触发CSS伪类

伪类允许您将样式应用到一个元素时,不仅与文档树的内容有关,还与外部因素有关,例如导航的历史( :visited 等),其内容的状态( 如 :checked 在某些表单元素 ),或鼠标的位置( 如 :hover,它可以让你知道鼠标是否在元素上)。

我们可以为一个元素编写多个伪类,为了方便对这些样式的测试,我们可以直接元素面板中触发这些样式。

示例

这是一个页面:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      font-size: 150px;
    }

    div:hover{
      color: red;
    }
    div:active{
      color: blue;
    }
    div:focus{
      color: brown;
    }
  </style>
</head>
<body>
  <div>hello world</div>
</body>
</html>

然后我们在浏览器中打开它,并通过元素面板调试它的伪类样式。

8.gif

隐藏元素的快捷方式

在调试 CSS 样式时,我们经常需要隐藏一个元素。如果我们选择元素并按下键盘上的 H 键,我们可以快速隐藏元素。

9.gif

这个操作是将visibility: hidden !important;样式添加到相应的元素。

将DOM元素存储在全局临时变量中

如果我们想在控制台中快速获得一个 DOM 元素引用,我们可以这样做:

  • 选择元素
  • 右击鼠标
  • 存储为全局变量

10.gif

查看原文

赞 59 收藏 36 评论 6

csdoker 关注了专栏 · 7月28日

全栈修炼

分享 大前端开发 相关知识,全栈程序员的成长之路,公众号【全栈修炼】。

关注 1014

csdoker 收藏了文章 · 7月28日

强烈推荐 GitHub 上值得前端学习的开源实战项目

clipboard.png

强烈推荐 GitHub 上值得前端学习的开源实战项目。

Vue.js

React.js

Angular

Node.js

最后

笔者博客首更地址 :https://github.com/biaochenxuying/blog

欢迎关注公众号: 全栈修炼,每周至少更新两篇高质量的文章,为你保驾护航 !

clipboard.png

查看原文

csdoker 赞了文章 · 7月28日

强烈推荐 GitHub 上值得前端学习的开源实战项目

clipboard.png

强烈推荐 GitHub 上值得前端学习的开源实战项目。

Vue.js

React.js

Angular

Node.js

最后

笔者博客首更地址 :https://github.com/biaochenxuying/blog

欢迎关注公众号: 全栈修炼,每周至少更新两篇高质量的文章,为你保驾护航 !

clipboard.png

查看原文

赞 290 收藏 223 评论 4

csdoker 收藏了文章 · 7月28日

github上值得关注的前端项目

http://microjs.com/#

该网站的资源都托管到了githubmicrojs.com是一个可以让你选择微型的js类库的网站,该网站里的js库都是压缩后不大于5KB的,非常实用

图片描述

https://plainjs.com/(10.22更新)

The Vanilla JavaScript Repository,该仓库都是用原生js写的插件和组件,很实用。里面的项目也都托管到了github

图片描述

综合/资源


  • front-end-collect 分享自己长期关注的前端开发相关的优秀网站、博客、以及活跃开发者。star:860



  • f2e-hub 包含Animation,UI,dialog,Carousels,color,image,workflow等。star:100



  • fks 前端技能汇总,包含前端知识架构,后端知识,linux,书籍推荐等。star:4000


  • node123node.js中文资料导航。star:1200



    • Front-end-tutorial 最全的资源教程-前端涉及的所有知识体系。(12.25更新)

    样式/UI/css

    • Semantic-UI 让你使用任何HTML标签 来表现UI控件。

    这是一款语义化设计的前端框架,为攻城师而制作的可复用的开源前端框架。star:17500

    图片描述

    • primerCSS风格指南。star:3600


    • glue 一个生成CSS sprites的简单的命令行工具。star:2.5K (7.19更新)


    • postcss 用js插件来对css进行转换,类似Sass的预编译器,但实现了模块化,并且更加强大。star:4.5K(7.31更新)



    • mui 轻量级css框架。star:1.5K(10.15更新)
    • img2css 将图片转为纯css的黑科技。star:1.5K(12.25更新)

    测试/工具

    • mocha 一个简单、灵活有趣的 JavaScript 测试框架,用于 Node.js 和浏览器上的 JavaScript 应用测试。 star:6680

    687474703a2f2f662e636c2e6c792f6974656d732f336c316b306e32413155334d3149314c323130702f53637265656e25323053686f74253230323031322d30322d32342532306174253230322e32312e3433253230504d2e706e67

    • csscss css代码冗余分析仪,用于分析冗余 。star:2800


    • es6-toolses6 工具集,包括Grunt Tasks,Gulp Plugins,Broccoli Plugins,Brunch Plugins,Webpack plugins等等。star:1860


    • async 一个工具模块,提供了直接而强大的 JavaScript 异步功能。虽然是为 Node.js 设计的,但是它也可以直接在浏览器中使用。star:13000


    • simditor 团队协作工具 Tower 使用的富文本编辑器。star:1300


    • HTMLHintHTML 静态代码分析工具,可以集成到IDE环境或编译系统中。star:900


    • jshintjs静态代码分析工具,可以帮你检测js语法错误和潜在的问题。star:5100


    • csslint 分析和优化你的CSS样式表的工具。由[Nicholas C.
      Zakas][30]所写。star:2700


    • protractor 一款端对端的angular apps 测试框架。star:4K


    • casperjs 一个基于PhantomJS的开源导航脚本和测试工具。star:4.8K


    • Karma 自动化完成单元测试,允许你在多个浏览器里执行js代码。让你的TDD变得简单,快速,有趣。star:5.3K


    • jasmine 是一个简易的JS单元测试框架, 用来测试Javascript代码。star:9.1K(6.28更新)


    • chai 一个针对 Node.js 和浏览器的TDD(测试驱动开发)/BDD(行为驱动开发)的断言框架,可与任何 JavaScript 测试框架集成。star:2K(6.29更新)


    • Qunit 一个很容易使用的js单元测试框架,该框架是由jQuery团队的成员所开发,并且是jQuery的官方测试套件。star:3.3K(6.29更新)

    Workflow/构建工具

    • Grunt 基于Node.js的项目构建工具。拥有数量庞大的插件,是一款优秀的前端自动化工具。star:9500


    • yeoman 一个强健的工具,库,及工作流程的组合。star:960


    • gulp 基于node.js流的新一代前端构建系统。star:14000


    • spmCMD 的包管理工具,需要和 Sea.js 配合使用。

    canvas/数据可视化

    • echarts 基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。star:6900


    • Chart.js 使用<canvas>标签的简易HTML5图表。star:14600


    • sketch.js 跨平台JavaScript创意编码框架,gzip压缩后仅有2kb。star:1500


    • d3 一个基于数据操作文档的js数据可视化框架,最流行的可视化库之一。star:38000


    • zrender 一个轻量级的Canvas类库,MVC封装,数据驱动,提供类DOM事件模型,让canvas绘图大不同!star:850


    • c3 一个基于 D3.js 的可重用 JavaScript 图表库。几乎零学习曲线。star:4.5K(6.28更新)


    • img2css 将图片转为纯css代码。(11.3更新)

    模块管理/加载器

    • ESL 是一个浏览器端、符合AMD的标准加载器,适合用于现代Web浏览器端应用的入口与模块管理。

    ESL vs RequireJS

    体积更小 (Smaller)
    性能更高 (Higher performance)
    更健壮 (More Robustness)
    不支持在非浏览器端使用 (Browser only)
    依赖模块用时定义 (Lazy define)
    
    • seajs 一个遵循CommonJS规范的JavaScript模块加载器。提供简单、极致的模块化开发体验。star:4100


    • Component 一个模块化的JavaScript框架,同时也是面向前端的包管理器。


    • webpack一个模块打包工具,你可以使用WebPack管理你的模块依赖,并编绎输出模块们所需的静态文件。star:9K

    动画

    • animate.css 一个跨浏览器的CSS动画库。简单易用易上手。star:23000


    • move.js 极小的 JavaScript 库,支持 CSS3 的动画效果,非常简单优雅。star:2600


    • TweenJS 是一个简单但强大的 Javascript 动画库。CreateJS 套件的一部分。star:1500


    • bounce.js 一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript
      库,使用其特有的方式生成的动画效果。star:3600


    • Swipe 号称最精确的Slider触摸库,专为移动设备优化。star:4.7K


    • tween.js 一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。star:2.5K(7.15更新)


    • parallax.js轻量级的的视差引擎,能对智能设备的方向作出反应。。star:9K (10.17更新)
    • Velocity 是一款和jQuery的$.animate()有相同API的动画引擎。很适合移动端的动画开发,还打包了颜色动画,转换,循环,easing效果,类动画、滚动等功能。star:9.5K(12月25更新)

    插件



    • onepage-scroll 可以轻松建立一个动感的响应式的滚动效果页面,比较适用于单页面的专题站。支持现代浏览器和IE8以上版本。View demostar:7700


    • slick 一款完全响应式的 jQuery 图片滚动插件,能够根据容器自动适应宽度。star:10000view demo


    • superslides 致力于解决网站大部分特效展示问题。网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决! view demostar:1100



    • slider 一个jquery完全开源的JavaScript代码库,用户可以开发,调试和深度定制自己的滑块。star:850view demo


    • github-hovercard github 鼠标悬停显示用户,仓库等摘要信息。(10.15更新)


    • onepage-scroll 一款带有背景视觉差效果的jQuery整页滚动特效插件。star:8K (10.17更新)view demo


    • justlazy.js 轻量级js图片延迟加载插件。(10.22更新)
  • 框架、库和组件

    • polymerweb组件构建框架。一套以“一切皆组件、最少化代码量、最少框架限制”为设计理念的Web UI框架。 star:9900


    • impress.js 创建令人兴奋的演示。使用CSS3的转换和过渡,这个库允许你创建令人印象深刻的演示文稿。view demostar:24300


    • ionic 先进的HTML5 移动端开发框架。帮助开发者使用HTML5, CSS3和js做出不可思议的hybrid appstar:17000


    • reveal.js 基于CSS3的3D幻灯片工具。能够制作绚丽的演示文稿并生成HTML格式,将它发布到web上。star:21500view demo


    • pure.css 一组很小的,响应式的css组件,你可以在网页的项目上到处使用。star:12000


    • three.jsJavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。star:20000



    • jquery-pjaxajaxpushState的封装,让你可以很方便的使用pushState技术,用以实现页面无刷新加载。star:11500


    • highlight.jsjavascript语法高亮。既可以运行在浏览器端也可以运行在服务端。star:5500



    • togetherjsMozilla打造的一款可以给网站添加实时协作功能的JavaScript库。star:5K



    • MEAN.JS 全栈式javascript,使用`MongoDB, Express,
      AngularJSNode.jsstar:2.2K`


    • wechat.js 微信相关的 js 操作:分享、网络、菜单。star:700



    • progress.js 一个 jsCSS3的库,帮助开发人员为网页上的每个对象创建和管理进度条效果。star:1.6Kview demo


    • foundation 号称世界上最先进的响应式前端框架,也是一款Mobile First的框架。star:21K


    • Sugar 一个JavaScript库。它扩展了现有的JS对象的方法,让你可以用更少的代码做更多的事情。star:2.8K


    • todomvc 帮你挑选一款MV*框架,它使用不同的最流行的js MV*框架实现了一个相同的Todo应用。star:13K


    • yepnope.js 这是一个异步的条件加载框架,速度超快,只为用户加载需要的脚本。使用非常简单,非常有用!star:2.5K


    • Material UI 是一个 CSS 框架和一组实现谷歌 Material Design 设计规范的 React
      组件。star:8.8K(6.28更新)


    • Pikaday 是一个 JavaScript 日期选择器,特点是轻量级、无依赖和模块化的
      CSSstar:2.8K [view demo]104

    图片描述

    • vuejs 用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API。star:6K(7.12更新)


    • meteor 超简单的,数据库无处不在的,用于自动化和简化实时运行的 Web 应用程序的开发。纯JavaScript的Web框架。star:27K(7.12更新)


    • webuploader
      一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。支持大文件分片并发上传,极大的提高了文件上传效率。star:1.8K


    • fastclick触摸UI上的消除点击延迟js库。star:1W(10.15更新)


    • wangEditor 轻量级web富文本框。 (10.15更新)


    • benchmark.js是强大的基准测试库,几乎适用于所有JavaScript平台。支持high-resolution定时器,并返回重要的统计结果。star:1.7k(10.15更新)


    • headroom.js是一个轻量级、纯 JS 组件,用来隐藏或展现页面上的元素,为你的页面留下更多展示内容的空间。star:7.5K (10.15更新)


    移动端

    • Swipe 加速移动触摸滑块与硬件之间的转换。star:5000


    • hammer.js 一个支持多点触摸的手势库。star:11000


    • amDoc 无线Web解决方案 - 文档规范指南


    • amazeui 移动优先的跨屏前端框架。面向HTML5开发,使用css3做动画和交互。star:4.1K


    • Zepto 一款面向移动端设备、APIjQuery兼容的基础库。


    • mui 最接近原生APP体验的高性能框架 。star:1.1K(6.28更新)


    • Swiperjavascript打造的滑动特效插件,面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。star:6K(10月18更新)


    • SUI-Mobile由阿里巴巴国际UED前端出品的移动端UI库,轻量精美 star:2K(2016.1.14更新)


    • lib-flexible 淘宝出品的移动端可伸缩布局方案。star:1.3K+(2016.1.14更新)

    Node.js相关

    http://nodeframework.com/ 专门收集node.jsweb框架的网站。其项目同样均托管在github上。
    图片描述

    • nodeclub 使用 Node.jsMongoDB 开发的社区系统。star:3000


    • N-chat 使用 Express + Socket.IO 搭建的多人聊天室 。star:300


    • N-blog 使用 Express + MongoDB 搭建多人博客。star:1800


    • node-inspector 基于Blink开发者工具的Node.js调试器。star:7000



    • nodePPT 使用nodejs写的网络幻灯片。可能是迄今为止最好的网页版PPTstar:1.6Kview demo


    • hexo 一款快捷,简单,强大的博客框架,基于Nodejsstar:5.2K


    • koa 下一代Node.js Web 框架。由 Express 团队设计。star:6.3K



    • connectNode平台的中间件框架。Express就是基于Connect开发的。star:5.6K(6.29更新)


    • n node版本管理,tj大神所写。star:2.7K


    • nvm node版本管理,通过bash脚本来管理。star:7.5K
    • nodemon这个库是专门调试时候使用的,它会自动检测 node.js 代码的改动,然后帮你自动重启应用。star:7K+。(2.24.16)
    • supertestAPI使用流利的API测试node.js http 服务器。3.1K+

    React相关



    • react-native 一个用React构建native apps的框架。star:15000



    • awesome-react 关于react的工具,资源,视频的集合。star:700


    • Flux 是一个Facebook开发的、利用单向数据流实现的应用架构,用于
      ReactFlux应用有三个主要的部分组成:调度程序、存储和视图(React 组件)。star:6.8K(6.28更新)
    • iscroll 高性能,体积小,无外部依赖,跨平台的滚动组件 star:6K(7.19更新)
    • react-tappable Tappable component for React.(2016,1.4更新)
    • react-native-lessonreact-native入门指南.star:1.3K(2016,1.4更新)

    HTML5

    • html5-boilerplate 一套专业的前端模版,主要用于开发快速、健壮、适应性强的app或网站。star:27K (12.25更新)
    • BrowserquestMozilla开发的HTML5多人在线游戏。star:5200
    • video.js 开源的HTML5和Flash视频播放器。支持自定义进度条、按钮以及工具栏的底色。star:9.1K


    • html5shiv 主要解决HTML5提出的新的元素不被IE6-9识别。star:6K(7.15更新)


    • brunch 快速的前端 HTML5 构建工具。star:4.5K(7.19更新)


    • ulkit 一个轻量级的、模块化前端框架,它被用于快速开发强大的web界面。也是一款优秀的响应式HTML5 框架。star:5.3K (8.3更新)

    模板引擎

    • Handlebars.js 一个js语义模板库,能让你轻松高效的编写语义化模板。star:8.6K(6.29 update)


    • artTemplate 性能卓越的 js 模板引擎。star:1.7K


    • jade 一款高性能简洁易懂的模板引擎,JadeHamlJavascript实现。star:8.7K
    • ejs tj大神写的嵌入javascript的模板引擎,主要用于Node

    浏览器兼容方案

    • es6-shim 提供兼容性垫片,使ES6能兼容于传统的JavaScript引擎。star:1.5K(7.15更新)


    • Modernizr 用来检测浏览器功能支持情况的JavaScript库,可以检测18项CSS3功能以及40多项关于HTML5的功能。star:16000


    • normalize.css 一个可定制的 CSS 文件,使浏览器呈现的所有元素,更一致和符合现代标准。支持IE8+。star:17000


    • html5shiv 主要解决HTML5提出的新的元素不被IE6-9识别。star:6K(7.15更新)



    • Babel 是一款为了写下一代js的编译器,无需等待浏览器支持就可以使用新的语法。star:8.3K (7.29更新)

    高产大牛

    • Evan You 前端轻量级框架MVVM框架vue.js作者,前Google工程师。followers:1.6K


    • TJ Holowaychuk Luna 编程语言, Koa, Express, Stylus, Cluster, Mocha, Jade, node-canvas, component 等知名开源项目的创建和贡献者。 followers:14.1K


    • PaulIrish 著名的前端开发工程师,同时他也是Chrome开发者关系团队成员,jQuery团队成员,Modernizr、Yeoman、CSS3 PleaseHTML5 Boilerplatelead developerfollowers:15.7K


    • Mike Bostock 知名可视化库 D3.js的主要作者。followers:8.3K



    • 司徒正美 前端迷你MVVM框架Avalon作者。followers:2.1K

    其他


    • Mars 腾讯移动Web前端知识库。star:1600


    • brackets 一款使用 HTML,CSS,JavaScript 创建的开源的针对 Web 开发的编辑器。star:23000


    • GhostNode.js开发最新博客系统, 简单简洁, 响应式设计, 支持完全自定义, 免费, 专注博客。star:16000


    • io.jsNodeJS里分离出来的一条分支。star:13000



    • ueditor 百度前端团队出品的富本文编辑器。star:1.1K

    优秀开源组织

    PS:文章在github更新,本篇文章停止更新

    查看原文

    csdoker 收藏了文章 · 7月28日

    github上值得关注的前端项目

    http://microjs.com/#

    该网站的资源都托管到了githubmicrojs.com是一个可以让你选择微型的js类库的网站,该网站里的js库都是压缩后不大于5KB的,非常实用

    图片描述

    https://plainjs.com/(10.22更新)

    The Vanilla JavaScript Repository,该仓库都是用原生js写的插件和组件,很实用。里面的项目也都托管到了github

    图片描述

    综合/资源


    • front-end-collect 分享自己长期关注的前端开发相关的优秀网站、博客、以及活跃开发者。star:860



    • f2e-hub 包含Animation,UI,dialog,Carousels,color,image,workflow等。star:100



    • fks 前端技能汇总,包含前端知识架构,后端知识,linux,书籍推荐等。star:4000


    • node123node.js中文资料导航。star:1200



    • Front-end-tutorial 最全的资源教程-前端涉及的所有知识体系。(12.25更新)

    样式/UI/css

    • Semantic-UI 让你使用任何HTML标签 来表现UI控件。

    这是一款语义化设计的前端框架,为攻城师而制作的可复用的开源前端框架。star:17500

    图片描述

    • primerCSS风格指南。star:3600


    • glue 一个生成CSS sprites的简单的命令行工具。star:2.5K (7.19更新)


    • postcss 用js插件来对css进行转换,类似Sass的预编译器,但实现了模块化,并且更加强大。star:4.5K(7.31更新)



    • mui 轻量级css框架。star:1.5K(10.15更新)
    • img2css 将图片转为纯css的黑科技。star:1.5K(12.25更新)

    测试/工具

    • mocha 一个简单、灵活有趣的 JavaScript 测试框架,用于 Node.js 和浏览器上的 JavaScript 应用测试。 star:6680

    687474703a2f2f662e636c2e6c792f6974656d732f336c316b306e32413155334d3149314c323130702f53637265656e25323053686f74253230323031322d30322d32342532306174253230322e32312e3433253230504d2e706e67

    • csscss css代码冗余分析仪,用于分析冗余 。star:2800


    • es6-toolses6 工具集,包括Grunt Tasks,Gulp Plugins,Broccoli Plugins,Brunch Plugins,Webpack plugins等等。star:1860


    • async 一个工具模块,提供了直接而强大的 JavaScript 异步功能。虽然是为 Node.js 设计的,但是它也可以直接在浏览器中使用。star:13000


    • simditor 团队协作工具 Tower 使用的富文本编辑器。star:1300


    • HTMLHintHTML 静态代码分析工具,可以集成到IDE环境或编译系统中。star:900


    • jshintjs静态代码分析工具,可以帮你检测js语法错误和潜在的问题。star:5100


    • csslint 分析和优化你的CSS样式表的工具。由[Nicholas C.
      Zakas][30]所写。star:2700


    • protractor 一款端对端的angular apps 测试框架。star:4K


    • casperjs 一个基于PhantomJS的开源导航脚本和测试工具。star:4.8K


    • Karma 自动化完成单元测试,允许你在多个浏览器里执行js代码。让你的TDD变得简单,快速,有趣。star:5.3K


    • jasmine 是一个简易的JS单元测试框架, 用来测试Javascript代码。star:9.1K(6.28更新)


    • chai 一个针对 Node.js 和浏览器的TDD(测试驱动开发)/BDD(行为驱动开发)的断言框架,可与任何 JavaScript 测试框架集成。star:2K(6.29更新)


    • Qunit 一个很容易使用的js单元测试框架,该框架是由jQuery团队的成员所开发,并且是jQuery的官方测试套件。star:3.3K(6.29更新)

    Workflow/构建工具

    • Grunt 基于Node.js的项目构建工具。拥有数量庞大的插件,是一款优秀的前端自动化工具。star:9500


    • yeoman 一个强健的工具,库,及工作流程的组合。star:960


    • gulp 基于node.js流的新一代前端构建系统。star:14000


    • spmCMD 的包管理工具,需要和 Sea.js 配合使用。

    canvas/数据可视化

    • echarts 基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。star:6900


    • Chart.js 使用<canvas>标签的简易HTML5图表。star:14600


    • sketch.js 跨平台JavaScript创意编码框架,gzip压缩后仅有2kb。star:1500


    • d3 一个基于数据操作文档的js数据可视化框架,最流行的可视化库之一。star:38000


    • zrender 一个轻量级的Canvas类库,MVC封装,数据驱动,提供类DOM事件模型,让canvas绘图大不同!star:850


    • c3 一个基于 D3.js 的可重用 JavaScript 图表库。几乎零学习曲线。star:4.5K(6.28更新)


    • img2css 将图片转为纯css代码。(11.3更新)

    模块管理/加载器

    • ESL 是一个浏览器端、符合AMD的标准加载器,适合用于现代Web浏览器端应用的入口与模块管理。

    ESL vs RequireJS

    体积更小 (Smaller)
    性能更高 (Higher performance)
    更健壮 (More Robustness)
    不支持在非浏览器端使用 (Browser only)
    依赖模块用时定义 (Lazy define)
    
    • seajs 一个遵循CommonJS规范的JavaScript模块加载器。提供简单、极致的模块化开发体验。star:4100


    • Component 一个模块化的JavaScript框架,同时也是面向前端的包管理器。


    • webpack一个模块打包工具,你可以使用WebPack管理你的模块依赖,并编绎输出模块们所需的静态文件。star:9K

    动画

    • animate.css 一个跨浏览器的CSS动画库。简单易用易上手。star:23000


    • move.js 极小的 JavaScript 库,支持 CSS3 的动画效果,非常简单优雅。star:2600


    • TweenJS 是一个简单但强大的 Javascript 动画库。CreateJS 套件的一部分。star:1500


    • bounce.js 一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript
      库,使用其特有的方式生成的动画效果。star:3600


    • Swipe 号称最精确的Slider触摸库,专为移动设备优化。star:4.7K


    • tween.js 一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。star:2.5K(7.15更新)


    • parallax.js轻量级的的视差引擎,能对智能设备的方向作出反应。。star:9K (10.17更新)
    • Velocity 是一款和jQuery的$.animate()有相同API的动画引擎。很适合移动端的动画开发,还打包了颜色动画,转换,循环,easing效果,类动画、滚动等功能。star:9.5K(12月25更新)

    插件



    • onepage-scroll 可以轻松建立一个动感的响应式的滚动效果页面,比较适用于单页面的专题站。支持现代浏览器和IE8以上版本。View demostar:7700


    • slick 一款完全响应式的 jQuery 图片滚动插件,能够根据容器自动适应宽度。star:10000view demo


    • superslides 致力于解决网站大部分特效展示问题。网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决! view demostar:1100



    • slider 一个jquery完全开源的JavaScript代码库,用户可以开发,调试和深度定制自己的滑块。star:850view demo


    • github-hovercard github 鼠标悬停显示用户,仓库等摘要信息。(10.15更新)


    • onepage-scroll 一款带有背景视觉差效果的jQuery整页滚动特效插件。star:8K (10.17更新)view demo


    • justlazy.js 轻量级js图片延迟加载插件。(10.22更新)
  • 框架、库和组件

    • polymerweb组件构建框架。一套以“一切皆组件、最少化代码量、最少框架限制”为设计理念的Web UI框架。 star:9900


    • impress.js 创建令人兴奋的演示。使用CSS3的转换和过渡,这个库允许你创建令人印象深刻的演示文稿。view demostar:24300


    • ionic 先进的HTML5 移动端开发框架。帮助开发者使用HTML5, CSS3和js做出不可思议的hybrid appstar:17000


    • reveal.js 基于CSS3的3D幻灯片工具。能够制作绚丽的演示文稿并生成HTML格式,将它发布到web上。star:21500view demo


    • pure.css 一组很小的,响应式的css组件,你可以在网页的项目上到处使用。star:12000


    • three.jsJavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。star:20000



    • jquery-pjaxajaxpushState的封装,让你可以很方便的使用pushState技术,用以实现页面无刷新加载。star:11500


    • highlight.jsjavascript语法高亮。既可以运行在浏览器端也可以运行在服务端。star:5500



    • togetherjsMozilla打造的一款可以给网站添加实时协作功能的JavaScript库。star:5K



    • MEAN.JS 全栈式javascript,使用`MongoDB, Express,
      AngularJSNode.jsstar:2.2K`


    • wechat.js 微信相关的 js 操作:分享、网络、菜单。star:700



    • progress.js 一个 jsCSS3的库,帮助开发人员为网页上的每个对象创建和管理进度条效果。star:1.6Kview demo


    • foundation 号称世界上最先进的响应式前端框架,也是一款Mobile First的框架。star:21K


    • Sugar 一个JavaScript库。它扩展了现有的JS对象的方法,让你可以用更少的代码做更多的事情。star:2.8K


    • todomvc 帮你挑选一款MV*框架,它使用不同的最流行的js MV*框架实现了一个相同的Todo应用。star:13K


    • yepnope.js 这是一个异步的条件加载框架,速度超快,只为用户加载需要的脚本。使用非常简单,非常有用!star:2.5K


    • Material UI 是一个 CSS 框架和一组实现谷歌 Material Design 设计规范的 React
      组件。star:8.8K(6.28更新)


    • Pikaday 是一个 JavaScript 日期选择器,特点是轻量级、无依赖和模块化的
      CSSstar:2.8K [view demo]104

    图片描述

    • vuejs 用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API。star:6K(7.12更新)


    • meteor 超简单的,数据库无处不在的,用于自动化和简化实时运行的 Web 应用程序的开发。纯JavaScript的Web框架。star:27K(7.12更新)


    • webuploader
      一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。支持大文件分片并发上传,极大的提高了文件上传效率。star:1.8K


    • fastclick触摸UI上的消除点击延迟js库。star:1W(10.15更新)


    • wangEditor 轻量级web富文本框。 (10.15更新)


    • benchmark.js是强大的基准测试库,几乎适用于所有JavaScript平台。支持high-resolution定时器,并返回重要的统计结果。star:1.7k(10.15更新)


    • headroom.js是一个轻量级、纯 JS 组件,用来隐藏或展现页面上的元素,为你的页面留下更多展示内容的空间。star:7.5K (10.15更新)


    移动端

    • Swipe 加速移动触摸滑块与硬件之间的转换。star:5000


    • hammer.js 一个支持多点触摸的手势库。star:11000


    • amDoc 无线Web解决方案 - 文档规范指南


    • amazeui 移动优先的跨屏前端框架。面向HTML5开发,使用css3做动画和交互。star:4.1K


    • Zepto 一款面向移动端设备、APIjQuery兼容的基础库。


    • mui 最接近原生APP体验的高性能框架 。star:1.1K(6.28更新)


    • Swiperjavascript打造的滑动特效插件,面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。star:6K(10月18更新)


    • SUI-Mobile由阿里巴巴国际UED前端出品的移动端UI库,轻量精美 star:2K(2016.1.14更新)


    • lib-flexible 淘宝出品的移动端可伸缩布局方案。star:1.3K+(2016.1.14更新)

    Node.js相关

    http://nodeframework.com/ 专门收集node.jsweb框架的网站。其项目同样均托管在github上。
    图片描述

    • nodeclub 使用 Node.jsMongoDB 开发的社区系统。star:3000


    • N-chat 使用 Express + Socket.IO 搭建的多人聊天室 。star:300


    • N-blog 使用 Express + MongoDB 搭建多人博客。star:1800


    • node-inspector 基于Blink开发者工具的Node.js调试器。star:7000



    • nodePPT 使用nodejs写的网络幻灯片。可能是迄今为止最好的网页版PPTstar:1.6Kview demo


    • hexo 一款快捷,简单,强大的博客框架,基于Nodejsstar:5.2K


    • koa 下一代Node.js Web 框架。由 Express 团队设计。star:6.3K



    • connectNode平台的中间件框架。Express就是基于Connect开发的。star:5.6K(6.29更新)


    • n node版本管理,tj大神所写。star:2.7K


    • nvm node版本管理,通过bash脚本来管理。star:7.5K
    • nodemon这个库是专门调试时候使用的,它会自动检测 node.js 代码的改动,然后帮你自动重启应用。star:7K+。(2.24.16)
    • supertestAPI使用流利的API测试node.js http 服务器。3.1K+

    React相关



    • react-native 一个用React构建native apps的框架。star:15000



    • awesome-react 关于react的工具,资源,视频的集合。star:700


    • Flux 是一个Facebook开发的、利用单向数据流实现的应用架构,用于
      ReactFlux应用有三个主要的部分组成:调度程序、存储和视图(React 组件)。star:6.8K(6.28更新)
    • iscroll 高性能,体积小,无外部依赖,跨平台的滚动组件 star:6K(7.19更新)
    • react-tappable Tappable component for React.(2016,1.4更新)
    • react-native-lessonreact-native入门指南.star:1.3K(2016,1.4更新)

    HTML5

    • html5-boilerplate 一套专业的前端模版,主要用于开发快速、健壮、适应性强的app或网站。star:27K (12.25更新)
    • BrowserquestMozilla开发的HTML5多人在线游戏。star:5200
    • video.js 开源的HTML5和Flash视频播放器。支持自定义进度条、按钮以及工具栏的底色。star:9.1K


    • html5shiv 主要解决HTML5提出的新的元素不被IE6-9识别。star:6K(7.15更新)


    • brunch 快速的前端 HTML5 构建工具。star:4.5K(7.19更新)


    • ulkit 一个轻量级的、模块化前端框架,它被用于快速开发强大的web界面。也是一款优秀的响应式HTML5 框架。star:5.3K (8.3更新)

    模板引擎

    • Handlebars.js 一个js语义模板库,能让你轻松高效的编写语义化模板。star:8.6K(6.29 update)


    • artTemplate 性能卓越的 js 模板引擎。star:1.7K


    • jade 一款高性能简洁易懂的模板引擎,JadeHamlJavascript实现。star:8.7K
    • ejs tj大神写的嵌入javascript的模板引擎,主要用于Node

    浏览器兼容方案

    • es6-shim 提供兼容性垫片,使ES6能兼容于传统的JavaScript引擎。star:1.5K(7.15更新)


    • Modernizr 用来检测浏览器功能支持情况的JavaScript库,可以检测18项CSS3功能以及40多项关于HTML5的功能。star:16000


    • normalize.css 一个可定制的 CSS 文件,使浏览器呈现的所有元素,更一致和符合现代标准。支持IE8+。star:17000


    • html5shiv 主要解决HTML5提出的新的元素不被IE6-9识别。star:6K(7.15更新)



    • Babel 是一款为了写下一代js的编译器,无需等待浏览器支持就可以使用新的语法。star:8.3K (7.29更新)

    高产大牛

    • Evan You 前端轻量级框架MVVM框架vue.js作者,前Google工程师。followers:1.6K


    • TJ Holowaychuk Luna 编程语言, Koa, Express, Stylus, Cluster, Mocha, Jade, node-canvas, component 等知名开源项目的创建和贡献者。 followers:14.1K


    • PaulIrish 著名的前端开发工程师,同时他也是Chrome开发者关系团队成员,jQuery团队成员,Modernizr、Yeoman、CSS3 PleaseHTML5 Boilerplatelead developerfollowers:15.7K


    • Mike Bostock 知名可视化库 D3.js的主要作者。followers:8.3K



    • 司徒正美 前端迷你MVVM框架Avalon作者。followers:2.1K

    其他


    • Mars 腾讯移动Web前端知识库。star:1600


    • brackets 一款使用 HTML,CSS,JavaScript 创建的开源的针对 Web 开发的编辑器。star:23000


    • GhostNode.js开发最新博客系统, 简单简洁, 响应式设计, 支持完全自定义, 免费, 专注博客。star:16000


    • io.jsNodeJS里分离出来的一条分支。star:13000



    • ueditor 百度前端团队出品的富本文编辑器。star:1.1K

    优秀开源组织

    PS:文章在github更新,本篇文章停止更新

    查看原文

    csdoker 收藏了文章 · 7月28日

    github上值得关注的前端项目

    http://microjs.com/#

    该网站的资源都托管到了githubmicrojs.com是一个可以让你选择微型的js类库的网站,该网站里的js库都是压缩后不大于5KB的,非常实用

    图片描述

    https://plainjs.com/(10.22更新)

    The Vanilla JavaScript Repository,该仓库都是用原生js写的插件和组件,很实用。里面的项目也都托管到了github

    图片描述

    综合/资源


    • front-end-collect 分享自己长期关注的前端开发相关的优秀网站、博客、以及活跃开发者。star:860



    • f2e-hub 包含Animation,UI,dialog,Carousels,color,image,workflow等。star:100



    • fks 前端技能汇总,包含前端知识架构,后端知识,linux,书籍推荐等。star:4000


    • node123node.js中文资料导航。star:1200



    • Front-end-tutorial 最全的资源教程-前端涉及的所有知识体系。(12.25更新)

    样式/UI/css

    • Semantic-UI 让你使用任何HTML标签 来表现UI控件。

    这是一款语义化设计的前端框架,为攻城师而制作的可复用的开源前端框架。star:17500

    图片描述

    • primerCSS风格指南。star:3600


    • glue 一个生成CSS sprites的简单的命令行工具。star:2.5K (7.19更新)


    • postcss 用js插件来对css进行转换,类似Sass的预编译器,但实现了模块化,并且更加强大。star:4.5K(7.31更新)



    • mui 轻量级css框架。star:1.5K(10.15更新)
    • img2css 将图片转为纯css的黑科技。star:1.5K(12.25更新)

    测试/工具

    • mocha 一个简单、灵活有趣的 JavaScript 测试框架,用于 Node.js 和浏览器上的 JavaScript 应用测试。 star:6680

    687474703a2f2f662e636c2e6c792f6974656d732f336c316b306e32413155334d3149314c323130702f53637265656e25323053686f74253230323031322d30322d32342532306174253230322e32312e3433253230504d2e706e67

    • csscss css代码冗余分析仪,用于分析冗余 。star:2800


    • es6-toolses6 工具集,包括Grunt Tasks,Gulp Plugins,Broccoli Plugins,Brunch Plugins,Webpack plugins等等。star:1860


    • async 一个工具模块,提供了直接而强大的 JavaScript 异步功能。虽然是为 Node.js 设计的,但是它也可以直接在浏览器中使用。star:13000


    • simditor 团队协作工具 Tower 使用的富文本编辑器。star:1300


    • HTMLHintHTML 静态代码分析工具,可以集成到IDE环境或编译系统中。star:900


    • jshintjs静态代码分析工具,可以帮你检测js语法错误和潜在的问题。star:5100


    • csslint 分析和优化你的CSS样式表的工具。由[Nicholas C.
      Zakas][30]所写。star:2700


    • protractor 一款端对端的angular apps 测试框架。star:4K


    • casperjs 一个基于PhantomJS的开源导航脚本和测试工具。star:4.8K


    • Karma 自动化完成单元测试,允许你在多个浏览器里执行js代码。让你的TDD变得简单,快速,有趣。star:5.3K


    • jasmine 是一个简易的JS单元测试框架, 用来测试Javascript代码。star:9.1K(6.28更新)


    • chai 一个针对 Node.js 和浏览器的TDD(测试驱动开发)/BDD(行为驱动开发)的断言框架,可与任何 JavaScript 测试框架集成。star:2K(6.29更新)


    • Qunit 一个很容易使用的js单元测试框架,该框架是由jQuery团队的成员所开发,并且是jQuery的官方测试套件。star:3.3K(6.29更新)

    Workflow/构建工具

    • Grunt 基于Node.js的项目构建工具。拥有数量庞大的插件,是一款优秀的前端自动化工具。star:9500


    • yeoman 一个强健的工具,库,及工作流程的组合。star:960


    • gulp 基于node.js流的新一代前端构建系统。star:14000


    • spmCMD 的包管理工具,需要和 Sea.js 配合使用。

    canvas/数据可视化

    • echarts 基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。star:6900


    • Chart.js 使用<canvas>标签的简易HTML5图表。star:14600


    • sketch.js 跨平台JavaScript创意编码框架,gzip压缩后仅有2kb。star:1500


    • d3 一个基于数据操作文档的js数据可视化框架,最流行的可视化库之一。star:38000


    • zrender 一个轻量级的Canvas类库,MVC封装,数据驱动,提供类DOM事件模型,让canvas绘图大不同!star:850


    • c3 一个基于 D3.js 的可重用 JavaScript 图表库。几乎零学习曲线。star:4.5K(6.28更新)


    • img2css 将图片转为纯css代码。(11.3更新)

    模块管理/加载器

    • ESL 是一个浏览器端、符合AMD的标准加载器,适合用于现代Web浏览器端应用的入口与模块管理。

    ESL vs RequireJS

    体积更小 (Smaller)
    性能更高 (Higher performance)
    更健壮 (More Robustness)
    不支持在非浏览器端使用 (Browser only)
    依赖模块用时定义 (Lazy define)
    
    • seajs 一个遵循CommonJS规范的JavaScript模块加载器。提供简单、极致的模块化开发体验。star:4100


    • Component 一个模块化的JavaScript框架,同时也是面向前端的包管理器。


    • webpack一个模块打包工具,你可以使用WebPack管理你的模块依赖,并编绎输出模块们所需的静态文件。star:9K

    动画

    • animate.css 一个跨浏览器的CSS动画库。简单易用易上手。star:23000


    • move.js 极小的 JavaScript 库,支持 CSS3 的动画效果,非常简单优雅。star:2600


    • TweenJS 是一个简单但强大的 Javascript 动画库。CreateJS 套件的一部分。star:1500


    • bounce.js 一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript
      库,使用其特有的方式生成的动画效果。star:3600


    • Swipe 号称最精确的Slider触摸库,专为移动设备优化。star:4.7K


    • tween.js 一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。star:2.5K(7.15更新)


    • parallax.js轻量级的的视差引擎,能对智能设备的方向作出反应。。star:9K (10.17更新)
    • Velocity 是一款和jQuery的$.animate()有相同API的动画引擎。很适合移动端的动画开发,还打包了颜色动画,转换,循环,easing效果,类动画、滚动等功能。star:9.5K(12月25更新)

    插件



    • onepage-scroll 可以轻松建立一个动感的响应式的滚动效果页面,比较适用于单页面的专题站。支持现代浏览器和IE8以上版本。View demostar:7700


    • slick 一款完全响应式的 jQuery 图片滚动插件,能够根据容器自动适应宽度。star:10000view demo


    • superslides 致力于解决网站大部分特效展示问题。网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决! view demostar:1100



    • slider 一个jquery完全开源的JavaScript代码库,用户可以开发,调试和深度定制自己的滑块。star:850view demo


    • github-hovercard github 鼠标悬停显示用户,仓库等摘要信息。(10.15更新)


    • onepage-scroll 一款带有背景视觉差效果的jQuery整页滚动特效插件。star:8K (10.17更新)view demo


    • justlazy.js 轻量级js图片延迟加载插件。(10.22更新)
  • 框架、库和组件

    • polymerweb组件构建框架。一套以“一切皆组件、最少化代码量、最少框架限制”为设计理念的Web UI框架。 star:9900


    • impress.js 创建令人兴奋的演示。使用CSS3的转换和过渡,这个库允许你创建令人印象深刻的演示文稿。view demostar:24300


    • ionic 先进的HTML5 移动端开发框架。帮助开发者使用HTML5, CSS3和js做出不可思议的hybrid appstar:17000


    • reveal.js 基于CSS3的3D幻灯片工具。能够制作绚丽的演示文稿并生成HTML格式,将它发布到web上。star:21500view demo


    • pure.css 一组很小的,响应式的css组件,你可以在网页的项目上到处使用。star:12000


    • three.jsJavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。star:20000



    • jquery-pjaxajaxpushState的封装,让你可以很方便的使用pushState技术,用以实现页面无刷新加载。star:11500


    • highlight.jsjavascript语法高亮。既可以运行在浏览器端也可以运行在服务端。star:5500



    • togetherjsMozilla打造的一款可以给网站添加实时协作功能的JavaScript库。star:5K



    • MEAN.JS 全栈式javascript,使用`MongoDB, Express,
      AngularJSNode.jsstar:2.2K`


    • wechat.js 微信相关的 js 操作:分享、网络、菜单。star:700



    • progress.js 一个 jsCSS3的库,帮助开发人员为网页上的每个对象创建和管理进度条效果。star:1.6Kview demo


    • foundation 号称世界上最先进的响应式前端框架,也是一款Mobile First的框架。star:21K


    • Sugar 一个JavaScript库。它扩展了现有的JS对象的方法,让你可以用更少的代码做更多的事情。star:2.8K


    • todomvc 帮你挑选一款MV*框架,它使用不同的最流行的js MV*框架实现了一个相同的Todo应用。star:13K


    • yepnope.js 这是一个异步的条件加载框架,速度超快,只为用户加载需要的脚本。使用非常简单,非常有用!star:2.5K


    • Material UI 是一个 CSS 框架和一组实现谷歌 Material Design 设计规范的 React
      组件。star:8.8K(6.28更新)


    • Pikaday 是一个 JavaScript 日期选择器,特点是轻量级、无依赖和模块化的
      CSSstar:2.8K [view demo]104

    图片描述

    • vuejs 用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API。star:6K(7.12更新)


    • meteor 超简单的,数据库无处不在的,用于自动化和简化实时运行的 Web 应用程序的开发。纯JavaScript的Web框架。star:27K(7.12更新)


    • webuploader
      一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。支持大文件分片并发上传,极大的提高了文件上传效率。star:1.8K


    • fastclick触摸UI上的消除点击延迟js库。star:1W(10.15更新)


    • wangEditor 轻量级web富文本框。 (10.15更新)


    • benchmark.js是强大的基准测试库,几乎适用于所有JavaScript平台。支持high-resolution定时器,并返回重要的统计结果。star:1.7k(10.15更新)


    • headroom.js是一个轻量级、纯 JS 组件,用来隐藏或展现页面上的元素,为你的页面留下更多展示内容的空间。star:7.5K (10.15更新)


    移动端

    • Swipe 加速移动触摸滑块与硬件之间的转换。star:5000


    • hammer.js 一个支持多点触摸的手势库。star:11000


    • amDoc 无线Web解决方案 - 文档规范指南


    • amazeui 移动优先的跨屏前端框架。面向HTML5开发,使用css3做动画和交互。star:4.1K


    • Zepto 一款面向移动端设备、APIjQuery兼容的基础库。


    • mui 最接近原生APP体验的高性能框架 。star:1.1K(6.28更新)


    • Swiperjavascript打造的滑动特效插件,面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。star:6K(10月18更新)


    • SUI-Mobile由阿里巴巴国际UED前端出品的移动端UI库,轻量精美 star:2K(2016.1.14更新)


    • lib-flexible 淘宝出品的移动端可伸缩布局方案。star:1.3K+(2016.1.14更新)

    Node.js相关

    http://nodeframework.com/ 专门收集node.jsweb框架的网站。其项目同样均托管在github上。
    图片描述

    • nodeclub 使用 Node.jsMongoDB 开发的社区系统。star:3000


    • N-chat 使用 Express + Socket.IO 搭建的多人聊天室 。star:300


    • N-blog 使用 Express + MongoDB 搭建多人博客。star:1800


    • node-inspector 基于Blink开发者工具的Node.js调试器。star:7000



    • nodePPT 使用nodejs写的网络幻灯片。可能是迄今为止最好的网页版PPTstar:1.6Kview demo


    • hexo 一款快捷,简单,强大的博客框架,基于Nodejsstar:5.2K


    • koa 下一代Node.js Web 框架。由 Express 团队设计。star:6.3K



    • connectNode平台的中间件框架。Express就是基于Connect开发的。star:5.6K(6.29更新)


    • n node版本管理,tj大神所写。star:2.7K


    • nvm node版本管理,通过bash脚本来管理。star:7.5K
    • nodemon这个库是专门调试时候使用的,它会自动检测 node.js 代码的改动,然后帮你自动重启应用。star:7K+。(2.24.16)
    • supertestAPI使用流利的API测试node.js http 服务器。3.1K+

    React相关



    • react-native 一个用React构建native apps的框架。star:15000



    • awesome-react 关于react的工具,资源,视频的集合。star:700


    • Flux 是一个Facebook开发的、利用单向数据流实现的应用架构,用于
      ReactFlux应用有三个主要的部分组成:调度程序、存储和视图(React 组件)。star:6.8K(6.28更新)
    • iscroll 高性能,体积小,无外部依赖,跨平台的滚动组件 star:6K(7.19更新)
    • react-tappable Tappable component for React.(2016,1.4更新)
    • react-native-lessonreact-native入门指南.star:1.3K(2016,1.4更新)

    HTML5

    • html5-boilerplate 一套专业的前端模版,主要用于开发快速、健壮、适应性强的app或网站。star:27K (12.25更新)
    • BrowserquestMozilla开发的HTML5多人在线游戏。star:5200
    • video.js 开源的HTML5和Flash视频播放器。支持自定义进度条、按钮以及工具栏的底色。star:9.1K


    • html5shiv 主要解决HTML5提出的新的元素不被IE6-9识别。star:6K(7.15更新)


    • brunch 快速的前端 HTML5 构建工具。star:4.5K(7.19更新)


    • ulkit 一个轻量级的、模块化前端框架,它被用于快速开发强大的web界面。也是一款优秀的响应式HTML5 框架。star:5.3K (8.3更新)

    模板引擎

    • Handlebars.js 一个js语义模板库,能让你轻松高效的编写语义化模板。star:8.6K(6.29 update)


    • artTemplate 性能卓越的 js 模板引擎。star:1.7K


    • jade 一款高性能简洁易懂的模板引擎,JadeHamlJavascript实现。star:8.7K
    • ejs tj大神写的嵌入javascript的模板引擎,主要用于Node

    浏览器兼容方案

    • es6-shim 提供兼容性垫片,使ES6能兼容于传统的JavaScript引擎。star:1.5K(7.15更新)


    • Modernizr 用来检测浏览器功能支持情况的JavaScript库,可以检测18项CSS3功能以及40多项关于HTML5的功能。star:16000


    • normalize.css 一个可定制的 CSS 文件,使浏览器呈现的所有元素,更一致和符合现代标准。支持IE8+。star:17000


    • html5shiv 主要解决HTML5提出的新的元素不被IE6-9识别。star:6K(7.15更新)



    • Babel 是一款为了写下一代js的编译器,无需等待浏览器支持就可以使用新的语法。star:8.3K (7.29更新)

    高产大牛

    • Evan You 前端轻量级框架MVVM框架vue.js作者,前Google工程师。followers:1.6K


    • TJ Holowaychuk Luna 编程语言, Koa, Express, Stylus, Cluster, Mocha, Jade, node-canvas, component 等知名开源项目的创建和贡献者。 followers:14.1K


    • PaulIrish 著名的前端开发工程师,同时他也是Chrome开发者关系团队成员,jQuery团队成员,Modernizr、Yeoman、CSS3 PleaseHTML5 Boilerplatelead developerfollowers:15.7K


    • Mike Bostock 知名可视化库 D3.js的主要作者。followers:8.3K



    • 司徒正美 前端迷你MVVM框架Avalon作者。followers:2.1K

    其他


    • Mars 腾讯移动Web前端知识库。star:1600


    • brackets 一款使用 HTML,CSS,JavaScript 创建的开源的针对 Web 开发的编辑器。star:23000


    • GhostNode.js开发最新博客系统, 简单简洁, 响应式设计, 支持完全自定义, 免费, 专注博客。star:16000


    • io.jsNodeJS里分离出来的一条分支。star:13000



    • ueditor 百度前端团队出品的富本文编辑器。star:1.1K

    优秀开源组织

    PS:文章在github更新,本篇文章停止更新

    查看原文

    csdoker 赞了文章 · 7月28日

    github上值得关注的前端项目

    http://microjs.com/#

    该网站的资源都托管到了githubmicrojs.com是一个可以让你选择微型的js类库的网站,该网站里的js库都是压缩后不大于5KB的,非常实用

    图片描述

    https://plainjs.com/(10.22更新)

    The Vanilla JavaScript Repository,该仓库都是用原生js写的插件和组件,很实用。里面的项目也都托管到了github

    图片描述

    综合/资源


    • front-end-collect 分享自己长期关注的前端开发相关的优秀网站、博客、以及活跃开发者。star:860



    • f2e-hub 包含Animation,UI,dialog,Carousels,color,image,workflow等。star:100



    • fks 前端技能汇总,包含前端知识架构,后端知识,linux,书籍推荐等。star:4000


    • node123node.js中文资料导航。star:1200



    • Front-end-tutorial 最全的资源教程-前端涉及的所有知识体系。(12.25更新)

    样式/UI/css

    • Semantic-UI 让你使用任何HTML标签 来表现UI控件。

    这是一款语义化设计的前端框架,为攻城师而制作的可复用的开源前端框架。star:17500

    图片描述

    • primerCSS风格指南。star:3600


    • glue 一个生成CSS sprites的简单的命令行工具。star:2.5K (7.19更新)


    • postcss 用js插件来对css进行转换,类似Sass的预编译器,但实现了模块化,并且更加强大。star:4.5K(7.31更新)



    • mui 轻量级css框架。star:1.5K(10.15更新)
    • img2css 将图片转为纯css的黑科技。star:1.5K(12.25更新)

    测试/工具

    • mocha 一个简单、灵活有趣的 JavaScript 测试框架,用于 Node.js 和浏览器上的 JavaScript 应用测试。 star:6680

    687474703a2f2f662e636c2e6c792f6974656d732f336c316b306e32413155334d3149314c323130702f53637265656e25323053686f74253230323031322d30322d32342532306174253230322e32312e3433253230504d2e706e67

    • csscss css代码冗余分析仪,用于分析冗余 。star:2800


    • es6-toolses6 工具集,包括Grunt Tasks,Gulp Plugins,Broccoli Plugins,Brunch Plugins,Webpack plugins等等。star:1860


    • async 一个工具模块,提供了直接而强大的 JavaScript 异步功能。虽然是为 Node.js 设计的,但是它也可以直接在浏览器中使用。star:13000


    • simditor 团队协作工具 Tower 使用的富文本编辑器。star:1300


    • HTMLHintHTML 静态代码分析工具,可以集成到IDE环境或编译系统中。star:900


    • jshintjs静态代码分析工具,可以帮你检测js语法错误和潜在的问题。star:5100


    • csslint 分析和优化你的CSS样式表的工具。由[Nicholas C.
      Zakas][30]所写。star:2700


    • protractor 一款端对端的angular apps 测试框架。star:4K


    • casperjs 一个基于PhantomJS的开源导航脚本和测试工具。star:4.8K


    • Karma 自动化完成单元测试,允许你在多个浏览器里执行js代码。让你的TDD变得简单,快速,有趣。star:5.3K


    • jasmine 是一个简易的JS单元测试框架, 用来测试Javascript代码。star:9.1K(6.28更新)


    • chai 一个针对 Node.js 和浏览器的TDD(测试驱动开发)/BDD(行为驱动开发)的断言框架,可与任何 JavaScript 测试框架集成。star:2K(6.29更新)


    • Qunit 一个很容易使用的js单元测试框架,该框架是由jQuery团队的成员所开发,并且是jQuery的官方测试套件。star:3.3K(6.29更新)

    Workflow/构建工具

    • Grunt 基于Node.js的项目构建工具。拥有数量庞大的插件,是一款优秀的前端自动化工具。star:9500


    • yeoman 一个强健的工具,库,及工作流程的组合。star:960


    • gulp 基于node.js流的新一代前端构建系统。star:14000


    • spmCMD 的包管理工具,需要和 Sea.js 配合使用。

    canvas/数据可视化

    • echarts 基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。star:6900


    • Chart.js 使用<canvas>标签的简易HTML5图表。star:14600


    • sketch.js 跨平台JavaScript创意编码框架,gzip压缩后仅有2kb。star:1500


    • d3 一个基于数据操作文档的js数据可视化框架,最流行的可视化库之一。star:38000


    • zrender 一个轻量级的Canvas类库,MVC封装,数据驱动,提供类DOM事件模型,让canvas绘图大不同!star:850


    • c3 一个基于 D3.js 的可重用 JavaScript 图表库。几乎零学习曲线。star:4.5K(6.28更新)


    • img2css 将图片转为纯css代码。(11.3更新)

    模块管理/加载器

    • ESL 是一个浏览器端、符合AMD的标准加载器,适合用于现代Web浏览器端应用的入口与模块管理。

    ESL vs RequireJS

    体积更小 (Smaller)
    性能更高 (Higher performance)
    更健壮 (More Robustness)
    不支持在非浏览器端使用 (Browser only)
    依赖模块用时定义 (Lazy define)
    
    • seajs 一个遵循CommonJS规范的JavaScript模块加载器。提供简单、极致的模块化开发体验。star:4100


    • Component 一个模块化的JavaScript框架,同时也是面向前端的包管理器。


    • webpack一个模块打包工具,你可以使用WebPack管理你的模块依赖,并编绎输出模块们所需的静态文件。star:9K

    动画

    • animate.css 一个跨浏览器的CSS动画库。简单易用易上手。star:23000


    • move.js 极小的 JavaScript 库,支持 CSS3 的动画效果,非常简单优雅。star:2600


    • TweenJS 是一个简单但强大的 Javascript 动画库。CreateJS 套件的一部分。star:1500


    • bounce.js 一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript
      库,使用其特有的方式生成的动画效果。star:3600


    • Swipe 号称最精确的Slider触摸库,专为移动设备优化。star:4.7K


    • tween.js 一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。star:2.5K(7.15更新)


    • parallax.js轻量级的的视差引擎,能对智能设备的方向作出反应。。star:9K (10.17更新)
    • Velocity 是一款和jQuery的$.animate()有相同API的动画引擎。很适合移动端的动画开发,还打包了颜色动画,转换,循环,easing效果,类动画、滚动等功能。star:9.5K(12月25更新)

    插件



    • onepage-scroll 可以轻松建立一个动感的响应式的滚动效果页面,比较适用于单页面的专题站。支持现代浏览器和IE8以上版本。View demostar:7700


    • slick 一款完全响应式的 jQuery 图片滚动插件,能够根据容器自动适应宽度。star:10000view demo


    • superslides 致力于解决网站大部分特效展示问题。网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决! view demostar:1100



    • slider 一个jquery完全开源的JavaScript代码库,用户可以开发,调试和深度定制自己的滑块。star:850view demo


    • github-hovercard github 鼠标悬停显示用户,仓库等摘要信息。(10.15更新)


    • onepage-scroll 一款带有背景视觉差效果的jQuery整页滚动特效插件。star:8K (10.17更新)view demo


    • justlazy.js 轻量级js图片延迟加载插件。(10.22更新)
  • 框架、库和组件

    • polymerweb组件构建框架。一套以“一切皆组件、最少化代码量、最少框架限制”为设计理念的Web UI框架。 star:9900


    • impress.js 创建令人兴奋的演示。使用CSS3的转换和过渡,这个库允许你创建令人印象深刻的演示文稿。view demostar:24300


    • ionic 先进的HTML5 移动端开发框架。帮助开发者使用HTML5, CSS3和js做出不可思议的hybrid appstar:17000


    • reveal.js 基于CSS3的3D幻灯片工具。能够制作绚丽的演示文稿并生成HTML格式,将它发布到web上。star:21500view demo


    • pure.css 一组很小的,响应式的css组件,你可以在网页的项目上到处使用。star:12000


    • three.jsJavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。star:20000



    • jquery-pjaxajaxpushState的封装,让你可以很方便的使用pushState技术,用以实现页面无刷新加载。star:11500


    • highlight.jsjavascript语法高亮。既可以运行在浏览器端也可以运行在服务端。star:5500



    • togetherjsMozilla打造的一款可以给网站添加实时协作功能的JavaScript库。star:5K



    • MEAN.JS 全栈式javascript,使用`MongoDB, Express,
      AngularJSNode.jsstar:2.2K`


    • wechat.js 微信相关的 js 操作:分享、网络、菜单。star:700



    • progress.js 一个 jsCSS3的库,帮助开发人员为网页上的每个对象创建和管理进度条效果。star:1.6Kview demo


    • foundation 号称世界上最先进的响应式前端框架,也是一款Mobile First的框架。star:21K


    • Sugar 一个JavaScript库。它扩展了现有的JS对象的方法,让你可以用更少的代码做更多的事情。star:2.8K


    • todomvc 帮你挑选一款MV*框架,它使用不同的最流行的js MV*框架实现了一个相同的Todo应用。star:13K


    • yepnope.js 这是一个异步的条件加载框架,速度超快,只为用户加载需要的脚本。使用非常简单,非常有用!star:2.5K


    • Material UI 是一个 CSS 框架和一组实现谷歌 Material Design 设计规范的 React
      组件。star:8.8K(6.28更新)


    • Pikaday 是一个 JavaScript 日期选择器,特点是轻量级、无依赖和模块化的
      CSSstar:2.8K [view demo]104

    图片描述

    • vuejs 用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API。star:6K(7.12更新)


    • meteor 超简单的,数据库无处不在的,用于自动化和简化实时运行的 Web 应用程序的开发。纯JavaScript的Web框架。star:27K(7.12更新)


    • webuploader
      一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。支持大文件分片并发上传,极大的提高了文件上传效率。star:1.8K


    • fastclick触摸UI上的消除点击延迟js库。star:1W(10.15更新)


    • wangEditor 轻量级web富文本框。 (10.15更新)


    • benchmark.js是强大的基准测试库,几乎适用于所有JavaScript平台。支持high-resolution定时器,并返回重要的统计结果。star:1.7k(10.15更新)


    • headroom.js是一个轻量级、纯 JS 组件,用来隐藏或展现页面上的元素,为你的页面留下更多展示内容的空间。star:7.5K (10.15更新)


    移动端

    • Swipe 加速移动触摸滑块与硬件之间的转换。star:5000


    • hammer.js 一个支持多点触摸的手势库。star:11000


    • amDoc 无线Web解决方案 - 文档规范指南


    • amazeui 移动优先的跨屏前端框架。面向HTML5开发,使用css3做动画和交互。star:4.1K


    • Zepto 一款面向移动端设备、APIjQuery兼容的基础库。


    • mui 最接近原生APP体验的高性能框架 。star:1.1K(6.28更新)


    • Swiperjavascript打造的滑动特效插件,面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。star:6K(10月18更新)


    • SUI-Mobile由阿里巴巴国际UED前端出品的移动端UI库,轻量精美 star:2K(2016.1.14更新)


    • lib-flexible 淘宝出品的移动端可伸缩布局方案。star:1.3K+(2016.1.14更新)

    Node.js相关

    http://nodeframework.com/ 专门收集node.jsweb框架的网站。其项目同样均托管在github上。
    图片描述

    • nodeclub 使用 Node.jsMongoDB 开发的社区系统。star:3000


    • N-chat 使用 Express + Socket.IO 搭建的多人聊天室 。star:300


    • N-blog 使用 Express + MongoDB 搭建多人博客。star:1800


    • node-inspector 基于Blink开发者工具的Node.js调试器。star:7000



    • nodePPT 使用nodejs写的网络幻灯片。可能是迄今为止最好的网页版PPTstar:1.6Kview demo


    • hexo 一款快捷,简单,强大的博客框架,基于Nodejsstar:5.2K


    • koa 下一代Node.js Web 框架。由 Express 团队设计。star:6.3K



    • connectNode平台的中间件框架。Express就是基于Connect开发的。star:5.6K(6.29更新)


    • n node版本管理,tj大神所写。star:2.7K


    • nvm node版本管理,通过bash脚本来管理。star:7.5K
    • nodemon这个库是专门调试时候使用的,它会自动检测 node.js 代码的改动,然后帮你自动重启应用。star:7K+。(2.24.16)
    • supertestAPI使用流利的API测试node.js http 服务器。3.1K+

    React相关



    • react-native 一个用React构建native apps的框架。star:15000



    • awesome-react 关于react的工具,资源,视频的集合。star:700


    • Flux 是一个Facebook开发的、利用单向数据流实现的应用架构,用于
      ReactFlux应用有三个主要的部分组成:调度程序、存储和视图(React 组件)。star:6.8K(6.28更新)
    • iscroll 高性能,体积小,无外部依赖,跨平台的滚动组件 star:6K(7.19更新)
    • react-tappable Tappable component for React.(2016,1.4更新)
    • react-native-lessonreact-native入门指南.star:1.3K(2016,1.4更新)

    HTML5

    • html5-boilerplate 一套专业的前端模版,主要用于开发快速、健壮、适应性强的app或网站。star:27K (12.25更新)
    • BrowserquestMozilla开发的HTML5多人在线游戏。star:5200
    • video.js 开源的HTML5和Flash视频播放器。支持自定义进度条、按钮以及工具栏的底色。star:9.1K


    • html5shiv 主要解决HTML5提出的新的元素不被IE6-9识别。star:6K(7.15更新)


    • brunch 快速的前端 HTML5 构建工具。star:4.5K(7.19更新)


    • ulkit 一个轻量级的、模块化前端框架,它被用于快速开发强大的web界面。也是一款优秀的响应式HTML5 框架。star:5.3K (8.3更新)

    模板引擎

    • Handlebars.js 一个js语义模板库,能让你轻松高效的编写语义化模板。star:8.6K(6.29 update)


    • artTemplate 性能卓越的 js 模板引擎。star:1.7K


    • jade 一款高性能简洁易懂的模板引擎,JadeHamlJavascript实现。star:8.7K
    • ejs tj大神写的嵌入javascript的模板引擎,主要用于Node

    浏览器兼容方案

    • es6-shim 提供兼容性垫片,使ES6能兼容于传统的JavaScript引擎。star:1.5K(7.15更新)


    • Modernizr 用来检测浏览器功能支持情况的JavaScript库,可以检测18项CSS3功能以及40多项关于HTML5的功能。star:16000


    • normalize.css 一个可定制的 CSS 文件,使浏览器呈现的所有元素,更一致和符合现代标准。支持IE8+。star:17000


    • html5shiv 主要解决HTML5提出的新的元素不被IE6-9识别。star:6K(7.15更新)



    • Babel 是一款为了写下一代js的编译器,无需等待浏览器支持就可以使用新的语法。star:8.3K (7.29更新)

    高产大牛

    • Evan You 前端轻量级框架MVVM框架vue.js作者,前Google工程师。followers:1.6K


    • TJ Holowaychuk Luna 编程语言, Koa, Express, Stylus, Cluster, Mocha, Jade, node-canvas, component 等知名开源项目的创建和贡献者。 followers:14.1K


    • PaulIrish 著名的前端开发工程师,同时他也是Chrome开发者关系团队成员,jQuery团队成员,Modernizr、Yeoman、CSS3 PleaseHTML5 Boilerplatelead developerfollowers:15.7K


    • Mike Bostock 知名可视化库 D3.js的主要作者。followers:8.3K



    • 司徒正美 前端迷你MVVM框架Avalon作者。followers:2.1K

    其他


    • Mars 腾讯移动Web前端知识库。star:1600


    • brackets 一款使用 HTML,CSS,JavaScript 创建的开源的针对 Web 开发的编辑器。star:23000


    • GhostNode.js开发最新博客系统, 简单简洁, 响应式设计, 支持完全自定义, 免费, 专注博客。star:16000


    • io.jsNodeJS里分离出来的一条分支。star:13000



    • ueditor 百度前端团队出品的富本文编辑器。star:1.1K

    优秀开源组织

    PS:文章在github更新,本篇文章停止更新

    查看原文

    赞 366 收藏 1809 评论 25