记住你是谁

记住你是谁 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

不妨送给自己四个字:努力奋斗,大胆折腾!

个人动态

记住你是谁 关注了专栏 · 2020-12-28

前端面试每日3+1

前端面试每日 3+1,以面试题来驱动学习,提倡每日学习与思考,每天进步一点!每天早上5点纯手工发布面试题(死磕自己,愉悦大家)

关注 231

记住你是谁 赞了文章 · 2020-12-23

vue + 高德地图开发地图选址及查看地址组件

公司pc端有一个地图选址及查看地图功能,这个是几个月前就开发完了,最近完善了一下,先上最终效果吧。
选择省市区填写详细地址进入点击确认坐标打开地图弹框
选择省市区填写详细地址进入点击确认坐标打开地图弹框
根据传入的地址查询到了地址可以查看更多地址,可以点击地图查看周边,点击确认,获取坐标
根据传入的地址查询到了地址可以查看更多地址,可以点击地图查看周边,点击确认,获取坐标。

这是查看地址
这是查看地址

好了,上实现代码。

<template>
  <el-dialog title="" 
    :close-on-click-modal="false" 
    :destroy-on-close="true" 
    :visible.sync="visibleVal" 
    :modal="modal" width="800px" 
    class="x-ui-modal map__dialog">

    <div id="container"></div>

    <div class="poi__list" ref="scrollWrap" v-if="lists.length">
      <div class="ul">
        <div class="address-item"
          :class="nearbyIndex === choiceIndex ? 'active' : ''"
          @click.stop="choiceAddress(nearbyIndex)" 
          v-for="(nearby, nearbyIndex) in lists" :key="nearbyIndex">
          <div class="icon"></div>
          <div class="text">
            <div class="name" :title="nearby.name">{{nearby.name | ellipsis}}</div>
            <div class="address" :title="nearby.address">{{nearby.address | ellipsis}}</div>
          </div>
        </div>
        <div v-show="bottomLoadingShow"><Loading /></div>
        <div v-show="bottomLineShow"><BottomLine :text="'已无更多数据,点击地图\n任意一处可以查看周边'"/></div>
        <div v-show="moreShow" @click="loadingMore"><BottomLine :text="'上拉或点我查看更多'" style="cursor: pointer;" /></div>
      </div>
    </div>

    <div 
      v-if="isEdit"
      class="city__name"
      :title="`您查询的${customerName ? '客户及地址' : '地址'}:${searchKwords}`">
      <el-input
        v-model="searchKwords"
        disabled />
    </div>

    <template v-if="isEdit">
      <div class="main__footer">
        <el-button
          @click="onCloseModal()"
          class="x-ui-btn add__cancel"
          size="medium">取消</el-button>
        <el-button
          @click="onSubmit()"
          class="x-ui-btn add__submit"
          type="primary"
          size="medium">确认</el-button>
      </div>
    </template>

    <template v-else>
      <div class="main__footer">
        <el-button
          @click="onCloseModal()"
          class="x-ui-btn add__cancel"
          size="medium">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

以上是dom,用的是element-ui的dialog。

进入弹框后,编辑加载需要用到的地图插件,AMap.Geocoder和AMap.PlaceSearch,因为一开始做这个是时候,单独使用了一种AMap.Geocoder,很多高德地图上能查到的地址都定位不到,于是查看了文档的常见问题,里面的描述就是:“高德地图的搜索是复合型搜索......位置搜索的研发中,可以先进行地址解析,再进行关键词搜索,以得到更优的结果。” 查看则直接根据外部传入的经纬度定位,初始化地图。当然我这里是在保证AMap和AMapUI都已经加载到的情况下再做的,否则就会报错,我用了比较笨的办法,就是定时器不断执行加载的代码,然后在这里一旦两个都有了,就停止定时器,比较笨的办法了。

进入弹框后,编辑加载需要用到的地图插件,查看则直接根据经纬度定位,初始化地图。

下面就是编辑坐标时的逻辑了

interval() {
      this.timer = setInterval(function() {
        this.awaitPlaceSearch();
      }.bind(this), 50)
    },

    awaitPlaceSearch() {
      if(this.placeSearch && this.geoCoder) {
        clearInterval(this.timer);
        this.isUseNearBy = false;
        this.placeSearch.search(this.handleCityName, (status, result) => {
          if (status === 'complete') {
            if(result.poiList.pois.length) {
              if(result.poiList.pois.length % this.pageSize !== 0) {
                this.isUseNearBy = true;
                this.bottomLineShow = true;
              } else {
                this.isUseNearBy = false;
                this.bottomLineShow = false;
              }
              const geos = result.poiList.pois[0].location;
              this.center = [geos.lng, geos.lat];
              this.getAreaInfo('location', (res) => {
                this.lists = result.poiList.pois//将查询到的地点赋值
                this._initScroll();
                this.getAddress(0);
                this.createdMap([this.ruleForm.long, this.ruleForm.lat]);
                this.addMarker();
              })
            } else {
              if(result.cityList && result.cityList.length > 1) {
                this.lists = [];
                this.onCloseModal();
                this.$message.info(`当前搜索地址在${result.cityList.length}个城市有若干结果,请明确后再搜索`);
              } else {
                this.lists = [];
                this.onCloseModal();
                this.$message.info('未能查询到该地址,请更换关键字查询');
              }
            }
          } else if(status === 'no_data') {
            this.$message.warning(`您输入的地址“${this.cityName}”,未查询到相关信息`);
            this.getAreaInfo('address', (res) => {
              this.lists = [
                {
                  location: {
                    lng: res.geocodes[0].location.lng,
                    lat: res.geocodes[0].location.lat,
                  },
                  name: res.geocodes[0].formattedAddress,
                  address: '',
                }
              ]
              this.center = [res.geocodes[0].location.lng, res.geocodes[0].location.lat]
              this._initScroll();
              this.getAddress(0);
              this.createdMap([this.ruleForm.long, this.ruleForm.lat]);
              this.addMarker();
              this.isUseNearBy = true;
              this.bottomLineShow = true;
            });
          } else {
            this.fixedPosition();//精准定位或IP地址定位
          }
        }) 
      }
    },

当然也是在保证this.placeSearch和this.geoCoder(即AMap.Geocoder和AMap.PlaceSearch)都加载到,同样也是上面说的笨办法。我是先用AMap.PlaceSearch.search方法,通过关键字查询传入的地址,如果查询到,则确定新的地图中心点经纬度,再通过AMap.Geocoder.getAddress方法传入新的地图中心点经纬度,解析出省市区信息,也可能关键字查询不明确(未明确省市区),比如只写了xx路,就有可能在全国多处都有结果,则会关闭弹框,提示明确后再查询,还可能关键字根本就查询不到,AMap.PlaceSearch.search返回no_data,则传入关键字使用AMap.Geocoder.getLocation方法,解析关键字所在城市,总之这里的逻辑就是AMap.Geocoder和AMap.PlaceSearch搭配使用。此处this.getAreaInfo方法是解析地址省市区的方法,设置了一个回调函数作为参数:

//依赖高德该接口获得省市区信息
    getAreaInfo(type, callback) {
      if(type === 'address') { // 在编辑的情况下通过地址名称查询
        this.geoCoder.getLocation(this.handleCityName, (status, result) => {
          if (status === 'complete' && result.geocodes.length) {
            this.ruleForm.regeocode.adcode = result.geocodes[0].adcode
            this.ruleForm.regeocode.province = result.geocodes[0].addressComponent.province
            this.ruleForm.regeocode.city = result.geocodes[0].addressComponent.city == '' ? result.geocodes[0].addressComponent.province : result.geocodes[0].addressComponent.city
            this.ruleForm.regeocode.district = result.geocodes[0].addressComponent.district;
            callback(result);
          } else if(status === 'no_data') {
            this.lists = [];
            this.onCloseModal();
            this.$message.info('未能查询到该地址,请更换关键字查询');
          } else {
            this.fixedPosition();//精准定位或IP地址定位
          }
        });
      } else if(type === 'location') { // 在查看的情况下通过经纬度查询
        this.geoCoder.getAddress(this.center, (status, result) => {
          if (status === 'complete' && result.regeocode && result.regeocode.addressComponent) {
            this.ruleForm.regeocode.adcode = result.regeocode.addressComponent.adcode
            this.ruleForm.regeocode.province = result.regeocode.addressComponent.province
            this.ruleForm.regeocode.city = result.regeocode.addressComponent.city == '' ? result.regeocode.addressComponent.province : result.regeocode.addressComponent.city
            this.ruleForm.regeocode.district = result.regeocode.addressComponent.district;
            callback(result);
          } else {
            this.fixedPosition();//精准定位或IP地址定位
          }
        });
      }
    },

以上在获取到地址时都会设置为一个地址列表,设置在地图左侧,供用户选择,滚动使用better-scroll,可以上拉加载进行分页,这里不展开说了。

通过以上步骤,大部分情况下都能查询到精确的关键字,一部分高德没有收录的企业信息,也能定位到所在街道乡镇省市区。此外还在点击地图的时候触发了AMap.PlaceSearch.searchNearBy方法查询鼠标点击处的周边,作为补充:

// 查看更多,此方法也给上拉加载使用
searchMore(e) {
      if(e) {
        this.isUseNearBy = true;
        this.placeSearch.opt.pageIndex = 1;
        this.center = [e.lnglat.getLng(), e.lnglat.getLat()];
      } else {
        this.placeSearch.opt.pageIndex += 1;
      }
      this.geoCoder.getAddress(this.center, (status, result) => {
        if (status === 'complete' && result.info === 'OK') {
          let addressComponent = result.regeocode.addressComponent;
          this.ruleForm.regeocode.adcode = addressComponent.adcode
          this.ruleForm.regeocode.province = addressComponent.province
          this.ruleForm.regeocode.city = addressComponent.city == '' ? addressComponent.province : addressComponent.city
          this.ruleForm.regeocode.district = addressComponent.district;

          let cityName = this.isUseNearBy ? '' : this.handleCityName;
          if(this.isUseNearBy) {
            this.placeSearch.searchNearBy(cityName, this.center, 1000, (status, result) => {
              this.searchCallBack(status, result, e)
            });
          } else {
            this.placeSearch.search(cityName, (status, result, e) => {
              this.searchCallBack(status, result)
            });
          }
        } else {
          this.emptyLocationData();
        }
      })
    },
    searchCallBack(status, result, event) {
      if (status === 'complete' && result.poiList.pois.length) {
        if(event) {
          this.lists = result.poiList.pois;
          if(this.lists.length % this.pageSize !== 0) {
            this.bottomLineShow = true;
          } else {
            this.bottomLineShow = false;
          }
          this.getAddress(0);
          if(this.scroll) {
            this.scroll.scrollTo(0, 0);
            this.scroll.finishPullUp();
          } else {
            this._initScroll();
          }
          this.addMarker();
        } else {
          this.lists = concat(this.lists, result.poiList.pois);
          if(this.lists.length % this.pageSize !== 0) {
            this.bottomLineShow = true;
          } else {
            this.bottomLineShow = false;
          }
          this.originalStatus();
        }
      } else {
        this.bottomLineShow = true;
      }
    },

主要的部分就是上面这些,还有一些里面用到的方法,我截几张图吧,第一次写文章,写的比较乱。
创建地图。

地图添加marker

地图信息窗体

自定义信息窗体dom结构

查看原文

赞 25 收藏 15 评论 6

记住你是谁 赞了文章 · 2020-12-07

前端框架库汇总

导读


本文主要收录一些常用框架库文档以及UI组件库。

阅读三连:点赞(👍)、关注(😍)、收藏(📝)。
本文 github (前端资源汇总) 已上传,更多往期文章已分类整理。

正文


