javascript

npm 私服

https://www.jfrog.com/confluence/display/RTF3X/Npm+Repositories

sudo npm install -g sinopia sinopia 修改npm的registry到http://localhost:4873

npm install -g nrm nrm add local http://localhost:4873 nrm use local 想切换回来的时候:

nrm use npm

React

render : function() {
    var rows;
    for (var i = 0; i < this.state.data.length; i++) {
      var item = this.state.data[i];

      rows.push(
        <tr>
          <td>{item.name}</td>
          <td>{item.age}</td>
          <td>{item.dob}</td>
          <td>{item.score}</td>
        </tr>
      );
    }

    return (
        <table>
          <thead>
            <tr>
              <th onClick={this.sortData.bind(null, 'name')}>Name</th>
              <th onClick={this.sortData.bind(null, 'age')}>Age</th>
              <th onClick={this.sortData.bind(null, 'dob')}>D.O.B</th>
              <th onClick={this.sortData.bind(null, 'score')}>Score</th>
            </tr>
          </thead>
          <tbody>
            {rows}
          </tbody>
        </table>
    );
  }

通讯

For further reaching notifications a publish/subscribe system will be more flexible and easier to maintain. This can be done simply with native events or a library such PubSubJS, binding and unbinding with a components lifecycle methods. 

var Parent = React.createClass({
  handleMyEvent: function(e) {...},
  componentWillMount: function() {
    window.addEventListener("my-event", this.handleMyEvent, false);
  },
  componentWillUnmount: function() {
    window.removeEventListener("my-event", this.handleMyEvent, false);
  },
  render: function() {...}
});

var Grandchild = React.createClass({
  handleClick: function(e) {
    var customEvent = new CustomEvent("my-event",  {
      detail: { ... },
      bubbles: true
    });
    this.refs.link.getDOMNode().dispatchEvent(customEvent);
  },
  render: function() {
    return <a ref="link" onClick={this.handleClick}>Click me</a>;
  }
});

Bootstrap 简介

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。

在现代 Web 开发中，有几个几乎所有的 Web 项目中都需要的组件。

Bootstrap 为您提供了所有这些基本的模块 - Grid、Typography、Tables、Forms、Buttons 和 Responsiveness。

此外，还有大量其他有用的前端组件，比如 Dropdowns、Navigation、Modals、Typehead、Pagination、Carousal、Breadcrumb、Tab、Thumbnails、Headers 等等。

有了这些，你可以搭建一个 Web 项目，并让它运行地更快速更轻松。

UI调试工具Fiddler,微软开发的。

获得jquery绑定的事件an

var events = $(".add").data('events');
if (events && events.click) {



    // jQuery 1.4.x+
    $.each(events.click, function(key, handlerObject) {
        console.info(handlerObject.handler);
    });
}

$.ajax 在IE中不work

$.ajaxSetup ({
    cache: false //关闭AJAX相应的缓存
});

Jquery 查询对象的几种方式

