参考资料:http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-to-get-by/ Target Audience: People Who Know Just Enough jQuery to Get by Before I begin, I'd like to clarify who my target audience is. Zed Shaw, the a…
好久没写react了,今天有空写一下来react实现实时请求数据,并刷新数据的小demo. 首先我还是选择了jquery方式中自带的ajax获取数据,首先要引用所需的js包 接下来要写一个自定义的js文件, 创建一个react组件: var Demo = React.createClass({}); //渲染组件 React.render(<Demo url="../data/package.json" setTime="2000" />,documen…
jquery each循环遍历完再执行的方法 因为each是异步的 所以要加计数器. var eachcount=0; <pre> $(".emptytip").each(function(){ eachcount++ console.log(eachcount); if(eachcount>=$(".emptytip").length){ alert('循环完毕') //这个执行函数 } });</pre>…
一.  我的走位:   保持中立 1. 各有各的好处,  谁也别说谁 2. 一个东西带来的好处, 相应的副作用肯定也有, 人无完人 二 .  vue3 的composition api 和   react hooks 的对比 1. composition api  中的 setup只会被调用一次;  react hooks 中的函数会被多次调用; 2. react hooks 需要useMemo  useCallback ,  因为setup只会被调用一次; 3. composition api…
在我们的前端项目里经常会用到级联的select,比如省市区这样.通常这种级联大多是动态的.比如先加载了省,点击省加载市,点击市加载区.然后数据通常ajax返回.如果没有数据则说明到了叶子节点.   针 对这种场景,如果我们使用jquery来实现,要考虑很多的问题,数据部分,以及大量的dom操作.比如这个页面上显示了某个区,这时候我切换省,要把市 重新初始化数据,然后区域的部分要从页面中删除.这个判断是非常烦躁的.所以之前碰到这个问题时,就直接使用递归删除省下面的所有子,然后再重新生成市. 所以j…
Vue与React的对比 Vue.js与React.js从某些反面来说很相似,通过两个框架的学习,有时候对一些用法会有一点思考,为加深学习的思索,特翻阅了两个文档,从以下各方面进行了对比,加深了对这两个框架的认知. 1.数据绑定 1.1 Vue中有关数据绑定的部分 vue是双向绑定, Vue.js 最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.所谓双向绑定,指的是vue实例中的data与其渲染的DOM元素的内容保持一致,无论谁被改变,另一方会相应的更新为相同的数据.这是通过设置属性…
Jquery的工作方式: 假如你需要给一个按扭添加一个点击事件. 首先根据CSS规则找到对应的dom元素,挂上一个匿名事件处理函数,在事件处理函数中,选中那个需要被修改的DOM元素,读取他的文本值,加以修改,然后修改这个dom元素. 优点:直观易懂.缺点:对于庞大的项目,会造成代码结构复杂,难以维护. React的工作理念: 打一个比方, React是一个聪明的建筑工人,而 jQuery是一个比较傻的建筑工人, 开发者你就是一个建筑的设计师,如果是 jQuery 这个建筑工人为你工作,你不得不事…
一 vue的生命周期如下图所示(很清晰)初始化.编译.更新.销毁 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue生命周期</title> <script src="../js/vue.js"></…
一,对象实体对比 vue的对象实体依然是html,而react的对象实体已经变味jsx,一种新的语法结构. vue的html与react的jsx都可以进行拆分,拆分成更细小的组件,组件之间可以传值. 二,生命周期 显然二者都有生命周期概念,生命周期让静态对象实体变为动态实体. vue的生命周期: beforeCreate created beforeMount mounted beforeDestroy destroyed react的生命周期 constructor componentWill…
qrcode.react 1.安装 npm install qrcode.react 2.用法(这里用的ant design) import React from 'react'; import QRCode from 'qrcode.react'; import {Icon,Button,Form,Row,Col,Input,InputNumber,Select} from 'antd'; const Option = Select.Option; const FormItem = Form.…
React 和 Vue 有许多相似之处,它们都有:   * 使用 Virtual DOM * 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件. * 将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库.   不同点:     优化: React当某个组件的状态发生变化时重新渲染整个组件子树.(可以用shouldComponentUpdate) Vue渲染是自动追踪的,系统可以自动精确哪个需要重新渲染.     JSX vs Templates…
1.原生JS与jQuery操作DOM对比  :   https://www.cnblogs.com/QianBoy/p/7868379.html 2.比较jQuery与JavaScript的不同功能实现   :   http://www.cnblogs.com/QianBoy/p/7868291.html 3.原生JS与jQuery事件绑定对比: 原生js  :  onclick绑定的事件具有可覆盖性                 解除绑定方法:   btn1.onclick = null :…
例如顺序执行[创建]-> [修改]-> [添加]三个动作. 由于jQuery支持链式操作,其实就是设计模式的builder模式,所以我们可以把三个操作串在一起来执行. 首先创建一个p元素,内容包含一个a元素. 复制代码代码如下: $('<p><a>jQuery</a></p>')  然后为a元素添加一个href属性 复制代码代码如下: $('<p><a>jQuery</a></p>').find('…
Even a task as simple as this can be complicated without jQuery at our disposal. In plain JavaScript, we could add the highlightedclass as shown in the following code snippet: window.onload = function() { var divs = document.getElementsByTagName('div…
工作原理 大致基本类同,JS-Native桥和前端渲染框架,只是使用框架技术不一样: Weex 阿里内部早期研发的一个通过 JSON 数据描述 native 渲染的项目WeApp以及Vue.js这款优秀的前端开源MVVM框架和深度结合; https://github.com/weexteam/article/issues/32 React Native: http://www.jianshu.com/p/978c4bd3a759     Weex React Native: JS引擎 V8 JS…
安装jQuery npm i jquery -S 在那个地方使用jQuery就在什么地方引入jQuery import $ from 'jquery'…
query each循环遍历完再执行的方法因为each是异步的 所以要加计数器.var eachcount=0;$(“.emptytip”).each(function(){ eachcount++console.log(eachcount); if(eachcount>=$(“.emptytip”).length){alert(‘循环完毕’)//这个执行函数 }});…
转自 http://www.webhek.com/you-do-not-need-jquery AJAX JSON JQUERY $.getJSON('/my/url', function(data) { }); 谷歌浏览器,火狐浏览器,IE8+ var request = new XMLHttpRequest(); request.open('GET', '/my/url', true); request.onreadystatechange = function() { if (this.r…
首先,我们先了解什么是MVX框架模式? MVX框架模式:MVC+MVP+MVVM 1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分开. View通过Controller来和Model联系,Controller是View和Model的协调者,View和Model不直接联系,基本联系都是单向的. 用户User通过控制器Controller来操作模板Model从而达到视图View的变化. 2.MVP:是从MVC模式演变而来的,都是通…
$(document).ready(function(){ $("input").focus(function(){ $("input").css("background-color","#FFFFCC"); }); $("input").blur(function(){ $("input").css("background-color","#D6D6FF&…
1.时间投入的问题:相对于react和angularjs,学习vue的时间成本低,而且容易上手. 2.JSX的可读性比较一般.代码的可读性不如vue,当然,vue也支持jsx,但是vue更提倡template,这样设计人员和开发人员可以更容易的分析代码和贡献代码. 3.React的设计在于它的纯净以及干净的单向数据流.也就是说要为10个输入创建10个函数,而80%这样的函数可能只包含了一行this.setState()代码. 4.对于Angularjs1 ,刚开始能快速的开发,但是随着开发的进行…
<script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">var jq=$.noConflict();jq(document).ready(function(){ jq("button").click(function(){ jq("p").…
相同点 都支持服务器端渲染 都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范 数据驱动视图 都有支持native的方案,React的React native,Vue的weex 不同点 React严格上只针对MVC的view层,Vue则是MVVM模式 virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要s…
props可以看做是 property 的缩写的复数,可以翻译为属性,类似于HTML 标签的自定义属性.在大多数React教程里讲 state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变.其实这种说法有问题.可以参考一篇文章<React中state与props介绍与比较> 组件中的props本质作用是一种父级向子级传递数据的方式.props是可以改变的,只是没有提供API可以在子组件里直接修改,我们可以在父组件里把要给子组件的属性值修改.…
1.Vue的理解 概念: Vue是一套用于构建用户界面的渐进式框架: Vue的核心库只关注视图层: 是一个数据驱动的MVVM框架: 特性: 确实轻量:体积比较小: 数据绑定简单.方便: 有一些简单的内置指令(v-*),也可以自定义指令,通过对应表达式的值就可以修改对应的DOM: 插件化:Vue核心库不包含Router.Ajax等功能,但可以非常方便的加载对应的组件: 2.Vue与React的区别 相同点: 都支持服务器端的数据渲染: 提供了响应式 (Reactive) 和组件化 (Composa…
function ValidatoTime(source, args){ var StartTime = agent.calcExpress(null, 'SCTDB:AS_MeetingRoom.StartTime'); var EndTime = agent.calcExpress(null, 'SCTDB:AS_MeetingRoom.EndTime'); var start=new Date(StartTime.replace("-", "/").repla…
上面例子的总结: 1.”+n+”千万不要把前面或者后面的+漏掉了.否则不会出现正确结果 2.$(“:checkbox”).click(countChecked)注意写法,不是click(function(){}),也不是click(countChecked()),一定要注意写法. 3.最后一行添加countChecked()是为了在刷新页面的时候就出现下面的图片,“有几个被选中” 从$("div").eq(0).html()延伸出另一个问题: $(“div”).append().app…
传送门  https://blog.csdn.net/qiqingjin/article/details/79219206 点击…
有时候,你希望有一块功能在整个代码当中都可以使用.例如,你可能想要有一个单一的方法可以在jQuery选择器上进行调用,用于处理该选择器上的一系列操作.又或许你编写了一个十分有用的工具函数,并希望能够简单的迁移到其它的项目当中.在这种情况下,你也许想要编写一个插件. jQuery工作原理101:jQuery对象方法和工具方法 在我们编写插件前,首先需要对jQuery的工作原理有一些了解.看一下这段代码: $( "a" ).css( "color", "red…
曾经看到一篇文章,写的是jquery开发者吐槽angular的复杂.作为一个angular开发者,我来吐槽一下react+redux的复杂. 例子 为了让大家看得舒服,我用最简单的一个demo来展示react+redux的“弯弯绕”,下面这个程序就是我用react和redux写的.然而这个程序在angular中一行js都不用写!!! 展示组件 App.js import React, { findDOMNode, Component } from 'react'; import ReactDOM…