当前分类 / JavaScript / 总共24篇

给博客增加自动变化的工作年限

在我博客的关于页面有一段自我介绍,其中有一个工作年限,每过一年就需要增加一次,这样比较麻烦,所以我准备使用 js 来实现自动计算。

本科 应用物理学 专业,目前主要使用 Java / Kotlin 两门语言,从事 Android ,略懂一些 C / C++ / Python / JavaScript / Nodejs 等其他语言,目前没有什么特别大的成就,在一边工作的同时维持着本站的正常运行。

首先使用 <span> 标签替换要更改的内容部分,然后定义一个标签 id.

1
从事Android <span id="development_years"></span>,略懂一些......

然后使用 <script> 标签来写日期计算相关方法:

阅读更多

Justified Gallery 使用中文文档

Justified Gallery 是一个方便你创建瀑布流照片的 JavaScript 库,它可以帮助你优雅的排列图片显示,使用它的网站有 500px、Flickr 和 Google.

官网地址:https://miromannino.github.io/Justified-Gallery/

如何使用

下载地址:https://github.com/miromannino/Justified-Gallery/releases

这个库使用的前提是引入 jQuery 如果你的浏览器不是旧的很离谱它都可以很好的工作。

1
2
<link rel="stylesheet" href="css/justifiedGallery.css" />
<script src="js/jquery.justifiedGallery.js"></script>

阅读更多

ECMAScript 6 入门学习笔记

本文是基于阮一峰《ECMAScript 6 入门》做的个人学习笔记,方便今后查阅,所以以下内容基本上绝大部分出自阮一峰的博客。

笔记1:数据类型和语法块

简单说,ECMAScript 是 JavaScript 语言的国际标准,JavaScript 是 ECMAScript 的实现。

let 命令

ES6 新增了 let 命令,用了声明变量,使用它声明的变量只在所在的代码块中有效

1
2
3
4
5
6
7
{
    let a = 10;
    var b = 11;
}

console.log(a);  //Error  is not defined
console.log(b);  // 11

for 循环的计数器就很合适使用 let 命令。

1
2
3
4
for(let i = 0; i < 10; i++){
    //...
}
console.log(i);  //Error

而且 let 不存在变量提升(变量可以在声明之前使用),也就是说我们一般需要先使用 let 来声明变量才能使用。

1
2
3
4
5
6
7
//var
console.log(foo);  //undefined
var foo = 2;

//let
console.log(bar);  //Error bar is not defined
let bar = 3;

阅读更多

JavaScript 高级程序设计(第3版)学习笔记

笔记2:面向对象部分

这是阅读《JavaScript 高级程序设计》书籍的学习笔记,整理和归纳,方便自己今后复习和查阅,这里总结的基本上都是一些比较特殊的知识点,和 Java 等其他高级语言重复的地方不在归纳范围内。建议先阅读第一部分 非面向对象部分。此部分主要是理解 JavaScript 中的面向对象的实现思路以及如何实现继承。

理解对象

ECMAScript 中有两种属性:数据属性和访问器属性。

数据属性

数据属性有 4 个描述其行为的特征。

[[Configurable]]:表示能否通过 delete 删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性。像前面例子中那样直接在对象上定义的属性,它们的这个特性默认值为 true.

[[Enumerable]]:表示能否通过 for-in 循环返回属性。像前面例子中那样直接在对象上定义的属性,它们的这个特性默认值为 true.

[[Writable]]:表示能否修改属性的值。像前面例子中那样直接在对象上定义的属性,它们的这个特性默认值为 true.

[[Value]]:包含这个属性的数据值。读取属性值的时候,从这个位置读;写入属性值的时候,把新值保存在这个位置。这个特性的默认值为 undefined.

1
2
3
var person = {
    name : "XiaoMing"
}

阅读更多

JavaScript 高级程序设计(第3版)学习笔记

笔记1:非面向对象部分

