今よく使うフレームワークの紹介とツールのウェブサイトの整理

4644 ワード

流行のUIフレームワーク


人気のフロントエンドUIフレームワーク:

  • Bootstrap(米国Twitter社のデザイナーMark OttoとJacob Thorntonが協力してHTML、CSS、JavaScriptに基づいて開発した簡潔で直感的で強力なフロントエンド開発フレームワークにより、Web開発がより迅速になる.Bootstrapは優雅なHTMLとCSS規範を提供し、動的CSS言語Lessによって書かれている.)国内の一部のモバイル開発者がよく知っているフレームワーク、例えばWeX 5フロントエンドのオープンソースフレームワークなども、Bootstrapソースコードに基づいて性能最適化されている.[2]
  • jQuery UI(jQuery UIは、jQueryをベースとしたオープンソースJavaScript Webユーザーインタフェースコードライブラリです.下位ユーザーのインタラクション、アニメーション、特効、および交換可能なトピックのビジュアルコントロールが含まれています.インタラクティブなWebアプリケーションを直接構築するために使用できます.すべてのプラグインテストは、IE 6.0+、Firefox 3+、Safari 3.1+、Opera 9.6+、GoogleChromeと互換性があります.)それは多くの維持状態のウィジェット(Widget)を含んでいるので、典型的なjQueryプラグインの使用モードとは少し違います.すべてのjQuery UIウィジェット(Widget)は同じモードを使用しているので、いずれかを使用することをマスターすれば、他のウィジェット(Widget)
  • を使用する方法がわかります.
          
    jQuery UI     3   :  、      。
      
                     ,  Draggable,Droppable,Resizable,Selectable Sortable 。
      
              ,  Accordion,AutoComplete,ColorPicker,Dialog,Slider,Tabs,DatePicker,Magnifier,ProgressBar,Spinner ,    UI        。
       
               ,        jQuery animate()  。
    

    流行のフロントエンドフレーム:

  • Node.Js:一連の「非ブロック」ライブラリを使用して、イベントループをサポートします.本質的には、ファイルシステム、データベースなどのリソースにインタフェースを提供します.ファイルシステムにリクエストを送信する場合は、ハードディスク(ファイルのアドレスと取得)を待つ必要はありません.ハードディスクが準備されている場合は、インタフェースをブロックしないでノードに通知されます.このモデルは,遅いリソースへのアクセスを拡張可能に簡略化し,直感的で分かりやすい.
  • (Node           ,    ,         :
    ●   RESTful API  。
    ●    。Node              ,              ——  Node.js      (event loop)       ,  ,             ——           ,    ,        。
    ●    IO:        ,       ,           ,      。
    ●     :Node.js       “    (event loop)”   ,                     
    
  • Angular.Js:HTMLは静的テキスト展示のために設計された声明式言語ですが、WEBアプリケーションを構築するには力不足です.HTMLの構築アプリケーションの不足を克服するために設計された.ブラウザをデザイナーがしたいことにします.AngularJSはJavaScriptフレームワークです.JavaScriptで作成されたライブラリです.タブでHTMLページに追加できます.AngularJSは命令によってHTMLを拡張し,式によってHTMLにデータをバインドする.AngularJSはJavaScriptファイルとして公開されており、scriptタグでWebページに追加できます.
  • 通常,我们是通过以下技术来解决静态网页技术在构建动态应用上的不足:
    类库 - 类库是一些函数的集合,它能帮助你写WEB应用。起主导作用的是你的代码,由你来决定何时使用类库。类库有:jQuery等
    框架 - 框架是一种特殊的、已经实现了的WEB应用,你只需要对它填充具体的业务逻辑。这里框架是起主导作用的,由它来根据具体的应用逻辑来调用你的代码。框架有:knockout、sproutcore等。
    AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为指令(directives)的结构,让浏览器能够识别新的语法。例如:
    使用双大括号{{}}语法进行数据绑定;
    使用DOM控制结构来实现迭代或者隐藏DOM片段;
    支持表单和表单的验证;
    能将逻辑代码关联到相关的DOM元素上;
    能将HTML分组成可重用的组件。
    
  • Vue.js:ユーザーインタフェースを構築するための漸進的なJavaScriptフレームワークです.他の大型フレームワークとは異なり,Vueは底から上へ層毎に適用できるように設計されている.Vueのコアライブラリは、階層のみに注目し、サードパーティのライブラリや既存のプロジェクトとの統合を容易にします.使いやすく、柔軟で、性能が注目され、広く使われています.
  • Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
    Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件   。
    Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。
    
  • React.js:Reactは主にUIの構築に用いられる.宣言コードなど、Reactに複数のタイプのパラメータを渡すことで、UIをレンダリングしたり、静的なHTML DOM要素をレンダリングしたり、動的変数を渡したり、インタラクティブなアプリケーションコンポーネントを渡したりすることができます.
  • 特点:
    1.声明式设计:React采用声明范式,可以轻松描述应用。
    2.高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。
    3.灵活:React可以与已知的库或框架很好地配合。
    

    工具网站


    一、配色系サイト
    http://colorhunt.coこのサイトは私たちに多くの配色案を提供してくれて、私たちは直接使用すればOKです.使い方も簡単で、マウスを対応する色に移動すると、色の16進コードが見え、この色をツールにコピーすれば使えます.https://webgradients.com/180種類のグラデーションスキームを選択できます.また、CSSスタイルを直接Webページに適用することもできます.https://color.adobe.com/zh/create/color-wheelこれはAdobe社が出したもので、彼はいろいろな配色案を提供しています.円盤の真ん中の点をクリックすると、私たちが望む配色案を調整することができます.http://www.colorhunter.com/
    二、アイコン類サイト
    http://www.iconfont.cn/plusこれはアリババ傘下のアイコンライブラリのウェブサイトで、キーワードを直接検索すると大量のアイコンを見つけることができます.アイコンをダウンロードするときは、色、サイズ、フォーマットを選択して、自分のニーズに合わせてダウンロードすればいいです.http://www.easyicon.net/iconsearch/ios/これもとても有名なアイコンライブラリで、上のものとは違って、ここのアイコンは単一の色ではなく、デザインされた色です.ダウンロードアイコンも簡単で、対応するアイコンの上のフォーマットを直接クリックすればダウンロードできます.
    三、プラグイン類のウェブサイト
    http://www.jq22.com/このウェブサイトはjQueryプラグインを分かち合ってと各種のjQuery特効の詳しい使用方法を提供して、オンラインプレビュー、jQueryプラグインのダウンロードとチュートリアルhttp://www.htmleaf.com/このサイトは前のサイトと似ていて、jQueryプラグインも大量に提供されています.http://www.layui.com/これは強力なモジュール化フロントエンドフレームワークです
    四、素材類サイト
    http://588ku.com/千庫ネット、1つの無料でピクチャーの素材のウェブサイトをダウンロードしますhttps://unsplash.com/Unsplashは無料の高品質の写真を共有するサイトで、写真の解像度が大きく、実際のカメラマンの作品で、写真の多くは風景と静物です.
    五、フォント類サイト
    http://www.youziku.com/onlinefont/indexフォントライブラリがあり、ダウンロード不要のフォントで、直接オンラインでフォントを参照するサイトです.
    六、工具類
    http://tool.lu/大量のオンラインツールを含むオンラインツールWebサイトhttps://tinypng.com/大量に使用できるオンライン画像圧縮ツールhttp://www.css88.com/各種の先端類ツールと技術文章はソフトウェアのウェブサイトを解読します:https://alltoshare.com/product/548.htmlフロントエンドテンプレートWebサイト:http://www.templatesy.com/