说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

实例剖析:如何用Foundation For Apps创建完美Web应用

HTML文档下载 WORD文档下载 PDF文档下载
不久前,Zurb推出了单页面App框架Foundation for Apps,其与Foundation 5密切相关。它试图提供一种开发Web应用既快速又简单的方法,本文通过实战案例,分析了该框架的使用方法,是一份综合性指南。

【编者按】本文是Smashing Magazine中《Creating A Complete Web App In Foundation For Apps》一文的简译内容,详细描述了用Foundation For Apps创建完美Web应用“星球大战知识库”的全过程。

Foundation for Apps是Zurb推出的一个新型单页面App框架,与Foundation 5(也称为Foundation for Sites,一个广泛使用的前端框架)密切相关。它围绕AngularJS和弹性网格框架构建而成。它试图让Web应用的开发过程既快速又简单,开发者可以快速开始编写针对应用的独一无二的代码,而非模板文件。

Foundation for Apps于2014年年底发布,尚未被广泛使用,因此有关如何使用这一框架的优质信息源比较少。本文将作为一篇综合指南,对构建一个功能性移动App的全过程进行介绍。文中的技术细节是为客户打造应用程序的基础,本教程也可看作是对AngularJS和单页应用在更广阔范围下如何使用的有力说明。

根据今年后半年即将上映的一部新电影,我们将构建一个“星球大战知识库”。它是一个使用RESTful API、缓存和Foundation for Apps、AngularJS多个特性的响应式Web应用程序。

想要直接跳到干货?

  • DEMO观看;
  • 在GitHub上查看;
  • 文件下载。

入门指南

快速浏览官方文档,其对设计样式进行了很好解释,但并没有对应用程序功能进行详细说明。将这一卓越的AngularJS文档放在手边,并牢牢记住Foundation for Apps提供了一些标准之外的服务,AngularJS的一些功能可能无法直接使用。同样要注意,AngularJS 和Foundation for Apps与生俱来就不太适用于对SEO有要求的App,因为大部分内容需要通过AJAX加载。

我们的应用程序将从Star Wars API(在SWAPI中)中提取数据。先浏览下SWAPI文档,了解其中的数据和结构。为了简单起见,我们的应用程序将建立在这一结构之上。

首先,我们要安装Foundation for Apps并创建项目。请确保您已经安装了Ruby(OS X已默认安装)和Node.js,然后遵循Foundation for Apps详细文档中的四个步骤。即便你以前没使用过命令行,这个过程也十分简单。当你完成该些步骤后,在浏览器中输入“http://localhost:8080/#!/”,即可看到应用程序的默认主页。


Foundation for Apps的默认主页 (浏览大图)

让我们熟悉一下项目里的文件和文件夹。

应用程序根目录中唯一需要我们注意的文件是gulpfile.js,它向Gulp构建过程发送指令,让其为应用启动服务。Gulp是一个构建系统,与Grunt非常相似。稍后,如果我们想添加一些AngularJS模块或插件时,可以通过JavaScript、CSS文件(引用了这些模块或插件)来更新该Gulp文件。

 Cient文件夹里能找到其它我们关注的文件夹:

  •  clients/assets/js/app.js,应用程序的控制器、指令和自定义过滤器在该文件中;
  •  应用程序的所有SCSS文件都存放在clients/assets/scss里;
  •  clients/index.html是应用程序的主页模板;
  • 在clients/templates/中可以找到所有页面的模板,其中大多数还未创建。

构建模板和主页面

让我们开始构建吧!index.html页面无法很好地满足实际应用的需要,所以首先修改该页面。我们针对小尺寸屏幕增加了Off-Canvas菜单、切换按钮及漂亮的淡入淡出效果(利用Foundation for Apps中“Motion UI”的类样式实现)。你可以直接从Github repository中index.html文件里复制这些代码。

在_settings.scss文件中添加一些SCSS变量来设置颜色、字体和断点:

  $primary-color: #000;$secondary-color: #ffe306;$body-background: $secondary-color;$breakpoints: (  small: rem-calc(600),  medium: rem-calc(900),  large: rem-calc(1200),  xlarge: rem-calc(1440),  xxlarge: rem-calc(1920),);$h1-font-size: rem-calc(80);$body-font-family: "brandon-grotesque", Helvetica, Arial, sans-serif;$header-font-family: "flood-std", Helvetica, sans-serif;