这是阅读 《JavaScript 高级程序设计》 书籍的学习笔记,整理和归纳,方便自己今后复习和查阅,这里总结的基本上都是一些比较特殊的知识点,和 Java 等其他 高级语言 重复的地方不在归纳范围内。第一部分是基础部分(即非面向对象部分),基本上是围绕变量和函数展开的。

分号

ECMAScript 中的语句以一个分号结尾;如果省略分号,则由解析器确定语句的结尾,如下例所示:

1
2
var sum = a + b                 // 即使没有分号也是有效的语句——不推荐 
var diff = a - b;               // 有效的语句——推荐

推荐使用封号

变量

ECMAScript 的变量是松散类型的,所谓松散类型就是可以用来保存任何类型的数据。换句话说,每个变量仅仅是一个用于保存值的占位符而已。定义变量时要使用 var 操作符(注意var是一个关键字),后跟变量名(即一个标识符),如下所示:

1
var message;

此时变量 message 会保存一个特殊的值 undefined, 定义变量的时候可以赋予初始值:

1
2
var message = "hi";
message = 100;   //有效,不推荐

虽然支持松散类型,但是不推荐给变量设置不同类型的值

阅读更多

Vue 探索与实践「转」

本文主要讲了实际业务在结合 vue 开发的过程中的探索与实践。

业务介绍

基于目标用户的孩子画像,打通、聚合京东现有体系关联资源,建立共生关系的开放式生态平台,涵盖满足家庭陪伴孩子成长过程中的多维度需求。覆盖场景场景导购、精准推荐、专属权益等,为京东有孩家庭购物提供优质优购体验。在项目开发中我们遇到的问题主要有以下三个:

  • 接口众多:近 90 个数据接口,数据字段不规范、不统一、难理解,接口开发经常延期且频繁变更;
  • 交互复杂:各种交互及状态,且一态多用,给用户展示的是多状态共同作用的结果,用户操作异步更新页面;
  • 快速上线:同时规划多版本,多版本并行开发。

技术选型

技术选型要对症下药,为了统一管理接口和数据,所采用的框架要有统一的数据中心,能做到视图与逻辑的分离,用数据来驱动视图,项目可以工程化来应对快速上线,以及利于后期维护。从学习成本来说,Vue 更容易上手,更轻量,结合 Vuex 管理状态,视图逻辑和数据的耦合度低,项目结构清晰明了,Vue 的可扩展性也非常好。Vue 核心技术主要有以下几点:

  • 声明式渲染:通过简洁的模板语法来声明式地将数据渲染进 DOM,DOM 状态是数据状态的一个映射。
  • 组件系统:跟大多数前端框架一样,都是把 UI 结构拆解成小的、可复用的组件树,然后像零件一样组装它们,Vue 还有比较独特的地方,那就是单文件组件,把归属于同一组件的模板、脚本、样式放在一个文件中,你不必再同时维护一个组件的多个文件,这样是不是很酷。
  • 客户端路由:结合 vue-router,Vue 就可以实现一个 SPA 应用了,主要通过 hash 值来控制路由,路由又可以传递状态参数给组件。
  • 状态管理:Vue 的基本状态触发过程是,用户行为使得 state 发生变化,state 的变化又触发视图的更新。而结合 Vuex 则可以管理全局的数据。

阅读更多

Nodejs 框架 Koa 介绍和使用

对于 Nodejs 框架和开源软件来说,2018 年是非常有趣的一年。开发者社区讨论了企业赞助对开源项目的作用以及如何维护那些没有经济支持却有数百万人使用的项目。在 Github 星标数量方面,Sails、Koa 和 Express 明显高于其他框架。

Nodejs 框架的 Github star 数量统计 Nodejs 框架的 Github star 数量统计

不得不说,Express 和 Koa 是 Nodejs 目前炙手可热的2大框架。

Express 诞生已有时日, 是一个基于 Nodejs 平台的极简、灵活的 web 应用开发框架,主要基于 Connect 中间件,并且自身封装了路由、视图处理等功能,使用人数众多。

