meteor入门自学

1) 在此文件夹窗口内空白区域右键单击(需要同时按住Shift),从菜单中选择"在此处打开命令行窗口"的项;
2) 在此窗口地址栏里直接输入cmd,回车即可。
3) 安装过VS code 后直接在命令行目录中直接输入code+空格+. 即可打开编辑器。

4)Alt+空格+c 可以快速关闭CMD窗口。

 

一、(Windows系统)进入meteor官网安装chocolatey,然后安装meteor到“”C:\Users\hailu\AppData\Local\.meteor”,然后就按照Tutorial中的提示一步步来。

3)The HTML content is written using a JavaScript extension called JSX, which kind of looks like writing HTML inside your JavaScript.JSX is supported by the ecmascript Atmosphere package, which is included in all new Meteor apps by default.

4)(1)AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。它可通过 <script> 标签添加到 HTML 页面。AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中。AngularJS是为了克服HTML在构建应用上的不足而设计的。类库 - 类库是一些函数的集合,它能帮助你写WEB应用。起主导作用的是你的代码,由你来决定何时使用类库。类库有:jQuery等。框架 - 框架是一种特殊的、已经实现了的WEB应用,你只需要对它填充具体的业务逻辑。这里框架是起主导作用的,由它来根据具体的应用逻辑来调用你的代码。框架有:knockout、sproutcore等。AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为指令(directives)的结构,让浏览器能够识别新的语法。例如:

 

使用双大括号{{}}语法进行数据绑定;

使用DOM控制结构来实现迭代或者隐藏DOM片段;

支持表单和表单的验证;

能将逻辑代码关联到相关的DOM元素上;

能将HTML分组成可重用的组件。

(2)AngularJS试图成为WEB应用中的一种客户端的解决方案。这意味着它不只是你的WEB应用中的一个小部分,还是一个完整的客户端的解决方案。这会让AngularJS在构建一个CRUD(增加Create、查询Retrieve、更新Update、删除Delete)的应用时显得很"固执"(原文为 opinionated,意指没有太多的其他方式)。但是,尽管它很"固执",它仍然能确保它的"固执"只是在你构建应用的起点,并且你仍能灵活变动。AngularJS的一些出众之处如下:

构建一个CRUD应用可能用到的全部内容包括:数据绑定、基本模板标识符、表单验证、路由、深度链接、组件重用、依赖注入。

测试方面包括:单元测试、端对端测试、模拟和自动化测试框架。

具有目录布局和测试脚本的种子应用作为起点

如游戏,图形界面编辑器,这种DOM操作很频繁也很复杂的应用,和CRUD应用就有很大的不同,它们不适合用AngularJS来构建。像这种情况用一些更轻量、简单的技术如jQuery可能会更好。

 

(3)下面是一个包含了一个表单的典型CRUD应用。表单值先经过验证,然后用来计算总值,这个总值会被格式化成本地的样式。下面有一些开发者常见的概念,你需要先了解一下:

1.将数据模型(data-model)关联到视图(UI)上;

2.写、读、验证用户的输入;

3.根据模型计算新的值;

4.将输出格式本地化,

index.html:

script.js

试一下上面这个例子。然后我们一起来看下这个例子的工作原理。

在<html>标签里,我们用一个ng-app标识符标明这是一个AngularJS应用。这个ng-app标识符会使AngularJS自动初始化(auto initialize)你的应用。

我们用<script>标签来加载AngularJS脚本:

<script src="angular-1.1.0.min.js"></script>通过设置<input>标签里的ng-model属性, AngularJS会自动对数据进行双向绑定。我们还同时进行了一些简单的数据验证:

Quantity:<input type="integer"min="0"ng-model="qty"required >Cost:<input type="number"ng-model="cost"required >这个输入框的widget看起来很普通,但如果认识到以下几点那它就不普通了:

当页面加载完后,AngularJS会依照widget里的声明的模型名字(qty、cost)生成同名变量。你可以把这些变量认为是MVC设计模式中的M(Model);

注意上面widget里的input有着特殊的能力。如果你们没有输入数据或者输入的数据无效,这个input输入框会自动变红。输入框的这种新特性,能让开发者更容易实现CRUD应用里常见的字段验证功能。

终于,我们可以来看一下神秘的双大括号{{}}了:

Total:{{qty *cost |currency}}这个{{表达式}}标记是AngularJS的数据绑定。其中的表达式可以是表达式和过滤器({{ expression | filter }})的组合。AngularJS提供了过滤器来对输入输出数据格式化。

上面的这个例子里,{{}}里的表达式让AngularJS把从输入框中获得的数据相乘,然后把相乘结果格式化成本地货币样式,然后输出到页面上。

