编者注：我们发现了有趣的系列文章《30天学习30种新技术》，正在翻译，一天一篇更新，年终礼包。下面是第19天的内容。 到目前为止，我们这一系列文章涉及了Bower、AngularJS、GruntJS、PhoneGap和MeteorJS 这些JavaScript技术。今天我打算学习一个名为Ember的框架。本文将介绍如何用Ember创建一个单页面的社交化书签应用。本教程将包括两篇：第1篇介绍客户端代码和用HTML 5本地存储持久保存数据，第2篇中我们将使用一个部署在OpenShift上的REST后端。过几天我会写第2篇。 应用 我们将开发一个社交化书签应用，允许用户提交和分享链接。你可以在这里查看这个应用。这个应用可以做到： 当用户访问/时，他会看到以提交时间排序的报道列表。 当用户访问某个书签时，例如#/stories/d6p88，用户会看到关于这个报道的信息，例如是谁提交的，何时提交的，以及文章的摘要。 最后，当用户通过#/story/new提交新报道时，内容会存储在用户浏览器的本地存储上。 什么是Ember？ Ember是一个客户端的JavaScript MV* 框架，用来构建野心勃勃的web应用。它依赖于jQuery和Handlebars库。如果你曾经在Backbone下工作，那么你会发现Ember是一个武断的Backbone，或者Backbone++。Ember可以为你完成很多事情，如果你遵循它的命名约定的话。Ember.js在这方面很突出。因此，如果我们在应用中加入了url路由和报道，那么我们就有了这些： 报道的模板 StoriesRoute StoriesController 请参考命名约定文档来理解Ember的命名约定。 Ember核心概念 本节将介绍我们的示例应用中将涉及的四个EmberJS的核心概念： 模型：模型代表我们展示给用户的应用领域内的对象。在上述例子中，一个报道就代表一个模型。报道，加上它的属性，包括标题、url等，构成一个模型。模型可以通过jQuery加载服务器端的JSON数据的方式来获取和更新，也可以通过Ember Data来获取和更新。Ember Data是一个客户端的ORM实现，可以利用它方便地对底层的持久性存储进行CRUD操作。Ember Data提供一个仓库接口，可以借助提供的一些适配器配置。Ember Data提供的两个核心适配器是RESTAdapter和FixtureAdapter。在本文中，我们将使用LocalStorage适配器，该适配器将数据持久化为 HTML 5 的LocalStorage。请参阅此文档了解详情。 路由器和路由：路由器指定应用的所有路由。路由器将URL映射到路由。例如，当一个用户访问/#/story/new的时候，将渲染newstory模板。该模板展现了一个HTML表单。用户可通过创建Ember.Route子类来定制路由。在上述例子中，用户访问/#/story/new将渲染一个基于newstory模板的默认模型。NewStoryRoute会负责将默认的模型分配给newstory模板。请参阅文档了解详情。 控制器：控制器可以做两件事——首先它装饰路由返回的模型，接着它监听用户执行的行动。例如，当用户提交报道的时候，NewStoryController负责通过Ember Data API将报道的数据持续化到存储层。请参阅文档了解详情。 模版：模板向用户展示应用的界面。每个应用都有一个默认的应用模板。 Ember的Chrome插件 EmberJS提供了一个Chrome插件，因此调试ember应用很容易。这个插件可以在 chrome web store 下载安装。可以查看Ember团队做的视频了解chrome插件的详情。 Github仓库 今天的示例程序的代码可从github取得。 第一步 下载新手套装 ember提供了一套新手装备，因此开始使用框架非常简单。新手套装包括了需要用到的javascript文件（ember-*.js、jquery-*.js和handlerbars-*.js）以及示例应用。下载新手套装，解压缩，最后重命名为getbookmarks。 wget https://github.com/emberjs/starter-kit/archive/v1.1.2.zip unzip v1.1.2.zip mv starter-kit-1.1.2/ getbookmarks 在浏览器中打开index.html，你会看到如下页面： 第二步 启用GruntJS监视 这一步是可选的，不过如果你做了这步，那么你的生活质量将大大提高。如果你决定跳过这步，那么每次你做了改动之后都需要刷新浏览器。在第7天的文章，我讨论了GruntJS的在线重载功能。我没有在EmberJS里找到任何自动重载的功能，因此我决定使用GruntJS的livereload来提高效率。你需要Node、NPM和Grunt-CLI。请参考我第5天和第7天的文章了解详情。 在getbookmarks文件夹内创建package.json，内容如下： { "name": "getbookmarks", "version": "0.0.1", "description": "GetBookMarks application", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-watch": "~0.5.3" } } 创建Gruntfile.js，内容如下： module.exports = function(grunt) { grunt.initConfig({ watch :{ scripts :{ files : ['js/app.js','css/*.css','index.html'], options : { livereload : 9090, } } } }); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.registerTask('default', []); }; 使用npm安装依赖： npm install grunt --save-dev npm install grunt-contrib-watch --save-dev 在index.html的头部加入： 调用grunt watch命令，同时在你的默认浏览器中打开index.html。 ; grunt watch Running "watch" task Waiting...OK 修改index.html，无需刷新就能看到改变： 第三步 理解新手模板应用 在新手模板中，除了css之外，有两个和应用相关的文件——index.html和app.js。为了理解模板应用的作用，我们需要理解app.js。 App = Ember.Application.create(); App.Router.map(function() { // put your routes here }); App.IndexRoute = Ember.Route.extend({ model: function() { return ['red', 'yellow', 'blue']; } }); 解释下以上的代码： 第一行创建了一个Ember应用的实例。 使用App.Route.map定义应用的路由。每个Ember应用都有一个默认路由Index，绑定到/。所以，当调用/路由的时候，index模板将被渲染。index模板由index.html定义。感觉到了很多“约定大于配置”了吧？ 在Ember中，每个模板都有一个model作为支持。路由负责制定哪个mobdel支持哪个模板。在上述app.js中，IndexRoute返回一个字符串数组，作为index模板的model。index模板迭代这个数组然后渲染一个列表。 第四步 移除新手模板代码 移除js/app.js中的代码，然后用以下内容替换： App = Ember.Application.create(); App.Router.map(function() { // put your routes here }); 相应地，将index.html的内容替换为： 第五步 添加Twitter Bootstrap 我们将使用twitter bootstrap来给应用添加样式。从官网下载twitter bootstrap包，然后复制bootstrap.css到css文件夹，同时复制字体文件夹。 接着在index.html中加入bootstrap.css，在页首使用一个固定位置的导航条。 上述html中， 访问#/story/new即可查看表单： 接着我们在导航条中添加一个链接，这样访问报道提交表单就很容易。替换一下nav元素： 注意上面我们用{{#link-to}}创建了一个指向路由的链接。请参阅文档了解详情。 表单已经有了，接下来要添加HTML 5本地存储的功能。为了添加本地存储支持，我们需要首先下载Ember Data和Local Storage Adapter JavaScript文件。将这些文件放在js/libs下。接着，在index.html中添加这些script标签。 如前所述，Ember Data是一个客户端的ORM实现，它使在底层存储进行CRUD操作很容易。这里我们将使用LSAdapter。在app.js中加入： App.ApplicationAdapter = DS.LSAdapter.extend({ namespace: 'stories' }); 接着是定义model。一篇报道需要有url、title（标题）、fullname（提交报道的用户的全名）、excerpt（摘要），以及SubmittedOn（日期）信息。在下面的模型中，我们使用了字符串和日期类型。适配器默认支持的属性类型为字符串、数字、布尔值和日期。 App.Story = DS.Model.extend({ url : DS.attr('string'), tags : DS.attr('string'), fullname : DS.attr('string'), title : DS.attr('string'), excerpt : DS.attr('string'), submittedOn : DS.attr('date') }); 接着我们编写NewstoryController来持久化内容： App.NewstoryController = Ember.ObjectController.extend({ actions :{ save : function(){ var url = $('#url').val(); var tags = $('#tags').val(); var fullname = $('#fullname').val(); var title = $('#title').val(); var excerpt = $('#excerpt').val(); var submittedOn = new Date(); var store = this.get('store'); var story = store.createRecord('story',{ url : url, tags : tags, fullname : fullname, title : title, excerpt : excerpt, submittedOn : submittedOn }); story.save(); this.transitionToRoute('index'); } } }); 以上代码展示了如何从获取表单中的值，然后使用store API在内存中创建记录。为了在localstorage中存储记录，我们需要调用Story对象的save方法。最后，我们将用户重定向到index路由。 接着我们测试下这个应用，创建一个新的报道，接着打开Chrome开发者工具，在资源区域你可以查看这则报道。 第六步 显示所有报道 接着我们要做的是，当用户访问首页的时候，展示所有报道。 正如我之前提到的，路由负责询问model。我们将加上IndexRoute，它会找出本地存储中保存的所有报道。 App.IndexRoute = Ember.Route.extend({ model : function(){ var stories = this.get('store').findAll('story'); return stories; } }); 每个路由支持一个模板。IndexRoute支持index模板，因此我们需要修改index.html： 现在访问/，我们会看到一个报道的列表： 还有一个问题，报道没有按照时间顺序排列。我们将创建一个IndexController负责排序。我们指定依照submittedOn属性倒序排列，以确保新的报道出现在上面。 App.IndexController = Ember.ArrayController.extend({ sortProperties : ['submittedOn'], sortAscending : false }); 修改之后，我们会看到按照submittedOn属性排序的报道。 第七步 查看单独的报道 最后要实现的功能是：用户点击某则报道的时候会看到详细信息。我们加一个路由： App.Router.map(function() { this.resource('index',{path : '/'},function(){ this.resource('story', { path:'/stories/:story_id' }); }); this.resource('newstory' , {path : 'story/new'}); }); 以上的代码展示了如何嵌套路由。 :story_id部分叫做动态字段，因为相应的报道 id会被注入URL。 然后我们添加根据报道id获取报道的StoryRoute。 App.StoryRoute = Ember.Route.extend({ model : function(params){ var store = this.get('store'); return store.find('story',params.story_id); } }); 最后，我们更新下index.html，给每个报道添加链接： 修改完毕地后，可以在浏览器中直接看到结果。 第八步 为submittedOn日期添加格式 Ember下有辅助函数的概念。所有Handlebars模板都可以调用辅助函数。 我们将使用moment.js库为日期添加格式。将以下代码加入index.html。 接着我们将定义我们的第一个辅助函数，该函数将日期转为人类可读的形式： Ember.Handlebars.helper('format-date', function(date){ return moment(date).fromNow(); }); 最后我们在报道模板中加入format-data辅助函数。 报道页面的效果如下： 今天就到这里了。持续反馈。 原文 Day 19: Ember--The Missing EmberJS Tutorial翻译 SegmentFault

