Posts match “ javascript ” tag:

授權方式(Auhorization): CC-BY 4.0

這篇是Meteor的Introduction, 基本上跟你去google meteor.js得到大多數的文章一樣。
以下是從meteor 線上文件 抄過來的。

Quick Start

Mac, Linux, Freebsd 可以使用以下作法, Windows請參閱Meteor on Windows
安裝Meteor - Install Meteor

$ curl https://install.meteor.com | /bin/sh

新增專案 - Create Project

$ meteor create myapp

本地端執行伺服器 - Run it locally

$ cd myapp
$ meteor
=> Meteor server running on: http://localhost:3000/

基本上Meteor會自動偵測你的檔案更動而自動restart server,所以你要做的事情就是開始寫一個meteor app!
當然,如果你需要範例的話,也很簡單,可以參考Examples ,甚至直接用meteor提供的功能。

$ meteor create --example todos

第一篇先到這邊,之後再慢慢介紹Meteor的優點,還有如何開始寫meteor。

授權方式(Auhorization): CC-BY 4.0

今天在irc #meteor看到的討論,覺得很有趣,所以就做個記錄。
至於meteor的使用心得就慢慢來吧。
我是個懶惰的人。

23:41 < daslicht> I ahve added some data to an item like this:
23:41 < daslicht> <div class="masterItem" data-details-id="{{detailsId}}">
23:41 < daslicht> and a evenmt listener
23:42 < daslicht> inside that event listener I can now access the detailsId like this:
23:42 < daslicht> $(this).attr('detailsId')
23:42 < daslicht> but this did not work:
23:42 < daslicht> $(this).data('detailsId')
23:42 < daslicht> idea why ?

原始的問題大概是這樣,這位老兄想用Meteor Event 去對class是masterItem的div做點事情,但是他發現
jQuery的$(this).data失效了。

問題就在於Meteor Event Handler裡面的$(this) 到底是什麼東西。

23:51 < daslicht> $(this) is NOT refering to the clicked element but to the data item itself which was used to render the item

最後他自己找到的解法。

23:53 < digilord> My next suggestion was going to be to console.log $(this)
23:53 < daslicht> so i dont even need to add a data attribute to each item since it already has access to all data
23:54 < daslicht> already done
23:54 < daslicht> :)
23:55 < daslicht> so my mongo details collection has a detailId property on each document
23:55 < daslicht> so when I use the Meteor Events handler I can just access that property inside the eventhandler like this:
23:55 < daslicht> $(this)[0].detailsId
23:55 < daslicht> FU ummm FREAKING awesome
23:56 < daslicht> *jumps euphoric through the room*

其實一般來說meteor event handler單純要對clicked element做一些取值之類的動作, 是透過這種方式

'click .foo': function(evt) {
    $(evt.target).data("blah");
}

不過這位老兄應該希望是return functions, 所以必須要用$(this)[0].blah...
直接去操作meteor event handler object裡面的東西來用。

授權方式(Auhorization): CC-BY 4.0

Intro

利用meteor.js找回以前的手感,接下來要找個可以做成專案的東西。

架構

  • Backend: Express based on node.js
  • Frontend: Angular.js
  • wireframe: moqups
  • Layout: Bootstrap
  • DB: MongoDB
  • VC: bitbucket
  • 其他: Grunt, Berkshelf, Vagrant, travisCI, jade, ..blah

Express

首先參照這篇express tutorial Setup環境,

安裝Express

$ sudo npm install express -g
express@3.3.1 /usr/local/lib/node_modules/express
├── methods@0.0.1
├── fresh@0.1.0
├── range-parser@0.0.4
├── cookie-signature@1.0.1
├── buffer-crc32@0.2.1
├── cookie@0.1.0
├── debug@0.7.2
├── commander@0.6.1
├── mkdirp@0.3.4
├── send@0.1.1 (mime@1.2.9)
└── connect@2.8.1 (uid2@0.0.2, pause@0.0.1, qs@0.6.5, bytes@0.2.0, cookie@0.0.5, formidable@1.0.14)

安裝好了 express後

建立專案

$ express order-plant --sessions --css less
   create : order-plant
   create : order-plant/package.json
   create : order-plant/app.js
   create : order-plant/public
   create : order-plant/public/images
   create : order-plant/public/javascripts
   create : order-plant/public/stylesheets
   create : order-plant/public/stylesheets/style.less
   create : order-plant/routes
   create : order-plant/routes/index.js
   create : order-plant/routes/user.js
   create : order-plant/views
   create : order-plant/views/layout.jade
   create : order-plant/views/index.jade

   install dependencies:
     $ cd order-plant && npm install

   run the app:
     $ node app

因為打算用Bootsrap, 所以這邊css engine我選擇less

Post Install

$ cd order-plant && npm install
express@3.3.1 node_modules/express
├── methods@0.0.1
├── fresh@0.1.0
├── range-parser@0.0.4
├── cookie-signature@1.0.1
├── buffer-crc32@0.2.1
├── cookie@0.1.0
├── debug@0.7.2
├── commander@0.6.1
├── mkdirp@0.3.4
├── send@0.1.1 (mime@1.2.9)
└── connect@2.8.1 (uid2@0.0.2, pause@0.0.1, qs@0.6.5, bytes@0.2.0, cookie@0.0.5, formidable@1.0.14)

jade@0.32.0 node_modules/jade
├── character-parser@1.0.2
├── mkdirp@0.3.5
├── commander@1.2.0 (keypress@0.1.0)
├── monocle@0.1.48 (readdirp@0.2.5)
├── with@1.1.0 (uglify-js@2.3.6)
├── constantinople@1.0.1 (uglify-js@2.3.6)
└── transformers@2.0.1 (css@1.0.8, promise@2.0.0, uglify-js@2.2.5)

less-middleware@0.1.12 node_modules/less-middleware
├── mkdirp@0.3.5
└── less@1.4.0 (mime@1.2.9, ycssmin@1.0.1, request@2.21.0)

Run App

$ node app.js

此時就可以看到Express的歡迎畫面

修改package.json

  1 {
  2   "name": "order-plant",
  3   "version": "0.0.1",
  4   "private": true,
  5   "scripts": {
  6     "start": "node app.js"
  7   },
  8   "dependencies": {
  9     "express": "3.3.1",
 10     "jade": "*",
 11     "less-middleware": "*"
 12   }
 13 }
 ```
 
 ## Commit to Bitbucket
1. 在bitbucket建立好帳號
2. create private repo
3. 產生ssh key
4. 需要ssh-agent
5. ssh-add
6. ssh-add -l && ssh -T git@bitbucket.org  確認

 ```
 $ git init
 $ git remote add origin git://repo
 $ git add *
 $ git push origin --all

授權方式(Auhorization): CC-BY 4.0

猜猜看

var x = 5;
(function () {
    alert(x);
  var x = 6;
})()

請問alert答案是?
答5的人請繼續看下去。

*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*

緣起

今天在##javascript 有人問這個 http://jsfiddle.net/2mS5Q

後來再看ECMASCRIPT 6的新Feature的時候看到了解答
http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-javascript-hoisting-explained/

結論

javascript 是 function scope 然後 無論你在那裏宣告,他都會當作是最前面宣告
於是前面的題目就變成

var x = 5;
(function () {
  var x;
    alert(x);
  x = 6;
})()

答案就是 undefined