Vue

  • Vue2.0:Vue2.0 文档
  • Vue3.0:Vue3.0 文档
  • Vue-Router:Vue.js 官方的路由管理器。
  • Vuex:Vue.js 应用程序开发的状态管理模式。
  • Element-UI:饿了么UI组件库
  • View UI:一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。
  • Vuetify:用于构建功能丰富、快速的应用程序。
  • Buefy-UI: 简单且轻量的UI库。
  • Quasar: 编写代码一次并同时将其部署为网站、移动应用和/或Electron应用。
  • Vue Material: 一个轻量级的框架, 建立在谷歌的 Material Design 基础上。
  • Vux: 基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。
  • Vant: 有赞前端团队开源的移动端组件库。
  • NutUI: 一套京东风格的轻量级移动端Vue组件库。
  • YDUI Touch一只基于Vue2.x的移动端&微信UI。
  • Ant Design Vue: Vue UI组件库,开箱即用的高质量 Vue 组件。
  • Wot Design: 根据京东商家侧的UI设计规范(京麦移动端设计规范)开发,旨在给商家提供统一的UI交互,同时提高研发的开发效率。
  • VuePress: Vue 驱动的静态网站生成器。
  • Gridsome: 基于 Vue.js 构建的 Jamstack 框架。让开发人员可以轻松地构建静态生成的网站和应用程序,这些网站和应用程序 。
  • better-scroll: 解决移动端(已支持PC)各种滚动场景需求的插件。
  • vue-multiselect: Vue多选。
  • vue-table: vue-table-数据表简化!
  • vue-infinite-scroll: vue 的无限滚动插件。
  • vue-progressbar: Vue 进度条插件。
  • vue-devtools: Vue 游览器调试插件。
React

Angular

  • Angular文档: 一个应用设计框架与开发平台,用于创建高效、复杂、精致的单页面应用。
  • Ant Design Angular: Ant Design 设计规范的 Angular UI 组件库。
  • DevUI: 一款开源免费的企业中后台产品前端的通用解决方案。
  • NG-NEST: 一个开源的 Web 应用程序框架,基于 Angular 和 Nest ,主要用于研发企业级中后台产品。
  • Ant Design Mobile Angular: Ant Design 设计规范的 Angular UI 组件库(移动端)。
  • Angular Material: 使用横跨 Web、Mobile 和桌面环境的综合性组件库构建现代应用。
  • Angular-animate:
  • AngularJS入门教程

TypeScript


Flutter

微信小程序


  • 微信小程序文档
  • TouchUI WX: 一套完全免费的微信小程序开发框架,扩展了小程序的能力。
  • WePY:让小程序支持组件化开发的框架,一个最受欢迎的小程序框架.
  • mpvue:一个使用 Vue.js 开发小程序的前端框架。
  • taro: 一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 等应用。
  • uni-app: 一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。

工具库


  • jQuery: 一个高效、精简并且功能丰富的 JavaScript 工具库。
  • Zepto.js: 一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api。
  • Moment.js: JavaScript 日期处理类库。
  • date-fns.js: 一个现代的 JavaScript 日期工具类库,提供了最全面、最简单和一致的工具集,用于在浏览器和 Node.js 中操作。
  • Underscore.js:是一个JavaScript实用库,提供了一整套函数式编程的实用功能。
  • Sugar.js: 一个可以用来处理原生对象的库。
  • Math.js: Javascript 扩展数学库。
  • Lodash.js:一个一致性、模块化、高性能的 JavaScript 实用工具库。
  • cnhammer.js: 一个可以识别触摸、鼠标和点击事件等手势的开放源码类库。
  • Ramda.js:一款实用的 JavaScript 函数式编程库。
  • Axios.js:一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
  • lazy.js: 功能类似 Underscore 和 Lodash。
  • Voca.js: 一个用于操作字符串的 Javascript 库。
  • Babel.js: 一个 JavaScript 编译器。
  • RequireJS: 一个JavaScript模块加载器。
  • RxJS: 使用 Observables 的响应式编程的库,它使编写异步或基于回调的代码更容易。
  • sea.js: 一个适用于 Web 浏览器端的模块加载器。
  • Backbone.js: 为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构。英文
  • reveal.js: 一个能够帮助我们很轻易地使用 HTML 创建一个漂亮的演示文稿的框架。
  • Cycle.js: 一个函数式和响应式的 JavaScript 框架,编写可观测代码。
  • system.js:一个通用的模块加载器,它能在浏览器或者 NodeJS 上动态加载模块,并且支持 CommonJS、AMD、全局模块对象和 ES6 模块。
  • ESL.js:一个浏览器端、符合AMD的标准加载器,适合用于现代Web浏览器端应用的入口与模块管理。
  • expect.js: 简约的、适用于 Node.js 和浏览器端的 BDD 式断言工具。
  • can.js: 客户端JavaScript架构库的集合。
  • most.js: 用于反应式编程的工具包。
  • foundation.js: 一个支持响应式布局的前端框架。
  • Semantic.js: 一款开发框架,帮助开发者使用对人类友好的 HTML 语言构建优雅的响应式布局。
  • Bulma: 一个基于 Flexbox 布局技术的免费、开源的现代 CSS 框架。
  • Phaser.js: 一款快速、免费以及开源 HTML5 游戏框架,它支持 WebGL 和 Canvas 两种渲染模式,可以在任何 Web 浏览器环境下运行,游戏可以通过第三方工具转为 iOS、Android 支持的 Native APP,允许使用 JavaScript 和 TypeScript 进行开发。
  • Request.js: 针对浏览器和节点的请求库。
  • Hammer.js: 一个开源的,轻量级的 JavaScript 库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件。
  • Ember.js: 一个开源的 JavaScript 客户端框架,用于开发Web应用程序并使用MVC(模型 - 视图 - 控制器)架构模式。
  • handlebars.js: 一个 JavaScript 语义模板库,通过对视图(view)和数据的分离来快速构建 Web 模板。
  • jqueryui: jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。
  • Sizzle.js: 一个纯 JavaScript 实现的 CSS 选择器引擎。
  • Avalon.js: 一个迷你、易用、高性能的前端MVVM框架。
  • String.js: JavaScript字符串中没有包含的方法,例如转义html、解码html实体、剥离标记等。

Js插件


  • Swiper.js:移动端网站的内容触摸滑动插件。
  • Glide.js: 一个无依赖关系的JavaScript ES6滑块和carousel。
  • QRCode.js: 二维码生成插件。
  • slidePage.js: slidePage3 特别适合主流前端框架开发,无任何依赖库,一个优化的全屏插件。
  • fullPage.js: fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站。
  • Validate.js: JavaScript表单验证类库。
  • tree-d3.js: tree 树状图 d3.js。
  • zTree.js: 树插件。
  • jstree: jquery插件,提供交互式树。支持HTML和JSON数据源以及AJAX加载。
  • Datatables.js:一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。
  • DatePicker.js: 时间选择插件。
  • layDate.js: layDate 日期与时间组件。
  • Date.js: 一个开放源代码的JavaScript Date库,用于解析,格式化和处理。
  • clipboard.js:现代化的拷贝文字插件。
  • PDF.js: 一个基于 web 标准的通用 pdf 解析和渲染库。
  • jquery-i18n: 一个轻量级的jQuery插件,用于像Java Resource Bundles中那样从“ .properties”文件为javascript提供国际化。
  • i18next
  • TimelineJS: 时间轴插件。
  • amfe-flexible: 移动端适配。
  • lazyLoad.js:Lazy Load延迟加载图像插件,直到用户滚动到它们才显示!
  • spin.js: Loading界面插件。
  • CodeMirror.js: 文本编辑器。
  • TinyMCE.js :文本编辑器。
  • Video.js: 一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。
  • SweetAlert.js: 一个 JavaScript 插件,能够完美替代 JavaScript 自带的 alert 弹出框,并且功能强大、设计优美。
  • PhotoSwipe.js: 一个 JavaScript 实现的相册组件,没有外部依赖。
  • highlight.js: 用JavaScript编写的语法突出显示工具。
  • Cropper.js: 一款非常强大却又简单的图片裁剪工具,它可以进行非常灵活的配置,支持手机端使用,支持包括 IE9 以上的现代浏览器。
  • Store.js: 跨浏览器存储插件。
  • Js-cookie: 一个简单,轻巧的JavaScript API,用于处理Cookie.
  • Mousetrap.js: 一个用于处理键盘快捷键的简单库。
  • FlexSlider.js: 全屏响应式轮播图插件。
  • Leaflet.js: 一个开放源代码的JavaScript库,用于移动友好的交互式地图。

动画库


  • iTyped.js: 简单 Javascript 动画输入,没有任何依赖关系。
  • Three.js: 3D显示动画库。
  • Animejs:一个轻量的JavaScript 动画库, 拥有简单而强大的API。可对 CSS 属性、 SVG、 DOM 和JavaScript 对象进行动画。
  • Mo.js: 一款效果非常炫酷的HTML5 SVG气泡导航和波浪式页面切换特效。
  • Velocity.js:一个简单易用、高性能、功能丰富的轻量级JS动画库。
  • ScrollReveal.js: 一个JavaScript库,用于在元素进入/离开视口时轻松对其进行动画处理。
  • Kute.js: 一个完全成熟的原生 JavaScript 动画引擎,具有跨浏览器动画的基本功能。
  • Bounce.js:快速创建漂亮的 CSS3 动画效果。
  • Dynamicsjs: 一个JavaScript库,用于创建基于物理的动画。
  • GreenSock.js):适用于现代网络的专业级JavaScript动画。
  • Particles.js:用于创建粒子的轻量级JavaScript库。
  • Matter.js:Matter.js是Web的2D物理引擎。
  • Parallax.js:滚动视差效果封装,便于快速调用实现。
  • Tween.js: 补间动画。
  • Ramjet.js: 制作从一个元素变化为另外一个元素的动效,它能作用于DOM元素、SVG、静态和动态的图片。
  • Rellax.js:让页面滚动更有趣的动画库。
  • Hover.css: 一组CSS3动力悬停效果,可应用于链接,按钮,徽标,SVG,特色图像等。
  • Animista.css: 一个在线动画生成器,同时也是一个动画库。
  • Animate.css:一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果。
  • Vivify.css:一个免费的CSS动画库。
  • Magic Animations CSS3:CSS3 动画库。
  • cssanimation:一堆不同动画集合,CSS3 动画包。
  • Angrytools: 可以做动画生成器,同时也是一个动画库。

Css 预处理


  • sass: 世界上最成熟、最稳定、最强大的专业级CSS扩展语言。
  • less: 一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。
  • stylus: 一个高效、动态以及丰富的 CSS 预处理器。

图表库


  • C3.js: C3.js 开源图表库
  • Chart.js:为设计和开发人员准备的简单、灵活的 JavaScript 图表工具。
  • Chartist.js: 一个简单的 JavaScript 动画库,你能够自制美丽的响应式图表,或者进行其他创作。
  • D3.js: 一个非常强大的图形JavaScript库。D3.js可以作为图表库的构建块且免费。
  • Echarts: 数据可视化图表库。
  • Flot.js: jQuery的Javascript图表库。
  • HighCharts.js:兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库。
  • koolchart.js:基于HTML5 Canvas的JavaScript图表库。
  • Recharts: Recharts是一个用React和D3构建的重新定义的图表库。

包管理工具


  • npm: 包管理工具。
  • yarn: 快速、可靠、安全的依赖管理工具。
  • bower

打包工具


  • gulp: 用自动化构建工具增强你的工作流程。
  • webpack: 一个现代 JavaScript 应用程序的静态模块打包器。
  • grunt: 基于 Node.js 的项目构建工具。
  • Parcel: Web 应用打包工具,适用于经验不同的开发者。
  • rollup: 一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码。
Node

  • Node 中文网文档
  • Express:基于 Node.js 平台,快速、开放、极简的 Web 开发框架。
  • koa: Koa -- 基于 Node.js 平台的下一代 web 开发框架。
  • Egg:为企业级框架和应用而生。
  • Meteor: 一个web APP开发框架。
  • Nodal: Node.js的网络服务器,经过优化可快速高效地构建API服务。
  • Keystone: 以Express和MongoDB为基础搭建的Node.js CMS和web应用程序平台。
  • Sails:一个优秀的web后台开发框架。它基于著名的express,添加了很多功能模块,支持REST、各种流行数据库等。
  • Loopback: LoopBack 框架是由一组Node.js的模块构成的。
  • Pomelo:一个轻量级的服务器框架,它最适合的应用领域是网页游戏、社交游戏、移动游戏的服务端,开发者会发现pomelo可以用如此少的代码达到强大的扩展性和伸缩性。。
  • Totaljs: Node.js 的 MVC 框架。
  • Derby: DerbyJS 是一个 MVC 框架,帮助编写实时,交互的应用。
  • Socket: Socket.io是一个类库,可以在浏览器与服务器之间实现实时、双向、基于事件的通信。英文
  • Mojito: 一个模块化的,由源代码控制的拆分测试框架,可让您通过Git / CI构建,启动和分析实验。
  • Next: 用于构建高效且可伸缩的服务端应用程序的渐进式 Node.js 框架。
  • ThinkJS: 一款面向未来开发的 Node.js 框架,整合了大量的项目最佳实践,让企业级开发变得更简单、高效。
  • Mean