现在我们要加点儿料美化一下app.scss。你可以直接参考Github repository中的该文件。

接下来,快速重写默认的home.html文件,该文件在clients/templates/ 目录下,此目录列出了所有要建页面的链接菜单:

---name: homeurl: /---<div class="grid-content">  <h1>Star Wars Compendium</h1>  <p class="lead">Foundation for Apps using Star Wars API</p>  <hr>  <ul class="home-list">    <li><a ui-sref="films">Films</a></li>    <li><a ui-sref="species">Species</a></li>    <li><a ui-sref="planets">Planets</a></li>    <li><a ui-sref="people">People</a></li>    <li><a ui-sref="starships">Starships</a></li>    <li><a ui-sref="vehicles">Vehicles</a></li>  </ul></div>

 我们的模板现在看起来已经相当别致——不再是千篇一律的Foundation。


 我们的模板——已经有了些看头(浏览大图)

创建电影列表

我们正大步向前。在templates文件夹中,为首个子页面创建模板文件:films.html。把下面小段代码复制粘贴到顶端:

---name: filmsurl: /films/:id?p=controller: FilmsCtrl---

 这段代码告诉了我们三件事:

  1. Films为该页面名称,在指向该页面的所有链接中可使用;
  2.  URL将有两个可选参数:id(根据我们的数据生成的影片ID)和p(所在电影列表中的页码数);
  3.  我们将使用自定义AngularJS控制器FilmsCtrl,而不是Foundation for Apps自动创建的默认空白控制器。

因为我们要使用自己的控制器,接下来就要在app.js里创建一个(控制器)。浏览下面的控制器,它将被用于电影列表和单个影片页面。你能看到,该控制器保持追踪URL参数,定位我们所在的结果页面,从外部API里获取所需信息(是电影列表还是单个影片的细节,取决于URL参数),并使用$scope变量将这些信息返回到页面视图里。等angular.module声明关闭后,再把它添加到app.js中。