值得一提的是,我们既没有调用任何AngularJS的方法,也没有像用框架一样去编写某个具体逻辑,就是完成了上述功能。这个实现的背后是因为浏览器做了比以往生成 静态页面更多的工作,让它能满足动态WEB应用的需要。AngularJS使得动态WEB应用的开发门槛降到不需要类库或者框架的程度。

5)handlebars玩家指南

 

 

为什么需要模板引擎

 

关于前端的模板引擎,我用一个公式来解释

 

            模板引擎 
模板 + 数据 ========> html页面

模板引擎就像是html的解析生成器,将对应的模板填充完数据之后生成静态的html页面。它可以在浏览器端(比如angular中指令所用的模板)也可以在服务器端执行,不过一般用于服务器端。因为它的一个作用是抽象公共页面来重用,如果在服务端填充数据,可以减少回填数据给页面的ajax请求,从而提升浏览器端整体页面渲染速度。

 

handlebars让我们看到一个好的插件应该有的特征:

  • 可识别性。接口简单,使用方便,容易上手。
  • 高可用性。自带常用一些功能(helper),不求多而求精。
  • 可扩展性。复杂的业务逻辑,开发人员可以自定义helper去扩展和实现。

6)Meteor 的模板系统 Spacebars

(Spacebar 就是简单的 HTML 加上三件事情:Inclusion (有时也称作 “partial”)、Expression 和 Block Helper。)


  • Inclusion :通过 {{> templateName}} 标记,简单直接地告诉 Meteor 这部分需要用相同名称的模板来取代。

  • Expression :比如{{title}} 标记,它要么是调用当前对象的属性,要么就是对应到当前模板管理器中定义的helper方法,并返回其方法值。

  • Block Helper :在模板中控制流程的特殊标签,如{{#each}}…{{/each}} 或{{#if}}…{{/if}} 。

但是在 meteor 中,我将 HTML 和 CSS 作为画笔,将js比作连线笔,画笔画出界面,对于需要展示数据库内容的地方,留给js连接就好,画笔和连线笔中间的链接点就是 Spacebars(一个类似于 Handlebars 的东西,简单说就是将 HTML 中需要连接js的地方 {{name}} 标识,在 js 中直接处理数据 return 给 HTML 中对应位置)。



作者:wolf3c
链接:https://www.zhihu.com/question/20296322/answer/79431097
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

现在最热门的前端框架,毫无疑问是 React 。

上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑。

React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。

 

由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。

这个项目本身也越滚越大,从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目,目标更是宏伟,希望用写 Web App 的方式去写 Native App。如果能够实现,整个互联网行业都会被颠覆,因为同一组人只需要写一次 UI ,就能同时运行在服务器、浏览器和手机

7)文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的"浏览器大战",双方为了在JavaScriptJScript一决生死,于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物,既有VBScriptActiveX、以及微软自家的DHTML格式等,使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说,这是表示和处理一个HTML或XML文档的常用方法。有一点DOMDOM

很重要,DOM的设计是以对象管理组织(OMG)的规约为基础的,因此可以用于任何编程语言。最初人们把它认为是一种让JavaScript在浏览器间可移植的方法,不过DOM的应用已经远远超出这个范围。Dom技术使得用户页面可以动态地变化,如可以动态地显示或隐藏一个元素,改变它们的属性,增加一个元素等,Dom技术使得页面的交互性大大地增强。

 

DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示,不过页面当然可能并不是以这种树的方式具体实现。

通过 JavaScript,您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。

要改变页面的某个东西,JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口,连同对 HTML 元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。

在 1998 年,W3C 发布了第一级的 DOM 规范。这个规范允许访问和操作 HTML 页面中的每一个单独的元素。

所有的浏览器都执行了这个标准,因此,DOM 的兼容性问题也难觅踪影了。

DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。

DOM 被分为不同的部分(核心、XML及HTML)和级别(DOM Level 1/2/3):

优点和缺点

DOM的优势主要表现在:易用性强,使用DOM时,将把所有的XML文档信息都存于内存中,并且遍历简单,支持XPath,增强了易用性。

DOM的缺点主要表现在:效率低,解析速度慢,内存占用量过高,对于大文件来说几乎不可能使用。另外效率低还表现在大量的消耗时间,因为使用DOM进行解析时,将为文档的每个element、attribute、processing-instruction和comment都创建一个对象,这样在DOM机制中所运用的大量对象的创建和销毁无疑会影响其效率。

 

 

 

8)family-name 用于某个元素的字体族名称或/及类族名称的一个优先表。

Sans-serif专指西文中没有衬线的字体,与汉字字体中的黑体相对应。与衬线字体相反。衬线体(serif)该类字体通常是机械的和统一线条的,它们往往拥有相同的曲率,笔直的线条,锐利的转角。

在字体排印学里,衬线指的是字母结构笔画之外的装饰性笔画。有衬线的字体叫衬线体(serif);没有衬线的字体,则叫做无衬线体(sans-serif)。

 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值