测试工具


  • eslint: 可组装的JavaScript和JSX检查工具。
  • Jest: 一个令人愉快的 JavaScript 测试框架,专注于简洁明快。
  • mocha: 一个功能丰富的javascript测试框架,运行在node.js和浏览器中,使异步测试变得简单有趣。
  • JSHint: 用于标记用JavaScript编写的程序中的可疑用法。
  • JScs.js: 验证JavaScript代码。

Api查询


开发工具


常见的开发论坛


其他


  • Markdown: 一份免费且开源的 Markdown 参考手册,详细讲解了 Markdown 这一简单、易用的文档格式化标记语言的用法。
  • git: 版本控制工具。
  • svn: 一个开放源代码的版本控制系统。
  • Ionic 一个强大的 HTML5 应用程序开发框架。
  • mui: 最接近原生APP体验的高性能前端框架。
  • leetCode: 力扣提供海量技术面试资源,帮助你高效提升编程技能,轻松拿下世界IT 名企。
  • font-awesome: 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用 CSS 的样式。
  • Bootstrap: 简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。

最后


如果喜欢或对你有用,那就点个赞呗(👍👍👍)! (╯ε╰)(╯ε╰)(╯ε╰)。
欢迎在留言区,留下你使用过好的框架库。

查看原文

赞 69 收藏 56 评论 4

记住你是谁 赞了文章 · 2020-10-09

vue源码中值得学习的方法

最近在深入研究vue源码,把学习过程中,看到的一些好玩的的函数方法收集起来做分享,希望对大家对深入学习js有所帮助。如果大家都能一眼看懂这些函数,说明技术还是不错的哦。

1. 数据类型判断

Object.prototype.toString.call()返回的数据格式为 [object Object]类型,然后用slice截取第8位到倒一位,得到结果为 Object

var _toString = Object.prototype.toString;
function toRawType (value) {
  return _toString.call(value).slice(8, -1)
}

运行结果测试

toRawType({}) //  Object 
toRawType([])  // Array    
toRawType(true) // Boolean
toRawType(undefined) // Undefined
toRawType(null) // Null
toRawType(function(){}) // Function

2. 利用闭包构造map缓存数据

vue中判断我们写的组件名是不是html内置标签的时候,如果用数组类遍历那么将要循环很多次获取结果,如果把数组转为对象,把标签名设置为对象的key,那么不用依次遍历查找,只需要查找一次就能获取结果,提高了查找效率。

function makeMap (str, expectsLowerCase) {
    // 构建闭包集合map
    var map = Object.create(null);
    var list = str.split(',');
    for (var i = 0; i < list.length; i++) {
      map[list[i]] = true;
    }
    return expectsLowerCase
      ? function (val) { return map[val.toLowerCase()]; }
      : function (val) { return map[val]; }
}
// 利用闭包,每次判断是否是内置标签只需调用isHTMLTag
var isHTMLTag = makeMap('html,body,base,head,link,meta,style,title')
console.log('res', isHTMLTag('body')) // true

3. 二维数组扁平化

vue中_createElement格式化传入的children的时候用到了simpleNormalizeChildren函数,原来是为了拍平数组,使二维数组扁平化,类似lodash中的flatten方法。

// 先看lodash中的flatten
_.flatten([1, [2, [3, [4]], 5]])
// 得到结果为  [1, 2, [3, [4]], 5]

// vue中
function simpleNormalizeChildren (children) {
  for (var i = 0; i < children.length; i++) {
    if (Array.isArray(children[i])) {
      return Array.prototype.concat.apply([], children)
    }
  }
  return children
}

// es6中 等价于
function simpleNormalizeChildren (children) {
   return [].concat(...children)
}

4. 方法拦截

vue中利用Object.defineProperty收集依赖,从而触发更新视图,但是数组却无法监测到数据的变化,但是为什么数组在使用pushpop等方法的时候可以触发页面更新呢,那是因为vue内部拦截了这些方法。

 // 重写push等方法,然后再把原型指回原方法
  var ARRAY_METHOD = [ 'push', 'pop', 'shift', 'unshift', 'reverse',  'sort', 'splice' ];
  var array_methods = Object.create(Array.prototype);
  ARRAY_METHOD.forEach(method => {
    array_methods[method] = function () {
      // 拦截方法
      console.log('调用的是拦截的 ' + method + ' 方法,进行依赖收集');
      return Array.prototype[method].apply(this, arguments);
    }
  });

运行结果测试

var arr = [1,2,3]
arr.__proto__ = array_methods // 改变arr的原型
arr.unshift(6) // 打印结果: 调用的是拦截的 unshift 方法,进行依赖收集

5. 继承的实现

vue中调用Vue.extend实例化组件,Vue.extend就是VueComponent构造函数,而VueComponent利用Object.create继承Vue,所以在平常开发中VueVue.extend区别不是很大。这边主要学习用es5原生方法实现继承的,当然了,es6中 class类直接用extends继承。

  // 继承方法 
  function inheritPrototype(Son, Father) {
    var prototype = Object.create(Father.prototype)
    prototype.constructor = Son
    // 把Father.prototype赋值给 Son.prototype
    Son.prototype = prototype
  }
  function Father(name) {
    this.name = name
    this.arr = [1,2,3]
  }
  Father.prototype.getName = function() {
    console.log(this.name)
  }
  function Son(name, age) {
    Father.call(this, name)
    this.age = age
  }
  inheritPrototype(Son, Father)
  Son.prototype.getAge = function() {
    console.log(this.age)
  }

运行结果测试

var son1 = new Son("AAA", 23)
son1.getName()            //AAA
son1.getAge()             //23
son1.arr.push(4)          
console.log(son1.arr)     //1,2,3,4

var son2 = new Son("BBB", 24)
son2.getName()            //BBB
son2.getAge()             //24
console.log(son2.arr)     //1,2,3

6. 执行一次

once 方法相对比较简单,直接利用闭包实现就好了

function once (fn) {
  var called = false;
  return function () {
    if (!called) {
      called = true;
      fn.apply(this, arguments);
    }
  }
}

7. 对象判断

vue源码中的looseEqual 判断两个对象是否相等,先类型判断再递归调用,总体也不难,学一下思路。

function looseEqual (a, b) {
  if (a === b) { return true }
  var isObjectA = isObject(a);
  var isObjectB = isObject(b);
  if (isObjectA && isObjectB) {
    try {
      var isArrayA = Array.isArray(a);
      var isArrayB = Array.isArray(b);
      if (isArrayA && isArrayB) {
        return a.length === b.length && a.every(function (e, i) {
          return looseEqual(e, b[i])
        })
      } else if (!isArrayA && !isArrayB) {
        var keysA = Object.keys(a);
        var keysB = Object.keys(b);
        return keysA.length === keysB.length && keysA.every(function (key) {
          return looseEqual(a[key], b[key])
        })
      } else {
        /* istanbul ignore next */
        return false
      }
    } catch (e) {
      /* istanbul ignore next */
      return false
    }
  } else if (!isObjectA && !isObjectB) {
    return String(a) === String(b)
  } else {
    return false
  }
}
function isObject (obj) {
  return obj !== null && typeof obj === 'object'
}

由上思路我自己写一个深拷贝方法,不过简单的深拷贝我们可以用 JSON.stringify() 来实现即可。

function deepClone(source) {
  if (!source && typeof source !== 'object') {
    throw new Error('error arguments', 'deepClone')
  }
  const targetObj = source.constructor === Array ? [] : {}
  Object.keys(source).forEach(keys => {
    if (source[keys] && typeof source[keys] === 'object') {
      targetObj[keys] = deepClone(source[keys])
    } else {
      targetObj[keys] = source[keys]
    }
  })
  return targetObj
}

就先分享这些函数,其他函数,后面继续补充,如有不对欢迎指正,谢谢!

查看原文

赞 43 收藏 29 评论 8

记住你是谁 赞了文章 · 2020-10-09

2020年8月-9月前端找工作感受总结

记录一下自8月中旬离职之后准备以及找工作的经历,会提到个人感受到的招聘情况和一些前端面试题.会按照以下几个点来展开.
  • 背景信息(个人相关)
  • 整体找工作的感受
  • 整体节奏(时间安排)
  • 面试题整理(含算法题)
  • 感悟和总结

背景信息(个人相关)

普通二本,计算机专业,三年工作经验(一年爬虫,两年前端+全栈),前端岗位,技术栈主要是vue.js + node.js.简历上稍微好的点应该就是在猎豹的工作经历和爬虫的工作背景.整体看来就是很一般般的.

整体找工作感受

在经历整个过程之后对找工作前的一些点的思考,希望减少一些同学对今年就业形势的误判.

  • 整体就业形势的感受

因为受疫情影响,整体经济大形势是不好的,很多企业都在裁人,所以整体hc减少,工作不好找,这是在脉脉或者v2ex论坛里面很多人的反馈.但是我个人感受是今年招人的还是挺多的,就拿我的情况来说,我找工作一直用的boss直聘(boss招聘打钱),上面有300+条消息都看不过来(这个有点小诀窍,下面会提到),只有第一周我回了一些比较中意的hr简历,剩下的两周都没有再投简历.
结合约面试的情况来看,招聘主要集中在滴滴,美团,字节这三家.boss上发消息的10个里面有6个字节的.美团换着部门面面了三次,滴滴面了两次.面了三周的时间,基本上每天两场.最后陆陆续续拿到了6个offer.
后来我也分析了,整体hc减少是不假,但可能是10个小厂减少了20个hc,一个大厂涨了12个hc这样的情况,hc少了但是更集中了.
我的结论就是,有些事别老听别人说,要小马过河,自己去试试.
另外,我也有点困惑,今年找工作的这个情况到底是3年的工作经验带来的还是猎豹的工作经历带来的.

  • Github项目star数和个人博客对面试的影响

我在github上有一个500+ star的项目,还有平时有写博客的习惯,我从改简历开始就琢磨这些点该怎么表达更好,尽管我在每次自我介绍的时候都会提到在开发之余我会写写自己的项目和博客,但是目前github项目基本没有人问的,博客也只有百度五面和去哪儿二面的时候才有问到.
所以,这部分怎么说呢,属于锦上添花的,要搞好核心能力,不要把这些看太重,除非你这这两点非常非常优秀.

  • 关于视频面和现场面

视频面确实方便,面试成本低,写代码也更方便,但是呢,视频面节奏比较慢,基本上不会一面之后立马二面,我见过最快的视频面隔了一个小时进入下一面,其他的都隔着1-3天不等.不如现场面痛快,今年的现场面基本上都能当场轻松的拿到offer.

  • boss上遇到的一些问题

    • 我发现把boss的求职状态设置成[在职-暂不考虑]比设置成[离职-随时到岗]更有用,设置成[在职-暂不考虑]然后每天还正常的刷boss会收到更多的消息,个人感受,无实际依据.
    • boss上有一部分人,不是hr也是不是team leader,但是也会找你要简历,这部分八成是赚内推奖励的,我的简历就被莫名其妙的推过几次,对于这种情况我不置可否,但是如果你有确定的内推人的话,最好甄别一下这种情况,把内推奖励留给小伙伴.

整体节奏(时间安排)

第一周,主要用来回顾一下基础知识,看了下一些比较重要的知识点,没怎么看面试题,面试题基本上都是通过面试来查漏补缺的.同时开始约下周的面试.
第二周,开始面试,基本都是视频面,上午一场下午一场,好留出来时间整理遇到的问题.周六日基本不约面试,同时开始约下周的面试.这周的面试基本上全挂一面,惨不忍睹,当然也有拿offer的,作为保底.这不重要,重要的是查漏补缺,找出自己准备的和面试的差距.好有的放矢.
第三周,面试节奏放慢了一点,面试题都过了一遍了,所以这周基本上都能进二面了,也拿到了一些offer,这时候去推掉第二周拿到的offer.
第四周,这时候面试节奏更慢了,基本上是第三周面试进入比价靠后的面试和一些临时约的面试.这时候拿到的offer之后去推掉上周的offer.这周之后基本上面试结束,找工作告一段落,纠结纠结手里的offer,作出决定,然后等着入职就行了.

面试题整理

常规知识点

在第一周的时候整理基础知识的时候侧重回顾的一些知识点,这里列一下

  • js基础知识
  • 从输入url到获得页面经历的所有事情(越细越好)
  • 原型链
  • 继承
  • es6新特性
  • DOM事件和事件流
  • 盒子模型
  • 事件循环
  • BFC
  • Flex
  • Promise原理以及手写代码
  • vue响应式原理
  • vue虚拟dom & diff算法
  • 前端性能优化
  • 防抖和节流
  • HTTP缓存
  • 常见算法(排序洗牌等)

