发表了一篇文章
PS：截图取自大漠穷秋，图例意思是当模板编译成视图，视图发生变化触发数据模型变化，数据模型又会作用于视图。
我时常想着一句话“当你知道一个工具的30%，你就能用它做70%的事”，所以学习一个框架的时候，不需要完完整整从头看到尾，当了解差不多了就可以开始干活。开始学习AngularJS，只需知道什么是双向数据绑定就行了，这是最关键、最需明白的。
写一个简单的示例如下。
&!doctype html&
&html ng-app&
&meta charset="utf-8"&
&script src="angular.js"&&/script&
&script src="HelloAngular_bind.js"&&/script&
&div ng-controller="HelloAngular"&
&p&x ：&input type="text" ng-model="x" /&&/p&
&p&y ：&input type="text" ng-model="y" /&&/p&
y ：&span ng-bind="x*1+y*1"&&/span&&/p&
function HelloAngular($scope) {
$scope.x = 1;
$scope.y = 2;
PS：例子感受一下就行，没有必要深究，但应该对data与view的互相影响有些感觉。
AngularJS有什么
除了最重要的双向数据绑定，AngularJS有以下元件，其中Controller、Directive是最为重要的。
PS：截图取自大漠穷秋
在我的项目里，使用最多是Directive、Controller，了解这两个元件我觉得就差不多了，其他用到时再查就行。
作为模块组织者，包含其他AngularJS元件。
2. Controller
负责跟View沟通， 不处理任何跟DOM有关的工作
PS：当你的Controller里面写了DOM操作时，就应该反省代码是否写得有问题了。
3. Directive
类似于HTML标签，可以定义标签的行为，所有与DOM相关的操作都应该写在这里。
PS：尽量不用DOM操作，但可能还是会需要用到，用到时就要在Directive里用。
4. Service
写可以独立运作的代码（与View无关），共用于元件（例如控制器）之间，不应该处理任何跟DOM有关的工作。
对数据做一些修理，不应该处理任何跟DOM有关的工作。
用来定义路由规则，不应该处理任何跟DOM有关的工作。
上面是一些教程结合我自己的总结，最常强调注意一点是对DOM操作的地方。对于这些元件我没有举例子，贴代码没什么意思，如果想学习的，还是要自己去实践。
双向数据绑定
双向数据绑定是个重要的特性，值得我们搞明白他的原理。当View中有数据发生了变化，这个变化会反馈到Model的scope的数据上，而当scope数据发生变化时，View中的数据也会更新到最新的值。
在说明原理前，有三个scope重要的方法需要解释，分别是$apply、$digest、$watch。
注册一个watcher，监听scope的数据，当数据变化时候调用回调函数。第一个参数是被监听的数据，第二个参数是回调函数。
$scope.$watch('xxx', function(newValue, oldValue) {
//update the DOM with newValue
2. $digest
检查scope中的数据是否发生了变化，如果变化则关联到该watcher的回调函数就会被执行。
这方法是调用$rootScope.$digest()，在$rootScope开始$digest，随后会访问到所有的children scope中的watchers。$apply()方法有两种形式。第一种会接受一个function作为参数，执行该function并且触发一轮$digest循环。第二种会不接受任何参数，只是触发一轮$digest循环。
PS：AngularJS并不直接调用$digest()，而是调用$scope.$apply()
当在HTML写下表达式如{{name}}或ng-model="name"时，AngularJS在幕后会为你在scope模型上设置一个watcher，如下：
$scope.$watch('name', function(newValue, oldValue) {
//update the DOM with newValue
当页面JS事件触发时，AngularJS会监视到并更改scope数据，并自动触发一轮$digest循环，每个关联的watcher的回调函数被执行，最后View被更新。
1. 有的时候你发现明明scope的数据已经改了，但你发现View并没有更新。
这是因为你可能在setTimeout、异步请求等里去修改数据，但此时AngularJS并不知道数据已经变了，不会帮你调用digest循环，所以你需要手动调用$apply。目前一些指令（例ng-click、ng-model）以及服务（例$timeout、$http）被调用时会自动触发一次$digest循环，这些就不用手动调$apply。
setTimeout(function() {
$scope.$apply(function() {
//wrapped this within $apply
$scope.name= 'lu';
setTimeout(function() {
$scope.name= 'lu';
$scope.$apply();
2. 脏检查(Dirty Checking)
当一个$digest循环运行时，watchers会被执行来检查scope中的models是否发生了变化。如果发生了变化，那么相应的listener函数就会被执行。在当前的一次循环结束后，它会再执行一次循环用来检查是否有models发生了变化。这就是脏检查(Dirty Checking)，它用来处理在listener函数被执行时可能引起的model变化。因此，$digest循环会持续运行直到model不再发生变化，或者$digest循环的次数达到了10次。（这段解析来自其他文章）
PS：$digest循环最少也会运行两次，即使在listener函数中并没有改变任何model
3. 监控的表达式不要过于复杂，表达式数量不要太多
4. 监听函数内不要有DOM操作，那样会显著降低性能
5. 不能互相监听对方会修改的属性，以免形成交叉引用
一些好的视频教程
1. AngularJS初级入门教程 （外国人的，讲得简单易懂）
2. AngularJS重要的開發觀念與經驗分享
3. 用AngularJS开发下一代WEB应用（大漠穷秋）
(点击下载)
这篇文章我一直在说双向数据绑定的东西，而那些依赖注入、路由、Service等我并没涉及，是因为我觉得前者是最重要的，能讲明白这一点已经够了。
本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。
本文地址 ：
转载：/lovesong/p/4870006.html
在8月份一个项目机会下，决定真正完整地学习使用AngularJS 1.3，下面是我一些总结。
PS：有些人很抵触AngularJS这种框架，认为它是在办坏事，装高调，我是认为任何能广…
发表了一篇文章
框架选择。在上一篇文章评论中，有人说angular1.3是个过时的东西，建议使用angular2。其实这种说法很像拿jQuery1.x和jQuery2.x做比较，新的版本当然会有优化优势的地方，但并不一定是最适合你项目的。当你项目必须支持IE6/7/8时，那又得使用jQuery1.x版本。所以不要以新不新去选择一个框架或者某个版本，而是看是不是适合的。当初用angular1.3是他比较成熟有配套的文档，而angular2的文档是不健全的，另外有一点是1.x与2.x的区别太大了，两者的用法没有继承性。更重要的是，目前的angular2只有Alpha版本（测试），并没有一个正式版本。
性能。有人说angular2的性能会比较好，我还没有用过，不做什么评论。但对于angular1.x，我确实是不放心它的性能的，作为PC Web我敢用angular，但在移动终端我不敢用，在我看来无论从框架体积或框架运行效率，在脆弱的移动端都是致命的。有一些基于angular做的Hybrid框架（例Ionic）,希望使用过的人能告诉我它体验怎么样（性能上）。
这篇文章记录一些angular1.3的小技巧，angular2我会找个时间做个实践。
1. ng-repeat多个字段排序的写法
使用orderBy过滤器，第一个参数是一个数组，表示依次按数组中的属性值进行排序（若按第一项比较的值相等，再按第二项比较），第二个参数是正序还是倒序（默认是正序）。
ng-repeat="groupUser in groupUsers | orderBy:['isOwner','isAdmin']:true"
2. ng-include引入HTML片段
使用ng-include，第一个参数是页面的相对地址的字符串。应该注意，是一个字符串，不是ng-expression，所以不要忘了加单引号，否则会发现怎么都引不进这个HTML片段。
&div ng-include="'msgs.html'"&&/div&
3. ng-bind的$scope对象没有随着数据变化而变化
自己实现的ajax，获取数据后，设置到$scope上，view却没有更新。这其实就是angular双向数据的原因，angular不可预见的scope变化，是不会帮忙刷新view的（例$.ajax或setTimeout）。解决方法就是，数据设置到$scope上后，手动调$scope.$apply();。
PS：一些指令（例ng-click、ng-model）以及服务（例$timeout、$http）才会自动刷新view。
4. 移动触摸（Touch）事件
angular-touch模块提供了触摸的事件和其他手势ngSwipeLeft、ngSwipeRight。
5. ng-bind-html的内容无法正常的显示在页面中
使用ng-bind-html属性，该属性依赖于$sanitize，也就是需要引入angular-sanitize.js文件。但会发现ng-bind-html的内容无法正常的显示在页面中，这是因为某些标签会被angularJS认为是不安全的自动过滤掉，而为了保留这些表情就需要开启非安全模式。
&div ng-bind-html="article.content | trustHtml"&
myApp.filter('trustHtml', function ($sce) {
return function (input) {
return $sce.trustAsHtml(input);
其中$sce是angular自带的安全处理服务，$sce.trustAsHtml(input) 返回的是受信任的对象。
如何划分一个module
我的想法是在关系比较密切（业务逻辑）的页面可以划为一个module，因为页面可能存在共用service或template或directive（controller不共用），而这些元件归属于同个module，我们就可以不同页面调用了。而不想关的页面可划分为另一个module，增加代码的清晰度。
7. 是否要把工具类弄成service
在弄工程之前，我会考虑到是否要将一些工具类封装成一个service（为了看起来代码统一），但我发觉是没有必要的，因为service是归属于某个模块的，而我们的工具类可能在不同模块都有使用，不归属于某个模块。把工具类当成一个jquery的库引入即可。
8. 配合RequireJS使用
angular没有异步加载模块的功能，所以使用配合RequireJS使用的效果还是不错的。在这里面有些异议的是对于模块定义的地方，是该把一个模块定义成RequireJS的模块还是angular的服务（可以依赖注入），我觉得还是功能归属的问题，如果是全局使用的工具服务，就定义成RequireJS模块，而如果是与模块密切相关的业务逻辑就使用服务。
PS：可在RequireJS的config加上urlArgs，可以避免缓存问题。
urlArgs: "bust=" +
(new Date()).getTime()
//可用来清理缓存，在部署到生产环境去掉。
9. iframe打开跨域URL时报错
&iframe width="100%" height="100%" ng-src="{{url}}"&&/iframe&
如果不做处理，上面的跨域URL是打不开的， 需要定义白名单。
myApp.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
// Allow same origin resource loads.
// Allow loading from our assets domain.
Notice the difference between * and **.
"https://link.bingosoft.net/**"]);
10. 使用其他Controller的scope的属性方法
先声明我并不清楚我的用法是否恰当。使用其他Controller的scope局限于其parent scope，而不是任何Controller的都可以访问。scope有个属性$parent， 通过这个属性可以找到某一层Controller的scope。
var parentScope = $scope.$parent.$parent.$
PS：多少层$parent是我打印scope对象出来找的。
这一篇是angular1.3的小技巧，希望有用。
本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。
本文地址 ：
转载：/lovesong/p/4889931.html
框架选择。在上一篇文章评论中，有人说angular1.3是个过时的东西，建议使用angular2。其实这种说法很像拿jQuery1.x和jQuery2.x做比较，新的版本当然会有优化…
发表了一篇文章
// 所有JavaScript值
// Same as c: any
// 显式类型
var d: boolean;
var f: string[] = ["hello", "world"];
//数组类型
var g: [number, string] = [3, "three"];
//元组类型
var h: string | //联合类型，几个不同的类型之中的一个
function k() : void{
//void是any的子类型，是undefined的超类型，与其他类型无关
alert('hi man');
var // 所有JavaScript值
var // Same as c: any
var // 显式类型
var f = ["hello", "world"]; //数组类型
var g = [3, "three"]; //元组类型
var //联合类型，几个不同的类型之中的一个
function k() {
alert('hi man');
Expressions
表达式的东西比较多，但比较简单，仅列出一些关键的。
var a = [2, 3, 4];
var b = [0, 1, ...a, 5, 6];
//=&[0, 1].concat(a, [5, 6]);
var f: (s: string) =& string = function (s) {
return s.toLowerCase();
var X = x =& Math.sin(x); //传入x值，返回计算结果
var q = 1;
var p = 2;
[q, p] = [p, q];
//解构赋值
var a = [2, 3, 4];
var b = [0, 1].concat(a, [5, 6]); //=&[0, 1].concat(a, [5, 6]);
var f = function (s) {
return s.toLowerCase();
var X = function (x) { return Math.sin(x); }; //传入x值，返回计算结果
var q = 1;
var p = 2;
_a = [p, q], q = _a[0], p = _a[1]; //解构赋值
Statements
语句的内容也比较简单
1. 块级作用域
2. 简单变量声明、解构变量声明
3. If,Do,While,For-In,For-Of,Continue,Break,Return,Switch,Throw,Try
函数声明有三个关键地方：
function strange(x: number, y = 2, z = x + y) {
console.log(strange(1));
console.log(strange(3,2,1));
//解构参数
function drawText({ text = "", location: [x, y] = [0, 0], bold = false }) {
return text + ":" +
x + y +":" +
console.log(drawText({text:'lu',location:[1,2], bold:true}));
//函数重载
function pick(x: string):
function pick(x: number):
function pick(x): any {
if (typeof x == "string") {
return x + "string";
else if (typeof x == "number") {
return x + 10000;
console.log(pick("lu"));
console.log(pick(1));
function strange(x, y, z) {
if (y === void 0) { y = 2; }
if (z === void 0) { z = x + }
console.log(strange(1));
console.log(strange(3, 2, 1));
//解构参数
function drawText(_a) {
var _b = _a.text,
text = _b === void 0 ? "" : _b,
_c = _a.location,
_d = _c === void 0 ? [0, 0] : _c,
x = _d[0],
y = _d[1],
_e = _a.bold,
bold = _e === void 0 ? false : _e;
return text + ":" + x + y + ":" +
console.log(drawText({ text: 'lu', location: [1, 2], bold: true }));
function pick(x) {
if (typeof x == "string") {
return x + "string";
else if (typeof x == "number") {
return x + 10000;
console.log(pick("lu"));
console.log(pick(1));
Interfaces
接口还可以继承接口或类 （Java只能是接口）
interface ClockInterface {
currentTime: D
setTime(d: Date);
//编译后是没有interface这东西的
class Clock implements ClockInterface
currentTime: D
setTime(d: Date) {
this.currentTime =
constructor(h: number, m: number) { }
var Clock = (function () {
function Clock(h, m) {
Clock.prototype.setTime = function (d) {
this.currentTime =
类的内容跟后端语言非常像了，举个例子体会下就行了。
class Point {
constructor(public x: number, public y: number) { }
public toString() {
return "x=" + this.x + " y=" + this.y;
class ColoredPoint extends Point {
constructor(x: number, y: number, public color: string) {
super(x, y);
public toString() {
return super.toString() + " color=" + this.
//static声明静态函数，不加static默认是实例函数
static f() {
class Pair&T1, T2& {
constructor(public item1: T1, public item2: T2) { }
public toString() {
return "Pair"+ this.item1.toString() + this.item2.toString();
console.log(new Point(1,2).toString());
console.log(new ColoredPoint(1,2,'blue').toString());
console.log(new Pair&Point,ColoredPoint&(new Point(1,2),new ColoredPoint(1,2,'blue')).toString());
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
var Point = (function () {
function Point(x, y) {
Point.prototype.toString = function () {
return "x=" + this.x + " y=" + this.y;
var ColoredPoint = (function (_super) {
__extends(ColoredPoint, _super);
function ColoredPoint(x, y, color) {
_super.call(this, x, y);
this.color =
ColoredPoint.prototype.toString = function () {
return _super.prototype.toString.call(this) + " color=" + this.
//static声明静态函数，不加static默认是实例函数
ColoredPoint.f = function () {
return ColoredP
})(Point);
var Pair = (function () {
function Pair(item1, item2) {
this.item1 = item1;
this.item2 = item2;
Pair.prototype.toString = function () {
return "Pair" + this.item1.toString() + this.item2.toString();
console.log(new Point(1, 2).toString());
console.log(new ColoredPoint(1, 2, 'blue').toString());
console.log(new Pair(new Point(1, 2), new ColoredPoint(1, 2, 'blue')).toString());
enum Operator {
function compute(op: Operator, a: number, b: number) {
console.log("the operator is" + Operator[op]);
var b: boolean = true;
compute(Operator.ADD, 1, 2);
compute(Operator.ADD, 1, b); //编译时error，但能编译成js
(function (Operator) {
Operator[Operator["ADD"] = 0] = "ADD";
Operator[Operator["DIV"] = 1] = "DIV";
Operator[Operator["MUL"] = 2] = "MUL";
Operator[Operator["SUB"] = 3] = "SUB";
})(Operator || (Operator = {}));
function compute(op, a, b) {
console.log("the operator is" + Operator[op]);
var b = true;
compute(Operator.ADD, 1, 2);
compute(Operator.ADD, 1, b);
//编译时error，但能编译成js
Namespaces
命名空间：为了避免出现同名的变量或函数的冲突。
import：能将其他命名空间或命名空间的元素引入使用。
export：能将元素（变量、函数、类等）导出到命名空间上。
namespace A {
export class X { s: string }
namespace B {
import Y = A;
// Alias for namespace A
import Z = A.X;
// Alias for type and value A.X
export var K = 2;
export function f(){
var x = new Z();
//变量只有在使用了，才会被生成
(function (A) {
var X = (function () {
function X() {
})(A || (A = {}));
(function (B) {
var Z = A.X; // Alias for type and value A.X
function f() {
var x = new Z();
})(B || (B = {}));
TypeScript模块支持了ECMAScript6模块，同时兼容CommonJS, AMD，System模块，可以编译成相应模块。
编译指令：
tsc module system main.ts （只需要编译main.ts就行，log.ts在编译时会被引入）
import { message } from "./log";
message("hello");
export function message(s: string) {
console.log(s);
由于有几种模块编译的指令，生成的代码并不相同，就不一一列出来。
环境声明向TypeScript域中引入一个变量，这对生成的JS里将没有任何影响。
PS： document等JS内建的对象通过文件‘lib.d.ts’默认包含在TS中;
可以这样引入jQuery库
declare var $;
　　Typescript的好处很明显，在编译时就能检查出很多语法问题而不是在运行时。不过由于是面向对象思路，如果是纯前端的人员（没有后端语言基础），那用起来应该是比较吃力的。有没有需求使用Typescript，我觉得写出代码是否易于维护、优雅，不在于用了什么框架、语言，在于开发者本身的架构思路。诚然好的框架和语言能间接帮助开发者写出规范的代码，但不代码就能写得好。所以如果Typescript能使团队易于协同开发，提高效率，那才考虑使用。如果都用得很痛苦，那还是简单的来。
1. 安装Typescript
npm install -g typescript
2. GetSource
3. 文章里面的demo例子
下载地址：
本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。
本文地址 ：
转载：/lovesong/p/4947919.html
TypeScript为JavaScript的超集（ECMAScript6）， 这个语言添加了基于类的面向对象编程。TypeScript作为JavaScript很大的一个语法糖，本质上是类似于cs…
发表了一篇文章
2.创建数据表
dataBase.transaction( function(tx) {
tx.executeSql(
"create table if not exists stu (id REAL UNIQUE, name TEXT)",
function(tx,result){ alert('创建stu表成功'); },
function(tx, error){
alert('创建stu表失败:' + error.message);
3.添加数据
dataBase.transaction(function (tx) {
tx.executeSql(
"insert into stu (id, name) values(?, ?)",
[1, '徐明祥'],
function () { alert('添加数据成功'); },
function (tx, error) {
alert('添加数据失败: ' + error.message);
4.查询数据
dataBase.transaction(function (tx) {
tx.executeSql(
"select * from stu", [],
function (tx, result) { //执行成功的回调函数
//在这里对result 做你想要做的事情吧...........
function (tx, error) {
alert('查询失败: ' + error.message)
2.查询数据，返回数据类型正确
3.被W3C丢弃的规范，但被广泛支持。
Local Storage
HTML5提供了没有时间限制在客户端存储数据的手段，以键值对存取，网站只能访问其自身的数据，浏览器支持如下。
PS：截图来自网上资料
有个比较有趣的东西，我在起点、京东、优酷的localStorage找个共同的变量，就是jw_bl，里面的数据是（我猜不到这个属性是什么简写的）：
{"created" : "Sat Nov 14 :10 GMT+0800 (中国标准时间)" , "expiration" : "Sat, 21 Nov :54 -0500" , "reason" : "0"}
localStorage.pagecount=123;
localStorage.
// return "123"
PS：要注意的是，获取localStorage的值是字符串，不管你赋值的是什么类型。
1. 获取值是字符串类型
2. 容量有大约5M限制
3. 不会进行网络传输
Cookies是最常用的Web数据持久化手段，所有浏览器都支持。Cookie是由服务器端生成，发送给User-Agent（一般是浏览器），浏览器会将Cookie的key/value保存到某个目录下的文本文件内，下次请求同一网站时就发送该Cookie给服务器（前提是浏览器设置为启用cookie）。单点登录（SSO）是个很经典的使用。
PS：当然也可以在网页设置cookies
Cookie数量和长度的限制
每个domain最多只能有20条（某些浏览器会多一些）cookie，每个cookie长度不能超过4KB，否则会被截掉。
Cookie生命周期
Cookie在生成时就会被指定一个Expire值，这就是Cookie的生存周期，在这个周期内Cookie有效，超出周期Cookie就会被清除。将Cookie的生存周期设置为“0”或负值，就马上清除Cookie。
Cookie安全性问题
如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。或者是可收集这些信息做一些事。
Cookies请求附带
Cookies每次请求会被发送到服务器，占用额外带宽，示例参数如下（截了一个斗鱼网站请求的图）。
PS：cookies参数需要使用抓包工具（类似fiddler）才能看到，Chrome开发者调试工具看不到的。
Cookies的Javascript编程
下面代码来自网上资料：
创建cookies：
function setCookie(c_name,value,expiredays)
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+"="+escape(value)+((expiredays==null)?"":";expires="+exdate.toGMTString());
取值cookies：
function getCookie(c_name)
if(document.cookie.length&0) {
c_start=document.cookie.indexOf(c_name+"=");
if(c_start!=-1) {
c_start=c_start+c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);
if(c_end==-1)
c_end=document.cookie.
return unescape(document.cookie.substring(c_start,c_end));
return "";
删除cookies：
setCookie("acf_nickname", null , -1);
清除所有cookies：
因为cookies值可能存在“;=”字符，所以清除的函数还没一那么简单，要照着自己工程看着写。
Web SQL一般在移动端使用，localStorage PC和移动端都适用，而cookies是所有持久化存储支持最好的。可根据它们本身的特性选择自己需要使用的方式。
本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。
本文地址 ：
转载：/lovesong/p/4976233.html
在浏览器客户端记录一些信息，有三种常用的Web数据持久化存储的方式，分别是Web SQL、Local Storage、Cookies。
作为html5本地数据库，可通过一套API来操…
发表了一篇文章
最近做了一个jquery图片查看的插件，目的是能精确查看图片的详情，插件支持图片旋转、放大、缩小、拖拽、缩略图显示，界面效果是按照window的qq查看图片功能写的，当然不尽相同。
具体功能：
发表了一篇文章
转载：/lovesong/p/5014086.html
Session Storage
sessionStorage用于本地存储一个会话（session）的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁（浏览器关闭）。因此s…
发表了一篇文章
// Generated message map functions
//{{AFX_MSG(CHwDlg)
virtual BOOL OnInitDialog();
afx_msg void OnSysCommand(UINT nID, LPARAM lParam);
afx_msg void OnPaint();
afx_msg HCURSOR OnQueryDragIcon();
afx_msg void OnClose();
afx_msg void OnOK();
afx_msg void OnCancel();
afx_msg void OnOk1();
afx_msg void OnCancel1();
afx_msg void OnButton1();
//}}AFX_MSG
DECLARE_MESSAGE_MAP()
3.在BUTTON上设置位图
　　在BUTTON属性上，把样式中的所有者绘制和位图都勾选上。然后，我们要选择两个图标，这里我就直接用程序自带的位图编辑器自己编辑了两个位图。
然后修改DoDataExchange(...)内容，以及OnInitDialog(...)函数。
void CHwDlg::DoDataExchange(CDataExchange* pDX)
CDialog::DoDataExchange(pDX);
DDX_Control( pDX, IDC_BUTTON1, m_BitmapBtn );
//{{AFX_DATA_MAP(CHwDlg)
//}}AFX_DATA_MAP
BOOL CHwDlg::OnInitDialog()
CDialog::OnInitDialog();
// Add "About..." menu item to system menu.
// IDM_ABOUTBOX must be in the system command range.
ASSERT((IDM_ABOUTBOX & 0xFFF0) == IDM_ABOUTBOX);
ASSERT(IDM_ABOUTBOX & 0xF000);
CMenu* pSysMenu = GetSystemMenu(FALSE);
if (pSysMenu != NULL)
CString strAboutM
strAboutMenu.LoadString(IDS_ABOUTBOX);
if (!strAboutMenu.IsEmpty())
pSysMenu-&AppendMenu(MF_SEPARATOR);
pSysMenu-&AppendMenu(MF_STRING, IDM_ABOUTBOX, strAboutMenu);
// Set the icon for this dialog.
The framework does this automatically
when the application's main window is not a dialog
SetIcon(m_hIcon, TRUE);
// Set big icon
SetIcon(m_hIcon, FALSE);
// Set small icon
// TODO: Add extra initialization here
m_BitmapBtn.LoadBitmaps(IDB_BITMAP2,IDB_BITMAP1);
return TRUE;
// return TRUE
unless you set the focus to a control
4.把enter键换为tab键同样的功能
　　重载PreTranslateMessage(...)函数，如下，我们截取按键消息，来实现控件焦点的转移。
BOOL CHwDlg::PreTranslateMessage(MSG* pMsg) {
// TODO: Add your specialized code here and/or call the base class
if (pMsg-&message == WM_KEYDOWN && pMsg-&wParam == VK_RETURN)
CWnd *mwnd = GetNextDlgTabItem (GetFocus()); //取得当前焦点控件的下一个控件的句柄
mwnd-&SetFocus(); //设置下一件控件得到输入焦点
return TRUE;
return CDialog::PreTranslateMessage(pMsg);
创作，采用 进行许可。欢迎转载，请注明出处：
简单记录一下，以备日后用到，参数就忽略了，用的时候直接MSDN好了~
下列内容可参考：http://blog.csdn.net/yc_8301/article/details/2570951
发表了一篇文章
#include &iostream&
using namespace
void display()
cout&&"this is Hen display()"&&
class Nest
void display()
cout&&"this is Nest display()"&&
int main()
hen.display();
nest.display();
另外一种情况：
#include &iostream&
using namespace
class Nest
void display()
cout&&"this is Nest display()"&&
void display()
cout&&"this is Hen display()"&&
int main()
hen.display();
hen.nest.display();
创作，采用 进行许可。欢迎转载，请注明出处：
先看一种情况：注意橘色的部分，是用的类名定义
#include &iostream&
发表了一篇文章
int main(int argc,char* argv[])
for (int i=0;i&10;i++)
for (int i=0;i&10;i++)
情况2：如下，n输出10当第一次进入内部循环时，n以10退出，因此直接结束第一次循环。
int main(int argc,char* argv[])
for (int i=0;i&10;i++)
for (i=0;i&10;i++)
创作，采用 进行许可。欢迎转载，请注明出处：
本人很菜，今天看《C++编程思想》中的一道课后题中说到这样一个问题。修改两层嵌套的for循环的标识符，观察结果变化。
情况1：如下，这样我们会发现，n输出为100，虽然两层循环的标识符都是i，然是…
发表了一篇文章
创作，采用 进行许可。欢迎转载，请注明出处：
(c=getchar())!=E0F
　　这个式子很熟悉，但一直都没有去理解它的原理。所以今天在网上一顿搜索，基本理解了这些问题。
1.getchar()函数：
　　这个函数是以行为单位进行存储的…
发表了一篇文章
//数组实现
#include&iostream&
using namespace
int data[10]={73, 22, 93, 43, 55, 14, 50, 65, 39, 81};
int tmp[10];
int count[10];
int maxbit(int data[],int n)//取数据位数
for(int i=0;i&n;i++)
int p=data[i];
while(p/10)
void RadixSort(int data[],int n)
int d=maxbit(data,n);//获取数据最大位数
for(int i=0;i&d;i++)
for(int i=0;i&10;i++)//装桶之前要先清桶--10个桶（0~9）
count[i]=0;
for(int i=0;i&n;i++) //记录每个桶的记录数
int k=data[i]/r;
int q=k%10;
count[q]++;//记录
for(int i=1;i&10;i++)//计算位置
count[i]+=count[i-1];
//cout&&count[i]&&" ";
for(int j=n-1;j&=0;j--)
int p=data[j]/r;
int s=p%10;
tmp[count[s]-1]=data[j];//由于如果此位相同的数字有两个 那计数是从0开始的，所以它的位置就应该-1
count[s]--;
//cout&&data[j]&&" ";
for(int i=0;i&n;i++)
data[i]=tmp[i];
//cout&&tmp[i]&&" ";
r=r*10;//不断循环
int main()
cout&&"基数排序c++实现"&&
//cout&&maxbit(data,10)&&
cout&&"排序之前的数值：";
for(int i=0;i&10;i++)
cout&&data[i]&&" ";
RadixSort(data,10);
cout&&"排序之前的数值：";
for(int i=0;i&10;i++)
cout&&data[i]&&" ";
创作，采用 进行许可。欢迎转载，请注明出处：
　　基数排序是非比较排序算法,算法的时间复杂度是O(n). 相比于快速排序的O(nlgn),从表面上看具有不小的优势.但事实上可能有些出入,因为基数排序的n可能具有比较大的系数K.因此在具体的应用…
发表了一篇文章
创作，采用 进行许可。欢迎转载，请注明出处：
#include &stdafx.h& 错误？
　　先打开一个以前做了一下的工程，编译通过，能运行。稍微修改了一下代码（只是修改一个参数使写入INI文件的整数由0变为10），这时编译通不过…
发表了一篇文章
//替换json对象属性值
function convert(obj , prop, value){
if(typeof obj === 'object' && typeof prop === 'string') {
for(var key in obj){
if(obj.hasOwnProperty(key)){ //对象是否具有某属性，不会检查对象原型链中的属性
if(typeof obj[key] === 'object') convert(obj[key], prop, value);
else if(key == prop)
obj[key] =
2.兼容多个$库写法
&script src="jquery.js"&&/script&
&script type="text/javascript"&
jQuery.noConflict();
&script src="zepto.js"&&/script&
PS:使用不同的库的插件时，需要闭包一层
(function($){
//你的插件
})(jQuery);
3.闭包保持变量的做法
var k = (function (scope, userId) {
var s = scope,
id = userId;
return function(){
s.delTopPers(id);
})(scope, userId);
转载：/lovesong/p/4465778.html
1.替换json对象中属性值（包括子对象）
2.兼容多个$库写法（zepto与jquery）
3.闭包保持变量的做法
1.替换json对象中属性值（包括子对象）
发表了一篇文章
1.发布工程
新建一个 Maven build
选择要发布的工程
转载：/lovesong/p/4542692.html
发表了一篇文章
我目前移动Web开发遇到的bug以及解决方案（慢慢补充当中）。
1.android4.0以上一部分手机的webview中，当canvas小于屏幕大小时，绘图时会出现重影，就是说一个图只绘制了一遍，却…
发表了一篇文章
如果我们做的是Cordova（phonegap）或其他hybird应用，当使用到原生功能时候（类似原生请求数据或页面切换时），没办法在PC chrome浏览器调试页面，一旦页面在手机显示出了问题，我们比较难找到找到原因，有时还只能猜或alert些东西。
使用Weinre工具，Weinre的本意是Web Inspector Remote，它是一种远程调试工具，它可以将远程的页面经过代理在PC上调试页面元素、样式，JS。
Weinre的原理
三个端的含义：
客户端（client）：本地的WebInspector，远程调试客户端。
服务端（agent）：本地的HTTPServer，为目标页面与客户端建立通信。
目标页面（target）：被调试的页面，页面已嵌入weinre的远程js。
(上面图片及解释转自其他文章)
调试过程：
客户端将指令（请求DOM、执行js）post到代理服务端，目标页面定时（大概5s）从服务端get指令，然后将结果post回服务端，最终客户端定时从服务端get结果。
PS：由于Weinre的客户端是基于Web Inspector开发，而Web Inspector只兼容WebKit核心的浏览器，所以只能在Chrome/Safari浏览器打开Weinre客户端进行调试。
Weinre安装
安装nodejs
weinre基于nodejs，所以先安装nodejs，地址
PS:请使用 v0-10-15版本的nodejs，不然weinre安装不了
安装weinre
命令行执行
npm -g install weinre
这就是安装成功了。
Weinre运行
1.命令行键入
weinre -httpPort 8081 -boundHost -all-
httpPort为调试服务器运行的端口，默认8080；boundHost 调试服务器绑定的IP地址或域名，默认localhost。
2.用webkit的浏览器（由于weinre的设计更多的是基于webkit的浏览器，因此建议使用chrome/safari）访问weinre服务器：http://localhost:8081
3.点击打开debug面板：http://localhost:8081/client/#anonymous
4.获取服务端的IP地址，例如：192.168.1.101，添加如下js到需要调试的页面。
&script src="http://192.168.1.101:8081/target/target-script-min.js#anonymous"&&/script&
5.在移动设备上访问此页面，即在客户端点击Targets看页面结构，或者执行js。
转载：/lovesong/p/4657255.html
Weinre是什么
如果我们做的是Cordova（phonegap）或其他hybird应用，当使用到原生功能时候（类似原生请求数据或页面切换时），没办法在PC chrome浏览器调试页面，一旦页面在…
发表了一篇文章
2.填写project name
3.第二个确认框勾上，然后直接下一步
4.选择Hello,World的模版，直接finish
5.选中创建好的工程，右键如下操作
6.在新打开的Eclipse我们会发现多了个菜单栏和工具栏按钮
7.点击图标，会弹出下面窗口
这就是一个简单helloworld工程，可以看下模版生成的代码。
转载：/lovesong/p/4693371.html
这一篇就简单说下一个hello world插件工程创建过程。
1.创建一个Plug-in Project
2.填写project name
3.第二个确认框勾上，然后直接下一…
发表了一篇文章
2.再次打开IDE，点击定制透视图
3.将需要隐藏的选择勾掉，类如工具栏上的search，并关闭IDE，再将当前工作区间（workspace）上的文件.metadata\.plugins\org.eclipse.e4.workbench\workbench.xmi 拷贝出来。
4.我们现在已经有两个workbench.xmi，用文本比较工具比较这两个文件。我使用的是Beyond compare工具。
5.我们找到不一样的地方，就是发现我们需要的ID已经很显示了，org.eclipse.search.searchActionSet。
这种方法是我当时想隐藏某个工具栏想的，虽然蠢，但是能解决问题。
转载：/lovesong/p/4693392.html
这一篇会介绍用一种蠢的办法找拓展点常量ID。
1.打开IDE，之后什么都不干，直接关闭IDE，将当前工作区间（workspace）上的文件.metadata\.plugins\org.eclipse…
发表了一篇文章
1. 在开发的Eclipse的 运行配置将下面几个插件勾选上。
2. 在org.eclipse.ui.startup拓展里执行（只需执行一次）：
JSPlugin.getDefault().getPreferenceStore().setValue("js.profile", "BingoTouch");
PS:记得引入com.spket.js的包
3. 生成profiles.xml
这个profiles.xml里面就是：
这份配置其实能在界面操作生成，简单就是调插件代码也就可以生成。但我实在是没耐心去看源码，更何况是没有源码（这个插件不是开源的），于是我直接自己生成这样一个文件：
String comSpketJs = JSPlugin.getDefault().getStateLocation().toString(); //com.spket.js目录地址
File file = new File(comSpketJs);
if(!file.exists())
file.mkdir();
FileUtil.createSpketProfilesXml(comSpketJs + File.separator + "profiles.xml");
public static void createSpketProfilesXml(String path) {
String jstipFolder = eclipseRootPath + "/resource/config/jstip";
File file = new File(jstipFolder);
pw = new PrintWriter(new FileWriter(path));
pw.write("&?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?&\n");
pw.print("&profiles&\n");
pw.print("&profile id=\"BingoTouch\" name=\"BingoTouch\"&use namespace jQ\n");
File[] fs = file.listFiles();
for(File f : fs){
pw.print("include '" + f.getAbsolutePath().replaceAll("\\\\", "\\\\\\\\") + "';\n");
pw.print("&/profile&\n");
pw.print("&/profiles&");
pw.close();
} catch (IOException e) {
// TODO 自动生成的 catch 块
e.printStackTrace();
代码还是比较简单的，看看就明白，之后第一次打开Eclipse就有：
转载：/lovesong/p/4693423.html
这一篇将怎么在spket内置js文件，而不用用户自己去添加。
1. 在开发的Eclipse的 运行配置将下面几个插件勾选上。
2. 在org.eclipse.ui.startup拓展…
发表了一篇文章
2.在目标添加 -console (我试过命令行启动，但并没有效果)
3.双击打开快捷方式，然后你会看到一个日志输出窗口
4.在窗口输入 ss，可以看到eclipse所有已加载的插件。
这里信息id、State、Bundle：
id：可用来查纠错的标识。
State：包状态，有六种状态：
1.INSTALLED ：包成功安装。
2.RESOLVED：包所需的 Java 类可用。
3.STARTING：包正被启动。
4.ACTIVE：包已经启动且正在运行中。
5.STOPPING：包正被停止时。
6.UNINSTALLED：包已被卸载后可。
5.查询你要调试的插件
6.一些常用的osgi命令：
bundle id： 显示包的细节信息
diag id : 显示包的缺少的东西（可能是jdk、依赖其他包等）。
转载：/lovesong/p/4693437.html
当你在开发的插件直接运行的时候，看起来正常的。但导出放到eclipse时候，又发觉不对劲，插件运行有问题。这个时候需要去OSGi的控制台调试插件，这一篇文章将讲述怎么简单调试eclipse插件（插件…
366561人浏览
259714人浏览
233527人浏览
178948人浏览
125127人浏览