検索

说下自己的情况。
开发前端主要用bootstrap,jquery,ajax。效果动画表单验证什么的也是jq。
后台主要用thinkphp。

前段时间想搜一下更好的前端框架,看到angular。但是学习了一段时间感觉非常困惑。
那篇神问答也看了三四遍,主要的核心就是不要操作DOM。但是按照angular的写法,扩展每个html标签,这样对比jquery那种html和js分离的写法貌似没任何优势啊。

第二个就是数据双向绑定,感觉也是用处不大,不论是表单验证还是其它动画效果感觉jq无压力啊。

还有个疑问就是MVC,为什么不用tp的mvc,而要用angular在前端再分离一次,这样有什么好处呢,假如我要循环

    下的
  • ,常规用tp可以直接foreach,但是用angular就必须写成这样:


    • {{**}}

    这样将数据写在js里面,sql出的数据怎么分配呢,岂不给自己找不自在?

    那为什么那么多人在用angular,她到底好在哪里呢?

    回复内容:

    说下自己的情况。
    开发前端主要用bootstrap,jquery,ajax。效果动画表单验证什么的也是jq。
    后台主要用thinkphp。

    前段时间想搜一下更好的前端框架,看到angular。但是学习了一段时间感觉非常困惑。
    那篇神问答也看了三四遍,主要的核心就是不要操作DOM。但是按照angular的写法,扩展每个html标签,这样对比jquery那种html和js分离的写法貌似没任何优势啊。

    第二个就是数据双向绑定,感觉也是用处不大,不论是表单验证还是其它动画效果感觉jq无压力啊。

    还有个疑问就是MVC,为什么不用tp的mvc,而要用angular在前端再分离一次,这样有什么好处呢,假如我要循环

      下的
    • ,常规用tp可以直接foreach,但是用angular就必须写成这样:


      • {{**}}

      这样将数据写在js里面,sql出的数据怎么分配呢,岂不给自己找不自在?

      那为什么那么多人在用angular,她到底好在哪里呢?

      学不学Angularjs不是重点,重点的是要学MVVM这一套逻辑(后面会说明这是什么),而Angular刚好是这套逻辑最成熟的方案,所以很多人会建议你学Angularjs,其实还有Ember, Aurelia等等,都是很不错的MVVM框架。
      举个例子(Angularjs):
      像你写的遍列数据,如果用jQuery,那么需要这样:

      <code>//foo is Array
      foo.forEach(function(eachFoo){
          $ul.append('<li>' + eachFoo + '</li>');
      });</code>

      而Angularjs需要在html上面写,也就是用指令:

      <code><ul>
          <li ng-repeat="eachFoo in foo">{{eachFoo}}</li>
      </ul></code>

      一般不继续处理foo变量的话,显然是jQuery会比较方便,但万一你需要删除foo里的变量呢?在jquery中需要两步:
      第一删除变量:

      <code>var index = 1; //需要删除变量的位置
      foo.splice(index, 1);</code>

      第二删除dom元素:

      <code>$ul.find('li:eq(' + index + ')').remove();
      //实际操作会复杂得多</code>

      而在Angular中,只需要在controller中把foo指定的变量删除就可以了,也就是上面jquery的第一步,但写法有点不同。

      <code>var index = 1;
      $scope.foo.splice(index, 1);</code>

      之后就不必再去管dom元素了,它会自动把变量对应的dom元素删掉。同样,如果要增加变量,只需继续在foo里push(新变量)就可以了,而jQuery却不同,它不仅需要push,还要append,甚至还需要知道push到那里了。

      看到这里,你大概就能理解为什么这么多人喜欢Angularjs了,因为有了它你就不必再操心dom元素了(这是一件十分痛苦的事情,特别是数据特别多的时候),你只需定义好了指令,然后直接操作$scope里的变量就可以了,这是一件多么舒心省事的事情。

      回到MVVM来,这是什么鬼?MVVM其实就是model view - view model,也就是数据与视图的绑定,操作数据等同于操作视图,操作视图也等同于操作数据,也就是传说中的双向绑定。

      再回到你的问题来,需不需要学习Angularjs,我认为是需要的。无论项目大小,anguarjs完全可以取代jquery,况且angularjs里包含了jquery(迷你版,尽量少用)。学习并不困难,我大概花了两个星期就入门了,建议照着官方文档案例学习https://docs.angularjs.org/tutorial,写得相当好。

      表单验证对于angular来说比jquery更有优势,因为你根本不必处理用户输入错误时dom如何处理,你只需定义好指令让angular来处理就好了(可以结合validator第三方包来处理,更是简单得要命)。

      至于动画,angular比jquery还简单点,因为全是用css来写的,与jquery那些fadein fadeout有点不同。更爽的是,只要css定义好了,你所有dom的出现和消失都是带有动画的,比jquery每个dom都写一个动画简单得多。更是因为css动画是有GPU加成的(transform3d),比jquery流畅不是一点点。

      但angular并不是完美,有些缺点你必须接受,如果你项目SEO比较依赖,用Angular稍微麻烦点,因为view基本上是js来操作了,搜索引擎是看不到的(解决办法也是极为复杂),特别是用了route的,做SEO更是困难。所以很多时候Angular大多用在移动端或者APP,桌面端比较少用(并不是完全没用,主要是jquery现在用的人太多)。

      扩展:
      React比angular稍微复杂点,涉及到一个虚拟dom的知识点,它是直接在js中写html,连指令也不用写,最大的好处是执行效率相当高。我刚开始接触,还没真正用上,有机会再研究研究。

      另外你说到了bootstrap,这是UI框架,主要负责外观,跟jquery angular区别还蛮大的。

      另,我写了个云相册,刚开始是用jquery写的,现在正慢慢迁移到angular来,有兴趣可以看看:http://www.lazycoffee.com

      我也是刚接触Angularjs不久,为避免误人子弟,请别转载

      Angular最好的地方就是能让你向写后台代码一样的写前端代码
      template和Controller 基本上可以实现经典mvc的形式

      为什么要用它呢
      1 - 学习门槛低 简单易用
      2 - 确实让代码更好维护
      3 - 双向绑定还是很方便的
      4 - 如果你用Ionic 你躲不开Angular
      5 - 如果你写移动端的WebApp angular可以一次加载 更快的装载处理各级子页

      我也是做后端php开发的,前段时间想做一个项目,前端希望考虑用angular,于是就学习了一把,心得是

      1.思想很牛,把mvc整合到了前端开发,维护起来很容易
      2.但项目如果不是太大的话就不要考虑这个东西


      我不是专业做前端的,可能对于angular掌握的不是特别好,但好像最近很久一段时间react貌似很火的样子,对于处理dom很牛叉,如果可以在angular抽出身,弄弄那个貌似不错

      个人意见

      angular是针对那种【后台只写接口,前端根据接口返回的值自己处理逻辑】的APP式页面的
      你把逻辑都交给后台,前台大部分操作都提给后台,php动态生成页面这种格式当然觉得无必要。

      <code>双向数据绑定简直相当有用啊,你觉得没有用可能是你还没有遇到相应的情况。比如说你有一js二维数组想要以表格的形式展示在html模型上,而模型上还要给这表格加上增删查改等功能。用angularjs之后你需要做的仅仅只是操作一下js二维数组,不用做任何的dom操作,就能达到目的。
      不过angularjs却与html和js代码分离的规范相背离确实是个问题。</code>

      赞同一楼的观点,学习一套框架,更多的去学习其中的思想。很多知识是相通的,学习了angularjs算是知识储备。就比如大学先学习c语言C#,后来学习java就会感觉容易很多

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
jquery实现多少秒后隐藏图片jquery实现多少秒后隐藏图片Apr 20, 2022 pm 05:33 PM

