Tag: JavaScript | Andrewsy's Space

2024-01-19

JavaScript作为一种强大而灵活的编程语言，为开发者提供了丰富的工具和功能。其中，生成器（Generators）是一项引人注目的特性，它们可以帮助我们在编写异步代码时更加轻松地管理流程和状态。本文将深入探讨JavaScript生成器的

2024-01-03

深入理解ES6中的Symbol类型

Frontend

在ES6（ECMAScript 2015）中引入了一种新的基本数据类型——Symbol。Symbol类型的引入丰富了JavaScript语言，为开发者提供了一种独一无二的标识符。本文将深入探讨Symbol的特性、用途以及代码示例。 1. S

2017-03-16

聊聊前端优化手段防抖

Frontend

在前端开发中，防抖（Debouncing） 是一种常用的优化技术，用于处理频繁触发的事件，如浏览器窗口的resize、input输入等。防抖的目标是在事件被触发后，等待一段时间，只执行一次事件处理函数，以避免频繁的重复操作。

防抖的原理很简单：当一个事件被触发时，立即设置一个定时器，在规定的时间内没有再次触发该事件时，执行事件处理函数。如果在定时器规定的时间内再次触发了事件，那么就清除前一个定时器，并重新设置新的定时器。这样，只有在事件停止触发一段时间后，才会执行事件处理函数。

以下是一个防抖的基本实现示例（使用 JavaScript）：

function debounce(func, delay) {
    let timer = null;
    return function () {
        const context = this;
        const args = arguments;

        clearTimeout(timer); // 每次执行时，清除之前的定时器
        timer = setTimeout(function () { //设置新的定时器
            func.apply(context, args);
        }, delay);
    }
}

const debounceFunction = debounce((args) => {
    console.log("Debounce function called", args);
}, 500);

window.addEventListener('resize', debounceFunction);

2015-09-23

The initialization of the angular ngModel

Frontend

Recently, I’ve encoutered a weird problem in the project, it’s about the value of the ngModel. Let me explain the problem. see the code

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap.min.css"/>
	<script src="../../bower_components/angular/angular.min.js"></script>
    <script src="../../js/ngModel.js"></script>
</head>
<body ng-app="ModelApp">
	<div class="page-header">
		<h1 class="text-center">ng-model initialize example</h1>
	</div>
	<div class="panel panel-danger" ng-controller="ModelController1">
		<div class="panel-heading">the angular model without initialize:</div>
		<div class="panel-body">
			<div>
				<input type="text" id="myInput1" ng-model="myModel1" value="A"/>
				<label for=""> -> This input tag bundles the ngModel which name is 'myModel1'</label>
			</div>
			<div>
				<input disabled="true" id="displayModelValue1" type="text" value="{{myModel1}}"/>
				<label for=""> -> This input tag displays the value of the above ngModel</label>
			</div>
		</div>
	</div>
</body>
</html>

2015-07-30

Using TSD to improve javascript intellisense of IDE

Frontend

As we know, it’s very difficult to make the IDE to recognise the function of JavaScript, we called code intellisense, because JavaScript is weak language. So how to solve this problem. There is a way.

TSD is TypeScript Definition manager for DefinitelyTyped. It can search and install TypeScript definition files directly from repository. The TypeScript definition file actually is TypeScript file, and TypeScript is strong type language. So IDE can intellisense the code, like Java and C#.

TypeScipt is also like CoffeeScript, it can be compiled to JavaScript. It is developed by Microsoft company. To See the TypeScript, go to this official website.

2015-05-20

Analyze call function of javascript

Frontend

The call() function is a fantastic method in javascript. It makes some people confusion some times, like me. Here let us to make it clear.

Syntax

call([thisObj[,arg1[, arg2[, [,.argN]]]]])

thisObj (optional): it’s object which can be act as currently this object.
arg1, arg2, argN (optional) : the parameters which can be passed to the method.

The call method can be used to instead of another object to invoke a method. It can change the object context of a function to a new object which thisObj referenced.

2015-05-19

Destroy your website

Frontend

Ha, Confusion? Don’t, it’s true. Let me introduce to you how to destroy the website you want.
Click the below button:

Use the Arrow key to move the rocket, and press the Space key to fire. And also Press and hold B to find targets which can be destroy.

2015-05-16

AngularJs - angular.extend()

Frontend

The angular.extend() function has very powerful to copy object to another object, including all of properties from the source object(s).

Usage

angular.extend(dst, src);

dst: destination object
src: source object(s)

return: refercen to dst object

2014-12-19

What is Ractive.js

Frontend

Ractive.js is a template-driven UI library, it transforms your templates into blueprints for application that are interative by default. Ractive.js is very similar with AngularJS, and it supports Two-way binding, animations as well. Another powerfull feature is SVG support.

Template + Data = UI

You just need to prepare your html template and datas, and the Ractive.js will automatically to combine them then give you what you want. Whe you change your datas, it intelligently updates the real DOM.

Usage

First, you need to include Ractive.js to your application. Just like include other javascript librarys easily. You can download it to local and then include it. And if you want include latest version, you just put below codes to your project.

1	<script src='http://cdn.ractivejs.org/latest/ractive.js'></script>