function(){}定义了一个匿名函数
给它加个括号,后面再加个括号这个函数就相当于被调用的,就执行了。
后面的那个括号还可以传参数给里面的函数,而且会形成闭包,写jquery插件的时候不常用这么一个模式么
(function($){
// your code
})(jQuery)
HBuilder默认只提示标准的HTML5语法。很多框架有自己的HTML、JS语法,也希望在开发中被提示。HBuilder提供如下扩展方案。
JS部分
基于sdocml的框架语法库
对工程点右键,引入框架语法,可以看到我们已经做了的一些常用框架语法库,包括jquery、zepto、mui。
其他框架语法,大家可参考这些语法库的sdocml文件格式,来自己做。
做好后提交到 https://github.com/dcloudio/WebFrameworkGrammar 以共享给更多开发者。
jsdoc
HBuilder兼容jsdoc规范,如果开发者的jsdoc写的完善,一样可以被HBuilder的代码助手良好的提示出来。
jsdoc+的扩展规范地址:http://ask.dcloud.net.cn/article/129
jsdoc的好处是分发容易,跟着js文件一起分发;坏处是造成js文件体积变大,影响性能。
常见的做法是提供2个js文件给开发者,比如ext-dev.js和ext-min.js。dev包括jsdoc而min是压缩版。
另外注意js文件的体积,比如ext-dev.js的官方文件高达6M,这样的文件HBuilder解析起来还是有压力的。
js代码块
我们也可以通过代码块的方式来扩展js提示。
点菜单工具-扩展代码块-js,可以看到详细说明和教程。
代码块并不是简单的xml配置,而是可以使用ruby编程的,功能很强大。
扩展的代码块,可以提交到 https://github.com/dcloudio/HBuilderRubyBundle 以共享给更多开发者。
HTML部分
HTML部分目前只能通过代码块扩展,代码块的扩展包括标签和属性2部分,在工具-扩展代码块-HTML里有说明。
扩展的代码块,可以提交到 https://github.com/dcloudio/HBuilderRubyBundle 以共享给更多开发者。
<script>
/* // 定义一个Person类型
class Person{
// 构造函数
constructor ( name,age,gender ){
this.name = name,
this.age = age
this.gender = gender
}
// 给类添加一个方法
sayHi() {
console.log(this.name,this.age,this.gender)
}
//用这种方式定义的方法,是将方法定义到类的原型对象中去
sayHello() {
console.log('hello!')
}
} */
// 继承
/* // ES5:
// 定义一个人类
function Person(name, age, gender) {
this.name = name
this.age = age
this.gender = gender
}
Person.prototype.eat = function () {
console.log(`我叫${this.name},我在吃饭...`)
}
Person.prototype.say = function () {
console.log(`大家好!我叫${this.name} 今年${this.age}岁 性别是${this.gender}`)
}
// 通过Person类型,创建出了两个对象
let p1 = new Person('刘德龙', 20, '男')
p1.say()
p1.eat()
let p2 = new Person('高德政', 21, '男')
p1.say()
p1.eat()
console.log('-------------------------------------')
//定义了学生类
function Student(name, age, gender, no) {
// 继承Person类的属性
Person.call(this, name, age, gender)
// Student类特有的属性
this.no = no
}
// 给Student类的prototype属性 new 一个Person类型的对象
// 用于继承Person类的方法
Student.prototype = new Person()
Student.prototype.study = function () {
console.log(`我叫${this.name},我的学号是${this.no},我在学习...`)
}
let s1 = new Student('张三', 20, '女', '1001')
s1.study()
s1.eat()
s1.say() */
// ES6:
// 定义人类
class Person {
// 定义构造函数
constructor(name, age, gender) {
this.name = name
this.age = age
this.gender = gender
}
// 说话方法
say() {
console.log(`大家好!我叫${this.name} 今年${this.age}岁 性别是${this.gender}`)
}
// 吃方法
eat() {
console.log(`我叫${this.name},我在吃饭...`)
}
}
// 每个类型都一个prototype属性,我们称它为类的原型对象。
// 类的 原型对象中的成员 ,给类的 所有实例 (实例就是类创建出来的对象) 共享 。
console.log(Person.prototype)
// 通过Person类型,创建出了两个对象
let p1 = new Person('刘德龙', 20, '男')
console.log(p1)
p1.say()
p1.eat()
let p2 = new Person('高德政', 21, '男')
console.log(p2)
p1.say()
p1.eat()
console.log('-------------------------------------')
// extends关键字,表示继承
class Student extends Person{
// 构造函数
constructor(name, age, gender,no){
// 调用父类的构造函数
super(name, age, gender)
// 学生特有的属性
this.no = no
}
//学生学习的方法
study(){
console.log(`我叫${this.name},我的学号是${this.no},我在学习...`)
}
}
let s1 = new Student('张三', 20, '女', '1001')
console.log(s1)
s1.study()
s1.eat()
s1.say()
</script>