controller('FilmsCtrl',  ["$scope", "$state", "$http",function($scope, $state, $http){  // Grab URL parameters - this is unique to FFA, not standard for  // AngularJS. Ensure $state is included in your dependencies list  // in the controller definition above.  $scope.id = ($state.params.id || '');  $scope.page = ($state.params.p || 1);  // If we're on the first page or page is set to default  if ($scope.page == 1) {    if ($scope.id != '') {      // We've got a URL parameter, so let's get the single entity's      // data from our data source      $http.get("http://swapi.co/api/"+'films'+"/"+$scope.id,          {cache: true })        .success(function(data) {          // If the request succeeds, assign our data to the 'film'          // variable, passed to our page through $scope          $scope['film'] = data;        })    } else {      // There is no ID, so we'll show a list of all films.      // We're on page 1, so the next page is 2.      $http.get("http://swapi.co/api/"+'films'+"/", { cache: true })        .success(function(data) {          $scope['films'] = data;          if (data['next']) $scope.nextPage = 2;        });    }  } else {    // Once again, there is no ID, so we'll show a list of all films.    // If there's a next page, let's add it. Otherwise just add the    // previous page button.    $http.get("http://swapi.co/api/"+'films'+"/?page="+$scope.page,      { cache: true }).success(function(data) {        $scope['films'] = data;        if (data['next']) $scope.nextPage = 1*$scope.page + 1;      });      $scope.prevPage = 1*$scope.page - 1;  }  return $scope;}])  // Ensure you don't end in a semicolon, because more     // actions are to follow.

保存完app.js后,你需要通过终端(Control+ C用来取消操作,然后再运行foundation-app watch)重启服务,以保证应用程序包含该新模板(files.html)文件,而该文件中都创建了新控制器(app.js)。

就是这样,我们有了一个功能完整的控制器,它能从外部RESTful API资源中获取数据,将结果缓存至浏览器的session中,并把数据返回到视图页面中。

再次打开films.html,开始构建可以访问的数据视图。首先增加展示电影列表的视图内容。我们可以访问所有添加到$scope变量中的属性,无需加前缀$scope,如本例中的films、prevPage和nextPage。在模板现有内容下添加如下代码:

<div class="grid-content films" ng-show="films">  <a class="button pagination"    ng-show="prevPage"    ui-sref="films({ p: prevPage })">    Back to Page {{prevPage}}  </a>  <div class="grid-content shrink">    <ul class="menu-bar vertical">      <li ng-repeat="film in films.results">        {{film.title}}      </li>    </ul>  </div>  <a class="button pagination"    ng-show="nextPage"    ui-sref="films({ p: nextPage })">    To Page {{nextPage}}  </a></div>

非常明显!如果有多页的数据,我们就会得到一个电影名称列表和页码数。但这些数据还没有特别明显的用途,接下来我们把影片名称换成了影片页面所对应的链接。

我们计划将影片ID作为URL的id参数。我们已访问影片的url属性,正好包含了影片ID,即最后一个斜杠前的最后一个参数。然而,我们如何才能从访问的URL中获取唯一的ID?AngularJS通过自定义过滤器使其变得很容易。把{{film.title}}封装在一个链接里,为该连接添加ui-sref属性(用来设置内部链接),其值为包含定制过滤器的film.url数据,示例代码如下:

<a ui-sref="films({ id:( film.url | lastdir ), p:'' })">  {{film.title | capitalize}}</a>

现在页面仍处于不可用状态,因为应用无法识别lastdir和capitalize过滤器是什么。我们需要在app.js文件中控制器的后面定义这些过滤器:

.filter('capitalize', function() {  // Send the results of this manipulating function  // back to the view.  return function (input) {    // If input exists, replace the first letter of    // each word with its capital equivalent.    return (!!input) ? input.replace(/([^\W_]+[^\s-]*) */g,      function(txt){return txt.charAt(0).toUpperCase() +        txt.substr(1)}) : '';  }}).filter('lastdir', function () {  // Send the results of this manipulating function  // back to the view.  return function (input) {    // Simple JavaScript to split and slice like a fine chef.    return (!!input) ? input.split('/').slice(-2, -1)[0] : '';  }})

 搞定!现在我们有了电影列表,每部电影都能链接到各自的电影页面。


电影链表:不知为什么,总对前面部分有些担心(浏览大图)。

然而,点击链接后进入的却是一个空白页,因为films.html还只是个完整的电影信息列表,还没有被构建成可以显示具体电影信息的页面。展示电影细节是我们下一步的工作。

展示一部电影的细节

FilmsCtrl控制器里的$scope.film变量(与$scope['film']相同)中已包含了单个影片页面所需的所有数据。所以,重新使用films.html,并增添另一部分内容,该内容只有在单个file变量被设置时才可见。接着我们会为<dl>中的每组<dt>和<dd>中设置一个键值对(key-value pair)。同时要记住film中某些字段,如characters在数组中有多个值,需通过ng-repeat嵌套一一显示出来。为了把每个演员与该演员的页面连接起来,我们将使用在影片列表中用到的同样方法:用lastdir过滤器,根据他/她/它的ID,链接至每个演员对应的people页面。

<div class="grid-content film"  ng-show="film" ng-init="crawl = 'false'">  <h1>Episode {{film.episode_id | uppercase}}:     {{film.title}}</h1>  <hr>  <dl>    <dt>Opening Crawl</dt>    <dd ng-class="{'crawl':crawl === true}"       ng-click="crawl === true ? crawl = false : crawl = true">      {{film.opening_crawl}}</dd>    <dt>Director</dt>    <dd>{{film.director | capitalize}}</dd>    <dt>Producer</dt>    <dd>{{film.producer | capitalize}}</dd>    <dt>Characters</dt>    <dd ng-repeat="character in film.characters"      ui-sref="people({ id:(character | lastdir), p:''})">      {{character}}    </dd>  </dl></div>

可是,当我们浏览每部电影的条目时,演员列表仅显示了与该演员相关的URL,而不是演员的名字。


这些人物到底是谁?这样可不行(观察大图)。

我们需要用演员名字来替换这些URL文本,但是我们还没有这些关键性数据。或许在我们获取film的URL中会包含演员的名字。我们再次打开app.js,并增加getProp命令。

.directive("getProp", ['$http', '$filter', function($http, $filter) {  return {    // All we're going to display is the scope's property variable.    template: "{{property}}",    scope: {      // Rather than hard-coding 'name' as in 'person.name', we may need      // to access 'title' in some instances, so we use a variable (prop) instead.      prop: "=",      // This is the swapi.co URL that we pass to the directive.      url: "="    },    link: function(scope, element, attrs) {      // Make our 'capitalize' filter usable here      var capitalize = $filter('capitalize');      // Make an http request for the 'url' variable passed to this directive      $http.get(scope.url, { cache: true }).then(function(result) {        // Get the 'prop' property of our returned data so we can use it in the template.        scope.property = capitalize(result.data[scope.prop]);      }, function(err) {        // If there's an error, just return 'Unknown'.        scope.property = "Unknown";      });    }  }}])

getProp每次从$http.get返回的数据中返回单一属性,从中我们可以提取出所需要的属性。为了使用该指令,需要把它添加到ng-repeat循环内,就像这样:

<span get-prop prop="'name'" url="character">{{character}}</span>

很好!现在我们有了每个演员的名称及对应页面的链接,而不只是一个不明所以的URL。数据字段的其它数据添加到file页面后,这个页面就算完成了(Github Repository中查看films.html的其余代码)。


这样就好多了(观看大图)

为了重用而重构代码

通过SWAPI文档和应用程序其余部分的规划,我们清楚地看到,所有其它页面的控制器与这个极为相似,只是在获取的数据分类上有些许不同。

根据这一想法,我们把file控制器中代码移至称为genericController的功能函数,并放在app.js最后一个右括号的前面。同时还需要用变量multiple(五个实例)来替换字符串里的'films',用single(一个实例)替换'film',因为它们代表了每个页面实体的复数和单数形式。这正好让我们DRY,是一种易于读取和理解、具有可重用性的代码。

现在我们可以利用新的genericController函数(包含变量数据的复数和单数形式)新建并调用FilmsCtrl控制器,像参数那样:

.controller('FilmsCtrl', function($scope, $state, $http){  $scope = genericController($scope, $state, $http, 'films', 'film');})

很棒!我们有一个可重用的控制器,它能够提取任何给定页面所需的数据,并在一定的样式呈现出来!现在可以在FilmsCtrl后以相同的方式创建其他页面的控制器。

.controller('SpeciesCtrl', function($scope, $state, $http){  $scope = genericController($scope, $state, $http, 'species', 'specie');}).controller('PlanetsCtrl', function($scope, $state, $http){  $scope = genericController($scope, $state, $http, 'planets', 'planet');}).controller('PeopleCtrl', function($scope, $state, $http){  $scope = genericController($scope, $state, $http, 'people', 'person');}).controller('StarshipsCtrl', function($scope, $state, $http){  $scope = genericController($scope, $state, $http, 'starships', 'starship');})

接下来,采用与创建films.html相同的方式,为planets、species、people、starships和vehicles创建模板HTML文件。创建时要参考SWAPI文档里每类数据中的各个字段。

瞧!现在所有页面都显示出正确的数据并相互关联!


完整的应用程序(观看大图)

结束语

应用程序完成了!我们的应用DEMO(下文有链接)由Aerobatic托管,专门针对前端Web应用。在资源库里,你会看到我们增加了一些特殊选项,以利用Aerobatic API网关,该网关设置了一个代理,可以缓存服务器上被请求的API数据。在没有缓存的情况下,该应用即要进行延迟限制又要尽情请求数限制(SWAPI对每个域的请求数量有限制,跟其他APIs一样),因为我们的数据不经常变化,所以在第一次加载之后,服务器缓存使得一切变得非常高速。因为我们限制了onload请求和图像(数量),第一次加载速度较慢也可以接受,而且,在每个加载页面上,为了使应用速度更快,标题菜单会留在该页面上。

在DEMO和资源库里,你能看到我们在详细页面中添加了另一个API调用,它通过Google自定义搜索在Wookieepedia和StarWars.com中抓取每个实体的图像URI。因此,现在每个详细页面上都显示了动态且相关性极高的图像。

看看下面的演示,或者仔细分析隐藏部分和特定Foundation技巧的源代码,或者把仓库下载下来,然后在本地构建并改进它。

  • Star Wars Compendium,Foundation for Apps DEMO展示;
  • Star Wars Compendium Using Foundation for Apps,GitHub上;
  • 源文件下载(ZIP)。

原文链接:Creating A Complete Web App In Foundation For Apps

欢迎加入CSDN前端交流群:218126086,进行前端技术交流。 

为何Google弃置GCE和GAE选择AWS? 2012移动应用盘点:乱象丛生 最佳与奇葩共舞 从1976至2013大事记,看Android未来命运 c#经典入门视频001基础知识-苏坤老师主讲 c#经典入门视频002学习两句话-苏坤老师主讲 c#经典入门视频003基础知识-苏坤老师主讲 回顾HTML5这一年:在痛并快乐中前进 学Apple,微软宣布2013上半年零售店建设计划 真羡慕他们:谷歌宣布Gmail电话明年继续免费 c#经典入门视频004变量-苏坤老师主讲 c#经典入门视频005变量的使用和命名规则-苏坤老师主讲 c#经典入门视频006输出变量的值(及赋值符、连接符、占位符)-苏坤老师主讲 c#经典入门视频007变量交换_输入-苏坤老师主讲 回首JavaScript这一年:笑里藏刀 百媚丛生 平板优先:Supercell游戏公司日收入100万美元 Mootools实现具有排版功能的页面拖拽 2012:云计算的春天 直击Strata+Hadoop World:百万雄师过大江 能携带的网络 Anyfi 150万建网络虚拟热点 又将颠覆产业?传苹果正开发蓝牙智能手表 JavaScript社区开发者调查结果 欢乐淘、求PS大神获腾讯开放平台应用创新大赛年度金奖 2012是响应式设计之年 12月28日:1903年计算机之父冯·诺依曼出生 Android木马病毒:伪装成Google Play图标进行DDoS攻击 IE10 CSS Hack 程序员技术分享:训练机器学习 SVM算法解析 2013,谷歌的数据科学家都将干什么呢? Facebook“也”对服务器进行浸泡冷却 日本最大电脑商:Windows 8表现并不好 日均新增415个应用,Windows 8应用总数突破35000 有哪位高手可以给出windows98登录时网络服务的身份验证模块的程序或相关资料的呢?非常感谢啦 在CTreeCtrl中同时使用系统图标与自定义图标的问题?? SHGetFileInfo()为什么在Win2000下工作不正常? 请问高手:DataGrid的问题 jsp和servlet是怎样交互的? 请问 有什么方法能实现 在几个数中随机取出几个数 谢谢 请问:在执行文件DPR中有一段代码出现错误,请各问指点! 两个问题:1 关于.NET中 一个新控件propertyGrid1的使用问题;2 我想生成一个由lable和TextBox合成的控件(label在左,TextBox靠其右),怎么办? 分栏打印 依旧是undefined function mysqsl_connect()问题 急:如何在生成的exe中添加新的属性页,显示更多文件信息? V-DVD ROM!? MSDN上的例子需要uafxcwd.lib,怎么找不到呢? 请问窗口的other事件是如何触发执行的 JSP如何学习 vc在什么时候会引起小喇叭的叫声 请教高手,如果在VB里实现内存共享? 用什么方法可以转换图片类型?譬如将BMP格式的转换为JPEG格式的,请各位大哥给点提示!!! 关于vb script数组和函数功能的二个问题!高难度! 关天打印问题? 只能最小化到屏幕的左下角 *急:无为,acptvb,请帮忙看看http://www.csdn.net/Expert/topic/426/426766.shtm (有关XMLHTTP) 在php中要取出一段字符串的前n个字节,而又要判断最后一个是中文还是英文,如果是中文则将最后半个字符省略应该怎么做? 有在BCB5中用过sapi5朗读中文的朋友,高分送上! 最初级的问题,关于编译程序的。 重庆市信息产业办公室荣获全国最差信息产业办公室称号 大家用PB创建Jaguar应用程序时,一般创建一个大包还是多个包阿? 奇怪的问题,来者有分!没回答问题的先到先得! 如何把临时表建在内存中 请教一个关于DELPHI多线程的问题 *急:无为,acptvb,请帮忙看看http://www.csdn.net/Expert/topic/426/426766.shtm(有关XMLHTTP) 比爱情少一点,比友情多一点,即不讨厌又不来电,你能做到吗? 请教一个问题,一个分两帧的窗口,分别是两个CView的子类。一个view里的下拉框选中一条记录,使另一个view刷新。不知道用什么mfc函数。 有关新开窗口的问题! please intrduce a good muti-root soft for win95,win98,winme,win2000,winxp 求助:哪位大侠能介绍一下网络传输设备(象 HDSL、Cable Modem)的品牌、厂家和性能? 我的ie浏览器怎么了? 搞软件开发时应不应该是一边看书一边搞开发? 请教:C中的共同体是什么?谁能解释一下或举例说明 关于线程套间问题。 请教各位在oracle中如何在date字段下条件? Window me对ADO是不是支持的不够好??? 请问csdn.net使用shtml如何构架的! 安装Acrobat后,只出现一个PDF Writer虚拟打印机,Adobe Distiller却死活装不上,不知是何原因? sybase anywhere5.0 支持 mid 函数吗,如果支持该怎么写 微软的一道面试题!!!!! help me!(53)问题解决以后再送100分 为什么我的win2000server上装不上Exchange5.5? 虚拟DVD-ROM????!!!!!!!!!!!!!!!!!!!!!!!!!!!!???? 建ORACLE网络服务名的问题!!! 数组作为地址传递到dll,在dll内进行修改,dll释放后,数组也跟着释放,怎么办呢??先谢了! 如何用激光笔证明桌面受力后发生了形变这是一道初三物理实验题, 关于弹力与摩擦力关系的多选题目关于弹力与摩擦力关系,下列说法正确的是____.A.两物体间若有弹力,就一定有摩擦力.B.两物体间若有摩擦力,就一定有弹力.C.弹力和摩擦力的方向必互相垂直.D. 把0.4改写成计数单位是千分之一的数是( ). 摩擦力是不是弹力摩擦力也有弹性形变 关于物理模型中弹簧、橡皮绳的形变,弹力.绳子的张力突变物理模型中弹簧、橡皮绳的形变不能发生突变,弹力不能发生突变.绳子的张力可以突变.中的突变指的是什么?会发生什么效果.有什么 车对地面的压力和地面对车的支持力是不是一对平衡力 解释一下"茶杯对桌面的压力是由于茶杯发生形变而产生的" 所有压力都是因为形变而产生的吗? 高一物理:为什么绳子的受力可以突变而弹簧不能 压力和支持力是一对平衡力吗,为什么? 杯子形变? 为什么弹簧的弹力不能瞬间消失,而绳子和杆的弹力可以瞬间消失? 人对车的压力和车对人的支持力是一对平衡力吗? 为什么说“弹力和摩擦力在本质上由电磁力引起”? 在剪断的瞬间,是连着绳的物体受力不会突变还是连着弹簧的物体? 为什么他们之间没有摩擦力? 下列说法正确的是?A,木块放在桌面上对桌面的压力是由于 木块发生微小形变而产生的 B,木块放在桌下列说法正确的是?A,木块放在桌面上对桌面的压力是由于木块发生微小形变而产生的B,木块 书放在水平桌面上,桌面受弹力作用,产生弹力的直接原因是 A书的形变 B桌的形变 C书.桌的形变 D书受的重力刚考完试 这题不确定 地球同步卫星,相对与地面是静止的,因此卫星 A.不受任何力的作用 B.受地球的吸引力 C.受一对平衡力的作用D.受力情况不清楚 接触力按性质可归纳为弹力和摩擦力,他们本质上都是由电磁力引起的为什么是由电磁力引起的?分子力都是属于电磁相互作用吗? 静止放在水平桌面上的书,受到的作用力?能不能讲讲受力分析.能不能答得标准一点 小数十分位上的计数单位比千分位上的计数单位( )A 大0.99 B 小0.09 C 大0.099 D小0.9 10和100的计数单位各是多少?百位、十位、个位都说清楚 静止在水平桌面上的书,受到( )和( )的作用,这两个里的关系是大小( ),方向( ),作用在( ) 小数十分位的计数单位比千分位的计数单位--A.大0.9 B .大0.99 C .大0.099 D.大0.999 这四个答案选哪个?为 十位的计数单位是什么 摩擦力的大小与弹力成正比吗?说明理由. 摩擦力的方向与接触面相切 Why?最好画图说明,看了很多介绍不理解. 0.80的计数单位是?他有几个这样的计数单位? 摩擦力的大小与什么有关? 摩擦力的方向与接触面相切怎么理解?那和接触面平行吗?rt如何理解呢?还是不理解相切 一个木块平放在水平面桌面上这个状态一共有几个弹力 木块和桌面都有发生形变吗 滑动摩擦力与弹力的区别和联系是什么? 如何理解摩擦力的方向与接触面相切 0.80的计数单位是( ) 滑动摩擦力中,摩擦力方向与其物体弹力方向有什么关系吗?是永远相互垂直吗?摩擦力方向与其物体弹力方向有什么关系 是否相互垂直 如果不是请举例 物体所受摩擦力的方向总是和接触面相切对么 嗯、我知道与相对运动什么的相反,就问这句对么~选择,可以选么 怎样理解常见的弹力、摩擦力是由电磁力引起的? 滑动摩擦力中,摩擦力方向与其物体弹力方向有什么关系吗?是永远相互垂直吗?拜托各位了 3Q摩擦力方向与其物体弹力方向有什么关系 是否相互垂直 如果不是请举例 “摩擦力的方向总与接触面相切”这句话怎么解释? 物理:弹性形变及弹性的定义弹力产生的两个条件、都有什么力属于弹力?弹力的定义、绳的拉力的方向、压力和支持力的方向。弹簧的弹力F=kx,x表示什么?k叫做弹簧的什么?单位是什么?k的 为什么有摩擦力一定要有正压力(弹力)? 地球自身的引力是自己内部压力的来源?地球内部之所以有那么大的压力,是因为地球自身的万有引力造成的!这是对的吗?要是不是对的,那是为什么呢? 如图,判断题 0.53与0.530的大小相等,但它们的计数单位不同对吗 地球的引力是否就是地球的重力呢?是磁场力吗?地球的引力、重力、磁场力是一回事情吗?地球的重力是因为地球的磁场而产生的吗?如果答的好,分数翻倍奖励, 数学判断题(3道)脱式计算(2道)解决问题(1道)判断:1.一个小数3.012先把它扩大10倍后,再缩小到它的1/100,小数的大小不变.()2.能被2整除的数都是合数,不能被2整除的数都是质数.()3.一个半圆的直径 弹力是指发生弹性形变的物体因要 而对使它发生弹性形变的物体施加的力,弹力的方向总是跟物体形变的方向 ,且与接触面 .(当中空白填写答案) 有摩擦力一定有弹力?说明原因语言要简洁 请珍惜眼前这个人用英语怎么说"请珍惜眼前这个人"用英语怎么说? 那请问弹力是不是使弹力的施力物体发生弹性形变的力的反作用力? 有摩擦力就一定有弹力吗 珍惜爱你的人和你爱的人五百次的回眸才能换来今生的擦肩而过.可以一秒钟遇到一个人,一分钟认识一个人,一个小时喜欢上一个人,一天时间爱上一个人,但是却要用一辈子去忘记一个人.如果, 弹力 和摩擦力的关系是 有弹力一定有摩擦力,还是 有摩擦力一定有弹力? 0.92里面有几个千分之一的计数单位 “珍惜眼前的幸福”怎么翻译成英文? 弹簧产生的弹力是否与使弹簧形变的力相等?我想知道这个 因为胡克定律F=kx的F究竟是指的弹簧产生的弹力还是使弹簧形变的力? 8.95的计数单位是(),它里面含有()千分之一 什么是计数单位? 是否在弹力存在的施力物与受力物都发生了弹性形变?如果不是,请举反例. 请问0.09的计数单位是什么
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn