前端组件 | 易学教程

ReactJs入门教程-精华版

阅读更多关于 ReactJs入门教程-精华版

一、ReactJS简介　　React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。 ReactJS官网地址：http://facebook.github.io/react/ Github地址：https://github.com/facebook/react 二、对ReactJS的认识及ReactJS的优点首先，对于React，有一些认识误区，这里先总结一下： React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式； React的服务器端Render能力只能算是一个锦上添花的功能，并不是其核心出发点，事实上React官方站点几乎没有提及其在服务器端的应用；有人拿React和Web Component相提并论，但两者并不是完全的竞争关系，你完全可以用React去开发一个真正的Web Component； React不是一个新的模板语言，JSX只是一个表象，没有JSX的React也能工作

webpack的总结

阅读更多关于 webpack的总结

Vue.js - Day5 - Webpack 在网页中会引用哪些常见的静态资源？ JS .js .jsx .coffee .ts（TypeScript 类 C# 语言） CSS .css .less .sass .scss Images .jpg .png .gif .bmp .svg 字体文件（Fonts） .svg .ttf .eot .woff .woff2 模板文件 .ejs .jade .vue【这是在webpack中定义组件的方式，推荐这么用】网页中引入的静态资源多了以后有什么问题？？？网页加载速度慢，因为我们要发起很多的二次请求；要处理错综复杂的依赖关系如何解决上述两个问题合并、压缩、精灵图、图片的Base64编码可以使用之前学过的requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系；什么是webpack? webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；如何完美实现上述的2种解决方案使用Gulp，是基于 task 任务的；使用Webpack，是基于整个项目进行构建的；借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。根据官网的图片介绍webpack打包的过程 webpack官网 webpack安装的两种方式运行 npm

前端开发Vue框架（二）

阅读更多关于前端开发Vue框架（二）

表单指令 v-model 设置属性值 1.语法： v-model='控制value值的变量' ：value='变量'（属性指令），直接这样绑定数据不会实时更新数据（修改表单标签值，值不会实时映射给绑定变量） v-model='变量'（表单指令），绑定的数据会实时更新（修改表单标签值，值会实时映射给绑定变量）单一复选框作为确认框时，v-model绑定的变量值为布尔类型，true代表选上该框，false则相反多个复选框时，v-model绑定的变量值是一个数据(可以看成列表)，里面存放的数据是复选框中的value属性的对应值（放了谁，谁就会被选中） 6.单选框时, v-model绑定的变量值是单选框中value属性对应的值（里面放了谁，谁就会被选中） <!DOCTYPE html> 表单指令 {{ v1 }} {{ v2 }} 同意：男: 女: 哇塞: {{ v4 }}  中午吃啥:<br> 肉:<input type="radio" name="food" value="rou" v-model="v5"> 菜:<input type="radio" name="food" value="cai" v-model="v5"> </form> <!DOCTYPE html> */ /*--> */ <input class="inp1

造个自己的Vue的UI组件库类似Element

阅读更多关于造个自己的Vue的UI组件库类似Element

前言随着前端的三大框架的出现,组件化的思想越来越流行,出现许多组件库.它能够帮助开发者节省时间提高效率, 如React的Ant-design,Vue的iView,Element等,它们的功能已经很完善了. 我写这遍文章的目的:记录自己搭建UI库的过程(对Vue的理解加深了好多) 演示地址首先讲一下思路: 平常写组件时,写一个组件要用时直接导入就行了,如你写了一个time.vue,用的时候 import time from '路径' 现在要写一个组件库,是不是把所有组件一个文件夹里(如 button.vue , icon.vue , input.vue ...),通过 Vue.components 注册所有组件,再通过 Vue.use() 安装一下就实现了,这就是所以的 vue 插件的思路,没有那么神秘 1.环境准备前面说要把所有的组件放在一个文件夹里,最简单就是用脚手架搭一个项目目录结构, 同时还需要添加示例文档----方便调试和展示: 按钮的示例效果现在要考虑比较重要的两点: 目录结构和示例文档 1.目录结构直接用vue-cli建立项目结构, 在基础上修改一下就行了(以满足我们示例的展示) 目录结构 . ├── build -------------------------webpack相关配置文件 │ ├── build.js │ ├── check

技术守旧的后台仔谈一下前端业务组件的封装

阅读更多关于技术守旧的后台仔谈一下前端业务组件的封装

以真实项目作为背景，先说一下前端的技术选型：Bootstrap 3.3 + JQuery，标准的企业后台开发框架。当前产品对表单操作提出了优化需求，现在需要一个二级联动的下拉框组件，通过一个大类去动态筛选目标项，数据从服务端接口获取。在下图的例子中：通过选择领域再选择开发语言。我选择引入bootstrap-select这个下拉框组件来进行二次封装。（展示代码以伪代码为主）先做个原型 1 <div> 2 <div> 3 <select id="domains" multiple></select> 4 </div> 5 <div> 6 <select id="languages" multiple></select> 7 </div> 8 </div> <script> var domains = null; //元数据 var languages = null; //元数据 $(function () { $('#domains').selectpicker(); //初始化组件 $('#languages').selectpicker(); //初始化组件 $('#domains').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) { //筛选联动的languages /

谈谈React中Diff算法的策略及实现

阅读更多关于谈谈React中Diff算法的策略及实现