面试中遇到的高频题(跟上面会有重合)

  • 事件循环
  • 原型链
  • vue响应式原理
  • HTTP缓存
  • 防抖和节流
  • vue3解决什么问题
  • Vue 为什么不能检测数组和对象的变化,怎么处理(为什么通过索引操作数组不能触发响应式)
  • vue router原理
  • v-model实现原理
  • vue.nexttick
  • https的过程
  • 性能优化
  • promise(基本上要求可以手写Promise.all方法,这个问的最多)
  • async/await
  • 从输入url到看到页面经历的所有事情(越细越好,这道题知识点非常多)
  • 跨域形成原因以及解决方案
  • 深拷贝和浅拷贝(也会问到JSON.stringify JSON.parse这种方案的弊端)
  • 箭头函数和普通函数有什么区别
  • 最近在看什么新技术

低频但是需要注意的面试题

  • CSRF & XSS
  • chrome设置小于12px字体
  • node和浏览器事件循环有何不同
  • webpack tree shaking
  • map & set
  • 前端有哪些技术(腾讯面试题,面试官会顺着你说的技术一个一个展开问)
  • 实现一个call/bind(call,apply,bind区别)
  • get 和 post 的区别
  • BFC
  • yield
  • 如何给localStorage加上max-age功能
  • Object.defineProperties都有那些参数,以及参数解释
  • requestAnimation
  • 手写原型链和js各种继承模式
  • 让你重新做你做过的项目有什么可以改进的地方
  • 让一个元素消失的几种做法,有何不同,对子元素的影响
  • 如何遍历对象(接下来会问有何不同)
  • 搜索框输入需要注意的点(其实还是在问防抖)
  • 原生实现inserAfter
  • 事件委托应用场景,e.target和e.currentTarget区别
  • HTTP缓存,对应字段,cache-contron都有那些值
  • new过程都发生了什么

面试遇到的算法题

  • 排序算法(冒泡,快排)
  • 洗牌算法
  • v1.2.3 v0.3.0 这样的版本号比大小(找简单方法,不要随便写一个循环的版本)
  • 广度优先遍历
  • 用O(n)的复杂度合并两个有序数组
  • 数组生成树形结构
    var arr = [
        { id: 1, value: "节点1", p_id: 0 },
        { id: 2, value: "节点2", p_id: 1 },
        { id: 3, value: "节点3", p_id: 1 },
        { id: 4, value: "节点4", p_id: 2 },
        { id: 5, value: "节点5", p_id: 0 },
        { id: 6, value: "节点6", p_id: 5 },
        { id: 7, value: "节点7", p_id: 6 },
        { id: 8, value: "节点8", p_id: 6 },
    ];
    // 输出
    [{
        "id": 1,
        "value": "节点1",
        "p_id": 0,
        "children": [
            {
                "id": 2,
                "value": "节点2",
                "p_id": 1,
                "children": [
                    {
                        "id": 4,
                        "value": "节点4",
                        "p_id": 2,
                        "children": []
                    }
                ]
            },
            {
                "id": 3,
                "value": "节点3",
                "p_id": 1,
                "children": []
            }
        ]
    },
    {
        "id": 5,
        "value": "节点5",
        "p_id": 0,
        "children": [
            {
                "id": 6,
                "value": "节点6",
                "p_id": 5,
                "children": [
                    {
                        "id": 7,
                        "value": "节点7",
                        "p_id": 6,
                        "children": []
                    },
                    {
                        "id": 8,
                        "value": "节点8",
                        "p_id": 6,
                        "children": []
                    }
                ]
            }
        ]
    }]
  • 数组L型输出
// L型输出
var arr = [

    ['1', '2', '3'],

    ['4', '5', '6'],

    ['7', '8', '9'],

];
// 输出大致顺序 1 4 7 8 9 2 5 6 3
  • 数组求排列组合
// 数组排列组合
var arr = [
    ['A', 'B', 'C'],
    [1, 2, 3],
    ['X', 'Y', 'Z'],
];
// 输出类似 A1X A1Y A1Z ...
  • 实现一个函数 find(obj, str),满足
var obj = {a:{b:{c:1}}};
find(obj,'a.b.c') //1
find(obj,'a.d.c') //undefined
  • 乒乓球比赛判断输赢(这个表达起来费劲,但是是个贴合实际开发场景的例子.不常见,但是不难)

这些是能回忆出来的部分,算法题普遍没有那么难,递归比较多,另外能用简单的方式就用简单的方式,这样才能凸显能力.

感悟和总结

  • 到手的offer,最后选择去百度了

    • 百度(具体部门就不说了)
    • 美团(优选)
    • 去哪儿(机票)
    • 作业帮(成人教育)
    • 天眼查(企服)
    • 一个小公司
  • 一定要避免类似面试官问你项目中遇到什么问题没,你说没问题都解决了这样的回答,基本必挂(网易二面经验)
  • 上面的面试题同一个问题会有不同的表述,所以要认真审题,搞清楚问的知识点,避免面试官问在第三层,而你只答在第一层这样的事情,太拉跨(腾讯一面经验)
  • 找工作是个概率的事情,面试的次数多了就会中
  • 内推有时会可能会有意想不到的加持(面作业帮的体会)
  • 日常我们要留意构建自己的基础知识体系,这样在面试准备的时候不用恶补太多基础知识

最后希望在找工作的同学保持心态,都能顺利找到理想的工作.

查看原文

赞 129 收藏 85 评论 18

记住你是谁 收藏了文章 · 2020-09-29

vue源码中值得学习的方法

最近在深入研究vue源码,把学习过程中,看到的一些好玩的的函数方法收集起来做分享,希望对大家对深入学习js有所帮助。如果大家都能一眼看懂这些函数,说明技术还是不错的哦。

1. 数据类型判断

Object.prototype.toString.call()返回的数据格式为 [object Object]类型,然后用slice截取第8位到倒一位,得到结果为 Object

var _toString = Object.prototype.toString;
function toRawType (value) {
  return _toString.call(value).slice(8, -1)
}

运行结果测试

toRawType({}) //  Object 
toRawType([])  // Array    
toRawType(true) // Boolean
toRawType(undefined) // Undefined
toRawType(null) // Null
toRawType(function(){}) // Function

2. 利用闭包构造map缓存数据

vue中判断我们写的组件名是不是html内置标签的时候,如果用数组类遍历那么将要循环很多次获取结果,如果把数组转为对象,把标签名设置为对象的key,那么不用依次遍历查找,只需要查找一次就能获取结果,提高了查找效率。

function makeMap (str, expectsLowerCase) {
    // 构建闭包集合map
    var map = Object.create(null);
    var list = str.split(',');
    for (var i = 0; i < list.length; i++) {
      map[list[i]] = true;
    }
    return expectsLowerCase
      ? function (val) { return map[val.toLowerCase()]; }
      : function (val) { return map[val]; }
}
// 利用闭包,每次判断是否是内置标签只需调用isHTMLTag
var isHTMLTag = makeMap('html,body,base,head,link,meta,style,title')
console.log('res', isHTMLTag('body')) // true

3. 二维数组扁平化

vue中_createElement格式化传入的children的时候用到了simpleNormalizeChildren函数,原来是为了拍平数组,使二维数组扁平化,类似lodash中的flatten方法。

// 先看lodash中的flatten
_.flatten([1, [2, [3, [4]], 5]])
// 得到结果为  [1, 2, [3, [4]], 5]

// vue中
function simpleNormalizeChildren (children) {
  for (var i = 0; i < children.length; i++) {
    if (Array.isArray(children[i])) {
      return Array.prototype.concat.apply([], children)
    }
  }
  return children
}

// es6中 等价于
function simpleNormalizeChildren (children) {
   return [].concat(...children)
}

4. 方法拦截

vue中利用Object.defineProperty收集依赖,从而触发更新视图,但是数组却无法监测到数据的变化,但是为什么数组在使用pushpop等方法的时候可以触发页面更新呢,那是因为vue内部拦截了这些方法。

 // 重写push等方法,然后再把原型指回原方法
  var ARRAY_METHOD = [ 'push', 'pop', 'shift', 'unshift', 'reverse',  'sort', 'splice' ];
  var array_methods = Object.create(Array.prototype);
  ARRAY_METHOD.forEach(method => {
    array_methods[method] = function () {
      // 拦截方法
      console.log('调用的是拦截的 ' + method + ' 方法,进行依赖收集');
      return Array.prototype[method].apply(this, arguments);
    }
  });

运行结果测试

var arr = [1,2,3]
arr.__proto__ = array_methods // 改变arr的原型
arr.unshift(6) // 打印结果: 调用的是拦截的 unshift 方法,进行依赖收集

5. 继承的实现

vue中调用Vue.extend实例化组件,Vue.extend就是VueComponent构造函数,而VueComponent利用Object.create继承Vue,所以在平常开发中VueVue.extend区别不是很大。这边主要学习用es5原生方法实现继承的,当然了,es6中 class类直接用extends继承。

  // 继承方法 
  function inheritPrototype(Son, Father) {
    var prototype = Object.create(Father.prototype)
    prototype.constructor = Son
    // 把Father.prototype赋值给 Son.prototype
    Son.prototype = prototype
  }
  function Father(name) {
    this.name = name
    this.arr = [1,2,3]
  }
  Father.prototype.getName = function() {
    console.log(this.name)
  }
  function Son(name, age) {
    Father.call(this, name)
    this.age = age
  }
  inheritPrototype(Son, Father)
  Son.prototype.getAge = function() {
    console.log(this.age)
  }

运行结果测试

var son1 = new Son("AAA", 23)
son1.getName()            //AAA
son1.getAge()             //23
son1.arr.push(4)          
console.log(son1.arr)     //1,2,3,4

var son2 = new Son("BBB", 24)
son2.getName()            //BBB
son2.getAge()             //24
console.log(son2.arr)     //1,2,3

6. 执行一次

once 方法相对比较简单,直接利用闭包实现就好了

function once (fn) {
  var called = false;
  return function () {
    if (!called) {
      called = true;
      fn.apply(this, arguments);
    }
  }
}

7. 对象判断

vue源码中的looseEqual 判断两个对象是否相等,先类型判断再递归调用,总体也不难,学一下思路。

function looseEqual (a, b) {
  if (a === b) { return true }
  var isObjectA = isObject(a);
  var isObjectB = isObject(b);
  if (isObjectA && isObjectB) {
    try {
      var isArrayA = Array.isArray(a);
      var isArrayB = Array.isArray(b);
      if (isArrayA && isArrayB) {
        return a.length === b.length && a.every(function (e, i) {
          return looseEqual(e, b[i])
        })
      } else if (!isArrayA && !isArrayB) {
        var keysA = Object.keys(a);
        var keysB = Object.keys(b);
        return keysA.length === keysB.length && keysA.every(function (key) {
          return looseEqual(a[key], b[key])
        })
      } else {
        /* istanbul ignore next */
        return false
      }
    } catch (e) {
      /* istanbul ignore next */
      return false
    }
  } else if (!isObjectA && !isObjectB) {
    return String(a) === String(b)
  } else {
    return false
  }
}
function isObject (obj) {
  return obj !== null && typeof obj === 'object'
}

由上思路我自己写一个深拷贝方法,不过简单的深拷贝我们可以用 JSON.stringify() 来实现即可。

function deepClone(source) {
  if (!source && typeof source !== 'object') {
    throw new Error('error arguments', 'deepClone')
  }
  const targetObj = source.constructor === Array ? [] : {}
  Object.keys(source).forEach(keys => {
    if (source[keys] && typeof source[keys] === 'object') {
      targetObj[keys] = deepClone(source[keys])
    } else {
      targetObj[keys] = source[keys]
    }
  })
  return targetObj
}

就先分享这些函数,其他函数,后面继续补充,如有不对欢迎指正,谢谢!

查看原文

记住你是谁 收藏了文章 · 2020-09-18

展示代码的6种绝佳方式

很多时候,开发人员需要展示代码段,可能是用于演示,博客或者是摘要。

那么有哪些程序代码的工具呢?

1. Polacode

https://github.com/octref/pol...

如果你喜欢VS Code,那么这个适合你! Polacode 是一个VS Code扩展,可以直接从 VSCode 获取漂亮的代码屏幕截图。

2. carbon.now.sh

https://carbon.now.sh/

创建并共享源代码的精美图片。

开始输入或将文件拖入文本区域以开始使用。