实现方法:1、用“$("img").delay(毫秒数).fadeOut()”语句,delay()设置延迟秒数;2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句,通过定时器来延迟。

jquery怎么修改min-height样式jquery怎么修改min-height样式Apr 20, 2022 pm 12:19 PM

修改方法:1、用css()设置新样式,语法“$(元素).css("min-height","新值")”;2、用attr(),通过设置style属性来添加新样式,语法“$(元素).attr("style","min-height:新值")”。

axios与jquery的区别是什么axios与jquery的区别是什么Apr 20, 2022 pm 06:18 PM

区别:1、axios是一个异步请求框架,用于封装底层的XMLHttpRequest,而jquery是一个JavaScript库,只是顺便封装了dom操作;2、axios是基于承诺对象的,可以用承诺对象中的方法,而jquery不基于承诺对象。

jquery怎么删除div内所有子元素jquery怎么删除div内所有子元素Apr 21, 2022 pm 07:08 PM

删除方法:1、用empty(),语法“$("div").empty();”,可删除所有子节点和内容;2、用children()和remove(),语法“$("div").children().remove();”,只删除子元素,不删除内容。

jquery怎么去掉只读属性jquery怎么去掉只读属性Apr 20, 2022 pm 07:55 PM

去掉方法:1、用“$(selector).removeAttr("readonly")”语句删除readonly属性;2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。

jquery on()有几个参数jquery on()有几个参数Apr 21, 2022 am 11:29 AM

on()方法有4个参数:1、第一个参数不可省略,规定要从被选元素添加的一个或多个事件或命名空间;2、第二个参数可省略,规定元素的事件处理程序;3、第三个参数可省略,规定传递到函数的额外数据;4、第四个参数可省略,规定当事件发生时运行的函数。

jquery怎么修改元素的title属性jquery怎么修改元素的title属性Apr 20, 2022 pm 07:00 PM

修改方法:1、用attr(),可设置被选元素的指定属性的值,语法“元素对象.attr("title","新值")”,新值将覆盖旧值;2、用prop(),可为匹配元素集合设置指定属性值,语法“元素对象.prop("title","新值")”。

jquery怎么根据id改变元素值jquery怎么根据id改变元素值Apr 20, 2022 pm 06:13 PM

jquery根据id改变值的方法:1、给元素设置id属性;2、使用“$("#id属性值")”语句获取指定元素对象;3、使用“元素对象.html("新值")”、“元素对象.text("新值")”或“元素.val("新值")”语句来修改元素值。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン