ตัวอย่างคือส่วนของโค้ดที่ใช้ซ้ำได้ซึ่งคุณจะใส่ลงในเครื่องมือแก้ไขข้อความได้อย่างง่ายดายและรวดเร็ว
วิธีการทํางานคือคุณเริ่มพิมพ์โค้ดสั้นๆ ป๊อปอัปจะปรากฏขึ้นและคุณเพียงแค่กด Enter สําหรับข้อมูลโค้ดที่ต้องการ คุณก็จะเห็นชุดโค้ดที่กําหนดไว้ล่วงหน้า
ข้อเดียวที่จำได้ก็คือข้อมูลโค้ดจะทำงานได้เมื่อไฟล์ที่คุณกำลังแก้ไขมีส่วนขยายเฉพาะเท่านั้น (เช่น ข้อมูลโค้ด JavaScript จะทำงานเมื่อแก้ไขไฟล์ที่ลงท้ายด้วย .js เท่านั้น)
ข้อมูลโค้ด JS และ NodeJS
แพ็กเกจข้อมูลโค้ด JavaScript และ NodeJS ของ Zeno Rocha เป็นแพ็กเกจข้อมูลโค้ดแบบง่ายที่ยอดเยี่ยม ซึ่งช่วยให้คุณเขียน JavaScript ทั่วไปได้อย่างรวดเร็ว
ด้านล่างนี้คือตัวอย่างบางส่วนของโค้ดชวเลขและโค้ดที่สร้างขึ้น
ae (เพิ่ม Listener เหตุการณ์)
document.addEventListener('event', function(e) {
// body...
});
cel (สร้างองค์ประกอบ)
document.createElement(elem);
cdf (สร้างส่วนย่อยเอกสาร)
document.createDocumentFragment(elem);
pr (ต้นแบบ)
ClassName.prototype.methodName = function(arguments) {
// body...
}
iife (นิพจน์ฟังก์ชันที่เรียกใช้ทันที)
(function(window, document, undefined) {
// body...
})(window, document);
นี่คือโพสต์ของ Ben Alman ใน iife's สำหรับ Matt โดยเฉพาะ
Zeno มีรายการคำสั่งทั้งหมดที่คุณใช้ได้ในที่เก็บ GitHub (และหน้าแพ็กเกจ)
ชุดเครื่องมือ ES2015
ES2015 (หรือที่เรียกอีกชื่อหนึ่งว่า ES6) นั้นเจ๋งมาก แถมมีสิ่งที่ยอดเยี่ยมที่สุดด้วยซ้ำ เรามีแพ็กเกจตัวอย่างสำหรับใช้งานด้วย
หากต้องการใช้แพ็กเกจนี้และข้อมูลโค้ด คุณต้องติดตั้ง Babel ผ่าน NPM
ติดตั้ง NPM -G Babel
โปรดสังเกตอักษรตัวพิมพ์ใหญ่เมื่อขึ้นต้นรหัสชวเลขบางรหัส
สัญญา
Promise((resolve, reject) => {
});
คลาส
class Classname extends AnotherClass {
constructor(args) {
// code
}
// methods
}
ออบเจ็กต์
var obj = {
__proto__: theProtoObj,
handler,
toString() {
return "object";
}
}
ดูรายการทั้งหมดของข้อมูลโค้ดที่รองรับได้ที่หน้าการควบคุมแพ็กเกจ Sublime
ขออภัย แพ็กเกจนี้ไม่พร้อมใช้งานสำหรับ Atom ค่าที่เทียบเท่าที่ใกล้เคียงที่สุดน่าจะเป็นแพ็กเกจนี้ชื่อ "es6-javascript"
แพ็กเกจคอมโพเนนต์โพลิเมอร์และเว็บ
ไม่ต้องเหนื่อยกับการเขียนต้นแบบสำหรับ Polymer ด้วยข้อมูลโค้ด Polymer และ Web Component สุดเจ๋งของ Mr Dodsons
hi (การนำเข้า HTML)
<link rel="import" href="bower_components//.html">
pe (องค์ประกอบโพลีเมอร์)
<dom-module id="">
<style>
:host {
display: block;
}
</style>
<template>
</template>
<script>
Polymer({
is: ''
});
</script>
</dom-module>
แสดงความรู้สึกด้วยตัวอย่าง
สุดท้ายนี้สำหรับแฟนๆ React เรามีแพ็กเกจสำหรับคุณด้วย แยกองค์ประกอบและโค้ดที่เขียนโดยทั่วไปด้วยข้อมูลโค้ดเหล่านี้
rcc (โครงกระดูกคลาสคอมโพเนนต์)
var React = require('react');
var PropTypes = React.PropTypes;
var = React.createClass({
render: function() {
return (
<div />
);
}
});
module.exports = ;
scu (instructionsComponentUpdate)
shouldComponentUpdate: function(nextProps, nextState) {
},
props
this.props.
state
this.state.
แพ็กเกจ MOAR
มีแพ็กเกจอื่นๆ มากมายที่เสนอตัวอย่างสำหรับเฟรมที่ต่างกัน ดังนั้นหากคุณพบว่าตัวเองเขียนโค้ดเดิมซ้ำๆ อาจมีคนเขียนแพ็กเกจที่เคยใช้ เพียงทำการค้นหาในโปรแกรมจัดการแพ็กเกจสำหรับเครื่องมือแก้ไขของคุณ (Sublime | Atom)