Koa 相对更为年轻, 是 Express 原班人马基于 ES6 新特性重新开发的框架,主要基于 co 中间件,框架自身不包含任何中间件,很多功能需要借助第三方中间件解决,但是由于其基于 ES6 generator 特性的异步流程控制,解决了 “callback hell” 和麻烦的错误处理问题,大受开发者欢迎。

阅读更多

Nodejs实现的一个网络请求模块化基础案例

本篇文章是基于我前面写过的 《Nodejs 结构和创建》 的进一步实践。在我们面对复杂的业务逻辑的时候就需要一个更好的模块和分职责的结构,今天我们通过一个简单的案例来看看如何创建一个路由 Route 并在 Nodejs 中分离业务逻辑。

Nodejs 网络请求

前面提到过使用 Nodejs 启动一个服务很简单,例如我们启动一个默认端口是 3000 的服务:

1
2
3
4
5
6
7
8
9
var http = require('http');

http.createServer(function(req, res){
    res.writeHead(200, {'Content-Type' : 'text/html'});
    res.write('<h1>Node.js</h1>');
    res.end('<p>Hello World</p>');
}).listen(3000);

console.log('HTTP server is listening at prot 3000.');

这些代码没啥特别的地方,可能这里大家比较好奇的是这个 http 模块到底是个什么,这个是 Nodejs 的一个内置的核心模块(模块和包的概念前面已经提到过了),Nodejs 内置核心模块清单如下:

模块名说明
http提供HTTP服务器功能。
url解析URL。
fs与文件系统交互。
querystring解析URL的查询字符串。
child_process新建子进程。
util提供一系列实用小工具。
path处理文件路径。
crypto提供加密和解密功能,基本上是对OpenSSL的包装。

阅读更多

屏蔽网页鼠标右键或键盘F12并解除屏蔽的方法

很多时候我们的网站内容会被别人拿过去做伪原创,这样就比较难受了,自己辛辛苦苦写了大半天结果被别人直接复制黏贴了,为了避免这样的悲剧频繁发生,很多人给自己的网站添加了屏蔽鼠标右键和 F12 键的 js 代码,例如下面是用 jQuery 实现的一段屏蔽鼠标右键的代码:

1
2
3
4
5
$(document).ready(function(){  
    $(document).bind("contextmenu",function(e){   
          return false;   
    });
});

不使用 jQuery 可以修改如下等效的代码:

1
2
3
4
<script language="JavaScript">
     document.οncοntextmenu=new Function("event.returnValue=false;");
     document.onselectstart=new Function("event.returnValue=false;");
</script>

阅读更多

VueJs + Elements + Axios 我的书签页

概述

看了几天 Vue 文档了,今天应该实践一下了,做一个个人书签页面,记录自己的常用书签。

书签页构思草图 书签页构思草图

创建工程

1
vue install webpack "hellovue"

启动预览

1
npm run dev

值得注意的是 npm run dev 实际上执行的是 package.json 中的 script 脚本的如下命令:

1
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

也许你已经猜到了, 这个 webpack.dev.conf.js 文件是配置开发过程中的webpack构建文件。

接下来我们就开始修改 HelloWorld.vue 来实现书签页。

阅读更多

VueJs学习随笔--插槽和异步组件

插槽

Vue 中提供插槽来让你替换组件中的部分内容, 例如你定义了一个组件 <navigation-link> :

1
2
3
<a v-bind:href="url" class="nav-link">
  <slot></slot>
</a>

这里的 <slot> 就是可以替换的内容部分,如果你这样使用:

1
2
3
<navigation-link url="/profile">
  Your Profile
</navigation-link>

阅读更多

VueJs学习随笔--组件化

组件基础

组件是可复用的 Vue 实例, 每个组件都有一个名字,我们可以直接使用名字来引入一个组件。

定义一个名为 button-counter 的新组件:

1
2
3
4
5
6
7
8
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

阅读更多