你还可以将 GitHubcarbon 连接起来。

3. codeimg.io

https://codeimg.io/

关于 codeimg 最好的部分是他们已经有社交媒体模板。因此,不必担心画布大小。

从功能上来说,与 carbon.now.sh 相比, codeimg 有更多选项。

这是使用codeimg.io创建的 Facebook 模板

4. Pastie

http://pastie.org/

如果您喜欢极简主义,并且只想共享代码作为链接而不是截图,那么Pastie就是您的理想选择。

这是在朋友/同事之间共享代码的完美选择。 Pastie生成的链接有效期为24小时。

注意:Pastie使用HTTP而不是HTTPS。这意味着它缺乏加密并且不安全。

5. Rust playground

https://play.rust-lang.org/

如果你是 Rust 开发者,那么这个将适合你。

在浏览器界面上运行 Rust 编译器,以尝试使用该语言。和 Pastie 一样,它也可以共享代码段链接。

6. Silicon

https://github.com/Aloxaf/sil...

这是用 Rust 语言实现的 carbon.now.sh。

Silicon 可以解决的carbon.now.sh问题:

  • 没有Internet和浏览器就无法工作。
  • 无法与Shell配合使用。 (尽管有carbon-now-cli,但是它的体验不是很好,特别是当网络不太好时。)

用法:

silicon main.rs -o main.png 

好嘛,如果看到这里,说明是真爱了。要不要给我的 GitHub 增加一个 star。

关注公众号,加入技术交流群

WechatIMG167.jpeg

查看原文

记住你是谁 收藏了文章 · 2020-09-18

css多列瀑布流布局

一、效果图

image.png

二、代码

<!DOCTYPE html>
<html>
<head>
<style>
    /* https://www.cnblogs.com/bbc66/p/9434217.html */
    html,body{
        padding: 0;margin: 0;
    }
    .box {
        padding: 10px;
        /* display: flex;
        flex-flow:column wrap; */
        /* height: 100vh; */
        column-count:2;
        /*指定列宽*/
        /* column-width:500px; */
        /*指定列与列之间的间距*/
        column-gap: 10px;
        /*指定列与列之间间隙的样式*/
        /*column-rule:2px dotted red*/
        /*相对应下面的三个属性*/
        /* column-rule-color:red;
        column-rule-style:dotted;
        column-rule-width:2px; */
    }
    .item {
        /* margin: 10px; */
        margin-bottom: 10px;
        /* width: calc(100%/3 - 20px); */
        height:300px;
    }
    .item img{
        width: 100%;
        height:100%;
        background: pink;
    }
</style>
</head>
<body>
    <div class="box">
        <div class="item" style="height: 200px;">
            <img data-original="banner.jpg" alt="" />
        </div>
        <div class="item">
            <img data-original="show.jpg" alt="" />
        </div>
        <div class="item" style="height: 120px;">
            <img data-original="cloth.jpg" alt="" />
        </div>
        <div class="item" style="height: 500px;">
            <img data-original="banner.jpg" alt="" />
        </div>
        <div class="item">
            <img data-original="show.jpg" alt="" />
        </div>
        <div class="item">
            <img data-original="cloth.jpg" alt="" />
        </div>
        <div class="item">
            <img data-original="banner.jpg" alt="" />
        </div>
        <div class="item" style="height: 100px;">
            <img data-original="show.jpg" alt="" />
        </div>
        <div class="item">
            <img data-original="cloth.jpg" alt="" />
        </div>
        <div class="item">
            <img data-original="show.jpg" alt="" />
        </div>
        <div class="item">
            <img data-original="cloth.jpg" alt="" />
        </div>
        <div class="item">
            <img data-original="banner.jpg" alt="" />
        </div>
    </div>
</body>
查看原文

记住你是谁 收藏了文章 · 2020-08-14

个人分享--web前端学习资源分享

1.前言

6月份开始出没社区,现在差不多9月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了!一般来说,差不多到了转正的时候,会进行总结或者分享会议!那么今天我就把看过的一些学习资源(主要是博客,博文)推荐分享给大家。从我接触前端的开始,到发稿时间截止的这段时间我看过很多的博客,开源项目也了解过一些,质量有参差不齐(甚至还出现过广告文,鸡汤文)。但下面的推荐的博客,博文,项目或者其它资源都是我接触过的。不敢说资源最好,最全,适合每一个人,但是内容质量上让我满意的。可能有些资源我未必看完,看懂,看细。但我觉得是可以帮到大家的,能让大家提升技术水平的。希望能给大家起到一个引导,指路或者解惑的作用。如果大家有什么好的资源,也欢迎分享!

有一些资源链接,在后面我会加上括号的注释!比如:html5推广(介绍html5开发的创意广告) ,我加上注释的原因可能有以下几点:
1.资源很不错,干货比较多,提醒大家看!
2.资源是一个系列的其中一个资源。比如一个系列有20多篇文章,每一篇都有用,我不可能把20多篇链接都贴上,所以一般我贴这个系列的第一条,提醒大家不要忘记读完所在系列!
3.资源里面的内容有些我个人觉得很有用,有些我觉得没什么用!提醒大家挑着看,按需求看!
4.资源的标题可能会有些小误导,或者资源的其它注意事项,我加以自己的解释和备注。

2.推荐文章(教程)

html(5)

后HTML5时代I
后HTML5时代II(简单粗暴的介绍html5的api,没什么废话)
html5推广(介绍html5开发的创意广告)
匠心打造canvas签名组件
HTML5/CSS3(汤姆大叔总结的html5和css3的新特性)
H5动画开发快车道
移动H5前端性能优化指南
玩转HTML5移动页面
HTML5 进阶系列:文件上传下载
HTML5 进阶系列:canvas 动态图表
HTML5 进阶系列:拖放 API 实现拖放排序(这个系列的文章都不错,值得大家一看)
H5动效的常见制作手法
超多经典 canvas 实例,动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等
打造高大上的Canvas粒子动画

css(3)

CSS3属性教程与案例分享(大漠的CSS3干货,进去里面可以逐个看,对css3的学习很有用)
CSS3实现11种经典的CSS技术(大漠的CSS3经典实例干货,对css3的学习很有用)
W3cplus demo(w3cplus的案例,非常值得一看)
强大的css3(概括性的说明css3的新特性的一篇文章)
css3经典教程系列(不要忘记看完这个系列,文章都不错)
如何编写轻量级 CSS 框架
21条CSS高级技巧
原创:CSS3技术-雪碧图自适应缩放与精灵动画方案
Flex 布局教程:语法篇
Flex 布局教程:实例篇
奇妙的 CSS shapes(CSS图形)
使用CSS3制作各种形状的图形(转自others)
有趣的CSS题目(1): 左边竖条的实现方法(看了第一篇,可以往下面看,总会会帮助的,不过这个网站有时候加载不出图片,如果加载不出图片,放弃还是坚持,大家抓主意)
纯 CSS 实现波浪效果!
使用浏览器开发者工具检测CSS动画性能
搞定这些疑难杂症,向css3动画说yes
Effective前端1:能使用html/css解决的问题就不要使用JS
如何让你的动画更自然
css画图形
css各种鼠标效果
深入了解 CSS3 新特性(也是概括性的总结,这个系列值得推荐)
前端如何呼风唤雨
:after和:before炫酷用法总结
神奇的 conic-gradient 圆锥渐变
10 个优质的 CSS 与 JS LOGO 动画示例
被解放的GPU-提高CSS3性能
【项目总结】扯一扯电商网站前端css的整体架构设计(1)(看了第一篇,别忘了看下面的一个系列)
(以下几篇是我自己的文章,主要就是总结css3新特性,css3动画和过渡的实例,觉得对大家也会有帮助的 (^__^))
个人总结(css3新特性)
CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动)
编写自己的代码库(css3常用动画的实现)

javascript

JavaScript核心概念归纳整理(概括性的说明js的一些核心概念)
从达标到卓越 —— API 设计之道
我眼中的 JavaScript 函数式编程
深入理解JavaScript系列(汤姆大叔写的JavaScript系列,对学习和深入js很有用)
javascript组件化
如何写出小而清晰的函数?(JS 版)
javascript对象详解:__proto__和prototype的区别和联系
理清javascript中的面向对象(一)——原型继承(这个专栏(实用至上)文章质量不错,值得留意)
微前端-Javascript常用的设计模式详解
10 个你需要了解的最佳 javascript 开发实践
深入理解javascript原型和闭包系列
JavaScript学习总结(一)基础部分(这个系列的文章不错,不要忘记看完这个系列不过大家得在发文章的专栏找下这个系列的文章,因为作者在这个专栏发文不是连着发一个系列,中间也夹杂着其它文章,不过也很好找。在这专栏(trigkit4)里面,即使不是这个系列的文章,我看过其中几篇,感觉也很好,大家可以留意下)
JavaScript设计模式与开发实践 | 01 - 面向对象的JavaScript(这个系列的教程不错,《JavaScript设计模式与开发实践》的笔记,这本书我也看过,这本书不错,作者整理总结得也不错,大家看完,收获不少)
JavaScript 函数式编程存在性能问题么?
如何让 JS 写得更漂亮
JS的平凡之路--学习人气眼中的效果(上)
你还在用for循环大法麽?
前端模板的原理与实现
只有20行Javascript代码!手把手教你写一个页面模板引擎
【教学向】150行代码教你实现一个低配版的MVVM库(1)- 原理篇
【教学向】150行代码教你实现一个低配版的MVVM库(2)- 代码篇(可以关注这篇文章对应的专栏,写得不错,不知道作者还会不会写下一篇)
如何循序渐进、有效地学习JavaScript?
过目不忘JS正则表达式
JavaScript 进阶之深入理解数据双向绑定
利用 JavaScript 数据绑定实现一个简单的 MVVM 库
正则表达式30分钟入门教程
如何监听页面 DOM 变动并高效响应
IntersectionObserver API 使用教程(利用这个API可以更简单的实现图片懒加载和其它事情,性能也更高)
(下面三个连接,是知乎上的几个话题,里面的回答质量参差不齐,大家可以挑些高质量的回答看,绝对有帮助)
作为一名前端开发人员,有哪些值得一读的js代码?
JavaScript 有什么奇技淫巧?
用 JavaScript 可以做哪些有趣的事情?
(以下几篇是我自己的文章,前两篇主要是写js常用的一些小实例,虽然觉得跟很多大牛的文章比起来有差距,但是我觉得写得也不错,对大家也是有用,就贴上链接,最后一篇是关于我印象深刻的面试题)
编写自己的代码库(javascript常用实例的实现与封装)
编写自己的代码库(javascript常用实例的实现与封装--续)
让我印象深刻的javascript面试题

javascript(es6)

阮一峰 es6(可以当作es6文档用的在线书籍)
ES6 你可能不知道的事 - 基础篇
ES6 你可能不知道的事 - 进阶篇
30分钟掌握ES6/ES2015核心内容(简单粗暴介绍es6核心)
八段代码彻底掌握 Promise
ECMAScript 6 新特性(总结性描写常用的es6新特性)

jquery

jquery源码分析
jQuery中的100个技巧(译)(看了这篇文章,感觉自己学的是假jquery,不过很多技巧我没有亲身试过,保留意见)
这几条JQuery提升性能的规则你需要牢记
JQuery坑,说说哪些大家都踩过的坑(对于刚接触的新人而言,这篇文章还有帮助)
jQuery学习笔记(总结性说明jquery常用的api,也不错)
jQuery插件开发总结

vue

vue官网
Vue2.x踩坑与总结
Vue 中你不知道但却很实用的黑科技
一个栗子实践vue2.0与1.0的区别
我从未见过如此简洁易懂的Vue教程
vue-API(2.3版本的API大全)
Vue.js 插件开发详解
vue插件编写与实战(从开发到发布的一个流程,实例简单易懂)
使用 Vue.js 创建的 Calendar
加薪DAY10」Vue开源项目库汇总(杂七杂八的库都有,质量当然也是有高有低,大家挑着看。)
Vue.js 的实用技巧(一)(看了第一篇,别忘记剩下的)
深入vue2.0底层思想--模板渲染
Vue.js——vue-router 60分钟快速入门
Vue2.1.7源码学习
剖析Vue实现原理 - 如何实现双向绑定mvvm
Vue.js入门(一)--MVVM框架理解
Vue2 源码分析——逻辑梳理
vue快速入门的三个小实例(我自己的文章,比较基础的用法,觉得也还不错,就放上来了)

webpack