1、什么是Diff算法传统Diff： diff算法即差异查找算法；对于Html DOM结构即为tree的差异查找算法；而对于计算两颗树的差异时间复杂度为O（n^3）,显然成本太高，React不可能采用这种传统算法； React Diff：之前说过，React采用虚拟DOM技术实现对真实DOM的映射，即React Diff算法的差异查找实质是对两个JavaScript对象的差异查找；基于三个策略： Web UI 中 DOM 节点跨层级的移动操作特别少，可以忽略不计。（tree diff）拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结（component diff）对于同一层级的一组子节点，它们可以通过唯一 id 进行区分。（element diff） 2、React Diff算法解读首先需要明确，只有在React更新阶段才会有Diff算法的运用； React更新机制： React Diff算法优化策略图： React更新阶段会对ReactElement类型判断而进行不同的操作；ReactElement类型包含三种即：文本、Dom、组件；每个类型的元素更新处理方式：自定义元素的更新，主要是更新render出的节点，做甩手掌柜交给render出的节点的对应component去管理更新。 text节点的更新很简单，直接更新文案。

加速网站的最佳实践

阅读更多关于加速网站的最佳实践

Exceptional Performance团队已经确定了许多快速制作网页的最佳实践。按类别筛选： Content Server Cookie CSS JavaScript Images Mobile All 最小化HTTP请求 tag: content 最终用户响应时间的80％用于前端。大部分时间都在下载页面中的所有组件：图像，样式表，脚本，Flash等。减少组件数量反过来减少了呈现页面所需的HTTP请求数量。这是更快页面的关键。减少页面中组件数量的一种方法是简化页面设计。但有没有办法构建内容更丰富的页面，同时还能实现快速响应时间？以下是一些减少HTTP请求数量的技术，同时仍支持丰富的页面设计。组合文件是一种通过将所有脚本组合到单个脚本中来减少HTTP请求数量的方法，并且类似地将所有CSS组合到单个样式表中。当脚本和样式表在不同页面之间变化时，组合文件更具挑战性，但使这部分发布过程可以缩短响应时间。 CSS Sprites是减少图像请求数量的首选方法。将背景图像合并为单个图像，并使用CSSbackground-image和background-position属性显示所需的图像片段。图像地图将多个图像组合成单个图像。整体大小大致相同，但减少HTTP请求的数量会加快页面的速度。图像映射仅在图像在页面中是连续的时才起作用，例如导航栏。定义图像映射的坐标可能是乏味且容易出错的

初学者可能不知道的vue技巧

阅读更多关于初学者可能不知道的vue技巧

前言　　大家好，这里是 @IT·平头哥联盟，我是首席甩锅官 —— 老金，今天给大家分享的，一些日常中神秘而又简单的vue的实用小技巧，以及我在我司项目中实用vue的总结和坑，跟大家一起分享，希望能给其他攻城狮带来些许便利，如有理解错误，请纠正。技巧/坑点 1.setTimeout/ setInterval 场景一：this指向改变无法用this访问vue实例 mounted(){ setTimeout( function () { //setInterval同理 console.log(this); //此时this指向Window对象 }，1000) ; } 解决方法 :使用箭头函数或者缓存this //箭头函数访问this实例因为箭头函数本身没有绑定this setTimeout(() => { console. log(this);}, 500) ; //使用变量访问this实例let self=this; },1000); setTimeout (function () { console. log(self);//使用self变量访问this实例 }, 1000) ; setInterval路由跳转继续运行并没有销毁场景一 :比如一些弹幕，走马灯文字，这类需要定时调用的，路由跳转之后，因为组件已经销毁了，但是setlnterval还没有销毁，还在继续后台调用

小程序云开发是什么？怎么用！

阅读更多关于小程序云开发是什么？怎么用！

在此只做云开发简单使用的总结，深入使用，请参考官方文档创建小程序和代码结构目录结构 AppID在微信公众平台，在左边的开发中开发设置里有小程序云开发基本结构： 1.cloudfunctions：指定腾讯云项目的目录 2.miniprogarm：小程序端的代码 3.project.config.json：对小程序项目的配置配置JSON文件 project.config.json 对一个项目的整体配置 app.json:项目的全局配置 pages项：对应的是一个数组，小程序有几个界面就配置几个 window项：对TopBar窗口的配置 tabBar项:底部通栏，一般需要自己添加，与window是同级，tabBar中list数组中的每一个对象代表tabBar中的每一个Tab WXML 与html类似，但是WXML中定义了一些自己的组件 WXSS 新定义像素单位rpx，规定不管屏幕大小,都为750rpx。使用rpx，能够实现手机端自适应布局在WXSS中如何引用公共样式：@import '相对路径' 第三方样式库推荐： WeUI ，iView ，Vant （后两者包含了pc端的组件） JS 给data中的值赋值的时候，必须用this.setData({ count : this.data.count +1 }) 微信小程序里的点击事件由bind ， catch来绑定，bindtap

用初中数学知识撸一个canvas环形进度条

阅读更多关于用初中数学知识撸一个canvas环形进度条

周末好，今天给大家带来一款接地气的环形进度条组件 vue-awesome-progress 。近日被设计小姐姐要求实现这么一个环形进度条效果，大体由四部分组成，分别是底色圆环，进度弧，环内文字，进度圆点。设计稿截图如下：我的第一反应还是找现成的组件，市面上很多组件都实现了前3点，独独没找到能画进度圆点的组件，不然稍加定制也能复用。既然没有现成的组件，只有自己用 vue + canvas 撸一个了。效果图先放个效果图，然后再说下具体实现过程，各位看官且听我慢慢道来。安装与使用源码地址，欢迎 star 和提 issue 。安装 npm install --save vue-awesome-progress 使用全局注册 import Vue from 'vue' import VueAwesomeProgress from "vue-awesome-progress" Vue.use(VueAwesomeProgress) 局部使用 import VueAwesomeProgress from "vue-awesome-progress" export default { components: { VueAwesomeProgress }, // 其他代码 } webpack配置由于当前版本发布时，未进行 babel 编译，因此使用时需要自行将 vue

订阅前端组件