| 查询方式                 | 例子                                          |
| 按class查询              | $(".myclass")                                 |
| 按ID查询                 | $("#myid")                                    |
| 定位某个元素，查找子元素 | $(".quickMenu i").bind('click', function () { |
| 函数里获得this的子元素   | $(this).find('i').toggleClass("ticked");      |
|                          |                                               |

Jquery widget 编写

  1. http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/
  2. 编写jQueryUI插件(widget)
  3. 使用jquery-ui-widget-factory编写jquery插件 
var Green5  = {
        getLevel: function () { return this.options.level; },
        setLevel: function (x) {
                var greenlevels = this.options.greenlevels;
                var level = Math.floor(Math.min(greenlevels.length-1, Math.max(0,x)));
                this.options.level = level;
                this.element.css({background: greenlevels[level]});
                this._trigger('change', 0, level);
        },
        _init: function() { this.setLevel(this.getLevel()); }, // grab the default value and use it
        darker: function() { this.setLevel(this.getLevel()-1); },
        lighter: function() { this.setLevel(this.getLevel()+1); },
        off: function() {
                this.element.css({background: 'none'});
                this._trigger('done');
                this.destroy(); // use the predefined function
        },
        options: {
                level: 15,
                greenlevels: ['#000','#010','#020','#030','#040','#050','#060','#070','#080','#090','#0a0','#0b0','#0c0','#0d0','#0e0','#0f0', '#fff']
        }
};
$.widget("ui.green5", Green5);

<p class="target">This is a test paragraph with green level <span class="level">undefined</span>.</p>

//  The on button above does the following:
$('.target').green5({
        change: function(event, level) { $('.level', this).text(level); } // callback to handle change event
});
$('.target').bind('green5done', function() { $('.level', this).text('undefined');alert('bye!') }); // event handler for done event

Involving the Mouse

Now, a lot of what we want to do with widgets involves mouse tracking, so ui.core.js provides a mixin object that includes lots of useful methods for the mouse. All we need to do is add the $.ui.mouse widget to our widget prototype: 

var Green6 = {mouse-overriding function and widget-specific functions};
$.widget ('ui.green6', $.ui.mouse, Green6);

And override $.ui.mouse's functions (_mouseStart, _mouseDrag, _mouseStop) to do something useful, and call this._mouseInit in your this._init and this._mouseDestroy in your this.destroy. The mouse defaults are automagically including in your options object; see the mouse code for details.

Let's add some mouse control to our greenerizer: 

Green6 = $.extend({}, $.ui.green5.prototype, { // leave the old Green5 alone; create a new object
        _init: function(){
                $.ui.green5.prototype._init.call(this); // call the original function
                this._mouseInit(); // start up the mouse handling
        },
        destroy: function(){
                this._mouseDestroy();
                $.ui.green5.prototype.destroy.call(this); // call the original function
        },
        // need to override the mouse functions
        _mouseStart: function(e){
                // keep track of where the mouse started
                this.xStart = e.pageX; // not in the options object; this is not something that can be initialized by the user
                this.levelStart = this.options.level;
        },
        _mouseDrag: function(e){
                this.setLevel (this.levelStart +(e.pageX-this.xStart)/this.options.distance);
        },
        options: {
                level: 15,
                greenlevels: ['#000','#010','#020','#030','#040','#050','#060','#070','#080','#090','#0a0','#0b0','#0c0','#0d0','#0e0','#0f0', '#fff'],
                distance: 10
        }
});
$.widget("ui.green6", $.ui.mouse, Green6);

<p class="target">This is a test paragraph with green level <span class="level">undefined</span>.</p>

The ever-alert reader will note what we've just done: subclassed green5 to make green6, including calls to "super" methods. This ought to be abstracted out into its own method, something like 

$.ui.green5.subclass("green6", $.ui.mouse, {mouseStart:function(){}, mouseDrag: function(){}})

Node.js

  1. 在Windows下安装Node.js、npm、express http://blog.uifanr.com/2013/03/12/472

ubutnu sudo add-apt-repository ppa:chris-lea/node.js

ajax 乱码

encodeURIComponent( 

$.ajax({
  url: "/contact/list?keyword="+encodeURIComponent(keyword)+"&pageNum="+page,
  dataType : "json",
  success : function(data) {

表格截断

  1. http://www.045d.com/post/461.html
  2. http://www.cftea.com/c/2010/12/UVBUCD0J888L2XPQ.asp

《 .notice-td { overflow:hidden;white-space:nowrap;word-break:keep-all; }

min js

java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js
java -jar /home/will/JD/tools/yuicompressor-2.4.8.jar  jquery.portlet.js -o  jquery.portlet.min.js

java -jar /home/will/JD/tools/yuicompressor-2.4.8.jar  jquery.portlet.js -o  jquery.portlet.pack.js

Angular + meteor

通过阅读文章好像Angular更好一些

  1. http://www.csdn.net/article/2013-09-09/2816880-angular-ember-javascript-frameworks
  2. http://blog.jobbole.com/46779/
  3. http://zouyesheng.com/angular.html
  4. http://emberjs.com/
  5. http://www.cnblogs.com/rush/archive/2013/04/29/3051191.html
  6. http://angularjs.org/
  7. http://developer.51cto.com/art/201308/406932_all.htm
  8. http://www.ng-newsletter.com/posts/beginner2expert-how_to_start.html
  9. http://docs.meteor.com/#livehtmltemplates
  10. https://github.com/angular-ui/ui-sortable
  11. http://angular-ui.github.io/ng-grid/
  12. https://github.com/angular-ui/ng-grid
  13. https://github.com/JimLiu/angular-ui-tree
  14. https://github.com/search?p=3&q=angular-ui&ref=cmdform&type=Repositories
  15. http://angular-ui.github.io/bootstrap/
  16. http://www.csdn.net/article/2013-03-14/2814486-Meteor-Web-App
  17. http://angular-ui.github.io/
  18. 基于AngularJS的企业软件前端架构

**Portal

  1. https://github.com/nickholub/angular-ui-dashboard
  2. http://nickholub.github.io/angular-dashboard-app/#/
  3. https://github.com/flamejs/flame.js
  4. JQuery UI - sortable 排序插件参数详解 http://www.cnblogs.com/yoyogehei/archive/2011/07/28/2119910.html
  5. http://www.hongkiat.com/blog/jquery-ui-sortable/
  6. AngularJS入门教程 http://www.ituring.com.cn/minibook/303
  7. Making Angular.js realtime with Websockets
  8. AngularJS: Up and Running
  9. Build a Strong AngularJS Foundation
  10. Angular中文社区

meteor

  1. http://www.likebin.net/meteorlist.html

In this book, we're using camelCase because it's the usual JavaScript way of doing things (after all, it's JavaScript, not java_script!). The only exceptions to this rule are file names, which will use underscores (my_file.js), and CSS classes, which use hyphens (.my-class). The reason for this is that in the filesystem, underscores are most common, while the CSS syntax itself already uses hyphens (font-family, text-align, etc.).

NPM

  1. http://www.cnblogs.com/chyingp/p/npm.html 
sudo yum install -y npm 
sudo npm install -g bower
sudo npm install -g grunt-cli
sudo npm install -g meteorite
mrt create microscope

grunt

  1. http://gruntjs.com/getting-started 
sudo npm install -g grunt-cli
sudo npm --proxy http://127.0.0.1:8087 install -g grunt-cli

METEOR AND METEORITE ON WINDOWS

TUE AUG 05 2014
Both Meteor and Meteorite are unofficially supported on Windows, and these are the required steps to make it work.
Install Node and NPM from http://nodejs.org/.
Install the unofficial Meteor from http://win.meteor.com/.
Install git from http://git-scm.com/downloads.
To get Meteorite (package management for Meteor) to work on Windows, a special branch of the Meteorite project must used. Clone the Meteorite repository:
git clone https://github.com/danielsvane/meteorite
Step into the downloaded repo:
cd meteorite
Then switch the branch to the Windows supported one:
git checkout windows-updates
Install the branch globally with NPM:
npm install -g
You now have a working Meteor and Meteorite development setup on Windows. When adding a new package using Meteorite use meteorite instead of mrt, as this name is already used on Windows.

CKeditor

  1. http://www.mzone.cc/article/288.html
  2. http://ipc.iteye.com/blog/695393
  3. http://docs.ckeditor.com/

代码在ideas/ckeditorPlugin目录下 config.js 

/**
 * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights
 *          reserved. For licensing, see LICENSE.html or
 *          http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function(config) {
	// Define changes to default configuration here. For example:
	//config.language = 'cn';
        config.font_names=' 宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;'+ config.font_names;
	// config.uiColor = '#AADC6E';
        config.pasteFromWordRemoveStyles = false;
        config.pasteFromWordRemoveFontStyles = false;
     	config.toolbar = [
			[ 'Source', '-', 'NewPage', '-', 'Templates' ],
			[ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-',
					'Print', 'SpellChecker', 'Scayt' ],
			[ 'Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll',
					'RemoveFormat' ],
			[ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select',
					'Button', 'ImageButton', 'HiddenField' ],
			'/',
			[ 'Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript',
					'Superscript' ],
			[ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent',
					'Blockquote' ],
			[ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ],
			[ 'Link', 'Unlink', 'Anchor' ],
			[ '__my_company_1__upload','Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley',
					'SpecialChar', 'PageBreak' ], '/',
			[ 'Styles', 'Format', 'Font', 'FontSize' ],
			[ 'TextColor', 'BGColor' ] ];
        config.extraPlugins += (config.extraPlugins ? ',__my_company_1__upload' : '__my_company_1__upload');
};

Json 在线查看工具

1 http://jsonviewer.stack.hu/

html 缓存

如下代码会禁用html缓存 

<meta HTTP-EQUIV="pragma" CONTENT="no-cache"> 
<meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> 
<meta HTTP-EQUIV="expires" CONTENT="0">

针对ajax，需要如下设置:

方法一：加时间戳 var url = BaseURL + "&timeStamp=" + new Date().getTime(); 方法二：加随机数 var url = BaseURL + "&r=" + Math.random();

Angular

iframe

<div ng-app ng-controller="searchPage">
    <div ng-repeat="page in searchResults">
        <a ng-click="itemDetail(page._infoLink)">{{page.label}}</a>
    </div>
    <iframe width="500" height="400" ng-src="{{detailFrame}}"></iframe>
</div>

function searchPage($scope){
    $scope.searchResults = [{label:"BBC",_infoLink:"http://www.bbc.co.uk/"},{label:"CNN",_infoLink:"http://edition.cnn.com/"}];

    $scope.itemDetail = function(link){
        $scope.detailFrame = link;
    };
}

JQuery操作iframe父页面与子页面的元素与方法

JQUERY IFRAME 下面简单使用Jquery来操作iframe的一些记录，这个使用纯JS与可以实现。 第一、在iframe中查找父页面元素的方法： $('#id', window.parent.document) 第二、在父页面中获取iframe中的元素方法： $(this).contents().find("#suggestBox") 第三、在iframe中调用父页面中定义的方法和变量： parent.method parent.value iframe里用jquery获取父页面body iframe.html

<html> <script src='jquerymin.js'> </script> <body id='1'> <div>it is a iframe</div> </body> <script> $(document).ready( function() {

var c = $(window.parent.document.body) //麻烦的方法： var c = $($(window).eq(0)1.parent.document).find('body'); ，忘了可以用前面的方法了

alert(c.html()); } );

</script> </html>

content.html

<html> <script src='jquerymin.js'> </script> <body id='fa'> <iframe src='iframe.html' width='100' height='100'></iframe> <br> <br> <br> <div id='mydiv'>content iframe</div> </body> <script> function a() { alert(1); } alert($(document).text()); </script> </html>

YO

npm install -g yo

npm install -g browserify


# ~/npm/bin

Component

sudo npm install -g component

bower

git config --global url.https://.insteadOf git:// 

bower install https://github.com/jquery/jquery.git#1.11.0  --save
bower install jquery-ui  --save
bower install https://github.com/jashkenas/underscore.git  --save
bower install https://github.com/jquery/jquery-ui.git#1.11.0  --save

 bower install material-design-icons --save
 bower install bootstrap --save
 bower install font-awesome --save

HTML5 学习小组规划

背景

HTML5 的标准已经发布。作为互联网公司的开发人员的我们，需要跟进技术潮流，使用新技术开发出更好的系统来服务于客户。因此我们筹划组建 HTML5 学习小组。

目标

  • 组织多次 HTML5 相关技术的讲座，向全部门开发人员普及 HTML5 技术。
  • 在UI标准化的开发成果的基础上，制定基于 HTML5 的开发标准。
  • 开发出一个原型系统。基于这个原型系统，开发人员可以快速使用 HTML5 技术开发他们的系统。

团队组建

  • 以目前UI标准化小组成员为基础创立 HTML5 学习小组。
  • 小组成员选择自己感兴趣的课题进行学习分享。
  • 在学习的基础上开发原型系统，模版和工具。
  • 每周定期开会沟通开发成果和问题。

HTML5学习路线图

HTML5%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF%E5%9B%BE.png

HTML5教程

主要学习HTML标签、属性和事件。 参考：http://www.w3school.com.cn/html5/index.asp

CSS教程

主要学习使用CSS来控制网页的样式和布局。 参考：http://www.w3school.com.cn/css/index.asp

JavaScript教程

做HTML5开发，主要使用JS语言。所以要学习JS语言。必要时还要学习一些JS库，方便开发。 JS教程：http://www.w3school.com.cn/js/index.asp JQuery教程：http://www.w3school.com.cn/jquery/index.asp

HTML5其它的核心技术

1）WebWorker 可以在浏览器中运行多个JS脚本。可以用于需要后台执行某种耗时工作的场合。API可以参考：http://www.w3.org/TR/workers/

2）WebSocket 浏览器可以与服务器间双向通信。Socket方式能够大大提高浏览器与服务器间的通信效率。可以用于浏览器与服务器间通信频繁的场合，比如实时聊天。API可以参考：http://www.w3.org/TR/websockets/

3）Canvas2D 浏览器中画图。可以用于游戏开发等等场合。详细API可以参考：http://www.w3.org/TR/2dcontext/ 教程可以看： https://developer.mozilla.org/cn/Canvas_tutorial

使用 H5 编写微信宣传页

git clone https://github.com/thybzi/keyframes.git
git clone https://github.com/kuus/animate-me.less.git

Extending with jQuery

You can add more functionality to your animations with jQuery such as below: 

$("#logo").addClass('animated bounceOutLeft');

We can also bind these classes with events or triggers like below: 

$(document).ready(function(){
    $("#logo").click(function() {
        $("this").addClass("animated bounceOutLeft");
    });
});

jQuery("#ajaxjson").detach().insertBefore("#news")

Footnotes:

1

DEFINITION NOT FOUND.

创建日期：2014-12-28 修改日期：2015-12-10 js, jquery, dojo, ajax, 定位元素, 调试, piwik, 网站统计 Will Chang

Comments

comments powered by Disqus

Generated by Emacs 24.x (Org mode 8.x)

Copyright © 2012 - 2015 Will Chang   -   Powered by org-page