(下面的文章,有些是webpack1.x和2.x的,考虑到现在已经更新到3.x了,大家看时候要注意区别)
webpack中文网
webpack官方文档
webpack使用优化(基本篇)
webpack常用功能介绍
开发工具心得:如何 10 倍提高你的 Webpack 构建效率
Webpack 大法之 Code Splitting
webpack多页应用架构系列(一):一步一步解决架构痛点(看了第一篇不要忘记剩下的,这个系列的文章不错)

gulp

gulp详细入门教程
前端构建工具gulp的使用介绍及技巧
gulp入门指南

react

(react我刚接触不久,暂时看过的网站就这两个)
React中国
React 技术栈系列教程
React组件规范

git

猴子都能懂的GIT入门
Git教程 - 廖雪峰的官方网站

browsersync

(Browsersync中文网 - 省时的浏览器同步测试工具)

node.js

使用npm - NodeSource的绝对入门指南
Node.js和npm - NodeSource中的Package.json的基础知识
配置.npmrc以获取最佳Node.js环境

Markdown

认识与入门 Markdown

yoeman

教你从零开始搭建一款前端脚手架工具

lodash

这是一个具有一致接口、模块化、高性能等特性的 JavaScript 工具库。
4.17.4版本

Fiddler

官网
Fiddler教程

调试

分享几个日常调试方法让js调试更简单
用 Chrome 调试你的 JavaScript
JavaScript 中 console 的用法(看了这篇和上面一篇文章,你可能会感觉以前根本不会使用console)

细节,优化

浅谈移动前端的最佳实践
前端优化带来的思考,浅谈前端工程化
前端优化实践总结
减少前端代码耦合
判断单、多张图片加载完成
终端代码重复率检测
【组件化开发】前端进阶篇之如何编写可维护可升级的代码
作为一个web开发人员,哪些技术细节是在发布站点前你需要考虑到的
【单页应用】我们该如何处理框架弹出层层级关系?
剥离模板代码加速Web页面加载
移动前端系列——移动页面性能优化
[聊一聊系列]聊一聊百度移动端首页前端速度那些事儿

其它

socket.io 中文手册 socket.io 中文文档
WebSocket 与 Socket.IO
VR进化论|教你搭建通用的WebVR工程
RxJS 入门
deeplearn.js:浏览器端机器智能框架

分享和技能清单

鸡年大吉!继续前行的前端周刊(第十五期)
前端收藏夹(和上面那篇一样,都是别人的总结的,干货不少,但是‘前端收藏夹’,可能是资源太多了,给我的感觉也有点一股脑放资源的感觉,只要是资源,都放进去,少部分资源质量有点低,建议大家带参考思想看)
移动web干货收藏夹
awesomes(前端一个巨大的资源库,里面的资源应有尽有)
知识库(拥有很多语言,框架,库的知识图谱,值得一看!能让你了解哪个语言,框架,库所包含的知识点,每一个知识点的详情讲解,也有栗子和文章,如:javascript知识图谱html5知识图谱react知识图谱
前端资源分享
送给前端的你,推荐几篇前端汇总文章。 - 知乎专栏
前端面试问题合集(Front-end-Developer-Interview-Questions)
github上值得关注的前端项目
前端那点事儿(书列)
FPB 2.0:免费的计算机编程类中文书籍 2.0(迷渡大神分享的书籍,各类图书都有,也有前端的,大家可以挑着看)
腾讯 Web 工程师的前端书单
前端开发者手册
印记中文-手册(各种开发文档,webpack,vue,sass等)
(以下几个链接,不是文章,也不算问题吧,都是segmentfault官方举行的比赛,分享或者讨论的内容,在上面看大神的分享,代码,绝对有收获)
1024 HackGame 第四关面壁人这些题目是怎么想出来的?
把 SegmentFault 全部带回家 —— 码文章,送周边
官方送书活动第二弹 —— 增长姿势之SF喊你来谈开发
官方活动,深入浅出之SF喊你来谈开发!一起来分享一下你的开发知识?
官方30行js比赛:30行js你能做出什么?
【官方比赛】社区 1111 秀代码,让你来秀让你飞!

3.推荐博客

团队博客

淘宝前端团队fed
阿里巴巴
百度前端团队
360奇舞团
奇舞团视频教程
京东设计体验部-凹凸实验室
腾讯网前端研发中心
腾讯alloyteam
腾讯前端IMWEB团队
腾讯前端IMWEB团队-github
腾讯游戏
新浪UED
大前端(饿了么)
(上面的团队博客,值得关注,博文内容质量很高,但是就是更新不频繁,下面的更新会比较多,质量也不错)
搜车大无线团队博客
极乐科技
IMWeb前端社区
爱前端-知乎专栏
前端杂货铺
前端外刊评论
前端解忧杂货铺
DDFE 技术周刊
前端之巅
Fed汇总

大牛博客

十年踪迹
张鑫旭
阮一峰
叶小钗
司徒正美博客
廖雪峰
勾三股四
chokCoCo
chokCoCo-github

4.推荐书籍

我看过的书比较杂七杂八,与前端有关的,推荐的就是下面这些了!下面的书,我都看过,区别就在于有些我是整本都看完了(有些也来回看过几次),有些粗略的看了其中一部分(有些就看了几页)!

关于看书的建议,下面的书,大家可以根据自己的需求兴趣去挑着看。一本书,不要看完就可以了,要弄懂书中的内容。有些书值得大家来回看几遍的!

关于书的资源,下面的推荐的书(我看的是电子书)我都是从网上下载的。为避免侵权,我在这里就不放资源的链接了!大家自行购买纸质书或者电子书,或者到网上找资源!

JavaScript高级程序设计》:(红皮书或者红宝石书)可以作为入门书籍,但同时也是高级书籍,可以快速吸收基础,等到提升再回来重新看
JavaScript权威指南》:(犀牛书)可以说是js最经典的一本书了,新手看着可能会有点吃力,但是对于学js的人来说,必备的,不理解的地方就去查阅一下,很有帮助。
数据结构与算法JavaScript描述》(刺猬书)
编写可维护的JavaScript》(乌龟书)
JavaScript DOM编程艺术 第2版
JavaScript语言精粹》(蝴蝶书):经典的书,也是普及JavaScript的开发思维的一本书。
JavaScript设计模式 》-张榕铭(百度员工写的一本书,案例生动易懂,涉及的设计模式比较全)
JavaScript设计模式与开发实践》-曾琛(腾讯员工写的一本书,讲了js里面更加常用的14个设计模式)
单页Web应用 JavaScript从前端到后端
ECMAScript 6 入门》可以作为es6新特性文档的一本书,而且这本书开源了,直接看就好!需要的也可以购买!
HTML5移动Web开发实战
HTML5移动Web开发指南
HTML5 Canvas核心技术》:对于感受canvas的魅力,使用,动画的实现,都非常有帮助。
html5与css3权威指南 第三版》-陆凌牛,这本书貌似有同名的,注意作者,另外该书分上册和下册的。我当时看的是第二版,现在已经出了第三版就推荐第三版了。
锋利的jquery》:我学jquery就是看这本书,这本书给我身边的同行印象不是很好,但是我感觉不错,而且我学jquery就看了这一本书,就推荐这本了!
了不起的Node js 将JavaScript进行到底
css揭秘》:看了这本书,我再也不敢说自己会css了!里面很多都是你想不到的!

5.推荐社区

我推荐社区虽然有这么多个,但是我注册账号并且活跃的只有两三个,其它的社区基本都是我在学习的时候偶然接触到的,并且觉得不错的,所以也推荐下。至于大家想活跃哪几个社区,就看大家的选择了。如果大家有什么好的社区资源,也不妨推荐下!

github:这个起初我经常在上面找资源。但是没注册账号,但是后来被老大催着注册,就去了。在里面可以阅读别人的代码,向大家学习!
segmentfault:我现在活跃的一个社区,主打问答,也有文章和讲堂,质量也很不错!
知乎:虽然不是单纯的IT社区,但是里面有很多大牛和高质量的专栏!
stackoverflow:一个问答社区,基本上各种问题都能在上面获得解答
w3cplus:一个前端学习的网站,里面的文章质量都挺不错的,特别是关于CSS(3)的
前端网
前端乱炖:一个前端文章分享的社区,有很多优秀文章
开发者头条
前端周刊
HTML5梦工场
毕业僧
慕课网(貌似现在很多视频收费了,以前我看的时候,基本都是免费的)
稀土掘金
汇智网

6.公众号

前端大全

clipboard.png

segmentfault

clipboard.png

前端之巅

clipboard.png

前端早读课

clipboard.png

W3cplus

clipboard.png

稀土圈

clipboard.png

(以上图片来源网络)

7.推荐关注项目

github上的项目

vue
react(我只接触过几次react,使用起来还不错,现在也正在学习)
gulp
webpack
d3
chart(和d3一样,属于数据可视化方面,体验过。但是在项目上没用过,感觉功能强大,就推荐下)
element-ui(基于vue2.x开发的一个组件库,一般用于后台管理系统开发,现在我们公司开发的后台管理就是用这个)
muse-ui(同样是基于vue的组件库,ui非常的漂亮)
一起学 Node.js
AlloyTeam移动端手势解决方案
frontend-dev-bookmarks(前端各方面的学习清单)
免费的编程中文书籍(中文分享书籍,不止前端,各方面都有,大家按需查看)
animate.css
hover.css
muse-ui(基于vue2.0的一个UI库,样式漂亮,种类全)
CSS3 实现各类3D效果的博客(和下面三个连接同属一个作者,这个大牛的作品不错,效果酷炫,虽然star数量与其它几个推荐项目没法比,但是很值得推荐)
chokcoco/boomJS
chokcoco/magicCss
chokcoco/iCSS

梁少峰的个人博客(里面的文章质量也不错,各种都有,js,jquery,vue,react,node.js等)
RxJs
deeplearn(谷歌出版,一个关于人工智能深度学习的框架,有兴趣可以看,我看了一会,没看懂)

(下面这两个是我自己的开发的项目,虽然跟其他项目比较欠缺火候,但是还不至于用不了或者拿不出手的地步,也算是我的一个小广告吧!(●'◡'●))
ec-do(封装了日常开发常用的javascript实例,实例为日常开发常用的小实例,包括数组去重,打乱数组,字母大小写转换,cookie操作的封装等。)
ec-css(基于css3开发的代码库,包括日常使用的hover过渡效果,动画效果,以及预设动画)

其它推荐项目

腾讯css3 ui库
NEC : 更好的CSS样式解决方案(网易的一个css3解决方案,但是貌似挺旧了,不维护了,但是里面的案例大家可以参考,绝对有收获)

8.综合项目教程(学习实录)

使用node.js + socket.io + redis实现基本的聊天室场景
前端开发,从草根到英雄(第一部分)
前端开发,从草根到英雄(第二部分)
我的前端进阶之路(看着标题以为是杂谈,实际上感觉是一篇总结性文章,大家可以看下)
为你的移动页面寻找一丝新意——手机互动网页项目总结(上)
为你的移动页面寻找一丝新意——手机互动网页项目总结(下)
前端开发指南2017
【实战HTML5与CSS3 第一篇】初探水深,美丽的导航,绚丽的图片爆炸!!(看完别忘记下面的,是叶小钗大神仿智能社官网的实战)
基于 Vue 2.0 实现的移动端弹窗 (Alert, Confirm, Toast)组件.
发现最好的你-设计中如何打造最合适的组件
webpack+vue项目实战(一,搭建运行环境和相关配置)(我自己的文章,关于使用vue+webpack开发一个单页应用,一个后台管理系统的开发搭建,这个系列一共有五篇文章)

9.开发杂谈

OpenDoc - 前端简历评级标准(美团出的一份简历评级,可以适当参考下,对比下自己的实力和美团评级。当然有兴趣的也可以去面试)
前端代码规范及最佳实践
Vue.js 很好,但是比 Angular 或 React 更好吗?
聊聊技术选型 - Angular2 vs Vue2
写给前端工程师看的,移动应用选型指南
网站架构-从无到有
前端架构那些事儿
技术大牛养成指南,一篇不鸡汤的成功学实践
6 个值得好好学习的 JavaScript 框架
更快学习 JS 的 6 个简单思维技巧
程序员怎么学英语
8个让程序员追悔莫及的职业建议
当心!程序员应警惕七种错误的职业规划
1024程序员节,写给年轻程序员的建议
给新程序员的10条建议
前端框架这么多,该何去何从?
2017年前端开发工具趋势
现代前端开发技术栈
听说2017你想写前端?
如何跟上前端开发的最新前沿
前端开发人员必须了解的七大技能图谱
前端技能汇总(JacksonTian)
另一张前端技能汇总图(和上面的链接一样,但是看的话,建议大家带参考的思想看)
怎样成长为一个优秀的 Web 前端开发工程师?
月薪10-12k的前端人员应该具备怎样一种技术水平?
作为一名前端开发人员,有哪些值得一读的js代码?
hexo高阶教程:教你怎么让你的hexo博客在搜索引擎中排第一(有兴趣的可以看一下,有用)
开放源码的法律面(因为国外对版权,许可证很是注重,该文章就讲代码开源后关于许可证的文章,看得我有点蒙,但是最终整理后,我以后的开源项目就用MIT)

10.开发经常会接触的网站

MDN-web技术文档
智图_图片压缩在线工具_在线制作webp
多视通图片转换Base64
微信JS-SDK说明文档
草料二维码
菜鸟教程
w3cschool

11.小结

好了,我学前端看过的博客文章,关注过的大牛和项目,项目技术栈的教程基本都在这里了!我分享的这些,不敢说最好,最全,适合每个人。但是都是我看过或者接触过的,至少内容上让我满意的,让我觉得是对学习有用的,能帮到大家的。如果大家有什么学习资源推荐的,我也希望大家不吝啬的共享给我,给大家!
还有一个建议就是,学习web前端,上面分享的可以起到一个引导,指路,解惑的作用。但是,大家不要忘记多练,毕竟实操最重要!大家有空余的时间或者周末也可以自己做下自己有兴趣的项目,并且用在自己工作的项目开发上!项目不求比别人好,只求自己能练习,提升自己的技术水平!

-------------------------华丽的分割线--------------------
想了解更多,关注关注我的微信公众号:守候书阁

clipboard.png

查看原文

记住你是谁 收藏了文章 · 2020-08-14

个人分享--web前端学习资源分享

1.前言

6月份开始出没社区,现在差不多9月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了!一般来说,差不多到了转正的时候,会进行总结或者分享会议!那么今天我就把看过的一些学习资源(主要是博客,博文)推荐分享给大家。从我接触前端的开始,到发稿时间截止的这段时间我看过很多的博客,开源项目也了解过一些,质量有参差不齐(甚至还出现过广告文,鸡汤文)。但下面的推荐的博客,博文,项目或者其它资源都是我接触过的。不敢说资源最好,最全,适合每一个人,但是内容质量上让我满意的。可能有些资源我未必看完,看懂,看细。但我觉得是可以帮到大家的,能让大家提升技术水平的。希望能给大家起到一个引导,指路或者解惑的作用。如果大家有什么好的资源,也欢迎分享!

有一些资源链接,在后面我会加上括号的注释!比如:html5推广(介绍html5开发的创意广告) ,我加上注释的原因可能有以下几点:
1.资源很不错,干货比较多,提醒大家看!
2.资源是一个系列的其中一个资源。比如一个系列有20多篇文章,每一篇都有用,我不可能把20多篇链接都贴上,所以一般我贴这个系列的第一条,提醒大家不要忘记读完所在系列!
3.资源里面的内容有些我个人觉得很有用,有些我觉得没什么用!提醒大家挑着看,按需求看!
4.资源的标题可能会有些小误导,或者资源的其它注意事项,我加以自己的解释和备注。

2.推荐文章(教程)

html(5)

后HTML5时代I
后HTML5时代II(简单粗暴的介绍html5的api,没什么废话)
html5推广(介绍html5开发的创意广告)
匠心打造canvas签名组件
HTML5/CSS3(汤姆大叔总结的html5和css3的新特性)
H5动画开发快车道
移动H5前端性能优化指南
玩转HTML5移动页面
HTML5 进阶系列:文件上传下载
HTML5 进阶系列:canvas 动态图表
HTML5 进阶系列:拖放 API 实现拖放排序(这个系列的文章都不错,值得大家一看)
H5动效的常见制作手法
超多经典 canvas 实例,动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等
打造高大上的Canvas粒子动画

css(3)

CSS3属性教程与案例分享(大漠的CSS3干货,进去里面可以逐个看,对css3的学习很有用)
CSS3实现11种经典的CSS技术(大漠的CSS3经典实例干货,对css3的学习很有用)
W3cplus demo(w3cplus的案例,非常值得一看)
强大的css3(概括性的说明css3的新特性的一篇文章)
css3经典教程系列(不要忘记看完这个系列,文章都不错)
如何编写轻量级 CSS 框架
21条CSS高级技巧
原创:CSS3技术-雪碧图自适应缩放与精灵动画方案
Flex 布局教程:语法篇
Flex 布局教程:实例篇
奇妙的 CSS shapes(CSS图形)
使用CSS3制作各种形状的图形(转自others)
有趣的CSS题目(1): 左边竖条的实现方法(看了第一篇,可以往下面看,总会会帮助的,不过这个网站有时候加载不出图片,如果加载不出图片,放弃还是坚持,大家抓主意)
纯 CSS 实现波浪效果!
使用浏览器开发者工具检测CSS动画性能
搞定这些疑难杂症,向css3动画说yes
Effective前端1:能使用html/css解决的问题就不要使用JS
如何让你的动画更自然
css画图形
css各种鼠标效果
深入了解 CSS3 新特性(也是概括性的总结,这个系列值得推荐)
前端如何呼风唤雨
:after和:before炫酷用法总结
神奇的 conic-gradient 圆锥渐变
10 个优质的 CSS 与 JS LOGO 动画示例
被解放的GPU-提高CSS3性能
【项目总结】扯一扯电商网站前端css的整体架构设计(1)(看了第一篇,别忘了看下面的一个系列)
(以下几篇是我自己的文章,主要就是总结css3新特性,css3动画和过渡的实例,觉得对大家也会有帮助的 (^__^))
个人总结(css3新特性)
CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动)
编写自己的代码库(css3常用动画的实现)