**javacript:编程语言（Java，c，scheme，python）；发展简史Brendan Eich被指定为这种"简化版Java语言"的设计师，他只用10天时间就把Javascript设计出来了。js代码的书写位置：1.行内式（不推荐，不做过多介绍）2.内嵌式：在页面任意位置，添加<script>js</script>ppm3.外链式：新建一个.js后缀文件，用<script src="js文件的路径"></script>js数据类型：1.数值类型（Number)一切都是数值类型或一个非数字（not a number)2.字符串类型（string）被引号包裹的所有内容3.布尔类型（boolean）只有true和false4.null类型只有一个值：null（表示空的意思）5.undefined类型只有一个值：undefined（表示没有值的意思）判断数据类型：1.使用typeof关键字来进行判断（返回的是数据类型的字符串格式）2.判断一个变量是不是数字数据类型转换：1其他类型转数值：1.1Number（变量）可以把一个变量强制转换成数值类型可以转换小数,会保留小数可以转换布尔值遇到不可操作的时候返回NaN1.2 parseInt(变量)可以把一个变量强制转换成数值类型从第一位开始检查,是数字就转换,直到一个不是数字的开头就不是数字,直接返回NaN1.3 parseFloat(变量）可以把一个变量强制转换成数值类型从第一位开始检查,是数字就转换,直到一个不是数字的东西开头就不是数字,直接返回NaN认识一次小数点2. 其他类型转字符串2.1 变量.tostring()undefined和null不能使用；2.2 string(变量）所有数据类型都可以2.3 使用加法运算只要+任何一边是字符串,就会是字符串拼接3. 其他类型转布尔1.boolean(变量):在js中,只有"",0,null,undefined,NaN这些在转布尔的时候会转成false,其他都会转成true赋值运算符：1.数字运算符跟正常学的数学运算一样使用2.赋值运算符3.比较运算符本期文章到此结束，感谢观看！

现代 JavaScript 教程覆盖了 JavaScript 的核心基础知识，包括基本数据类型、变量和常量、操作符和表达式、条件和循环语句、函数、数组、对象、模块和异步编程等。此外，现代 JavaScript 教程还介绍了一些实用的 JavaScript 库和框架（如 jQuery、React 和 Vue.js 等），以及现代前端工具的使用方法（如 Webpack、Babel 和 ESLint 等）。