javascript

JavaScript核心概念归纳整理(概括性的说明js的一些核心概念)
从达标到卓越 —— API 设计之道
我眼中的 JavaScript 函数式编程
深入理解JavaScript系列(汤姆大叔写的JavaScript系列,对学习和深入js很有用)
javascript组件化
如何写出小而清晰的函数?(JS 版)
javascript对象详解:__proto__和prototype的区别和联系
理清javascript中的面向对象(一)——原型继承(这个专栏(实用至上)文章质量不错,值得留意)
微前端-Javascript常用的设计模式详解
10 个你需要了解的最佳 javascript 开发实践
深入理解javascript原型和闭包系列
JavaScript学习总结(一)基础部分(这个系列的文章不错,不要忘记看完这个系列不过大家得在发文章的专栏找下这个系列的文章,因为作者在这个专栏发文不是连着发一个系列,中间也夹杂着其它文章,不过也很好找。在这专栏(trigkit4)里面,即使不是这个系列的文章,我看过其中几篇,感觉也很好,大家可以留意下)
JavaScript设计模式与开发实践 | 01 - 面向对象的JavaScript(这个系列的教程不错,《JavaScript设计模式与开发实践》的笔记,这本书我也看过,这本书不错,作者整理总结得也不错,大家看完,收获不少)
JavaScript 函数式编程存在性能问题么?
如何让 JS 写得更漂亮
JS的平凡之路--学习人气眼中的效果(上)
你还在用for循环大法麽?
前端模板的原理与实现
只有20行Javascript代码!手把手教你写一个页面模板引擎
【教学向】150行代码教你实现一个低配版的MVVM库(1)- 原理篇
【教学向】150行代码教你实现一个低配版的MVVM库(2)- 代码篇(可以关注这篇文章对应的专栏,写得不错,不知道作者还会不会写下一篇)
如何循序渐进、有效地学习JavaScript?
过目不忘JS正则表达式
JavaScript 进阶之深入理解数据双向绑定
利用 JavaScript 数据绑定实现一个简单的 MVVM 库
正则表达式30分钟入门教程
如何监听页面 DOM 变动并高效响应
IntersectionObserver API 使用教程(利用这个API可以更简单的实现图片懒加载和其它事情,性能也更高)
(下面三个连接,是知乎上的几个话题,里面的回答质量参差不齐,大家可以挑些高质量的回答看,绝对有帮助)
作为一名前端开发人员,有哪些值得一读的js代码?
JavaScript 有什么奇技淫巧?
用 JavaScript 可以做哪些有趣的事情?
(以下几篇是我自己的文章,前两篇主要是写js常用的一些小实例,虽然觉得跟很多大牛的文章比起来有差距,但是我觉得写得也不错,对大家也是有用,就贴上链接,最后一篇是关于我印象深刻的面试题)
编写自己的代码库(javascript常用实例的实现与封装)
编写自己的代码库(javascript常用实例的实现与封装--续)
让我印象深刻的javascript面试题

javascript(es6)

阮一峰 es6(可以当作es6文档用的在线书籍)
ES6 你可能不知道的事 - 基础篇
ES6 你可能不知道的事 - 进阶篇
30分钟掌握ES6/ES2015核心内容(简单粗暴介绍es6核心)
八段代码彻底掌握 Promise
ECMAScript 6 新特性(总结性描写常用的es6新特性)

jquery

jquery源码分析
jQuery中的100个技巧(译)(看了这篇文章,感觉自己学的是假jquery,不过很多技巧我没有亲身试过,保留意见)
这几条JQuery提升性能的规则你需要牢记
JQuery坑,说说哪些大家都踩过的坑(对于刚接触的新人而言,这篇文章还有帮助)
jQuery学习笔记(总结性说明jquery常用的api,也不错)
jQuery插件开发总结

vue

vue官网
Vue2.x踩坑与总结
Vue 中你不知道但却很实用的黑科技
一个栗子实践vue2.0与1.0的区别
我从未见过如此简洁易懂的Vue教程
vue-API(2.3版本的API大全)
Vue.js 插件开发详解
vue插件编写与实战(从开发到发布的一个流程,实例简单易懂)
使用 Vue.js 创建的 Calendar
加薪DAY10」Vue开源项目库汇总(杂七杂八的库都有,质量当然也是有高有低,大家挑着看。)
Vue.js 的实用技巧(一)(看了第一篇,别忘记剩下的)
深入vue2.0底层思想--模板渲染
Vue.js——vue-router 60分钟快速入门
Vue2.1.7源码学习
剖析Vue实现原理 - 如何实现双向绑定mvvm
Vue.js入门(一)--MVVM框架理解
Vue2 源码分析——逻辑梳理
vue快速入门的三个小实例(我自己的文章,比较基础的用法,觉得也还不错,就放上来了)

webpack

(下面的文章,有些是webpack1.x和2.x的,考虑到现在已经更新到3.x了,大家看时候要注意区别)
webpack中文网
webpack官方文档
webpack使用优化(基本篇)
webpack常用功能介绍
开发工具心得:如何 10 倍提高你的 Webpack 构建效率
Webpack 大法之 Code Splitting
webpack多页应用架构系列(一):一步一步解决架构痛点(看了第一篇不要忘记剩下的,这个系列的文章不错)

gulp

gulp详细入门教程
前端构建工具gulp的使用介绍及技巧
gulp入门指南

react

(react我刚接触不久,暂时看过的网站就这两个)
React中国
React 技术栈系列教程
React组件规范

git

猴子都能懂的GIT入门
Git教程 - 廖雪峰的官方网站

browsersync

(Browsersync中文网 - 省时的浏览器同步测试工具)

node.js

使用npm - NodeSource的绝对入门指南
Node.js和npm - NodeSource中的Package.json的基础知识
配置.npmrc以获取最佳Node.js环境

Markdown

认识与入门 Markdown

yoeman

教你从零开始搭建一款前端脚手架工具

lodash

这是一个具有一致接口、模块化、高性能等特性的 JavaScript 工具库。
4.17.4版本

Fiddler

官网
Fiddler教程

调试

分享几个日常调试方法让js调试更简单
用 Chrome 调试你的 JavaScript
JavaScript 中 console 的用法(看了这篇和上面一篇文章,你可能会感觉以前根本不会使用console)

细节,优化

浅谈移动前端的最佳实践
前端优化带来的思考,浅谈前端工程化
前端优化实践总结
减少前端代码耦合
判断单、多张图片加载完成
终端代码重复率检测
【组件化开发】前端进阶篇之如何编写可维护可升级的代码
作为一个web开发人员,哪些技术细节是在发布站点前你需要考虑到的
【单页应用】我们该如何处理框架弹出层层级关系?
剥离模板代码加速Web页面加载
移动前端系列——移动页面性能优化
[聊一聊系列]聊一聊百度移动端首页前端速度那些事儿

其它

socket.io 中文手册 socket.io 中文文档
WebSocket 与 Socket.IO
VR进化论|教你搭建通用的WebVR工程
RxJS 入门
deeplearn.js:浏览器端机器智能框架

分享和技能清单

鸡年大吉!继续前行的前端周刊(第十五期)
前端收藏夹(和上面那篇一样,都是别人的总结的,干货不少,但是‘前端收藏夹’,可能是资源太多了,给我的感觉也有点一股脑放资源的感觉,只要是资源,都放进去,少部分资源质量有点低,建议大家带参考思想看)
移动web干货收藏夹
awesomes(前端一个巨大的资源库,里面的资源应有尽有)
知识库(拥有很多语言,框架,库的知识图谱,值得一看!能让你了解哪个语言,框架,库所包含的知识点,每一个知识点的详情讲解,也有栗子和文章,如:javascript知识图谱html5知识图谱react知识图谱
前端资源分享
送给前端的你,推荐几篇前端汇总文章。 - 知乎专栏
前端面试问题合集(Front-end-Developer-Interview-Questions)
github上值得关注的前端项目
前端那点事儿(书列)
FPB 2.0:免费的计算机编程类中文书籍 2.0(迷渡大神分享的书籍,各类图书都有,也有前端的,大家可以挑着看)
腾讯 Web 工程师的前端书单
前端开发者手册
印记中文-手册(各种开发文档,webpack,vue,sass等)
(以下几个链接,不是文章,也不算问题吧,都是segmentfault官方举行的比赛,分享或者讨论的内容,在上面看大神的分享,代码,绝对有收获)
1024 HackGame 第四关面壁人这些题目是怎么想出来的?
把 SegmentFault 全部带回家 —— 码文章,送周边
官方送书活动第二弹 —— 增长姿势之SF喊你来谈开发
官方活动,深入浅出之SF喊你来谈开发!一起来分享一下你的开发知识?
官方30行js比赛:30行js你能做出什么?
【官方比赛】社区 1111 秀代码,让你来秀让你飞!

3.推荐博客

团队博客

淘宝前端团队fed
阿里巴巴
百度前端团队
360奇舞团
奇舞团视频教程
京东设计体验部-凹凸实验室
腾讯网前端研发中心
腾讯alloyteam
腾讯前端IMWEB团队
腾讯前端IMWEB团队-github
腾讯游戏
新浪UED
大前端(饿了么)
(上面的团队博客,值得关注,博文内容质量很高,但是就是更新不频繁,下面的更新会比较多,质量也不错)
搜车大无线团队博客
极乐科技
IMWeb前端社区
爱前端-知乎专栏
前端杂货铺
前端外刊评论
前端解忧杂货铺
DDFE 技术周刊
前端之巅
Fed汇总

大牛博客

十年踪迹
张鑫旭
阮一峰
叶小钗
司徒正美博客
廖雪峰
勾三股四
chokCoCo
chokCoCo-github

4.推荐书籍

我看过的书比较杂七杂八,与前端有关的,推荐的就是下面这些了!下面的书,我都看过,区别就在于有些我是整本都看完了(有些也来回看过几次),有些粗略的看了其中一部分(有些就看了几页)!

关于看书的建议,下面的书,大家可以根据自己的需求兴趣去挑着看。一本书,不要看完就可以了,要弄懂书中的内容。有些书值得大家来回看几遍的!

关于书的资源,下面的推荐的书(我看的是电子书)我都是从网上下载的。为避免侵权,我在这里就不放资源的链接了!大家自行购买纸质书或者电子书,或者到网上找资源!

JavaScript高级程序设计》:(红皮书或者红宝石书)可以作为入门书籍,但同时也是高级书籍,可以快速吸收基础,等到提升再回来重新看
JavaScript权威指南》:(犀牛书)可以说是js最经典的一本书了,新手看着可能会有点吃力,但是对于学js的人来说,必备的,不理解的地方就去查阅一下,很有帮助。
数据结构与算法JavaScript描述》(刺猬书)
编写可维护的JavaScript》(乌龟书)
JavaScript DOM编程艺术 第2版
JavaScript语言精粹》(蝴蝶书):经典的书,也是普及JavaScript的开发思维的一本书。
JavaScript设计模式 》-张榕铭(百度员工写的一本书,案例生动易懂,涉及的设计模式比较全)
JavaScript设计模式与开发实践》-曾琛(腾讯员工写的一本书,讲了js里面更加常用的14个设计模式)
单页Web应用 JavaScript从前端到后端
ECMAScript 6 入门》可以作为es6新特性文档的一本书,而且这本书开源了,直接看就好!需要的也可以购买!
HTML5移动Web开发实战
HTML5移动Web开发指南
HTML5 Canvas核心技术》:对于感受canvas的魅力,使用,动画的实现,都非常有帮助。
html5与css3权威指南 第三版》-陆凌牛,这本书貌似有同名的,注意作者,另外该书分上册和下册的。我当时看的是第二版,现在已经出了第三版就推荐第三版了。
锋利的jquery》:我学jquery就是看这本书,这本书给我身边的同行印象不是很好,但是我感觉不错,而且我学jquery就看了这一本书,就推荐这本了!
了不起的Node js 将JavaScript进行到底
css揭秘》:看了这本书,我再也不敢说自己会css了!里面很多都是你想不到的!

5.推荐社区

我推荐社区虽然有这么多个,但是我注册账号并且活跃的只有两三个,其它的社区基本都是我在学习的时候偶然接触到的,并且觉得不错的,所以也推荐下。至于大家想活跃哪几个社区,就看大家的选择了。如果大家有什么好的社区资源,也不妨推荐下!

github:这个起初我经常在上面找资源。但是没注册账号,但是后来被老大催着注册,就去了。在里面可以阅读别人的代码,向大家学习!
segmentfault:我现在活跃的一个社区,主打问答,也有文章和讲堂,质量也很不错!
知乎:虽然不是单纯的IT社区,但是里面有很多大牛和高质量的专栏!
stackoverflow:一个问答社区,基本上各种问题都能在上面获得解答
w3cplus:一个前端学习的网站,里面的文章质量都挺不错的,特别是关于CSS(3)的
前端网
前端乱炖:一个前端文章分享的社区,有很多优秀文章
开发者头条
前端周刊
HTML5梦工场
毕业僧
慕课网(貌似现在很多视频收费了,以前我看的时候,基本都是免费的)
稀土掘金
汇智网

6.公众号

前端大全

clipboard.png

segmentfault

clipboard.png

前端之巅

clipboard.png

前端早读课

clipboard.png

W3cplus

clipboard.png

稀土圈

clipboard.png

(以上图片来源网络)

7.推荐关注项目

github上的项目

vue
react(我只接触过几次react,使用起来还不错,现在也正在学习)
gulp
webpack
d3
chart(和d3一样,属于数据可视化方面,体验过。但是在项目上没用过,感觉功能强大,就推荐下)
element-ui(基于vue2.x开发的一个组件库,一般用于后台管理系统开发,现在我们公司开发的后台管理就是用这个)
muse-ui(同样是基于vue的组件库,ui非常的漂亮)
一起学 Node.js
AlloyTeam移动端手势解决方案
frontend-dev-bookmarks(前端各方面的学习清单)
免费的编程中文书籍(中文分享书籍,不止前端,各方面都有,大家按需查看)
animate.css
hover.css
muse-ui(基于vue2.0的一个UI库,样式漂亮,种类全)
CSS3 实现各类3D效果的博客(和下面三个连接同属一个作者,这个大牛的作品不错,效果酷炫,虽然star数量与其它几个推荐项目没法比,但是很值得推荐)
chokcoco/boomJS
chokcoco/magicCss
chokcoco/iCSS

梁少峰的个人博客(里面的文章质量也不错,各种都有,js,jquery,vue,react,node.js等)
RxJs
deeplearn(谷歌出版,一个关于人工智能深度学习的框架,有兴趣可以看,我看了一会,没看懂)

(下面这两个是我自己的开发的项目,虽然跟其他项目比较欠缺火候,但是还不至于用不了或者拿不出手的地步,也算是我的一个小广告吧!(●'◡'●))
ec-do(封装了日常开发常用的javascript实例,实例为日常开发常用的小实例,包括数组去重,打乱数组,字母大小写转换,cookie操作的封装等。)
ec-css(基于css3开发的代码库,包括日常使用的hover过渡效果,动画效果,以及预设动画)

其它推荐项目

腾讯css3 ui库
NEC : 更好的CSS样式解决方案(网易的一个css3解决方案,但是貌似挺旧了,不维护了,但是里面的案例大家可以参考,绝对有收获)

8.综合项目教程(学习实录)

使用node.js + socket.io + redis实现基本的聊天室场景
前端开发,从草根到英雄(第一部分)
前端开发,从草根到英雄(第二部分)
我的前端进阶之路(看着标题以为是杂谈,实际上感觉是一篇总结性文章,大家可以看下)
为你的移动页面寻找一丝新意——手机互动网页项目总结(上)
为你的移动页面寻找一丝新意——手机互动网页项目总结(下)
前端开发指南2017
【实战HTML5与CSS3 第一篇】初探水深,美丽的导航,绚丽的图片爆炸!!(看完别忘记下面的,是叶小钗大神仿智能社官网的实战)
基于 Vue 2.0 实现的移动端弹窗 (Alert, Confirm, Toast)组件.
发现最好的你-设计中如何打造最合适的组件
webpack+vue项目实战(一,搭建运行环境和相关配置)(我自己的文章,关于使用vue+webpack开发一个单页应用,一个后台管理系统的开发搭建,这个系列一共有五篇文章)

9.开发杂谈

OpenDoc - 前端简历评级标准(美团出的一份简历评级,可以适当参考下,对比下自己的实力和美团评级。当然有兴趣的也可以去面试)
前端代码规范及最佳实践
Vue.js 很好,但是比 Angular 或 React 更好吗?
聊聊技术选型 - Angular2 vs Vue2
写给前端工程师看的,移动应用选型指南
网站架构-从无到有
前端架构那些事儿
技术大牛养成指南,一篇不鸡汤的成功学实践
6 个值得好好学习的 JavaScript 框架
更快学习 JS 的 6 个简单思维技巧
程序员怎么学英语
8个让程序员追悔莫及的职业建议
当心!程序员应警惕七种错误的职业规划
1024程序员节,写给年轻程序员的建议
给新程序员的10条建议
前端框架这么多,该何去何从?
2017年前端开发工具趋势
现代前端开发技术栈
听说2017你想写前端?
如何跟上前端开发的最新前沿
前端开发人员必须了解的七大技能图谱
前端技能汇总(JacksonTian)
另一张前端技能汇总图(和上面的链接一样,但是看的话,建议大家带参考的思想看)
怎样成长为一个优秀的 Web 前端开发工程师?
月薪10-12k的前端人员应该具备怎样一种技术水平?
作为一名前端开发人员,有哪些值得一读的js代码?
hexo高阶教程:教你怎么让你的hexo博客在搜索引擎中排第一(有兴趣的可以看一下,有用)
开放源码的法律面(因为国外对版权,许可证很是注重,该文章就讲代码开源后关于许可证的文章,看得我有点蒙,但是最终整理后,我以后的开源项目就用MIT)

10.开发经常会接触的网站

MDN-web技术文档
智图_图片压缩在线工具_在线制作webp
多视通图片转换Base64
微信JS-SDK说明文档
草料二维码
菜鸟教程
w3cschool

11.小结

好了,我学前端看过的博客文章,关注过的大牛和项目,项目技术栈的教程基本都在这里了!我分享的这些,不敢说最好,最全,适合每个人。但是都是我看过或者接触过的,至少内容上让我满意的,让我觉得是对学习有用的,能帮到大家的。如果大家有什么学习资源推荐的,我也希望大家不吝啬的共享给我,给大家!
还有一个建议就是,学习web前端,上面分享的可以起到一个引导,指路,解惑的作用。但是,大家不要忘记多练,毕竟实操最重要!大家有空余的时间或者周末也可以自己做下自己有兴趣的项目,并且用在自己工作的项目开发上!项目不求比别人好,只求自己能练习,提升自己的技术水平!

-------------------------华丽的分割线--------------------
想了解更多,关注关注我的微信公众号:守候书阁

clipboard.png

查看原文

认证与成就

  • 获得 1 次点赞
  • 获得 4 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 4 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-08-29
个人主页被 403 人浏览